@oondemand/oon-core-front 0.3.16 → 0.3.18

package/dist/index.js

@@ -3,7 +3,7 @@ import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 
 // src/app/OonApp.tsx
-import { useMemo as useMemo7 } from "react";
+import { useMemo as useMemo8 } from "react";
 import { RouterProvider } from "react-router-dom";
 
 // src/api/createRestClient.ts
@@ -1647,13 +1647,13 @@ function DynamicForm({ title, eyebrow = "Cadastro", fields, initialValues, submi
 }
 
 // src/components/internal/CoreDetailModal.tsx
-import { useEffect as useEffect6, useMemo as useMemo6, useState as useState9 } from "react";
+import { useEffect as useEffect6, useMemo as useMemo7, useState as useState9 } from "react";
 import { Box as Box8, Button as Button8, Flex as Flex7, Heading as Heading3, Text as Text10 } from "@chakra-ui/react";
 import { useQuery as useQuery6, useQueryClient as useQueryClient2 } from "@tanstack/react-query";
 
 // src/components/internal/CoreTabbedDetail.tsx
-import { useEffect as useEffect5, useState as useState8 } from "react";
-import { Box as Box7, Button as Button7, Flex as Flex6, Input as Input5, NativeSelect as NativeSelect4, SimpleGrid as SimpleGrid3, Stack as Stack3, Text as Text9 } from "@chakra-ui/react";
+import { useEffect as useEffect5, useMemo as useMemo6, useState as useState8 } from "react";
+import { Box as Box7, Button as Button7, Flex as Flex6, Input as Input5, NativeSelect as NativeSelect4, SimpleGrid as SimpleGrid3, Stack as Stack3, Text as Text9, Textarea as Textarea3 } from "@chakra-ui/react";
 
 // src/components/internal/CoreSummaryCards.tsx
 import { SimpleGrid as SimpleGrid2, Box as Box5, Text as Text6, Badge as Badge2 } from "@chakra-ui/react";
@@ -1887,51 +1887,232 @@ function coerce2(value, kind) {
   if (kind === "boolean") return value === "true";
   return value;
 }
-function toValue2(value) {
-  return value == null ? "" : String(typeof value === "object" ? value._id ?? "" : value);
+function toValue2(value, kind) {
+  if (value == null) return "";
+  if (kind === "date") {
+    try {
+      return new Date(value).toISOString().slice(0, 10);
+    } catch {
+      return "";
+    }
+  }
+  if (typeof value === "object") {
+    const record = value;
+    return String(record._id ?? record.id ?? "");
+  }
+  return String(value);
+}
+function isMultiline2(field) {
+  return /observa|descricao|mensagem|detalhe|necessidade/i.test(field.field);
 }
-function InlineParentForm({ fields, parent, resource, onSaved }) {
+function FieldControl({
+  field,
+  value,
+  onChange
+}) {
+  const label = fieldLabel({ name: field.field, label: field.label });
+  if (field.widget === "checkbox") {
+    const checkedValue = String(field.checkedValue ?? true);
+    const uncheckedValue = String(field.uncheckedValue ?? false);
+    const checked = (value || uncheckedValue) === checkedValue;
+    return /* @__PURE__ */ jsxs10(
+      Box7,
+      {
+        as: "label",
+        display: "flex",
+        minH: "38px",
+        px: "11px",
+        alignItems: "center",
+        gap: "8px",
+        color: "#344054",
+        bg: checked ? "#F0F7FF" : "white",
+        borderWidth: "1px",
+        borderColor: checked ? "#8FC9E7" : "#D5DDE3",
+        borderRadius: "7px",
+        cursor: "pointer",
+        children: [
+          /* @__PURE__ */ jsx14(
+            "input",
+            {
+              type: "checkbox",
+              checked,
+              style: { width: 16, height: 16, accentColor: "#0474AF", cursor: "pointer" },
+              onChange: (event) => onChange(event.currentTarget.checked ? checkedValue : uncheckedValue)
+            }
+          ),
+          /* @__PURE__ */ jsx14(Text9, { as: "span", fontSize: "11px", fontWeight: "600", children: label })
+        ]
+      }
+    );
+  }
+  const control = field.kind === "enum" && field.options?.length ? /* @__PURE__ */ jsxs10(NativeSelect4.Root, { size: "sm", children: [
+    /* @__PURE__ */ jsxs10(NativeSelect4.Field, { value, onChange: (event) => onChange(event.currentTarget.value), children: [
+      /* @__PURE__ */ jsx14("option", { value: "", children: "\u2014 Selecione \u2014" }),
+      field.options.map((option) => /* @__PURE__ */ jsx14("option", { value: option, children: option }, option))
+    ] }),
+    /* @__PURE__ */ jsx14(NativeSelect4.Indicator, {})
+  ] }) : field.kind === "boolean" ? /* @__PURE__ */ jsxs10(NativeSelect4.Root, { size: "sm", children: [
+    /* @__PURE__ */ jsxs10(NativeSelect4.Field, { value, onChange: (event) => onChange(event.currentTarget.value), children: [
+      /* @__PURE__ */ jsx14("option", { value: "", children: "\u2014 Selecione \u2014" }),
+      /* @__PURE__ */ jsx14("option", { value: "true", children: "Sim" }),
+      /* @__PURE__ */ jsx14("option", { value: "false", children: "N\xE3o" })
+    ] }),
+    /* @__PURE__ */ jsx14(NativeSelect4.Indicator, {})
+  ] }) : isMultiline2(field) ? /* @__PURE__ */ jsx14(Textarea3, { rows: 4, resize: "vertical", value, onChange: (event) => onChange(event.currentTarget.value) }) : /* @__PURE__ */ jsx14(
+    Input5,
+    {
+      size: "sm",
+      type: field.kind === "date" ? "date" : ["number", "currency", "currencyConverted"].includes(field.kind ?? "") ? "number" : "text",
+      value,
+      onChange: (event) => onChange(event.currentTarget.value)
+    }
+  );
+  return /* @__PURE__ */ jsxs10(Box7, { children: [
+    /* @__PURE__ */ jsxs10(Text9, { as: "label", display: "block", mb: "5px", color: "#475467", fontSize: "11px", fontWeight: "600", children: [
+      label,
+      field.required ? /* @__PURE__ */ jsx14(Text9, { as: "span", color: "#DC2626", children: " *" }) : null
+    ] }),
+    control
+  ] });
+}
+function GroupSection({
+  group,
+  fields,
+  values,
+  onChange
+}) {
+  if (!fields.length) return null;
+  const columns = group.columns ?? 2;
+  return /* @__PURE__ */ jsxs10(Box7, { p: { base: "12px", md: "14px" }, bg: "#FAFCFD", borderWidth: "1px", borderColor: "#E5E9ED", borderRadius: "9px", children: [
+    /* @__PURE__ */ jsx14(Text9, { color: "#344054", fontSize: "12px", fontWeight: "700", children: group.label }),
+    group.description ? /* @__PURE__ */ jsx14(Text9, { mt: "2px", mb: "12px", color: "#667085", fontSize: "10px", children: group.description }) : /* @__PURE__ */ jsx14(Box7, { h: "10px" }),
+    /* @__PURE__ */ jsx14(SimpleGrid3, { columns: { base: 1, md: Math.min(columns, 2), xl: columns }, gapX: "16px", gapY: "14px", children: fields.map((field) => /* @__PURE__ */ jsx14(
+      FieldControl,
+      {
+        field,
+        value: values[field.field] ?? "",
+        onChange: (value) => onChange(field.field, value)
+      },
+      field.field
+    )) })
+  ] });
+}
+function InlineParentForm({
+  fields,
+  groups,
+  parent,
+  resource,
+  onSaved
+}) {
   const [values, setValues] = useState8({});
   const [saving, setSaving] = useState8(false);
   const [error, setError] = useState8(null);
-  useEffect5(() => setValues(Object.fromEntries(fields.map((f) => [f.field, toValue2(parent[f.field])]))), [parent, fields]);
-  return /* @__PURE__ */ jsx14("form", { onSubmit: async (event) => {
-    event.preventDefault();
-    setSaving(true);
+  useEffect5(() => {
+    setValues(Object.fromEntries(fields.map((field) => [field.field, toValue2(parent[field.field], field.kind)])));
+  }, [parent, fields]);
+  const fieldsByName = useMemo6(() => new Map(fields.map((field) => [field.field, field])), [fields]);
+  const change = (field, value) => {
+    setValues((current) => ({ ...current, [field]: value }));
     setError(null);
-    try {
-      const payload = Object.fromEntries(fields.map((f) => [f.field, coerce2(values[f.field] ?? "", f.kind)]).filter(([, v]) => v !== void 0));
-      const saved = parent._id ? await resource.update(String(parent._id), payload) : await resource.create(payload);
-      onSaved(saved);
-    } catch (err) {
-      setError(err);
-    } finally {
-      setSaving(false);
+  };
+  const renderFields = () => {
+    if (groups?.length) {
+      return /* @__PURE__ */ jsx14(Stack3, { gap: "14px", children: groups.map((group) => /* @__PURE__ */ jsx14(
+        GroupSection,
+        {
+          group,
+          fields: group.fields.map((field) => fieldsByName.get(field)).filter(Boolean),
+          values,
+          onChange: change
+        },
+        `${group.label}-${group.fields.join("-")}`
+      )) });
     }
-  }, children: /* @__PURE__ */ jsxs10(Stack3, { gap: 4, children: [
-    error ? /* @__PURE__ */ jsx14(Text9, { color: "#B42318", fontSize: "11px", children: "N\xE3o foi poss\xEDvel salvar." }) : null,
-    /* @__PURE__ */ jsx14(SimpleGrid3, { columns: { base: 1, md: 2 }, gap: 3, children: fields.map((field) => /* @__PURE__ */ jsxs10(Box7, { children: [
-      /* @__PURE__ */ jsx14(Text9, { as: "label", display: "block", mb: "5px", fontSize: "11px", fontWeight: "600", children: fieldLabel({ name: field.field, label: field.label }) }),
-      field.kind === "boolean" ? /* @__PURE__ */ jsxs10(NativeSelect4.Root, { size: "sm", children: [
-        /* @__PURE__ */ jsxs10(NativeSelect4.Field, { value: values[field.field] ?? "", onChange: (e) => setValues((v) => ({ ...v, [field.field]: e.currentTarget.value })), children: [
-          /* @__PURE__ */ jsx14("option", { value: "", children: "\u2014" }),
-          /* @__PURE__ */ jsx14("option", { value: "true", children: "Sim" }),
-          /* @__PURE__ */ jsx14("option", { value: "false", children: "N\xE3o" })
-        ] }),
-        /* @__PURE__ */ jsx14(NativeSelect4.Indicator, {})
-      ] }) : /* @__PURE__ */ jsx14(Input5, { size: "sm", type: field.kind === "date" ? "date" : ["number", "currency"].includes(field.kind ?? "") ? "number" : "text", value: values[field.field] ?? "", onChange: (e) => setValues((v) => ({ ...v, [field.field]: e.currentTarget.value })) })
-    ] }, field.field)) }),
-    /* @__PURE__ */ jsx14(Flex6, { justify: "flex-end", children: /* @__PURE__ */ jsx14(Button7, { type: "submit", colorPalette: "brand", loading: saving, children: "Salvar dados principais" }) })
-  ] }) });
+    return /* @__PURE__ */ jsx14(SimpleGrid3, { columns: { base: 1, md: 2 }, gap: "14px", children: fields.map((field) => /* @__PURE__ */ jsx14(
+      FieldControl,
+      {
+        field,
+        value: values[field.field] ?? "",
+        onChange: (value) => change(field.field, value)
+      },
+      field.field
+    )) });
+  };
+  return /* @__PURE__ */ jsx14(
+    "form",
+    {
+      onSubmit: async (event) => {
+        event.preventDefault();
+        setSaving(true);
+        setError(null);
+        try {
+          const payload = Object.fromEntries(
+            fields.map((field) => [field.field, coerce2(values[field.field] ?? "", field.kind)]).filter(([, value]) => value !== void 0)
+          );
+          const saved = parent._id ? await resource.update(String(parent._id), payload) : await resource.create(payload);
+          onSaved(saved);
+        } catch (requestError) {
+          setError(requestError);
+        } finally {
+          setSaving(false);
+        }
+      },
+      children: /* @__PURE__ */ jsxs10(Stack3, { gap: "16px", children: [
+        error ? /* @__PURE__ */ jsx14(Text9, { color: "#B42318", fontSize: "11px", children: "N\xE3o foi poss\xEDvel salvar." }) : null,
+        renderFields(),
+        /* @__PURE__ */ jsx14(Flex6, { justify: "flex-end", children: /* @__PURE__ */ jsx14(Button7, { type: "submit", colorPalette: "brand", loading: saving, children: "Salvar dados principais" }) })
+      ] })
+    }
+  );
 }
-function CoreTabbedDetail({ tabs, activeTab, onTabChange, parent, formFields, resource, relations, refreshTokens, onRefresh, onParentSaved }) {
+function CoreTabbedDetail({
+  tabs,
+  activeTab,
+  onTabChange,
+  parent,
+  formFields,
+  resource,
+  relations,
+  refreshTokens,
+  onRefresh,
+  onParentSaved
+}) {
   const active = tabs.find((tab) => tab.id === activeTab) ?? tabs[0];
   return /* @__PURE__ */ jsxs10(Stack3, { gap: 4, children: [
     /* @__PURE__ */ jsx14(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");
-      return /* @__PURE__ */ jsx14(Button7, { type: "button", variant: active?.id === tab.id ? "solid" : "ghost", colorPalette: active?.id === tab.id ? "brand" : void 0, disabled, onClick: () => onTabChange(tab.id), children: tab.label }, tab.id);
+      return /* @__PURE__ */ jsx14(
+        Button7,
+        {
+          type: "button",
+          variant: active?.id === tab.id ? "solid" : "ghost",
+          colorPalette: active?.id === tab.id ? "brand" : void 0,
+          disabled,
+          onClick: () => onTabChange(tab.id),
+          children: tab.label
+        },
+        tab.id
+      );
     }) }),
-    /* @__PURE__ */ jsx14(Box7, { children: !active ? null : active.type === "summary" && parent ? /* @__PURE__ */ jsx14(CoreSummaryCards, { cards: active.cards, parent, relations }) : active.type === "form" ? /* @__PURE__ */ jsx14(InlineParentForm, { fields: fieldsForTab(formFields, active.fields ?? active.groups?.flatMap((g) => g.fields)), parent: parent ?? {}, resource, onSaved: onParentSaved }) : (active.type === "relatedGrid" || active.type === "readonlyGrid") && parent ? /* @__PURE__ */ jsx14(CoreRelatedGrid, { tab: active, parent, relations, refreshToken: refreshTokens[active.id], onRefresh }) : active.type === "customComponent" ? /* @__PURE__ */ jsxs10(Text9, { color: "#667085", children: [
+    /* @__PURE__ */ jsx14(Box7, { children: !active ? null : active.type === "summary" && parent ? /* @__PURE__ */ jsx14(CoreSummaryCards, { cards: active.cards, parent, relations }) : active.type === "form" ? /* @__PURE__ */ jsx14(
+      InlineParentForm,
+      {
+        fields: fieldsForTab(formFields, active.fields ?? active.groups?.flatMap((group) => group.fields)),
+        groups: active.groups,
+        parent: parent ?? {},
+        resource,
+        onSaved: onParentSaved
+      }
+    ) : (active.type === "relatedGrid" || active.type === "readonlyGrid") && parent ? /* @__PURE__ */ jsx14(
+      CoreRelatedGrid,
+      {
+        tab: active,
+        parent,
+        relations,
+        refreshToken: refreshTokens[active.id],
+        onRefresh
+      }
+    ) : active.type === "customComponent" ? /* @__PURE__ */ jsxs10(Text9, { color: "#667085", children: [
       "Componente customizado: ",
       active.component
     ] }) : /* @__PURE__ */ jsx14(Text9, { color: "#667085", children: "Salve o registro principal para liberar esta aba." }) })
@@ -1940,7 +2121,18 @@ function CoreTabbedDetail({ tabs, activeTab, onTabChange, parent, formFields, re
 
 // src/components/internal/CoreDetailModal.tsx
 import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
-function CoreDetailModal({ model, title, config, recordId, initialRecord, initialTab, relations, onClose, onSaved }) {
+function CoreDetailModal({
+  model,
+  title,
+  config,
+  formFields,
+  recordId,
+  initialRecord,
+  initialTab,
+  relations,
+  onClose,
+  onSaved
+}) {
   const schemaQuery = useModelSchema(model);
   const schema = schemaQuery.data;
   const resource = useOonResource(schema?.basePath ?? `/${model.toLowerCase()}s`);
@@ -1948,11 +2140,18 @@ function CoreDetailModal({ model, title, config, recordId, initialRecord, initia
   const [parent, setParent] = useState9(initialRecord);
   const [activeTab, setActiveTab] = useState9(initialTab ?? config.defaultTab ?? config.tabs[0]?.id ?? "dados");
   const [refreshTokens, setRefreshTokens] = useState9({});
-  const parentQuery = useQuery6({ queryKey: ["oon", "detail", model, recordId], enabled: !!recordId, queryFn: () => resource.get(recordId) });
+  const parentQuery = useQuery6({
+    queryKey: ["oon", "detail", model, recordId],
+    enabled: !!recordId,
+    queryFn: () => resource.get(recordId)
+  });
   useEffect6(() => {
     if (parentQuery.data) setParent(parentQuery.data);
   }, [parentQuery.data]);
-  const formFields = useMemo6(() => schema ? formFieldsFromMeta(schema.fields) : [], [schema]);
+  const resolvedFormFields = useMemo7(
+    () => formFields?.length ? formFields : schema ? formFieldsFromMeta(schema.fields) : [],
+    [formFields, schema]
+  );
   const refresh = (targets) => {
     const list = targets?.length ? targets : ["self"];
     if (list.includes("parent") || list.includes("all")) {
@@ -1962,8 +2161,14 @@ function CoreDetailModal({ model, title, config, recordId, initialRecord, initia
     setRefreshTokens((current) => {
       const next = { ...current };
       for (const target of list) {
-        if (target === "all") config.tabs.forEach((tab) => next[tab.id] = (next[tab.id] ?? 0) + 1);
-        else if (target !== "parent") next[target === "self" ? activeTab : target] = (next[target === "self" ? activeTab : target] ?? 0) + 1;
+        if (target === "all") {
+          config.tabs.forEach((tab) => {
+            next[tab.id] = (next[tab.id] ?? 0) + 1;
+          });
+        } else if (target !== "parent") {
+          const tabId = target === "self" ? activeTab : target;
+          next[tabId] = (next[tabId] ?? 0) + 1;
+        }
       }
       return next;
     });
@@ -1978,11 +2183,25 @@ function CoreDetailModal({ model, title, config, recordId, initialRecord, initia
       ] }),
       /* @__PURE__ */ jsx15(Button8, { onClick: onClose, children: "Fechar" })
     ] }),
-    /* @__PURE__ */ jsx15(Box8, { maxH: "calc(94vh - 73px)", p: "20px", overflowY: "auto", children: schemaQuery.isLoading || parentQuery.isLoading ? /* @__PURE__ */ jsx15(Text10, { children: "Carregando..." }) : /* @__PURE__ */ jsx15(CoreTabbedDetail, { tabs: config.tabs, activeTab, onTabChange: setActiveTab, parent, formFields, resource, relations, refreshTokens, onRefresh: refresh, onParentSaved: (saved) => {
-      setParent(saved);
-      onSaved?.();
-      refresh(["parent"]);
-    } }) })
+    /* @__PURE__ */ jsx15(Box8, { maxH: "calc(94vh - 73px)", p: "20px", overflowY: "auto", children: schemaQuery.isLoading || parentQuery.isLoading ? /* @__PURE__ */ jsx15(Text10, { children: "Carregando..." }) : /* @__PURE__ */ jsx15(
+      CoreTabbedDetail,
+      {
+        tabs: config.tabs,
+        activeTab,
+        onTabChange: setActiveTab,
+        parent,
+        formFields: resolvedFormFields,
+        resource,
+        relations,
+        refreshTokens,
+        onRefresh: refresh,
+        onParentSaved: (saved) => {
+          setParent(saved);
+          onSaved?.();
+          refresh(["parent"]);
+        }
+      }
+    ) })
   ] }) });
 }
 
@@ -2098,6 +2317,7 @@ function CoreCollection({ model, label, section = "Cole\xE7\xE3o", mode = "dynam
         model,
         title,
         config: detailModal,
+        formFields: resolvedForm,
         recordId: detailState.row?._id,
         initialRecord: detailState.row,
         initialTab: detailState.initialTab,
@@ -3528,7 +3748,7 @@ function localLoginUrl() {
   return `/login?redirect=${encodeURIComponent(current)}`;
 }
 function OonApp({ config }) {
-  const { http, storage, router } = useMemo7(() => {
+  const { http, storage, router } = useMemo8(() => {
     const storage2 = createTokenStorage(config.app.id);
     const externalLoginUrl = config.auth?.loginUrl ?? config.api.meusAppsUrl;
     const http2 = createRestClient({