@nestledjs/data-browser 1.0.14 → 1.0.16

package/README.md

@@ -4,14 +4,12 @@ Universal admin data browser for Nestled framework projects with full CRUD opera
 
 ## Features
 
-- 🔍 **Auto-generated CRUD Interface** - Automatically generates admin UI for all Prisma models
-- 📊 **Advanced Data Table** - Sorting, filtering, pagination, column selection
-- 🔎 **Smart Search** - Multi-field text search with debouncing
-- 📝 **Dynamic Forms** - Auto-generated create/edit forms from model schema
-- 🎨 **Dark Mode Support** - Full dark mode theming
-- 💾 **Persistent Preferences** - Saves column visibility, sort order, and search preferences per model
-- 🔐 **Type-Safe** - Full TypeScript support with GraphQL code generation
-- 📱 **Responsive** - Mobile-friendly with fullscreen mode
+- Auto-generated admin CRUD interface from Nestled model metadata
+- Sorting, filtering, pagination, column selection, and search
+- Dynamic create/edit forms based on generated model metadata
+- Persistent per-model table preferences
+- TypeScript-first API around a generated GraphQL SDK
+- Responsive admin workflow suitable for operational tools
 
 ## Installation
 
@@ -32,6 +30,7 @@ This package requires a Nestled framework project with:
 - **@nestledjs/forms** for form generation
 - **Prisma** for database models
 - **Generated GraphQL SDK** with admin CRUD operations
+- **A form theme** compatible with `@nestledjs/forms`
 
 ### Peer Dependencies
 
@@ -48,14 +47,10 @@ This package requires a Nestled framework project with:
 
 Your Nestled project must also export:
 
-1. **Web UI Components** from `@your-project/web-ui`:
-   - `WebUiDataTable`
-   - `WebUiErrorBoundary`
-
-2. **Form Theme** from `@your-project/shared/styles`:
+1. **Form Theme** from `@your-project/shared/styles`:
    - `formTheme`
 
-3. **GraphQL SDK** from `@your-project/shared/sdk`:
+2. **GraphQL SDK** from `@your-project/shared/sdk`:
    - `DATABASE_MODELS` (auto-generated model metadata)
    - GraphQL documents with `__Admin*Document` naming
 
@@ -67,23 +62,14 @@ Your Nestled project must also export:
 pnpm add @nestledjs/data-browser
 ```
 
-### Step 2: Update Import Paths
-
-Since this package imports from your project's namespaced packages, find and replace in the source:
-
-```
-@nestled-template → @your-project-name
-```
-
-This affects 3 files in `libs/admin-data/src/lib/pages/`.
-
-### Step 3: Create Route Wrapper
+### Step 2: Create Route Wrapper
 
 Create `apps/web/app/routes/admin/data/_layout.tsx`:
 
 ```typescript
 import * as Sdk from '@your-project/shared/sdk'
 import { DATABASE_MODELS } from '@your-project/shared/sdk'
+import { formTheme } from '@your-project/shared/styles'
 import { AdminDataProvider, AdminDataLayout } from '@nestledjs/data-browser'
 
 export default function DataLayoutRoute() {
@@ -91,6 +77,7 @@ export default function DataLayoutRoute() {
     <AdminDataProvider
       sdk={Sdk}
       databaseModels={DATABASE_MODELS}
+      formTheme={formTheme}
       basePath="/admin/data"
     >
       <AdminDataLayout />
@@ -99,17 +86,19 @@ export default function DataLayoutRoute() {
 }
 ```
 
-### Step 4: Create Page Routes
+### Step 3: Create Page Routes
 
 Create these minimal route files:
 
 **`apps/web/app/routes/admin/data/index.tsx`**:
+
 ```typescript
 import { AdminDataIndexPage } from '@nestledjs/data-browser'
 export default AdminDataIndexPage
 ```
 
 **`apps/web/app/routes/admin/data/$dataTypePlural.tsx`**:
+
 ```typescript
 import { AdminDataListPage, AdminDataErrorBoundary } from '@nestledjs/data-browser'
 
@@ -123,6 +112,7 @@ export function ErrorBoundary({ error }: Readonly<{ error: Error }>) {
 ```
 
 **`apps/web/app/routes/admin/data/$dataType.create.tsx`**:
+
 ```typescript
 import { AdminDataCreatePage, AdminDataCreateErrorBoundary } from '@nestledjs/data-browser'
 
@@ -136,6 +126,7 @@ export function ErrorBoundary({ error }: Readonly<{ error: Error }>) {
 ```
 
 **`apps/web/app/routes/admin/data/$dataType.$id.tsx`**:
+
 ```typescript
 import { AdminDataEditPage, AdminDataEditErrorBoundary } from '@nestledjs/data-browser'
 
@@ -148,7 +139,7 @@ export function ErrorBoundary({ error }: Readonly<{ error: Error }>) {
 }
 ```
 
-### Step 5: Register Routes
+### Step 4: Register Routes
 
 In `apps/web/app/routes.tsx`:
 
@@ -167,9 +158,20 @@ export default [
 ] satisfies RouteConfig
 ```
 
-### Step 6: Access the Data Browser
+### Step 5: Access the Data Browser
+
+Navigate to `/admin/data` in your application.
+
+## Security Model
 
-Navigate to `/admin/data` in your application!
+The data browser assumes the backing GraphQL admin CRUD operations are protected
+by the API. In a standard Nestled project, generated CRUD is admin-only by
+default. User-facing workflows should use separate custom resolvers instead of
+relaxing generated admin CRUD.
+
+Do not expose security-sensitive internal models, such as password hash history
+or token material, through generic admin browsing unless you have a deliberate
+operational need and appropriate masking.
 
 ## Usage
 
@@ -188,6 +190,7 @@ Shows all available database models with a searchable list.
 ### Create (`/admin/data/user/create`)
 
 Auto-generated form based on your Prisma model schema with:
+
 - Type-aware inputs (text, number, date, enum, relation dropdowns)
 - Validation based on model requirements
 - Real-time error handling
@@ -204,9 +207,10 @@ The context provider that makes SDK and models available to all components.
 
 ```typescript
 <AdminDataProvider
-  sdk={Sdk}                    // Your GraphQL SDK namespace
-  databaseModels={DATABASE_MODELS}  // Array of model metadata
-  basePath="/admin/data"       // Optional: Custom route prefix
+  sdk={Sdk}
+  databaseModels={DATABASE_MODELS}
+  formTheme={formTheme}
+  basePath="/admin/data"
 >
   {children}
 </AdminDataProvider>
@@ -270,6 +274,7 @@ The data browser uses Tailwind CSS classes. Customize via your project's Tailwin
 ### "Missing GraphQL documents for model X"
 
 **Solution**: Run GraphQL code generation:
+
 ```bash
 pnpm sdk
 ```
@@ -278,15 +283,14 @@ pnpm sdk
 
 **Solution**: Ensure all data browser components are children of `<AdminDataProvider>` in `_layout.tsx`.
 
-### Import errors for WebUiDataTable or formTheme
+### Import errors for formTheme
 
-**Solution**: Ensure your project exports these from:
-- `@your-project/web-ui`
-- `@your-project/shared/styles`
+**Solution**: Ensure your project exports a form theme from `@your-project/shared/styles`.
 
 ### DATABASE_MODELS is undefined
 
 **Solution**: Run the model generator:
+
 ```bash
 pnpm generate:models
 ```
@@ -298,15 +302,15 @@ This creates the `DATABASE_MODELS` export from your Prisma schema.
 ### Build
 
 ```bash
-nx build admin-data
+pnpm nx build data-browser
 ```
 
-Output: `dist/libs/admin-data/`
+Output: `dist/libs/data-browser/`
 
 ### Publish
 
 ```bash
-nx publish admin-data
+pnpm nx publish data-browser
 ```
 
 ## License

package/index.js

@@ -18,7 +18,8 @@ import { AdminBreadcrumbs } from "./lib/components/shared/AdminBreadcrumbs.js";
 import { AdminEmptyState, AdminErrorState, AdminLoadingState } from "./lib/components/shared/AdminErrorStates.js";
 import { AdminStatusDisplay, AdminUserStatus } from "./lib/components/shared/AdminStatusDisplay.js";
 import { RelationFieldWrapper } from "./lib/components/RelationFieldWrapper.js";
-import { buildFormFields, cleanFormInput, getAdminDocuments, getMutationName } from "./lib/utils/graphql-utils.js";
+import { ExportButton } from "./lib/components/ExportButton.js";
+import { buildFormFields, cleanFormInput, getAdminDocuments, getMutationName, sanitizeInput, toKebabCase, toReadableText } from "./lib/utils/graphql-utils.js";
 import { AdminLocalStorage, SecureAdminLocalStorage } from "./lib/utils/secure-storage.js";
 import { formatFieldName, getItemDisplayName, getSmartSearchFields, kebabCase, normalizeModelNameForDocument, spacedWords } from "./lib/utils/string-utils.js";
 import { getPluralName } from "./lib/utils/get-plural-names.js";
@@ -41,6 +42,7 @@ export {
   AdminUserStatus,
   DateRangeFilter,
   EnumFilter,
+  ExportButton,
   NumberRangeFilter,
   RelationDropdownButton,
   RelationDropdownContent,
@@ -61,7 +63,10 @@ export {
   initialState,
   kebabCase,
   normalizeModelNameForDocument,
+  sanitizeInput,
   spacedWords,
+  toKebabCase,
+  toReadableText,
   useAdminDataContext,
   useAdminList,
   useClickOutside,

package/lib/components/ExportButton.d.ts

@@ -0,0 +1,14 @@
+interface ExportButtonProps {
+    readonly query: any;
+    readonly dataPath: string;
+    /** Current query variables (includes filters, search, sort) */
+    readonly variables: {
+        input: Record<string, unknown>;
+    };
+    readonly visibleColumns: string[];
+    readonly fieldNames: string[];
+    readonly modelName: string;
+    readonly hasActiveFilters: boolean;
+}
+export declare function ExportButton({ query, dataPath, variables, visibleColumns, fieldNames, modelName, hasActiveFilters, }: ExportButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/ExportButton.js

@@ -0,0 +1,281 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useState, useRef, useCallback } from "react";
+import { useLazyQuery } from "@apollo/client/react";
+import { formatFieldName } from "../utils/string-utils.js";
+const MAX_EXPORT_ROWS = 5e4;
+function stringifyCsvScalar(value) {
+  if (value === null || value === void 0) return "";
+  switch (typeof value) {
+    case "string":
+      return value;
+    case "number":
+    case "boolean":
+    case "bigint":
+      return `${value}`;
+    case "symbol":
+      return value.description ?? "";
+    case "function":
+      return value.name || "[function]";
+    case "object":
+      return JSON.stringify(value);
+    default:
+      return "";
+  }
+}
+function escapeCsvValue(val) {
+  if (val === null || val === void 0) return "";
+  let str;
+  if (typeof val === "object") {
+    const obj = val;
+    const id = obj.id;
+    str = typeof id === "string" || typeof id === "number" ? `${id}` : JSON.stringify(val);
+  } else {
+    str = stringifyCsvScalar(val);
+  }
+  if (str.includes(",") || str.includes('"') || str.includes("\n") || str.includes("\r")) {
+    return `"${str.replaceAll('"', '""')}"`;
+  }
+  return str;
+}
+function generateCsv(items, columns) {
+  const header = columns.map((c) => escapeCsvValue(formatFieldName(c))).join(",");
+  const rows = items.map((item) => columns.map((col) => escapeCsvValue(item[col])).join(","));
+  return [header, ...rows].join("\r\n");
+}
+function findItemsInData(data, dataPath) {
+  const direct = data?.[dataPath];
+  if (direct?.length) return direct;
+  for (const value of Object.values(data ?? {})) {
+    if (Array.isArray(value) && value.length > 0 && value[0]?.id) {
+      return value;
+    }
+  }
+  return [];
+}
+function downloadCsv(csv, filename) {
+  const blob = new Blob([csv], { type: "text/csv;charset=utf-8;" });
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = filename;
+  document.body.appendChild(link);
+  link.click();
+  link.remove();
+  URL.revokeObjectURL(url);
+}
+function buildExportInput(mode, variables) {
+  if (mode === "all")
+    return { take: MAX_EXPORT_ROWS, skip: 0, orderBy: "id", orderDirection: "desc" };
+  return { ...variables.input, take: MAX_EXPORT_ROWS, skip: 0 };
+}
+function buildExportFilename(modelName, mode, hasActiveFilters) {
+  const timestamp = (/* @__PURE__ */ new Date()).toISOString().slice(0, 10);
+  const suffix = mode === "filtered" && hasActiveFilters ? "-filtered" : "";
+  return `${modelName}${suffix}-${timestamp}.csv`;
+}
+function ExportButton({
+  query,
+  dataPath,
+  variables,
+  visibleColumns,
+  fieldNames,
+  modelName,
+  hasActiveFilters
+}) {
+  const [open, setOpen] = useState(false);
+  const [exporting, setExporting] = useState(null);
+  const [error, setError] = useState(null);
+  const modalRef = useRef(null);
+  const [runQuery] = useLazyQuery(query, {
+    fetchPolicy: "network-only"
+  });
+  const doExport = useCallback(
+    async (mode) => {
+      setExporting(mode);
+      setError(null);
+      let columns;
+      if (mode === "all") {
+        columns = fieldNames;
+      } else {
+        columns = visibleColumns.length > 0 ? visibleColumns : fieldNames;
+      }
+      const input = buildExportInput(mode, variables);
+      try {
+        const { data, error: queryError } = await runQuery({ variables: { input } });
+        if (queryError) throw queryError;
+        const anyData = data;
+        const items = findItemsInData(anyData, dataPath);
+        const csv = generateCsv(items, columns);
+        downloadCsv(csv, buildExportFilename(modelName, mode, hasActiveFilters));
+        setOpen(false);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : "Export failed");
+      } finally {
+        setExporting(null);
+      }
+    },
+    [runQuery, variables, fieldNames, visibleColumns, dataPath, modelName, hasActiveFilters]
+  );
+  const activeFilterCount = Object.keys(
+    variables.input.filters ?? {}
+  ).length;
+  const hasSearch = Boolean(variables.input.search);
+  return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => {
+          setOpen(!open);
+          setError(null);
+        },
+        className: "inline-flex items-center px-3 py-2 border border-gray-300 dark:border-gray-600 text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-web",
+        children: [
+          /* @__PURE__ */ jsx("svg", { className: "w-4 h-4 mr-2", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx(
+            "path",
+            {
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              strokeWidth: 2,
+              d: "M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
+            }
+          ) }),
+          "Export"
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "fixed inset-0 z-40 cursor-default bg-transparent border-0 p-0",
+          onClick: () => setOpen(false),
+          "aria-label": "Close export menu"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: modalRef,
+          className: "absolute right-0 mt-2 w-80 bg-white dark:bg-gray-800 rounded-md shadow-lg z-50 border border-gray-200 dark:border-gray-700",
+          children: /* @__PURE__ */ jsxs("div", { className: "p-4", children: [
+            /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium text-gray-900 dark:text-gray-100 mb-3", children: "Export as CSV" }),
+            error && /* @__PURE__ */ jsx("div", { className: "mb-3 text-xs text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-900/20 rounded p-2", children: error }),
+            /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+              /* @__PURE__ */ jsxs("div", { className: "border border-gray-200 dark:border-gray-700 rounded-md p-3", children: [
+                /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-gray-900 dark:text-gray-100 mb-1", children: "Export All" }),
+                /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400 mb-2", children: "All records and all columns. No filters applied." }),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    disabled: exporting !== null,
+                    onClick: () => doExport("all"),
+                    className: "w-full inline-flex justify-center items-center px-3 py-1.5 border border-gray-300 dark:border-gray-600 text-xs font-medium rounded text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 disabled:opacity-50 disabled:cursor-not-allowed",
+                    children: exporting === "all" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsxs(
+                        "svg",
+                        {
+                          className: "animate-spin -ml-1 mr-2 h-3 w-3 text-gray-500",
+                          fill: "none",
+                          viewBox: "0 0 24 24",
+                          children: [
+                            /* @__PURE__ */ jsx(
+                              "circle",
+                              {
+                                className: "opacity-25",
+                                cx: "12",
+                                cy: "12",
+                                r: "10",
+                                stroke: "currentColor",
+                                strokeWidth: "4"
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              "path",
+                              {
+                                className: "opacity-75",
+                                fill: "currentColor",
+                                d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                              }
+                            )
+                          ]
+                        }
+                      ),
+                      "Exporting..."
+                    ] }) : `Download (${fieldNames.length} columns)`
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "border border-green-200 dark:border-green-800 rounded-md p-3 bg-green-50 dark:bg-green-900/20", children: [
+                /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-gray-900 dark:text-gray-100 mb-1", children: "Export with Current Settings" }),
+                /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400 mb-1", children: "Uses your current filters and visible columns." }),
+                /* @__PURE__ */ jsxs("ul", { className: "text-xs text-gray-500 dark:text-gray-400 mb-2 space-y-0.5", children: [
+                  /* @__PURE__ */ jsxs("li", { children: [
+                    visibleColumns.length > 0 ? visibleColumns.length : fieldNames.length,
+                    " ",
+                    "columns selected"
+                  ] }),
+                  activeFilterCount > 0 && /* @__PURE__ */ jsxs("li", { children: [
+                    activeFilterCount,
+                    " filter",
+                    activeFilterCount === 1 ? "" : "s",
+                    " active"
+                  ] }),
+                  hasSearch && /* @__PURE__ */ jsxs("li", { children: [
+                    'Search: "',
+                    variables.input.search,
+                    '"'
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    disabled: exporting !== null,
+                    onClick: () => doExport("filtered"),
+                    className: "w-full inline-flex justify-center items-center px-3 py-1.5 border border-transparent text-xs font-medium rounded text-white bg-green-600 hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed",
+                    children: exporting === "filtered" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsxs(
+                        "svg",
+                        {
+                          className: "animate-spin -ml-1 mr-2 h-3 w-3 text-white",
+                          fill: "none",
+                          viewBox: "0 0 24 24",
+                          children: [
+                            /* @__PURE__ */ jsx(
+                              "circle",
+                              {
+                                className: "opacity-25",
+                                cx: "12",
+                                cy: "12",
+                                r: "10",
+                                stroke: "currentColor",
+                                strokeWidth: "4"
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              "path",
+                              {
+                                className: "opacity-75",
+                                fill: "currentColor",
+                                d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                              }
+                            )
+                          ]
+                        }
+                      ),
+                      "Exporting..."
+                    ] }) : "Download"
+                  }
+                )
+              ] })
+            ] })
+          ] })
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  ExportButton
+};

package/lib/components/FilterField.js

@@ -24,9 +24,8 @@ function getRegularFieldValue(fieldName, filters) {
   return filters[fieldName];
 }
 function getRelatedEnumFieldValue(fieldName, filters) {
-  var _a;
   const [relationName, enumFieldName] = fieldName.split(".");
-  return (_a = filters[relationName]) == null ? void 0 : _a[enumFieldName];
+  return filters[relationName]?.[enumFieldName];
 }
 function BooleanFilter({ fieldName, currentValue, onChange }) {
   return /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [

package/lib/components/RelationFieldWrapper.d.ts

@@ -6,5 +6,5 @@ interface RelationFieldWrapperProps {
     readonly fieldName?: string;
     readonly basePath?: string;
 }
-export declare function RelationFieldWrapper({ children, relationType, initialValue, fieldName, basePath }: RelationFieldWrapperProps): import("react/jsx-runtime").JSX.Element;
+export declare function RelationFieldWrapper({ children, relationType, initialValue, fieldName, basePath, }: RelationFieldWrapperProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/RelationFieldWrapper.js

@@ -2,7 +2,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { Link } from "react-router";
 import { useState, useEffect } from "react";
 const toKebabCase = (str) => {
-  return str.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+  return str.replaceAll(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
 };
 function RelationFieldWrapper({
   children,
@@ -18,7 +18,7 @@ function RelationFieldWrapper({
     }
     if (fieldName) {
       const selectElement = document.querySelector(`[name="${fieldName}"]`);
-      if ((selectElement == null ? void 0 : selectElement.value) && selectElement.value !== currentValue) {
+      if (selectElement?.value && selectElement.value !== currentValue) {
         setCurrentValue(selectElement.value);
       }
       if (selectElement) {

package/lib/components/filters/DateRangeFilter.d.ts

@@ -3,5 +3,5 @@ interface DateRangeFilterProps {
     currentValue: any;
     onChange: (value: any) => void;
 }
-export declare function DateRangeFilter({ fieldName, currentValue, onChange }: Readonly<DateRangeFilterProps>): import("react/jsx-runtime").JSX.Element;
+export declare function DateRangeFilter({ fieldName, currentValue, onChange, }: Readonly<DateRangeFilterProps>): import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/filters/DateRangeFilter.js

@@ -5,8 +5,8 @@ function DateRangeFilter({
   currentValue,
   onChange
 }) {
-  const fromDate = (currentValue == null ? void 0 : currentValue.gte) ? new Date(currentValue.gte).toISOString().split("T")[0] : "";
-  const toDate = (currentValue == null ? void 0 : currentValue.lte) ? new Date(currentValue.lte).toISOString().split("T")[0] : "";
+  const fromDate = currentValue?.gte ? new Date(currentValue.gte).toISOString().split("T")[0] : "";
+  const toDate = currentValue?.lte ? new Date(currentValue.lte).toISOString().split("T")[0] : "";
   const handleFromChange = (date) => {
     const newValue = { ...currentValue };
     if (date) {

package/lib/components/filters/EnumFilter.d.ts

@@ -4,5 +4,5 @@ interface EnumFilterProps {
     onChange: (value: string | undefined) => void;
     enumValues: string[];
 }
-export declare function EnumFilter({ fieldName, currentValue, onChange, enumValues }: Readonly<EnumFilterProps>): import("react/jsx-runtime").JSX.Element;
+export declare function EnumFilter({ fieldName, currentValue, onChange, enumValues, }: Readonly<EnumFilterProps>): import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/filters/NumberRangeFilter.d.ts

@@ -4,5 +4,5 @@ interface NumberRangeFilterProps {
     currentValue: any;
     onChange: (value: any) => void;
 }
-export declare function NumberRangeFilter({ fieldName, fieldType, currentValue, onChange }: Readonly<NumberRangeFilterProps>): import("react/jsx-runtime").JSX.Element;
+export declare function NumberRangeFilter({ fieldName, fieldType, currentValue, onChange, }: Readonly<NumberRangeFilterProps>): import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/filters/NumberRangeFilter.js

@@ -6,8 +6,8 @@ function NumberRangeFilter({
   currentValue,
   onChange
 }) {
-  const minValue = (currentValue == null ? void 0 : currentValue.gte) === void 0 ? "" : currentValue.gte.toString();
-  const maxValue = (currentValue == null ? void 0 : currentValue.lte) === void 0 ? "" : currentValue.lte.toString();
+  const minValue = currentValue?.gte === void 0 ? "" : currentValue.gte.toString();
+  const maxValue = currentValue?.lte === void 0 ? "" : currentValue.lte.toString();
   const parseNumber = (value) => {
     if (!value) return void 0;
     if (fieldType === "int" || fieldType === "bigint") {

package/lib/components/filters/RelationComponents.d.ts

@@ -1,26 +1,26 @@
-export declare function RelationDropdownButton({ currentItem, relatedModelName, isOpen, onClick }: Readonly<{
+export declare function RelationDropdownButton({ currentItem, relatedModelName, isOpen, onClick, }: Readonly<{
     currentItem: any;
     relatedModelName: string;
     isOpen: boolean;
     onClick: () => void;
 }>): import("react/jsx-runtime").JSX.Element;
-export declare function RelationSearchInput({ searchTerm, onSearchChange, relatedModelName }: Readonly<{
+export declare function RelationSearchInput({ searchTerm, onSearchChange, relatedModelName, }: Readonly<{
     searchTerm: string;
     onSearchChange: (value: string) => void;
     relatedModelName: string;
 }>): import("react/jsx-runtime").JSX.Element;
-export declare function RelationItem({ item, onSelect }: Readonly<{
+export declare function RelationItem({ item, onSelect, }: Readonly<{
     item: any;
     onSelect: (item: any) => void;
 }>): import("react/jsx-runtime").JSX.Element;
-export declare function RelationItemList({ items, loading, error, onSelect, onClear }: Readonly<{
+export declare function RelationItemList({ items, loading, error, onSelect, onClear, }: Readonly<{
     items: any[];
     loading: boolean;
     error?: any;
     onSelect: (item: any) => void;
     onClear: () => void;
 }>): import("react/jsx-runtime").JSX.Element;
-export declare function RelationDropdownContent({ searchTerm, onSearchChange, relatedModelName, items, loading, error, onSelect, onClear }: Readonly<{
+export declare function RelationDropdownContent({ searchTerm, onSearchChange, relatedModelName, items, loading, error, onSelect, onClear, }: Readonly<{
     searchTerm: string;
     onSearchChange: (value: string) => void;
     relatedModelName: string;