@tulip-systems/core 0.8.3 → 0.10.0

package/src/modules/data-tables/components/filters/combobox.client.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import { Check, type LucideIcon, PlusCircle } from "lucide-react";
-import { type ParserBuilder, useQueryState } from "nuqs";
+import { ListFilter, type LucideIcon } from "lucide-react";
+import { type SingleParserBuilder, useQueryState } from "nuqs";
 import { startTransition, useOptimistic } from "react";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -11,6 +11,7 @@ import {
   CommandGroup,
   CommandInput,
   CommandItem,
+  CommandItemCheck,
   CommandList,
   CommandSeparator,
 } from "@/components/ui/command.client";
@@ -28,7 +29,7 @@ export type TableFilterComboboxOption = {
 
 export type TableFilterComboboxProps<TValue extends string = string> = {
   title?: string;
-  filter: { name: string; parser: ParserBuilder<TValue[] | null> };
+  filter: { name: string; parser: SingleParserBuilder<TValue[] | null> };
   options: TableFilterComboboxOption[];
 };
 
@@ -47,11 +48,11 @@ export function TableFilterCombobox<TValue extends string>({
     <Popover>
       <PopoverTrigger asChild>
         <Button type="button" variant="outline" size="sm" className="h-8 border-dashed">
-          <PlusCircle className="h-4 w-4" />
+          <ListFilter className="mr-1 h-4 w-4" />
           {title}
           {selectedValues?.size > 0 && (
             <>
-              <Separator orientation="vertical" className="mx-2 h-4" />
+              <Separator orientation="vertical" className="mx-2 h-full" />
               <Badge variant="secondary" className="rounded-sm px-1 font-normal lg:hidden">
                 {selectedValues.size}
               </Badge>
@@ -90,6 +91,8 @@ export function TableFilterCombobox<TValue extends string>({
                 return (
                   <CommandItem
                     key={option.value}
+                    value={option.value}
+                    data-checked={selectedValues.has(option.value)}
                     onSelect={() =>
                       startTransition(() => {
                         const newSelectedValues = new Set(selectedValues);
@@ -105,14 +108,7 @@ export function TableFilterCombobox<TValue extends string>({
                       })
                     }
                   >
-                    <div
-                      data-active={selectedValues.has(option.value)}
-                      className={cn(
-                        "mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary opacity-50 data-[active=true]:bg-primary data-[active=true]:text-primary-foreground data-[active=true]:opacity-100 [&>svg]:invisible data-[active=true]:[&>svg]:visible data-[active=true]:[&>svg]:text-primary-foreground",
-                      )}
-                    >
-                      <Check className="h-4 w-4 text-foreground" />
-                    </div>
+                    <CommandItemCheck />
 
                     <div className="flex flex-1 items-center gap-2">
                       {Icon && <Icon className={cn("size-4", option.className)} />}

package/src/modules/data-tables/components/filters/date-range.client.tsx

@@ -0,0 +1,127 @@
+"use client";
+
+import { Badge, Button, Separator } from "@tulip-systems/core/components";
+import {
+  Calendar,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@tulip-systems/core/components/client";
+import { format } from "date-fns";
+import { CalendarIcon } from "lucide-react";
+import { type SingleParserBuilder, useQueryState } from "nuqs";
+import { startTransition, useState } from "react";
+
+export type TableFilterDateRangeValue = [Date, Date] | null;
+
+export type TableFilterDateRangeProps = {
+  title?: string;
+  filter: { name: string; parser: SingleParserBuilder<[Date, Date] | null> };
+  presets?: TableFilterDateRangePreset[];
+};
+
+export type TableFilterDateRangePreset = {
+  label: string;
+  value: [Date, Date];
+};
+
+export function TableFilterDateRange({
+  title,
+  filter,
+  presets,
+}: TableFilterDateRangeProps) {
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useQueryState(filter.name, filter.parser);
+
+  const from = query?.[0] ?? null;
+  const until = query?.[1] ?? null;
+  const selectedRange =
+    from || until ? { from: from ?? undefined, to: until ?? undefined } : undefined;
+
+  const label = formatDateRange(from, until);
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button type="button" variant="outline" size="sm" className="h-8 border-dashed">
+          <CalendarIcon className="mr-1 h-4 w-4" />
+          {title}
+          {label && (
+            <>
+              <Separator orientation="vertical" className="mx-2 h-full" />
+              <Badge variant="secondary" className="rounded-sm px-1 font-normal">
+                {label}
+              </Badge>
+            </>
+          )}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-auto p-0" align="start">
+        <div className="flex flex-col gap-3 p-3 lg:flex-row">
+          {presets && presets.length > 0 && (
+            <div className="flex min-w-40 flex-col gap-1 lg:border-r lg:pr-3">
+              {presets.map((preset) => (
+                <Button
+                  key={preset.label}
+                  type="button"
+                  size="sm"
+                  variant="ghost"
+                  className="justify-start"
+                  onClick={() => {
+                    setQuery(preset.value, { startTransition });
+                    setOpen(false);
+                  }}
+                >
+                  {preset.label}
+                </Button>
+              ))}
+            </div>
+          )}
+
+          <Calendar
+            mode="range"
+            numberOfMonths={2}
+            selected={selectedRange}
+            onSelect={(range) => {
+              if (range?.from && range?.to) {
+                setQuery([range.from, range.to], { startTransition });
+              } else if (range?.from) {
+                setQuery([range.from, range.from], { startTransition });
+              } else {
+                setQuery(null, { startTransition });
+              }
+            }}
+            autoFocus
+          />
+        </div>
+
+        {label && (
+          <div className="w-full space-y-2 p-1.5">
+            <Separator />
+
+            <Button
+              size="sm"
+              type="button"
+              variant="ghost"
+              onClick={() => {
+                setOpen(false);
+                setQuery(null, { startTransition });
+              }}
+              className="w-full text-center"
+            >
+              Clear filters
+            </Button>
+          </div>
+        )}
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+function formatDateRange(from: Date | null, until: Date | null) {
+  if (from && until) return `${format(from, "dd/MM/yyyy")} tot ${format(until, "dd/MM/yyyy")}`;
+  if (from) return `Vanaf ${format(from, "dd/MM/yyyy")}`;
+  if (until) return `Tot ${format(until, "dd/MM/yyyy")}`;
+
+  return null;
+}

package/src/modules/data-tables/components/filters/search.client.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import { Search } from "lucide-react";
+import { debounce, type SingleParserBuilder, useQueryState } from "nuqs";
+import { startTransition } from "react";
+import { Input } from "@/components/ui/input";
+
+export type TableFilterSearchProps = {
+  placeholder?: string;
+  filter: { name: string; parser: SingleParserBuilder<string | null> };
+};
+
+export function TableFilterSearch({ placeholder, filter }: TableFilterSearchProps) {
+  const [query, setQuery] = useQueryState(filter.name, filter.parser);
+
+  return (
+    <div className="relative">
+      <Search className="pointer-events-none absolute top-1/2 left-2.5 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+      <Input
+        defaultValue={query ?? undefined}
+        placeholder={placeholder}
+        className="h-8 w-[150px] pl-8 lg:w-[250px]"
+        onChange={(e) => {
+          setQuery(e.target.value || null, {
+            limitUrlUpdates: e.target.value === "" ? undefined : debounce(350),
+            startTransition,
+          });
+        }}
+        onKeyDown={(e) => {
+          if (e.key === "Enter") {
+            setQuery(e.currentTarget.value || null, { startTransition });
+          }
+        }}
+      />
+    </div>
+  );
+}

package/src/modules/data-tables/components/filters/slider.client.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import { PlusCircle } from "lucide-react";
-import { type ParserBuilder, useQueryState } from "nuqs";
+import { SlidersHorizontal } from "lucide-react";
+import { type SingleParserBuilder, useQueryState } from "nuqs";
 import { startTransition, useState } from "react";
 import { useDebouncedCallback } from "use-debounce";
 import { Badge } from "@/components/ui/badge";
@@ -13,7 +13,7 @@ import { Slider } from "@/components/ui/slider";
 
 export type TableFilterSliderProps = {
   title?: string;
-  filter: { name: string; parser: ParserBuilder<[number, number] | null> };
+  filter: { name: string; parser: SingleParserBuilder<[number, number] | null> };
   options?: { min: number; max: number };
 };
 
@@ -38,7 +38,7 @@ export function TableFilterSlider({
     <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger asChild>
         <Button type="button" variant="outline" size="sm" className="h-8 border-dashed">
-          <PlusCircle className="mr-2 h-4 w-4" />
+          <SlidersHorizontal className="mr-1 h-4 w-4" />
           {title}
           {selectedValues && selectedValues?.length > 0 && (
             <>

package/src/modules/data-tables/components/filters/toggle.client.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { ToggleLeft } from "lucide-react";
+import { type SingleParserBuilder, useQueryState } from "nuqs";
+import { startTransition } from "react";
+import { Toggle } from "@/components/ui/toggle.client";
+
+export type TableFilterToggleProps = {
+  title?: string;
+  filter: { name: string; parser: SingleParserBuilder<boolean | null> };
+};
+
+export function TableFilterToggle({ title, filter }: TableFilterToggleProps) {
+  const [query, setQuery] = useQueryState(filter.name, filter.parser);
+
+  return (
+    <Toggle
+      variant="outline"
+      size="sm"
+      className="h-8 border-border border-dashed bg-background data-[state=on]:border-primary data-[state=on]:border-solid data-[state=on]:bg-primary data-[state=on]:text-primary-foreground dark:border-input dark:bg-input/30"
+      pressed={query === true}
+      onPressedChange={(pressed) =>
+        startTransition(() => {
+          setQuery(pressed ? true : null);
+        })
+      }
+    >
+      <ToggleLeft className="mr-2 h-4 w-4" />
+      {title}
+    </Toggle>
+  );
+}

package/src/modules/data-tables/components/footer.tsx

@@ -3,12 +3,13 @@
 import type { Table } from "@tanstack/react-table";
 import type { TableMeta } from "../lib/types";
 import { InfinteTableBottombar, InfinteTableFooter } from "../strategies/infinite/components";
+import { LocalTableFooter } from "../strategies/local/components";
 import { PaginationTableFooter } from "../strategies/pagination/components";
 
 /**
  * Table bottombar
  */
-export function TableFooter<TData extends { id: string }>({ table }: { table: Table<TData> }) {
+export function TableFooter<TData>({ table }: { table: Table<TData> }) {
   const meta = table.options.meta as TableMeta<TData>;
 
   if (meta.strategy.name === "pagination") {
@@ -19,13 +20,17 @@ export function TableFooter<TData extends { id: string }>({ table }: { table: Ta
     return <InfinteTableFooter table={table} />;
   }
 
+  if (meta.strategy.name === "local") {
+    return null;
+  }
+
   throw new Error(`Unknown strategy: ${meta.strategy.name}`);
 }
 
 /**
  * Table bottombar
  */
-export function TableBottombar<TData extends { id: string }>({ table }: { table: Table<TData> }) {
+export function TableBottombar<TData>({ table }: { table: Table<TData> }) {
   const meta = table.options.meta as TableMeta<TData>;
 
   if (meta.strategy.name === "pagination") {
@@ -36,5 +41,9 @@ export function TableBottombar<TData extends { id: string }>({ table }: { table:
     return <InfinteTableBottombar table={table} />;
   }
 
+  if (meta.strategy.name === "local") {
+    return <LocalTableFooter table={table} />;
+  }
+
   throw new Error(`Unknown strategy: ${meta.strategy.name}`);
 }

package/src/modules/data-tables/entry.client.ts

@@ -5,7 +5,10 @@ export * from "./components/cell/common.client";
 export * from "./components/cell/index.client";
 export * from "./components/cell/select.client";
 export * from "./components/filters/combobox.client";
+export * from "./components/filters/date-range.client";
+export * from "./components/filters/search.client";
 export * from "./components/filters/slider.client";
+export * from "./components/filters/toggle.client";
 export * from "./components/search-input.client";
 /**
  * Hooks
@@ -16,6 +19,7 @@ export * from "./hooks/use-table.client";
  * Strategies
  */
 export * from "./strategies/infinite/strategy";
+export * from "./strategies/local/strategy";
 export * from "./strategies/pagination/strategy";
 /**
  * Data tables

package/src/modules/data-tables/entry.server.ts

@@ -1,9 +1,9 @@
 /**
  * Lib
  */
-export * from "./lib/converters/cursor";
 export * from "./lib/converters/dto";
-export * from "./lib/converters/filter";
+export * from "./lib/converters/filters";
+export * from "./lib/converters/pagination";
 export * from "./lib/converters/search";
 export * from "./lib/converters/sorting";
 

package/src/modules/data-tables/hooks/use-context.client.tsx

@@ -10,14 +10,11 @@ import {
   useEffect,
   useState,
 } from "react";
-import type { CommandDef } from "@/modules/commands/lib/definitions";
+import type { CommandFor } from "@/modules/commands/lib/builder";
 import type { TableFiltersResult } from "../lib/filters/config";
 import type { Selection, TableColumnDef, TableMetaInput, TableStrategy } from "../lib/types";
 
-type useReactTableProps<TData extends { id: string }> = Omit<
-  TableOptions<TData>,
-  "getCoreRowModel"
-> & {
+type useReactTableProps<TData> = Omit<TableOptions<TData>, "getCoreRowModel"> & {
   getCoreRowModel?: TableOptions<TData>["getCoreRowModel"];
 };
 
@@ -25,18 +22,19 @@ type useReactTableProps<TData extends { id: string }> = Omit<
  * Use table config
  */
 export type TableConfigContextValue<
-  TData extends { id: string },
+  TData,
   TFilters extends TableFiltersResult = TableFiltersResult,
   TMeta extends TableMetaInput<TData> = TableMetaInput<TData>,
 > = useReactTableProps<TData> & {
   queryData: TData[];
   data: TData[];
   setData: Dispatch<SetStateAction<TData[]>>;
+  getRowId: (row: TData) => string;
   columns: TableColumnDef<TData>[];
   strategy: TableStrategy;
   selection?: Selection;
   columnVisibility?: VisibilityState;
-  commands?: CommandDef<TData, TMeta>[];
+  commands?: CommandFor<TData[], TMeta>[];
   meta?: TMeta;
   where?: TFilters;
 };
@@ -47,7 +45,7 @@ const TableConfigContext = createContext({});
  * Table context hook
  */
 export function useTableConfigContext<
-  TData extends { id: string },
+  TData,
   TFilters extends TableFiltersResult = TableFiltersResult,
   TMeta extends TableMetaInput<TData> = TableMetaInput<TData>,
 >(): TableConfigContextValue<TData, TFilters, TMeta> {
@@ -60,7 +58,7 @@ export function useTableConfigContext<
  * Table context provider
  */
 export function TableConfigProvider<
-  TData extends { id: string },
+  TData,
   TFilters extends TableFiltersResult = TableFiltersResult,
   TMeta extends TableMetaInput<TData> = TableMetaInput<TData>,
 >({
@@ -77,13 +75,13 @@ export function TableConfigProvider<
  * Create use table config hook
  */
 type CreateTableConfigInput<
-  TData extends { id: string },
+  TData,
   TFilters extends TableFiltersResult = TableFiltersResult,
   TMeta extends TableMetaInput<TData> = TableMetaInput<TData>,
 > = Omit<TableConfigContextValue<TData, TFilters, TMeta>, "data" | "setData">;
 
 export const createTableConfig = <
-  TData extends { id: string },
+  TData,
   TFilters extends TableFiltersResult = TableFiltersResult,
   TMeta extends TableMetaInput<TData> = TableMetaInput<TData>,
 >(

package/src/modules/data-tables/hooks/use-selection.client.ts

@@ -7,16 +7,17 @@ import type { Selection } from "../lib/types";
 /**
  * Row selection props
  */
-type UseSelectionProps<TData extends { id: string }> = {
+type UseSelectionProps<TData> = {
   data: TData[];
   selection?: Selection;
+  getRowId: (row: TData) => string;
 };
 
 /**
  * Row selection hook for tanstack/react-table
  * @param { UseSelectionProps<TData> } props
  */
-export function useSelection<TData extends { id: string }>(props: UseSelectionProps<TData>) {
+export function useSelection<TData>(props: UseSelectionProps<TData>) {
   const [rowSelectionState, setRowSelectionState] = React.useState({});
   const [selectedData, setSelectedData] = React.useState<TData[]>([]);
 
@@ -41,11 +42,17 @@ export function useSelection<TData extends { id: string }>(props: UseSelectionPr
     // Filter out the items that are no longer selected and add the newly selected items
     setSelectedData((prevData) => {
       // Create a Set of previously selected IDs for faster lookup
-      const prevSelectedIds = new Set(prevData.map((item) => item.id));
+      const prevSelectedIds = new Set(prevData.map((item) => props.getRowId(item)));
 
       return [
-        ...prevData.filter(({ id }) => selectedIds.has(id)),
-        ...props.data.filter(({ id }) => selectedIds.has(id) && !prevSelectedIds.has(id)),
+        ...prevData.filter((row) => {
+          const id = props.getRowId(row);
+          return selectedIds.has(id) && prevSelectedIds.has(id);
+        }),
+        ...props.data.filter((row) => {
+          const id = props.getRowId(row);
+          return selectedIds.has(id) && !prevSelectedIds.has(id);
+        }),
       ];
     });
 

package/src/modules/data-tables/hooks/use-table.client.ts

@@ -14,16 +14,14 @@ import { useSelection } from "./use-selection.client";
 /**
  * Server data table
  */
-export function useTable<
-  TData extends { id: string },
-  TMeta extends TableMeta<TData> = TableMeta<TData>,
->() {
-  const { data, strategy, selection, columnVisibility, commands, ...options } =
+export function useTable<TData, TMeta extends TableMeta<TData> = TableMeta<TData>>() {
+  const { data, strategy, selection, columnVisibility, commands, getRowId, ...options } =
     useTableConfigContext<TData, TMeta>();
 
   const { rowSelection, selectedData, onRowSelectionChange } = useSelection({
     data,
     selection,
+    getRowId,
   });
   const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
 
@@ -44,7 +42,7 @@ export function useTable<
       pagination: strategy.paginationState,
     },
     getCoreRowModel: getCoreRowModel(),
-    getRowId: (row) => row.id,
+    getRowId: getRowId,
     manualPagination: strategy.manualPagination,
     onPaginationChange: strategy.onPaginationChange,
     manualSorting: strategy.manualSorting,

package/src/modules/data-tables/lib/converters/filters.ts

@@ -0,0 +1,85 @@
+import type { TDatabaseSchema } from "@tulip-systems/core/config";
+import { and, type SQL } from "drizzle-orm";
+import type { Database } from "@/modules/database/lib/service.server";
+
+/**
+ * Parser function for a single filter key.
+ * Returns a SQL condition or undefined when the filter is not active.
+ */
+type FilterParser<TFilters, TSchema extends TDatabaseSchema = TDatabaseSchema> = (
+  filters: TFilters,
+  context: { db: Database<TSchema> },
+) => SQL | undefined;
+
+/**
+ * Map of filter keys to parser functions.
+ * Parsers are optional so routes can define only the keys they need.
+ */
+type FilterParserConfig<
+  TFilters extends Record<string, unknown>,
+  TSchema extends TDatabaseSchema = TDatabaseSchema,
+> = {
+  [K in keyof TFilters]?: FilterParser<TFilters, TSchema>;
+};
+
+/**
+ * Boolean key selection used by .pick() and .omit().
+ * Example: { search: true, status: true }
+ */
+type KeySelection<K extends PropertyKey> = Partial<Record<K, boolean>>;
+
+/**
+ * Creates a chainable parser builder for table query filters.
+ *
+ * Usage:
+ * - create parser once from config
+ * - bind context per request
+ * - optionally narrow keys with pick/omit
+ * - parse filters into a single `and(...)` SQL condition
+ */
+export function createTableQueryFiltersParser<
+  TFilters extends Record<string, unknown>,
+  TSchema extends TDatabaseSchema = TDatabaseSchema,
+>(config: FilterParserConfig<TFilters, TSchema>) {
+  type Key = Extract<keyof TFilters, string>;
+  // All configured filter keys; used as the default selected set.
+  const configKeys = Object.keys(config) as Key[];
+
+  // Immutable builder: each pick/omit returns a new builder instance.
+  function createBuilder(context: { db: Database<TSchema> }, selected: Set<Key>) {
+    return {
+      // Keep only the keys explicitly marked as true.
+      pick(keys: KeySelection<Key>) {
+        const selectedKeys = Object.entries(keys)
+          .filter(([_, value]) => value)
+          .map(([key]) => key) as Key[];
+
+        const next = new Set<Key>(selectedKeys);
+        return createBuilder(context, next);
+      },
+
+      // Remove keys marked as true from the current selected set.
+      omit(keys: KeySelection<Key>) {
+        const selectedKeys = Array.from(selected).filter((key) => !keys[key]);
+
+        const next = new Set(selectedKeys);
+        return createBuilder(context, next);
+      },
+
+      // Parse active filter keys into one SQL `and(...)` expression.
+      parse(filters: TFilters): SQL | undefined {
+        const conditions: (SQL | undefined)[] = Array.from(selected).map((key) => {
+          const parser = config[key];
+          if (!parser) throw new Error(`No parser defined for filter key "${key}"`);
+
+          return parser(filters, context);
+        });
+
+        return and(...conditions);
+      },
+    };
+  }
+
+  // Bind request context and start with all configured keys selected.
+  return (context: { db: Database<TSchema> }) => createBuilder(context, new Set(configKeys));
+}

package/src/modules/data-tables/lib/converters/{cursor.ts → pagination.ts}

@@ -5,7 +5,7 @@ import type { TableQuerySchema } from "../validators";
  * @param {ConvertPaginationToQueryParamsInput} pagination
  * @returns {{ limit: number; offset: number; }}
  */
-export function convertCursorToQueryParams({
+export function parseTableQueryPagination({
   limit,
   cursor,
 }: Pick<TableQuerySchema, "cursor" | "limit">) {