Dashboard

import { MetricCards } from "@launchapp/design-system/blocks/dashboard";const items = [  {    id: "revenue",    label: "Total Revenue",    value: "$45,231",    trend: "up",    trendValue: "+20.1%",    sparklineData: [30, 40, 35, 50, 49, 60, 70],  },  {    id: "users",    label: "Active Users",    value: "2,350",    trend: "up",    trendValue: "+15.3%",    sparklineData: [20, 30, 25, 40, 35, 45, 50],  },];export default function Page() {  return <MetricCards items={items} />;}

import { StatsOverview } from "@launchapp/design-system/blocks/dashboard";const items = [  { title: "Total Revenue", value: "$45,231", trend: "up", trendValue: "+20.1%" },  { title: "Subscriptions", value: "+2350", trend: "up", trendValue: "+180.1%" },  { title: "Sales", value: "+12,234", trend: "up", trendValue: "+19%" },  { title: "Active Now", value: "+573", trend: "up", trendValue: "+201" },];export default function Page() {  return (    <StatsOverview      title="Overview"      description="Your business performance at a glance."      items={items}    />  );}

import { ActivityFeed } from "@launchapp/design-system/blocks/dashboard";const items = [  {    id: "1",    user: { name: "Alice Johnson", initials: "AJ" },    description: "created a new project",    timestamp: "2 minutes ago",    actionType: "Created",    actionVariant: "default",  },  {    id: "2",    user: { name: "Bob Smith", initials: "BS" },    description: "merged pull request #42",    timestamp: "1 hour ago",    actionType: "Merged",    actionVariant: "secondary",  },];export default function Page() {  return <ActivityFeed items={items} title="Recent Activity" />;}

import { DashboardShell } from "@launchapp/design-system/blocks/dashboard";export default function Page() {  return (    <DashboardShell      title="Dashboard"      user={{ name: "Alice Johnson", email: "alice@example.com" }}    >      <div className="p-6">Dashboard content</div>    </DashboardShell>  );}

import { Timeline } from "@launchapp/design-system/blocks/dashboard";const items = [  { id: "1", title: "Project created", date: "Jan 1", status: "completed" as const },  { id: "2", title: "First PR merged", date: "Jan 5", status: "completed" as const },  { id: "3", title: "v1.0 release", date: "Feb 1", status: "current" as const },];export default function Page() {  return <Timeline items={items} />;}

import { StatusPageDashboard } from "@launchapp/design-system/blocks/dashboard";const components = [  { id: "api", name: "API", status: "operational" },  { id: "web", name: "Web App", status: "operational" },  { id: "db", name: "Database", status: "degraded" },];export default function Page() {  return (    <StatusPageDashboard      title="System Status"      organizationName="MyApp"      overallStatus="degraded"      components={components}    />  );}

import { ActivityStream } from "@launchapp/design-system/blocks/activity";const events = [  { id: "1", actor: { name: "Alice Johnson", initials: "AJ" }, action: "created", target: "LaunchApp v2", timestamp: "2024-01-01T10:00:00Z", type: "create" },  { id: "2", actor: { name: "Bob Smith", initials: "BS" }, action: "merged", target: "PR #42", timestamp: "2024-01-02T09:00:00Z", type: "update" },  { id: "3", actor: { name: "Carol White", initials: "CW" }, action: "commented on", target: "Issue #18", timestamp: "2024-01-03T14:30:00Z", type: "comment" },];export default function Page() {  return <ActivityStream events={events} title="Activity Stream" showLoadMore />;}

import { MetricsDashboard } from "@launchapp/design-system/blocks/metrics";const metrics = [  { id: "revenue", label: "Total Revenue", value: "$45,231", change: "+20.1%", changeType: "up", changeLabel: "vs last month" },  { id: "users", label: "Active Users", value: "2,350", change: "+15.3%", changeType: "up", changeLabel: "vs last month" },  { id: "churn", label: "Churn Rate", value: "3.2%", change: "-1.1%", changeType: "down", changeLabel: "vs last month" },  { id: "nps", label: "NPS Score", value: "72", change: "+4", changeType: "up", changeLabel: "vs last quarter", progress: 72 },];export default function Page() {  return (    <MetricsDashboard      metrics={metrics}      columns={4}      showChange      showProgress    />  );}