@actionexec/dashboards 0.1.0

package/dist/index.js

@@ -0,0 +1,1082 @@
+import { jsxs as m, jsx as l } from "react/jsx-runtime";
+import { useState as T, useRef as O, useEffect as P, useCallback as F, useMemo as G } from "react";
+import { PieChart as Z, Pie as B, Cell as ee, Tooltip as j, LineChart as te, Line as ae, AreaChart as re, Area as ne, BarChart as le, Bar as se, CartesianGrid as ie, XAxis as ce, YAxis as oe, Legend as de } from "recharts";
+import ue from "react-datepicker";
+class ge extends Error {
+  constructor(t, n, r) {
+    super(t), this.status = n, this.payload = r, this.name = "ApiError";
+  }
+}
+function fe(e) {
+  const { apiUrl: t, token: n, fetch: r = globalThis.fetch } = e, a = e.endpointPrefix ?? "/external/dashboards", s = t.replace(/\/$/, "");
+  async function i(c, g) {
+    const u = new URL(`${s}${a}${c}`);
+    if (g)
+      for (const [d, f] of Object.entries(g)) u.searchParams.set(d, f);
+    const o = await r(u.toString(), {
+      headers: { Authorization: `Bearer ${n}` }
+    });
+    if (!o.ok) {
+      let d;
+      try {
+        d = await o.json();
+      } catch {
+      }
+      throw new ge(
+        `Requisicao falhou (${o.status}) em ${c}`,
+        o.status,
+        d
+      );
+    }
+    return await o.json();
+  }
+  return {
+    layout: () => i("/layout"),
+    render: (c) => i("/render", c)
+  };
+}
+const he = 300;
+function me(e) {
+  const [t, n] = T(null), [r, a] = T(null), [s, i] = T({}), [c, g] = T({}), [u, o] = T(null), [d, f] = T(!0), [v, h] = T(null), p = O(), k = O(!1);
+  P(() => {
+    let y = !1;
+    return e.layout().then((w) => {
+      y || n(w);
+    }).catch((w) => {
+      y || h(w.message);
+    }), () => {
+      y = !0;
+    };
+  }, []), P(() => {
+    if (t)
+      return p.current && clearTimeout(p.current), p.current = setTimeout(() => {
+        const y = pe(s, c);
+        f(!0), e.render(y).then((w) => {
+          a(w), !k.current && w.applied && (k.current = !0, i((N) => ({ ..._e(w.applied), ...N }))), h(null);
+        }).catch((w) => h(w.message)).finally(() => f(!1));
+      }, he), () => {
+        p.current && clearTimeout(p.current);
+      };
+  }, [t, s, c, e]);
+  const $ = F((y, w) => {
+    i((N) => ({ ...N, [y]: w }));
+  }, []), b = F((y, w) => {
+    g((N) => ({ ...N, [y]: w }));
+  }, []), E = F((y) => {
+    o(y);
+  }, []), S = G(
+    () => u ?? (t == null ? void 0 : t.palette) ?? [],
+    [u, t]
+  );
+  return {
+    layout: t,
+    renderData: r,
+    loading: d,
+    error: v,
+    filters: s,
+    variables: c,
+    palette: S,
+    setFilter: $,
+    setVariable: b,
+    setPalette: E
+  };
+}
+function pe(e, t) {
+  const n = {};
+  for (const [r, a] of Object.entries(e))
+    if (a.includes("|")) {
+      const [s, i] = a.split("|");
+      s && (n.f_date_start = s), i && (n.f_date_end = i);
+    } else
+      n[`f_${r}`] = a;
+  for (const [r, a] of Object.entries(t))
+    n[`v_${r}`] = String(a);
+  return n;
+}
+function _e(e) {
+  const t = {};
+  for (const [n, r] of Object.entries(e))
+    if (r && typeof r == "object" && "start" in r) {
+      const a = r;
+      t[n] = `${a.start || ""}|${a.end || ""}`;
+    } else Array.isArray(r) ? t[n] = r.join(",") : typeof r == "string" && (t[n] = r);
+  return t;
+}
+const _ = {
+  series0: 0,
+  series1: 1,
+  series2: 2,
+  series3: 3,
+  series4: 4,
+  bgDark: 5,
+  bgPaper: 6,
+  bgElevated: 7,
+  textPrimary: 8,
+  textMuted: 9,
+  accent: 10,
+  success: 11,
+  error: 12
+}, be = 5, x = 13, ve = {
+  series0: "Série 1",
+  series1: "Série 2",
+  series2: "Série 3",
+  series3: "Série 4",
+  series4: "Série 5",
+  bgDark: "Fundo Escuro",
+  bgPaper: "Fundo Cartão",
+  bgElevated: "Fundo Elevado",
+  textPrimary: "Texto Primário",
+  textMuted: "Texto Secundário",
+  accent: "Destaque",
+  success: "Sucesso",
+  error: "Erro"
+}, M = {
+  action: {
+    label: "Action",
+    colors: [
+      "#ff6b00",
+      "#a3e635",
+      "#e3f544",
+      "#65ffd1",
+      "#ff0404",
+      "#1a1a1a",
+      "#262626",
+      "#333333",
+      "#f5f5f5",
+      "#999999",
+      "#ff6b00",
+      "#a3e635",
+      "#ef4444"
+    ]
+  },
+  westCoast: {
+    label: "West Coast",
+    colors: [
+      "#a3b86c",
+      "#c89b3c",
+      "#8b6f47",
+      "#6b8e23",
+      "#d2691e",
+      "#1f1a14",
+      "#2a241b",
+      "#3a3225",
+      "#e8dcc4",
+      "#a89878",
+      "#c89b3c",
+      "#a3b86c",
+      "#c44536"
+    ]
+  },
+  mono: {
+    label: "Monocromático",
+    colors: [
+      "#f8fafc",
+      "#cbd5e1",
+      "#94a3b8",
+      "#64748b",
+      "#475569",
+      "#0a0a0a",
+      "#171717",
+      "#262626",
+      "#fafafa",
+      "#a3a3a3",
+      "#e5e5e5",
+      "#cbd5e1",
+      "#ef4444"
+    ]
+  },
+  ocean: {
+    label: "Ocean",
+    colors: [
+      "#0ea5e9",
+      "#06b6d4",
+      "#0891b2",
+      "#3b82f6",
+      "#22d3ee",
+      "#0a1929",
+      "#0f2740",
+      "#173554",
+      "#e0f2fe",
+      "#7dd3fc",
+      "#22d3ee",
+      "#10b981",
+      "#f43f5e"
+    ]
+  },
+  princess: {
+    label: "Cute Pink",
+    colors: [
+      "#ff79bc",
+      "#a855f7",
+      "#f472b6",
+      "#d946ef",
+      "#fb7185",
+      "#fff0f6",
+      "#ffe4ec",
+      "#ffffff",
+      "#ff4099",
+      "#ffadd5",
+      "#ec4899",
+      "#10b981",
+      "#e11d48"
+    ]
+  }
+}, rt = "action", V = M.action.colors;
+function C(e) {
+  const t = V;
+  if (!e || e.length === 0) return [...t];
+  if (e.length >= x) return e.slice(0, x);
+  const n = [...e];
+  for (let r = e.length; r < x; r++) n.push(t[r]);
+  return n;
+}
+function K(e) {
+  return C(e).slice(0, be);
+}
+function we(e) {
+  const t = C(e);
+  return {
+    "--bg-dark": t[_.bgDark],
+    "--bg-paper": t[_.bgPaper],
+    "--bg-elevated": t[_.bgElevated],
+    "--text-primary": t[_.textPrimary],
+    "--text-secondary": t[_.textMuted],
+    "--text-muted": t[_.textMuted],
+    "--action-orange": t[_.accent],
+    "--action-green": t[_.success],
+    "--color-success": t[_.success],
+    "--color-error": t[_.error],
+    "--color-info": t[_.series2],
+    "--color-warning": t[_.series3]
+  };
+}
+function ye({ data: e, label: t }) {
+  const n = t || String(e.label || ""), r = String(e.formatted || "-"), a = e.comparison, s = (a == null ? void 0 : a.trend) === "up" ? "widget-kpi__trend--up" : (a == null ? void 0 : a.trend) === "down" ? "widget-kpi__trend--down" : "", i = (a == null ? void 0 : a.trend) === "up" ? "↑" : (a == null ? void 0 : a.trend) === "down" ? "↓" : "";
+  return /* @__PURE__ */ m("div", { className: "widget widget-kpi", children: [
+    /* @__PURE__ */ l("span", { className: "widget-kpi__label", children: n }),
+    /* @__PURE__ */ l("span", { className: "widget-kpi__value", children: r }),
+    a && a.variance_pct != null && /* @__PURE__ */ m("div", { className: `widget-kpi__trend ${s}`, children: [
+      /* @__PURE__ */ m("span", { className: "widget-kpi__variance", children: [
+        i,
+        " ",
+        a.variance_pct > 0 ? "+" : "",
+        a.variance_pct.toFixed(1),
+        "%"
+      ] }),
+      a.label && /* @__PURE__ */ l("span", { className: "widget-kpi__trend-label", children: a.label })
+    ] })
+  ] });
+}
+const Se = "var(--bg-elevated)";
+function R(e, t, n, r) {
+  if (r <= 0) return "";
+  if (r >= 1)
+    return `M ${e - n} ${t} A ${n} ${n} 0 0 1 ${e} ${t - n} A ${n} ${n} 0 0 1 ${e + n} ${t}`;
+  const a = r * Math.PI, s = e - n * Math.cos(a), i = t - n * Math.sin(a);
+  return `M ${e - n} ${t} A ${n} ${n} 0 0 1 ${s} ${i}`;
+}
+function Y(e) {
+  const t = Math.abs(e);
+  return t >= 1e6 ? `${(e / 1e6).toFixed(1)}M` : t >= 1e3 ? `${(e / 1e3).toFixed(1)}K` : e.toLocaleString("pt-BR");
+}
+function Ne({ data: e, palette: t, label: n }) {
+  const r = n || String(e.label || ""), a = typeof e.value == "number" ? e.value : null, s = a != null ? Y(a) : "-", i = String(e.formatted || "-"), c = typeof e.ratio == "number" ? e.ratio : 0, g = e.target_value, u = e.comparison_label, o = c >= 1, d = Math.min(Math.max(c, 0), 1), f = o ? "var(--action-green)" : c >= 0.7 ? t[0] || "var(--color-info)" : c >= 0.4 ? "var(--color-warning)" : "var(--color-error)", v = g != null ? Y(g) : "-", h = 50, p = 50, k = 44, $ = 10;
+  return /* @__PURE__ */ m("div", { className: "widget widget-gauge", children: [
+    /* @__PURE__ */ l("span", { className: "widget-gauge__label", children: r }),
+    /* @__PURE__ */ m("div", { className: "widget-gauge__chart", children: [
+      /* @__PURE__ */ m("svg", { viewBox: "0 0 100 56", preserveAspectRatio: "xMidYMax meet", children: [
+        /* @__PURE__ */ l("path", { d: R(h, p, k, 1), fill: "none", stroke: Se, strokeWidth: $, strokeLinecap: "butt" }),
+        d > 0 && /* @__PURE__ */ l("path", { d: R(h, p, k, d), fill: "none", stroke: f, strokeWidth: $, strokeLinecap: "butt" })
+      ] }),
+      /* @__PURE__ */ m("div", { className: "widget-gauge__center", children: [
+        /* @__PURE__ */ l("span", { className: "widget-gauge__percent", children: i }),
+        /* @__PURE__ */ m("span", { className: "widget-gauge__comparison", children: [
+          s,
+          " / ",
+          v
+        ] }),
+        o && /* @__PURE__ */ l("span", { className: "widget-gauge__badge", children: u || "Meta batida" }),
+        !o && u && /* @__PURE__ */ l("span", { className: "widget-gauge__comparison", children: u })
+      ] })
+    ] })
+  ] });
+}
+const W = { fontSize: 10, fill: "var(--text-muted)" }, Te = "var(--bg-elevated)", z = {
+  backgroundColor: "var(--bg-elevated)",
+  border: "1px solid var(--bg-paper)",
+  borderRadius: "6px",
+  color: "var(--text-primary)"
+}, J = {
+  color: "var(--text-primary)",
+  fontWeight: 600
+};
+function H(e, t) {
+  var a;
+  const n = Array.isArray(t) ? t[0] : void 0, r = (a = n == null ? void 0 : n.payload) == null ? void 0 : a.tooltipLabel;
+  return typeof r == "string" && r ? r : String(e ?? "");
+}
+function ke(e) {
+  const [t, n] = T({ width: 0, height: 0 });
+  return P(() => {
+    const r = e.current;
+    if (!r) return;
+    const a = new ResizeObserver(([s]) => {
+      const { width: i, height: c } = s.contentRect;
+      n(
+        (g) => g.width !== Math.floor(i) || g.height !== Math.floor(c) ? { width: Math.floor(i), height: Math.floor(c) } : g
+      );
+    });
+    return a.observe(r), () => a.disconnect();
+  }, [e]), t;
+}
+function L({ Chart: e, chartData: t, xKey: n, series: r, palette: a, renderSeries: s, width: i, height: c }) {
+  return /* @__PURE__ */ m(e, { data: t, width: i, height: c, children: [
+    /* @__PURE__ */ l(ie, { strokeDasharray: "3 3", stroke: Te }),
+    /* @__PURE__ */ l(ce, { dataKey: n, tick: W }),
+    /* @__PURE__ */ l(oe, { tick: W }),
+    /* @__PURE__ */ l(
+      j,
+      {
+        contentStyle: z,
+        labelStyle: J,
+        labelFormatter: H,
+        cursor: { fill: "var(--bg-paper)", opacity: 0.3 }
+      }
+    ),
+    r.length > 1 && /* @__PURE__ */ l(de, {}),
+    r.map((g, u) => s(g, a[u % a.length], u))
+  ] });
+}
+function $e({ data: e, palette: t, label: n }) {
+  const r = String(e.chartType || "bar"), a = n || String(e.label || ""), s = String(e.xKey || "label"), i = e.series || [], c = e.data || [], g = O(null), { width: u, height: o } = ke(g);
+  return c.length ? /* @__PURE__ */ m("div", { className: "widget widget-chart", children: [
+    a && /* @__PURE__ */ l("h4", { className: "widget-chart__title", children: a }),
+    /* @__PURE__ */ l("div", { ref: g, className: "widget-chart__container", children: (() => {
+      var v;
+      if (u <= 0 || o <= 0) return null;
+      if (r === "pie")
+        return /* @__PURE__ */ m(Z, { width: u, height: o, children: [
+          /* @__PURE__ */ l(
+            B,
+            {
+              data: c,
+              dataKey: ((v = i[0]) == null ? void 0 : v.key) || "s0",
+              nameKey: s,
+              cx: "50%",
+              cy: "50%",
+              outerRadius: "75%",
+              label: ({ name: h, percent: p }) => `${h}: ${(p * 100).toFixed(0)}%`,
+              labelLine: !1,
+              children: c.map((h, p) => /* @__PURE__ */ l(ee, { fill: t[p % t.length] }, p))
+            }
+          ),
+          /* @__PURE__ */ l(
+            j,
+            {
+              contentStyle: z,
+              labelStyle: J,
+              labelFormatter: H
+            }
+          )
+        ] });
+      const f = { chartData: c, xKey: s, series: i, palette: t, width: u, height: o };
+      return r === "line" ? /* @__PURE__ */ l(L, { ...f, Chart: te, renderSeries: (h, p) => /* @__PURE__ */ l(
+        ae,
+        {
+          type: "monotone",
+          dataKey: h.key,
+          name: h.label,
+          stroke: p,
+          strokeWidth: 2,
+          dot: c.length <= 31
+        },
+        h.key
+      ) }) : r === "area" ? /* @__PURE__ */ l(L, { ...f, Chart: re, renderSeries: (h, p) => /* @__PURE__ */ l(
+        ne,
+        {
+          type: "monotone",
+          dataKey: h.key,
+          name: h.label,
+          fill: p,
+          stroke: p,
+          fillOpacity: 0.3
+        },
+        h.key
+      ) }) : /* @__PURE__ */ l(L, { ...f, Chart: le, renderSeries: (h, p) => /* @__PURE__ */ l(
+        se,
+        {
+          dataKey: h.key,
+          name: h.label,
+          fill: p,
+          radius: [3, 3, 0, 0]
+        },
+        h.key
+      ) });
+    })() })
+  ] }) : /* @__PURE__ */ l("div", { className: "widget widget-chart widget-chart--empty", children: "Sem dados" });
+}
+const X = [
+  "Jan",
+  "Fev",
+  "Mar",
+  "Abr",
+  "Mai",
+  "Jun",
+  "Jul",
+  "Ago",
+  "Set",
+  "Out",
+  "Nov",
+  "Dez"
+], nt = [
+  "Janeiro",
+  "Fevereiro",
+  "Marco",
+  "Abril",
+  "Maio",
+  "Junho",
+  "Julho",
+  "Agosto",
+  "Setembro",
+  "Outubro",
+  "Novembro",
+  "Dezembro"
+];
+function De(e) {
+  return { start: `${e}-01-01`, end: `${e}-12-31` };
+}
+function Ce(e) {
+  if (!e) return null;
+  const t = e.match(/^(\d{4})/);
+  return t ? { year: parseInt(t[1]) } : null;
+}
+function Ee(e, t) {
+  const n = new Date(e, t, 0).getDate(), r = (a) => String(a).padStart(2, "0");
+  return {
+    start: `${e}-${r(t)}-01`,
+    end: `${e}-${r(t)}-${r(n)}`
+  };
+}
+function q(e) {
+  const t = new Date(Date.UTC(e.getFullYear(), e.getMonth(), e.getDate()));
+  t.setUTCDate(t.getUTCDate() + 4 - (t.getUTCDay() || 7));
+  const n = new Date(Date.UTC(t.getUTCFullYear(), 0, 1));
+  return Math.ceil(((t.getTime() - n.getTime()) / 864e5 + 1) / 7);
+}
+function lt(e, t) {
+  const n = new Date(e, 0, 4), r = (n.getDay() + 6) % 7, a = new Date(n.getTime() - r * 864e5), s = new Date(a.getTime() + (t - 1) * 7 * 864e5), i = new Date(s.getTime() + 6 * 864e5), c = (u) => String(u).padStart(2, "0"), g = (u) => `${u.getFullYear()}-${c(u.getMonth() + 1)}-${c(u.getDate())}`;
+  return { start: g(s), end: g(i) };
+}
+function st(e, t) {
+  const n = /* @__PURE__ */ new Set(), r = new Date(e, t, 0).getDate();
+  for (let a = 1; a <= r; a++)
+    n.add(q(new Date(e, t - 1, a)));
+  return Array.from(n).sort((a, s) => a - s);
+}
+function A(e, t) {
+  const n = new Date(e, t, 0).getDate(), r = (c) => String(c).padStart(2, "0"), a = [];
+  let s = 1, i = 1;
+  for (; s <= n; ) {
+    const c = s, g = Math.min(s + 6, n), u = `${e}-${r(t)}-${r(c)}`, o = `${e}-${r(t)}-${r(g)}`, d = `${i}° Semana (${r(c)}/${r(t)} - ${r(g)}/${r(t)})`;
+    a.push({ index: i, startDay: c, endDay: g, start: u, end: o, label: d }), s = g + 1, i++;
+  }
+  return a;
+}
+function xe(e, t, n) {
+  if (!e) return 1;
+  const r = (i) => String(i).padStart(2, "0"), a = e.match(new RegExp(`^${t}-${r(n)}-(\\d{2})`));
+  if (!a) return 1;
+  const s = parseInt(a[1]);
+  return Math.ceil(s / 7);
+}
+function Q(e) {
+  if (!e) return null;
+  const t = e.match(/^(\d{4})-(\d{2})/);
+  return t ? { year: parseInt(t[1]), month: parseInt(t[2]) } : null;
+}
+function it(e) {
+  if (!e) return null;
+  const t = /* @__PURE__ */ new Date(e + "T00:00:00");
+  return isNaN(t.getTime()) ? null : { year: t.getFullYear(), week: q(t) };
+}
+function I(e) {
+  const t = /* @__PURE__ */ new Date(), n = e != null && e.min ? parseInt(e.min.slice(0, 4)) : t.getFullYear() - 2, r = e != null && e.max ? parseInt(e.max.slice(0, 4)) : t.getFullYear(), a = [];
+  for (let s = r; s >= n; s--) a.push(s);
+  return a;
+}
+function D(e) {
+  if (!e) return null;
+  const [t, n, r] = e.split("-").map(Number);
+  return !t || !n || !r ? null : new Date(t, n - 1, r);
+}
+function Me(e) {
+  if (!e) return "";
+  const t = e.getFullYear(), n = String(e.getMonth() + 1).padStart(2, "0"), r = String(e.getDate()).padStart(2, "0");
+  return `${t}-${n}-${r}`;
+}
+function U({
+  value: e,
+  onChange: t,
+  minIso: n,
+  maxIso: r,
+  placeholder: a,
+  selectsStart: s,
+  selectsEnd: i,
+  startIso: c,
+  endIso: g,
+  className: u,
+  disabled: o
+}) {
+  return /* @__PURE__ */ l("div", { className: `ddp-field ${u ?? ""}`, children: /* @__PURE__ */ l(
+    ue,
+    {
+      selected: D(e),
+      onChange: (d) => t(Me(d)),
+      selectsStart: s,
+      selectsEnd: i,
+      startDate: D(c) ?? void 0,
+      endDate: D(g) ?? void 0,
+      minDate: D(n) ?? void 0,
+      maxDate: D(r) ?? void 0,
+      dateFormat: "dd/MM/yyyy",
+      placeholderText: a ?? "Selecione...",
+      disabled: o,
+      portalId: "ddp-portal",
+      popperPlacement: "bottom-start",
+      popperModifiers: [
+        {
+          name: "flip",
+          options: { fallbackPlacements: ["bottom-end", "top-start", "top-end"] },
+          fn: (d) => d
+        }
+      ]
+    }
+  ) });
+}
+function Fe({ config: e, value: t, options: n = [], dateBounds: r, onChange: a }) {
+  const s = e.filterType || "select", i = e.label || "Filtro", c = e.dateFilterMode || "range";
+  return /* @__PURE__ */ m("div", { className: "widget-filter", children: [
+    /* @__PURE__ */ l("label", { className: "widget-filter__label", children: i }),
+    s === "date_range" ? c === "yearly" ? /* @__PURE__ */ l(Ae, { value: t, dateBounds: r, onChange: a }) : c === "monthly" ? /* @__PURE__ */ l(Oe, { value: t, dateBounds: r, onChange: a }) : c === "weekly" ? /* @__PURE__ */ l(Pe, { value: t, dateBounds: r, onChange: a }) : /* @__PURE__ */ l(Le, { value: t, dateBounds: r, onChange: a }) : /* @__PURE__ */ l(
+      Ie,
+      {
+        value: t,
+        options: n,
+        multi: s === "multi_select",
+        onChange: a
+      }
+    )
+  ] });
+}
+function Le({ value: e, dateBounds: t, onChange: n }) {
+  const [r, a] = e ? e.split("|") : ["", ""];
+  return /* @__PURE__ */ m("div", { className: "widget-filter__date-range widget-filter__date-range--stacked", children: [
+    /* @__PURE__ */ l(
+      U,
+      {
+        value: r,
+        minIso: t == null ? void 0 : t.min,
+        maxIso: a || (t == null ? void 0 : t.max),
+        selectsStart: !0,
+        startIso: r,
+        endIso: a,
+        placeholder: "Data inicial",
+        onChange: (s) => n(`${s}|${a}`)
+      }
+    ),
+    /* @__PURE__ */ l(
+      U,
+      {
+        value: a,
+        minIso: r || (t == null ? void 0 : t.min),
+        maxIso: t == null ? void 0 : t.max,
+        selectsEnd: !0,
+        startIso: r,
+        endIso: a,
+        placeholder: "Data final",
+        onChange: (s) => n(`${r}|${s}`)
+      }
+    )
+  ] });
+}
+function Ae({ value: e, dateBounds: t, onChange: n }) {
+  const [r] = e ? e.split("|") : [""], a = Ce(r), s = /* @__PURE__ */ new Date(), i = (a == null ? void 0 : a.year) ?? s.getFullYear(), c = I(t), g = (u) => {
+    const o = De(u);
+    n(`${o.start}|${o.end}`);
+  };
+  return /* @__PURE__ */ l("div", { className: "widget-filter__date-range widget-filter__date-range--year", children: /* @__PURE__ */ l(
+    "select",
+    {
+      className: "widget-filter__select",
+      value: i,
+      onChange: (u) => g(parseInt(u.target.value)),
+      children: c.map((u) => /* @__PURE__ */ l("option", { value: u, children: u }, u))
+    }
+  ) });
+}
+function Oe({ value: e, dateBounds: t, onChange: n }) {
+  const [r] = e ? e.split("|") : [""], a = Q(r), s = /* @__PURE__ */ new Date(), i = (a == null ? void 0 : a.year) ?? s.getFullYear(), c = (a == null ? void 0 : a.month) ?? s.getMonth() + 1, g = I(t), u = (o, d) => {
+    const f = Ee(o, d);
+    n(`${f.start}|${f.end}`);
+  };
+  return /* @__PURE__ */ m("div", { className: "widget-filter__date-range widget-filter__date-range--month", children: [
+    /* @__PURE__ */ l(
+      "select",
+      {
+        className: "widget-filter__select",
+        value: c,
+        onChange: (o) => u(i, parseInt(o.target.value)),
+        children: X.map((o, d) => /* @__PURE__ */ l("option", { value: d + 1, children: o }, d + 1))
+      }
+    ),
+    /* @__PURE__ */ l(
+      "select",
+      {
+        className: "widget-filter__select",
+        value: i,
+        onChange: (o) => u(parseInt(o.target.value), c),
+        children: g.map((o) => /* @__PURE__ */ l("option", { value: o, children: o }, o))
+      }
+    )
+  ] });
+}
+function Pe({ value: e, dateBounds: t, onChange: n }) {
+  const [r] = e ? e.split("|") : [""], a = Q(r), s = /* @__PURE__ */ new Date(), i = (a == null ? void 0 : a.year) ?? s.getFullYear(), c = (a == null ? void 0 : a.month) ?? s.getMonth() + 1, g = I(t), u = A(i, c), o = xe(r, i, c) || 1;
+  return /* @__PURE__ */ m("div", { className: "widget-filter__date-range widget-filter__date-range--week", children: [
+    /* @__PURE__ */ l(
+      "select",
+      {
+        className: "widget-filter__select",
+        value: i,
+        onChange: (d) => {
+          const f = parseInt(d.target.value), h = A(f, c)[0];
+          h && n(`${h.start}|${h.end}`);
+        },
+        children: g.map((d) => /* @__PURE__ */ l("option", { value: d, children: d }, d))
+      }
+    ),
+    /* @__PURE__ */ l(
+      "select",
+      {
+        className: "widget-filter__select",
+        value: c,
+        onChange: (d) => {
+          const f = parseInt(d.target.value), h = A(i, f)[0];
+          h && n(`${h.start}|${h.end}`);
+        },
+        children: X.map((d, f) => /* @__PURE__ */ l("option", { value: f + 1, children: d }, f + 1))
+      }
+    ),
+    /* @__PURE__ */ l(
+      "select",
+      {
+        className: "widget-filter__select",
+        value: o,
+        onChange: (d) => {
+          const f = u[parseInt(d.target.value) - 1];
+          f && n(`${f.start}|${f.end}`);
+        },
+        children: u.map((d) => /* @__PURE__ */ l("option", { value: d.index, children: d.label }, d.index))
+      }
+    )
+  ] });
+}
+function Ie({ value: e, options: t, multi: n, onChange: r }) {
+  if (n) {
+    const a = e ? e.split(",") : [], s = (i) => {
+      const c = a.includes(i) ? a.filter((g) => g !== i) : [...a, i];
+      r(c.join(","));
+    };
+    return /* @__PURE__ */ l("div", { className: "widget-filter__multi", children: t.map((i) => /* @__PURE__ */ m("label", { className: "widget-filter__multi-option", children: [
+      /* @__PURE__ */ l(
+        "input",
+        {
+          type: "checkbox",
+          checked: a.includes(i),
+          onChange: () => s(i)
+        }
+      ),
+      i
+    ] }, i)) });
+  }
+  return /* @__PURE__ */ m(
+    "select",
+    {
+      className: "widget-filter__select",
+      value: e,
+      onChange: (a) => r(a.target.value),
+      children: [
+        /* @__PURE__ */ l("option", { value: "", children: "Todos" }),
+        t.map((a) => /* @__PURE__ */ l("option", { value: a, children: a }, a))
+      ]
+    }
+  );
+}
+const Re = {
+  currency: "R$",
+  percentage: "%"
+};
+function Ye({ config: e, value: t, onChange: n }) {
+  const r = e.label || "Variavel", a = e.locked || !1, s = e.variableFormat || "number", i = Re[s] || "";
+  return /* @__PURE__ */ m("div", { className: `widget-variable ${a ? "widget-variable--locked" : ""}`, children: [
+    /* @__PURE__ */ l("label", { className: "widget-variable__label", children: r }),
+    /* @__PURE__ */ m("div", { className: "widget-variable__input-wrapper", children: [
+      /* @__PURE__ */ l(
+        "input",
+        {
+          className: "widget-variable__input",
+          type: "number",
+          value: t,
+          onChange: (c) => n(parseFloat(c.target.value) || 0),
+          disabled: a,
+          step: s === "integer" ? 1 : 0.01
+        }
+      ),
+      i && /* @__PURE__ */ l("span", { className: "widget-variable__suffix", children: i })
+    ] }),
+    a && /* @__PURE__ */ l("span", { className: "widget-variable__lock-icon", title: "Bloqueado", children: "🔒" })
+  ] });
+}
+const We = [
+  _.bgDark,
+  _.bgPaper,
+  _.bgElevated,
+  _.accent,
+  _.success
+];
+function Ue(e) {
+  if (!e) return !0;
+  const t = C(e);
+  return Object.values(M).some(
+    (n) => JSON.stringify(n.colors) === JSON.stringify(t)
+  );
+}
+const Ge = [
+  { label: "Series", slots: ["series0", "series1", "series2", "series3", "series4"] },
+  { label: "Tema", slots: ["bgDark", "bgPaper", "bgElevated", "textPrimary", "textMuted"] },
+  { label: "Estados", slots: ["accent", "success", "error"] }
+];
+function je({
+  selected: e,
+  onSelect: t,
+  customMode: n,
+  onCustomModeChange: r,
+  disabled: a
+}) {
+  var u;
+  const s = n ?? !Ue(e), i = C(e), c = s || (u = Object.entries(M).find(
+    ([, o]) => JSON.stringify(o.colors) === JSON.stringify(i)
+  )) == null ? void 0 : u[0], g = (o, d) => {
+    const f = [...i];
+    for (; f.length < x; ) f.push("#000000");
+    f[o] = d, t(f);
+  };
+  return /* @__PURE__ */ m("div", { className: `palette-selector ${a ? "palette-selector--disabled" : ""}`, children: [
+    r && /* @__PURE__ */ m("label", { className: "config-panel__checkbox", children: [
+      /* @__PURE__ */ l(
+        "input",
+        {
+          type: "checkbox",
+          checked: s,
+          onChange: (o) => r(o.target.checked),
+          disabled: a
+        }
+      ),
+      "Customizar"
+    ] }),
+    s ? /* @__PURE__ */ l("div", { className: "palette-selector__custom", children: Ge.map((o) => /* @__PURE__ */ m("div", { className: "palette-selector__row", children: [
+      /* @__PURE__ */ l("span", { className: "palette-selector__row-label", children: o.label }),
+      /* @__PURE__ */ l("div", { className: "palette-selector__row-slots", children: o.slots.map((d) => {
+        const f = _[d];
+        return /* @__PURE__ */ l(
+          "input",
+          {
+            type: "color",
+            className: "palette-selector__color-input",
+            value: i[f] || "#000000",
+            onChange: (v) => g(f, v.target.value),
+            disabled: a,
+            title: ve[d]
+          },
+          d
+        );
+      }) })
+    ] }, o.label)) }) : /* @__PURE__ */ l("div", { className: "palette-selector__options", children: Object.entries(M).map(([o, d]) => {
+      const f = C(d.colors);
+      return /* @__PURE__ */ m(
+        "button",
+        {
+          className: `palette-selector__option ${c === o ? "palette-selector__option--active" : ""}`,
+          onClick: () => t(d.colors),
+          disabled: a,
+          children: [
+            /* @__PURE__ */ l("div", { className: "palette-selector__bar", children: K(d.colors).map((v, h) => /* @__PURE__ */ l(
+              "span",
+              {
+                className: "palette-selector__swatch",
+                style: { backgroundColor: v }
+              },
+              h
+            )) }),
+            /* @__PURE__ */ l("div", { className: "palette-selector__bar palette-selector__bar--theme", children: We.map((v, h) => /* @__PURE__ */ l(
+              "span",
+              {
+                className: "palette-selector__swatch",
+                style: { backgroundColor: f[v] }
+              },
+              h
+            )) }),
+            /* @__PURE__ */ l("span", { className: "palette-selector__label", children: d.label })
+          ]
+        },
+        o
+      );
+    }) })
+  ] });
+}
+function Ve({ config: e, palette: t, onChange: n }) {
+  const r = e.label || "Cores", a = e.locked || !1;
+  return /* @__PURE__ */ m("div", { className: `widget-palette ${a ? "widget-palette--locked" : ""}`, children: [
+    /* @__PURE__ */ l("label", { className: "widget-palette__label", children: r }),
+    /* @__PURE__ */ l(je, { selected: t, onSelect: n, customMode: !0, disabled: a }),
+    a && /* @__PURE__ */ l("span", { className: "widget-palette__lock-icon", title: "Bloqueado", children: "🔒" })
+  ] });
+}
+function Ke({
+  type: e,
+  computed: t,
+  palette: n,
+  config: r,
+  filterValue: a,
+  filterOptions: s,
+  dateBounds: i,
+  onFilterChange: c,
+  variableValue: g,
+  onVariableChange: u,
+  onPaletteChange: o
+}) {
+  if (t.error)
+    return /* @__PURE__ */ l("div", { className: "widget widget--error", children: /* @__PURE__ */ l("span", { className: "widget__error-text", children: String(t.error) }) });
+  const d = K(n);
+  switch (e) {
+    case "kpi_card":
+      return /* @__PURE__ */ l(ye, { data: t, label: r == null ? void 0 : r.label });
+    case "gauge":
+      return /* @__PURE__ */ l(Ne, { data: t, palette: d, label: r == null ? void 0 : r.label });
+    case "chart":
+      return /* @__PURE__ */ l($e, { data: t, palette: d, label: r == null ? void 0 : r.label });
+    case "filter":
+      return r && c ? /* @__PURE__ */ l(
+        Fe,
+        {
+          config: r,
+          value: a || "",
+          options: s,
+          dateBounds: i,
+          onChange: c
+        }
+      ) : null;
+    case "variable": {
+      const f = r;
+      return f && u ? /* @__PURE__ */ l(
+        Ye,
+        {
+          config: f,
+          value: g ?? f.variableValue ?? 0,
+          onChange: u
+        }
+      ) : null;
+    }
+    case "color_palette":
+      return r && o ? /* @__PURE__ */ l(
+        Ve,
+        {
+          config: r,
+          palette: n,
+          onChange: o
+        }
+      ) : null;
+    default:
+      return /* @__PURE__ */ m("div", { className: "widget", children: [
+        "Widget: ",
+        e
+      ] });
+  }
+}
+const ze = V, Je = 30, He = 10, ct = {
+  gridColumns: Je,
+  gridRows: He,
+  widgets: []
+}, ot = {
+  kpi_card: "KPI Card",
+  gauge: "Gauge",
+  chart: "Gráfico",
+  filter: "Filtro",
+  variable: "Variável",
+  color_palette: "Paleta de Cores"
+}, dt = ["kpi_card", "gauge", "chart"], ut = ["filter", "variable", "color_palette"], Xe = /* @__PURE__ */ new Set(["filter", "variable", "color_palette"]), gt = {
+  sum: "Soma",
+  avg: "Média",
+  count: "Contagem",
+  min: "Mínimo",
+  max: "Máximo",
+  count_distinct: "Contagem Distinta"
+}, qe = {
+  currency: "Moeda (R$)",
+  number: "Número",
+  integer: "Inteiro",
+  percentage: "Porcentagem",
+  date: "Data",
+  text: "Texto"
+}, ft = Object.entries(qe).filter(([e]) => e !== "date" && e !== "text"), ht = {
+  yoy: "vs Ano Anterior",
+  mom: "vs Mês Anterior",
+  target: "vs Meta",
+  none: "Nenhuma"
+}, mt = {
+  bar: "Barras",
+  line: "Linhas",
+  area: "Área",
+  pie: "Pizza"
+}, pt = {
+  date_range: "Periodo",
+  select: "Seleção Única",
+  multi_select: "Seleção Múltipla"
+}, _t = {
+  kpi_card: { x: 0, y: 0, w: 6, h: 3 },
+  gauge: { x: 0, y: 0, w: 6, h: 5 },
+  chart: { x: 0, y: 0, w: 6, h: 6 },
+  filter: { x: 0, y: 0, w: 4, h: 2 },
+  variable: { x: 0, y: 0, w: 4, h: 2 },
+  color_palette: { x: 0, y: 0, w: 4, h: 2 }
+}, bt = {
+  kpi_card: { label: "Novo KPI", aggregation: "sum", format: "number" },
+  gauge: { label: "Novo Gauge", aggregation: "sum" },
+  chart: { label: "Novo Grafico", chartType: "bar", xAxis: { column: "", granularity: "day" }, series: [] },
+  filter: { label: "Novo Filtro", filterType: "select" },
+  variable: { label: "Nova Variavel", variableValue: 0, variableFormat: "number", locked: !1 },
+  color_palette: { label: "Paleta de Cores", paletteColors: ze, locked: !1 }
+}, Qe = 40, Ze = 6;
+function vt(e) {
+  const { rowHeight: t = Qe, gridGap: n = Ze, className: r } = e, a = G(() => "fetcher" in e && e.fetcher ? e.fetcher : fe({ apiUrl: e.apiUrl, token: e.token }), [
+    "fetcher" in e ? e.fetcher : null,
+    "apiUrl" in e ? e.apiUrl : null,
+    "token" in e ? e.token : null
+  ]), {
+    layout: s,
+    renderData: i,
+    loading: c,
+    error: g,
+    filters: u,
+    variables: o,
+    palette: d,
+    setFilter: f,
+    setVariable: v,
+    setPalette: h
+  } = me(a);
+  if (g && !s)
+    return /* @__PURE__ */ l("div", { className: `preview-tab ${r ?? ""}`, children: /* @__PURE__ */ l("div", { className: "preview-tab__error", children: g }) });
+  if (!s)
+    return /* @__PURE__ */ l("div", { className: `preview-tab ${r ?? ""}`, children: /* @__PURE__ */ l("div", { className: "preview-tab__loading", children: "Carregando dashboard..." }) });
+  if (s.widgets.length === 0)
+    return /* @__PURE__ */ l("div", { className: `preview-tab ${r ?? ""}`, children: /* @__PURE__ */ l("div", { className: "preview-tab__empty", children: "Este dashboard nao possui widgets." }) });
+  const p = (i == null ? void 0 : i.widgets) ?? {}, k = (i == null ? void 0 : i.date_bounds) ?? null, $ = {
+    display: "grid",
+    gridTemplateColumns: `repeat(${s.gridColumns}, 1fr)`,
+    gridTemplateRows: `repeat(${s.gridRows}, ${t}px)`,
+    gap: `${n}px`,
+    // Aplica CSS vars da paleta no container — widgets descendentes usam var(--bg-*, --text-*, etc)
+    ...we(d)
+  };
+  return /* @__PURE__ */ m("div", { className: `preview-tab ${r ?? ""}`, children: [
+    g && !i && /* @__PURE__ */ l("div", { className: "preview-tab__error", children: g }),
+    i && /* @__PURE__ */ l("div", { className: "preview-tab__grid", style: $, children: s.widgets.map((b) => {
+      const E = Xe.has(b.type), S = p[b.id], y = {
+        gridColumn: `${b.grid.x + 1} / span ${b.grid.w}`,
+        gridRow: `${b.grid.y + 1} / span ${b.grid.h}`
+      }, w = b.type === "variable" ? o[b.id] ?? (S == null ? void 0 : S.value) ?? b.config.variableValue ?? 0 : void 0;
+      return /* @__PURE__ */ l(
+        "div",
+        {
+          className: `preview-tab__widget ${E ? "preview-tab__widget--control" : ""}`,
+          style: y,
+          children: E || S ? /* @__PURE__ */ l(
+            Ke,
+            {
+              type: b.type,
+              computed: S || {},
+              palette: d,
+              config: b.config,
+              filterValue: u[b.id] || "",
+              filterOptions: (S == null ? void 0 : S.available_values) || [],
+              dateBounds: k,
+              onFilterChange: (N) => f(b.id, N),
+              variableValue: w,
+              onVariableChange: (N) => v(b.id, N),
+              onPaletteChange: h
+            }
+          ) : /* @__PURE__ */ l("div", { className: "preview-tab__widget-loading", children: c ? "Carregando..." : "Sem dados" })
+        },
+        b.id
+      );
+    }) }),
+    c && i && /* @__PURE__ */ l("div", { className: "preview-tab__recalculating", children: "Atualizando..." })
+  ] });
+}
+export {
+  gt as AGGREGATION_LABELS,
+  ge as ApiError,
+  mt as CHART_TYPE_LABELS,
+  ht as COMPARISON_LABELS,
+  Xe as CONTROL_WIDGET_SET,
+  ut as CONTROL_WIDGET_TYPES,
+  $e as ChartWidget,
+  je as ColorPaletteSelector,
+  Ve as ColorPaletteWidget,
+  dt as DATA_WIDGET_TYPES,
+  bt as DEFAULT_CONFIG,
+  _t as DEFAULT_GRID,
+  Je as DEFAULT_GRID_COLUMNS,
+  He as DEFAULT_GRID_ROWS,
+  ze as DEFAULT_PALETTE,
+  V as DEFAULT_PALETTE_COLORS,
+  rt as DEFAULT_PALETTE_KEY,
+  vt as Dashboard,
+  U as DashboardDatePicker,
+  ct as EMPTY_LAYOUT,
+  pt as FILTER_TYPE_LABELS,
+  qe as FORMAT_LABELS,
+  Fe as FilterWidget,
+  Ne as GaugeWidget,
+  ye as KPIWidget,
+  nt as MONTH_NAMES_FULL,
+  X as MONTH_NAMES_SHORT,
+  ft as NUMERIC_FORMAT_OPTIONS,
+  M as PALETTES,
+  be as SERIES_COUNT,
+  _ as SLOT_INDEX,
+  ve as SLOT_LABELS,
+  x as TOTAL_SLOTS,
+  Ye as VariableWidget,
+  ot as WIDGET_TYPE_LABELS,
+  Ke as WidgetRenderer,
+  fe as createTokenFetcher,
+  Me as dateToIso,
+  C as ensurePaletteShape,
+  De as getFullYearRange,
+  q as getISOWeek,
+  Ee as getMonthRange,
+  A as getMonthWeeks,
+  we as getPaletteCssVars,
+  K as getSeries,
+  lt as getWeekRange,
+  st as getWeeksInMonth,
+  I as getYearRange,
+  D as isoToDate,
+  Q as parseMonthFromRange,
+  xe as parseMonthWeekFromRange,
+  it as parseWeekFromRange,
+  Ce as parseYearFromRange,
+  me as useDashboardData
+};
+//# sourceMappingURL=index.js.map