@nestledjs/data-browser 1.0.14 → 1.0.16

package/lib/pages/AdminDataEditPage.js

@@ -10,7 +10,7 @@ import { Form } from "@nestledjs/forms";
 import { useAdminDataContext } from "../context/AdminDataContext.js";
 import { AdminDataStateMessage } from "../components/AdminDataStateMessage.js";
 import { useParams, Link, useNavigate } from "react-router";
-import { getAdminDocuments, buildFormFields, cleanFormInput } from "../utils/graphql-utils.js";
+import { sanitizeInput, getAdminDocuments, toKebabCase, toReadableText, buildFormFields, cleanFormInput } from "../utils/graphql-utils.js";
 function toLowerCamelCase(name) {
   if (!name) return "";
   return name.charAt(0).toLowerCase() + name.slice(1);
@@ -21,23 +21,12 @@ function getModelIdVariableName(modelName) {
 function getModelResponseFieldName(modelName) {
   return toLowerCamelCase(modelName);
 }
-function toReadableText(text) {
-  return text.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/^./, (str) => str.toUpperCase());
-}
 if (process.env.NODE_ENV !== "production") {
   loadDevMessages();
   loadErrorMessages();
 }
-const sanitizeInput = (input) => {
-  if (!input || typeof input !== "string") return "";
-  return input.replace(/[<>"'%;()&+]/g, "").replace(/javascript:/gi, "").replace(/on\w+\s*=/gi, "").trim().substring(0, 100);
-};
-const toKebabCase = (str) => {
-  return str.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
-};
 function processRelationFieldValue(field, item) {
-  var _a;
-  const relationFieldName = ((_a = field.relationFromFields) == null ? void 0 : _a[0]) || `${field.name}Id`;
+  const relationFieldName = field.relationFromFields?.[0] || `${field.name}Id`;
   let value = item[relationFieldName];
   if (value === void 0) {
     const relationObject = item[field.name];
@@ -63,6 +52,7 @@ function processDateFieldValue(field, value) {
       return dateValue.toISOString().substring(0, 16);
     }
   } catch (e) {
+    console.error("Unexpected error:", e);
     return "";
   }
 }
@@ -95,7 +85,7 @@ function performFinalSafetyChecks(initialValues, model) {
       initialValues[key] = value.id;
     } else if (value instanceof Date) {
       const field = model.fields.find((f) => f.name === key);
-      initialValues[key] = (field == null ? void 0 : field.type.toLowerCase()) === "date" ? value.toISOString().split("T")[0] : value.toISOString();
+      initialValues[key] = field?.type.toLowerCase() === "date" ? value.toISOString().split("T")[0] : value.toISOString();
     } else {
       initialValues[key] = "";
     }
@@ -117,10 +107,9 @@ function extractInitialValues(model, item) {
     return true;
   });
   editableFields.forEach((field) => {
-    var _a;
     let value = item[field.name];
     if (field.relationName && !field.isList) {
-      const relationFieldName = ((_a = field.relationFromFields) == null ? void 0 : _a[0]) || `${field.name}Id`;
+      const relationFieldName = field.relationFromFields?.[0] || `${field.name}Id`;
       initialValues[relationFieldName] = processRelationFieldValue(field, item);
     } else {
       const fieldTypeLower = field.type.toLowerCase();
@@ -151,7 +140,12 @@ const validateId = (id) => {
 };
 function AdminDataEditPage() {
   const { dataType, id } = useParams();
-  const { databaseModels, basePath = "/admin/data", formTheme, displayFieldConfig } = useAdminDataContext();
+  const {
+    databaseModels,
+    basePath = "/admin/data",
+    formTheme,
+    displayFieldConfig
+  } = useAdminDataContext();
   const findModelByName = (name) => {
     return databaseModels.find((model2) => model2.name === name);
   };
@@ -205,9 +199,24 @@ function AdminDataEditPage() {
       ) })
     ] }) }) }) });
   }
-  return /* @__PURE__ */ jsx(AdminDataEditPageContent, { model, id: validatedId, basePath, formTheme, displayFieldConfig });
+  return /* @__PURE__ */ jsx(
+    AdminDataEditPageContent,
+    {
+      model,
+      id: validatedId,
+      basePath,
+      formTheme,
+      displayFieldConfig
+    }
+  );
 }
-function DeleteConfirmModal({ show, modelName, isDeleting, onConfirm, onCancel }) {
+function DeleteConfirmModal({
+  show,
+  modelName,
+  isDeleting,
+  onConfirm,
+  onCancel
+}) {
   if (!show) return null;
   return /* @__PURE__ */ jsx("div", { className: "fixed inset-0 bg-gray-600 dark:bg-gray-900 bg-opacity-50 dark:bg-opacity-75 overflow-y-auto h-full w-full z-50 flex items-center justify-center", children: /* @__PURE__ */ jsxs("div", { className: "bg-white dark:bg-gray-800 p-6 rounded-lg shadow-xl max-w-md w-full mx-4", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
@@ -273,7 +282,13 @@ function getStatusIcon(isSuccess, isError) {
   }
   return /* @__PURE__ */ jsx("div", { className: "h-5 w-5 border-2 border-blue-400 border-t-transparent rounded-full animate-spin" });
 }
-function StatusMessage({ submissionStatus, deleteStatus, submissionMessage, deleteMessage, modelName }) {
+function StatusMessage({
+  submissionStatus,
+  deleteStatus,
+  submissionMessage,
+  deleteMessage,
+  modelName
+}) {
   if (submissionStatus === "idle" && deleteStatus === "idle") return null;
   const isSuccess = submissionStatus === "success" || deleteStatus === "success";
   const isError = submissionStatus === "error" || deleteStatus === "error";
@@ -336,7 +351,13 @@ async function executeDeleteMutation(deleteMutation, id, idVariableName, model)
     };
   }
 }
-function AdminDataEditPageContent({ model, id, basePath, formTheme, displayFieldConfig }) {
+function AdminDataEditPageContent({
+  model,
+  id,
+  basePath,
+  formTheme,
+  displayFieldConfig
+}) {
   const navigate = useNavigate();
   const { sdk, databaseModels } = useAdminDataContext();
   const [submissionState, setSubmissionState] = useState({ status: "idle" });
@@ -346,42 +367,43 @@ function AdminDataEditPageContent({ model, id, basePath, formTheme, displayField
     try {
       return getAdminDocuments(sdk, model);
     } catch (error2) {
+      console.error("Unexpected error:", error2);
       return null;
     }
   }, [sdk, model]);
   const QUERY = useMemo(() => {
-    var _a, _b;
-    if (!(documents == null ? void 0 : documents.query)) return null;
+    if (!documents?.query) return null;
     try {
-      if (((_a = documents.query) == null ? void 0 : _a.kind) === "Document" && ((_b = documents.query) == null ? void 0 : _b.definitions)) {
+      if (documents.query?.kind === "Document" && documents.query?.definitions) {
         return documents.query;
       }
       return gql(documents.query);
     } catch (error2) {
+      console.error("Unexpected error:", error2);
       return null;
     }
   }, [documents]);
   const UPDATE_MUTATION = useMemo(() => {
-    var _a, _b;
-    if (!(documents == null ? void 0 : documents.update)) return null;
+    if (!documents?.update) return null;
     try {
-      if (((_a = documents.update) == null ? void 0 : _a.kind) === "Document" && ((_b = documents.update) == null ? void 0 : _b.definitions)) {
+      if (documents.update?.kind === "Document" && documents.update?.definitions) {
         return documents.update;
       }
       return gql(documents.update);
     } catch (error2) {
+      console.error("Unexpected error:", error2);
       return null;
     }
   }, [documents]);
   const DELETE_MUTATION = useMemo(() => {
-    var _a, _b;
-    if (!(documents == null ? void 0 : documents.delete)) return null;
+    if (!documents?.delete) return null;
     try {
-      if (((_a = documents.delete) == null ? void 0 : _a.kind) === "Document" && ((_b = documents.delete) == null ? void 0 : _b.definitions)) {
+      if (documents.delete?.kind === "Document" && documents.delete?.definitions) {
         return documents.delete;
       }
       return gql(documents.delete);
     } catch (error2) {
+      console.error("Unexpected error:", error2);
       return null;
     }
   }, [documents]);
@@ -413,6 +435,13 @@ function AdminDataEditPageContent({ model, id, basePath, formTheme, displayField
         }
       `
   );
+  useEffect(() => {
+    if (deleteState.status !== "success") return;
+    const timer = setTimeout(() => {
+      navigate(`${basePath}/${toKebabCase(model.pluralName)}`);
+    }, 1500);
+    return () => clearTimeout(timer);
+  }, [deleteState.status, navigate, basePath, model.pluralName]);
   useEffect(() => {
     if (submissionState.status === "error") {
       const timer = setTimeout(() => {
@@ -465,7 +494,7 @@ function AdminDataEditPageContent({ model, id, basePath, formTheme, displayField
       }
     );
   }
-  const item = data == null ? void 0 : data[responseFieldName];
+  const item = data?.[responseFieldName];
   if (!item) {
     return /* @__PURE__ */ jsx(
       AdminDataStateMessage,
@@ -494,7 +523,9 @@ function AdminDataEditPageContent({ model, id, basePath, formTheme, displayField
       status: result.success ? "success" : "error",
       message: result.message
     });
-    window.scrollTo({ top: 0, behavior: "smooth" });
+    if (globalThis.window !== void 0) {
+      globalThis.scrollTo({ top: 0, behavior: "smooth" });
+    }
     if (result.success) {
       await refetch();
     }
@@ -506,16 +537,18 @@ function AdminDataEditPageContent({ model, id, basePath, formTheme, displayField
       status: result.success ? "success" : "error",
       message: result.message
     });
-    if (result.success) {
-      setTimeout(() => {
-        navigate(`${basePath}/${toKebabCase(model.pluralName)}`);
-      }, 1500);
-    }
   };
   return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
     /* @__PURE__ */ jsxs("div", { className: "mb-8", children: [
       /* @__PURE__ */ jsx("nav", { className: "flex mb-6", "aria-label": "Breadcrumb", children: /* @__PURE__ */ jsxs("ol", { className: "flex items-center space-x-4", children: [
-        /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Link, { to: basePath, className: "text-gray-400 dark:text-gray-500 hover:text-gray-500 dark:hover:text-gray-400", children: "Data Browser" }) }),
+        /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+          Link,
+          {
+            to: basePath,
+            className: "text-gray-400 dark:text-gray-500 hover:text-gray-500 dark:hover:text-gray-400",
+            children: "Data Browser"
+          }
+        ) }),
         /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
           /* @__PURE__ */ jsx(
             "svg",

package/lib/pages/AdminDataListPage.js

@@ -7,6 +7,7 @@ import { AdminLocalStorage } from "../utils/secure-storage.js";
 import { kebabCase, formatFieldName } from "../utils/string-utils.js";
 import { useParams, useSearchParams, Link } from "react-router";
 import { FilterField } from "../components/FilterField.js";
+import { ExportButton } from "../components/ExportButton.js";
 import { useAdminList } from "../hooks/useAdminList.js";
 import { getAdminDocuments } from "../utils/graphql-utils.js";
 import { useAdminDataContext } from "../context/AdminDataContext.js";
@@ -14,52 +15,62 @@ function AdminDataListPage({ modelName: propModelName } = {}) {
   const params = useParams();
   const [searchParams] = useSearchParams();
   const { sdk, databaseModels, basePath = "/admin/data" } = useAdminDataContext();
-  const getEnumValues = useCallback((enumType) => {
-    try {
-      const enumObject = sdk[enumType];
-      if (!enumObject || typeof enumObject !== "object") {
+  const getEnumValues = useCallback(
+    (enumType) => {
+      try {
+        const enumObject = sdk[enumType];
+        if (!enumObject || typeof enumObject !== "object") {
+          return null;
+        }
+        const values = Object.values(enumObject).filter((value) => typeof value === "string");
+        if (values.length === 0) {
+          const keys = Object.keys(enumObject).filter((key) => Number.isNaN(Number(key)));
+          return keys.length > 0 ? keys : null;
+        }
+        return values.filter((v) => typeof v === "string");
+      } catch (error2) {
+        console.error("Unexpected error:", error2);
         return null;
       }
-      const values = Object.values(enumObject).filter((value) => typeof value === "string");
-      if (values.length === 0) {
-        const keys = Object.keys(enumObject).filter((key) => isNaN(Number(key)));
-        return keys.length > 0 ? keys : null;
-      }
-      return values;
-    } catch (error2) {
-      return null;
-    }
-  }, [sdk]);
-  const updateRelatedEnumFilter = useCallback((filters2, relationName, enumFieldName, value) => {
-    const newFilters = { ...filters2 };
-    if (value === void 0 || value === null || value === "") {
-      const relationFilter = newFilters[relationName];
-      if (relationFilter && typeof relationFilter === "object") {
-        delete relationFilter[enumFieldName];
-        if (Object.keys(relationFilter).length === 0) {
-          delete newFilters[relationName];
+    },
+    [sdk]
+  );
+  const updateRelatedEnumFilter = useCallback(
+    (filters2, relationName, enumFieldName, value) => {
+      const newFilters = { ...filters2 };
+      if (value === void 0 || value === null || value === "") {
+        const relationFilter = newFilters[relationName];
+        if (relationFilter && typeof relationFilter === "object") {
+          delete relationFilter[enumFieldName];
+          if (Object.keys(relationFilter).length === 0) {
+            delete newFilters[relationName];
+          }
+        }
+      } else {
+        if (!newFilters[relationName]) {
+          newFilters[relationName] = {};
+        }
+        const relationFilter = newFilters[relationName];
+        if (relationFilter && typeof relationFilter === "object") {
+          relationFilter[enumFieldName] = value;
         }
       }
-    } else {
-      if (!newFilters[relationName]) {
-        newFilters[relationName] = {};
-      }
-      const relationFilter = newFilters[relationName];
-      if (relationFilter && typeof relationFilter === "object") {
-        relationFilter[enumFieldName] = value;
+      return newFilters;
+    },
+    []
+  );
+  const updateSimpleFilter = useCallback(
+    (filters2, fieldName, value) => {
+      const newFilters = { ...filters2 };
+      if (value === void 0 || value === null || value === "") {
+        delete newFilters[fieldName];
+      } else {
+        newFilters[fieldName] = value;
       }
-    }
-    return newFilters;
-  }, []);
-  const updateSimpleFilter = useCallback((filters2, fieldName, value) => {
-    const newFilters = { ...filters2 };
-    if (value === void 0 || value === null || value === "") {
-      delete newFilters[fieldName];
-    } else {
-      newFilters[fieldName] = value;
-    }
-    return newFilters;
-  }, []);
+      return newFilters;
+    },
+    []
+  );
   const { state, dispatch } = useAdminList();
   const {
     search,
@@ -74,10 +85,6 @@ function AdminDataListPage({ modelName: propModelName } = {}) {
     showFilters,
     showSearchFieldSelector
   } = state;
-  useCallback(
-    (skip2) => dispatch({ type: "SET_SKIP", payload: skip2 }),
-    [dispatch]
-  );
   const setFilters = useCallback(
     (filters2) => dispatch({ type: "SET_FILTERS", payload: filters2 }),
     [dispatch]
@@ -114,7 +121,7 @@ function AdminDataListPage({ modelName: propModelName } = {}) {
     }, 500);
     return () => clearTimeout(timer);
   }, [state.search]);
-  const pluralParam = propModelName || ((params == null ? void 0 : params.dataTypePlural) ?? "");
+  const pluralParam = propModelName || (params?.dataTypePlural ?? "");
   const model = useMemo(() => {
     if (propModelName) {
       return databaseModels.find((m) => m.name === propModelName);
@@ -131,10 +138,7 @@ function AdminDataListPage({ modelName: propModelName } = {}) {
     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;
-          }
+          (f) => f.relationName && !f.isList && f.relationFromFields?.[0] === key
         );
         if (relationField) {
           filters2[relationField.name] = { id: value };
@@ -162,7 +166,7 @@ function AdminDataListPage({ modelName: propModelName } = {}) {
   }, [sdk, model]);
   const { listQuery: query } = documents;
   const dataPath = useMemo(() => {
-    return (model == null ? void 0 : model.pluralModelPropertyName) || pluralParam.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+    return model?.pluralModelPropertyName || pluralParam.replaceAll(/-([a-z])/g, (_, letter) => letter.toUpperCase());
   }, [model, pluralParam]);
   const paginationPath = useMemo(() => {
     return "counters";
@@ -218,11 +222,13 @@ function AdminDataListPage({ modelName: propModelName } = {}) {
     setVisibleColumns(filteredCols);
     const storedSort = AdminLocalStorage.getSortPreference(model.name);
     const sortFieldValid = storedSort && (storedSort.orderBy === "id" || fieldNames.includes(storedSort.orderBy));
-    const nextSort = sortFieldValid ? storedSort : { orderBy: "id", orderDirection: "desc" };
+    const nextSort = sortFieldValid && storedSort ? storedSort : { orderBy: "id", orderDirection: "desc" };
     dispatch({ type: "SET_SORT", payload: nextSort });
     const storedSearch = AdminLocalStorage.getSearchFields(model.name);
     const defaults = getDefaultSearchFields(searchableFieldNames);
-    const filteredSearch = (storedSearch || defaults).filter((f) => searchableFieldNames.includes(f));
+    const filteredSearch = (storedSearch || defaults).filter(
+      (f) => searchableFieldNames.includes(f)
+    );
     setSearchFields(filteredSearch);
     dispatch({ type: "SET_SEARCH", payload: "" });
     dispatch({ type: "SET_DEBOUNCED_SEARCH", payload: "" });
@@ -232,7 +238,16 @@ function AdminDataListPage({ modelName: propModelName } = {}) {
       dispatch({ type: "SET_FILTERS", payload: urlFilters });
       dispatch({ type: "SET_SHOW_FILTERS", payload: true });
     }
-  }, [model == null ? void 0 : model.name, fieldNames, searchableFieldNames, getDefaultSearchFields, setVisibleColumns, setSearchFields, dispatch, urlFilters]);
+  }, [
+    model?.name,
+    fieldNames,
+    searchableFieldNames,
+    getDefaultSearchFields,
+    setVisibleColumns,
+    setSearchFields,
+    dispatch,
+    urlFilters
+  ]);
   const setSortSafely = useCallback(
     (newSort) => {
       const resolvedSort = typeof newSort === "function" ? newSort(sort) : newSort;
@@ -287,7 +302,22 @@ function AdminDataListPage({ modelName: propModelName } = {}) {
       filters: Object.keys(filters).length > 0 ? filters : void 0
     }
   };
-  const { data, loading, error, networkStatus, refetch } = useQuery(query ?? sdk.__AdminUsersDocument, {
+  const extractItems = useCallback((anyData, dataPath2) => {
+    let processedItems = dataPath2 && anyData[dataPath2] ? anyData[dataPath2] : [];
+    if (!processedItems || processedItems.length === 0) {
+      for (const [, value] of Object.entries(anyData)) {
+        if (Array.isArray(value) && value.length > 0 && value[0]?.id) {
+          processedItems = value;
+          break;
+        }
+      }
+    }
+    return processedItems;
+  }, []);
+  const filterValidItems = useCallback((items2) => {
+    return items2.filter((item) => item && typeof item === "object" && item.id);
+  }, []);
+  const { data, loading, error } = useQuery(query ?? sdk.__AdminUsersDocument, {
     variables,
     skip: !model || !query,
     errorPolicy: "all",
@@ -301,12 +331,6 @@ function AdminDataListPage({ modelName: propModelName } = {}) {
     }
   });
   const { validatedItems, validatedPagination, dataError } = useMemo(() => {
-    var _a, _b;
-    if (error) {
-      const apolloError = error;
-      if (apolloError.networkError) ;
-      if (((_a = apolloError.graphQLErrors) == null ? void 0 : _a.length) > 0) ;
-    }
     if (!data) {
       return {
         validatedItems: [],
@@ -316,18 +340,8 @@ function AdminDataListPage({ modelName: propModelName } = {}) {
     }
     try {
       const anyData = data;
-      let processedItems = dataPath && anyData[dataPath] ? anyData[dataPath] : [];
       const processedPagination = paginationPath && anyData[paginationPath] ? anyData[paginationPath] : void 0;
-      if (!processedItems || processedItems.length === 0) {
-        for (const [key, value] of Object.entries(anyData)) {
-          if (Array.isArray(value)) {
-            if (value.length > 0 && ((_b = value[0]) == null ? void 0 : _b.id)) {
-              processedItems = value;
-              break;
-            }
-          }
-        }
-      }
+      const processedItems = extractItems(anyData, dataPath);
       if (!Array.isArray(processedItems)) {
         return {
           validatedItems: [],
@@ -335,17 +349,8 @@ function AdminDataListPage({ modelName: propModelName } = {}) {
           dataError: new Error("Invalid data format: expected array")
         };
       }
-      const filteredItems = processedItems.filter((item, index) => {
-        if (!item || typeof item !== "object") {
-          return false;
-        }
-        if (!item.id) {
-          return false;
-        }
-        return true;
-      });
       return {
-        validatedItems: filteredItems,
+        validatedItems: filterValidItems(processedItems),
         validatedPagination: processedPagination,
         dataError: null
       };
@@ -356,7 +361,7 @@ function AdminDataListPage({ modelName: propModelName } = {}) {
         dataError: err instanceof Error ? err : new Error("Unknown data processing error")
       };
     }
-  }, [data, dataPath, paginationPath, error]);
+  }, [data, dataPath, paginationPath, error, extractItems, filterValidItems]);
   const items = validatedItems;
   const pagination = validatedPagination;
   if (!model) {
@@ -425,7 +430,7 @@ function AdminDataListPage({ modelName: propModelName } = {}) {
         /* @__PURE__ */ jsx(
           "button",
           {
-            onClick: () => window.location.reload(),
+            onClick: () => globalThis.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",
             children: "Reload Page"
           }
@@ -713,7 +718,7 @@ function AdminDataListPage({ modelName: propModelName } = {}) {
             id: "search",
             name: "search",
             className: "block w-full pl-10 pr-12 py-2 border border-gray-300 dark:border-gray-600 rounded-md leading-5 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:placeholder-gray-400 dark:focus:placeholder-gray-500 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()}...`,
+            placeholder: `Search ${searchFields.length > 0 ? searchFields.map((field) => field.replaceAll(/([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 })
@@ -744,6 +749,32 @@ function AdminDataListPage({ modelName: propModelName } = {}) {
         }
       ),
       columnSelector,
+      query && /* @__PURE__ */ jsx(
+        ExportButton,
+        {
+          query,
+          dataPath,
+          variables,
+          visibleColumns,
+          fieldNames,
+          modelName: model.name,
+          hasActiveFilters: Object.keys(filters).length > 0
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "select",
+        {
+          value: pageSize,
+          onChange: (e) => dispatch({ type: "SET_PAGE_SIZE", payload: Number(e.target.value) }),
+          className: "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",
+          "aria-label": "Rows per page",
+          children: [
+            /* @__PURE__ */ jsx("option", { value: 20, children: "20 / page" }),
+            /* @__PURE__ */ jsx("option", { value: 50, children: "50 / page" }),
+            /* @__PURE__ */ jsx("option", { value: 100, children: "100 / page" })
+          ]
+        }
+      ),
       /* @__PURE__ */ jsx(
         Link,
         {

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

@@ -1,4 +1,4 @@
-import { FormField } from '@nestledjs/forms';
+import { FormField } from '@nestledjs/forms-core';
 import { DatabaseModel } from '../types';
 import { DisplayFieldConfig } from '../context/AdminDataContext';
 /**
@@ -15,6 +15,10 @@ export declare function getAdminDocuments(sdk: any, model: DatabaseModel): {
  * Get the GraphQL mutation name for a given operation
  */
 export declare function getMutationName(model: DatabaseModel, operation: 'create' | 'update' | 'delete'): string;
+/**
+ * Convert model name to kebab-case for URLs
+ */
+export declare function toKebabCase(str: string): string;
 /**
  * Options for building form fields
  */
@@ -34,3 +38,5 @@ export declare function buildFormFields(sdk: any, model: DatabaseModel, operatio
  * Removes Apollo metadata and system fields
  */
 export declare function cleanFormInput(input: Record<string, unknown>, model?: DatabaseModel): Record<string, unknown>;
+export declare function toReadableText(text: string): string;
+export declare function sanitizeInput(input: string | undefined): string;