feat: integrate engagement stats with backend API

[leeyousuf]

Description

This PR integrates the Engagement dashboard with the backend API and fixes a display issue with null values from the stats endpoint.

What were you told to do?

Connect the Engagement page to the real API endpoints as specified in the Swagger documentation (SkillBridge API 1.0.0).

What did you do?

• Wired up the Engagement stats endpoint (/admin/engagement/stats) in src/services/engagement.ts
• Integrated the API call and data handling in the Engagement page
• Fixed null value bug for avg_time_to_retake_after_gate_clears_days.value that was displaying "null days"
• Improved null safety in engagement-stat-cards.tsx so it shows proper empty state ("—") when data is not available yet

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)

Check List

• My code follows the code style of this project.
• This PR does not contain plagiarized content.
• The title and description of the PR are clear and explain the approach.
• I am making a pull request against the dev branch (left side).
• My commit message style matches our requested structure.
• My code additions will not fail code linting checks or unit tests.
• I am only making changes to files I was requested to.

---

Summary by CodeRabbit

• New Features
  • Engagement dashboards now show live data from authenticated API requests instead of placeholder content.
  • Charts and stat cards now support updated data formats, including clearer trend indicators and formatted time-to-retake values.
• Bug Fixes
  • Improved empty states across engagement charts with clearer fallback messaging.
  • Track and attempt labels are now displayed more consistently in charts.

[coderabbitai]

Warning

Review limit reached

@leeyousuf, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 48 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: fcb2bc3d-7754-4d58-b591-79c3f61af424

📥 Commits

Reviewing files that changed from the base of the PR and between 3dcbb75 and 003ba08.

📒 Files selected for processing (6)

• src/actions/engagement.ts
• src/components/engagement/engagement-stat-cards.tsx
• src/components/engagement/minor-assessment-uptake-chart.tsx
• src/components/engagement/retake-dropoff-chart.tsx
• src/mocks/engagement.ts
• src/types/api/engagement.ts

📝 Walkthrough

Walkthrough

Engagement server actions now call authenticated /admin/engagement/* endpoints instead of returning mock data, unwrapping nested API envelope responses. Engagement API types are restructured to snake_case, bucketed shapes. Stat cards and charts are updated to consume these new shapes, including trend normalization and Empty-state rendering.

Changes

Engagement stats and charts real API integration

Layer / File(s)	Summary
Engagement API type contracts src/types/api/engagement.ts	EngagementStats fields become snake_case StatMetric typed; RetakeDropoffData and MinorAssessmentUptakeData change from point-array shapes to bucketed { buckets; empty; empty_message } shapes; a new Nested<T> generic type is added.
Server actions calling real endpoints src/actions/engagement.ts	getEngagementStats, getRetakeDropoff, and getMinorAssessmentUptake switch from mock constants to authenticated authApi.get calls with unwrapData, returning unwrapped .data; uptake conditionally sends a track query param.
Stat cards trend normalization src/components/engagement/engagement-stat-cards.tsx	New toTrend helper converts StatMetric trend data into signed StatCardTrend values; cards read snake_case fields and format the retake-days value conditionally.
Minor assessment uptake chart bucket rendering src/components/engagement/minor-assessment-uptake-chart.tsx	Chart data reads from data?.buckets, track options render via TRACK_LABELS, and the empty state uses the shared Empty component with data?.empty_message.
Retake dropoff chart bucket rendering src/components/engagement/retake-dropoff-chart.tsx	Chart data reads from data?.buckets, series renamed to retakes, X-axis ticks formatted as "Attempt {value}", and the empty state uses the shared Empty component with data?.empty_message.

Estimated code review effort: 3 (Moderate) | ~25 minutes

Suggested reviewers: ayomikun-ade, mrcoded

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly summarizes the main change: wiring engagement stats to the backend API.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feature/connect-engagement-endpoints

---

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.}