@nestledjs/data-browser 0.1.13 → 0.1.15

package/lib/pages/AdminDataCreatePage.js

@@ -132,7 +132,8 @@ function AdminDataCreatePageContent({
 }) {
   const navigate = useNavigate();
   const {
-    sdk
+    sdk,
+    databaseModels
   } = useAdminDataContext();
   const [submissionState, setSubmissionState] = useState({
     status: "idle"
@@ -202,7 +203,7 @@ function AdminDataCreatePageContent({
       columnNumber: 17
     } }, "Return to Data Browser"))))));
   }
-  const formFields = buildFormFields(sdk, model, "create", void 0, submissionState.status === "loading", basePath);
+  const formFields = buildFormFields(sdk, model, "create", void 0, submissionState.status === "loading", basePath, databaseModels);
   const handleSubmit = async (formData) => {
     try {
       setSubmissionState({

package/lib/pages/AdminDataEditPage.js

@@ -166,7 +166,8 @@ function AdminDataEditPageContent({
 }) {
   const navigate = useNavigate();
   const {
-    sdk
+    sdk,
+    databaseModels
   } = useAdminDataContext();
   const [submissionState, setSubmissionState] = useState({
     status: "idle"
@@ -423,7 +424,7 @@ function AdminDataEditPageContent({
       columnNumber: 17
     } }, "Back to List"))))));
   }
-  const formFields = buildFormFields(sdk, model, "update", item, submissionState.status === "loading", basePath);
+  const formFields = buildFormFields(sdk, model, "update", item, submissionState.status === "loading", basePath, databaseModels);
   const initialValues = {};
   if (item) {
     const editableFields = model.fields.filter((field) => {

package/lib/pages/AdminDataListPage.js

@@ -121,7 +121,12 @@ function AdminDataListPage({
             id: value
           };
         } else {
-          filters2[key] = value;
+          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`);
+          }
         }
       }
     }
@@ -361,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: 451,
+      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: 452,
+      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: 453,
+      lineNumber: 460,
       columnNumber: 11
     } }, /* @__PURE__ */ React.createElement("div", { className: "text-center", __self: this, __source: {
       fileName: _jsxFileName,
-      lineNumber: 454,
+      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: 455,
+      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: 461,
+      lineNumber: 468,
       columnNumber: 17
     } })), /* @__PURE__ */ React.createElement("h2", { className: "mt-4 text-lg font-medium text-gray-900", __self: this, __source: {
       fileName: _jsxFileName,
-      lineNumber: 468,
+      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: 469,
+      lineNumber: 476,
       columnNumber: 15
     } }, 'The data type "', pluralParam, '" is not recognized.'), /* @__PURE__ */ React.createElement("div", { className: "mt-6", __self: this, __source: {
       fileName: _jsxFileName,
-      lineNumber: 472,
+      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: 473,
+      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: 489,
+      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: 490,
+      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: 491,
+      lineNumber: 498,
       columnNumber: 11
     } }, /* @__PURE__ */ React.createElement("div", { className: "text-center", __self: this, __source: {
       fileName: _jsxFileName,
-      lineNumber: 492,
+      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: 493,
+      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: 499,
+      lineNumber: 506,
       columnNumber: 17
     } })), /* @__PURE__ */ React.createElement("h2", { className: "mt-4 text-lg font-medium text-gray-900", __self: this, __source: {
       fileName: _jsxFileName,
-      lineNumber: 506,
+      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: 509,
+      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: 513,
+      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: 514,
+      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: 520,
+      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: 539,
+    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: 540,
+    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: 545,
+    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: 551,
+    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: 560,
+    lineNumber: 567,
     columnNumber: 9
   } }, /* @__PURE__ */ React.createElement("div", { className: "p-4", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 561,
+    lineNumber: 568,
     columnNumber: 11
   } }, /* @__PURE__ */ React.createElement("h3", { className: "text-sm font-medium text-gray-900 mb-3", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 562,
+    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: 563,
+    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: 565,
+    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);
@@ -491,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: 566,
+    lineNumber: 573,
     columnNumber: 19
   } }), /* @__PURE__ */ React.createElement("span", { className: "text-sm text-gray-700 leading-5", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 578,
+    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: 582,
+    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: 583,
+    lineNumber: 590,
     columnNumber: 15
   } }, "Select All"), /* @__PURE__ */ React.createElement("button", { onClick: () => {
     const defaults = fieldNames.slice(0, 8);
@@ -514,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: 592,
+    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: 611,
+    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: 612,
+    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: 617,
+    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: 623,
+    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: 632,
+    lineNumber: 639,
     columnNumber: 9
   } }, /* @__PURE__ */ React.createElement("div", { className: "p-4", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 633,
+    lineNumber: 640,
     columnNumber: 11
   } }, /* @__PURE__ */ React.createElement("h3", { className: "text-sm font-medium text-gray-900 mb-3", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 634,
+    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: 637,
+    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: 639,
+    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);
@@ -559,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: 640,
+    lineNumber: 647,
     columnNumber: 23
   } }), /* @__PURE__ */ React.createElement("span", { className: "text-sm text-gray-700 leading-5", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 652,
+    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: 658,
+    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: 659,
+    lineNumber: 666,
     columnNumber: 19
   } }, "Select All"), /* @__PURE__ */ React.createElement("button", { onClick: () => {
     const defaults = getDefaultSearchFields(searchableFieldNames);
@@ -582,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: 668,
+    lineNumber: 675,
     columnNumber: 19
   } }, "Reset to Defaults"))) : /* @__PURE__ */ React.createElement("div", { className: "text-sm text-gray-500", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 681,
+    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: 691,
+    lineNumber: 698,
     columnNumber: 5
   } }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between mb-3", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 692,
+    lineNumber: 699,
     columnNumber: 7
   } }, /* @__PURE__ */ React.createElement("h3", { className: "text-sm font-medium text-gray-900", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 693,
+    lineNumber: 700,
     columnNumber: 9
   } }, "Filters"), /* @__PURE__ */ React.createElement("div", { className: "flex items-center space-x-2", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 694,
+    lineNumber: 701,
     columnNumber: 9
   } }, /* @__PURE__ */ React.createElement("button", { onClick: () => {
     setFilters({});
@@ -612,23 +617,23 @@ function AdminDataListPage({
     });
   }, className: "text-xs text-gray-600 hover:text-gray-800", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 695,
+    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: 704,
+    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: 708,
+    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: 714,
+    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: 724,
+    lineNumber: 731,
     columnNumber: 7
   } }, filterableFieldNames.map((fieldName) => {
     const field = model.fields.find((f) => f.name === fieldName);
@@ -651,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: 744,
+        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: 757,
+        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: 769,
+        lineNumber: 776,
         columnNumber: 15
       } });
     }
@@ -674,23 +679,23 @@ function AdminDataListPage({
       if (enumValues) {
         return /* @__PURE__ */ React.createElement("div", { key: fieldName, className: "space-y-1", __self: this, __source: {
           fileName: _jsxFileName,
-          lineNumber: 784,
+          lineNumber: 791,
           columnNumber: 17
         } }, /* @__PURE__ */ React.createElement("label", { className: "block text-sm font-medium text-gray-700", __self: this, __source: {
           fileName: _jsxFileName,
-          lineNumber: 785,
+          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: 788,
+          lineNumber: 795,
           columnNumber: 19
         } }, /* @__PURE__ */ React.createElement("option", { value: "", __self: this, __source: {
           fileName: _jsxFileName,
-          lineNumber: 793,
+          lineNumber: 800,
           columnNumber: 21
         } }, "All"), enumValues.map((val) => /* @__PURE__ */ React.createElement("option", { key: val, value: val, __self: this, __source: {
           fileName: _jsxFileName,
-          lineNumber: 795,
+          lineNumber: 802,
           columnNumber: 23
         } }, val))));
       }
@@ -698,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: 808,
+        lineNumber: 815,
         columnNumber: 15
       } }, /* @__PURE__ */ React.createElement("label", { className: "block text-sm font-medium text-gray-700", __self: this, __source: {
         fileName: _jsxFileName,
-        lineNumber: 809,
+        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: 812,
+        lineNumber: 819,
         columnNumber: 17
       } }, /* @__PURE__ */ React.createElement("option", { value: "", __self: this, __source: {
         fileName: _jsxFileName,
-        lineNumber: 820,
+        lineNumber: 827,
         columnNumber: 19
       } }, "All"), /* @__PURE__ */ React.createElement("option", { value: "true", __self: this, __source: {
         fileName: _jsxFileName,
-        lineNumber: 821,
+        lineNumber: 828,
         columnNumber: 19
       } }, "Yes"), /* @__PURE__ */ React.createElement("option", { value: "false", __self: this, __source: {
         fileName: _jsxFileName,
-        lineNumber: 822,
+        lineNumber: 829,
         columnNumber: 19
       } }, "No")));
     }
     return /* @__PURE__ */ React.createElement("div", { key: fieldName, className: "space-y-1", __self: this, __source: {
       fileName: _jsxFileName,
-      lineNumber: 830,
+      lineNumber: 837,
       columnNumber: 13
     } }, /* @__PURE__ */ React.createElement("label", { className: "block text-sm font-medium text-gray-700", __self: this, __source: {
       fileName: _jsxFileName,
-      lineNumber: 831,
+      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: 834,
+      lineNumber: 841,
       columnNumber: 15
     } }));
   })));
   const searchFilter = /* @__PURE__ */ React.createElement("div", { className: "mb-4 flex items-center justify-between", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 849,
+    lineNumber: 856,
     columnNumber: 5
   } }, /* @__PURE__ */ React.createElement("div", { className: "flex-1 max-w-lg", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 850,
+    lineNumber: 857,
     columnNumber: 7
   } }, /* @__PURE__ */ React.createElement("label", { htmlFor: "search", className: "sr-only", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 851,
+    lineNumber: 858,
     columnNumber: 9
   } }, "Search"), /* @__PURE__ */ React.createElement("div", { className: "relative", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 854,
+    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: 855,
+    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: 857,
+    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: 863,
+    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: 871,
+    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: 878,
+    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: 885,
+    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: 893,
+    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: 903,
+    lineNumber: 910,
     columnNumber: 13
   } }, searchFieldSelector))), /* @__PURE__ */ React.createElement("div", { className: "ml-4 flex space-x-2", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 909,
+    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: 910,
+    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: 918,
+    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: 919,
+    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: 928,
+    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: 934,
+    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({
@@ -820,7 +825,7 @@ function AdminDataListPage({
     payload: skip2
   }), sort: state.sort, setSort: setSortSafely, __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 948,
+    lineNumber: 955,
     columnNumber: 7
   } }));
 }
@@ -829,7 +834,7 @@ function AdminDataErrorBoundary({
 }) {
   return /* @__PURE__ */ React.createElement(ErrorBoundary, { error, __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 962,
+    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, basePath?: string): 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

package/lib/utils/graphql-utils.js

@@ -88,7 +88,19 @@ function toLowerCamelCase(str) {
   if (!str) return "";
   return str.charAt(0).toLowerCase() + str.slice(1);
 }
-function buildFormFields(sdk, model, operation, currentItem, isSubmitting, basePath = "/admin/data") {
+function findForeignKeyFieldName(relatedModel, currentModelName, relationName) {
+  var _a;
+  if (!relatedModel) return null;
+  const foreignKeyField = relatedModel.fields.find((f) => {
+    if (f.type !== currentModelName) return false;
+    if (!f.relationName) return false;
+    if (f.isList) return false;
+    if (relationName && f.relationName !== relationName) return false;
+    return true;
+  });
+  return ((_a = foreignKeyField == null ? void 0 : foreignKeyField.relationFromFields) == null ? void 0 : _a[0]) || null;
+}
+function buildFormFields(sdk, model, operation, currentItem, isSubmitting, basePath = "/admin/data", databaseModels) {
   const editableFields = model.fields.filter((field) => {
     if (operation === "create" && field.isId) return false;
     if (field.isReadOnly || field.isGenerated) return false;
@@ -291,16 +303,17 @@ function buildFormFields(sdk, model, operation, currentItem, isSubmitting, baseP
     formFields.push(formField);
   });
   listRelationFields.forEach((field) => {
-    var _a, _b;
+    var _a;
     const label = field.name.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/^./, (str) => str.toUpperCase());
     if (operation === "update" && currentItem) {
       const pluralModelName = getPluralName(field.type);
       const relatedModelKebab = toKebabCase(pluralModelName);
       const displayName = field.type.replace(/([a-z])([A-Z])/g, "$1 $2");
       const pluralDisplayName = getPluralName(displayName);
-      const foreignKeyFieldName = ((_a = field.relationToFields) == null ? void 0 : _a[0]) || `${toLowerCamelCase(model.name)}Id`;
+      const relatedModel = databaseModels == null ? void 0 : databaseModels.find((m) => m.name === field.type);
+      const foreignKeyFieldName = findForeignKeyFieldName(relatedModel, model.name, field.relationName) || `${toLowerCamelCase(model.name)}Id`;
       const filterUrl = `${basePath}/${relatedModelKebab}?${foreignKeyFieldName}=${currentItem.id}`;
-      const countData = (_b = currentItem._count) == null ? void 0 : _b[field.name];
+      const countData = (_a = currentItem._count) == null ? void 0 : _a[field.name];
       const countText = countData !== void 0 ? ` (${countData})` : "";
       const formField = FormFieldClass.content(field.name, {
         content: React.createElement("div", { className: "py-2" }, [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nestledjs/data-browser",
-  "version": "0.1.13",
+  "version": "0.1.15",
   "description": "Universal admin data browser for Nestled framework projects with full CRUD operations",
   "main": "./index.js",
   "module": "./index.js",
@@ -39,7 +39,7 @@
     "@heroicons/react": "^2.0.0",
     "@nestledjs/forms": "^0.5.0",
     "@nestledjs/helpers": "^0.1.0",
-    "@nestledjs/shared-components": "^0.1.12",
+    "@nestledjs/shared-components": "^0.1.15",
     "react": "^19.0.0",
     "react-router": "^7.0.0"
   },