@nestledjs/data-browser 1.0.13 → 1.0.15

package/index.js

@@ -18,6 +18,7 @@ import { AdminBreadcrumbs } from "./lib/components/shared/AdminBreadcrumbs.js";
 import { AdminEmptyState, AdminErrorState, AdminLoadingState } from "./lib/components/shared/AdminErrorStates.js";
 import { AdminStatusDisplay, AdminUserStatus } from "./lib/components/shared/AdminStatusDisplay.js";
 import { RelationFieldWrapper } from "./lib/components/RelationFieldWrapper.js";
+import { ExportButton } from "./lib/components/ExportButton.js";
 import { buildFormFields, cleanFormInput, getAdminDocuments, getMutationName } from "./lib/utils/graphql-utils.js";
 import { AdminLocalStorage, SecureAdminLocalStorage } from "./lib/utils/secure-storage.js";
 import { formatFieldName, getItemDisplayName, getSmartSearchFields, kebabCase, normalizeModelNameForDocument, spacedWords } from "./lib/utils/string-utils.js";
@@ -41,6 +42,7 @@ export {
   AdminUserStatus,
   DateRangeFilter,
   EnumFilter,
+  ExportButton,
   NumberRangeFilter,
   RelationDropdownButton,
   RelationDropdownContent,

package/lib/components/ExportButton.d.ts

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

package/lib/components/ExportButton.js

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

package/lib/components/FilterField.js

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

package/lib/components/RelationFieldWrapper.js

@@ -18,7 +18,7 @@ function RelationFieldWrapper({
     }
     if (fieldName) {
       const selectElement = document.querySelector(`[name="${fieldName}"]`);
-      if ((selectElement == null ? void 0 : selectElement.value) && selectElement.value !== currentValue) {
+      if (selectElement?.value && selectElement.value !== currentValue) {
         setCurrentValue(selectElement.value);
       }
       if (selectElement) {

package/lib/components/filters/DateRangeFilter.js

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

package/lib/components/filters/NumberRangeFilter.js

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

package/lib/components/filters/RelationFilterField.js

@@ -21,12 +21,12 @@ function RelationFilterField({
     relatedModelName,
     searchTerm,
     isOpen,
-    currentValue == null ? void 0 : currentValue.id
+    currentValue?.id
     // Pass current value ID so it can be loaded even when dropdown is closed
   );
   const currentItem = useMemo(
-    () => (currentValue == null ? void 0 : currentValue.id) ? relatedItems.find((item) => item.id === currentValue.id) : null,
-    [currentValue == null ? void 0 : currentValue.id, relatedItems]
+    () => currentValue?.id ? relatedItems.find((item) => item.id === currentValue.id) : null,
+    [currentValue?.id, relatedItems]
   );
   const handleSelect = useCallback((item) => {
     onChange({ id: item.id });
@@ -54,7 +54,7 @@ function RelationFilterField({
         "input",
         {
           type: "text",
-          value: (currentValue == null ? void 0 : currentValue.id) || "",
+          value: currentValue?.id || "",
           onChange: (e) => onChange(e.target.value ? { id: e.target.value } : void 0),
           placeholder: "Enter ID...",
           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"

package/lib/components/index.d.ts

@@ -1,3 +1,4 @@
 export * from './filters';
 export * from './shared';
 export * from './RelationFieldWrapper';
+export * from './ExportButton';

package/lib/hooks/useAdminList.js

@@ -9,7 +9,7 @@ function adminListReducer(state, action) {
     case "SET_SKIP":
       return { ...state, skip: action.payload };
     case "SET_PAGE_SIZE":
-      return { ...state, pageSize: action.payload };
+      return { ...state, pageSize: action.payload, skip: 0 };
     case "SET_SORT":
       return { ...state, sort: action.payload };
     case "SET_VISIBLE_COLUMNS":

package/lib/hooks/useRelationData.js

@@ -16,7 +16,7 @@ function useRelationData(relatedModelName, searchTerm, isOpen, currentValueId) {
     [sdk, relatedModel]
   );
   const relatedDataPath = useMemo(
-    () => (relatedModel == null ? void 0 : relatedModel.pluralModelPropertyName) || relatedModelName.charAt(0).toLowerCase() + relatedModelName.slice(1) + "s",
+    () => relatedModel?.pluralModelPropertyName || relatedModelName.charAt(0).toLowerCase() + relatedModelName.slice(1) + "s",
     [relatedModel, relatedModelName]
   );
   const searchableFields = useMemo(() => {

package/lib/layouts/AdminDataLayout.js

@@ -60,8 +60,7 @@ function AdminDataLayout() {
     showNotification("success", "Preferences exported successfully");
   };
   const handleImport = async (event) => {
-    var _a;
-    const file = (_a = event.target.files) == null ? void 0 : _a[0];
+    const file = event.target.files?.[0];
     if (!file) return;
     try {
       const content2 = await file.text();
@@ -85,8 +84,7 @@ function AdminDataLayout() {
     }
   };
   const triggerImport = () => {
-    var _a;
-    (_a = fileInputRef.current) == null ? void 0 : _a.click();
+    fileInputRef.current?.click();
   };
   const content = /* @__PURE__ */ jsxs("div", { className: "max-w-full mx-auto flex flex-col p-0.5", children: [
     notification && /* @__PURE__ */ jsx("div", { className: `mb-4 px-4 py-3 rounded-md border ${notification.type === "success" ? "bg-green-50 border-green-200 text-green-800 dark:bg-green-900/20 dark:border-green-800 dark:text-green-200" : "bg-red-50 border-red-200 text-red-800 dark:bg-red-900/20 dark:border-red-800 dark:text-red-200"}`, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
@@ -102,7 +100,7 @@ function AdminDataLayout() {
               "select",
               {
                 id: "model-selector",
-                value: (currentModel == null ? void 0 : currentModel.name) || "",
+                value: currentModel?.name || "",
                 onChange: handleModelChange,
                 className: "w-full h-[50px] pl-4 pr-10 py-3 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-green-web focus:border-green-web text-base appearance-none cursor-pointer",
                 children: [

package/lib/pages/AdminDataCreatePage.js

@@ -83,10 +83,9 @@ function AdminDataCreatePageContent({ model, basePath, formTheme, displayFieldCo
     }
   }, [sdk, model]);
   const CREATE_MUTATION = useMemo(() => {
-    var _a, _b;
-    if (!(documents == null ? void 0 : documents.create)) return null;
+    if (!documents?.create) return null;
     try {
-      if (((_a = documents.create) == null ? void 0 : _a.kind) === "Document" && ((_b = documents.create) == null ? void 0 : _b.definitions)) {
+      if (documents.create?.kind === "Document" && documents.create?.definitions) {
         return documents.create;
       }
       return gql(documents.create);
@@ -142,9 +141,6 @@ function AdminDataCreatePageContent({ model, basePath, formTheme, displayFieldCo
         status: "success",
         message: `${toReadableText(model.name)} created successfully!`
       });
-      setTimeout(() => {
-        navigate(`${basePath}/${toKebabCase(model.pluralName)}`);
-      }, 1500);
     } catch (error) {
       setSubmissionState({
         status: "error",
@@ -152,6 +148,13 @@ function AdminDataCreatePageContent({ model, basePath, formTheme, displayFieldCo
       });
     }
   };
+  useEffect(() => {
+    if (submissionState.status !== "success") return;
+    const timer = setTimeout(() => {
+      navigate(`${basePath}/${toKebabCase(model.pluralName)}`);
+    }, 1500);
+    return () => clearTimeout(timer);
+  }, [submissionState.status, navigate, basePath, model.pluralName]);
   useEffect(() => {
     if (submissionState.status === "error") {
       const timer = setTimeout(() => {

package/lib/pages/AdminDataEditPage.js

@@ -36,8 +36,7 @@ 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];
@@ -95,7 +94,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] = "";
     }
@@ -106,7 +105,6 @@ function extractInitialValues(model, item) {
   if (!item) {
     return initialValues;
   }
-  console.log(`[DataBrowser] Extracting initial values for ${model.name}:`, item);
   const idField = model.fields.find((f) => f.isId);
   if (idField) {
     initialValues[idField.name] = item[idField.name];
@@ -118,10 +116,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();
@@ -129,32 +126,16 @@ function extractInitialValues(model, item) {
         if (!Array.isArray(value)) {
           value = [];
         }
-        const arrayValue = value;
         value = value.join(",");
-        console.log(`[DataBrowser] Enum array field detected - "${field.name}":`, {
-          type: field.type,
-          arrayValue,
-          convertedValue: value
-        });
       } else if (fieldTypeLower === "datetime" || fieldTypeLower === "date") {
         value = processDateFieldValue(field, value);
       } else {
         value = sanitizeFieldValue(value, field);
       }
       initialValues[field.name] = value;
-      if (value !== null && typeof value === "string" && fieldTypeLower !== "string" && fieldTypeLower !== "datetime" && fieldTypeLower !== "date") {
-        console.log(`[DataBrowser] Enum field detected - "${field.name}":`, {
-          type: field.type,
-          kind: field.kind,
-          isList: field.isList,
-          extractedValue: value,
-          rawValue: item[field.name]
-        });
-      }
     }
   });
   performFinalSafetyChecks(initialValues, model);
-  console.log(`[DataBrowser] Final initial values for ${model.name}:`, initialValues);
   return initialValues;
 }
 const validateId = (id) => {
@@ -367,10 +348,9 @@ function AdminDataEditPageContent({ model, id, basePath, formTheme, displayField
     }
   }, [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);
@@ -379,10 +359,9 @@ function AdminDataEditPageContent({ model, id, basePath, formTheme, displayField
     }
   }, [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);
@@ -391,10 +370,9 @@ function AdminDataEditPageContent({ model, id, basePath, formTheme, displayField
     }
   }, [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);
@@ -430,6 +408,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(() => {
@@ -482,7 +467,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,
@@ -505,18 +490,17 @@ function AdminDataEditPageContent({ model, id, basePath, formTheme, displayField
   });
   const initialValues = extractInitialValues(model, item);
   const handleSubmit = async (formData) => {
-    console.log(`[DataBrowser] Form submission for ${model.name}:`, formData);
     setSubmissionState({ status: "loading" });
     const result = await executeUpdateMutation(updateMutation, formData, model, id, idVariableName);
     setSubmissionState({
       status: result.success ? "success" : "error",
       message: result.message
     });
-    window.scrollTo({ top: 0, behavior: "smooth" });
+    if (typeof window !== "undefined") {
+      window.scrollTo({ top: 0, behavior: "smooth" });
+    }
     if (result.success) {
-      console.log(`[DataBrowser] Update successful, refetching data for ${model.name}...`);
-      const refetchResult = await refetch();
-      console.log(`[DataBrowser] Refetch complete for ${model.name}:`, refetchResult.data);
+      await refetch();
     }
   };
   const handleDelete = async () => {
@@ -526,11 +510,6 @@ 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: [

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";
@@ -114,7 +115,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 +132,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 +160,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.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
   }, [model, pluralParam]);
   const paginationPath = useMemo(() => {
     return "counters";
@@ -232,7 +230,7 @@ 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;
@@ -301,11 +299,10 @@ 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 (apolloError.graphQLErrors?.length > 0) ;
     }
     if (!data) {
       return {
@@ -321,7 +318,7 @@ function AdminDataListPage({ modelName: propModelName } = {}) {
       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)) {
+            if (value.length > 0 && value[0]?.id) {
               processedItems = value;
               break;
             }
@@ -744,6 +741,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.js

@@ -77,7 +77,6 @@ function toLowerCamelCase(str) {
   return str.charAt(0).toLowerCase() + str.slice(1);
 }
 function findForeignKeyFieldName(relatedModel, currentModelName, relationName) {
-  var _a;
   if (!relatedModel) return null;
   const foreignKeyField = relatedModel.fields.find((f) => {
     if (f.type !== currentModelName) return false;
@@ -86,7 +85,7 @@ function findForeignKeyFieldName(relatedModel, currentModelName, relationName) {
     if (relationName && f.relationName !== relationName) return false;
     return true;
   });
-  return ((_a = foreignKeyField == null ? void 0 : foreignKeyField.relationFromFields) == null ? void 0 : _a[0]) || null;
+  return foreignKeyField?.relationFromFields?.[0] || null;
 }
 function buildFormFields(sdk, model, operation, options = {}) {
   const {
@@ -118,7 +117,6 @@ function buildFormFields(sdk, model, operation, options = {}) {
     }
   }
   regularFields.forEach((field) => {
-    var _a;
     const label = field.name.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/^./, (str) => str.toUpperCase());
     let initialValue = currentItem && operation === "update" ? currentItem[field.name] : void 0;
     if (field.type.toLowerCase() === "datetime" || field.type.toLowerCase() === "date") {
@@ -191,22 +189,11 @@ function buildFormFields(sdk, model, operation, options = {}) {
       default: {
         const enumValues = getEnumValues(sdk, field.type);
         if (enumValues) {
-          console.log(`[DataBrowser] Building enum field "${field.name}":`, {
-            enumType: field.type,
-            availableValues: enumValues,
-            currentValue: initialValue,
-            operation,
-            isList: field.isList
-          });
           if (field.isList) {
             let defaultValue = "";
             if (Array.isArray(initialValue) && initialValue.length > 0) {
               defaultValue = initialValue.join(",");
             }
-            console.log(`[DataBrowser] Array enum field "${field.name}" converted:`, {
-              arrayValue: initialValue,
-              stringValue: defaultValue
-            });
             const checkboxOptions = enumValues.map((value) => ({
               key: value,
               value,
@@ -231,7 +218,7 @@ function buildFormFields(sdk, model, operation, options = {}) {
           break;
         }
         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`;
           let relationValue = currentItem && operation === "update" ? currentItem[relationFieldName] : void 0;
           if (relationValue === void 0 && currentItem && operation === "update") {
             const relationObject = currentItem[field.name];
@@ -250,9 +237,9 @@ function buildFormFields(sdk, model, operation, options = {}) {
           const regularDocumentName = `${properPluralName}`;
           const relationDocument = sdk[adminDocumentName] || sdk[regularDocumentName];
           if (relationDocument) {
-            const config = displayFieldConfig == null ? void 0 : displayFieldConfig[field.type];
-            const displayFields = (config == null ? void 0 : config.display) || ["name", "title"];
-            const searchFields = (config == null ? void 0 : config.search) || displayFields;
+            const config = displayFieldConfig?.[field.type];
+            const displayFields = config?.display || ["name", "title"];
+            const searchFields = config?.search || displayFields;
             const getDisplayLabel = (item) => {
               const allValues = displayFields.map((field2) => item[field2]).filter((val) => val != null && val !== "");
               if (allValues.length > 0) {
@@ -342,17 +329,16 @@ function buildFormFields(sdk, model, operation, options = {}) {
     formFields.push(formField);
   });
   listRelationFields.forEach((field) => {
-    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 relatedModel = databaseModels == null ? void 0 : databaseModels.find((m) => m.name === field.type);
+      const relatedModel = 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 = (_a = currentItem._count) == null ? void 0 : _a[field.name];
+      const countData = currentItem._count?.[field.name];
       const countText = countData !== void 0 ? ` (${countData})` : "";
       const formField = FormFieldClass.content(field.name, {
         content: React.createElement("div", { className: "py-2" }, [
@@ -428,11 +414,10 @@ function shouldSkipValue(key, value) {
   return SYSTEM_FIELDS.has(key) || value === void 0;
 }
 function convertStringValue(value, field) {
-  var _a;
   if (value === "") {
     return null;
   }
-  if ((field == null ? void 0 : field.type.toLowerCase()) === "datetime" && /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}$/.test(value)) {
+  if (field?.type.toLowerCase() === "datetime" && /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}$/.test(value)) {
     try {
       const date = new Date(value);
       return date.toISOString();
@@ -442,7 +427,7 @@ function convertStringValue(value, field) {
   }
   if (value === "true") return true;
   if (value === "false") return false;
-  const fieldType = (_a = field == null ? void 0 : field.type) == null ? void 0 : _a.toLowerCase();
+  const fieldType = field?.type?.toLowerCase();
   const isNumericField = fieldType && ["int", "bigint", "float", "decimal"].includes(fieldType);
   if (isNumericField) {
     const numericPattern = /^-?\d+(\.\d+)?$/;
@@ -460,17 +445,15 @@ function processNestedObject(value, model) {
   return Object.keys(cleanedNested).length > 0 ? cleanedNested : null;
 }
 function cleanFormInput(input, model) {
-  var _a, _b, _c, _d, _e, _f, _g;
-  console.log(`[DataBrowser] Cleaning form input for ${model == null ? void 0 : model.name}:`, input);
   const cleaned = {};
   const booleanFields = new Set(
-    ((_b = (_a = model == null ? void 0 : model.fields) == null ? void 0 : _a.filter((field) => field.type.toLowerCase() === "boolean")) == null ? void 0 : _b.map((field) => field.name)) || []
+    model?.fields?.filter((field) => field.type.toLowerCase() === "boolean")?.map((field) => field.name) || []
   );
   const requiredArrayFields = new Set(
-    ((_d = (_c = model == null ? void 0 : model.fields) == null ? void 0 : _c.filter((field) => field.isList && !field.isOptional && !field.relationName)) == null ? void 0 : _d.map((field) => field.name)) || []
+    model?.fields?.filter((field) => field.isList && !field.isOptional && !field.relationName)?.map((field) => field.name) || []
   );
   const enumArrayFields = new Set(
-    ((_f = (_e = model == null ? void 0 : model.fields) == null ? void 0 : _e.filter((field) => field.isList && field.kind === "enum")) == null ? void 0 : _f.map((field) => field.name)) || []
+    model?.fields?.filter((field) => field.isList && field.kind === "enum")?.map((field) => field.name) || []
   );
   for (const [key, value] of Object.entries(input)) {
     if (booleanFields.has(key) && value === void 0) {
@@ -480,10 +463,6 @@ function cleanFormInput(input, model) {
     if (enumArrayFields.has(key)) {
       if (typeof value === "string") {
         const arrayValue = value.split(",").filter((v) => v.trim() !== "");
-        console.log(`[DataBrowser] Converting enum array "${key}":`, {
-          stringValue: value,
-          arrayValue
-        });
         cleaned[key] = arrayValue;
         continue;
       } else if (Array.isArray(value)) {
@@ -502,7 +481,7 @@ function cleanFormInput(input, model) {
       continue;
     }
     if (typeof value === "string") {
-      const field = (_g = model == null ? void 0 : model.fields) == null ? void 0 : _g.find((f) => f.name === key);
+      const field = model?.fields?.find((f) => f.name === key);
       const convertedValue = convertStringValue(value, field);
       cleaned[key] = convertedValue;
       continue;
@@ -521,7 +500,6 @@ function cleanFormInput(input, model) {
     }
     cleaned[key] = value;
   }
-  console.log(`[DataBrowser] Cleaned form input for ${model == null ? void 0 : model.name}:`, cleaned);
   return cleaned;
 }
 export {

package/lib/utils/secure-storage.js

@@ -82,11 +82,10 @@ const SecureAdminLocalStorage = {
   },
   // Get visible columns for a specific model with sanitization
   getColumnVisibility: (modelName) => {
-    var _a;
     const sanitizedModelName = sanitizeString(modelName);
     if (!sanitizedModelName) return null;
     const config = SecureAdminLocalStorage.getConfig();
-    const columns = (_a = config.models[sanitizedModelName]) == null ? void 0 : _a.visibleColumns;
+    const columns = config.models[sanitizedModelName]?.visibleColumns;
     return columns ? sanitizeArray(columns) : null;
   },
   // Set visible columns for a specific model with validation
@@ -103,11 +102,10 @@ const SecureAdminLocalStorage = {
   },
   // Get sort preference for a specific model with validation
   getSortPreference: (modelName) => {
-    var _a;
     const sanitizedModelName = sanitizeString(modelName);
     if (!sanitizedModelName) return null;
     const config = SecureAdminLocalStorage.getConfig();
-    const sortPref = (_a = config.models[sanitizedModelName]) == null ? void 0 : _a.sortPreference;
+    const sortPref = config.models[sanitizedModelName]?.sortPreference;
     return sortPref ? sanitizeSortPreference(sortPref) : null;
   },
   // Set sort preference for a specific model with validation
@@ -124,11 +122,10 @@ const SecureAdminLocalStorage = {
   },
   // Get search fields for a specific model with sanitization
   getSearchFields: (modelName) => {
-    var _a;
     const sanitizedModelName = sanitizeString(modelName);
     if (!sanitizedModelName) return null;
     const config = SecureAdminLocalStorage.getConfig();
-    const searchFields = (_a = config.models[sanitizedModelName]) == null ? void 0 : _a.searchFields;
+    const searchFields = config.models[sanitizedModelName]?.searchFields;
     return searchFields ? sanitizeArray(searchFields) : null;
   },
   // Set search fields for a specific model with validation

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nestledjs/data-browser",
-  "version": "1.0.13",
+  "version": "1.0.15",
   "description": "Universal admin data browser for Nestled framework projects with full CRUD operations",
   "main": "./index.js",
   "module": "./index.js",
@@ -38,7 +38,7 @@
     "@apollo/client": "^4.0.0",
     "@heroicons/react": "^2.0.0",
     "@nestledjs/forms": "^0.6.3",
-    "@nestledjs/shared-components": "^1.0.13",
+    "@nestledjs/shared-components": "^1.0.14",
     "react": "^19.0.0",
     "react-router": "^7.0.0"
   },
@@ -53,4 +53,4 @@
     "registry": "https://registry.npmjs.org/"
   },
   "type": "module"
-}
+}