import * as React from "react"; import { Activity, BarChart3, BookmarkCheck, CalendarCheck, Compass, FolderClosed, GaugeCircle, Layers, LineChart, PieChart, Presentation, TrendingUp, Users, } from "lucide-react"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card"; import { Separator } from "@/components/ui/separator"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { Typography } from "@/components/ui/Typography"; const { Small: TypographySmall, Large: TypographyLarge } = Typography; import { SidebarAppShellMultiWorkspaceAnalyticsOne } from "@/registry/sidebar-app-shell-multi-workspace-analytics-one/sidebar-app-shell-multi-workspace-analytics-one"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; type ComponentProps = React.ComponentPropsWithoutRef< typeof SidebarAppShellMultiWorkspaceAnalyticsOne >; type SidebarAppShellMultiWorkspaceAnalyticsOneWorkspace = NonNullable< ComponentProps["workspaces"] >[number]; type SidebarAppShellMultiWorkspaceAnalyticsOneNavigationGroup = NonNullable< ComponentProps["navigationGroups"] >[number]; type SidebarAppShellMultiWorkspaceAnalyticsOneHeaderMetric = NonNullable< NonNullable["metrics"] >[number]; type SidebarAppShellMultiWorkspaceAnalyticsOneHeaderAction = NonNullable< NonNullable["actions"] >[number]; type SidebarAppShellMultiWorkspaceAnalyticsOneQuickFilter = NonNullable< ComponentProps["quickFilters"] >[number]; type SidebarAppShellMultiWorkspaceAnalyticsOneCommandItem = NonNullable< ComponentProps["commandItems"] >[number]; const workspaces: SidebarAppShellMultiWorkspaceAnalyticsOneWorkspace[] = [ { id: "revenue", name: "Revenue GTM", description: "Executive KPIs • North America", badge: "Live", badgeVariant: "default", icon: , }, { id: "growth", name: "Lifecycle Growth", description: "Product usage & activation", icon: , }, { id: "operations", name: "RevOps Ops", description: "Deal hygiene + capacity", icon: , }, ]; const navigationGroups: SidebarAppShellMultiWorkspaceAnalyticsOneNavigationGroup[] = [ { id: "dashboards", label: "Dashboards", summary: "8", defaultOpen: true, items: [ { id: "executive", label: "Executive Overview", description: "North America KPIs", icon: , isActive: true, }, { id: "pipeline", label: "Pipeline Momentum", icon: , badge: "New", onSelect: () => undefined, }, { id: "retention", label: "Retention & Advocacy", icon: , }, ], }, { id: "folders", label: "Saved Folders", summary: "6", items: [ { id: "board", label: "Board Q4 Recap", icon: , }, { id: "expansion", label: "Expansion GTM", icon: , badge: "Team", badgeTone: "secondary", }, { id: "product", label: "Product Signals", icon: , }, ], }, ]; const quickFilters: SidebarAppShellMultiWorkspaceAnalyticsOneQuickFilter[] = [ { id: "north-america", label: "North America", isActive: true }, { id: "enterprise", label: "Enterprise" }, { id: "last-30", label: "Last 30 days" }, ]; const commandItems: SidebarAppShellMultiWorkspaceAnalyticsOneCommandItem[] = [ { id: "workspace-growth", title: "Switch to Lifecycle Growth workspace", description: "Product onboarding, activation, and retention dashboards", icon: , }, { id: "dashboard-saas", group: "Dashboards", title: "SaaS Health Overview", description: "ARR, net revenue retention, and cohort expansion", icon: , shortcut: "S", }, { id: "dashboard-demand", group: "Dashboards", title: "Demand Generation", description: "Pipeline conversion and campaign velocity", icon: , shortcut: "D", }, { id: "folder-expansion", group: "Saved Views", title: "Expansion Motion", description: "Upsell readiness and coverage", icon: , }, ]; const headerMetrics: SidebarAppShellMultiWorkspaceAnalyticsOneHeaderMetric[] = [ { id: "arr", label: "Net new ARR", value: "$4.3M", helper: "↑ 18% vs last period", trend: "up", }, { id: "win-rate", label: "Win rate", value: "34.6%", helper: "Enterprise upsell program", trend: "neutral", }, { id: "cycle", label: "Sales cycle", value: "52 days", helper: "-6 days vs baseline", trend: "down", }, ]; const headerActions: SidebarAppShellMultiWorkspaceAnalyticsOneHeaderAction[] = [ { id: "share", label: "Share", icon: , }, { id: "compare", label: "Scenario compare", icon: , }, ]; export function SidebarAppShellMultiWorkspaceAnalyticsOneDemo() { const [workspace, setWorkspace] = React.useState(workspaces[0]); const [comparisonEnabled, setComparisonEnabled] = React.useState(true); return ( undefined, comparisonLabel: "previous period", isComparisonEnabled: comparisonEnabled, onComparisonToggle: setComparisonEnabled, metrics: headerMetrics, actions: headerActions, }} favoriteDashboards={[ { id: "monday", label: "Monday exec snapshot", badge: "Auto", badgeTone: "secondary", }, { id: "cs", label: "Customer success health", badge: "Live", badgeTone: "default", }, ]} stickyContent={ Workspace switching tips Analysts often compare performance across workspaces—pin favorites to keep context accessible.

Workspace keyboard shortcuts

⌥ 1-9 Cycle through favorites

} >

Pipeline pacing vs last year Track sourced vs influenced revenue by workspace and cohort with pre-configured views.

Pipeline coverage 3.2× Influenced ARR $1.1M Meetings 42%

{["AE", "SDR", "CS", "Marketing"].map((team) => (

{team} team Conversion velocity and sourced pipeline by quarter.

))}

Workspace performance focus Activations Expansion Retention Analysts rely on progressive profiling journeys to accelerate activation by workspace.

Workspace-specific playbooks highlight expansion-ready accounts with shared dashboards.

Retention dashboards centralize product signals, adoption ladders, and CS capacity.

); } export interface InsightCardProps { label: string; value: string; boundary: string; } function InsightCard({ label, value, boundary }: InsightCardProps) { return (

{label} {value} {boundary}

); } export default SidebarAppShellMultiWorkspaceAnalyticsOneDemo;

Simple