Dashboard
Full dashboard layout block.
import { Bot, CheckCircle2, TrendingUp, Users, Wallet } from "lucide-react";
import { AgentCard } from "@/registry/new-york/items/manpowerhub-agent-card/components/agent-card";import { Feed, FeedItem,} from "@/registry/new-york/items/manpowerhub-feed/components/feed";import { KpiCard } from "@/registry/new-york/items/manpowerhub-kpi/components/kpi-card";import { PageHeader, PageHeaderContent, PageHeaderDescription, PageHeaderTitle,} from "@/registry/new-york/items/manpowerhub-page-header/components/page-header";import { AppShell, AppShellMain, AppShellScrollBody,} from "@/registry/new-york/items/manpowerhub-app-shell/components/app-shell";import { Topbar, TopbarLeft, TopbarRight, TopbarSeparator, TopbarSubtitle, TopbarTitle,} from "@/registry/new-york/items/manpowerhub-topbar/components/topbar";import { Badge } from "@/components/ui/badge";import { Button } from "@/components/ui/button";import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
export function ManpowerhubDashboardBasic() { return ( <AppShell className="h-[420px] rounded-lg border border-border"> <AppShellMain> <Topbar> <TopbarLeft> <TopbarTitle>Overview</TopbarTitle> <TopbarSeparator>/</TopbarSeparator> <TopbarSubtitle>All sites · May 2026</TopbarSubtitle> </TopbarLeft> <TopbarRight> <Badge variant="brand"> <span className="size-1.25 rounded-full bg-[var(--brand)]" />6 Agents Active </Badge> <Button size="sm" variant="secondary"> Export </Button> </TopbarRight> </Topbar> <AppShellScrollBody> <PageHeader> <PageHeaderContent> <PageHeaderTitle>Good morning, Junaid</PageHeaderTitle> <PageHeaderDescription> Sunday, 17 May 2026 · All systems operational </PageHeaderDescription> </PageHeaderContent> </PageHeader> <div className="mb-4 grid grid-cols-2 gap-3 lg:grid-cols-4"> <KpiCard label="Active Workers" icon={<Users />} value="2,847" trend="12% this month" /> <KpiCard label="Monthly Payroll" icon={<Wallet />} value="$284K" trend="8% vs last month" /> <KpiCard label="Collection Rate" icon={<TrendingUp />} value="98.4%" valueClassName="text-[var(--brand)]" trend="2.1% improvement" /> <KpiCard label="Active Sites" value="24" trend="+3 this quarter" /> </div> <div className="grid gap-3 lg:grid-cols-[1fr_280px]"> <Card> <CardHeader className="border-b"> <CardTitle className="text-[13px]">Agent Feed</CardTitle> </CardHeader> <CardContent className="pt-2"> <Feed> <FeedItem icon={<CheckCircle2 />} iconClassName="bg-[var(--green-bg)] text-[var(--green)]" title="Payroll cycle complete" subtitle="$284K · 0 errors" time="1h" /> <FeedItem icon={<Bot />} iconClassName="bg-[var(--brand-subtle)] text-[var(--brand)]" title="142 workers → Site Alpha" subtitle="Planning Agent" time="2m" /> </Feed> </CardContent> </Card> <AgentCard name="Planning Agent" icon={<Bot />} description="Auto-allocates workers across sites." progressLabel="Today" progressValue="142 / 200" progressPercent={71} stat="Active 24/7" /> </div> </AppShellScrollBody> </AppShellMain> </AppShell> );}Installation
Section titled “Installation”This installation provides support for all official Shadcn icon libraries. The component is otherwise identical to the non-experimental installation.
Icon support is experimental and may not be fully stable since it uses internal Shadcn APIs.
This component relies on other items which must be installed first.
Copy and paste the following code into your project.
components/blocks/manpowerhub-dashboard.tsx
import { Bot, CheckCircle2, TrendingUp, Users, Wallet } from "lucide-react";
import { AgentCard } from "@/registry/new-york/items/manpowerhub-agent-card/components/agent-card";import { Feed, FeedItem,} from "@/registry/new-york/items/manpowerhub-feed/components/feed";import { KpiCard } from "@/registry/new-york/items/manpowerhub-kpi/components/kpi-card";import { PageHeader, PageHeaderContent, PageHeaderDescription, PageHeaderTitle,} from "@/registry/new-york/items/manpowerhub-page-header/components/page-header";import { AppShell, AppShellMain, AppShellScrollBody,} from "@/registry/new-york/items/manpowerhub-app-shell/components/app-shell";import { Topbar, TopbarLeft, TopbarRight, TopbarSeparator, TopbarSubtitle, TopbarTitle,} from "@/registry/new-york/items/manpowerhub-topbar/components/topbar";import { Badge } from "@/components/ui/badge";import { Button } from "@/components/ui/button";import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
export function ManpowerhubDashboard() { return ( <AppShell className="h-[420px] rounded-lg border border-border"> <AppShellMain> <Topbar> <TopbarLeft> <TopbarTitle>Overview</TopbarTitle> <TopbarSeparator>/</TopbarSeparator> <TopbarSubtitle>All sites · May 2026</TopbarSubtitle> </TopbarLeft> <TopbarRight> <Badge variant="brand"> <span className="size-1.25 rounded-full bg-[var(--brand)]" />6 Agents Active </Badge> <Button size="sm" variant="secondary"> Export </Button> </TopbarRight> </Topbar> <AppShellScrollBody> <PageHeader> <PageHeaderContent> <PageHeaderTitle>Good morning, Junaid</PageHeaderTitle> <PageHeaderDescription> Sunday, 17 May 2026 · All systems operational </PageHeaderDescription> </PageHeaderContent> </PageHeader> <div className="mb-4 grid grid-cols-2 gap-3 lg:grid-cols-4"> <KpiCard label="Active Workers" icon={<Users />} value="2,847" trend="12% this month" /> <KpiCard label="Monthly Payroll" icon={<Wallet />} value="$284K" trend="8% vs last month" /> <KpiCard label="Collection Rate" icon={<TrendingUp />} value="98.4%" valueClassName="text-[var(--brand)]" trend="2.1% improvement" /> <KpiCard label="Active Sites" value="24" trend="+3 this quarter" /> </div> <div className="grid gap-3 lg:grid-cols-[1fr_280px]"> <Card> <CardHeader className="border-b"> <CardTitle className="text-[13px]">Agent Feed</CardTitle> </CardHeader> <CardContent className="pt-2"> <Feed> <FeedItem icon={<CheckCircle2 />} iconClassName="bg-[var(--green-bg)] text-[var(--green)]" title="Payroll cycle complete" subtitle="$284K · 0 errors" time="1h" /> <FeedItem icon={<Bot />} iconClassName="bg-[var(--brand-subtle)] text-[var(--brand)]" title="142 workers → Site Alpha" subtitle="Planning Agent" time="2m" /> </Feed> </CardContent> </Card> <AgentCard name="Planning Agent" icon={<Bot />} description="Auto-allocates workers across sites." progressLabel="Today" progressValue="142 / 200" progressPercent={71} stat="Active 24/7" /> </div> </AppShellScrollBody> </AppShellMain> </AppShell> );}Update the import paths to match your project setup.
Install the ManpowerHub theme first, then add this dashboard:
npx shadcn@latest add @woxcn/manpowerhub-dashboard