mirror of
https://github.com/CopilotKit/CopilotKit.git
synced 2026-09-14 16:26:20 +08:00
GeneralJerel
01f5dbd1ee
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.
37 lines
1.1 KiB
TypeScript
37 lines
1.1 KiB
TypeScript
"use client";
|
||
import { Card } from "@/components/ui/card";
|
||
import { Skeleton } from "@/components/ui/skeleton";
|
||
|
||
function CardSkeleton({ height }: { height: number }) {
|
||
return (
|
||
<Card className="gap-4 p-4">
|
||
<Skeleton className="h-5 w-32 rounded-full" />
|
||
<Skeleton className="w-full rounded-lg" style={{ height }} />
|
||
</Card>
|
||
);
|
||
}
|
||
|
||
/** Loading state mirroring the dashboard grid: KPI row + 2×2 chart/list grid. */
|
||
export function DashboardSkeleton() {
|
||
return (
|
||
<div className="space-y-4">
|
||
<div className="grid grid-cols-2 gap-3 lg:grid-cols-4">
|
||
{Array.from({ length: 4 }).map((_, i) => (
|
||
<Skeleton key={i} className="h-[112px] w-full rounded-xl" />
|
||
))}
|
||
</div>
|
||
<div className="grid grid-cols-1 gap-4 lg:grid-cols-3">
|
||
<div className="lg:col-span-2">
|
||
<CardSkeleton height={220} />
|
||
</div>
|
||
<CardSkeleton height={200} />
|
||
<CardSkeleton height={180} />
|
||
<CardSkeleton height={180} />
|
||
<div className="lg:col-span-3">
|
||
<CardSkeleton height={220} />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|