@vendure/dashboard 3.2.2 → 3.2.4

package/src/lib/components/data-table/data-table-filter-dialog.tsx

@@ -7,23 +7,25 @@ import {
     DialogHeader,
     DialogTitle,
 } from '@/components/ui/dialog.js';
-import { Input } from '@/components/ui/input.js';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select.js';
 import { Trans } from '@/lib/trans.js';
 import { Column } from '@tanstack/react-table';
-import React, { useState } from 'react';
+import { useState } from 'react';
+import { DataTableBooleanFilter } from './filters/data-table-boolean-filter.js';
+import { DataTableDateTimeFilter } from './filters/data-table-datetime-filter.js';
+import { DataTableIdFilter } from './filters/data-table-id-filter.js';
+import { DataTableNumberFilter } from './filters/data-table-number-filter.js';
+import { DataTableStringFilter } from './filters/data-table-string-filter.js';
+import { ColumnDataType } from './data-table-types.js';
 
 export interface DataTableFilterDialogProps {
     column: Column<any>;
 }
 
-const STRING_OPERATORS = ['eq', 'notEq', 'contains', 'notContains', 'in', 'notIn', 'regex', 'isNull'];
-
 export function DataTableFilterDialog({ column }: DataTableFilterDialogProps) {
     const columnFilter = column.getFilterValue() as Record<string, string> | undefined;
-    const [initialOperator, initialValue] = columnFilter ? Object.entries(columnFilter as any)[0] : [];
-    const [operator, setOperator] = useState<string>(initialOperator ?? 'contains');
-    const [value, setValue] = useState((initialValue as string) ?? '');
+    const [filter, setFilter] = useState(columnFilter);
+
+    const columnDataType = (column.columnDef.meta as any)?.fieldInfo?.type as ColumnDataType;
     const columnId = column.id;
     return (
         <DialogContent>
@@ -33,25 +35,19 @@ export function DataTableFilterDialog({ column }: DataTableFilterDialogProps) {
                 </DialogTitle>
                 <DialogDescription></DialogDescription>
             </DialogHeader>
-            <div className="flex flex-col md:flex-row gap-2">
-                <Select value={operator} onValueChange={value => setOperator(value)}>
-                    <SelectTrigger>
-                        <SelectValue placeholder="Select operator" />
-                    </SelectTrigger>
-                    <SelectContent>
-                        {STRING_OPERATORS.map(op => (
-                            <SelectItem key={op} value={op}>
-                                <Trans context="filter-operator">{op}</Trans>
-                            </SelectItem>
-                        ))}
-                    </SelectContent>
-                </Select>
-                <Input
-                    placeholder="Enter filter value..."
-                    value={value}
-                    onChange={e => setValue(e.target.value)}
-                />
-            </div>
+            {columnDataType === 'String' ? (
+                <DataTableStringFilter value={filter} onChange={e => setFilter(e)} />
+            ) : columnDataType === 'Int' || columnDataType === 'Float' ? (
+                <DataTableNumberFilter value={filter} onChange={e => setFilter(e)} mode='number' />
+            ) : columnDataType === 'DateTime' ? (
+                <DataTableDateTimeFilter value={filter} onChange={e => setFilter(e)} />
+            ) : columnDataType === 'Boolean' ? (
+                <DataTableBooleanFilter value={filter} onChange={e => setFilter(e)} />
+            ) : columnDataType === 'ID' ? (
+                <DataTableIdFilter value={filter} onChange={e => setFilter(e)} />
+            ) : columnDataType === 'Money' ? (
+                <DataTableNumberFilter value={filter} onChange={e => setFilter(e)} mode='money' />
+            ) : null}
             <DialogFooter className="sm:justify-end">
                 {columnFilter && (
                     <Button type="button" variant="secondary" onClick={e => column.setFilterValue(undefined)}>
@@ -62,7 +58,10 @@ export function DataTableFilterDialog({ column }: DataTableFilterDialogProps) {
                     <Button
                         type="button"
                         variant="secondary"
-                        onClick={e => column.setFilterValue({ [operator]: value })}
+                            onClick={e => {
+                            column.setFilterValue(filter);
+                            setFilter(undefined);
+                        }}
                     >
                         <Trans>Apply filter</Trans>
                     </Button>

package/src/lib/components/data-table/data-table-types.ts

@@ -0,0 +1 @@
+export type ColumnDataType = 'String' | 'Int' | 'Float' | 'DateTime' | 'Boolean' | 'ID' | 'Money';

package/src/lib/components/data-table/data-table-view-options.tsx

@@ -1,51 +1,100 @@
 'use client';
 
-import { Badge } from '@/components/ui/badge.js';
+import { DndContext, closestCenter } from '@dnd-kit/core';
+import {
+    restrictToVerticalAxis,
+} from '@dnd-kit/modifiers';
+import { SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
 import { DropdownMenuTrigger } from '@radix-ui/react-dropdown-menu';
 import { Table } from '@tanstack/react-table';
-import { CircleX, Cross, Filter, Settings2 } from 'lucide-react';
+import { GripVertical, Settings2 } from 'lucide-react';
 
 import { Button } from '@/components/ui/button.js';
 import {
     DropdownMenu,
     DropdownMenuCheckboxItem,
-    DropdownMenuContent,
-    DropdownMenuLabel,
-    DropdownMenuSeparator,
+    DropdownMenuContent
 } from '@/components/ui/dropdown-menu.js';
+import { usePage } from '@/hooks/use-page.js';
+import { useUserSettings } from '@/hooks/use-user-settings.js';
+import { Trans } from '@/lib/trans.js';
 
 interface DataTableViewOptionsProps<TData> {
     table: Table<TData>;
 }
 
+function SortableItem({ id, children }: { id: string; children: React.ReactNode }) {
+    const {
+        attributes,
+        listeners,
+        setNodeRef,
+        transform,
+        transition,
+    } = useSortable({ id });
+
+    const style = {
+        transform: CSS.Transform.toString(transform),
+        transition,
+    };
+
+    return (
+        <div ref={setNodeRef} style={style} className="flex items-center gap-.5">
+            <div {...attributes} {...listeners} className="cursor-grab">
+                <GripVertical className="h-4 w-4 text-muted-foreground" />
+            </div>
+            {children}
+        </div>
+    );
+}
+
 export function DataTableViewOptions<TData>({ table }: DataTableViewOptionsProps<TData>) {
+    const { setTableSettings } = useUserSettings();
+    const page = usePage();
+    const columns = table
+        .getAllColumns()
+        .filter(column => typeof column.accessorFn !== 'undefined' && column.getCanHide());
+
+    const handleDragEnd = (event: any) => {
+        const { active, over } = event;
+        if (active.id !== over.id) {
+            const activeIndex = columns.findIndex(col => col.id === active.id);
+            const overIndex = columns.findIndex(col => col.id === over.id);
+            // update the column order in the `columns` array
+            const newColumns = [...columns];
+            newColumns.splice(overIndex, 0, newColumns.splice(activeIndex, 1)[0]);
+            if (page?.pageId) {
+                setTableSettings(page.pageId, 'columnOrder', newColumns.map(col => col.id));
+            }
+        }
+    };
+
     return (
         <div className="flex items-center gap-2">
             <DropdownMenu>
                 <DropdownMenuTrigger asChild>
                     <Button variant="outline" size="sm" className="ml-auto hidden h-8 lg:flex">
                         <Settings2 />
-                        View
+                        <Trans>Columns</Trans>
                     </Button>
                 </DropdownMenuTrigger>
                 <DropdownMenuContent align="end" className="w-[150px]">
-                    <DropdownMenuLabel>Toggle columns</DropdownMenuLabel>
-                    <DropdownMenuSeparator />
-                    {table
-                        .getAllColumns()
-                        .filter(column => typeof column.accessorFn !== 'undefined' && column.getCanHide())
-                        .map(column => {
-                            return (
-                                <DropdownMenuCheckboxItem
-                                    key={column.id}
-                                    className="capitalize"
-                                    checked={column.getIsVisible()}
-                                    onCheckedChange={value => column.toggleVisibility(!!value)}
-                                >
-                                    {column.id}
-                                </DropdownMenuCheckboxItem>
-                            );
-                        })}
+                    <DndContext collisionDetection={closestCenter} onDragEnd={handleDragEnd} modifiers={[restrictToVerticalAxis]}>
+                        <SortableContext items={columns.map(col => col.id)} strategy={verticalListSortingStrategy}>
+                            {columns.map(column => (
+                                <SortableItem key={column.id} id={column.id}>
+                                    <DropdownMenuCheckboxItem
+                                        className="capitalize"
+                                        checked={column.getIsVisible()}
+                                        onCheckedChange={value => column.toggleVisibility(!!value)}
+                                        onSelect={(e) => e.preventDefault()}
+                                    >
+                                        {column.id}
+                                    </DropdownMenuCheckboxItem>
+                                </SortableItem>
+                            ))}
+                        </SortableContext>
+                    </DndContext>
                 </DropdownMenuContent>
             </DropdownMenu>
         </div>

package/src/lib/components/data-table/data-table.tsx

@@ -2,7 +2,6 @@
 
 import { DataTablePagination } from '@/components/data-table/data-table-pagination.js';
 import { DataTableViewOptions } from '@/components/data-table/data-table-view-options.js';
-import { Badge } from '@/components/ui/badge.js';
 import { Input } from '@/components/ui/input.js';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table.js';
 import {
@@ -19,9 +18,11 @@ import {
     VisibilityState,
 } from '@tanstack/react-table';
 import { TableOptions } from '@tanstack/table-core';
-import { CircleX, Filter } from 'lucide-react';
 import React, { Suspense, useEffect } from 'react';
+import { AddFilterMenu } from './add-filter-menu.js';
 import { DataTableFacetedFilter, DataTableFacetedFilterOption } from './data-table-faceted-filter.js';
+import { DataTableFilterBadge } from './data-table-filter-badge.js';
+import { useChannel } from '@/hooks/use-channel.js';
 
 export interface FacetedFilter {
     title: string;
@@ -41,6 +42,7 @@ interface DataTableProps<TData, TValue> {
     onPageChange?: (table: TableType<TData>, page: number, itemsPerPage: number) => void;
     onSortChange?: (table: TableType<TData>, sorting: SortingState) => void;
     onFilterChange?: (table: TableType<TData>, columnFilters: ColumnFilter[]) => void;
+    onColumnVisibilityChange?: (table: TableType<TData>, columnVisibility: VisibilityState) => void;
     onSearchTermChange?: (searchTerm: string) => void;
     defaultColumnVisibility?: VisibilityState;
     facetedFilters?: { [key: string]: FacetedFilter | undefined };
@@ -64,6 +66,7 @@ export function DataTable<TData, TValue>({
     onSortChange,
     onFilterChange,
     onSearchTermChange,
+    onColumnVisibilityChange,
     defaultColumnVisibility,
     facetedFilters,
     disableViewOptions,
@@ -71,6 +74,7 @@ export function DataTable<TData, TValue>({
 }: DataTableProps<TData, TValue>) {
     const [sorting, setSorting] = React.useState<SortingState>(sortingInitialState || []);
     const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(filtersInitialState || []);
+    const { activeChannel } = useChannel();
     const [pagination, setPagination] = React.useState<PaginationState>({
         pageIndex: (page ?? 1) - 1,
         pageSize: itemsPerPage ?? 10,
@@ -117,6 +121,11 @@ export function DataTable<TData, TValue>({
     useEffect(() => {
         onFilterChange?.(table, columnFilters);
     }, [columnFilters]);
+
+    useEffect(() => {
+        onColumnVisibilityChange?.(table, columnVisibility);
+    }, [columnVisibility]);
+
     return (
         <>
             <div className="flex justify-between items-start">
@@ -142,30 +151,20 @@ export function DataTable<TData, TValue>({
                                 />
                             ))}
                         </Suspense>
+                        <AddFilterMenu columns={table.getAllColumns()} />
                     </div>
                     <div className="flex gap-1">
                         {columnFilters
                             .filter(f => !facetedFilters?.[f.id])
                             .map(f => {
-                                const [operator, value] = Object.entries(
-                                    f.value as Record<string, string>,
-                                )[0];
-                                return (
-                                    <Badge key={f.id} className="flex gap-1 items-center" variant="secondary">
-                                        <Filter size="12" className="opacity-50" />
-                                        <div>{f.id}</div>
-                                        <div>{operator}</div>
-                                        <div>{value}</div>
-                                        <button
-                                            className="cursor-pointer"
-                                            onClick={() =>
-                                                setColumnFilters(old => old.filter(x => x.id !== f.id))
-                                            }
-                                        >
-                                            <CircleX size="14" />
-                                        </button>
-                                    </Badge>
-                                );
+                                const column = table.getColumn(f.id);
+                                const currency = activeChannel?.defaultCurrencyCode ?? 'USD';
+                                return <DataTableFilterBadge
+                                            key={f.id}
+                                            filter={f}
+                                            currencyCode={currency}
+                                            dataType={(column?.columnDef.meta as any)?.fieldInfo?.type ?? 'String'}
+                                            onRemove={() => setColumnFilters(old => old.filter(x => x.id !== f.id))} />;
                             })}
                     </div>
                 </div>
@@ -182,9 +181,9 @@ export function DataTable<TData, TValue>({
                                             {header.isPlaceholder
                                                 ? null
                                                 : flexRender(
-                                                      header.column.columnDef.header,
-                                                      header.getContext(),
-                                                  )}
+                                                    header.column.columnDef.header,
+                                                    header.getContext(),
+                                                )}
                                         </TableHead>
                                     );
                                 })}

package/src/lib/components/data-table/filters/data-table-boolean-filter.tsx

@@ -0,0 +1,57 @@
+import { Trans } from "@/lib/trans.js";
+
+import { Select, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select.js";
+
+import { SelectContent } from "@/components/ui/select.js";
+import { useEffect, useState } from "react";
+import { HumanReadableOperator } from "../human-readable-operator.js";
+
+export interface DataTableBooleanFilterProps {
+    value: Record<string, any> | undefined;
+    onChange: (filter: Record<string, any>) => void;
+}
+
+export const BOOLEAN_OPERATORS = ['eq', 'isNull'] as const;
+
+export function DataTableBooleanFilter({ value: incomingValue, onChange }: DataTableBooleanFilterProps) {
+    const initialOperator = incomingValue ? Object.keys(incomingValue)[0] ?? 'eq' : 'eq';
+    const initialValue = incomingValue ? Object.values(incomingValue)[0] : true;
+    const [operator, setOperator] = useState<string>(initialOperator ?? 'eq');
+    const [value, setValue] = useState<boolean>(initialValue as boolean ?? true);
+
+    useEffect(() => {
+        onChange({ [operator]: value });
+    }, [operator, value]);
+
+    return (
+        <div className="flex flex-col md:flex-row gap-2">
+            <Select value={operator} onValueChange={value => setOperator(value)}>
+                <SelectTrigger>
+                    <SelectValue placeholder="Select operator" />
+                </SelectTrigger>
+                <SelectContent>
+                    {BOOLEAN_OPERATORS.map(op => (
+                        <SelectItem key={op} value={op}>
+                            <HumanReadableOperator operator={op} />
+                        </SelectItem>
+                    ))}
+                </SelectContent>
+            </Select>
+            {operator !== 'isNull' && (
+                <Select value={value.toString()} onValueChange={v => setValue(v === 'true')}>
+                    <SelectTrigger>
+                        <SelectValue placeholder="Select value" />
+                    </SelectTrigger>
+                    <SelectContent>
+                        <SelectItem value="true">
+                            <Trans>True</Trans>
+                        </SelectItem>
+                        <SelectItem value="false">
+                            <Trans>False</Trans>
+                        </SelectItem>
+                    </SelectContent>
+                </Select>
+            )}
+        </div>
+    );
+}

package/src/lib/components/data-table/filters/data-table-datetime-filter.tsx

@@ -0,0 +1,93 @@
+import { Trans } from "@/lib/trans.js";
+import { Select, SelectValue, SelectTrigger, SelectItem } from "@/components/ui/select.js";
+import { SelectContent } from "@/components/ui/select.js";
+import { useEffect, useState } from "react";
+import { DateTimeInput } from "@/components/data-input/datetime-input.js";
+import { HumanReadableOperator } from "../human-readable-operator.js";
+
+export interface DataTableDateTimeFilterProps {
+    value: Record<string, any> | undefined;
+    onChange: (filter: Record<string, any>) => void;
+}
+
+export const DATETIME_OPERATORS = ['eq', 'before', 'after', 'between', 'isNull'] as const;
+
+export function DataTableDateTimeFilter({ value: incomingValue, onChange }: DataTableDateTimeFilterProps) {
+    const initialOperator = incomingValue ? Object.keys(incomingValue)[0] : 'eq';
+    const initialValue = incomingValue ? Object.values(incomingValue)[0] : '';
+    const [operator, setOperator] = useState<string>(initialOperator ?? 'eq');
+    const [value, setValue] = useState<Date | undefined>(initialValue ? new Date(initialValue) : undefined);
+    const [startDate, setStartDate] = useState<Date | undefined>(undefined);
+    const [endDate, setEndDate] = useState<Date | undefined>(undefined);
+    const [error, setError] = useState<string>('');
+
+    useEffect(() => {
+        if (operator === 'isNull') {
+            onChange({ [operator]: true });
+            return;
+        }
+
+        if (operator === 'between') {
+            if (!startDate && !endDate) {
+                onChange({});
+                return;
+            }
+            if (!startDate || !endDate) {
+                setError('Please enter both start and end dates');
+                return;
+            }
+            if (startDate > endDate) {
+                setError('Start date must be before end date');
+                return;
+            }
+            setError('');
+            onChange({ [operator]: { start: startDate.toISOString(), end: endDate.toISOString() } });
+        } else {
+            if (!value) {
+                onChange({});
+                return;
+            }
+            setError('');
+            onChange({ [operator]: value.toISOString() });
+        }
+    }, [operator, value, startDate, endDate]);
+
+    return (
+        <div className="flex flex-col gap-2">
+            <div className="flex flex-col md:flex-row gap-2">
+                <Select value={operator} onValueChange={value => setOperator(value)}>
+                    <SelectTrigger>
+                        <SelectValue placeholder="Select operator" />
+                    </SelectTrigger>
+                    <SelectContent>
+                        {DATETIME_OPERATORS.map(op => (
+                            <SelectItem key={op} value={op}>
+                                <HumanReadableOperator operator={op} />
+                            </SelectItem>
+                        ))}
+                    </SelectContent>
+                </Select>
+                {operator !== 'isNull' && (
+                    operator === 'between' ? (
+                        <div className="space-y-2">
+                            <DateTimeInput
+                                value={startDate}
+                                onChange={setStartDate}
+                            />
+                            <DateTimeInput
+                                value={endDate}
+                                onChange={setEndDate}
+                            />
+                        </div>
+                    ) : (
+                        <DateTimeInput
+                            value={value}
+                            onChange={setValue}
+                        />
+                    )
+                )}
+            </div>
+            {error && <p className="text-sm text-red-500">{error}</p>}
+        </div>
+    );
+}

package/src/lib/components/data-table/filters/data-table-id-filter.tsx

@@ -0,0 +1,58 @@
+import { Trans } from "@/lib/trans.js";
+
+import { Select, SelectValue, SelectTrigger, SelectItem } from "@/components/ui/select.js";
+
+import { SelectContent } from "@/components/ui/select.js";
+import { Input } from "@/components/ui/input.js";
+import { useEffect, useState } from "react";
+import { HumanReadableOperator } from "../human-readable-operator.js";
+
+export interface DataTableIdFilterProps {
+    value: Record<string, any> | undefined;
+    onChange: (filter: Record<string, any>) => void;
+}
+
+export const ID_OPERATORS = ['eq', 'notEq', 'in', 'notIn', 'isNull'] as const;
+
+export function DataTableIdFilter({ value: incomingValue, onChange }: DataTableIdFilterProps) {
+    const initialOperator = incomingValue ? Object.keys(incomingValue)[0] : 'eq';
+    const initialValue = incomingValue ? Object.values(incomingValue)[0] : '';
+    const [operator, setOperator] = useState<string>(initialOperator ?? 'eq');
+    const [value, setValue] = useState<string>(initialValue ?? '');
+
+    useEffect(() => {
+        if (operator === 'isNull') {
+            onChange({ [operator]: true });
+        } else if (operator === 'in' || operator === 'notIn') {
+            // Split by comma and trim whitespace
+            const values = value.split(',').map(v => v.trim()).filter(v => v);
+            onChange({ [operator]: values });
+        } else {
+            onChange({ [operator]: value });
+        }
+    }, [operator, value]);
+
+    return (
+        <div className="flex flex-col md:flex-row gap-2">
+            <Select value={operator} onValueChange={value => setOperator(value)}>
+                <SelectTrigger>
+                    <SelectValue placeholder="Select operator" />
+                </SelectTrigger>
+                <SelectContent>
+                    {ID_OPERATORS.map(op => (
+                        <SelectItem key={op} value={op}>
+                            <HumanReadableOperator operator={op} />
+                        </SelectItem>
+                    ))}
+                </SelectContent>
+            </Select>
+            {operator !== 'isNull' && (
+                <Input
+                    placeholder={operator === 'in' || operator === 'notIn' ? "Enter comma-separated IDs..." : "Enter ID..."}
+                    value={value}
+                    onChange={e => setValue(e.target.value)}
+                />
+            )}
+        </div>
+    );
+}

package/src/lib/components/data-table/filters/data-table-number-filter.tsx

@@ -0,0 +1,119 @@
+import { Trans } from "@/lib/trans.js";
+import { Select, SelectValue, SelectTrigger, SelectItem } from "@/components/ui/select.js";
+import { SelectContent } from "@/components/ui/select.js";
+import { Input } from "@/components/ui/input.js";
+import { MoneyInput } from "@/components/data-input/money-input.js";
+import { useEffect, useState } from "react";
+import { useChannel } from "@/hooks/use-channel.js";
+import { HumanReadableOperator } from "../human-readable-operator.js";
+
+export interface DataTableNumberFilterProps {
+    mode: 'number' | 'money';
+    value: Record<string, any> | undefined;
+    onChange: (filter: Record<string, any>) => void;
+}
+
+export const NUMBER_OPERATORS = ['eq', 'gt', 'gte', 'lt', 'lte', 'isNull', 'between'] as const;
+
+export function DataTableNumberFilter({ mode, value: incomingValue, onChange }: DataTableNumberFilterProps) {
+    const { activeChannel } = useChannel();
+    const initialOperator = incomingValue ? Object.keys(incomingValue)[0] : 'eq';
+    const initialValue = incomingValue ? Object.values(incomingValue)[0] : 0;
+    const [operator, setOperator] = useState<string>(initialOperator ?? 'eq');
+    const [value, setValue] = useState<string>(initialValue?.toString() ?? '');
+    const [minValue, setMinValue] = useState<string>('');
+    const [maxValue, setMaxValue] = useState<string>('');
+    const [error, setError] = useState<string>('');
+
+    useEffect(() => {
+        if (operator === 'isNull') {
+            onChange({ [operator]: true });
+            return;
+        }
+
+        if (operator === 'between') {
+            if (!minValue && !maxValue) {
+                onChange({});
+                return;
+            }
+            if (!minValue || !maxValue) {
+                setError('Please enter both min and max values');
+                return;
+            }
+            const minNum = parseFloat(minValue);
+            const maxNum = parseFloat(maxValue);
+            if (isNaN(minNum) || isNaN(maxNum)) {
+                setError('Please enter valid numbers');
+                return;
+            }
+            if (minNum > maxNum) {
+                setError('Min value must be less than max value');
+                return;
+            }
+            setError('');
+            onChange({ [operator]: { start: minNum, end: maxNum } });
+        } else {
+            if (!value) {
+                onChange({});
+                return;
+            }
+            const numValue = parseFloat(value);
+            if (isNaN(numValue)) {
+                setError('Please enter a valid number');
+                return;
+            }
+            setError('');
+            onChange({ [operator]: numValue });
+        }
+    }, [operator, value, minValue, maxValue]);
+
+    const renderInput = (value: string, onChange: (value: string) => void, placeholder: string) => {
+        if (mode === 'money') {
+            return (
+                <MoneyInput
+                    value={parseFloat(value) || 0}
+                    onChange={(newValue) => onChange(newValue.toString())}
+                    currency={activeChannel?.defaultCurrencyCode ?? 'USD'}
+                />
+            );
+        }
+        return (
+            <Input
+                type="number"
+                placeholder={placeholder}
+                value={value}
+                onChange={e => onChange(e.target.value)}
+            />
+        );
+    };
+
+    return (
+        <div className="flex flex-col gap-2">
+            <div className="flex flex-col md:flex-row gap-2">
+                <Select value={operator} onValueChange={value => setOperator(value)}>
+                    <SelectTrigger>
+                        <SelectValue placeholder="Select operator" />
+                    </SelectTrigger>
+                    <SelectContent>
+                        {NUMBER_OPERATORS.map(op => (
+                            <SelectItem key={op} value={op}>
+                                <HumanReadableOperator operator={op} />
+                            </SelectItem>
+                        ))}
+                    </SelectContent>
+                </Select>
+                {operator !== 'isNull' && (
+                    operator === 'between' ? (
+                        <div className="flex gap-2">
+                            {renderInput(minValue, setMinValue, "Min")}
+                            {renderInput(maxValue, setMaxValue, "Max")}
+                        </div>
+                    ) : (
+                        renderInput(value, setValue, "Enter value...")
+                    )
+                )}
+            </div>
+            {error && <p className="text-sm text-red-500">{error}</p>}
+        </div>
+    );
+}