@nestledjs/data-browser 1.0.14 → 1.0.16

package/lib/components/filters/RelationComponents.js

@@ -78,27 +78,54 @@ function RelationItemList({
     ),
     error && /* @__PURE__ */ jsxs("div", { className: "px-3 py-2 text-sm text-red-600", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center", 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: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
+        /* @__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: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+          }
+        ) }),
         "Failed to load options"
       ] }),
       /* @__PURE__ */ jsx("div", { className: "text-xs text-gray-500 mt-1", children: error.networkError ? "Network error" : "Please try again" })
     ] }),
     !error && loading && /* @__PURE__ */ jsx("div", { className: "px-3 py-2 text-sm text-gray-500", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
-      /* @__PURE__ */ jsxs("svg", { className: "animate-spin -ml-1 mr-2 h-4 w-4 text-gray-500", xmlns: "http://www.w3.org/2000/svg", 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" })
-      ] }),
+      /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          className: "animate-spin -ml-1 mr-2 h-4 w-4 text-gray-500",
+          xmlns: "http://www.w3.org/2000/svg",
+          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"
+              }
+            )
+          ]
+        }
+      ),
       "Loading..."
     ] }) }),
     !error && !loading && items.length === 0 && /* @__PURE__ */ jsx("div", { className: "px-3 py-2 text-sm text-gray-500", children: "No items found" }),
-    !error && !loading && items.length > 0 && items.map((item) => /* @__PURE__ */ jsx(
-      RelationItem,
-      {
-        item,
-        onSelect
-      },
-      item.id
-    ))
+    !error && !loading && items.length > 0 && items.map((item) => /* @__PURE__ */ jsx(RelationItem, { item, onSelect }, item.id))
   ] });
 }
 function RelationDropdownContent({

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

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

package/lib/components/filters/RelationFilterField.js

@@ -17,22 +17,30 @@ function RelationFilterField({
     setIsOpen(false);
   }, []);
   useClickOutside(dropdownRef, handleCloseDropdown, isOpen);
-  const { relatedItems, loading, error: relationError, hasDocument } = useRelationData(
+  const {
+    relatedItems,
+    loading,
+    error: relationError,
+    hasDocument
+  } = useRelationData(
     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 });
+      setIsOpen(false);
+      setSearchTerm("");
+    },
+    [onChange]
   );
-  const handleSelect = useCallback((item) => {
-    onChange({ id: item.id });
-    setIsOpen(false);
-    setSearchTerm("");
-  }, [onChange]);
   const handleClear = useCallback(() => {
     onChange(void 0);
     setIsOpen(false);
@@ -54,7 +62,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/components/shared/AdminBreadcrumbs.js

@@ -9,25 +9,10 @@ function AdminBreadcrumbs({
 }) {
   const renderHomeLink = () => {
     if (!showHome) return null;
-    return /* @__PURE__ */ jsx("li", { className: "flex items-center", children: /* @__PURE__ */ jsx(
-      Link,
-      {
-        to: homeHref,
-        className: "text-gray-400 hover:text-gray-500",
-        "aria-label": "Home",
-        children: /* @__PURE__ */ jsx(HomeIcon, { className: "h-5 w-5 flex-shrink-0" })
-      }
-    ) }, "home");
+    return /* @__PURE__ */ jsx("li", { className: "flex items-center", children: /* @__PURE__ */ jsx(Link, { to: homeHref, className: "text-gray-400 hover:text-gray-500", "aria-label": "Home", children: /* @__PURE__ */ jsx(HomeIcon, { className: "h-5 w-5 flex-shrink-0" }) }) }, "home");
   };
   const renderBreadcrumbItem = (item, index, isLast) => {
-    const content = item.href && !item.isActive ? /* @__PURE__ */ jsx(
-      Link,
-      {
-        to: item.href,
-        className: "text-sm font-medium text-gray-500 hover:text-gray-700",
-        children: item.label
-      }
-    ) : /* @__PURE__ */ jsx(
+    const content = item.href && !item.isActive ? /* @__PURE__ */ jsx(Link, { to: item.href, className: "text-sm font-medium text-gray-500 hover:text-gray-700", children: item.label }) : /* @__PURE__ */ jsx(
       "span",
       {
         className: `text-sm font-medium ${item.isActive ? "text-gray-900" : "text-gray-500"}`,

package/lib/components/shared/AdminErrorStates.js

@@ -109,7 +109,12 @@ function AdminLoadingState({
     return sizes[size];
   };
   return /* @__PURE__ */ jsxs("div", { className: `flex flex-col items-center justify-center p-8 ${className}`, children: [
-    /* @__PURE__ */ jsx("div", { className: `animate-spin rounded-full border-b-2 border-green-web ${getSizeClasses()}` }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `animate-spin rounded-full border-b-2 border-green-web ${getSizeClasses()}`
+      }
+    ),
     /* @__PURE__ */ jsx("h3", { className: "mt-4 text-sm font-medium text-gray-900", children: title }),
     message && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-gray-500", children: message })
   ] });

package/lib/components/shared/AdminStatusDisplay.js

@@ -151,7 +151,12 @@ function AdminStatusDisplay({
   const finalClasses = `${baseClasses} ${interactiveClasses} ${className}`.trim();
   const renderDot = () => {
     if (!shouldShowDot) return null;
-    return /* @__PURE__ */ jsx("span", { className: `inline-block rounded-full mr-2 ${config.bgColor.replace("bg-", "bg-").replace("-100", "-400")} ${sizeClasses.dot}` });
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: `inline-block rounded-full mr-2 ${config.bgColor.replace("bg-", "bg-").replace("-100", "-400")} ${sizeClasses.dot}`
+      }
+    );
   };
   const renderIcon = () => {
     if (!shouldShowIcon) return null;
@@ -168,16 +173,7 @@ function AdminStatusDisplay({
     }
   };
   if (isClickable) {
-    return /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        onClick: handleClick,
-        className: finalClasses,
-        title: tooltip,
-        children: content
-      }
-    );
+    return /* @__PURE__ */ jsx("button", { type: "button", onClick: handleClick, className: finalClasses, title: tooltip, children: content });
   }
   return /* @__PURE__ */ jsx("span", { className: finalClasses, title: tooltip, children: content });
 }

package/lib/context/AdminDataContext.d.ts

@@ -42,7 +42,7 @@ export interface AdminDataProviderProps {
  * ```tsx
  * import * as Sdk from '@your-project/shared/sdk'
  * import { DATABASE_MODELS } from '@your-project/shared/sdk'
- * import { AdminDataProvider } from '@nestledjs/admin-data'
+ * import { AdminDataProvider } from '@nestledjs/data-browser'
  *
  * <AdminDataProvider
  *   sdk={Sdk}
@@ -54,7 +54,7 @@ export interface AdminDataProviderProps {
  * </AdminDataProvider>
  * ```
  */
-export declare function AdminDataProvider({ children, sdk, databaseModels, basePath, formTheme, displayFieldConfig }: Readonly<AdminDataProviderProps>): import("react/jsx-runtime").JSX.Element;
+export declare function AdminDataProvider({ children, sdk, databaseModels, basePath, formTheme, displayFieldConfig, }: Readonly<AdminDataProviderProps>): import("react/jsx-runtime").JSX.Element;
 /**
  * Hook to access the admin data context
  * @throws Error if used outside of AdminDataProvider

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/useClickOutside.js

@@ -3,7 +3,7 @@ function useClickOutside(ref, handler, isActive = true) {
   useEffect(() => {
     if (!isActive) return;
     const handleClickOutside = (event) => {
-      if (ref.current && !ref.current.contains(event.target)) {
+      if (ref.current && event.target instanceof Node && !ref.current.contains(event.target)) {
         handler();
       }
     };

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(() => {
@@ -69,6 +69,7 @@ function useRelationData(relatedModelName, searchTerm, isOpen, currentValueId) {
         return true;
       });
     } catch (error) {
+      console.error("Unexpected error:", error);
       return [];
     }
   }, [relatedData, relatedDataPath, relationError]);

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,24 +84,50 @@ 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: [
-      notification.type === "success" ? /* @__PURE__ */ jsx("svg", { className: "w-5 h-5 mr-2", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z", clipRule: "evenodd" }) }) : /* @__PURE__ */ jsx("svg", { className: "w-5 h-5 mr-2", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z", clipRule: "evenodd" }) }),
-      /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: notification.message })
-    ] }) }),
+    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: [
+          notification.type === "success" ? /* @__PURE__ */ jsx("svg", { className: "w-5 h-5 mr-2", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx(
+            "path",
+            {
+              fillRule: "evenodd",
+              d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z",
+              clipRule: "evenodd"
+            }
+          ) }) : /* @__PURE__ */ jsx("svg", { className: "w-5 h-5 mr-2", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx(
+            "path",
+            {
+              fillRule: "evenodd",
+              d: "M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z",
+              clipRule: "evenodd"
+            }
+          ) }),
+          /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: notification.message })
+        ] })
+      }
+    ),
     /* @__PURE__ */ jsxs("div", { className: "mb-6 space-y-3", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-end gap-3", children: [
         /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
-          /* @__PURE__ */ jsx("label", { htmlFor: "model-selector", className: "block text-sm font-medium text-gray-900 dark:text-gray-100 mb-2", children: "Select Model" }),
+          /* @__PURE__ */ jsx(
+            "label",
+            {
+              htmlFor: "model-selector",
+              className: "block text-sm font-medium text-gray-900 dark:text-gray-100 mb-2",
+              children: "Select Model"
+            }
+          ),
           /* @__PURE__ */ jsxs("div", { className: "relative", children: [
             /* @__PURE__ */ jsxs(
               "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: [
@@ -111,7 +136,23 @@ function AdminDataLayout() {
                 ]
               }
             ),
-            /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3", children: /* @__PURE__ */ jsx("svg", { className: "h-5 w-5 text-gray-400", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx("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" }) }) })
+            /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3", children: /* @__PURE__ */ jsx(
+              "svg",
+              {
+                className: "h-5 w-5 text-gray-400",
+                xmlns: "http://www.w3.org/2000/svg",
+                viewBox: "0 0 20 20",
+                fill: "currentColor",
+                children: /* @__PURE__ */ jsx(
+                  "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"
+                  }
+                )
+              }
+            ) })
           ] })
         ] }),
         /* @__PURE__ */ jsx(
@@ -120,7 +161,23 @@ function AdminDataLayout() {
             onClick: toggleFullscreen,
             className: "h-[50px] px-4 py-3 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-green-web focus:border-green-web transition-colors",
             title: isFullscreen ? "Exit fullscreen" : "Enter fullscreen",
-            children: isFullscreen ? /* @__PURE__ */ jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 9V4.5M9 9H4.5M9 9L3.75 3.75M9 15v4.5M9 15H4.5M9 15l-5.25 5.25M15 9h4.5M15 9V4.5M15 9l5.25-5.25M15 15h4.5M15 15v4.5m0-4.5l5.25 5.25" }) }) : /* @__PURE__ */ jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4" }) })
+            children: isFullscreen ? /* @__PURE__ */ jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 2,
+                d: "M9 9V4.5M9 9H4.5M9 9L3.75 3.75M9 15v4.5M9 15H4.5M9 15l-5.25 5.25M15 9h4.5M15 9V4.5M15 9l5.25-5.25M15 15h4.5M15 15v4.5m0-4.5l5.25 5.25"
+              }
+            ) }) : /* @__PURE__ */ jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 2,
+                d: "M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"
+              }
+            ) })
           }
         )
       ] }),
@@ -133,7 +190,15 @@ function AdminDataLayout() {
             className: "inline-flex items-center px-3 py-1.5 text-gray-700 dark:text-gray-300 hover:text-green-web dark:hover:text-green-web transition-colors",
             title: "Export your preferences to a file",
             children: [
-              /* @__PURE__ */ jsx("svg", { className: "w-4 h-4 mr-1.5", 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" }) }),
+              /* @__PURE__ */ jsx("svg", { className: "w-4 h-4 mr-1.5", 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"
             ]
           }
@@ -146,7 +211,15 @@ function AdminDataLayout() {
             className: "inline-flex items-center px-3 py-1.5 text-gray-700 dark:text-gray-300 hover:text-green-web dark:hover:text-green-web transition-colors",
             title: "Import preferences from a file",
             children: [
-              /* @__PURE__ */ jsx("svg", { className: "w-4 h-4 mr-1.5", 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-8l-4-4m0 0L8 8m4-4v12" }) }),
+              /* @__PURE__ */ jsx("svg", { className: "w-4 h-4 mr-1.5", 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-8l-4-4m0 0L8 8m4-4v12"
+                }
+              ) }),
               "Import"
             ]
           }

package/lib/pages/AdminDataCreatePage.d.ts

@@ -1,4 +1,4 @@
-export declare function AdminDataCreatePage(): import("react/jsx-runtime").JSX.Element;
+export declare function AdminDataCreatePage(): import("react/jsx-runtime").JSX.Element | null;
 export declare function AdminDataCreateErrorBoundary({ error }: Readonly<{
     error: Error;
 }>): import("react/jsx-runtime").JSX.Element;

package/lib/pages/AdminDataCreatePage.js

@@ -7,20 +7,15 @@ import { ErrorBoundary } from "@nestledjs/shared-components";
 import { Form } from "@nestledjs/forms";
 import { useAdminDataContext } from "../context/AdminDataContext.js";
 import { useParams, Link, useNavigate } from "react-router";
-import { getAdminDocuments, buildFormFields, cleanFormInput } from "../utils/graphql-utils.js";
-function toReadableText(text) {
-  return text.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/^./, (str) => str.toUpperCase());
-}
-function 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();
-};
+import { sanitizeInput, getAdminDocuments, toKebabCase, buildFormFields, toReadableText, cleanFormInput } from "../utils/graphql-utils.js";
 function AdminDataCreatePage() {
   const { dataType } = 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);
   };
@@ -69,9 +64,23 @@ function AdminDataCreatePage() {
       ) })
     ] }) }) }) });
   }
-  return /* @__PURE__ */ jsx(AdminDataCreatePageContent, { model, basePath, formTheme, displayFieldConfig });
+  if (!model) return null;
+  return /* @__PURE__ */ jsx(
+    AdminDataCreatePageContent,
+    {
+      model,
+      basePath,
+      formTheme,
+      displayFieldConfig
+    }
+  );
 }
-function AdminDataCreatePageContent({ model, basePath, formTheme, displayFieldConfig }) {
+function AdminDataCreatePageContent({
+  model,
+  basePath,
+  formTheme,
+  displayFieldConfig
+}) {
   const navigate = useNavigate();
   const { sdk, databaseModels } = useAdminDataContext();
   const [submissionState, setSubmissionState] = useState({ status: "idle" });
@@ -79,18 +88,19 @@ function AdminDataCreatePageContent({ model, basePath, formTheme, displayFieldCo
     try {
       return getAdminDocuments(sdk, model);
     } catch (error) {
+      console.error("Unexpected error:", error);
       return null;
     }
   }, [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);
     } catch (error) {
+      console.error("Unexpected error:", error);
       return null;
     }
   }, [documents]);
@@ -101,6 +111,21 @@ 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(() => {
+        setSubmissionState({ status: "idle" });
+      }, 5e3);
+      return () => clearTimeout(timer);
+    }
+  }, [submissionState.status]);
   if (!documents || !CREATE_MUTATION) {
     return /* @__PURE__ */ jsx("div", { className: "min-h-screen bg-gray-50 dark:bg-gray-900 flex flex-col justify-center py-12 sm:px-6 lg:px-8", children: /* @__PURE__ */ jsx("div", { className: "mt-8 sm:mx-auto sm:w-full sm:max-w-2xl", children: /* @__PURE__ */ jsx("div", { className: "bg-white dark:bg-gray-800 py-8 px-4 shadow sm:rounded-lg sm:px-10", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
       /* @__PURE__ */ jsx(ExclamationCircleIcon, { className: "mx-auto h-12 w-12 text-red-400" }),
@@ -142,9 +167,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,18 +174,17 @@ function AdminDataCreatePageContent({ model, basePath, formTheme, displayFieldCo
       });
     }
   };
-  useEffect(() => {
-    if (submissionState.status === "error") {
-      const timer = setTimeout(() => {
-        setSubmissionState({ status: "idle" });
-      }, 5e3);
-      return () => clearTimeout(timer);
-    }
-  }, [submissionState.status]);
   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",
@@ -215,22 +236,24 @@ function AdminDataCreatePageContent({ model, basePath, formTheme, displayFieldCo
         toReadableText(model.name)
       ] })
     ] }),
-    submissionState.status !== "idle" && /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: `mb-6 rounded-md p-4 ${submissionState.status === "success" ? "bg-green-50 border border-green-200" : submissionState.status === "error" ? "bg-red-50 border border-red-200" : "bg-blue-50 border border-blue-200"}`,
-        children: /* @__PURE__ */ jsxs("div", { className: "flex", children: [
-          /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: submissionState.status === "success" ? /* @__PURE__ */ jsx(CheckCircleIcon, { className: "h-5 w-5 text-green-400" }) : submissionState.status === "error" ? /* @__PURE__ */ jsx(ExclamationCircleIcon, { className: "h-5 w-5 text-red-400" }) : /* @__PURE__ */ jsx("div", { className: "h-5 w-5 border-2 border-blue-400 border-t-transparent rounded-full animate-spin" }) }),
-          /* @__PURE__ */ jsx("div", { className: "ml-3", children: /* @__PURE__ */ jsx(
-            "p",
-            {
-              className: `text-sm font-medium ${submissionState.status === "success" ? "text-green-800" : submissionState.status === "error" ? "text-red-800" : "text-blue-800"}`,
-              children: submissionState.status === "loading" ? `Creating ${toReadableText(model.name)}...` : submissionState.message
-            }
-          ) })
-        ] })
-      }
-    ),
+    submissionState.status !== "idle" && (() => {
+      const isSuccess = submissionState.status === "success";
+      const isError = submissionState.status === "error";
+      let bgClass = "bg-blue-50 border border-blue-200";
+      if (isSuccess) bgClass = "bg-green-50 border border-green-200";
+      else if (isError) bgClass = "bg-red-50 border border-red-200";
+      let textClass = "text-blue-800";
+      if (isSuccess) textClass = "text-green-800";
+      else if (isError) textClass = "text-red-800";
+      let icon = /* @__PURE__ */ jsx("div", { className: "h-5 w-5 border-2 border-blue-400 border-t-transparent rounded-full animate-spin" });
+      if (isSuccess) icon = /* @__PURE__ */ jsx(CheckCircleIcon, { className: "h-5 w-5 text-green-400" });
+      else if (isError) icon = /* @__PURE__ */ jsx(ExclamationCircleIcon, { className: "h-5 w-5 text-red-400" });
+      const message = submissionState.status === "loading" ? `Creating ${toReadableText(model.name)}...` : submissionState.message;
+      return /* @__PURE__ */ jsx("div", { className: `mb-6 rounded-md p-4 ${bgClass}`, children: /* @__PURE__ */ jsxs("div", { className: "flex", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: icon }),
+        /* @__PURE__ */ jsx("div", { className: "ml-3", children: /* @__PURE__ */ jsx("p", { className: `text-sm font-medium ${textClass}`, children: message }) })
+      ] }) });
+    })(),
     /* @__PURE__ */ jsx("div", { className: "bg-white dark:bg-gray-800 shadow-sm rounded-lg", children: /* @__PURE__ */ jsx("div", { className: "px-6 py-8", children: /* @__PURE__ */ jsx(
       Form,
       {