@oondemand/oon-core-front 0.3.35 → 0.3.36

package/dist/index.js

@@ -2979,7 +2979,7 @@ function CoreDocument({ model, label, endpoint, columns, form }) {
 }
 
 // src/components/CorePipeline.tsx
-import { useState as useState11 } from "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";
 
@@ -3108,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) {
@@ -3131,6 +3144,10 @@ function workStatusColor(value) {
   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,
@@ -3206,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)
   );
@@ -3214,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] }),
@@ -3270,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,
     {
@@ -3345,69 +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(
-            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__ */ 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,
       {
@@ -4212,7 +4328,7 @@ function LoginPage({ app }) {
 }
 
 // src/security/ActivationPage.tsx
-import { useEffect as useEffect7, useState as useState13 } from "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) {
@@ -4239,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 || {});
@@ -4247,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");
     }