Files
GeneralJerel 01f5dbd1ee feat(examples): add strands-crm showcase (TypeScript Strands + AG-UI)
Northstar AI CRM — a full-featured agentic sales CRM for an enterprise
hardware seller, built with CopilotKit, the AG-UI protocol, and a
TypeScript Strands agent (@strands-agents/sdk + @ag-ui/aws-strands).
The first TypeScript Strands example under examples/.

Highlights:
- Agentic canvas: tool calls render on the workspace — quote approval
  opens a quote page; analyze_team and generate_weekly_report open
  dedicated report pages; frontend tools navigate the workspace.
- Generative UI cards, human-in-the-loop follow-up approval, and a live
  STATE_SNAPSHOT that syncs a SQLite CRM store with the board,
  dashboard, and report pages.
- Dashboard, pipeline (Kanban), products, team, and reports surfaces.

Self-contained under examples/showcases/strands-crm with an agent/ +
frontend/ split and a concurrently dev script; listed in
examples/README.md.
2026-06-05 05:44:30 -07:00

30 lines
975 B
TypeScript

"use client";
import { Card } from "@/components/ui/card";
import { BarList } from "@/components/charts";
import { teamLeaderboard, formatCurrency } from "@/lib/crm";
import type { CrmState } from "@/lib/crm";
/**
* Ranked team leaderboard: a BarList of every rep's all-time bookings
* (Closed-Won $), with their quota attainment shown as the secondary caption.
*/
export function TeamLeaderboard({ crm }: { crm: CrmState }) {
const rows = teamLeaderboard(crm).map((r) => ({
label: r.name,
value: r.bookings,
secondary: r.quota > 0 ? `${Math.round(r.attainment * 100)}%` : "—",
}));
return (
<Card className="gap-3 p-4">
<div className="flex items-baseline justify-between">
<div className="text-sm font-semibold">Leaderboard</div>
<div className="text-xs text-muted-foreground">
Bookings · attainment
</div>
</div>
<BarList data={rows} format={(v) => formatCurrency(v)} />
</Card>
);
}