import * as React from "react"; import { Loader2Icon, RefreshCwIcon } from "lucide-react"; import { Button } from "@/components/ui/button"; import { Switch } from "@/components/ui/switch"; import { DataTableEnterpriseAnalyticsBenchmarkOne } from "@/registry/data-table-enterprise-analytics-benchmark-one/data-table-enterprise-analytics-benchmark-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"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; type ComponentProps = React.ComponentPropsWithoutRef< typeof DataTableEnterpriseAnalyticsBenchmarkOne >; type BenchmarkFiltersConfig = ComponentProps["filters"]; type BenchmarkGroup = ComponentProps["groups"][number]; type BenchmarkRow = ComponentProps["rows"][number]; type BenchmarkSummary = NonNullable; const filters: BenchmarkFiltersConfig = { segments: [ { id: "enterprise", label: "Enterprise", description: "Accounts with ARR > $250K", }, { id: "scale-up", label: "Scale-up", description: "ARR $50K - $250K", }, { id: "growth", label: "Growth", description: "ARR $10K - $50K", }, ], dateRanges: [ { id: "30d", label: "Last 30 days" }, { id: "90d", label: "Last 90 days" }, { id: "qoq", label: "Quarter over quarter" }, ], comparisons: [ { id: "target", label: "Against targets" }, { id: "peer", label: "Against peer median" }, { id: "self", label: "Against previous period" }, ], }; const groups: BenchmarkGroup[] = [ { id: "acquisition", label: "Acquisition", description: "Top of funnel velocity", tone: "brand", columns: [ { id: "visitor-to-lead", label: "Visitor → Lead", description: "Conversion rate", align: "right", }, { id: "paid-share", label: "Paid share", description: "Spend contribution", align: "right", }, { id: "pipeline", label: "Pipeline $", showSparkline: true, align: "right", }, ], }, { id: "engagement", label: "Engagement", description: "Activation & depth", tone: "muted", columns: [ { id: "activation", label: "Activation", description: "First value <= 7 days", align: "right", }, { id: "weekly-active", label: "Weekly active", description: "Active users", align: "right", }, { id: "expansion", label: "Expansion ops", showSparkline: true, align: "right", }, ], }, { id: "revenue", label: "Revenue", description: "Commercial outcomes", tone: "success", columns: [ { id: "net-retention", label: "Net retention", description: "Gross + expansion", align: "right", }, { id: "arr", label: "ARR", description: "Trailing 12 months", align: "right", }, { id: "topline-growth", label: "Topline growth", showSparkline: true, align: "right", }, ], }, ]; const baseRows: BenchmarkRow[] = [ { id: "nimbus", entity: { name: "Nimbus Analytics", description: "US enterprise — Digital commerce focus", badge: { label: "Hero cohort", tone: "brand" }, }, segment: { label: "Enterprise", tone: "brand" }, kpis: { acquisition: { "visitor-to-lead": { id: "nimbus-vtl", value: "4.8%", variance: { label: "+0.6pp", tone: "positive", description: "Up 0.6 percentage points vs. target", }, target: { label: "4.2%" }, }, "paid-share": { id: "nimbus-paid", value: "42%", target: { label: "40%" }, variance: { label: "+2%", tone: "negative", description: "Paid spend exceeding plan by 2% of mix", }, }, pipeline: { id: "nimbus-pipeline", value: "$18.4M", trend: { percentage: 74, ariaLabel: "Pipeline conversion is 74% toward target", }, tooltip: "Includes co-marketing partner sourced opportunities", }, }, engagement: { activation: { id: "nimbus-activation", value: "68%", target: { label: "70%" }, variance: { label: "-2pp", tone: "negative", description: "Slight dip driven by new workflow onboarding", }, }, "weekly-active": { id: "nimbus-weekly", value: "9,420", tooltip: "Week ending Sept 29", }, expansion: { id: "nimbus-expansion", value: "112", trend: { percentage: 62, ariaLabel: "Expansion opportunities pacing at 62%", }, }, }, revenue: { "net-retention": { id: "nimbus-nrr", value: "118%", variance: { label: "+5pp", tone: "positive", description: "Expansion in EMEA raised net retention", }, }, arr: { id: "nimbus-arr", value: "$86.3M", target: { label: "$85M" }, }, "topline-growth": { id: "nimbus-growth", value: "+28%", trend: { percentage: 82, ariaLabel: "Topline growth is tracking at 82% of plan", }, }, }, }, }, { id: "lumen", entity: { name: "Lumen Capture", description: "EMEA enterprise — Hybrid inbound motion", badge: { label: "Watchlist", tone: "warning" }, }, segment: { label: "Enterprise", tone: "warning" }, kpis: { acquisition: { "visitor-to-lead": { id: "lumen-vtl", value: "3.1%", target: { label: "3.4%" }, variance: { label: "-0.3pp", tone: "negative", description: "Conversion softness from mobile traffic", }, }, "paid-share": { id: "lumen-paid", value: "37%", variance: { label: "-1%", tone: "positive", description: "Efficient spend reallocation to lifecycle", }, }, pipeline: { id: "lumen-pipeline", value: "$11.2M", trend: { percentage: 56, ariaLabel: "Pipeline accumulation at 56% of target", }, target: { label: "$12.5M" }, }, }, engagement: { activation: { id: "lumen-activation", value: "64%", variance: { label: "Flat", tone: "neutral", description: "Holding steady over last 90 days", }, }, "weekly-active": { id: "lumen-weekly", value: "6,880", }, expansion: { id: "lumen-expansion", value: "74", target: { label: "90" }, variance: { label: "-16", tone: "negative", description: "Lifecycle automation not yet rolled out", }, trend: { percentage: 44, ariaLabel: "Expansion pipeline is 44% toward target", }, }, }, revenue: { "net-retention": { id: "lumen-nrr", value: "108%", target: { label: "112%" }, }, arr: { id: "lumen-arr", value: "$54.6M", target: { label: "$55M" }, variance: { label: "-0.4M", tone: "negative", description: "Delayed renewals in manufacturing segment", }, }, "topline-growth": { id: "lumen-growth", value: "+19%", trend: { percentage: 48, ariaLabel: "YoY growth trending at 48% of plan", }, }, }, }, }, { id: "cascade", entity: { name: "Cascade Robotics", description: "North America — Hardware enabled motion", badge: { label: "Emerging", tone: "success" }, }, segment: { label: "Scale-up", tone: "success" }, kpis: { acquisition: { "visitor-to-lead": { id: "cascade-vtl", value: "5.6%", target: { label: "5.0%" }, variance: { label: "+0.6pp", tone: "positive", description: "Strong product-led signups", }, }, "paid-share": { id: "cascade-paid", value: "29%", variance: { label: "-3%", tone: "positive", description: "Organic community growth lowering CAC", }, }, pipeline: { id: "cascade-pipeline", value: "$7.8M", trend: { percentage: 68, ariaLabel: "Pipeline attainment 68%", }, target: { label: "$7.5M" }, }, }, engagement: { activation: { id: "cascade-activation", value: "72%", target: { label: "70%" }, }, "weekly-active": { id: "cascade-weekly", value: "4,320", }, expansion: { id: "cascade-expansion", value: "58", trend: { percentage: 52, ariaLabel: "Expansion pipeline 52% toward target", }, target: { label: "64" }, }, }, revenue: { "net-retention": { id: "cascade-nrr", value: "122%", variance: { label: "+2pp", tone: "positive", description: "Expansion from enterprise robotics fleet", }, }, arr: { id: "cascade-arr", value: "$24.7M", target: { label: "$23M" }, }, "topline-growth": { id: "cascade-growth", value: "+41%", trend: { percentage: 92, ariaLabel: "Revenue growth pacing 92%", }, }, }, }, }, ]; const summary: BenchmarkSummary = { rows: [ { id: "average", label: "Average", values: { acquisition: { "visitor-to-lead": { value: "4.5%", variance: { label: "+0.2pp", tone: "positive" }, }, "paid-share": { value: "36%", variance: { label: "On plan", tone: "neutral" }, }, pipeline: { value: "$12.5M", }, }, engagement: { activation: { value: "68%", }, "weekly-active": { value: "6,873", }, expansion: { value: "81", }, }, revenue: { "net-retention": { value: "116%", }, arr: { value: "$55.2M", }, "topline-growth": { value: "+29%", }, }, }, }, { id: "percentile", label: "90th percentile", values: { acquisition: { "visitor-to-lead": { value: "5.3%", variance: { label: "Top cohort", tone: "positive" }, }, "paid-share": { value: "44%", }, pipeline: { value: "$16.9M", }, }, engagement: { activation: { value: "74%", }, "weekly-active": { value: "10,110", }, expansion: { value: "129", }, }, revenue: { "net-retention": { value: "125%", }, arr: { value: "$92.4M", }, "topline-growth": { value: "+39%", }, }, }, }, ], }; export function DataTableEnterpriseAnalyticsBenchmarkOneDemo() { const [rows, setRows] = React.useState(baseRows); const [isLoading, setIsLoading] = React.useState(false); const [comparisonMode, setComparisonMode] = React.useState(true); const handleRefresh = React.useCallback(() => { setIsLoading(true); const timer = setTimeout(() => { setRows((previous) => { if (!comparisonMode) return previous; return previous.map((row) => { if (row.id !== "lumen") return row; return { ...row, kpis: { ...row.kpis, acquisition: { ...row.kpis.acquisition, pipeline: { ...row.kpis.acquisition.pipeline, value: "$11.9M", variance: { label: "Reforecast", tone: "neutral", description: "Pipeline blending recent partner deal", }, }, }, }, } satisfies BenchmarkRow; }); }); setIsLoading(false); }, 1200); return () => clearTimeout(timer); }, [comparisonMode]); const toggleComparison = React.useCallback(() => { setComparisonMode((previous) => !previous); setRows(baseRows); }, []); return (

Highlight variance vs. target

console.info("Export benchmark requested")} />

); } export default DataTableEnterpriseAnalyticsBenchmarkOneDemo;

Simple