@oondemand/oon-core-front 0.3.49 → 0.3.51

package/dist/index.js

@@ -2069,7 +2069,7 @@ function DynamicForm({ title, eyebrow = "Cadastro", fields: rawFields, initialVa
 }
 
 // src/components/internal/CoreDetailModal.tsx
-import { useEffect as useEffect6, useMemo as useMemo7, useState as useState9 } from "react";
+import { useEffect as useEffect6, useMemo as useMemo7, useRef as useRef2, useState as useState9 } from "react";
 import { Box as Box9, Button as Button8, Flex as Flex7, Heading as Heading3, IconButton, Text as Text10 } from "@chakra-ui/react";
 import { useQuery as useQuery6, useQueryClient as useQueryClient2 } from "@tanstack/react-query";
 
@@ -2906,29 +2906,52 @@ function GroupSection({
     )) })
   ] });
 }
+function formValuesEqual(fields, left, right) {
+  return fields.every((field) => (left[field.field] ?? "") === (right[field.field] ?? ""));
+}
+function fieldsForFormTabs(fields, tabs) {
+  const formTabs = tabs.filter((tab) => tab.type === "form");
+  if (!formTabs.length) return [];
+  if (formTabs.some((tab) => !tab.fields?.length && !tab.groups?.length)) return fields;
+  const selected = new Set(
+    formTabs.flatMap((tab) => tab.fields ?? tab.groups?.flatMap((group) => group.fields) ?? [])
+  );
+  return fields.filter((field) => selected.has(field.field));
+}
 function InlineParentForm({
   fields: rawFields,
+  visibleFields: rawVisibleFields,
   groups,
   parent,
   resource,
   onSaved,
+  onDirtyChange,
+  onSaveFailed,
   formId,
   externalSubmit = false
 }) {
   const fields = rawFields;
-  const initial = initialReactiveValues2(fields, parent);
+  const visibleFields = rawVisibleFields ?? rawFields;
+  const initial = useMemo6(() => initialReactiveValues2(fields, parent), [rawFields, parent]);
   const [values, setValues] = useState8(initial.values);
   const [formulaErrors, setFormulaErrors] = useState8(initial.errors);
   const [saving, setSaving] = useState8(false);
   const [error, setError] = useState8(null);
   const [fieldErrors, setFieldErrors] = useState8({});
   useEffect5(() => {
-    const next = initialReactiveValues2(fields, parent);
-    setValues(next.values);
-    setFormulaErrors(next.errors);
+    setValues(initial.values);
+    setFormulaErrors(initial.errors);
     setError(null);
     setFieldErrors({});
-  }, [parent, rawFields]);
+    onDirtyChange?.(false);
+  }, [initial, onDirtyChange]);
+  const dirty = useMemo6(
+    () => !formValuesEqual(fields, values, initial.values),
+    [fields, values, initial.values]
+  );
+  useEffect5(() => {
+    onDirtyChange?.(dirty);
+  }, [dirty, onDirtyChange]);
   const fieldsByName = useMemo6(() => new Map(fields.map((field) => [field.field, field])), [rawFields]);
   const change = (fieldName, value) => {
     const selected = fieldsByName.get(fieldName);
@@ -2970,7 +2993,7 @@ function InlineParentForm({
         `${group.label}-${group.fields.join("-")}`
       )) });
     }
-    return /* @__PURE__ */ jsx15(SimpleGrid3, { columns: { base: 1, md: 2 }, gap: "14px", children: fields.map((field) => /* @__PURE__ */ jsx15(
+    return /* @__PURE__ */ jsx15(SimpleGrid3, { columns: { base: 1, md: 2 }, gap: "14px", children: visibleFields.map((field) => /* @__PURE__ */ jsx15(
       FieldControl,
       {
         field,
@@ -2994,6 +3017,7 @@ function InlineParentForm({
         if (Object.keys(validation).length) {
           setFieldErrors(validation);
           setError({ message: "Preencha os campos obrigat\xF3rios destacados." });
+          onSaveFailed?.();
           return;
         }
         setSaving(true);
@@ -3002,10 +3026,12 @@ function InlineParentForm({
         try {
           const payload = buildDomainMutationPayload(fields, values);
           const saved = parent._id ? await resource.update(String(parent._id), payload) : await resource.create(payload);
+          onDirtyChange?.(false);
           onSaved(saved);
         } catch (requestError) {
           setError(requestError);
           setFieldErrors(fieldErrorsOf(requestError));
+          onSaveFailed?.();
         } finally {
           setSaving(false);
         }
@@ -3029,10 +3055,16 @@ function CoreTabbedDetail({
   refreshTokens,
   onRefresh,
   onParentSaved,
+  onDirtyChange,
+  onSaveFailed,
   formId,
   externalSubmit
 }) {
   const active = tabs.find((tab) => tab.id === activeTab) ?? tabs[0];
+  const activeForm = active?.type === "form" ? active : void 0;
+  const draftFields = useMemo6(() => fieldsForFormTabs(formFields, tabs), [formFields, tabs]);
+  const formParent = useMemo6(() => parent ?? {}, [parent]);
+  const hasFormTab = draftFields.length > 0;
   return /* @__PURE__ */ jsxs10(Stack3, { gap: 4, children: [
     /* @__PURE__ */ jsx15(Flex6, { gap: 2, borderBottomWidth: "1px", borderColor: "#E5E9ED", overflowX: "auto", children: tabs.map((tab) => {
       const disabled = !parent?._id && (tab.type === "relatedGrid" || tab.type === "readonlyGrid" || tab.type === "summary");
@@ -3049,58 +3081,52 @@ function CoreTabbedDetail({
         tab.id
       );
     }) }),
-    /* @__PURE__ */ jsx15(Box8, { children: !active ? null : active.type === "summary" && parent ? /* @__PURE__ */ jsx15(CoreSummaryCards, { cards: active.cards, parent, relations }) : active.type === "form" ? /* @__PURE__ */ jsx15(
-      InlineParentForm,
-      {
-        fields: fieldsForTab(formFields, active.fields ?? active.groups?.flatMap((group) => group.fields)),
-        groups: active.groups,
-        parent: parent ?? {},
-        resource,
-        onSaved: onParentSaved,
-        formId,
-        externalSubmit
-      }
-    ) : (active.type === "relatedGrid" || active.type === "readonlyGrid") && parent ? /* @__PURE__ */ jsx15(
-      CoreRelatedGrid,
-      {
-        tab: active,
-        parent,
-        relations,
-        refreshToken: refreshTokens[active.id],
-        onRefresh
-      }
-    ) : active.type === "customComponent" ? /* @__PURE__ */ jsxs10(Text9, { color: "#667085", children: [
-      "Componente customizado: ",
-      active.component
-    ] }) : /* @__PURE__ */ jsx15(Text9, { color: "#667085", children: "Salve o registro principal para liberar esta aba." }) })
+    /* @__PURE__ */ jsxs10(Box8, { children: [
+      hasFormTab ? /* @__PURE__ */ jsx15(Box8, { display: activeForm ? "block" : "none", children: /* @__PURE__ */ jsx15(
+        InlineParentForm,
+        {
+          fields: draftFields,
+          visibleFields: activeForm ? fieldsForTab(draftFields, activeForm.fields ?? activeForm.groups?.flatMap((group) => group.fields)) : [],
+          groups: activeForm?.groups,
+          parent: formParent,
+          resource,
+          onSaved: onParentSaved,
+          onDirtyChange,
+          onSaveFailed,
+          formId,
+          externalSubmit
+        }
+      ) }) : null,
+      !active || active.type === "form" ? null : active.type === "summary" && parent ? /* @__PURE__ */ jsx15(CoreSummaryCards, { cards: active.cards, parent, relations }) : (active.type === "relatedGrid" || active.type === "readonlyGrid") && parent ? /* @__PURE__ */ jsx15(
+        CoreRelatedGrid,
+        {
+          tab: active,
+          parent,
+          relations,
+          refreshToken: refreshTokens[active.id],
+          onRefresh
+        }
+      ) : active.type === "customComponent" ? /* @__PURE__ */ jsxs10(Text9, { color: "#667085", children: [
+        "Componente customizado: ",
+        active.component
+      ] }) : /* @__PURE__ */ jsx15(Text9, { color: "#667085", children: "Salve o registro principal para liberar esta aba." })
+    ] })
   ] });
 }
 
 // src/components/internal/CoreDetailModal.tsx
 import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
-function CoreDetailModal({
-  model,
-  title,
-  config,
-  formFields,
-  recordId,
-  initialRecord,
-  initialTab,
-  relations,
-  topActions,
-  bottomActions,
-  onClose,
-  onSaved
-}) {
+function CoreDetailModal({ model, title, config, formFields, recordId, initialRecord, initialTab, relations, topActions, bottomActions, onClose, onSaved }) {
   const schemaQuery = useModelSchema(model);
   const schema = schemaQuery.data;
   const resource = useOonResource(schema?.basePath ?? `/${model.toLowerCase()}s`);
   const queryClient = useQueryClient2();
   const [parent, setParent] = useState9(initialRecord);
-  const [activeTab, setActiveTab] = useState9(
-    resolveInitialDetailTab(config, recordId, initialTab)
-  );
+  const [activeTab, setActiveTab] = useState9(resolveInitialDetailTab(config, recordId, initialTab));
   const [refreshTokens, setRefreshTokens] = useState9({});
+  const [dirty, setDirty] = useState9(false);
+  const [confirmingClose, setConfirmingClose] = useState9(false);
+  const closeAfterSaveRef = useRef2(false);
   const parentQuery = useQuery6({
     queryKey: ["oon", "detail", model, recordId],
     enabled: !!recordId,
@@ -3136,78 +3162,83 @@ function CoreDetailModal({
   const width = config.size === "full" ? "98vw" : config.size === "md" ? "760px" : config.size === "lg" ? "980px" : "1180px";
   const displayTitle = parent?.[config.titleField ?? ""] ? String(parent[config.titleField ?? ""]) : title;
   const activeIsForm = (config.tabs.find((tab) => tab.id === activeTab) ?? config.tabs[0])?.type === "form";
+  const hasFormTab = config.tabs.some((tab) => tab.type === "form");
   const formId = `oon-detail-form-${model.replace(/[^a-zA-Z0-9_-]/g, "-")}`;
-  return /* @__PURE__ */ jsx16(DetailRecordProvider, { record: parent, setRecord: setParent, children: /* @__PURE__ */ jsx16(Flex7, { position: "fixed", inset: 0, zIndex: 1e3, align: "center", justify: "center", p: 4, bg: "rgba(15,23,42,.48)", children: /* @__PURE__ */ jsxs11(Box9, { role: "dialog", "aria-modal": "true", display: "flex", flexDirection: "column", w: `min(${width}, 98vw)`, h: "94vh", maxH: "94vh", overflow: "hidden", bg: "white", borderRadius: "14px", boxShadow: "0 24px 70px rgba(15,23,42,.24)", children: [
-    /* @__PURE__ */ jsxs11(Flex7, { minH: "72px", px: "20px", py: "10px", align: "center", justify: "space-between", gap: 4, borderBottomWidth: "1px", borderColor: "#E5E9ED", children: [
-      /* @__PURE__ */ jsxs11(Box9, { minW: "160px", children: [
-        /* @__PURE__ */ jsx16(Text10, { color: "#0474AF", fontSize: "10px", fontWeight: "700", textTransform: "uppercase", children: "Detalhe" }),
-        /* @__PURE__ */ jsx16(Heading3, { size: "md", children: recordId ? displayTitle : `Novo ${title}` })
+  const requestClose = () => {
+    if (dirty) setConfirmingClose(true);
+    else onClose();
+  };
+  const saveAndClose = () => {
+    const form = document.getElementById(formId);
+    if (!form) return;
+    closeAfterSaveRef.current = true;
+    setConfirmingClose(false);
+    form.requestSubmit();
+  };
+  return /* @__PURE__ */ jsx16(DetailRecordProvider, { record: parent, setRecord: setParent, children: /* @__PURE__ */ jsxs11(Flex7, { position: "fixed", inset: 0, zIndex: 1e3, align: "center", justify: "center", p: 4, bg: "rgba(15,23,42,.48)", children: [
+    /* @__PURE__ */ jsxs11(Box9, { role: "dialog", "aria-modal": "true", display: "flex", flexDirection: "column", w: `min(${width}, 98vw)`, h: "94vh", maxH: "94vh", overflow: "hidden", bg: "white", borderRadius: "14px", boxShadow: "0 24px 70px rgba(15,23,42,.24)", children: [
+      /* @__PURE__ */ jsxs11(Flex7, { minH: "72px", px: "20px", py: "10px", align: "center", justify: "space-between", gap: 4, borderBottomWidth: "1px", borderColor: "#E5E9ED", children: [
+        /* @__PURE__ */ jsxs11(Box9, { minW: "160px", children: [
+          /* @__PURE__ */ jsx16(Text10, { color: "#0474AF", fontSize: "10px", fontWeight: "700", textTransform: "uppercase", children: "Detalhe" }),
+          /* @__PURE__ */ jsx16(Heading3, { size: "md", children: recordId ? displayTitle : `Novo ${title}` })
+        ] }),
+        /* @__PURE__ */ jsxs11(Flex7, { flex: "1", align: "center", justify: "flex-end", gap: "8px", wrap: "wrap", children: [
+          recordId ? topActions : null,
+          /* @__PURE__ */ jsx16(IconButton, { "aria-label": "Fechar", title: "Fechar", size: "sm", minW: "32px", h: "32px", borderRadius: "full", variant: "ghost", color: "#475569", fontSize: "21px", fontWeight: "400", lineHeight: "1", onClick: requestClose, _hover: { bg: "#F1F5F9", color: "#0F172A" }, children: "\xD7" })
+        ] })
       ] }),
-      /* @__PURE__ */ jsxs11(Flex7, { flex: "1", align: "center", justify: "flex-end", gap: "8px", wrap: "wrap", children: [
-        recordId ? topActions : null,
-        /* @__PURE__ */ jsx16(
-          IconButton,
-          {
-            "aria-label": "Fechar",
-            title: "Fechar",
-            size: "sm",
-            minW: "32px",
-            h: "32px",
-            borderRadius: "full",
-            variant: "ghost",
-            color: "#475569",
-            fontSize: "21px",
-            fontWeight: "400",
-            lineHeight: "1",
-            onClick: onClose,
-            _hover: { bg: "#F1F5F9", color: "#0F172A" },
-            children: "\xD7"
+      /* @__PURE__ */ jsx16(Box9, { flex: "1", minH: 0, p: "20px", overflowY: "auto", children: schemaQuery.isLoading || parentQuery.isLoading ? /* @__PURE__ */ jsx16(Text10, { children: "Carregando..." }) : /* @__PURE__ */ jsx16(
+        CoreTabbedDetail,
+        {
+          tabs: config.tabs,
+          activeTab,
+          onTabChange: setActiveTab,
+          parent,
+          formFields: resolvedFormFields,
+          resource,
+          relations,
+          refreshTokens,
+          onRefresh: refresh,
+          formId,
+          externalSubmit: true,
+          onDirtyChange: setDirty,
+          onSaveFailed: () => {
+            closeAfterSaveRef.current = false;
+          },
+          onParentSaved: (saved) => {
+            setParent(saved);
+            setDirty(false);
+            onSaved?.(saved);
+            refresh(["parent"]);
+            if (closeAfterSaveRef.current) {
+              closeAfterSaveRef.current = false;
+              onClose();
+            }
           }
-        )
+        }
+      ) }),
+      /* @__PURE__ */ jsxs11(Flex7, { flex: "0 0 auto", minH: "64px", px: "20px", py: "10px", align: "center", justify: "space-between", gap: "12px", bg: "white", borderTopWidth: "1px", borderColor: "#E5E9ED", boxShadow: "0 -8px 24px rgba(15,23,42,.06)", children: [
+        /* @__PURE__ */ jsx16(Box9, { children: recordId ? bottomActions : null }),
+        /* @__PURE__ */ jsx16(Button8, { type: "submit", form: formId, colorPalette: "brand", disabled: !hasFormTab || !activeIsForm && !dirty || schemaQuery.isLoading || parentQuery.isLoading, children: "Salvar" })
       ] })
     ] }),
-    /* @__PURE__ */ jsx16(Box9, { flex: "1", minH: 0, p: "20px", overflowY: "auto", children: schemaQuery.isLoading || parentQuery.isLoading ? /* @__PURE__ */ jsx16(Text10, { children: "Carregando..." }) : /* @__PURE__ */ jsx16(
-      CoreTabbedDetail,
-      {
-        tabs: config.tabs,
-        activeTab,
-        onTabChange: setActiveTab,
-        parent,
-        formFields: resolvedFormFields,
-        resource,
-        relations,
-        refreshTokens,
-        onRefresh: refresh,
-        formId,
-        externalSubmit: true,
-        onParentSaved: (saved) => {
-          setParent(saved);
-          onSaved?.(saved);
-          refresh(["parent"]);
-        }
-      }
-    ) }),
-    /* @__PURE__ */ jsxs11(
-      Flex7,
-      {
-        flex: "0 0 auto",
-        minH: "64px",
-        px: "20px",
-        py: "10px",
-        align: "center",
-        justify: "space-between",
-        gap: "12px",
-        bg: "white",
-        borderTopWidth: "1px",
-        borderColor: "#E5E9ED",
-        boxShadow: "0 -8px 24px rgba(15,23,42,.06)",
-        children: [
-          /* @__PURE__ */ jsx16(Box9, { children: recordId ? bottomActions : null }),
-          /* @__PURE__ */ jsx16(Button8, { type: "submit", form: formId, colorPalette: "brand", disabled: !activeIsForm || schemaQuery.isLoading || parentQuery.isLoading, children: "Salvar" })
-        ]
-      }
-    )
-  ] }) }) });
+    confirmingClose ? /* @__PURE__ */ jsx16(Flex7, { position: "fixed", inset: 0, zIndex: 1100, align: "center", justify: "center", p: 4, bg: "rgba(15,23,42,.58)", children: /* @__PURE__ */ jsxs11(Box9, { role: "alertdialog", "aria-modal": "true", "aria-labelledby": "oon-unsaved-title", w: "min(520px, 94vw)", p: "22px", bg: "white", borderRadius: "12px", boxShadow: "0 24px 70px rgba(15,23,42,.28)", children: [
+      /* @__PURE__ */ jsx16(Heading3, { id: "oon-unsaved-title", size: "md", children: "Altera\xE7\xF5es n\xE3o salvas" }),
+      /* @__PURE__ */ jsx16(Text10, { mt: "8px", color: "#667085", fontSize: "13px", children: "As informa\xE7\xF5es preenchidas ainda n\xE3o foram salvas. Voc\xEA pode continuar editando, sair sem salvar ou salvar antes de fechar." }),
+      /* @__PURE__ */ jsxs11(Flex7, { mt: "22px", justify: "flex-end", gap: "10px", wrap: "wrap", children: [
+        /* @__PURE__ */ jsx16(Button8, { variant: "ghost", onClick: () => {
+          closeAfterSaveRef.current = false;
+          setConfirmingClose(false);
+        }, children: "Continuar editando" }),
+        /* @__PURE__ */ jsx16(Button8, { variant: "outline", colorPalette: "red", onClick: () => {
+          closeAfterSaveRef.current = false;
+          setConfirmingClose(false);
+          onClose();
+        }, children: "Sair sem salvar" }),
+        /* @__PURE__ */ jsx16(Button8, { colorPalette: "brand", onClick: saveAndClose, children: "Salvar e sair" })
+      ] })
+    ] }) }) : null
+  ] }) });
 }
 
 // src/components/CoreCollection.tsx
@@ -3351,7 +3382,7 @@ function CoreDocument({ model, label, endpoint, columns, form }) {
 }
 
 // src/components/CorePipeline.tsx
-import { useEffect as useEffect7, useRef as useRef2, useState as useState11 } from "react";
+import { useEffect as useEffect7, useRef as useRef3, useState as useState11 } from "react";
 import { Badge as Badge4, Box as Box11, Button as Button9, Flex as Flex8, Heading as Heading5, Input as Input6, NativeSelect as NativeSelect5, Stack as Stack5, Text as Text12 } from "@chakra-ui/react";
 import { useMutation as useMutation3, useQuery as useQuery7, useQueryClient as useQueryClient4 } from "@tanstack/react-query";
 
@@ -3595,7 +3626,7 @@ function CorePipeline({
   const [selectedTicket, setSelectedTicket] = useState11(null);
   const [creating, setCreating] = useState11(false);
   const [formError, setFormError] = useState11(null);
-  const boardRef = useRef2(null);
+  const boardRef = useRef3(null);
   const [boardScrollState, setBoardScrollState] = useState11({ canScrollLeft: false, canScrollRight: false });
   const effectiveFilters = Object.fromEntries(
     Object.entries(filterValues).filter(([, value]) => value !== "" && value != null)