Filter Builder

import * as React from "react";
import { FilterBuilder, applyFilter, type FilterField, type FilterGroup } from "@/components/ui/filter-builder";

type Deal = { name: string; amount: number; stage: string };

const fields: FilterField<Deal>[] = [
  { id: "name", label: "Name", type: "text" },
  { id: "amount", label: "Amount", type: "number", prefix: "$" },
  { id: "stage", label: "Stage", type: "select", options: [{ value: "won", label: "Won" }, { value: "open", label: "Open" }] },
];

export function DealFilters({ deals, onFiltered }: { deals: Deal[]; onFiltered: (rows: Deal[]) => void }) {
  const [filter, setFilter] = React.useState<FilterGroup>({ id: "root", conjunction: "and", items: [] });
  const matches = applyFilter(deals, filter, fields);
  React.useEffect(() => onFiltered(matches), [matches, onFiltered]);
  return <FilterBuilder fields={fields as FilterField<unknown>[]} value={filter} onChange={setFilter} resultCount={matches.length} noun="deal" />;
}