import * as React from "react"; import { addDays, startOfQuarter } from "date-fns"; import { FiltersBarCrmPipelineThree } from "@/registry/filters-bar-crm-pipeline-three/filters-bar-crm-pipeline-three"; 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 FiltersBarCrmPipelineThree >; type FiltersBarCrmPipelineThreeSelection = Parameters< NonNullable >[0]; const stages: ComponentProps["stages"] = [ { id: "prospecting", label: "Prospecting", count: 42, description: "Inbound and outbound sourced opportunities.", }, { id: "negotiation", label: "Negotiation", count: 28, badgeTone: "warning", description: "Pricing, legal, and procurement in flight.", }, { id: "contract", label: "Contract sent", count: 16, badgeTone: "success", description: "Awaiting signature or redlines.", }, { id: "closed", label: "Closed", count: 21, badgeTone: "default", description: "Won deals ready for handoff.", }, ]; const owners: NonNullable = [ { id: "natalie", name: "Natalie Chen", email: "natalie@nextbase.dev", initials: "NC", }, { id: "amir", name: "Amir Collins", email: "amir@nextbase.dev", initials: "AC", }, { id: "lucia", name: "Lucia Gomez", email: "lucia@nextbase.dev", initials: "LG", }, { id: "kai", name: "Kai Patel", email: "kai@nextbase.dev", initials: "KP" }, ]; const timePresets: NonNullable = [ { id: "7d", label: "Last 7 days", description: "Deals touched this week", range: { from: addDays(new Date(), -6), to: new Date() }, }, { id: "qtd", label: "Quarter to date", description: "Syncs with forecast reports", range: { from: startOfQuarter(new Date()), to: new Date() }, }, { id: "closing", label: "Closing soon", description: "Next 30 days of close dates", range: { from: new Date(), to: addDays(new Date(), 30) }, }, ]; const advancedFilters: NonNullable = [ { id: "territories", title: "Territories", options: [ { id: "na", label: "North America", description: "US + Canada" }, { id: "emea", label: "EMEA" }, { id: "apac", label: "APAC" }, ], }, { id: "source", title: "Source channel", selectionMode: "single", options: [ { id: "inbound", label: "Inbound" }, { id: "outbound", label: "Outbound" }, { id: "partner", label: "Partner", description: "Partner co-sell programs", }, ], }, { id: "risk", title: "Risk flags", options: [ { id: "pricing", label: "Pricing risk" }, { id: "legal", label: "Legal review" }, { id: "no-champion", label: "Champion missing" }, ], }, ]; const initialAdvanced: FiltersBarCrmPipelineThreeSelection = { territories: ["na"], source: ["inbound"], risk: [], }; export function FiltersBarCrmPipelineThreeDemo() { const [stage, setStage] = React.useState( stages[1]?.id ?? "prospecting", ); const [ownerIds, setOwnerIds] = React.useState(["natalie", "amir"]); const [unassigned, setUnassigned] = React.useState(false); const [search, setSearch] = React.useState(""); const [preset, setPreset] = React.useState( timePresets[1]?.id, ); const [range, setRange] = React.useState(timePresets[1]?.range); const [advanced, setAdvanced] = React.useState(initialAdvanced); return (

setAdvanced({ territories: [], source: [], risk: [] }) } summary="Negotiation board — 83 open deals" />

CRM context

Stage: {stage}

Owners: {ownerIds.length ? ownerIds.join(", ") : "All"}

Unassigned only: {unassigned ? "Yes" : "No"}

Timeframe

Preset: {preset ?? "Custom"}

Range:{" "} {range?.from ? `${range.from.toDateString()} → ${range?.to?.toDateString() ?? "…"}` : "Not set"}

Advanced filters:{" "} {Object.values(advanced).reduce( (total: number, values: string[]) => total + values.length, 0, )}

); } export default FiltersBarCrmPipelineThreeDemo;

Simple