@oondemand/oon-core-front 0.3.34 → 0.3.36

package/dist/index.js

@@ -1833,7 +1833,7 @@ function DynamicForm({ title, eyebrow = "Cadastro", fields, initialValues, submi
 
 // src/components/internal/CoreDetailModal.tsx
 import { useEffect as useEffect6, useMemo as useMemo7, useState as useState9 } from "react";
-import { Box as Box8, Flex as Flex7, Heading as Heading3, IconButton, Text as Text10 } from "@chakra-ui/react";
+import { Box as Box8, 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";
 
 // src/components/internal/CoreTabbedDetail.tsx
@@ -2024,6 +2024,8 @@ function CoreRowAction({ action, row, parent, onOpenDetail, onRefresh, onUpdate
   const [formInitialValues, setFormInitialValues] = useState6({});
   const pipelineAction = action;
   const tone = pipelineAction.tone ? ACTION_TONES[pipelineAction.tone] : void 0;
+  const isWorkStatus = pipelineAction.group === "workStatus";
+  const isSelected = isWorkStatus && !!pipelineAction.field && row[pipelineAction.field] === pipelineAction.value;
   if (evaluateCondition(action.hiddenWhen, row)) return null;
   const disabled = evaluateCondition(action.disabledWhen, row) || loading;
   const confirmAction = () => action.confirm ? window.confirm(action.confirm.description ?? action.confirm.title ?? `Executar ${action.label}?`) : true;
@@ -2082,27 +2084,32 @@ function CoreRowAction({ action, row, parent, onOpenDetail, onRefresh, onUpdate
     }
   };
   return /* @__PURE__ */ jsxs8("span", { style: { display: "inline-flex", flexDirection: "column" }, children: [
-    /* @__PURE__ */ jsx12(
+    /* @__PURE__ */ jsxs8(
       Button5,
       {
         type: "button",
         size: "xs",
-        minH: "28px",
-        px: "9px",
-        borderRadius: "6px",
+        minH: isWorkStatus ? "32px" : "28px",
+        px: isWorkStatus ? "12px" : "9px",
+        borderRadius: isWorkStatus ? "full" : "6px",
         fontSize: "10px",
         fontWeight: "700",
         variant: tone ? "outline" : void 0,
-        bg: tone?.bg,
+        bg: isWorkStatus && !isSelected ? "white" : tone?.bg,
         color: tone?.color,
-        borderColor: tone?.border,
-        boxShadow: tone ? "none" : void 0,
+        borderColor: isSelected ? tone?.color : tone?.border,
+        borderWidth: isSelected ? "2px" : "1px",
+        boxShadow: isSelected ? `0 0 0 3px ${tone?.border ?? "#E2E8F0"}` : tone ? "none" : void 0,
+        "aria-pressed": isWorkStatus ? isSelected : void 0,
         loading,
         disabled,
         onClick: run,
         _hover: tone ? { bg: tone.hover, borderColor: tone.border } : void 0,
-        _disabled: tone ? { opacity: 0.55, cursor: "not-allowed" } : void 0,
-        children: action.label
+        _disabled: tone ? { opacity: isSelected ? 1 : 0.55, cursor: "not-allowed" } : void 0,
+        children: [
+          isWorkStatus ? /* @__PURE__ */ jsx12("span", { "aria-hidden": "true", style: { width: 8, height: 8, display: "inline-block", marginRight: 7, borderRadius: "999px", background: tone?.color ?? "#64748B", boxShadow: isSelected ? "0 0 0 2px rgba(255,255,255,.9)" : "none" } }) : null,
+          action.label
+        ]
       }
     ),
     error ? /* @__PURE__ */ jsx12(Text7, { mt: "3px", color: "#B42318", fontSize: "9px", children: messageOf2(error) }) : null,
@@ -2541,7 +2548,9 @@ function InlineParentForm({
   groups,
   parent,
   resource,
-  onSaved
+  onSaved,
+  formId,
+  externalSubmit = false
 }) {
   const fields = rawFields;
   const [values, setValues] = useState8({});
@@ -2605,6 +2614,7 @@ function InlineParentForm({
   return /* @__PURE__ */ jsx14(
     "form",
     {
+      id: formId,
       noValidate: true,
       onSubmit: async (event) => {
         event.preventDefault();
@@ -2633,7 +2643,7 @@ function InlineParentForm({
       children: /* @__PURE__ */ jsxs10(Stack3, { gap: "16px", children: [
         error ? /* @__PURE__ */ jsx14(Box7, { role: "alert", p: "10px 12px", color: "#B42318", bg: "#FEF3F2", borderWidth: "1px", borderColor: "#FECDCA", borderRadius: "7px", fontSize: "11px", children: messageOf3(error) }) : null,
         renderFields(),
-        /* @__PURE__ */ jsx14(Flex6, { justify: "flex-end", children: /* @__PURE__ */ jsx14(Button7, { type: "submit", colorPalette: "brand", loading: saving, children: "Salvar dados principais" }) })
+        !externalSubmit ? /* @__PURE__ */ jsx14(Flex6, { justify: "flex-end", children: /* @__PURE__ */ jsx14(Button7, { type: "submit", colorPalette: "brand", loading: saving, children: "Salvar dados principais" }) }) : null
       ] })
     }
   );
@@ -2648,7 +2658,9 @@ function CoreTabbedDetail({
   relations,
   refreshTokens,
   onRefresh,
-  onParentSaved
+  onParentSaved,
+  formId,
+  externalSubmit
 }) {
   const active = tabs.find((tab) => tab.id === activeTab) ?? tabs[0];
   return /* @__PURE__ */ jsxs10(Stack3, { gap: 4, children: [
@@ -2674,7 +2686,9 @@ function CoreTabbedDetail({
         groups: active.groups,
         parent: parent ?? {},
         resource,
-        onSaved: onParentSaved
+        onSaved: onParentSaved,
+        formId,
+        externalSubmit
       }
     ) : (active.type === "relatedGrid" || active.type === "readonlyGrid") && parent ? /* @__PURE__ */ jsx14(
       CoreRelatedGrid,
@@ -2703,7 +2717,8 @@ function CoreDetailModal({
   initialRecord,
   initialTab,
   relations,
-  actions,
+  topActions,
+  bottomActions,
   onClose,
   onSaved
 }) {
@@ -2748,14 +2763,16 @@ 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;
-  return /* @__PURE__ */ jsx15(Flex7, { position: "fixed", inset: 0, zIndex: 1e3, align: "center", justify: "center", p: 4, bg: "rgba(15,23,42,.48)", children: /* @__PURE__ */ jsxs11(Box8, { role: "dialog", "aria-modal": "true", w: `min(${width}, 98vw)`, maxH: "94vh", overflow: "hidden", bg: "white", borderRadius: "14px", boxShadow: "0 24px 70px rgba(15,23,42,.24)", children: [
+  const activeIsForm = (config.tabs.find((tab) => tab.id === activeTab) ?? config.tabs[0])?.type === "form";
+  const formId = `oon-detail-form-${model.replace(/[^a-zA-Z0-9_-]/g, "-")}`;
+  return /* @__PURE__ */ jsx15(Flex7, { position: "fixed", inset: 0, zIndex: 1e3, align: "center", justify: "center", p: 4, bg: "rgba(15,23,42,.48)", children: /* @__PURE__ */ jsxs11(Box8, { 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(Box8, { minW: "160px", children: [
         /* @__PURE__ */ jsx15(Text10, { color: "#0474AF", fontSize: "10px", fontWeight: "700", textTransform: "uppercase", children: "Detalhe" }),
         /* @__PURE__ */ jsx15(Heading3, { size: "md", children: recordId ? displayTitle : `Novo ${title}` })
       ] }),
       /* @__PURE__ */ jsxs11(Flex7, { flex: "1", align: "center", justify: "flex-end", gap: "8px", wrap: "wrap", children: [
-        recordId ? actions : null,
+        recordId ? topActions : null,
         /* @__PURE__ */ jsx15(
           IconButton,
           {
@@ -2777,7 +2794,7 @@ function CoreDetailModal({
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsx15(Box8, { maxH: "calc(94vh - 73px)", p: "20px", overflowY: "auto", children: schemaQuery.isLoading || parentQuery.isLoading ? /* @__PURE__ */ jsx15(Text10, { children: "Carregando..." }) : /* @__PURE__ */ jsx15(
+    /* @__PURE__ */ jsx15(Box8, { flex: "1", minH: 0, p: "20px", overflowY: "auto", children: schemaQuery.isLoading || parentQuery.isLoading ? /* @__PURE__ */ jsx15(Text10, { children: "Carregando..." }) : /* @__PURE__ */ jsx15(
       CoreTabbedDetail,
       {
         tabs: config.tabs,
@@ -2789,13 +2806,35 @@ function CoreDetailModal({
         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__ */ jsx15(Box8, { children: recordId ? bottomActions : null }),
+          /* @__PURE__ */ jsx15(Button8, { type: "submit", form: formId, colorPalette: "brand", disabled: !activeIsForm || schemaQuery.isLoading || parentQuery.isLoading, children: "Salvar" })
+        ]
+      }
+    )
   ] }) });
 }
 
@@ -2940,8 +2979,8 @@ function CoreDocument({ model, label, endpoint, columns, form }) {
 }
 
 // src/components/CorePipeline.tsx
-import { useState as useState11 } from "react";
-import { Badge as Badge4, Box as Box10, Button as Button8, Flex as Flex8, Heading as Heading5, Input as Input6, NativeSelect as NativeSelect5, Stack as Stack5, Text as Text12 } from "@chakra-ui/react";
+import { useEffect as useEffect7, useRef as useRef2, useState as useState11 } from "react";
+import { Badge as Badge4, Box as Box10, 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";
 
 // src/pipelineTicket.ts
@@ -3069,6 +3108,19 @@ function groupPipelineActions(actions) {
   };
 }
 
+// src/components/internal/pipelineBoardScroll.ts
+var EDGE_TOLERANCE = 2;
+function resolveHorizontalScrollState(metrics) {
+  const maxScrollLeft = Math.max(0, metrics.scrollWidth - metrics.clientWidth);
+  return {
+    canScrollLeft: metrics.scrollLeft > EDGE_TOLERANCE,
+    canScrollRight: metrics.scrollLeft < maxScrollLeft - EDGE_TOLERANCE
+  };
+}
+function pipelineBoardScrollStep(clientWidth) {
+  return Math.max(280, Math.round(clientWidth * 0.75));
+}
+
 // src/components/CorePipeline.tsx
 import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
 function ticketId(row) {
@@ -3085,6 +3137,17 @@ function mergeFormFields2(metadataFields, overrides) {
   });
   return merged;
 }
+function workStatusColor(value) {
+  const normalized2 = String(value ?? "").normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase();
+  if (/aguardando.*inicio|nao.*iniciado|waiting/.test(normalized2)) return "#D97706";
+  if (/trabalhando|em.*andamento|working/.test(normalized2)) return "#16A34A";
+  if (/revisar|revisao|review/.test(normalized2)) return "#DC2626";
+  return "#94A3B8";
+}
+function PipelineArrowIcon({ direction }) {
+  const path = direction === "left" ? "M12.5 5 7.5 10l5 5" : "m7.5 5 5 5-5 5";
+  return /* @__PURE__ */ jsx18("svg", { viewBox: "0 0 20 20", width: "18", height: "18", "aria-hidden": "true", children: /* @__PURE__ */ jsx18("path", { d: path, fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) });
+}
 function PipelineFilterControl({
   filter,
   value,
@@ -3160,6 +3223,8 @@ function CorePipeline({
   const [selectedTicket, setSelectedTicket] = useState11(null);
   const [creating, setCreating] = useState11(false);
   const [formError, setFormError] = useState11(null);
+  const boardRef = useRef2(null);
+  const [boardScrollState, setBoardScrollState] = useState11({ canScrollLeft: false, canScrollRight: false });
   const effectiveFilters = Object.fromEntries(
     Object.entries(filterValues).filter(([, value]) => value !== "" && value != null)
   );
@@ -3168,6 +3233,23 @@ function CorePipeline({
     queryFn: () => resource.list({ pageSize: 200, ...effectiveFilters }),
     enabled: !!schema && viewMode === "board"
   });
+  useEffect7(() => {
+    if (viewMode !== "board") return void 0;
+    const board = boardRef.current;
+    if (!board) return void 0;
+    const sync = () => setBoardScrollState(resolveHorizontalScrollState(board));
+    sync();
+    board.addEventListener("scroll", sync, { passive: true });
+    window.addEventListener("resize", sync);
+    const resizeObserver = typeof ResizeObserver !== "undefined" ? new ResizeObserver(sync) : void 0;
+    resizeObserver?.observe(board);
+    Array.from(board.children).forEach((child) => resizeObserver?.observe(child));
+    return () => {
+      board.removeEventListener("scroll", sync);
+      window.removeEventListener("resize", sync);
+      resizeObserver?.disconnect();
+    };
+  }, [viewMode, listQuery.data?.results?.length, stages?.length, schema?.fields.length]);
   const invalidate = async () => {
     await Promise.all([
       queryClient.invalidateQueries({ queryKey: ["oon", "pipeline", basePath] }),
@@ -3224,6 +3306,12 @@ function CorePipeline({
       ...defaultStage ? { [stageField]: defaultStage } : {}
     });
   };
+  const scrollBoard = (direction) => {
+    const board = boardRef.current;
+    if (!board) return;
+    const step = pipelineBoardScrollStep(board.clientWidth);
+    board.scrollBy({ left: direction === "left" ? -step : step, behavior: "smooth" });
+  };
   const renderModalAction = (action, index) => selectedTicket ? /* @__PURE__ */ jsx18(
     CoreRowAction,
     {
@@ -3243,38 +3331,10 @@ function CorePipeline({
     },
     action.id ?? `${action.label}-${index}`
   ) : null;
-  const modalActions = selectedTicket && !creating ? /* @__PURE__ */ jsxs13(Flex8, { gap: "8px", align: "center", justify: "flex-end", wrap: "wrap", children: [
-    groupedTicketActions.approval.length ? /* @__PURE__ */ jsx18(
-      Flex8,
-      {
-        role: "group",
-        "aria-label": "Aprova\xE7\xE3o do ticket",
-        gap: "4px",
-        align: "center",
-        p: "3px",
-        bg: "#F8FAFC",
-        borderWidth: "1px",
-        borderColor: "#E2E8F0",
-        borderRadius: "9px",
-        children: groupedTicketActions.approval.map(renderModalAction)
-      }
-    ) : null,
-    groupedTicketActions.workStatus.length ? /* @__PURE__ */ jsx18(
-      Flex8,
-      {
-        role: "group",
-        "aria-label": "Status de trabalho",
-        gap: "4px",
-        align: "center",
-        p: "3px",
-        bg: "#F8FAFC",
-        borderWidth: "1px",
-        borderColor: "#E2E8F0",
-        borderRadius: "9px",
-        children: groupedTicketActions.workStatus.map(renderModalAction)
-      }
-    ) : null,
-    groupedTicketActions.custom.length ? /* @__PURE__ */ jsx18(Flex8, { role: "group", "aria-label": "Outras a\xE7\xF5es", gap: "4px", align: "center", wrap: "wrap", children: groupedTicketActions.custom.map(renderModalAction) }) : null
+  const modalTopActions = selectedTicket && !creating && groupedTicketActions.workStatus.length ? /* @__PURE__ */ jsx18(Flex8, { role: "group", "aria-label": "Status da atividade", gap: "6px", align: "center", wrap: "wrap", children: groupedTicketActions.workStatus.map(renderModalAction) }) : null;
+  const modalBottomActions = selectedTicket && !creating ? /* @__PURE__ */ jsxs13(Flex8, { gap: "8px", align: "center", wrap: "wrap", children: [
+    groupedTicketActions.approval.length ? /* @__PURE__ */ jsx18(Flex8, { role: "group", "aria-label": "Aprova\xE7\xE3o do ticket", gap: "6px", align: "center", wrap: "wrap", children: groupedTicketActions.approval.map(renderModalAction) }) : null,
+    groupedTicketActions.custom.length ? /* @__PURE__ */ jsx18(Flex8, { role: "group", "aria-label": "A\xE7\xF5es do neg\xF3cio", gap: "6px", align: "center", wrap: "wrap", children: groupedTicketActions.custom.map(renderModalAction) }) : null
   ] }) : null;
   return /* @__PURE__ */ jsxs13(Stack5, { gap: 5, children: [
     /* @__PURE__ */ jsxs13(Flex8, { align: { base: "stretch", md: "flex-end" }, justify: "space-between", gap: 4, direction: { base: "column", md: "row" }, children: [
@@ -3284,8 +3344,8 @@ function CorePipeline({
         /* @__PURE__ */ jsx18(Text12, { mt: 1, fontSize: "13px", color: "gray.500", children: "Acompanhe os tickets por etapa e visualize os principais dados de cada item." })
       ] }),
       /* @__PURE__ */ jsxs13(Flex8, { gap: "8px", align: "center", wrap: "wrap", children: [
-        allowedViewModes.length > 1 ? allowedViewModes.map((mode) => /* @__PURE__ */ jsx18(Button8, { size: "sm", variant: viewMode === mode ? "solid" : "outline", colorPalette: "brand", onClick: () => setViewMode(mode), children: mode === "board" ? "Quadro" : "Lista" }, mode)) : null,
-        create?.enabled ? /* @__PURE__ */ jsx18(Button8, { size: "sm", colorPalette: "brand", onClick: openCreate, children: create.label ?? "Novo ticket" }) : null
+        allowedViewModes.length > 1 ? allowedViewModes.map((mode) => /* @__PURE__ */ jsx18(Button9, { size: "sm", variant: viewMode === mode ? "solid" : "outline", colorPalette: "brand", onClick: () => setViewMode(mode), children: mode === "board" ? "Quadro" : "Lista" }, mode)) : null,
+        create?.enabled ? /* @__PURE__ */ jsx18(Button9, { size: "sm", colorPalette: "brand", onClick: openCreate, children: create.label ?? "Novo ticket" }) : null
       ] })
     ] }),
     filters.length ? /* @__PURE__ */ jsxs13(Flex8, { p: "12px", gap: "10px", align: "flex-end", wrap: "wrap", bg: "white", borderWidth: "1px", borderColor: "#E5E9ED", borderRadius: "10px", children: [
@@ -3305,7 +3365,7 @@ function CorePipeline({
         ] }, filter.field);
       }),
       /* @__PURE__ */ jsx18(
-        Button8,
+        Button9,
         {
           size: "sm",
           variant: "outline",
@@ -3327,52 +3387,143 @@ function CorePipeline({
           setSelectedTicket(row);
         }
       }
-    ) : /* @__PURE__ */ jsx18(Flex8, { gap: 4, align: "stretch", overflowX: "auto", pb: 3, minH: "420px", children: Array.from(byStage.entries()).map(([stageId, items]) => {
-      const stageLabel = resolvedStages.find((stage) => stage.id === stageId)?.label ?? (stageId || "Sem etapa");
-      return /* @__PURE__ */ jsxs13(Box10, { minW: "300px", maxW: "340px", flex: "1 0 300px", bg: "#E8ECEF", borderRadius: "12px", p: 3, borderWidth: "1px", borderColor: "#DDE3E7", children: [
-        /* @__PURE__ */ jsxs13(Flex8, { align: "center", justify: "space-between", mb: 3, px: 1, children: [
-          /* @__PURE__ */ jsx18(Text12, { fontWeight: "700", fontSize: "12px", color: "#33434C", textTransform: "uppercase", letterSpacing: "0.03em", children: stageLabel }),
-          /* @__PURE__ */ jsx18(Badge4, { colorPalette: "brand", variant: "solid", borderRadius: "full", minW: "24px", justifyContent: "center", children: items.length })
-        ] }),
-        /* @__PURE__ */ jsx18(Stack5, { gap: 2, children: items.length === 0 ? /* @__PURE__ */ jsx18(Box10, { borderWidth: "1px", borderStyle: "dashed", borderColor: "#C8D0D5", borderRadius: "10px", p: 5, textAlign: "center", children: /* @__PURE__ */ jsx18(Text12, { fontSize: "12px", color: "gray.500", children: "Nenhum ticket nesta etapa." }) }) : items.map((row, index) => {
-          const ticketTitle = formatCell(row[resolvedTitleField], "string");
-          return /* @__PURE__ */ jsxs13(
-            Button8,
-            {
-              type: "button",
-              variant: "plain",
-              display: "block",
-              w: "100%",
-              h: "auto",
-              minH: "auto",
-              p: 3,
-              bg: "white",
-              borderRadius: "10px",
-              borderWidth: "1px",
-              borderColor: "#DDE3E7",
-              boxShadow: "0 3px 10px rgba(7, 38, 46, 0.05)",
-              textAlign: "left",
-              whiteSpace: "normal",
-              "aria-label": `Abrir ticket ${ticketTitle}`,
-              onClick: () => {
-                setFormError(null);
-                setCreating(false);
-                setSelectedTicket(row);
-              },
-              _hover: { borderColor: "brand.300", transform: "translateY(-1px)", boxShadow: "0 7px 18px rgba(7, 38, 46, 0.09)" },
-              children: [
-                /* @__PURE__ */ jsx18(Text12, { fontSize: "13px", fontWeight: "700", color: "#24323A", mb: 2, lineClamp: 2, children: ticketTitle }),
-                /* @__PURE__ */ jsx18(Stack5, { gap: 1, children: detailFields.map((field) => /* @__PURE__ */ jsxs13(Flex8, { gap: 2, align: "baseline", justify: "space-between", children: [
-                  /* @__PURE__ */ jsx18(Text12, { fontSize: "10px", color: "gray.500", textTransform: "uppercase", letterSpacing: "0.03em", children: fieldLabel(field) }),
-                  /* @__PURE__ */ jsx18(Text12, { fontSize: "11px", color: "#46545C", fontWeight: "500", textAlign: "right", lineClamp: 1, children: formatCell(row[field.name], field.kind) })
-                ] }, field.name)) })
-              ]
-            },
-            ticketId(row) ?? index
-          );
-        }) })
-      ] }, stageId);
-    }) }),
+    ) : /* @__PURE__ */ jsxs13(Box10, { position: "relative", children: [
+      /* @__PURE__ */ jsx18(
+        Flex8,
+        {
+          ref: boardRef,
+          "data-oon-pipeline-board": "true",
+          gap: 4,
+          align: "stretch",
+          overflowX: "auto",
+          overflowY: "auto",
+          h: "clamp(420px, calc(100vh - 250px), 760px)",
+          minH: "420px",
+          pb: "18px",
+          pr: "2px",
+          scrollBehavior: "smooth",
+          scrollbarGutter: "stable both-edges",
+          overscrollBehaviorX: "contain",
+          children: Array.from(byStage.entries()).map(([stageId, items]) => {
+            const stageLabel = resolvedStages.find((stage) => stage.id === stageId)?.label ?? (stageId || "Sem etapa");
+            return /* @__PURE__ */ jsxs13(Box10, { minW: "300px", maxW: "340px", flex: "1 0 300px", bg: "#E8ECEF", borderRadius: "12px", p: 3, borderWidth: "1px", borderColor: "#DDE3E7", children: [
+              /* @__PURE__ */ jsxs13(Flex8, { align: "center", justify: "space-between", mb: 3, px: 1, children: [
+                /* @__PURE__ */ jsx18(Text12, { fontWeight: "700", fontSize: "12px", color: "#33434C", textTransform: "uppercase", letterSpacing: "0.03em", children: stageLabel }),
+                /* @__PURE__ */ jsx18(Badge4, { colorPalette: "brand", variant: "solid", borderRadius: "full", minW: "24px", justifyContent: "center", children: items.length })
+              ] }),
+              /* @__PURE__ */ jsx18(Stack5, { gap: 2, children: items.length === 0 ? /* @__PURE__ */ jsx18(Box10, { borderWidth: "1px", borderStyle: "dashed", borderColor: "#C8D0D5", borderRadius: "10px", p: 5, textAlign: "center", children: /* @__PURE__ */ jsx18(Text12, { fontSize: "12px", color: "gray.500", children: "Nenhum ticket nesta etapa." }) }) : items.map((row, index) => {
+                const ticketTitle = formatCell(row[resolvedTitleField], "string");
+                return /* @__PURE__ */ jsxs13(
+                  Button9,
+                  {
+                    type: "button",
+                    variant: "plain",
+                    display: "block",
+                    w: "100%",
+                    h: "auto",
+                    minH: "auto",
+                    p: 3,
+                    bg: "white",
+                    borderRadius: "10px",
+                    borderWidth: "1px",
+                    borderColor: "#DDE3E7",
+                    boxShadow: "0 3px 10px rgba(7, 38, 46, 0.05)",
+                    textAlign: "left",
+                    whiteSpace: "normal",
+                    "aria-label": `Abrir ticket ${ticketTitle}`,
+                    onClick: () => {
+                      setFormError(null);
+                      setCreating(false);
+                      setSelectedTicket(row);
+                    },
+                    _hover: { borderColor: "brand.300", transform: "translateY(-1px)", boxShadow: "0 7px 18px rgba(7, 38, 46, 0.09)" },
+                    children: [
+                      /* @__PURE__ */ jsxs13(Flex8, { align: "flex-start", justify: "space-between", gap: "8px", mb: 2, children: [
+                        /* @__PURE__ */ jsx18(Text12, { fontSize: "13px", fontWeight: "700", color: "#24323A", lineClamp: 2, children: ticketTitle }),
+                        /* @__PURE__ */ jsx18(
+                          Box10,
+                          {
+                            as: "span",
+                            title: `Status da atividade: ${String(row[workStatusField] ?? "N\xE3o informado")}`,
+                            "aria-label": `Status da atividade: ${String(row[workStatusField] ?? "N\xE3o informado")}`,
+                            flex: "0 0 auto",
+                            w: "10px",
+                            h: "10px",
+                            mt: "4px",
+                            borderRadius: "full",
+                            bg: workStatusColor(row[workStatusField]),
+                            boxShadow: "0 0 0 3px white, 0 0 0 4px #E2E8F0"
+                          }
+                        )
+                      ] }),
+                      /* @__PURE__ */ jsx18(Stack5, { gap: 1, children: detailFields.map((field) => /* @__PURE__ */ jsxs13(Flex8, { gap: 2, align: "baseline", justify: "space-between", children: [
+                        /* @__PURE__ */ jsx18(Text12, { fontSize: "10px", color: "gray.500", textTransform: "uppercase", letterSpacing: "0.03em", children: fieldLabel(field) }),
+                        /* @__PURE__ */ jsx18(Text12, { fontSize: "11px", color: "#46545C", fontWeight: "500", textAlign: "right", lineClamp: 1, children: formatCell(row[field.name], field.kind) })
+                      ] }, field.name)) })
+                    ]
+                  },
+                  ticketId(row) ?? index
+                );
+              }) })
+            ] }, stageId);
+          })
+        }
+      ),
+      /* @__PURE__ */ jsx18(
+        Button9,
+        {
+          type: "button",
+          "aria-label": "Deslizar quadro para a esquerda",
+          title: "Deslizar para a esquerda",
+          position: "absolute",
+          left: "8px",
+          top: "50%",
+          transform: "translateY(-50%)",
+          zIndex: 3,
+          minW: "34px",
+          w: "34px",
+          h: "34px",
+          p: 0,
+          borderRadius: "full",
+          variant: "outline",
+          bg: "rgba(255,255,255,.96)",
+          borderColor: "#CBD5E1",
+          boxShadow: "0 5px 16px rgba(15,23,42,.16)",
+          disabled: !boardScrollState.canScrollLeft,
+          onClick: () => scrollBoard("left"),
+          _hover: { bg: "white", borderColor: "brand.400" },
+          _disabled: { opacity: 0.25, cursor: "not-allowed" },
+          children: /* @__PURE__ */ jsx18(PipelineArrowIcon, { direction: "left" })
+        }
+      ),
+      /* @__PURE__ */ jsx18(
+        Button9,
+        {
+          type: "button",
+          "aria-label": "Deslizar quadro para a direita",
+          title: "Deslizar para a direita",
+          position: "absolute",
+          right: "8px",
+          top: "50%",
+          transform: "translateY(-50%)",
+          zIndex: 3,
+          minW: "34px",
+          w: "34px",
+          h: "34px",
+          p: 0,
+          borderRadius: "full",
+          variant: "outline",
+          bg: "rgba(255,255,255,.96)",
+          borderColor: "#CBD5E1",
+          boxShadow: "0 5px 16px rgba(15,23,42,.16)",
+          disabled: !boardScrollState.canScrollRight,
+          onClick: () => scrollBoard("right"),
+          _hover: { bg: "white", borderColor: "brand.400" },
+          _disabled: { opacity: 0.25, cursor: "not-allowed" },
+          children: /* @__PURE__ */ jsx18(PipelineArrowIcon, { direction: "right" })
+        }
+      )
+    ] }),
     selectedTicket && ticketModal && ticketModal.enabled !== false ? /* @__PURE__ */ jsx18(
       CoreDetailModal,
       {
@@ -3384,7 +3535,8 @@ function CorePipeline({
         initialRecord: selectedTicket,
         initialTab: creating ? create?.initialTab : void 0,
         relations,
-        actions: modalActions,
+        topActions: modalTopActions,
+        bottomActions: modalBottomActions,
         onClose: () => {
           setSelectedTicket(null);
           setCreating(false);
@@ -3516,7 +3668,7 @@ function MissingRenderer({ renderer, children }) {
 }
 
 // src/components/ui-v2/CorePrimitives.tsx
-import { Box as Box13, Button as Button9, Flex as Flex9, Heading as Heading7, Spinner as Spinner3, Text as Text15 } from "@chakra-ui/react";
+import { Box as Box13, Button as Button10, Flex as Flex9, Heading as Heading7, Spinner as Spinner3, Text as Text15 } from "@chakra-ui/react";
 import { jsx as jsx22, jsxs as jsxs16 } from "react/jsx-runtime";
 function CorePage({ children }) {
   return /* @__PURE__ */ jsx22(Box13, { children });
@@ -3557,7 +3709,7 @@ function CoreActions({ children }) {
 function CoreEmptyState({ title = "Nenhum dado encontrado", actionLabel, onAction }) {
   return /* @__PURE__ */ jsxs16(Box13, { textAlign: "center", py: 10, children: [
     /* @__PURE__ */ jsx22(Text15, { children: title }),
-    actionLabel ? /* @__PURE__ */ jsx22(Button9, { mt: 3, onClick: onAction, children: actionLabel }) : null
+    actionLabel ? /* @__PURE__ */ jsx22(Button10, { mt: 3, onClick: onAction, children: actionLabel }) : null
   ] });
 }
 function CoreLoadingState({ label = "Carregando..." }) {
@@ -3762,7 +3914,7 @@ import {
 } from "react-router-dom";
 
 // src/shell/DefaultShell.tsx
-import { Box as Box16, Button as Button10, Flex as Flex11, Spacer as Spacer2, Text as Text18 } from "@chakra-ui/react";
+import { Box as Box16, Button as Button11, Flex as Flex11, Spacer as Spacer2, Text as Text18 } from "@chakra-ui/react";
 import { Outlet } from "react-router-dom";
 
 // src/shell/Sidebar.tsx
@@ -3882,7 +4034,7 @@ function CoreTopbar({ app }) {
         /* @__PURE__ */ jsx26(Text18, { fontSize: "sm", fontWeight: "600", color: "#24323A", children: user.nome }),
         user.email ? /* @__PURE__ */ jsx26(Text18, { fontSize: "xs", color: "gray.500", children: user.email }) : null
       ] }),
-      /* @__PURE__ */ jsx26(Button10, { size: "sm", variant: "outline", colorPalette: "brand", borderRadius: "8px", onClick: logout, children: "Sair" })
+      /* @__PURE__ */ jsx26(Button11, { size: "sm", variant: "outline", colorPalette: "brand", borderRadius: "8px", onClick: logout, children: "Sair" })
     ] }) : null
   ] });
 }
@@ -3926,7 +4078,7 @@ function AuthenticatedLayout({ app, menu, layout, registry }) {
 }
 
 // src/security/AccessDeniedPage.tsx
-import { Box as Box17, Button as Button11, Flex as Flex12, Heading as Heading9, Text as Text19, VStack } from "@chakra-ui/react";
+import { Box as Box17, Button as Button12, Flex as Flex12, Heading as Heading9, Text as Text19, VStack } from "@chakra-ui/react";
 import { useNavigate } from "react-router-dom";
 import { jsx as jsx28, jsxs as jsxs20 } from "react/jsx-runtime";
 function AccessDeniedPage({ app }) {
@@ -3985,7 +4137,7 @@ function AccessDeniedPage({ app }) {
           ] })
         ] }),
         /* @__PURE__ */ jsx28(
-          Button11,
+          Button12,
           {
             alignSelf: "flex-start",
             bg: "#07262E",
@@ -4042,7 +4194,7 @@ function AppAccessGuard({ children }) {
 import { useState as useState12 } from "react";
 import {
   Box as Box18,
-  Button as Button12,
+  Button as Button13,
   Flex as Flex13,
   Heading as Heading10,
   Input as Input7,
@@ -4160,7 +4312,7 @@ function LoginPage({ app }) {
           }
         ) : null,
         /* @__PURE__ */ jsx30(
-          Button12,
+          Button13,
           {
             type: "submit",
             bg: "#07262E",
@@ -4176,8 +4328,8 @@ function LoginPage({ app }) {
 }
 
 // src/security/ActivationPage.tsx
-import { useEffect as useEffect7, useState as useState13 } from "react";
-import { Box as Box19, Button as Button13, Heading as Heading11, Input as Input8, Text as Text21, VStack as VStack3 } from "@chakra-ui/react";
+import { useEffect as useEffect8, useState as useState13 } from "react";
+import { Box as Box19, Button as Button14, Heading as Heading11, Input as Input8, Text as Text21, VStack as VStack3 } from "@chakra-ui/react";
 import { Fragment as Fragment6, jsx as jsx31, jsxs as jsxs22 } from "react/jsx-runtime";
 function encodeBasicCredentials2(email, password) {
   const bytes = new TextEncoder().encode(`${email}:${password}`);
@@ -4203,7 +4355,7 @@ function ActivationPage() {
   const [devResult, setDevResult] = useState13(null);
   const [error, setError] = useState13(null);
   const [submitting, setSubmitting] = useState13(false);
-  useEffect7(() => {
+  useEffect8(() => {
     http.get("/ativacao/configuracao").then((response) => {
       setConfig(response.data);
       setGlobal(response.data.defaults || {});
@@ -4211,7 +4363,7 @@ function ActivationPage() {
       () => setError("N\xE3o foi poss\xEDvel carregar a configura\xE7\xE3o de ativa\xE7\xE3o.")
     );
   }, [http]);
-  useEffect7(() => {
+  useEffect8(() => {
     if (activation.status === "active") {
       window.location.replace("/login");
     }
@@ -4375,7 +4527,7 @@ function ActivationPage() {
         )
       ] }),
       /* @__PURE__ */ jsx31(
-        Button13,
+        Button14,
         {
           colorPalette: "blue",
           onClick: activateDevLocal,
@@ -4385,7 +4537,7 @@ function ActivationPage() {
         }
       ),
       /* @__PURE__ */ jsx31(
-        Button13,
+        Button14,
         {
           variant: "outline",
           onClick: () => setShowCodeFlow(true),
@@ -4466,7 +4618,7 @@ function ActivationPage() {
               )
             ] }),
             /* @__PURE__ */ jsx31(
-              Button13,
+              Button14,
               {
                 colorPalette: "blue",
                 onClick: activateRoot,
@@ -4519,7 +4671,7 @@ function ActivationPage() {
             }
           ),
           /* @__PURE__ */ jsx31(
-            Button13,
+            Button14,
             {
               onClick: validateCode,
               loading: submitting,
@@ -4528,7 +4680,7 @@ function ActivationPage() {
             }
           ),
           isDevelopmentMember ? /* @__PURE__ */ jsx31(
-            Button13,
+            Button14,
             {
               variant: "outline",
               onClick: () => setShowCodeFlow(false),
@@ -4540,22 +4692,22 @@ function ActivationPage() {
         step === 2 && /* @__PURE__ */ jsxs22(Fragment6, { children: [
           /* @__PURE__ */ jsx31(Heading11, { size: "md", children: "Confirma\xE7\xE3o" }),
           /* @__PURE__ */ jsx31("pre", { children: JSON.stringify(preview, null, 2) }),
-          /* @__PURE__ */ jsx31(Button13, { onClick: () => setStep(3), children: "Continuar" })
+          /* @__PURE__ */ jsx31(Button14, { onClick: () => setStep(3), children: "Continuar" })
         ] }),
         step === 3 && /* @__PURE__ */ jsxs22(Fragment6, { children: [
           config.globalFields.map(
             (field) => renderField(field, global, setGlobal)
           ),
-          /* @__PURE__ */ jsx31(Button13, { onClick: () => setStep(4), children: "Continuar" })
+          /* @__PURE__ */ jsx31(Button14, { onClick: () => setStep(4), children: "Continuar" })
         ] }),
         step === 4 && /* @__PURE__ */ jsxs22(Fragment6, { children: [
           config.appFields.length ? config.appFields.map((field) => renderField(field, app, setApp)) : /* @__PURE__ */ jsx31(Text21, { children: "Nenhum par\xE2metro adicional declarado." }),
-          /* @__PURE__ */ jsx31(Button13, { onClick: () => setStep(5), children: "Revisar" })
+          /* @__PURE__ */ jsx31(Button14, { onClick: () => setStep(5), children: "Revisar" })
         ] }),
         step === 5 && /* @__PURE__ */ jsxs22(Fragment6, { children: [
           /* @__PURE__ */ jsx31(Text21, { children: "Ao confirmar, o c\xF3digo ser\xE1 consumido e a inst\xE2ncia ser\xE1 registrada no Ecossistema Oon." }),
           /* @__PURE__ */ jsx31(
-            Button13,
+            Button14,
             {
               colorPalette: "blue",
               onClick: completeMemberActivation,
@@ -4896,7 +5048,7 @@ function defineOonModule(mod) {
 }
 
 // src/components/CoreIntegration.tsx
-import { Badge as Badge5, Box as Box20, Button as Button14, Flex as Flex14, Heading as Heading12, Stack as Stack9, Text as Text22 } from "@chakra-ui/react";
+import { Badge as Badge5, Box as Box20, Button as Button15, Flex as Flex14, Heading as Heading12, Stack as Stack9, Text as Text22 } from "@chakra-ui/react";
 import { useMutation as useMutation4 } from "@tanstack/react-query";
 import { jsx as jsx37, jsxs as jsxs23 } from "react/jsx-runtime";
 function CoreIntegration({ label = "Integra\xE7\xF5es" }) {
@@ -4911,7 +5063,7 @@ function CoreIntegration({ label = "Integra\xE7\xF5es" }) {
   return /* @__PURE__ */ jsxs23(Stack9, { gap: 6, children: [
     /* @__PURE__ */ jsxs23(Flex14, { align: "center", justify: "space-between", children: [
       /* @__PURE__ */ jsx37(Heading12, { size: "lg", children: label }),
-      /* @__PURE__ */ jsx37(Button14, { size: "sm", variant: "outline", loading: reprocess.isPending, onClick: () => reprocess.mutate(), children: "Reprocessar ativos" })
+      /* @__PURE__ */ jsx37(Button15, { size: "sm", variant: "outline", loading: reprocess.isPending, onClick: () => reprocess.mutate(), children: "Reprocessar ativos" })
     ] }),
     /* @__PURE__ */ jsx37(Stack9, { gap: 3, children: integrations.length === 0 ? /* @__PURE__ */ jsx37(Text22, { color: "gray.400", children: "Nenhuma integra\xE7\xE3o declarada." }) : integrations.map((it, idx) => /* @__PURE__ */ jsx37(
       Box20,
@@ -4932,7 +5084,7 @@ function CoreIntegration({ label = "Integra\xE7\xF5es" }) {
 }
 
 // src/components/CoreCurrency.tsx
-import { Button as Button15, Flex as Flex15, Heading as Heading13, Stack as Stack10, Text as Text23 } from "@chakra-ui/react";
+import { Button as Button16, Flex as Flex15, Heading as Heading13, Stack as Stack10, Text as Text23 } from "@chakra-ui/react";
 import { useMutation as useMutation5, useQueryClient as useQueryClient5 } from "@tanstack/react-query";
 import { jsx as jsx38, jsxs as jsxs24 } from "react/jsx-runtime";
 function CoreCurrency({ model = "Moeda", label = "Multi-moedas", endpoint = "/moedas", columns }) {
@@ -4945,7 +5097,7 @@ function CoreCurrency({ model = "Moeda", label = "Multi-moedas", endpoint = "/mo
   return /* @__PURE__ */ jsxs24(Stack10, { gap: 6, children: [
     /* @__PURE__ */ jsxs24(Flex15, { align: "center", justify: "space-between", children: [
       /* @__PURE__ */ jsx38(Heading13, { size: "lg", children: label }),
-      /* @__PURE__ */ jsx38(Button15, { size: "sm", colorPalette: "blue", loading: updateRates.isPending, onClick: () => updateRates.mutate(), children: "Atualizar cota\xE7\xF5es" })
+      /* @__PURE__ */ jsx38(Button16, { size: "sm", colorPalette: "blue", loading: updateRates.isPending, onClick: () => updateRates.mutate(), children: "Atualizar cota\xE7\xF5es" })
     ] }),
     updateRates.isError ? /* @__PURE__ */ jsx38(Text23, { fontSize: "sm", color: "red.600", children: updateRates.error?.message }) : null,
     /* @__PURE__ */ jsx38(CoreCollection, { model, label: "", mode: columns ? "full" : "dynamic", endpoint, columns })
@@ -4954,7 +5106,7 @@ function CoreCurrency({ model = "Moeda", label = "Multi-moedas", endpoint = "/mo
 
 // src/components/CoreAssistant.tsx
 import { useState as useState14 } from "react";
-import { Box as Box21, Button as Button16, Flex as Flex16, Heading as Heading14, Input as Input9, Stack as Stack11, Text as Text24 } from "@chakra-ui/react";
+import { Box as Box21, Button as Button17, Flex as Flex16, Heading as Heading14, Input as Input9, Stack as Stack11, Text as Text24 } from "@chakra-ui/react";
 import { useMutation as useMutation6 } from "@tanstack/react-query";
 import { jsx as jsx39, jsxs as jsxs25 } from "react/jsx-runtime";
 function CoreAssistant({ assistantCode, label = "Assistente", entity, endpoint = "/assistant-runs" }) {
@@ -5017,7 +5169,7 @@ function CoreAssistant({ assistantCode, label = "Assistente", entity, endpoint =
           }
         }
       ),
-      /* @__PURE__ */ jsx39(Button16, { size: "sm", colorPalette: "blue", onClick: send, loading: ask.isPending, children: "Enviar" })
+      /* @__PURE__ */ jsx39(Button17, { size: "sm", colorPalette: "blue", onClick: send, loading: ask.isPending, children: "Enviar" })
     ] })
   ] });
 }