@nestledjs/data-browser 0.1.12 → 0.1.15

package/lib/pages/AdminDataListPage.js

@@ -1,21 +1,22 @@
+import React, { useCallback, useEffect, useMemo } from "react";
 import { useQuery } from "@apollo/client/react";
 import { DataTable, ErrorBoundary } from "@nestledjs/shared-components";
 import { getPluralName } from "@nestledjs/helpers";
 import { AdminLocalStorage } from "../utils/secure-storage.js";
 import { kebabCase, formatFieldName } from "../utils/string-utils.js";
-import { useCallback, useEffect, useMemo } from "react";
-import { useParams, Link } from "react-router";
+import { useParams, useSearchParams, Link } from "react-router";
 import { DateRangeFilter } from "../components/filters/DateRangeFilter.js";
 import { NumberRangeFilter } from "../components/filters/NumberRangeFilter.js";
 import { RelationFilterField } from "../components/filters/RelationFilterField.js";
 import { useAdminList } from "../hooks/useAdminList.js";
 import { getAdminDocuments } from "../utils/graphql-utils.js";
 import { useAdminDataContext } from "../context/AdminDataContext.js";
-var _jsxFileName = "/Users/justinhandley/IdeaProjects/nestled_template/libs/admin-data/src/lib/pages/AdminDataListPage.tsx";
+var _jsxFileName = "/Users/justinhandley/IdeaProjects/nestled_template/libs/data-browser/src/lib/pages/AdminDataListPage.tsx";
 function AdminDataListPage({
   modelName: propModelName
 } = {}) {
   const params = useParams();
+  const [searchParams] = useSearchParams();
   const {
     sdk,
     databaseModels,
@@ -106,6 +107,44 @@ function AdminDataListPage({
       return modelUrlName.toLowerCase() === pluralParam.toLowerCase();
     });
   }, [propModelName, pluralParam, databaseModels]);
+  const urlFilters = useMemo(() => {
+    if (!model) return {};
+    const filters2 = {};
+    for (const [key, value] of searchParams.entries()) {
+      if (key !== "page" && key !== "search" && key !== "sort") {
+        const relationField = model.fields.find((f) => {
+          var _a;
+          return f.relationName && !f.isList && ((_a = f.relationFromFields) == null ? void 0 : _a[0]) === key;
+        });
+        if (relationField) {
+          filters2[relationField.name] = {
+            id: value
+          };
+        } else {
+          const scalarField = model.fields.find((f) => f.name === key && !f.relationName);
+          if (scalarField) {
+            filters2[key] = value;
+          } else {
+            console.warn(`[AdminList] URL parameter "${key}" does not exist on model "${model.name}" - ignoring`);
+          }
+        }
+      }
+    }
+    return filters2;
+  }, [searchParams, model]);
+  useEffect(() => {
+    if (Object.keys(urlFilters).length > 0) {
+      dispatch({
+        type: "SET_FILTERS",
+        payload: urlFilters
+      });
+      if (!showFilters) {
+        dispatch({
+          type: "TOGGLE_FILTERS"
+        });
+      }
+    }
+  }, [urlFilters, showFilters]);
   const documents = useMemo(() => {
     if (!model) return {
       query: void 0,
@@ -327,129 +366,129 @@ function AdminDataListPage({
   if (!model) {
     return /* @__PURE__ */ React.createElement("div", { className: "min-h-screen bg-gray-50 flex flex-col justify-center py-12 sm:px-6 lg:px-8", __self: this, __source: {
       fileName: _jsxFileName,
-      lineNumber: 409,
+      lineNumber: 458,
       columnNumber: 7
     } }, /* @__PURE__ */ React.createElement("div", { className: "mt-8 sm:mx-auto sm:w-full sm:max-w-md", __self: this, __source: {
       fileName: _jsxFileName,
-      lineNumber: 410,
+      lineNumber: 459,
       columnNumber: 9
     } }, /* @__PURE__ */ React.createElement("div", { className: "bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10", __self: this, __source: {
       fileName: _jsxFileName,
-      lineNumber: 411,
+      lineNumber: 460,
       columnNumber: 11
     } }, /* @__PURE__ */ React.createElement("div", { className: "text-center", __self: this, __source: {
       fileName: _jsxFileName,
-      lineNumber: 412,
+      lineNumber: 461,
       columnNumber: 13
     } }, /* @__PURE__ */ React.createElement("svg", { className: "mx-auto h-12 w-12 text-red-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", __self: this, __source: {
       fileName: _jsxFileName,
-      lineNumber: 413,
+      lineNumber: 462,
       columnNumber: 15
     } }, /* @__PURE__ */ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z", __self: this, __source: {
       fileName: _jsxFileName,
-      lineNumber: 419,
+      lineNumber: 468,
       columnNumber: 17
     } })), /* @__PURE__ */ React.createElement("h2", { className: "mt-4 text-lg font-medium text-gray-900", __self: this, __source: {
       fileName: _jsxFileName,
-      lineNumber: 426,
+      lineNumber: 475,
       columnNumber: 15
     } }, "Invalid Data Type"), /* @__PURE__ */ React.createElement("p", { className: "mt-2 text-sm text-gray-600", __self: this, __source: {
       fileName: _jsxFileName,
-      lineNumber: 427,
+      lineNumber: 476,
       columnNumber: 15
     } }, 'The data type "', pluralParam, '" is not recognized.'), /* @__PURE__ */ React.createElement("div", { className: "mt-6", __self: this, __source: {
       fileName: _jsxFileName,
-      lineNumber: 430,
+      lineNumber: 479,
       columnNumber: 15
     } }, /* @__PURE__ */ React.createElement(Link, { to: basePath, className: "w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-green-web hover:bg-green-web-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-web", __self: this, __source: {
       fileName: _jsxFileName,
-      lineNumber: 431,
+      lineNumber: 480,
       columnNumber: 17
     } }, "Return to Data Browser"))))));
   }
   if (!query) {
     return /* @__PURE__ */ React.createElement("div", { className: "min-h-screen bg-gray-50 flex flex-col justify-center py-12 sm:px-6 lg:px-8", __self: this, __source: {
       fileName: _jsxFileName,
-      lineNumber: 447,
+      lineNumber: 496,
       columnNumber: 7
     } }, /* @__PURE__ */ React.createElement("div", { className: "mt-8 sm:mx-auto sm:w-full sm:max-w-md", __self: this, __source: {
       fileName: _jsxFileName,
-      lineNumber: 448,
+      lineNumber: 497,
       columnNumber: 9
     } }, /* @__PURE__ */ React.createElement("div", { className: "bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10", __self: this, __source: {
       fileName: _jsxFileName,
-      lineNumber: 449,
+      lineNumber: 498,
       columnNumber: 11
     } }, /* @__PURE__ */ React.createElement("div", { className: "text-center", __self: this, __source: {
       fileName: _jsxFileName,
-      lineNumber: 450,
+      lineNumber: 499,
       columnNumber: 13
     } }, /* @__PURE__ */ React.createElement("svg", { className: "mx-auto h-12 w-12 text-yellow-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", __self: this, __source: {
       fileName: _jsxFileName,
-      lineNumber: 451,
+      lineNumber: 500,
       columnNumber: 15
     } }, /* @__PURE__ */ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.728-.833-2.498 0L5.316 15c-.77.833.192 2.5 1.732 2.5z", __self: this, __source: {
       fileName: _jsxFileName,
-      lineNumber: 457,
+      lineNumber: 506,
       columnNumber: 17
     } })), /* @__PURE__ */ React.createElement("h2", { className: "mt-4 text-lg font-medium text-gray-900", __self: this, __source: {
       fileName: _jsxFileName,
-      lineNumber: 464,
+      lineNumber: 513,
       columnNumber: 15
     } }, "GraphQL Schema Not Available"), /* @__PURE__ */ React.createElement("p", { className: "mt-2 text-sm text-gray-600", __self: this, __source: {
       fileName: _jsxFileName,
-      lineNumber: 467,
+      lineNumber: 516,
       columnNumber: 15
     } }, 'No GraphQL query found for "', model.name, '". The admin schema may need to be regenerated.'), /* @__PURE__ */ React.createElement("div", { className: "mt-6 space-y-3", __self: this, __source: {
       fileName: _jsxFileName,
-      lineNumber: 471,
+      lineNumber: 520,
       columnNumber: 15
     } }, /* @__PURE__ */ React.createElement("button", { onClick: () => window.location.reload(), className: "w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-green-web hover:bg-green-web-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-web", __self: this, __source: {
       fileName: _jsxFileName,
-      lineNumber: 472,
+      lineNumber: 521,
       columnNumber: 17
     } }, "Reload Page"), /* @__PURE__ */ React.createElement(Link, { to: basePath, className: "w-full flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-web", __self: this, __source: {
       fileName: _jsxFileName,
-      lineNumber: 478,
+      lineNumber: 527,
       columnNumber: 17
     } }, "Return to Data Browser"))))));
   }
   const createLink = `${basePath}/${kebabCase(model.name)}/create`;
   const columnSelector = /* @__PURE__ */ React.createElement("div", { className: "relative", "data-dropdown": "column-selector", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 497,
+    lineNumber: 546,
     columnNumber: 5
   } }, /* @__PURE__ */ React.createElement("button", { onClick: () => setShowColumnSelector(!showColumnSelector), className: "inline-flex items-center px-3 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-web", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 498,
+    lineNumber: 547,
     columnNumber: 7
   } }, "Columns", /* @__PURE__ */ React.createElement("svg", { className: "-mr-0.5 ml-2 h-4 w-4", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 503,
+    lineNumber: 552,
     columnNumber: 9
   } }, /* @__PURE__ */ React.createElement("path", { fillRule: "evenodd", d: "M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z", clipRule: "evenodd", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 509,
+    lineNumber: 558,
     columnNumber: 11
   } }))), showColumnSelector && /* @__PURE__ */ React.createElement("div", { className: "absolute right-0 mt-2 w-80 bg-white rounded-md shadow-lg z-50 border border-gray-200", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 518,
+    lineNumber: 567,
     columnNumber: 9
   } }, /* @__PURE__ */ React.createElement("div", { className: "p-4", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 519,
+    lineNumber: 568,
     columnNumber: 11
   } }, /* @__PURE__ */ React.createElement("h3", { className: "text-sm font-medium text-gray-900 mb-3", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 520,
+    lineNumber: 569,
     columnNumber: 13
   } }, "Visible Columns"), /* @__PURE__ */ React.createElement("div", { className: "space-y-2 max-h-64 overflow-y-auto", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 521,
+    lineNumber: 570,
     columnNumber: 13
   } }, fieldNames.map((field) => /* @__PURE__ */ React.createElement("label", { key: field, className: "flex items-start gap-2 cursor-pointer", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 523,
+    lineNumber: 572,
     columnNumber: 17
   } }, /* @__PURE__ */ React.createElement("input", { type: "checkbox", checked: visibleColumns.includes(field), onChange: (e) => {
     const newColumns = e.target.checked ? [...visibleColumns, field] : visibleColumns.filter((col) => col !== field);
@@ -457,22 +496,22 @@ function AdminDataListPage({
     AdminLocalStorage.setColumnVisibility(model.name, newColumns);
   }, className: "h-4 w-4 mt-0.5 flex-shrink-0 text-green-web focus:ring-green-web border-gray-300 rounded", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 524,
+    lineNumber: 573,
     columnNumber: 19
   } }), /* @__PURE__ */ React.createElement("span", { className: "text-sm text-gray-700 leading-5", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 536,
+    lineNumber: 585,
     columnNumber: 19
   } }, formatFieldName(field))))), /* @__PURE__ */ React.createElement("div", { className: "mt-3 pt-3 border-t border-gray-200 flex justify-between", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 540,
+    lineNumber: 589,
     columnNumber: 13
   } }, /* @__PURE__ */ React.createElement("button", { onClick: () => {
     setVisibleColumns(fieldNames);
     AdminLocalStorage.setColumnVisibility(model.name, fieldNames);
   }, className: "text-xs text-green-web hover:text-green-web-800", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 541,
+    lineNumber: 590,
     columnNumber: 15
   } }, "Select All"), /* @__PURE__ */ React.createElement("button", { onClick: () => {
     const defaults = fieldNames.slice(0, 8);
@@ -480,44 +519,44 @@ function AdminDataListPage({
     AdminLocalStorage.setColumnVisibility(model.name, defaults);
   }, className: "text-xs text-gray-600 hover:text-gray-800", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 550,
+    lineNumber: 599,
     columnNumber: 15
   } }, "Reset to Defaults")))));
   const searchFieldSelector = /* @__PURE__ */ React.createElement("div", { className: "relative", "data-dropdown": "search-field-selector", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 569,
+    lineNumber: 618,
     columnNumber: 5
   } }, /* @__PURE__ */ React.createElement("button", { onClick: () => setShowSearchFieldSelector(!showSearchFieldSelector), className: "h-full px-3 border-l border-gray-300 text-gray-400 hover:text-gray-600 focus:outline-none focus:text-gray-600", "aria-label": "Configure search fields", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 570,
+    lineNumber: 619,
     columnNumber: 7
   } }, /* @__PURE__ */ React.createElement("svg", { className: "h-4 w-4", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 575,
+    lineNumber: 624,
     columnNumber: 9
   } }, /* @__PURE__ */ React.createElement("path", { fillRule: "evenodd", d: "M3 3a1 1 0 000 2v8a2 2 0 002 2h2.586l-1.293 1.293a1 1 0 101.414 1.414L10 15.414l2.293 2.293a1 1 0 001.414-1.414L12.414 15H15a2 2 0 002-2V5a1 1 0 100-2H3zm11.707 4.707a1 1 0 00-1.414-1.414L10 9.586 8.707 8.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z", clipRule: "evenodd", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 581,
+    lineNumber: 630,
     columnNumber: 11
   } }))), showSearchFieldSelector && /* @__PURE__ */ React.createElement("div", { className: "absolute right-0 mt-2 w-72 bg-white rounded-md shadow-lg z-50 border border-gray-200", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 590,
+    lineNumber: 639,
     columnNumber: 9
   } }, /* @__PURE__ */ React.createElement("div", { className: "p-4", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 591,
+    lineNumber: 640,
     columnNumber: 11
   } }, /* @__PURE__ */ React.createElement("h3", { className: "text-sm font-medium text-gray-900 mb-3", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 592,
+    lineNumber: 641,
     columnNumber: 13
   } }, "Search Fields"), searchableFieldNames.length > 0 ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "space-y-2 max-h-48 overflow-y-auto", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 595,
+    lineNumber: 644,
     columnNumber: 17
   } }, searchableFieldNames.map((field) => /* @__PURE__ */ React.createElement("label", { key: field, className: "flex items-start gap-2 cursor-pointer", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 597,
+    lineNumber: 646,
     columnNumber: 21
   } }, /* @__PURE__ */ React.createElement("input", { type: "checkbox", checked: searchFields.includes(field), onChange: (e) => {
     const newFields = e.target.checked ? [...searchFields, field] : searchFields.filter((f) => f !== field);
@@ -525,22 +564,22 @@ function AdminDataListPage({
     AdminLocalStorage.setSearchFields(model.name, newFields);
   }, className: "h-4 w-4 mt-0.5 flex-shrink-0 text-green-web focus:ring-green-web border-gray-300 rounded", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 598,
+    lineNumber: 647,
     columnNumber: 23
   } }), /* @__PURE__ */ React.createElement("span", { className: "text-sm text-gray-700 leading-5", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 610,
+    lineNumber: 659,
     columnNumber: 23
   } }, formatFieldName(field))))), /* @__PURE__ */ React.createElement("div", { className: "mt-3 pt-3 border-t border-gray-200 flex justify-between", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 616,
+    lineNumber: 665,
     columnNumber: 17
   } }, /* @__PURE__ */ React.createElement("button", { onClick: () => {
     setSearchFields(searchableFieldNames);
     AdminLocalStorage.setSearchFields(model.name, searchableFieldNames);
   }, className: "text-xs text-green-web hover:text-green-web-800 mr-3", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 617,
+    lineNumber: 666,
     columnNumber: 19
   } }, "Select All"), /* @__PURE__ */ React.createElement("button", { onClick: () => {
     const defaults = getDefaultSearchFields(searchableFieldNames);
@@ -548,28 +587,28 @@ function AdminDataListPage({
     AdminLocalStorage.setSearchFields(model.name, defaults);
   }, className: "text-xs text-gray-600 hover:text-gray-800", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 626,
+    lineNumber: 675,
     columnNumber: 19
   } }, "Reset to Defaults"))) : /* @__PURE__ */ React.createElement("div", { className: "text-sm text-gray-500", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 639,
+    lineNumber: 688,
     columnNumber: 15
   } }, "No searchable text fields available"))));
   const filterPanel = showFilters && /* @__PURE__ */ React.createElement("div", { className: "mb-4 bg-gray-50 border border-gray-200 rounded-lg p-4", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 649,
+    lineNumber: 698,
     columnNumber: 5
   } }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between mb-3", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 650,
+    lineNumber: 699,
     columnNumber: 7
   } }, /* @__PURE__ */ React.createElement("h3", { className: "text-sm font-medium text-gray-900", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 651,
+    lineNumber: 700,
     columnNumber: 9
   } }, "Filters"), /* @__PURE__ */ React.createElement("div", { className: "flex items-center space-x-2", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 652,
+    lineNumber: 701,
     columnNumber: 9
   } }, /* @__PURE__ */ React.createElement("button", { onClick: () => {
     setFilters({});
@@ -578,23 +617,23 @@ function AdminDataListPage({
     });
   }, className: "text-xs text-gray-600 hover:text-gray-800", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 653,
+    lineNumber: 702,
     columnNumber: 11
   } }, "Clear All"), /* @__PURE__ */ React.createElement("button", { onClick: () => setShowFilters(false), className: "text-gray-400 hover:text-gray-600", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 662,
+    lineNumber: 711,
     columnNumber: 11
   } }, /* @__PURE__ */ React.createElement("svg", { className: "h-5 w-5", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 666,
+    lineNumber: 715,
     columnNumber: 13
   } }, /* @__PURE__ */ React.createElement("path", { fillRule: "evenodd", d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z", clipRule: "evenodd", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 672,
+    lineNumber: 721,
     columnNumber: 15
   } }))))), /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 682,
+    lineNumber: 731,
     columnNumber: 7
   } }, filterableFieldNames.map((fieldName) => {
     const field = model.fields.find((f) => f.name === fieldName);
@@ -617,21 +656,21 @@ function AdminDataListPage({
     if (field.relationName && !field.isList) {
       return /* @__PURE__ */ React.createElement(RelationFilterField, { key: fieldName, fieldName, relatedModelName: field.type, currentValue, onChange: handleChange, __self: this, __source: {
         fileName: _jsxFileName,
-        lineNumber: 702,
+        lineNumber: 751,
         columnNumber: 15
       } });
     }
     if (field.type.toLowerCase() === "datetime" || field.type.toLowerCase() === "date") {
       return /* @__PURE__ */ React.createElement(DateRangeFilter, { key: fieldName, fieldName, currentValue, onChange: handleChange, __self: this, __source: {
         fileName: _jsxFileName,
-        lineNumber: 715,
+        lineNumber: 764,
         columnNumber: 15
       } });
     }
     if (["int", "bigint", "float", "decimal"].includes(field.type.toLowerCase())) {
       return /* @__PURE__ */ React.createElement(NumberRangeFilter, { key: fieldName, fieldName, fieldType: field.type.toLowerCase(), currentValue, onChange: handleChange, __self: this, __source: {
         fileName: _jsxFileName,
-        lineNumber: 727,
+        lineNumber: 776,
         columnNumber: 15
       } });
     }
@@ -640,23 +679,23 @@ function AdminDataListPage({
       if (enumValues) {
         return /* @__PURE__ */ React.createElement("div", { key: fieldName, className: "space-y-1", __self: this, __source: {
           fileName: _jsxFileName,
-          lineNumber: 742,
+          lineNumber: 791,
           columnNumber: 17
         } }, /* @__PURE__ */ React.createElement("label", { className: "block text-sm font-medium text-gray-700", __self: this, __source: {
           fileName: _jsxFileName,
-          lineNumber: 743,
+          lineNumber: 792,
           columnNumber: 19
         } }, formatFieldName(fieldName)), /* @__PURE__ */ React.createElement("select", { value: typeof currentValue === "string" ? currentValue : "", onChange: (e) => handleChange(e.target.value || void 0), className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-web focus:border-green-web text-sm", __self: this, __source: {
           fileName: _jsxFileName,
-          lineNumber: 746,
+          lineNumber: 795,
           columnNumber: 19
         } }, /* @__PURE__ */ React.createElement("option", { value: "", __self: this, __source: {
           fileName: _jsxFileName,
-          lineNumber: 751,
+          lineNumber: 800,
           columnNumber: 21
         } }, "All"), enumValues.map((val) => /* @__PURE__ */ React.createElement("option", { key: val, value: val, __self: this, __source: {
           fileName: _jsxFileName,
-          lineNumber: 753,
+          lineNumber: 802,
           columnNumber: 23
         } }, val))));
       }
@@ -664,121 +703,121 @@ function AdminDataListPage({
     if (field.type.toLowerCase() === "boolean") {
       return /* @__PURE__ */ React.createElement("div", { key: fieldName, className: "space-y-1", __self: this, __source: {
         fileName: _jsxFileName,
-        lineNumber: 766,
+        lineNumber: 815,
         columnNumber: 15
       } }, /* @__PURE__ */ React.createElement("label", { className: "block text-sm font-medium text-gray-700", __self: this, __source: {
         fileName: _jsxFileName,
-        lineNumber: 767,
+        lineNumber: 816,
         columnNumber: 17
       } }, formatFieldName(fieldName)), /* @__PURE__ */ React.createElement("select", { value: currentValue === void 0 || currentValue === null ? "" : currentValue.toString(), onChange: (e) => {
         const value = e.target.value;
         handleChange(value === "" ? void 0 : value === "true");
       }, className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-web focus:border-green-web text-sm", __self: this, __source: {
         fileName: _jsxFileName,
-        lineNumber: 770,
+        lineNumber: 819,
         columnNumber: 17
       } }, /* @__PURE__ */ React.createElement("option", { value: "", __self: this, __source: {
         fileName: _jsxFileName,
-        lineNumber: 778,
+        lineNumber: 827,
         columnNumber: 19
       } }, "All"), /* @__PURE__ */ React.createElement("option", { value: "true", __self: this, __source: {
         fileName: _jsxFileName,
-        lineNumber: 779,
+        lineNumber: 828,
         columnNumber: 19
       } }, "Yes"), /* @__PURE__ */ React.createElement("option", { value: "false", __self: this, __source: {
         fileName: _jsxFileName,
-        lineNumber: 780,
+        lineNumber: 829,
         columnNumber: 19
       } }, "No")));
     }
     return /* @__PURE__ */ React.createElement("div", { key: fieldName, className: "space-y-1", __self: this, __source: {
       fileName: _jsxFileName,
-      lineNumber: 788,
+      lineNumber: 837,
       columnNumber: 13
     } }, /* @__PURE__ */ React.createElement("label", { className: "block text-sm font-medium text-gray-700", __self: this, __source: {
       fileName: _jsxFileName,
-      lineNumber: 789,
+      lineNumber: 838,
       columnNumber: 15
     } }, formatFieldName(fieldName)), /* @__PURE__ */ React.createElement("input", { type: "text", value: typeof currentValue === "string" ? currentValue : "", onChange: (e) => handleChange(e.target.value || void 0), placeholder: `Filter by ${formatFieldName(fieldName).toLowerCase()}...`, className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-web focus:border-green-web text-sm", __self: this, __source: {
       fileName: _jsxFileName,
-      lineNumber: 792,
+      lineNumber: 841,
       columnNumber: 15
     } }));
   })));
   const searchFilter = /* @__PURE__ */ React.createElement("div", { className: "mb-4 flex items-center justify-between", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 807,
+    lineNumber: 856,
     columnNumber: 5
   } }, /* @__PURE__ */ React.createElement("div", { className: "flex-1 max-w-lg", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 808,
+    lineNumber: 857,
     columnNumber: 7
   } }, /* @__PURE__ */ React.createElement("label", { htmlFor: "search", className: "sr-only", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 809,
+    lineNumber: 858,
     columnNumber: 9
   } }, "Search"), /* @__PURE__ */ React.createElement("div", { className: "relative", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 812,
+    lineNumber: 861,
     columnNumber: 9
   } }, /* @__PURE__ */ React.createElement("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 813,
+    lineNumber: 862,
     columnNumber: 11
   } }, loading && search !== debouncedSearch ? /* @__PURE__ */ React.createElement("svg", { className: "animate-spin h-5 w-5 text-gray-400", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 815,
+    lineNumber: 864,
     columnNumber: 15
   } }, /* @__PURE__ */ React.createElement("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 821,
+    lineNumber: 870,
     columnNumber: 17
   } }), /* @__PURE__ */ React.createElement("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", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 829,
+    lineNumber: 878,
     columnNumber: 17
   } })) : /* @__PURE__ */ React.createElement("svg", { className: "h-5 w-5 text-gray-400", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 836,
+    lineNumber: 885,
     columnNumber: 15
   } }, /* @__PURE__ */ React.createElement("path", { fillRule: "evenodd", d: "M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z", clipRule: "evenodd", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 843,
+    lineNumber: 892,
     columnNumber: 17
   } }))), /* @__PURE__ */ React.createElement("input", { id: "search", name: "search", className: "block w-full pl-10 pr-12 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:ring-1 focus:ring-green-web focus:border-green-web sm:text-sm", placeholder: `Search ${searchFields.length > 0 ? searchFields.map((field) => field.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/^./, (str) => str.toUpperCase())).join(", ") : getPluralName(model.name).toLowerCase()}...`, type: "search", value: state.search || "", onChange: (e) => dispatch({
     type: "SET_SEARCH",
     payload: e.target.value
   }), __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 851,
+    lineNumber: 900,
     columnNumber: 11
   } }), searchableFieldNames.length > 0 && /* @__PURE__ */ React.createElement("div", { className: "absolute inset-y-0 right-0 flex items-center", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 861,
+    lineNumber: 910,
     columnNumber: 13
   } }, searchFieldSelector))), /* @__PURE__ */ React.createElement("div", { className: "ml-4 flex space-x-2", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 867,
+    lineNumber: 916,
     columnNumber: 7
   } }, /* @__PURE__ */ React.createElement("button", { onClick: () => setShowFilters(!showFilters), className: `inline-flex items-center px-3 py-2 border text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-web ${showFilters || Object.keys(filters).length > 0 ? "border-green-web text-green-web bg-green-50 hover:bg-green-100" : "border-gray-300 text-gray-700 bg-white hover:bg-gray-50"}`, __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 868,
+    lineNumber: 917,
     columnNumber: 9
   } }, /* @__PURE__ */ React.createElement("svg", { className: "w-4 h-4 mr-2", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 876,
+    lineNumber: 925,
     columnNumber: 11
   } }, /* @__PURE__ */ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 877,
+    lineNumber: 926,
     columnNumber: 13
   } })), "Filters", Object.keys(filters).length > 0 && /* @__PURE__ */ React.createElement("span", { className: "ml-1 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-white bg-green-web rounded-full", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 886,
+    lineNumber: 935,
     columnNumber: 13
   } }, Object.keys(filters).length)), columnSelector, /* @__PURE__ */ React.createElement(Link, { to: createLink, className: "inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-600", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 892,
+    lineNumber: 941,
     columnNumber: 9
   } }, "Create New")));
   return /* @__PURE__ */ React.createElement(React.Fragment, null, filterPanel, searchFilter, /* @__PURE__ */ React.createElement(DataTable, { data: items, path: createLink.replace("/create", ""), fields: visibleColumns.length > 0 ? visibleColumns : fieldNames, pagination, setSkip: (skip2) => dispatch({
@@ -786,7 +825,7 @@ function AdminDataListPage({
     payload: skip2
   }), sort: state.sort, setSort: setSortSafely, __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 906,
+    lineNumber: 955,
     columnNumber: 7
   } }));
 }
@@ -795,7 +834,7 @@ function AdminDataErrorBoundary({
 }) {
   return /* @__PURE__ */ React.createElement(ErrorBoundary, { error, __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 920,
+    lineNumber: 969,
     columnNumber: 10
   } });
 }

package/lib/utils/graphql-utils.d.ts

@@ -17,7 +17,7 @@ export declare function getMutationName(model: DatabaseModel, operation: 'create
 /**
  * Build form fields for a model and operation
  */
-export declare function buildFormFields(sdk: any, model: DatabaseModel, operation: 'create' | 'update', currentItem?: any, isSubmitting?: boolean): FormField[];
+export declare function buildFormFields(sdk: any, model: DatabaseModel, operation: 'create' | 'update', currentItem?: any, isSubmitting?: boolean, basePath?: string, databaseModels?: DatabaseModel[]): FormField[];
 /**
  * Clean form input data for GraphQL mutations
  * Removes Apollo metadata and system fields