nest-filter 1.0.0

package/src/components/AdvancedFilter.tsx

@@ -0,0 +1,453 @@
+import * as React from "react";
+import { useState, useEffect, useCallback } from "react";
+import {
+  FilterRule,
+  FilterGroup,
+  ColumnDefinition,
+  LogicalOperator,
+  FilterOperator,
+  FilterItem,
+} from "../types";
+import { Button } from "./ui/Button";
+import { Input } from "./ui/Input";
+import { Select } from "./ui/Select";
+import { Dialog } from "./ui/Dialog";
+import {
+  Plus,
+  Trash2,
+  Layers,
+  Binary,
+  FilterX,
+  ListFilter,
+} from "lucide-react";
+import { applyFilters } from "../utils/filterLogic";
+
+interface AdvancedFilterProps<T> {
+  isOpen: boolean;
+  onClose: () => void;
+  data: T[];
+  columns: ColumnDefinition<T>[];
+  setFilteredData: (data: T[]) => void;
+  initialFilters?: FilterGroup<T>;
+}
+
+const getOperatorsForType = (
+  type: string
+): { value: FilterOperator; label: string }[] => {
+  switch (type) {
+    case "string":
+      return [
+        { value: "contains", label: "Contains" },
+        { value: "not_contains", label: "Does not contain" },
+        { value: "equals", label: "Exact match" },
+      ];
+    case "select":
+      return [
+        { value: "equals", label: "Is" },
+        { value: "not_equals", label: "Is not" },
+      ];
+    case "number":
+      return [
+        { value: "equals", label: "=" },
+        { value: "not_equals", label: "!=" },
+        { value: "gt", label: ">" },
+        { value: "lt", label: "<" },
+        { value: "gte", label: ">=" },
+        { value: "lte", label: "<=" },
+      ];
+    case "date":
+      return [
+        { value: "is", label: "On date" },
+        { value: "before", label: "Before" },
+        { value: "after", label: "After" },
+      ];
+    case "boolean":
+      return [
+        { value: "true", label: "True" },
+        { value: "false", label: "False" },
+      ];
+    default:
+      return [];
+  }
+};
+
+const FilterGroupUI = <T,>({
+  group,
+  depth,
+  columns,
+  onAddRule,
+  onAddGroup,
+  onUpdateRule,
+  onUpdateGroupLogic,
+  onRemoveItem,
+}: {
+  group: FilterGroup<T>;
+  depth: number;
+  columns: ColumnDefinition<T>[];
+  onAddRule: (parentId: string) => void;
+  onAddGroup: (parentId: string) => void;
+  onUpdateRule: (ruleId: string, updates: Partial<FilterRule<T>>) => void;
+  onUpdateGroupLogic: (groupId: string, logic: LogicalOperator) => void;
+  onRemoveItem: (itemId: string) => void;
+}) => {
+  return (
+    <div
+      className={`rounded-lg border border-slate-200 bg-slate-50/50 p-4 mb-4 ${
+        depth > 0 ? "ml-6 md:ml-10 relative border-l-2 border-l-slate-300" : ""
+      }`}
+    >
+      <div className="flex flex-wrap items-center justify-between gap-4 mb-4">
+        <div className="flex items-center gap-2">
+          <span className="text-[10px] font-bold uppercase tracking-widest text-slate-500">
+            Group Logic
+          </span>
+          <div className="flex rounded-md border border-slate-200 bg-white p-1 shadow-sm">
+            <button
+              onClick={() => onUpdateGroupLogic(group.id, "AND")}
+              className={`px-3 py-1 text-[10px] font-black rounded-sm transition-all ${
+                group.logic === "AND"
+                  ? "bg-slate-900 text-slate-50"
+                  : "text-slate-500 hover:text-slate-900"
+              }`}
+            >
+              AND
+            </button>
+            <button
+              onClick={() => onUpdateGroupLogic(group.id, "OR")}
+              className={`px-3 py-1 text-[10px] font-black rounded-sm transition-all ${
+                group.logic === "OR"
+                  ? "bg-slate-900 text-slate-50"
+                  : "text-slate-500 hover:text-slate-900"
+              }`}
+            >
+              OR
+            </button>
+          </div>
+        </div>
+
+        <div className="flex items-center gap-2">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => onAddRule(group.id)}
+            className="h-7 text-[10px] font-bold uppercase"
+          >
+            <Plus className="mr-1 h-3 w-3" /> Rule
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => onAddGroup(group.id)}
+            className="h-7 text-[10px] font-bold uppercase"
+          >
+            <Layers className="mr-1 h-3 w-3" /> Group
+          </Button>
+          {depth > 0 && (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => onRemoveItem(group.id)}
+              className="text-slate-400"
+            >
+              <Trash2 className="h-5 w-5 text-red-500" />
+            </Button>
+          )}
+        </div>
+      </div>
+
+      <div className="space-y-3">
+        {group.items.map((item) => {
+          const column = columns.find(
+            (c) => c.id === (item.type === "rule" ? item.columnId : null)
+          );
+          return item.type === "rule" ? (
+            <div
+              key={item.id}
+              className="flex flex-col md:flex-row md:items-center gap-3 p-3 bg-white border border-slate-200 rounded-md shadow-sm"
+            >
+              <div className="flex-1 min-w-[140px]">
+                <Select
+                  value={item.columnId as string}
+                  options={columns.map((c) => ({
+                    value: c.id as string,
+                    label: c.label,
+                  }))}
+                  onValueChange={(val) => {
+                    const colId = val as keyof T;
+                    const col = columns.find((c) => c.id === colId);
+                    onUpdateRule(item.id, {
+                      columnId: colId,
+                      operator:
+                        col?.type === "date"
+                          ? "is"
+                          : col?.type === "number"
+                          ? "equals"
+                          : col?.type === "select"
+                          ? "equals"
+                          : "contains",
+                      value: "",
+                    });
+                  }}
+                />
+              </div>
+              <div className="w-full md:w-44">
+                <Select
+                  value={item.operator}
+                  options={getOperatorsForType(column?.type || "string")}
+                  onValueChange={(val) =>
+                    onUpdateRule(item.id, { operator: val as FilterOperator })
+                  }
+                />
+              </div>
+              <div className="flex-[1.5] min-w-[180px]">
+                {column?.type === "date" ? (
+                  <Input
+                    type="date"
+                    value={item.value || ""}
+                    onChange={(e) =>
+                      onUpdateRule(item.id, { value: e.target.value })
+                    }
+                  />
+                ) : column?.type === "boolean" ? (
+                  <div className="h-10 flex items-center px-3 border border-slate-200 rounded-md bg-slate-50 text-[10px] font-black uppercase tracking-tighter text-slate-400 italic">
+                    <Binary className="h-3 w-3 mr-2" />
+                    Binary state
+                  </div>
+                ) : column?.type === "select" ? (
+                  <Select
+                    value={item.value || ""}
+                    placeholder="Choose option..."
+                    options={(column.options || []).map((opt) => ({
+                      value: opt,
+                      label: opt,
+                    }))}
+                    onValueChange={(val) =>
+                      onUpdateRule(item.id, { value: val })
+                    }
+                  />
+                ) : (
+                  <Input
+                    placeholder="Search query..."
+                    value={item.value || ""}
+                    onChange={(e) =>
+                      onUpdateRule(item.id, { value: e.target.value })
+                    }
+                  />
+                )}
+              </div>
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={() => onRemoveItem(item.id)}
+                className="h-9 w-9 text-slate-300 hover:text-red-500 hover:bg-red-50"
+              >
+                <Trash2 className="h-5 w-5 text-red-500" />
+              </Button>
+            </div>
+          ) : (
+            <FilterGroupUI
+              group={item}
+              depth={depth + 1}
+              columns={columns}
+              onAddRule={onAddRule}
+              onAddGroup={onAddGroup}
+              onUpdateRule={onUpdateRule}
+              onUpdateGroupLogic={onUpdateGroupLogic}
+              onRemoveItem={onRemoveItem}
+            />
+          );
+        })}
+        {group.items.length === 0 && (
+          <div className="flex flex-col items-center justify-center py-6 rounded-md border border-dashed border-slate-200 bg-white/50">
+            <ListFilter className="h-5 w-5 text-slate-300 mb-1" />
+            <p className="text-[10px] text-slate-400 font-bold uppercase tracking-widest">
+              Add a rule to filter
+            </p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export const AdvancedFilter = <T,>({
+  isOpen,
+  onClose,
+  data,
+  columns,
+  setFilteredData,
+  initialFilters,
+}: AdvancedFilterProps<T>) => {
+  const [rootGroup, setRootGroup] = useState<FilterGroup<T>>({
+    type: "group",
+    id: "root",
+    logic: "AND",
+    items: [],
+  });
+
+  useEffect(() => {
+    if (initialFilters) setRootGroup(initialFilters);
+  }, [initialFilters, isOpen]);
+
+  const updateItemRecursively = useCallback(
+    (
+      group: FilterGroup<T>,
+      targetId: string,
+      updater: (item: FilterItem<T>) => FilterItem<T> | null
+    ): FilterGroup<T> => {
+      if (group.id === targetId) return updater(group) as FilterGroup<T>;
+      return {
+        ...group,
+        items: group.items
+          .map((item) => {
+            if (item.id === targetId) return updater(item);
+            if (item.type === "group")
+              return updateItemRecursively(item, targetId, updater);
+            return item;
+          })
+          .filter(Boolean) as FilterItem<T>[],
+      };
+    },
+    []
+  );
+
+  const handleAddRule = useCallback(
+    (parentId: string) => {
+      const firstCol = columns[0];
+      const newRule: FilterRule<T> = {
+        type: "rule",
+        id: Math.random().toString(36).substr(2, 9),
+        columnId: firstCol.id,
+        operator:
+          firstCol.type === "string"
+            ? "contains"
+            : firstCol.type === "select"
+            ? "equals"
+            : "equals",
+        value: "",
+      };
+      setRootGroup((prev) =>
+        updateItemRecursively(prev, parentId, (group) => ({
+          ...(group as FilterGroup<T>),
+          items: [...(group as FilterGroup<T>).items, newRule],
+        }))
+      );
+    },
+    [columns, updateItemRecursively]
+  );
+
+  const handleAddGroup = useCallback(
+    (parentId: string) => {
+      const newGroup: FilterGroup<T> = {
+        type: "group",
+        id: Math.random().toString(36).substr(2, 9),
+        logic: "AND",
+        items: [],
+      };
+      setRootGroup((prev) =>
+        updateItemRecursively(prev, parentId, (group) => ({
+          ...(group as FilterGroup<T>),
+          items: [...(group as FilterGroup<T>).items, newGroup],
+        }))
+      );
+    },
+    [updateItemRecursively]
+  );
+
+  const handleUpdateRule = useCallback(
+    (ruleId: string, updates: Partial<FilterRule<T>>) => {
+      setRootGroup((prev) =>
+        updateItemRecursively(
+          prev,
+          ruleId,
+          (rule) => ({ ...rule, ...updates } as FilterRule<T>)
+        )
+      );
+    },
+    [updateItemRecursively]
+  );
+
+  const handleUpdateGroupLogic = useCallback(
+    (groupId: string, logic: LogicalOperator) => {
+      setRootGroup((prev) =>
+        updateItemRecursively(
+          prev,
+          groupId,
+          (group) => ({ ...group, logic } as FilterGroup<T>)
+        )
+      );
+    },
+    [updateItemRecursively]
+  );
+
+  const handleRemoveItem = useCallback(
+    (itemId: string) => {
+      setRootGroup((prev) => updateItemRecursively(prev, itemId, () => null));
+    },
+    [updateItemRecursively]
+  );
+
+  const handleApply = () => {
+    const filtered = applyFilters(data, rootGroup, columns);
+    setFilteredData(filtered);
+    onClose();
+  };
+
+  const handleClear = () => {
+    const emptyGroup: FilterGroup<T> = {
+      type: "group",
+      id: "root",
+      logic: "AND",
+      items: [],
+    };
+    setRootGroup(emptyGroup);
+    setFilteredData(data);
+    onClose();
+  };
+
+  return (
+    <Dialog
+      open={isOpen}
+      onOpenChange={onClose}
+      title="Advanced Filters"
+      description="Refine your dataset using structured logic and multi-type comparisons."
+    >
+      <div className="max-h-[60vh] overflow-y-auto px-1 custom-scrollbar pr-3 pb-32">
+        <FilterGroupUI
+          group={rootGroup}
+          depth={0}
+          columns={columns}
+          onAddRule={handleAddRule}
+          onAddGroup={handleAddGroup}
+          onUpdateRule={handleUpdateRule}
+          onUpdateGroupLogic={handleUpdateGroupLogic}
+          onRemoveItem={handleRemoveItem}
+        />
+      </div>
+      <div className="flex w-full justify-between items-center gap-4">
+        <Button
+          variant="ghost"
+          onClick={handleClear}
+          className="text-slate-400 hover:text-red-500 font-black text-[10px] uppercase tracking-widest gap-2"
+        >
+          <FilterX className="h-4 w-4" /> Reset Filters
+        </Button>
+        <div className="flex gap-2">
+          <Button
+            variant="outline"
+            onClick={onClose}
+            className="font-bold h-11 px-6"
+          >
+            Cancel
+          </Button>
+          <Button
+            onClick={handleApply}
+            className="bg-slate-900 font-bold h-11 px-10 rounded-lg shadow-lg hover:shadow-xl transition-shadow"
+          >
+            Apply View
+          </Button>
+        </div>
+      </div>
+    </Dialog>
+  );
+};

package/src/components/ui/Button.tsx

@@ -0,0 +1,37 @@
+
+import React from 'react';
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link';
+  size?: 'default' | 'sm' | 'lg' | 'icon';
+}
+
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className = '', variant = 'default', size = 'default', ...props }, ref) => {
+    const baseStyles = 'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50';
+    
+    const variants = {
+      default: 'bg-slate-900 text-slate-50 hover:bg-slate-900/90',
+      destructive: 'bg-red-500 text-slate-50 hover:bg-red-500/90',
+      outline: 'border border-slate-200 bg-white hover:bg-slate-100 hover:text-slate-900',
+      secondary: 'bg-slate-100 text-slate-900 hover:bg-slate-100/80',
+      ghost: 'hover:bg-slate-100 hover:text-slate-900',
+      link: 'text-slate-900 underline-offset-4 hover:underline',
+    };
+
+    const sizes = {
+      default: 'h-10 px-4 py-2',
+      sm: 'h-9 rounded-md px-3',
+      lg: 'h-11 rounded-md px-8',
+      icon: 'h-10 w-10',
+    };
+
+    return (
+      <button
+        ref={ref}
+        className={`${baseStyles} ${variants[variant]} ${sizes[size]} ${className}`}
+        {...props}
+      />
+    );
+  }
+);

package/src/components/ui/Dialog.tsx

@@ -0,0 +1,42 @@
+
+import React from 'react';
+import { X } from 'lucide-react';
+
+interface DialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title: string;
+  description?: string;
+  children: React.ReactNode;
+  footer?: React.ReactNode;
+}
+
+export const Dialog: React.FC<DialogProps> = ({ open, onOpenChange, title, description, children, footer }) => {
+  if (!open) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-start justify-center overflow-y-auto bg-slate-950/80 p-4 pt-[5vh] backdrop-blur-sm animate-in fade-in duration-200">
+      <div className="relative w-full max-w-4xl rounded-lg border border-slate-200 bg-white p-6 shadow-lg animate-in zoom-in-95 duration-200">
+        <div className="flex flex-col space-y-1.5 text-center sm:text-left mb-6">
+          <h2 className="text-lg font-semibold leading-none tracking-tight">{title}</h2>
+          {description && <p className="text-sm text-slate-500">{description}</p>}
+          <button
+            onClick={() => onOpenChange(false)}
+            className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-slate-950 focus:ring-offset-2 disabled:pointer-events-none"
+          >
+            <X className="h-4 w-4" />
+            <span className="sr-only">Close</span>
+          </button>
+        </div>
+        <div className="py-2">
+          {children}
+        </div>
+        {footer && (
+          <div className="flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 mt-6">
+            {footer}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};

package/src/components/ui/Input.tsx

@@ -0,0 +1,15 @@
+
+import React from 'react';
+
+export const Input = React.forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>(
+  ({ className = '', type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={`flex h-10 w-full rounded-md border border-slate-200 bg-white px-3 py-2 text-sm ring-offset-white file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-slate-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ${className}`}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);

package/src/components/ui/Select.tsx

@@ -0,0 +1,63 @@
+
+import React, { useState, useRef, useEffect } from 'react';
+import { ChevronDown, Check } from 'lucide-react';
+
+interface SelectProps {
+  value: string;
+  onValueChange: (value: string) => void;
+  options: { value: string; label: string }[];
+  placeholder?: string;
+  className?: string;
+}
+
+export const Select: React.FC<SelectProps> = ({ value, onValueChange, options, placeholder = "Select...", className = "" }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const selected = options.find(o => o.value === value);
+
+  useEffect(() => {
+    const handleOutside = (e: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(e.target as Node)) setIsOpen(false);
+    };
+    document.addEventListener('mousedown', handleOutside);
+    return () => document.removeEventListener('mousedown', handleOutside);
+  }, []);
+
+  return (
+    <div className={`relative w-full ${className}`} ref={containerRef} style={{ zIndex: isOpen ? 60 : 1 }}>
+      <button
+        type="button"
+        onClick={() => setIsOpen(!isOpen)}
+        className="flex h-10 w-full items-center justify-between rounded-md border border-slate-200 bg-white px-3 py-2 text-sm ring-offset-white placeholder:text-slate-500 focus:outline-none focus:ring-2 focus:ring-slate-950 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 transition-colors hover:border-slate-300"
+      >
+        <span className="truncate">{selected ? selected.label : placeholder}</span>
+        <ChevronDown className={`h-4 w-4 opacity-50 transition-transform duration-200 ${isOpen ? 'rotate-180' : ''}`} />
+      </button>
+      {isOpen && (
+        <div className="absolute top-full left-0 z-50 mt-1 min-w-[8rem] w-full max-h-[200px] overflow-y-auto rounded-md border border-slate-200 bg-white text-slate-950 shadow-xl animate-in fade-in zoom-in-95 duration-100">
+          <div className="p-1">
+            {options.length > 0 ? options.map((opt) => (
+              <button
+                key={opt.value}
+                onClick={() => {
+                  onValueChange(opt.value);
+                  setIsOpen(false);
+                }}
+                className={`relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none hover:bg-slate-100 hover:text-slate-900 transition-colors ${opt.value === value ? 'bg-slate-100 font-medium' : ''}`}
+              >
+                {opt.value === value && (
+                  <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+                    <Check className="h-4 w-4 text-slate-900" />
+                  </span>
+                )}
+                <span className="truncate">{opt.label}</span>
+              </button>
+            )) : (
+              <div className="py-2 px-2 text-xs text-slate-400 italic text-center">No options</div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};

package/src/index.ts

@@ -0,0 +1 @@
+export * from './components/AdvancedFilter'

package/src/types.ts

@@ -0,0 +1,51 @@
+
+export type ColumnType = 'string' | 'number' | 'date' | 'boolean' | 'select';
+
+export type LogicalOperator = 'AND' | 'OR';
+
+export type FilterOperator = 
+  | 'equals' | 'not_equals' | 'contains' | 'not_contains' 
+  | 'gt' | 'lt' | 'gte' | 'lte' 
+  | 'before' | 'after' | 'is'
+  | 'true' | 'false';
+
+export interface FilterRule<T = any> {
+  type: 'rule';
+  id: string;
+  columnId: keyof T;
+  operator: FilterOperator;
+  value: any;
+}
+
+export interface FilterGroup<T = any> {
+  type: 'group';
+  id: string;
+  logic: LogicalOperator;
+  items: (FilterRule<T> | FilterGroup<T>)[];
+}
+
+export type FilterItem<T = any> = FilterRule<T> | FilterGroup<T>;
+
+export interface ColumnDefinition<T = any> {
+  id: keyof T;
+  label: string;
+  type: ColumnType;
+  options?: string[]; // Used when type is 'select'
+}
+
+export interface TableData {
+  id: number;
+  cost_centre: string;
+  cost_centre_desc: string;
+  cost_centre_limit: string | number;
+  cost_centre_owner: string;
+  approving_authority: string;
+  created_by: string;
+  timestamp: string;
+  is_archive: boolean;
+  year: string;
+  expense_type: string;
+  is_freeze: boolean;
+  status?: string; // New field for selection testing
+  [key: string]: any;
+}