import * as React from "react"; import { addDays, endOfMonth, startOfMonth } from "date-fns"; import type { DateRange } from "react-day-picker"; import { FiltersBarAnalyticsWorkspaceOne } from "@/registry/filters-bar-analytics-workspace-one/filters-bar-analytics-workspace-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 FiltersBarAnalyticsWorkspaceOne >; type FiltersBarAnalyticsWorkspaceOneSelection = Parameters< NonNullable >[0]; const metrics: ComponentProps["metrics"] = [ { id: "revenue", label: "Revenue", description: "Gross revenue across product lines with FX adjustments.", kpi: "$1.8M", }, { id: "retention", label: "Retention", description: "Logo retention and expansion momentum across segments.", kpi: "93%", }, { id: "usage", label: "Usage", description: "Active seats, depth of feature adoption, and weekly stickiness.", kpi: "+14%", }, ]; const savedViews: NonNullable = [ { id: "north-america", label: "North America", description: "Enterprise accounts filtered by AMER region and ARR > $100k.", }, { id: "product-led", label: "Product-led funnel", description: "Self-serve cohort with activation funnel overlays.", }, { id: "renewals", label: "Renewals in quarter", description: "Upcoming renewals with risk >= medium in next 90 days.", }, ]; const searchColumns: NonNullable = [ { id: "account", label: "Account name", description: "Matches across legal and billing account names.", badge: "Primary", }, { id: "owner", label: "Account owner", description: "Filter by AE or CSM owner, including shared pods.", }, { id: "industry", label: "Industry tags", description: "Segments by configured industry taxonomy.", }, { id: "plan", label: "Contract plan", description: "Filters by product edition or bundle mix.", }, ]; const baseRange: DateRange = { from: startOfMonth(new Date()), to: endOfMonth(new Date()), }; const datePresets: NonNullable = [ { id: "28d", label: "Last 28 days", description: "Rolling 28-day window with prior period comparison.", range: { from: addDays(new Date(), -27), to: new Date() }, }, { id: "qtd", label: "Quarter to date", description: "Quarter start through today based on fiscal calendar.", range: baseRange, }, { id: "fy", label: "Fiscal year", description: "Current fiscal year with FX normalization applied.", range: { from: new Date(new Date().getFullYear(), 0, 1), to: endOfMonth(addDays(new Date(), 90)), }, }, ]; const advancedFilters: NonNullable = [ { id: "segments", title: "Segments", description: "Channel and GTM teams", options: [ { id: "enterprise", label: "Enterprise", badge: "87" }, { id: "midmarket", label: "Mid-market", badge: "136" }, { id: "smb", label: "SMB", badge: "242" }, { id: "edu", label: "Education" }, ], }, { id: "lifecycle", title: "Lifecycle stage", selectionMode: "single", options: [ { id: "onboarding", label: "Onboarding" }, { id: "adoption", label: "Adoption" }, { id: "retention", label: "Retention" }, { id: "expansion", label: "Expansion" }, ], }, { id: "signals", title: "Signals", description: "Playbooks and alerts", options: [ { id: "risk", label: "Risk alerts", description: "Churn, SLA, or NPS degradation.", }, { id: "advocacy", label: "Advocacy", description: "Customer stories and referrals.", }, { id: "experiments", label: "Experiments", description: "A/B and pricing tests.", }, ], }, ]; export function FiltersBarAnalyticsWorkspaceOneDemo() { const [search, setSearch] = React.useState(""); const [metric, setMetric] = React.useState(metrics[0]?.id ?? ""); const [range, setRange] = React.useState( datePresets[0]?.range, ); const [datePreset, setDatePreset] = React.useState( datePresets[0]?.id, ); const [savedView, setSavedView] = React.useState( undefined, ); const [selection, setSelection] = React.useState({ segments: ["enterprise", "midmarket"], lifecycle: ["retention"], signals: [], }); const [isLoading, setIsLoading] = React.useState(false); React.useEffect(() => { setIsLoading(true); const timeout = window.setTimeout(() => { setIsLoading(false); }, 650); return () => window.clearTimeout(timeout); }, [metric, range, savedView, selection, search]); return (

{ setSearch(value); }} searchColumns={searchColumns} metrics={metrics} activeMetricId={metric} onMetricChange={setMetric} datePresets={datePresets} activeDatePresetId={datePreset} onDatePresetChange={setDatePreset} dateRange={range} onDateRangeChange={(nextRange) => { setRange(nextRange); setDatePreset(undefined); }} savedViews={savedViews} activeSavedViewId={savedView} onSavedViewSelect={setSavedView} advancedFilters={advancedFilters} defaultSelectedAdvancedFilters={selection} onAdvancedFiltersChange={setSelection} onAdvancedFiltersApply={(values) => { setSelection(values); }} onAdvancedFiltersReset={() => { setSelection({ segments: [], lifecycle: [], signals: [] }); }} isLoading={isLoading} />

Active context

Metric: {metric}

Saved view:{" "} {savedView ?? "None"}

Filters

Date range:{" "} {range?.from ? `${range.from.toDateString()} → ${range?.to?.toDateString() ?? "…"}` : "Custom"}

Segments:{" "} {selection.segments?.length ? selection.segments.join(", ") : "All"}

); } export default FiltersBarAnalyticsWorkspaceOneDemo;

Simple