feat(dashboards): wire north star into ED dashboard

[mrautela365]

Summary

• Import NorthStarMetricsComponent into ED dashboard shell
• Add @defer (on idle) section with skeleton placeholder for north star metrics grid
• After this PR merges, selecting Executive Director persona renders the full dashboard with both marketing overview and north star metrics

Context

PR 5 of 5 — the "flip the switch" PR. Trivial wiring only (34 lines changed).

Depends on: #349 (north star metrics)
PR sequence: #345 → #346 → #347 → #348 → #349 → PR 5 (this)

Build safety

• After merge, the complete ED dashboard is live
• All components are deferred (@defer (on idle)) with skeleton placeholders

Test plan

• yarn build passes
• yarn lint passes
• License header check passes
• Select Executive Director persona → full dashboard renders
• Marketing cards show live Snowflake data
• North star cards show mock data with working drawers

LFXV2-1220

🤖 Generated with Claude Code

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 83daf45f-e6a3-4dd0-8c38-19e115fc9a81

📥 Commits

Reviewing files that changed from the base of the PR and between 2a341ac and cc29276.

⛔ Files ignored due to path filters (1)

• yarn.lock is excluded by !**/yarn.lock, !**/*.lock

📒 Files selected for processing (51)

• apps/lfx-one/e2e/helpers/auth.helper.ts
• apps/lfx-one/e2e/helpers/global-setup.ts
• apps/lfx-one/e2e/marketing-dashboard.spec.ts
• apps/lfx-one/package.json
• apps/lfx-one/src/app/layouts/dev-toolbar/dev-toolbar.component.ts
• apps/lfx-one/src/app/layouts/main-layout/main-layout.component.ts
• apps/lfx-one/src/app/modules/dashboards/executive-director/components/email-ctr-drawer/email-ctr-drawer.component.html
• apps/lfx-one/src/app/modules/dashboards/executive-director/components/email-ctr-drawer/email-ctr-drawer.component.scss
• apps/lfx-one/src/app/modules/dashboards/executive-director/components/email-ctr-drawer/email-ctr-drawer.component.ts
• apps/lfx-one/src/app/modules/dashboards/executive-director/components/engaged-community-drawer/engaged-community-drawer.component.html
• apps/lfx-one/src/app/modules/dashboards/executive-director/components/engaged-community-drawer/engaged-community-drawer.component.scss
• apps/lfx-one/src/app/modules/dashboards/executive-director/components/engaged-community-drawer/engaged-community-drawer.component.ts
• apps/lfx-one/src/app/modules/dashboards/executive-director/components/flywheel-conversion-drawer/flywheel-conversion-drawer.component.html
• apps/lfx-one/src/app/modules/dashboards/executive-director/components/flywheel-conversion-drawer/flywheel-conversion-drawer.component.scss
• apps/lfx-one/src/app/modules/dashboards/executive-director/components/flywheel-conversion-drawer/flywheel-conversion-drawer.component.ts
• apps/lfx-one/src/app/modules/dashboards/executive-director/components/marketing-overview/marketing-overview.component.html
• apps/lfx-one/src/app/modules/dashboards/executive-director/components/marketing-overview/marketing-overview.component.ts
• apps/lfx-one/src/app/modules/dashboards/executive-director/components/member-acquisition-drawer/member-acquisition-drawer.component.html
• apps/lfx-one/src/app/modules/dashboards/executive-director/components/member-acquisition-drawer/member-acquisition-drawer.component.scss
• apps/lfx-one/src/app/modules/dashboards/executive-director/components/member-acquisition-drawer/member-acquisition-drawer.component.ts
• apps/lfx-one/src/app/modules/dashboards/executive-director/components/member-retention-drawer/member-retention-drawer.component.html
• apps/lfx-one/src/app/modules/dashboards/executive-director/components/member-retention-drawer/member-retention-drawer.component.scss
• apps/lfx-one/src/app/modules/dashboards/executive-director/components/member-retention-drawer/member-retention-drawer.component.ts
• apps/lfx-one/src/app/modules/dashboards/executive-director/components/north-star-metrics/north-star-metrics.component.html
• apps/lfx-one/src/app/modules/dashboards/executive-director/components/north-star-metrics/north-star-metrics.component.ts
• apps/lfx-one/src/app/modules/dashboards/executive-director/components/paid-social-reach-drawer/paid-social-reach-drawer.component.html
• apps/lfx-one/src/app/modules/dashboards/executive-director/components/paid-social-reach-drawer/paid-social-reach-drawer.component.scss
• apps/lfx-one/src/app/modules/dashboards/executive-director/components/paid-social-reach-drawer/paid-social-reach-drawer.component.ts
• apps/lfx-one/src/app/modules/dashboards/executive-director/components/social-media-drawer/social-media-drawer.component.html
• apps/lfx-one/src/app/modules/dashboards/executive-director/components/social-media-drawer/social-media-drawer.component.scss
• apps/lfx-one/src/app/modules/dashboards/executive-director/components/social-media-drawer/social-media-drawer.component.ts
• apps/lfx-one/src/app/modules/dashboards/executive-director/components/website-visits-drawer/website-visits-drawer.component.html
• apps/lfx-one/src/app/modules/dashboards/executive-director/components/website-visits-drawer/website-visits-drawer.component.scss
• apps/lfx-one/src/app/modules/dashboards/executive-director/components/website-visits-drawer/website-visits-drawer.component.ts
• apps/lfx-one/src/app/modules/dashboards/executive-director/executive-director-dashboard.component.html
• apps/lfx-one/src/app/shared/components/metric-card/metric-card.component.html
• apps/lfx-one/src/app/shared/components/metric-card/metric-card.component.ts
• apps/lfx-one/src/app/shared/components/persona-selector/persona-selector.component.ts
• apps/lfx-one/src/app/shared/components/sidebar/sidebar.component.ts
• apps/lfx-one/src/app/shared/services/analytics.service.ts
• apps/lfx-one/src/app/shared/services/persona.service.ts
• apps/lfx-one/src/server/controllers/analytics.controller.ts
• apps/lfx-one/src/server/routes/analytics.route.ts
• apps/lfx-one/src/server/services/project.service.ts
• packages/shared/src/constants/chart.constants.ts
• packages/shared/src/constants/dashboard-metrics.constants.ts
• packages/shared/src/constants/index.ts
• packages/shared/src/interfaces/analytics-data.interface.ts
• packages/shared/src/interfaces/persona.interface.ts
• packages/shared/src/utils/index.ts
• packages/shared/src/utils/number.utils.ts

Disabled knowledge base sources:

• Jira integration is disabled

You can enable these sources in your CodeRabbit configuration.

---

Walkthrough

Adds North Star metrics and related drawer drilldowns to the Executive Director dashboard, refactors many drawers to lazy-load data with loading states and OnPush detection, centralizes chart/options and number-format utilities, updates persona handling, extends analytics backend/routes/services, and adds Playwright E2E coverage and test infra updates.

Changes

Cohort / File(s)	Summary
E2E Tests & Test Infra apps/lfx-one/e2e/helpers/auth.helper.ts, apps/lfx-one/e2e/helpers/global-setup.ts, apps/lfx-one/e2e/marketing-dashboard.spec.ts, apps/lfx-one/package.json	Auth0 login handles optional consent and longer redirect wait; global-setup loads repo .env, uses env creds and persists Playwright auth; new marketing-dashboard E2E spec added; Playwright devDependency pinned to 1.58.0.
Persona & Layout apps/lfx-one/src/app/layouts/.../dev-toolbar.component.ts, .../main-layout.component.ts, .../persona-selector.component.ts, .../sidebar.component.ts, apps/lfx-one/src/app/shared/services/persona.service.ts, packages/shared/src/interfaces/persona.interface.ts	Replaced many literal persona checks with isBoardScopedPersona / personaService.isBoardScoped; removed router navigation side-effects; adjusted visibility/usage and added board-scoped helper/set.
Executive Director — Overview & North Star apps/lfx-one/src/app/modules/dashboards/executive-director/..., .../marketing-overview/*, .../north-star-metrics/*	Integrated North Star metrics (member retention/acquisition, engaged community, flywheel conversion) into marketing overview, removed standalone NorthStar component, added metric cards and new drawer components, expanded marketingData fetches and insights logic.
Drawers — Lazy Loading, UI & Insights apps/lfx-one/src/app/modules/dashboards/executive-director/components/*-drawer/* (email-ctr, engaged-community, flywheel-conversion, member-acquisition, member-retention, paid-social-reach, social-media, website-visits)	Converted many drawers from input-driven to lazy-loaded drawerData with drawerLoading; added OnPush, styleUrls, lfx-button/lfx-card/lfx-tag UI changes; grouped recommended-actions/key-insights into "Needs Your Attention" / "Performing Well"; chart options now created via shared factories; changed action iconClass→actionType.
Metric Card & Dashboard Shell apps/lfx-one/src/app/shared/components/metric-card/*, apps/lfx-one/src/app/modules/dashboards/executive-director/executive-director-dashboard.component.html	Added styleClass input and conditional width handling to metric-card; tightened chart rendering guard; updated dashboard placeholder/testid and skeleton counts/sizes.
Analytics Client Service apps/lfx-one/src/app/shared/services/analytics.service.ts	Added client methods: getMemberRetention, getMemberAcquisition, getEngagedCommunity, getFlywheelConversion with catch-and-fallback defaults.
Backend: Controller, Routes, Service apps/lfx-one/src/server/controllers/analytics.controller.ts, apps/lfx-one/src/server/routes/analytics.route.ts, apps/lfx-one/src/server/services/project.service.ts	Added slug/name validation constants; new controller methods and routes for four North Star endpoints; project.service queries against ANALYTICS.PLATINUM_LFX_ONE.* views, added date filters, changed CTR comparison to 6‑month average, replaced some CAC logic with revenue-oriented fields, and added robust try/catch defaults.
Shared Charting & Formatting Utilities packages/shared/src/constants/chart.constants.ts, packages/shared/src/constants/index.ts, packages/shared/src/utils/number.utils.ts, packages/shared/src/utils/index.ts	Added DASHBOARD_TOOLTIP_CONFIG, axis defaults, and factory helpers createBar/Line/HorizontalBarChartOptions with deepMerge support; added formatNumber and formatCurrency utilities (compact K/M using 999_950 threshold); re-exported from barrels.
Shared Interfaces & Action Icon Map packages/shared/src/interfaces/analytics-data.interface.ts, packages/shared/src/constants/dashboard-metrics.constants.ts	Updated analytics interfaces (added/removed/renamed fields), introduced MarketingActionType and replaced iconClass → actionType; added MARKETING_ACTION_ICON_MAP mapping action types to icons; updated JSDoc schema refs to PLATINUM_LFX_ONE.

Sequence Diagram(s)

sequenceDiagram
  participant Browser as Browser (Marketing Overview)
  participant Client as AnalyticsService (client)
  participant Server as AnalyticsController (server)
  participant DB as ProjectService / Snowflake

  Browser->>Client: request North Star metric (e.g. getMemberRetention)
  Client->>Server: HTTP GET /api/analytics/member-retention?foundationSlug=...
  Server->>Server: validate foundationSlug / foundationName
  Server->>DB: query ANALYTICS.PLATINUM_LFX_ONE view
  DB-->>Server: metric rows or fallback defaults
  Server-->>Client: 200 JSON response
  Client-->>Browser: resolved metric data (render metric card / open drawer)

Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'feat(dashboards): wire north star into ED dashboard' accurately and concisely describes the main change: integrating the NorthStarMetricsComponent into the Executive Director dashboard.
Description check	✅ Passed	The description clearly relates to the changeset by explaining the purpose (import component, add defer section with skeleton), context (PR 5 of 5, final wiring), and test plan, all aligned with the actual changes.
Docstring Coverage	✅ Passed	Docstring coverage is 90.00% which is sufficient. The required threshold is 80.00%.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/LFXV2-1220-pr5-dashboard-shell

---

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

[github-actions]

🚀 Deployment Status

Your branch has been deployed to: https://ui-pr-350.dev.v2.cluster.linuxfound.info

Deployment Details:

• Environment: Development
• Namespace: ui-pr-350
• ArgoCD App: ui-pr-350

The deployment will be automatically removed when this PR is closed.

[Copilot]

Pull request overview

Wires the previously added North Star metrics section into the Executive Director (ED) dashboard shell, using Angular deferred loading with a skeleton placeholder to keep initial render lightweight.

Changes:

• Import NorthStarMetricsComponent into the ED dashboard standalone component imports.
• Render the north star metrics section in the ED dashboard template inside @defer (on idle) with a 4-card skeleton placeholder.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.

File	Description
apps/lfx-one/src/app/modules/dashboards/executive-director/executive-director-dashboard.component.ts	Adds NorthStarMetricsComponent to the component’s imports so it can be used in the ED dashboard template.
apps/lfx-one/src/app/modules/dashboards/executive-director/executive-director-dashboard.component.html	Adds a deferred North Star metrics section with a skeleton placeholder, placed above the marketing overview section.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[github-actions]

🧹 Deployment Removed

The deployment for PR #350 has been removed.