@nestledjs/data-browser 0.1.24 → 1.0.0

package/lib/pages/AdminDataEditPage.js

@@ -8,6 +8,7 @@ import { TrashIcon } from "@heroicons/react/24/solid";
 import { ErrorBoundary } from "@nestledjs/shared-components";
 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";
 function toLowerCamelCase(name) {
@@ -34,6 +35,106 @@ const sanitizeInput = (input) => {
 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`;
+  let value = item[relationFieldName];
+  if (value === void 0) {
+    const relationObject = item[field.name];
+    if (relationObject && typeof relationObject === "object" && relationObject.id) {
+      value = relationObject.id;
+    }
+  }
+  if (value && typeof value === "object") {
+    value = value.id || "";
+  }
+  return value || "";
+}
+function processDateFieldValue(field, value) {
+  if (value === null || value === void 0 || value === "") {
+    return "";
+  }
+  try {
+    const dateValue = value instanceof Date ? value : new Date(value);
+    const fieldTypeLower = field.type.toLowerCase();
+    if (fieldTypeLower === "date") {
+      return dateValue.toISOString().split("T")[0];
+    } else {
+      return dateValue.toISOString().substring(0, 16);
+    }
+  } catch (e) {
+    return "";
+  }
+}
+function sanitizeFieldValue(value, field) {
+  const fieldTypeLower = field.type.toLowerCase();
+  if (value === null) {
+    return fieldTypeLower === "boolean" ? false : "";
+  }
+  if (fieldTypeLower === "boolean") {
+    return Boolean(value);
+  }
+  if (value !== null && typeof value === "object" && "id" in value) {
+    return value.id || "";
+  }
+  if (typeof value === "object") {
+    return "";
+  }
+  return value;
+}
+function performFinalSafetyChecks(initialValues, model) {
+  for (const [key, value] of Object.entries(initialValues)) {
+    if (value === void 0) {
+      initialValues[key] = "";
+      continue;
+    }
+    if (value === null || typeof value !== "object") {
+      continue;
+    }
+    if ("id" in value && typeof value.id === "string") {
+      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();
+    } else {
+      initialValues[key] = "";
+    }
+  }
+}
+function extractInitialValues(model, item) {
+  const initialValues = {};
+  if (!item) {
+    return initialValues;
+  }
+  const idField = model.fields.find((f) => f.isId);
+  if (idField) {
+    initialValues[idField.name] = item[idField.name];
+  }
+  const editableFields = model.fields.filter((field) => {
+    if (field.isId || field.isReadOnly || field.isGenerated) return false;
+    if (field.isUpdatedAt || field.name === "createdAt") return false;
+    if (field.relationName && field.isList) return false;
+    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`;
+      initialValues[relationFieldName] = processRelationFieldValue(field, item);
+    } else {
+      const fieldTypeLower = field.type.toLowerCase();
+      if (fieldTypeLower === "datetime" || fieldTypeLower === "date") {
+        value = processDateFieldValue(field, value);
+      } else {
+        value = sanitizeFieldValue(value, field);
+      }
+      initialValues[field.name] = value;
+    }
+  });
+  performFinalSafetyChecks(initialValues, model);
+  return initialValues;
+}
 const validateId = (id) => {
   if (!id) return null;
   const sanitized = sanitizeInput(id);
@@ -45,7 +146,7 @@ const validateId = (id) => {
 };
 function AdminDataEditPage() {
   const { dataType, id } = useParams();
-  const { databaseModels, basePath = "/admin/data", formTheme } = useAdminDataContext();
+  const { databaseModels, basePath = "/admin/data", formTheme, displayFieldConfig } = useAdminDataContext();
   const findModelByName = (name) => {
     return databaseModels.find((model2) => model2.name === name);
   };
@@ -99,9 +200,138 @@ function AdminDataEditPage() {
       ) })
     ] }) }) }) });
   }
-  return /* @__PURE__ */ jsx(AdminDataEditPageContent, { model, id: validatedId, basePath, formTheme });
+  return /* @__PURE__ */ jsx(AdminDataEditPageContent, { model, id: validatedId, basePath, formTheme, displayFieldConfig });
+}
+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: [
+      /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsx(ExclamationCircleIcon, { className: "h-6 w-6 text-red-600" }) }),
+      /* @__PURE__ */ jsxs("div", { className: "ml-3", children: [
+        /* @__PURE__ */ jsxs("h3", { className: "text-lg font-medium text-gray-900 dark:text-gray-100", children: [
+          "Delete ",
+          toReadableText(modelName)
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsxs("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: [
+          "Are you sure you want to delete this ",
+          toReadableText(modelName).toLowerCase(),
+          "? This action cannot be undone."
+        ] }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "mt-5 sm:mt-4 sm:flex sm:flex-row-reverse", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: onConfirm,
+          disabled: isDeleting,
+          className: "w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm disabled:opacity-50 disabled:cursor-not-allowed",
+          children: isDeleting ? "Deleting..." : "Delete"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: onCancel,
+          disabled: isDeleting,
+          className: "mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-web sm:mt-0 sm:w-auto sm:text-sm disabled:opacity-50 disabled:cursor-not-allowed",
+          children: "Cancel"
+        }
+      )
+    ] })
+  ] }) });
 }
-function AdminDataEditPageContent({ model, id, basePath, formTheme }) {
+function getStatusColors(isSuccess, isError) {
+  if (isSuccess) {
+    return {
+      bgColor: "bg-green-50 border border-green-200",
+      textColor: "text-green-800"
+    };
+  }
+  if (isError) {
+    return {
+      bgColor: "bg-red-50 border border-red-200",
+      textColor: "text-red-800"
+    };
+  }
+  return {
+    bgColor: "bg-blue-50 border border-blue-200",
+    textColor: "text-blue-800"
+  };
+}
+function getStatusIcon(isSuccess, isError) {
+  if (isSuccess) {
+    return /* @__PURE__ */ jsx(CheckCircleIcon, { className: "h-5 w-5 text-green-400" });
+  }
+  if (isError) {
+    return /* @__PURE__ */ jsx(ExclamationCircleIcon, { className: "h-5 w-5 text-red-400" });
+  }
+  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 }) {
+  if (submissionStatus === "idle" && deleteStatus === "idle") return null;
+  const isSuccess = submissionStatus === "success" || deleteStatus === "success";
+  const isError = submissionStatus === "error" || deleteStatus === "error";
+  const isLoading = submissionStatus === "loading" || deleteStatus === "loading";
+  const { bgColor, textColor } = getStatusColors(isSuccess, isError);
+  const loadingMessage = submissionStatus === "loading" ? `Updating ${toReadableText(modelName)}...` : `Deleting ${toReadableText(modelName)}...`;
+  const message = isLoading ? loadingMessage : submissionMessage || deleteMessage;
+  return /* @__PURE__ */ jsx("div", { className: `mb-6 rounded-md p-4 ${bgColor}`, children: /* @__PURE__ */ jsxs("div", { className: "flex", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: getStatusIcon(isSuccess, isError) }),
+    /* @__PURE__ */ jsx("div", { className: "ml-3", children: /* @__PURE__ */ jsx("p", { className: `text-sm font-medium ${textColor}`, children: message }) })
+  ] }) });
+}
+async function executeUpdateMutation(updateMutation, formData, model, id, idVariableName) {
+  try {
+    const cleanedInput = cleanFormInput(formData, model);
+    const result = await updateMutation({
+      variables: {
+        input: cleanedInput,
+        [idVariableName]: id
+      }
+    });
+    if (result.errors) {
+      return {
+        success: false,
+        message: result.errors.map((err) => err.message).join(", ")
+      };
+    }
+    return {
+      success: true,
+      message: `${toReadableText(model.name)} updated successfully!`
+    };
+  } catch (error) {
+    return {
+      success: false,
+      message: error instanceof Error ? error.message : "An unexpected error occurred"
+    };
+  }
+}
+async function executeDeleteMutation(deleteMutation, id, idVariableName, model) {
+  try {
+    const result = await deleteMutation({
+      variables: {
+        [idVariableName]: id
+      }
+    });
+    if (result.errors) {
+      return {
+        success: false,
+        message: result.errors.map((err) => err.message).join(", ")
+      };
+    }
+    return {
+      success: true,
+      message: `${toReadableText(model.name)} deleted successfully!`
+    };
+  } catch (error) {
+    return {
+      success: false,
+      message: error instanceof Error ? error.message : "An unexpected error occurred"
+    };
+  }
+}
+function AdminDataEditPageContent({ model, id, basePath, formTheme, displayFieldConfig }) {
   const navigate = useNavigate();
   const { sdk, databaseModels } = useAdminDataContext();
   const [submissionState, setSubmissionState] = useState({ status: "idle" });
@@ -195,216 +425,86 @@ function AdminDataEditPageContent({ model, id, basePath, formTheme }) {
     }
   }, [deleteState.status]);
   if (!documents || !QUERY || !UPDATE_MUTATION || !DELETE_MUTATION) {
-    return /* @__PURE__ */ jsx("div", { className: "flex flex-col justify-center py-12", children: /* @__PURE__ */ jsx("div", { className: "mt-8 mx-auto w-full 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" }),
-      /* @__PURE__ */ jsx("h2", { className: "mt-4 text-lg font-medium text-gray-900 dark:text-gray-100", children: "GraphQL Schema Error" }),
-      /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-gray-600 dark:text-gray-400", children: "Unable to load GraphQL documents for this model. Please ensure the API server is running and the GraphQL schema is up to date." }),
-      /* @__PURE__ */ jsx("div", { className: "mt-6", children: /* @__PURE__ */ jsx(
-        Link,
-        {
-          to: basePath,
-          className: "w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-green-web hover:bg-green-web-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-web",
-          children: "Return to Data Browser"
-        }
-      ) })
-    ] }) }) }) });
+    return /* @__PURE__ */ jsx(
+      AdminDataStateMessage,
+      {
+        type: "schema-error",
+        title: "GraphQL Schema Error",
+        message: "Unable to load GraphQL documents for this model. Please ensure the API server is running and the GraphQL schema is up to date.",
+        basePath
+      }
+    );
   }
   if (error) {
-    return /* @__PURE__ */ jsx("div", { className: "flex flex-col justify-center py-12", children: /* @__PURE__ */ jsx("div", { className: "mt-8 mx-auto w-full max-w-md", 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" }),
-      /* @__PURE__ */ jsx("h2", { className: "mt-4 text-lg font-medium text-gray-900 dark:text-gray-100", children: "Error Loading Data" }),
-      /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-gray-600 dark:text-gray-400", children: error.message }),
-      /* @__PURE__ */ jsxs("div", { className: "mt-6 space-y-3", children: [
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: () => refetch(),
-            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: "Try Again"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Link,
-          {
-            to: `${basePath}/${toKebabCase(model.pluralName)}`,
-            className: "w-full flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-web",
-            children: "Back to List"
-          }
-        )
-      ] })
-    ] }) }) }) });
+    return /* @__PURE__ */ jsx(
+      AdminDataStateMessage,
+      {
+        type: "error",
+        title: "Error Loading Data",
+        message: error.message,
+        basePath,
+        onRetry: () => refetch(),
+        backLinkText: "Back to List",
+        backLinkPath: `${basePath}/${toKebabCase(model.pluralName)}`
+      }
+    );
   }
   if (loading) {
-    return /* @__PURE__ */ jsx("div", { className: "flex flex-col justify-center py-12", children: /* @__PURE__ */ jsx("div", { className: "mt-8 mx-auto w-full max-w-md", 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("div", { className: "mx-auto h-12 w-12 border-4 border-green-web border-t-transparent rounded-full animate-spin" }),
-      /* @__PURE__ */ jsx("h2", { className: "mt-4 text-lg font-medium text-gray-900 dark:text-gray-100", children: "Loading..." }),
-      /* @__PURE__ */ jsxs("p", { className: "mt-2 text-sm text-gray-600 dark:text-gray-400", children: [
-        "Loading ",
-        toReadableText(model.name),
-        " data..."
-      ] })
-    ] }) }) }) });
+    return /* @__PURE__ */ jsx(
+      AdminDataStateMessage,
+      {
+        type: "loading",
+        title: "Loading...",
+        message: `Loading ${toReadableText(model.name)} data...`,
+        basePath
+      }
+    );
   }
   const item = data == null ? void 0 : data[responseFieldName];
   if (!item) {
-    return /* @__PURE__ */ jsx("div", { className: "flex flex-col justify-center py-12", children: /* @__PURE__ */ jsx("div", { className: "mt-8 mx-auto w-full max-w-md", 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-yellow-400" }),
-      /* @__PURE__ */ jsx("h2", { className: "mt-4 text-lg font-medium text-gray-900 dark:text-gray-100", children: "Not Found" }),
-      /* @__PURE__ */ jsxs("p", { className: "mt-2 text-sm text-gray-600 dark:text-gray-400", children: [
-        "The ",
-        toReadableText(model.name),
-        " you're looking for doesn't exist or has been deleted."
-      ] }),
-      /* @__PURE__ */ jsx("div", { className: "mt-6", children: /* @__PURE__ */ jsx(
-        Link,
-        {
-          to: `${basePath}/${toKebabCase(model.pluralName)}`,
-          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: "Back to List"
-        }
-      ) })
-    ] }) }) }) });
-  }
-  const formFields = buildFormFields(sdk, model, "update", item, submissionState.status === "loading", basePath, databaseModels);
-  const initialValues = {};
-  if (item) {
-    const editableFields = model.fields.filter((field) => {
-      if (field.isId && false) ;
-      if (field.isReadOnly || field.isGenerated) return false;
-      if (field.isUpdatedAt || field.name === "createdAt") return false;
-      if (field.relationName && field.isList) return false;
-      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`;
-        value = item[relationFieldName];
-        if (value === void 0) {
-          const relationObject = item[field.name];
-          if (relationObject && typeof relationObject === "object" && relationObject.id) {
-            value = relationObject.id;
-          }
-        }
-        if (value && typeof value === "object") {
-          value = value.id || "";
-        }
-        initialValues[relationFieldName] = value || "";
-      } else {
-        if (field.type.toLowerCase() === "datetime" || field.type.toLowerCase() === "date") {
-          if (value !== null && value !== void 0 && value !== "") {
-            try {
-              const dateValue = value instanceof Date ? value : new Date(value);
-              if (field.type.toLowerCase() === "date") {
-                value = dateValue.toISOString().split("T")[0];
-              } else {
-                const isoString = dateValue.toISOString();
-                value = isoString.substring(0, 16);
-              }
-            } catch (e) {
-              value = "";
-            }
-          } else {
-            value = "";
-          }
-        }
-        if (value === null && field.type.toLowerCase() !== "boolean") {
-          value = "";
-        }
-        if (field.type.toLowerCase() === "boolean") {
-          value = Boolean(value);
-        }
-        if (value !== null && typeof value === "object") {
-          if (typeof value === "object" && "id" in value) {
-            value = value.id;
-          } else {
-            value = "";
-          }
-        }
-        initialValues[field.name] = value;
-      }
-    });
-    for (const [key, value] of Object.entries(initialValues)) {
-      if (value === void 0) {
-        initialValues[key] = "";
-        continue;
-      }
-      if (value === null) {
-        continue;
-      }
-      if (typeof value !== "object") {
-        continue;
-      }
-      if ("id" in value && typeof value.id === "string") {
-        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();
-      } else {
-        initialValues[key] = "";
+    return /* @__PURE__ */ jsx(
+      AdminDataStateMessage,
+      {
+        type: "not-found",
+        title: "Not Found",
+        message: `The ${toReadableText(model.name)} you're looking for doesn't exist or has been deleted.`,
+        basePath,
+        backLinkText: "Back to List",
+        backLinkPath: `${basePath}/${toKebabCase(model.pluralName)}`
       }
-    }
+    );
   }
+  const formFields = buildFormFields(sdk, model, "update", {
+    currentItem: item,
+    isSubmitting: submissionState.status === "loading",
+    basePath,
+    databaseModels,
+    displayFieldConfig
+  });
+  const initialValues = extractInitialValues(model, item);
   const handleSubmit = async (formData) => {
-    try {
-      setSubmissionState({ status: "loading" });
-      const cleanedInput = cleanFormInput(formData, model);
-      const result = await updateMutation({
-        variables: {
-          input: cleanedInput,
-          [idVariableName]: id
-        }
-      });
-      if (result.errors) {
-        setSubmissionState({
-          status: "error",
-          message: result.errors.map((err) => err.message).join(", ")
-        });
-        window.scrollTo({ top: 0, behavior: "smooth" });
-        return;
-      }
-      setSubmissionState({
-        status: "success",
-        message: `${toReadableText(model.name)} updated successfully!`
-      });
-      window.scrollTo({ top: 0, behavior: "smooth" });
+    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 (result.success) {
       await refetch();
-    } catch (error2) {
-      setSubmissionState({
-        status: "error",
-        message: error2 instanceof Error ? error2.message : "An unexpected error occurred"
-      });
-      window.scrollTo({ top: 0, behavior: "smooth" });
     }
   };
   const handleDelete = async () => {
-    try {
-      setDeleteState({ status: "loading" });
-      const result = await deleteMutation({
-        variables: {
-          [idVariableName]: id
-        }
-      });
-      if (result.errors) {
-        setDeleteState({
-          status: "error",
-          message: result.errors.map((err) => err.message).join(", ")
-        });
-        return;
-      }
-      setDeleteState({
-        status: "success",
-        message: `${toReadableText(model.name)} deleted successfully!`
-      });
+    setDeleteState({ status: "loading" });
+    const result = await executeDeleteMutation(deleteMutation, id, idVariableName, model);
+    setDeleteState({
+      status: result.success ? "success" : "error",
+      message: result.message
+    });
+    if (result.success) {
       setTimeout(() => {
         navigate(`${basePath}/${toKebabCase(model.pluralName)}`);
       }, 1500);
-    } catch (error2) {
-      setDeleteState({
-        status: "error",
-        message: error2 instanceof Error ? error2.message : "An unexpected error occurred"
-      });
     }
   };
   return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
@@ -476,57 +576,24 @@ function AdminDataEditPageContent({ model, id, basePath, formTheme }) {
         )
       ] })
     ] }),
-    showDeleteConfirm && /* @__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: [
-        /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsx(ExclamationCircleIcon, { className: "h-6 w-6 text-red-600" }) }),
-        /* @__PURE__ */ jsxs("div", { className: "ml-3", children: [
-          /* @__PURE__ */ jsxs("h3", { className: "text-lg font-medium text-gray-900 dark:text-gray-100", children: [
-            "Delete ",
-            toReadableText(model.name)
-          ] }),
-          /* @__PURE__ */ jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsxs("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: [
-            "Are you sure you want to delete this",
-            " ",
-            toReadableText(model.name).toLowerCase(),
-            "? This action cannot be undone."
-          ] }) })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "mt-5 sm:mt-4 sm:flex sm:flex-row-reverse", children: [
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: handleDelete,
-            disabled: deleteState.status === "loading",
-            className: "w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm disabled:opacity-50 disabled:cursor-not-allowed",
-            children: deleteState.status === "loading" ? "Deleting..." : "Delete"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: () => setShowDeleteConfirm(false),
-            disabled: deleteState.status === "loading",
-            className: "mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-web sm:mt-0 sm:w-auto sm:text-sm disabled:opacity-50 disabled:cursor-not-allowed",
-            children: "Cancel"
-          }
-        )
-      ] })
-    ] }) }),
-    (submissionState.status !== "idle" || deleteState.status !== "idle") && /* @__PURE__ */ jsx(
-      "div",
+    /* @__PURE__ */ jsx(
+      DeleteConfirmModal,
       {
-        className: `mb-6 rounded-md p-4 ${submissionState.status === "success" || deleteState.status === "success" ? "bg-green-50 border border-green-200" : submissionState.status === "error" || deleteState.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" || deleteState.status === "success" ? /* @__PURE__ */ jsx(CheckCircleIcon, { className: "h-5 w-5 text-green-400" }) : submissionState.status === "error" || deleteState.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" || deleteState.status === "success" ? "text-green-800" : submissionState.status === "error" || deleteState.status === "error" ? "text-red-800" : "text-blue-800"}`,
-              children: submissionState.status === "loading" ? `Updating ${toReadableText(model.name)}...` : deleteState.status === "loading" ? `Deleting ${toReadableText(model.name)}...` : submissionState.message || deleteState.message
-            }
-          ) })
-        ] })
+        show: showDeleteConfirm,
+        modelName: model.name,
+        isDeleting: deleteState.status === "loading",
+        onConfirm: handleDelete,
+        onCancel: () => setShowDeleteConfirm(false)
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      StatusMessage,
+      {
+        submissionStatus: submissionState.status,
+        deleteStatus: deleteState.status,
+        submissionMessage: submissionState.message,
+        deleteMessage: deleteState.message,
+        modelName: model.name
       }
     ),
     /* @__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(