# Prompt — Recreate the Advocacy Leaderboard dashboard

Copy everything below the line and paste it to an AI assistant that has the Ordinal MCP installed.

---

Build a single-file `index.html` that turns one Ordinal workspace into an **employee-advocacy leaderboard for the quarter**: a points scoreboard across every connected scheduling profile, podium for the top three, full ranked table, weekly activity charts, top posts, and a derived activity feed. Use the Ordinal MCP for every number — never invent metrics. Visual style is bright + editorial (warm white + bold orange), reference `examples/dashboards/advocacy-leaderboard/DESIGN.md` (Outfit + Instrument Serif italic + JetBrains Mono via Google Fonts, orange `#E8530E` on warm white `#FFFCF8`, 1000px max width, 10px radius cards, 100px-radius pills, subtle SVG grain overlay).

> The "advocates" are the human-owned `schedulingProfiles[]` in the workspace. Department / badges / point rules don't live in Ordinal — define them locally and document them in the "How Points Work" section.

## Data to fetch from the Ordinal MCP

1. **Workspace + advocates.** `ordinal_get_workspace_context` (no slug → list workspaces; pick one) → call again with `workspaceSlug` to receive `schedulingProfiles[]`. Keep id, channel, displayName, vanity/handle, profileImageUrl. Filter to LinkedIn personal profiles (skip the company page) — these are your advocates. Capture `users[]` if you need names that aren't on the profile.

2. **Per-advocate analytics.** For each advocate profile, call `ordinal_get_analytics` with `type: "posts"`, `platform: "LinkedIn"`, that profile's `id`, and a `startDate` / `endDate` covering the quarter. From each post collect impressions, likes, comments, shares, engagement rate, `publishAt`, and the post URL.

3. **Compute points per advocate** using the rules shown in the "How Points Work" panel:
   - +25 per published post
   - +2 per engagement (likes + comments + shares)
   - +1 per 100 impressions
   - +50 weekly streak bonus per consecutive week with ≥1 post (apply once weeks ≥ 4)
   - +100 per challenge completed (see step 6)
   - +200 viral bonus per post with ≥50K impressions
   Rank advocates by total points. Top three feed the podium; everyone feeds the full table (rank, advocate, department, posts, impressions, eng rate, current weekly streak, points).

4. **Quarterly goal progress.** Sum impressions across all advocates from step 2 → render the progress bar against a hard-coded target (e.g. 2M impressions). Include 0 / 25% / 50% / 75% / 100% milestone tick labels.

5. **Program overview KPIs (4 tiles).** From step 2: total reach, posts published, active advocates (advocates with ≥1 post in the window), avg engagement rate. Compute deltas vs. the prior quarter by re-running step 2 with the previous-quarter date range.

6. **Active challenges (4 cards).** Define the challenges locally (e.g. *Post 3x This Week*, *Conversation Starter*, *Cross-Dept Collab*, *10K Club*). For each, derive progress from the analytics in step 2 (e.g. count advocates whose posts in the last 7 days ≥ 3; count posts with ≥50 comments; count posts with ≥10K impressions). Show progress fraction + bar + end date.

7. **Top posts of the quarter (~7 rows).** Sort all step-2 posts by impressions desc; for each show author + post title + impressions + likes + comments. Resolve full title via `ordinal_search_content` (`postId: ...`) if the analytics row only has a snippet.

8. **Charts.**
   - *Posts per week:* bar chart, count posts per ISO week of `publishAt` across all advocates.
   - *Impressions by department:* doughnut. Department is **not** in the MCP — let the user provide a `{ profileId → department }` mapping or display "Unassigned" until they do.

9. **Achievements (badges grid, 8 cards).** Derive from step 2 (e.g. *Viral Hit* = any post ≥100K imp, *On Fire* = streak ≥12 weeks, *Thought Leader* = 5+ posts with 50+ comments, *Quick Draw* = posts where `publishAt` − idea-creation timestamp < 1 hour — use `ordinal_search_content` with `contentType: "idea"` to back this if needed). For each badge, name 1–2 holders by display name.

10. **Recent activity feed (~9 rows).** Derive from the analytics + computed points: leveling up to a tier, completing a challenge, hitting a streak, going viral (≥100K), unlocking a badge, onboarding (advocates whose first post in the window happened in the last 7 days). Stamp each with a relative time ("2 hours ago", "3 days ago") computed from `publishAt`.

## Layout (in order)

1. **Hero banner** — full-bleed orange gradient with eyebrow ("Employee Advocacy Program"), big "ADVOCACY" headline + italic serif "Leaderboard" wordmark, subtitle, period pill, "Powered by Ordinal" badge.
2. **01 — Quarterly Goal** — single card: title, current/target fraction, progress bar with gradient fill, milestone labels.
3. **02 — Program Overview** — 4-tile stat grid + a participation card showing avatar stack + "X of Y advocates posted this month · N% participation".
4. **03 — How Points Work** — 6-tile points-rule grid (the rules from step 3) so the scoring is transparent.
5. **04 — Active Challenges** — 2×2 grid of challenge cards (orange top bar = active, grey = upcoming, green = completed) with progress bar and "X of Y on track" + end date.
6. **05 — Top Advocates Podium** — three cards (2nd / 1st / 3rd, 1st elevated) with rank circle, avatar, name, department pill, mini stats (posts / reach / eng), points total, podium bar (orange / charcoal / muted).
7. **06 — Full Leaderboard** — table: rank #, advocate (avatar + name), department pill, posts, impressions, eng rate, streak (🔥 N), reach bar, points (right-aligned, mono).
8. **07 — Activity & Performance** — two charts side-by-side: posts per week (bar) + impressions by department (doughnut).
9. **08 — Top Posts This Quarter** — list rows with author avatar/name, post title, impressions / likes / comments.
10. **09 — Achievements** — 4×2 grid of badge cards (emoji icon, name, criteria, holders).
11. **10 — Recent Activity** — feed list with emoji icons + relative timestamps.
12. **Editorial callout** — orange bg, mixed Outfit 900 uppercase + Instrument Serif italic line ("Your team's voice **is your most powerful channel**") + a one-line stat recap.
13. Footer — credit Ordinal MCP and list the tool names you used.

## Constraints

- Standalone `index.html`, Chart.js via CDN, no build step.
- All quantitative data traceable to MCP responses; locally-defined data (departments, point rules, challenge definitions, badge criteria) must be visibly documented in sections 03/04/09.
- Format numbers `1.2K` / `1.6M`, percentages with one decimal, points as `1,234 pts`.
- Match every token in `DESIGN.md`: subtle SVG grain overlay, 1px-divider stat grids, 100px-radius pills, podium ranking colours, orange gradient progress bar, mixed Outfit/Instrument Serif italic in the hero and editorial callout.