@feedmepos/mf-report 5.25.10 → 5.26.0-beta.0

package/dist/ReportEditor-CeAkjcrz.js

@@ -0,0 +1,1469 @@
+import { defineComponent as ye, mergeModels as ge, useModel as be, ref as R, computed as T, resolveComponent as h, createBlock as V, openBlock as s, withCtx as v, createElementVNode as g, createVNode as n, unref as o, normalizeClass as ke, createTextVNode as Ae, toDisplayString as G, createElementBlock as C, Fragment as Z, renderSlot as Ye, createCommentVNode as A, watch as fe, renderList as ce, resolveDynamicComponent as sl, isRef as Ze, normalizeStyle as He, onMounted as ul } from "vue";
+import { W as dl, g as ml, _ as cl, a as pl, i as vl, S as Ee, d as Ge, T as fl, b as gl } from "./TransitionFade-BF6eUEkd.js";
+import { C as ve, D as X, c as Ve, g as bl, u as el, a as yl, d as Ke, v as Te, b as Qe } from "./GlobalFilterSelect.vue_vue_type_script_setup_true_lang-DlXK3vKk.js";
+import { storeToRefs as Re } from "pinia";
+import { useRouter as ll, useRoute as tl } from "vue-router";
+import { useBreakpoints as Ie, useSnackbar as ol, FmButtonColorThemeVariant as xe } from "@feedmepos/ui-library";
+import { u as al } from "./message-dialog-UoMWOnil.js";
+import { u as Oe, a as hl } from "./vue-i18n-DVWuTfed.js";
+import { r as Se } from "./i18n-CI_sQ5d_.js";
+import { _ as Pe } from "./DynamicWidget.vue_vue_type_script_setup_true_lang-DQyuIexX.js";
+import { a as Je, _ as Le } from "./SelectComponent.vue_vue_type_script_setup_true_lang-BL1jpiXN.js";
+import { useCoreStore as _l } from "@feedmepos/mf-common";
+const wl = /* @__PURE__ */ ye({
+  __name: "WidgetDialog",
+  props: /* @__PURE__ */ ge({
+    isOpen: { type: Boolean }
+  }, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ ge(["update:isOpen"], ["update:modelValue"]),
+  setup(D, { emit: r }) {
+    const { t: a } = Oe(), { breakpoints: m } = Ie(), x = be(D, "modelValue"), f = D, S = r;
+    function E() {
+      S("update:isOpen", !1);
+    }
+    function w() {
+      u.value && (x.value = u.value, u.value = void 0, S("update:isOpen", !1));
+    }
+    const u = R(), M = T(() => !u.value);
+    return (Y, B) => {
+      const P = h("FmButton"), _ = h("FmDialog");
+      return s(), V(_, {
+        "model-value": f.isOpen
+      }, {
+        "dialog-header": v(() => [
+          Ae(G(o(a)("report.widget.type")), 1)
+        ]),
+        default: v(() => [
+          n(dl, {
+            modelValue: u.value,
+            "onUpdate:modelValue": B[0] || (B[0] = (F) => u.value = F),
+            class: ke(`grid ${o(m).lg || o(m).md ? "grid-cols-3 gap-3" : "grid-cols-2 gap-3"}`),
+            "child-class": "p-[8px] flex flex-col"
+          }, null, 8, ["modelValue", "class"])
+        ]),
+        "dialog-footer": v(() => [
+          B[1] || (B[1] = g("div", { class: "grow" }, null, -1)),
+          n(P, {
+            label: o(a)("report.common.cancel"),
+            variant: "tertiary",
+            onClick: E
+          }, null, 8, ["label"]),
+          n(P, {
+            label: o(a)("report.common.confirm"),
+            disabled: M.value,
+            onClick: w
+          }, null, 8, ["label", "disabled"])
+        ]),
+        _: 1
+      }, 8, ["model-value"]);
+    };
+  }
+}), Fl = { class: "fm-typo-en-body-lg-600" }, je = /* @__PURE__ */ ye({
+  __name: "ReportEditorTabHeader",
+  props: /* @__PURE__ */ ge({
+    icon: {
+      type: String,
+      required: !0
+    }
+  }, {
+    modelValue: { type: Boolean, required: !0, default: !1 },
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(D) {
+    const { t: r } = Oe(), a = be(D, "modelValue"), m = D;
+    return (x, f) => {
+      const S = h("FmIcon");
+      return s(), C("div", {
+        class: "px-6 py-16 flex items-center gap-2 bg-fm-color-neutral-white border cursor-pointer",
+        onClick: f[0] || (f[0] = (E) => a.value = !a.value)
+      }, [
+        g("p", Fl, G(o(r)("report.editor.customizeReport")), 1),
+        f[1] || (f[1] = g("div", { class: "grow" }, null, -1)),
+        n(S, {
+          name: m.icon
+        }, null, 8, ["name"])
+      ]);
+    };
+  }
+}), Vl = /* @__PURE__ */ ye({
+  __name: "ReportEditorTabDesktop",
+  props: {
+    modelValue: { required: !0, default: !1 },
+    modelModifiers: {}
+  },
+  emits: ["update:modelValue"],
+  setup(D) {
+    const r = be(D, "modelValue");
+    return (a, m) => (s(), C(Z, null, [
+      n(je, {
+        modelValue: r.value,
+        "onUpdate:modelValue": m[0] || (m[0] = (x) => r.value = x),
+        icon: "keyboard_double_arrow_left"
+      }, null, 8, ["modelValue"]),
+      Ye(a.$slots, "default")
+    ], 64));
+  }
+}), xl = /* @__PURE__ */ ye({
+  __name: "ReportEditorTabMobile",
+  props: {
+    modelValue: { required: !0, default: !1 },
+    modelModifiers: {}
+  },
+  emits: ["update:modelValue"],
+  setup(D) {
+    const r = be(D, "modelValue");
+    return (a, m) => {
+      const x = h("FmTopSheet"), f = h("FmCard");
+      return s(), V(f, { class: "fixed bottom-0 w-full" }, {
+        default: v(() => [
+          n(je, {
+            modelValue: r.value,
+            "onUpdate:modelValue": m[0] || (m[0] = (S) => r.value = S),
+            icon: "keyboard_double_arrow_up"
+          }, null, 8, ["modelValue"]),
+          n(x, {
+            modelValue: r.value,
+            "onUpdate:modelValue": m[2] || (m[2] = (S) => r.value = S),
+            "fullscreen-size": "sm"
+          }, {
+            default: v(() => [
+              n(je, {
+                modelValue: r.value,
+                "onUpdate:modelValue": m[1] || (m[1] = (S) => r.value = S),
+                icon: "keyboard_double_arrow_down"
+              }, null, 8, ["modelValue"]),
+              r.value ? Ye(a.$slots, "default", { key: 0 }) : A("", !0)
+            ]),
+            _: 3
+          }, 8, ["modelValue"])
+        ]),
+        _: 3
+      });
+    };
+  }
+}), kl = {
+  key: 2,
+  class: "flex flex-col gap-3 mt-2 border border-neutral-300 p-3"
+}, Cl = { class: "grid grid-cols-1 gap-2 rounded-md border border-neutral-300 p-2 sm:grid-cols-[1.3fr_1fr_1fr_auto] sm:items-end" }, Tl = {
+  key: 0,
+  class: "flex justify-end sm:pb-[2px]"
+}, Sl = { class: "fm-typo-en-body-lg-600 text-fm-color-typo-primary" }, Ol = { class: "pl-1" }, $l = {
+  key: 0,
+  class: "flex justify-end sm:pb-[2px]"
+}, Nl = {
+  key: 4,
+  class: "flex flex-col gap-2"
+}, Ul = /* @__PURE__ */ ye({
+  __name: "GlobalFilterDialog",
+  props: /* @__PURE__ */ ge({
+    schemas: {
+      type: Array,
+      default: () => []
+    },
+    tiles: {
+      type: Array,
+      required: !0
+    }
+  }, {
+    globalFilter: {
+      default: () => null
+    },
+    globalFilterModifiers: {},
+    isOpen: { type: Boolean, default: () => !1, required: !0 },
+    isOpenModifiers: {}
+  }),
+  emits: ["update:globalFilter", "update:isOpen"],
+  setup(D) {
+    const { t: r, te: a } = Oe(), m = be(D, "globalFilter"), x = be(D, "isOpen"), f = ol(), S = D, E = R(""), w = R(), u = R(), M = R(), Y = R([]), B = R([]), P = R(""), _ = R(!1), F = R(!1), O = R([]), $ = R([]), K = R(ve.Equal);
+    function ee(e) {
+      return JSON.parse(JSON.stringify(e));
+    }
+    function W(e, l) {
+      return { hour: e, minute: l };
+    }
+    function p(e) {
+      return e ? `${String(e.hour).padStart(2, "0")}:${String(e.minute).padStart(2, "0")}` : null;
+    }
+    function ie(e) {
+      if (!e) return null;
+      const [l, d] = e.split(":").map(Number);
+      return Number.isNaN(l) || Number.isNaN(d) ? null : { hour: l, minute: d };
+    }
+    const le = T(() => u.value ? !(u.value.type === X.Timestamp && M.value === Ve.DateTime) : !1), Q = T(
+      () => {
+        var e;
+        return ((e = u.value) == null ? void 0 : e.type) === X.Timestamp && M.value === Ve.TimeOfDay;
+      }
+    ), se = T(() => {
+      var e;
+      return (((e = u.value) == null ? void 0 : e.filterOperators) ?? []).filter((l) => l !== ve.And && l !== ve.Or).map((l) => ({
+        label: r(`report.section.comparisonOperator.${l}`),
+        value: l
+      }));
+    });
+    function ae() {
+      var l;
+      const e = (l = se.value[0]) == null ? void 0 : l.value;
+      return e || (u.value ? Ce(u.value.type, M.value ?? null) : ve.Equal);
+    }
+    function pe(e) {
+      if (u.value)
+        return bl({
+          operator: e ?? ae(),
+          dataType: u.value.type,
+          dimensionOption: u.value.type === X.Timestamp ? M.value ?? null : null,
+          t: r
+        });
+    }
+    function N(e, l) {
+      if (typeof (l == null ? void 0 : l.default) == "boolean" || e.length > 0 && e.every((b) => typeof b == "boolean")) {
+        const b = e.reduce((k, z) => (typeof z == "boolean" && k.push(z), k), []);
+        if (l)
+          for (l.fixed && b.splice(l.count); b.length < l.count; )
+            b.push(typeof l.default == "boolean" ? l.default : !1);
+        return b;
+      }
+      const c = e.reduce((b, k) => (typeof k == "string" && b.push(k), b), []);
+      if (l)
+        for (l.fixed && c.splice(l.count); c.length < l.count; )
+          c.push(typeof l.default == "string" ? l.default : "");
+      return c;
+    }
+    function I(e = K.value) {
+      const l = pe(e), d = N(
+        l ? Array(l.count).fill(l.default) : [],
+        l
+      );
+      return {
+        label: "",
+        operator: e,
+        values: d
+      };
+    }
+    function J() {
+      return {
+        name: "",
+        startTime: W(0, 0),
+        endTime: W(23, 59)
+      };
+    }
+    function ue() {
+      if (!(!le.value || !F.value)) {
+        if (Q.value) {
+          $.value.length === 0 && ($.value = [J()]);
+          return;
+        }
+        O.value.length === 0 && (O.value = [I()]);
+      }
+    }
+    function he() {
+      var d, c, b;
+      const e = ee(((d = m.value) == null ? void 0 : d.customOptions) ?? []), l = ee(((c = m.value) == null ? void 0 : c.customTimeRanges) ?? []);
+      K.value = ((b = e[0]) == null ? void 0 : b.operator) ?? ae(), F.value = e.length > 0 || l.length > 0, O.value = e, $.value = l, ue();
+    }
+    function L(e) {
+      K.value = e, O.value = O.value.map((l, d) => {
+        const c = O.value[d];
+        if (!c)
+          return I(e);
+        const b = pe(e), k = N(
+          Array.isArray(c.values) ? [...c.values] : [],
+          b
+        );
+        return {
+          ...c,
+          operator: e,
+          values: k
+        };
+      });
+    }
+    function _e() {
+      O.value = [...O.value, I()];
+    }
+    function te(e) {
+      O.value.length <= 1 || (O.value = O.value.filter((l, d) => d !== e));
+    }
+    function $e() {
+      $.value = [...$.value, J()];
+    }
+    function Ne(e) {
+      $.value.length <= 1 || ($.value = $.value.filter(
+        (l, d) => d !== e
+      ));
+    }
+    function Ue(e, l, d) {
+      const c = $.value[e];
+      c && ($.value[e] = {
+        ...c,
+        [l]: ie(d)
+      });
+    }
+    function We(e) {
+      return e.length === 0 || e.some((l) => l == null || l === "");
+    }
+    function i() {
+      if (!F.value) return !0;
+      if (Q.value) {
+        const d = $.value.map((b) => b.name.trim()).filter(Boolean);
+        return $.value.some(
+          (b) => !b.name.trim() || !b.startTime || !b.endTime
+        ) ? (f.open({
+          message: r("report.section.filter.invalidCustomTimeRange"),
+          type: "error"
+        }), !1) : new Set(d).size !== d.length ? (f.open({
+          message: r("report.section.filter.customTimeRangeNamesMustBeUnique"),
+          type: "error"
+        }), !1) : !0;
+      }
+      const e = O.value.map((d) => d.label.trim()).filter(Boolean);
+      return O.value.some(
+        (d) => !d.label.trim() || We(d.values)
+      ) ? (f.open({ message: r("report.section.filter.invalidCustomOption"), type: "error" }), !1) : new Set(e).size !== e.length ? (f.open({
+        message: r("report.section.filter.customOptionLabelsMustBeUnique"),
+        type: "error"
+      }), !1) : !0;
+    }
+    fe(x, (e) => {
+      var l, d, c, b, k, z, de;
+      e && (E.value = ((l = m.value) == null ? void 0 : l.label) || "", w.value = S.schemas.find(
+        (me) => {
+          var H;
+          return me.name === ((H = m.value) == null ? void 0 : H.schemaName);
+        }
+      ), u.value = (d = q.value.find(
+        (me) => {
+          var H;
+          return me.value.name === ((H = m.value) == null ? void 0 : H.name);
+        }
+      )) == null ? void 0 : d.value, M.value = (c = m.value) == null ? void 0 : c.option, Y.value = ((b = m.value) == null ? void 0 : b.tileIds) || [], B.value = ((k = m.value) == null ? void 0 : k.filters) || [], _.value = !!((z = m.value) != null && z.dataFormula), P.value = ((de = m.value) == null ? void 0 : de.dataFormula) || "", he());
+    }), fe(F, (e) => {
+      var l;
+      e && (K.value = ((l = O.value[0]) == null ? void 0 : l.operator) ?? ae(), ue());
+    }), fe(le, (e) => {
+      if (!e) {
+        F.value = !1, O.value = [], $.value = [];
+        return;
+      }
+      ue();
+    }), fe(Q, () => {
+      ue();
+    }), fe(se, (e) => {
+      var d;
+      const l = (d = e[0]) == null ? void 0 : d.value;
+      l && (e.some((c) => c.value === K.value) || L(l));
+    });
+    const t = T(
+      () => S.schemas.map((e) => ({
+        label: e.label || e.name,
+        value: e
+      }))
+    ), q = T(() => {
+      var e;
+      return (((e = w.value) == null ? void 0 : e.fields) || []).filter((l) => l.type !== X.Numeric).map((l) => ({
+        label: l.label || l.name,
+        value: l
+      }));
+    }), U = T(() => {
+      var e;
+      return ((e = u.value) == null ? void 0 : e.type) !== X.Timestamp ? [] : ml(r);
+    }), j = T(() => S.tiles.reduce((e, l, d) => {
+      var k, z;
+      const c = l.widget.config.schemaNames ?? [], b = (l.widget.config.joinDatasources ?? []).flatMap(
+        (de) => de.schemaNames ?? []
+      );
+      return [...c, ...b].includes(((k = w.value) == null ? void 0 : k.name) || "") && e.push({
+        label: (z = l == null ? void 0 : l.widget.title) != null && z.trim() ? l.widget.title : `Widget ${d + 1}`,
+        value: l.id
+      }), e;
+    }, [])), ne = T(
+      () => S.schemas.flatMap(
+        (e) => (e.fields ?? []).map((l) => ({
+          ...l,
+          labels: [
+            Se(r, a, e.label, "schema"),
+            Se(r, a, l.label || l.name, "other")
+          ]
+        }))
+      )
+    );
+    function we(e) {
+      var l;
+      e.name !== ((l = w.value) == null ? void 0 : l.name) && (w.value = e, u.value = void 0, K.value = ve.Equal, F.value = !1, O.value = [], $.value = []);
+    }
+    function Fe(e) {
+      u.value = e, M.value = e.type === X.Timestamp ? Ve.DateTime : void 0, K.value = ae(), F.value = !1, O.value = [], $.value = [];
+    }
+    function Ce(e, l) {
+      switch (e) {
+        case X.Timestamp:
+          return l === Ve.DateTime || l === Ve.TimeOfDay ? ve.Between : ve.Equal;
+        case X.Bool:
+        case X.String:
+        case X.Numeric:
+          return ve.Equal;
+        default:
+          throw new Error(`Unsupported data type: ${e}`);
+      }
+    }
+    function De() {
+      if (!w.value) {
+        f.open({ message: r("report.section.filter.invalidSchema"), type: "error" });
+        return;
+      }
+      if (!u.value) {
+        f.open({ message: r("report.section.filter.invalidDimension"), type: "error" });
+        return;
+      }
+      const e = B.value.filter((c) => c ? !t.value.some((k) => k.value.name === c.schemaName) : !0);
+      if (e.length > 0) {
+        const c = e.filter((k) => !!k).map((k) => k.schemaName), b = e.some((k) => !k) ? `, ${r("report.section.filter.unknownFilters")}` : "";
+        f.open({
+          message: r("report.section.filter.invalidFiltersSchemaNotFound", {
+            schemas: c.join(", "),
+            unknownFiltersSuffix: b
+          }),
+          type: "error"
+        });
+        return;
+      }
+      if (!i())
+        return;
+      const l = F.value && !Q.value ? O.value.map((c) => ({
+        label: c.label.trim(),
+        operator: c.operator ?? ae(),
+        values: N(
+          [...c.values],
+          pe(c.operator)
+        )
+      })) : void 0, d = F.value && Q.value ? $.value.map((c) => ({
+        name: c.name.trim(),
+        startTime: c.startTime,
+        endTime: c.endTime
+      })) : void 0;
+      m.value = {
+        schemaName: w.value.name,
+        name: u.value.name,
+        label: E.value,
+        operator: Ce(
+          u.value.type,
+          u.value.type === X.Timestamp ? M.value ?? Ve.DateTime : null
+        ),
+        option: u.value.type === X.Timestamp ? M.value : null,
+        values: [],
+        tileIds: [...Y.value],
+        filters: ee(B.value),
+        dataFormula: _.value ? P.value : void 0,
+        customOptions: l,
+        customTimeRanges: d
+      }, x.value = !1;
+    }
+    function Me() {
+      x.value = !1;
+    }
+    const qe = T(() => {
+      var e;
+      return [
+        (e = w.value) == null ? void 0 : e.name,
+        ...B.value.map((l) => l.schemaName)
+      ];
+    });
+    function ze(e) {
+      var k, z, de, me;
+      const l = S.tiles.find((H) => H.id === e.value), d = ((z = (k = l == null ? void 0 : l.widget) == null ? void 0 : k.config) == null ? void 0 : z.schemaNames) ?? [], c = (((me = (de = l == null ? void 0 : l.widget) == null ? void 0 : de.config) == null ? void 0 : me.joinDatasources) ?? []).flatMap(
+        (H) => H.schemaNames ?? []
+      ), b = [...d, ...c];
+      return qe.value.filter((H) => !!H).some((H) => !b.includes(H));
+    }
+    return (e, l) => {
+      const d = h("FmTextField"), c = h("FmSelect"), b = h("FmCheckbox"), k = h("FmTimePicker"), z = h("FmButton"), de = h("FmTextarea"), me = h("FmLabel"), H = h("FmIcon"), nl = h("FmTooltip"), rl = h("FmForm"), il = h("FmDialog");
+      return s(), V(il, {
+        modelValue: x.value,
+        "onUpdate:modelValue": l[11] || (l[11] = (Be) => x.value = Be),
+        overlay: !0,
+        "z-index": 10
+      }, {
+        "dialog-header": v(() => [
+          Ae(G(o(r)("report.section.filter.globalFilter")), 1)
+        ]),
+        default: v(() => [
+          n(rl, {
+            ref: "form",
+            class: "flex flex-col gap-2 w-[490px]"
+          }, {
+            default: v(() => {
+              var Be;
+              return [
+                n(d, {
+                  modelValue: E.value,
+                  "onUpdate:modelValue": l[0] || (l[0] = (y) => E.value = y),
+                  placeholder: o(r)("report.section.filter.displayName"),
+                  label: o(r)("report.section.filter.displayName"),
+                  class: "mb-2"
+                }, null, 8, ["modelValue", "placeholder", "label"]),
+                n(Je, {
+                  "model-value": w.value,
+                  items: t.value,
+                  placeholder: o(r)("report.section.schema.title"),
+                  label: o(r)("report.section.schema.title"),
+                  "onUpdate:modelValue": l[1] || (l[1] = (y) => we(y))
+                }, null, 8, ["model-value", "items", "placeholder", "label"]),
+                n(Je, {
+                  "model-value": u.value,
+                  items: q.value,
+                  placeholder: o(r)("report.section.dimension.title"),
+                  label: o(r)("report.section.dimension.title"),
+                  "onUpdate:modelValue": l[2] || (l[2] = (y) => Fe(y))
+                }, null, 8, ["model-value", "items", "placeholder", "label"]),
+                ((Be = u.value) == null ? void 0 : Be.type) === o(X).Timestamp ? (s(), V(c, {
+                  key: 0,
+                  modelValue: M.value,
+                  "onUpdate:modelValue": l[3] || (l[3] = (y) => M.value = y),
+                  items: U.value,
+                  placeholder: o(r)("report.section.filter.timeFormatter"),
+                  label: o(r)("report.section.filter.timeFormatter")
+                }, null, 8, ["modelValue", "items", "placeholder", "label"])) : A("", !0),
+                le.value ? (s(), V(b, {
+                  key: 1,
+                  modelValue: F.value,
+                  "onUpdate:modelValue": l[4] || (l[4] = (y) => F.value = y),
+                  label: o(r)("report.section.filter.customOptions"),
+                  value: !0
+                }, null, 8, ["modelValue", "label"])) : A("", !0),
+                le.value && F.value ? (s(), C("div", kl, [
+                  Q.value ? (s(!0), C(Z, { key: 0 }, ce($.value, (y, re) => (s(), C("div", {
+                    key: `custom-time-range-${re}`,
+                    class: "flex flex-col gap-2"
+                  }, [
+                    g("div", Cl, [
+                      n(d, {
+                        modelValue: y.name,
+                        "onUpdate:modelValue": (oe) => y.name = oe,
+                        label: o(r)("report.section.filter.label")
+                      }, null, 8, ["modelValue", "onUpdate:modelValue", "label"]),
+                      n(k, {
+                        "model-value": p(y.startTime),
+                        label: o(r)("report.date.startingTime"),
+                        "onUpdate:modelValue": (oe) => Ue(re, "startTime", oe)
+                      }, null, 8, ["model-value", "label", "onUpdate:modelValue"]),
+                      n(k, {
+                        "model-value": p(y.endTime),
+                        label: o(r)("report.date.endingTime"),
+                        "onUpdate:modelValue": (oe) => Ue(re, "endTime", oe)
+                      }, null, 8, ["model-value", "label", "onUpdate:modelValue"]),
+                      $.value.length > 1 ? (s(), C("div", Tl, [
+                        n(z, {
+                          icon: "delete",
+                          variant: "tertiary",
+                          onClick: (oe) => Ne(re)
+                        }, null, 8, ["onClick"])
+                      ])) : A("", !0)
+                    ])
+                  ]))), 128)) : (s(), C(Z, { key: 1 }, [
+                    g("p", Sl, G(o(r)("report.section.filter.operator")), 1),
+                    se.value.length > 0 ? (s(), V(Je, {
+                      key: 0,
+                      "model-value": K.value,
+                      items: se.value,
+                      placeholder: o(r)("report.section.filter.operator"),
+                      "onUpdate:modelValue": l[5] || (l[5] = (y) => L(y))
+                    }, null, 8, ["model-value", "items", "placeholder"])) : A("", !0),
+                    (s(!0), C(Z, null, ce(O.value, (y, re) => (s(), C("div", {
+                      key: `custom-option-${re}`,
+                      class: "flex flex-col gap-2"
+                    }, [
+                      g("div", {
+                        class: ke([
+                          "grid grid-cols-1 gap-2 p-2 sm:items-end text-fm-color-typo-primary fm-typo-en-body-lg-600 border-neutral-300 rounded-md border",
+                          "sm:grid-cols-[1fr_1.6fr_auto]"
+                        ])
+                      }, [
+                        g("span", Ol, G(o(r)("report.section.filter.label")), 1),
+                        n(d, {
+                          modelValue: y.label,
+                          "onUpdate:modelValue": (oe) => y.label = oe
+                        }, null, 8, ["modelValue", "onUpdate:modelValue"]),
+                        (s(), V(cl, {
+                          key: `custom-option-value-${re}-${y.operator ?? ""}-${M.value ?? ""}`,
+                          modelValue: y.values,
+                          "onUpdate:modelValue": (oe) => y.values = oe,
+                          config: pe(y.operator),
+                          option: M.value
+                        }, null, 8, ["modelValue", "onUpdate:modelValue", "config", "option"])),
+                        O.value.length > 1 ? (s(), C("div", $l, [
+                          n(z, {
+                            icon: "delete",
+                            variant: "tertiary",
+                            onClick: (oe) => te(re)
+                          }, null, 8, ["onClick"])
+                        ])) : A("", !0)
+                      ])
+                    ]))), 128))
+                  ], 64)),
+                  n(z, {
+                    class: "w-full",
+                    variant: "primary",
+                    icon: "add",
+                    "icon-position": "prepend",
+                    onClick: l[6] || (l[6] = (y) => Q.value ? $e() : _e())
+                  })
+                ])) : A("", !0),
+                n(b, {
+                  modelValue: _.value,
+                  "onUpdate:modelValue": l[7] || (l[7] = (y) => _.value = y),
+                  label: o(r)("report.section.filter.advance"),
+                  value: !0
+                }, null, 8, ["modelValue", "label"]),
+                _.value ? (s(), V(de, {
+                  key: 3,
+                  modelValue: P.value,
+                  "onUpdate:modelValue": l[8] || (l[8] = (y) => P.value = y),
+                  placeholder: o(r)("report.section.filter.dataFormula")
+                }, null, 8, ["modelValue", "placeholder"])) : A("", !0),
+                n(pl, {
+                  modelValue: B.value,
+                  "onUpdate:modelValue": l[9] || (l[9] = (y) => B.value = y),
+                  options: ne.value
+                }, null, 8, ["modelValue", "options"]),
+                n(me, { class: "mt-2 fm-typo-en-body-lg-600" }, {
+                  default: v(() => [
+                    Ae(G(o(r)("report.section.filter.applyWidget")), 1)
+                  ]),
+                  _: 1
+                }),
+                D.tiles.length > 0 ? (s(), C("div", Nl, [
+                  (s(!0), C(Z, null, ce(j.value, (y) => (s(), C("div", {
+                    key: y.value,
+                    class: "flex items-center"
+                  }, [
+                    n(b, {
+                      modelValue: Y.value,
+                      "onUpdate:modelValue": l[10] || (l[10] = (re) => Y.value = re),
+                      label: y.label,
+                      value: y.value
+                    }, null, 8, ["modelValue", "label", "value"]),
+                    ze(y) ? (s(), V(nl, {
+                      key: 0,
+                      content: o(r)("report.section.filter.missingFilterSchema"),
+                      "z-index": 99,
+                      class: "ml-2"
+                    }, {
+                      default: v(() => [
+                        n(H, {
+                          name: "warning",
+                          class: "text-fm-color-system-error-300"
+                        })
+                      ]),
+                      _: 1
+                    }, 8, ["content"])) : A("", !0)
+                  ]))), 128))
+                ])) : (s(), V(me, {
+                  key: 5,
+                  class: "fm-typo-en-body-lg-400",
+                  label: o(r)("report.section.filter.noWidget")
+                }, null, 8, ["label"]))
+              ];
+            }),
+            _: 1
+          }, 512)
+        ]),
+        "dialog-footer": v(() => [
+          l[12] || (l[12] = g("div", { class: "grow" }, null, -1)),
+          n(z, {
+            label: o(r)("report.common.cancel"),
+            variant: "tertiary",
+            onClick: Me
+          }, null, 8, ["label"]),
+          n(z, {
+            label: o(r)("report.common.confirm"),
+            onClick: De
+          }, null, 8, ["label"])
+        ]),
+        _: 1
+      }, 8, ["modelValue"]);
+    };
+  }
+}), Dl = { class: "flex flex-col gap-24 top-0 bg-fm-color-neutral-white z-10" }, Ml = { class: "flex flex-col gap-24 top-0 bg-fm-color-neutral-white z-10" }, ql = { class: "flex items-center gap-8" }, Bl = { class: "flex flex-col gap-24 top-0 bg-fm-color-neutral-white z-10" }, Rl = { class: "flex items-center gap-1 max-w-[195px] w-[195px]" }, Il = { class: "line-clamp-2 overflow-hidden max-w-[195px] w-[195px]" }, Wl = { class: "flex flex-col gap-24" }, zl = { class: "line-clamp-2 overflow-hidden max-w-[195px] w-[195px]" }, Xe = /* @__PURE__ */ ye({
+  __name: "ReportEditorTab",
+  props: /* @__PURE__ */ ge({
+    hideConfiguration: {
+      type: Boolean,
+      default: !1
+    }
+  }, {
+    modelValue: { required: !0 },
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ ge(["hideConfiguration"], ["update:modelValue"]),
+  setup(D, { emit: r }) {
+    const a = be(D, "modelValue"), { breakpoints: m } = Ie(), x = D, f = r, S = ll(), E = tl(), w = R(), {
+      currentSelectWidgetType: u,
+      categories: M,
+      editingTile: Y,
+      editingTileIndex: B,
+      editingGlobalFilter: P,
+      editingGlobalFilterIndex: _
+    } = Re(el()), { schemas: F } = Re(yl()), { globalFilters: O } = Re(Ke()), { getGlobalFilterLabel: $ } = Ke(), { promptMessage: K } = al(), ee = R(!1), W = R(!1), { t: p, te: ie, locale: le } = Oe(), Q = R(void 0), se = T(() => {
+      const i = a.value.tiles.flatMap((t) => {
+        var j;
+        const q = t.widget.config.schemaNames ?? [], U = ((j = t.widget.config.joinDatasources) == null ? void 0 : j.flatMap((ne) => ne.schemaNames ?? [])) ?? [];
+        return [...q, ...U];
+      });
+      return [...new Set(i)].reduce((t, q) => {
+        const U = F.value.find((j) => j.name === q);
+        return U && t.push(U), t;
+      }, []);
+    });
+    function ae(i) {
+      if (!i) return "";
+      const t = `report.widget.types.${i.toLowerCase()}`;
+      return ie(t) ? p(t) : Se(p, ie, i, "other");
+    }
+    fe(
+      () => u.value,
+      () => {
+        u.value !== void 0 && (Q.value = vl(u.value), Y.value = Q.value, B.value = -1, S.push({
+          name: "tileEditor",
+          query: E.query
+        }));
+      },
+      { immediate: !0 }
+    ), fe(
+      () => a.value.tiles,
+      (i) => {
+        i.forEach((t) => {
+          t.id || (t.id = Te());
+        });
+      },
+      { immediate: !0, deep: !0 }
+    );
+    const pe = [
+      {
+        label: "report.common.edit",
+        selected: !1,
+        variant: "tertiary",
+        onClick: (i) => {
+          B.value = i, Y.value = JSON.parse(JSON.stringify(a.value.tiles[i])), S.push({
+            name: "tileEditor",
+            query: E.query
+          });
+        }
+      },
+      {
+        label: "report.common.duplicate",
+        selected: !1,
+        variant: "tertiary",
+        onClick: (i) => {
+          const t = {
+            ...JSON.parse(JSON.stringify(a.value.tiles[i])),
+            id: Te()
+          };
+          a.value.tiles.push(t);
+        }
+      },
+      {
+        label: "report.common.remove",
+        selected: !1,
+        variant: "destructive",
+        onClick: async (i) => {
+          if (await K({
+            title: p("report.editor.deleteWidget"),
+            message: p("report.editor.deleteWidgetConfirm", {
+              title: a.value.tiles[i].widget.title
+            })
+          })) {
+            const q = a.value.tiles[i].id;
+            a.value.tiles.splice(i, 1), a.value.globalFilters && a.value.globalFilters.forEach((U) => {
+              var j;
+              U.tileIds = (j = U.tileIds) == null ? void 0 : j.filter((ne) => ne !== q);
+            });
+          }
+        }
+      }
+    ], N = [
+      {
+        label: "report.common.edit",
+        selected: !1,
+        variant: "tertiary",
+        onClick: (i) => {
+          var t;
+          _.value = i, P.value = JSON.parse(JSON.stringify((t = a.value.globalFilters) == null ? void 0 : t[i])), ee.value = !0;
+        }
+      },
+      {
+        label: "report.common.duplicate",
+        selected: !1,
+        variant: "tertiary",
+        onClick: (i) => {
+          var U;
+          const t = (U = a.value.globalFilters) == null ? void 0 : U[i];
+          if (!t) return;
+          const q = JSON.parse(JSON.stringify(t));
+          a.value.globalFilters || (a.value.globalFilters = []), a.value.globalFilters.push(q);
+        }
+      },
+      {
+        label: "report.common.remove",
+        selected: !1,
+        variant: "destructive",
+        onClick: async (i) => {
+          var U, j;
+          const t = (U = a.value.globalFilters) == null ? void 0 : U[i];
+          if (!t) return;
+          await K({
+            title: p("report.editor.deleteWidget"),
+            message: p("report.editor.deleteWidgetConfirm", {
+              title: $(t)
+            })
+          }) && ((j = a.value.globalFilters) == null || j.splice(i, 1));
+        }
+      }
+    ], I = T(() => M.value.map((i) => ({
+      label: p(`report.category.${i.name}`),
+      value: i.id
+    }))), { sessionUser: J } = _l(), ue = T(
+      () => {
+        var i, t, q, U;
+        return ((t = (i = J.value) == null ? void 0 : i.role) == null ? void 0 : t.isAdmin) === !0 || ((U = (q = J.value) == null ? void 0 : q.role) == null ? void 0 : U.isStaff) === !0;
+      }
+    ), he = T({
+      get: () => a.value.queryVersion === "v2",
+      set: (i) => {
+        a.value.queryVersion = i ? "v2" : "v1", i ? a.value.queryDatasource = a.value.queryDatasource ?? "pg" : a.value.queryDatasource = void 0;
+      }
+    }), L = [
+      { label: p("report.common.postgresql"), value: "pg" },
+      { label: p("report.common.bigquery"), value: "bq" }
+    ], _e = [
+      { label: p("report.common.noBatch"), value: "none" },
+      { label: p("report.common.days"), value: "days" },
+      { label: p("report.common.locations"), value: "locations" }
+    ], te = T({
+      get: () => {
+        var i, t;
+        return (i = a.value.batch) != null && i.days ? "days" : (t = a.value.batch) != null && t.locations ? "locations" : "none";
+      },
+      set: (i) => {
+        var t, q;
+        i === "none" ? a.value.batch = void 0 : i === "days" ? a.value.batch = { days: ((t = a.value.batch) == null ? void 0 : t.days) || 1 } : i === "locations" && (a.value.batch = { locations: ((q = a.value.batch) == null ? void 0 : q.locations) || 10 });
+      }
+    }), $e = T({
+      get: () => {
+        var i, t;
+        if (te.value === "days") return ((i = a.value.batch) == null ? void 0 : i.days) ?? 1;
+        if (te.value === "locations") return ((t = a.value.batch) == null ? void 0 : t.locations) ?? 1;
+      },
+      set: (i) => {
+        i && (te.value === "days" ? a.value.batch = { days: i } : te.value === "locations" && (a.value.batch = { locations: i }));
+      }
+    }), Ne = T({
+      get: () => Se(p, ie, a.value.name, "other"),
+      set: (i) => {
+        a.value.name = i;
+      }
+    });
+    function Ue(i) {
+      var t;
+      return !((t = i.tileIds) != null && t.length);
+    }
+    function We(i) {
+      return !se.value.find((t) => t.name === i.schemaName);
+    }
+    return fe(
+      () => a.value.globalFilters,
+      (i) => {
+        O.value = JSON.parse(JSON.stringify(i || []));
+      },
+      { deep: !0, immediate: !0 }
+    ), (i, t) => {
+      const q = h("FmTextField"), U = h("FmSelect"), j = h("FmSwitch"), ne = h("FmButton"), we = h("FmIcon"), Fe = h("FmTooltip"), Ce = h("FmMenuItem"), De = h("FmMenu"), Me = h("FmListItem"), qe = h("FmList"), ze = h("FmForm");
+      return s(), V(sl(o(m).lg || o(m).md ? Vl : xl), {
+        "model-value": x.hideConfiguration,
+        "onUpdate:modelValue": t[13] || (t[13] = (e) => f("hideConfiguration", e))
+      }, {
+        default: v(() => [
+          n(Ul, {
+            "is-open": ee.value,
+            "onUpdate:isOpen": t[0] || (t[0] = (e) => ee.value = e),
+            "global-filter": o(P),
+            tiles: a.value.tiles,
+            schemas: se.value,
+            "onUpdate:globalFilter": t[1] || (t[1] = (e) => {
+              e && (a.value.globalFilters || (a.value.globalFilters = []), typeof o(_) == "number" && o(_) >= 0 ? a.value.globalFilters[o(_)] = e : a.value.globalFilters.push(e));
+            })
+          }, null, 8, ["is-open", "global-filter", "tiles", "schemas"]),
+          n(wl, {
+            modelValue: o(u),
+            "onUpdate:modelValue": t[2] || (t[2] = (e) => Ze(u) ? u.value = e : null),
+            "is-open": W.value,
+            "onUpdate:isOpen": t[3] || (t[3] = (e) => W.value = e)
+          }, null, 8, ["modelValue", "is-open"]),
+          n(ze, {
+            ref_key: "form",
+            ref: w,
+            class: "px-6 py-16 flex flex-col gap-24 overflow-y-auto overflow-x-hidden"
+          }, {
+            default: v(() => [
+              n(Ee, { class: "border-solid" }, {
+                header: v(() => [
+                  g("p", null, G(o(p)("report.editor.reportInfo")), 1),
+                  t[14] || (t[14] = g("div", { class: "grow" }, null, -1))
+                ]),
+                content: v(() => [
+                  g("div", Dl, [
+                    n(q, {
+                      modelValue: Ne.value,
+                      "onUpdate:modelValue": t[4] || (t[4] = (e) => Ne.value = e),
+                      label: o(p)("report.common.name"),
+                      placeholder: o(p)("report.common.name")
+                    }, null, 8, ["modelValue", "label", "placeholder"]),
+                    (s(), V(U, {
+                      key: `category-${o(le)}`,
+                      modelValue: a.value.category,
+                      "onUpdate:modelValue": t[5] || (t[5] = (e) => a.value.category = e),
+                      label: o(p)("report.common.category"),
+                      items: I.value
+                    }, null, 8, ["modelValue", "label", "items"])),
+                    n(q, {
+                      modelValue: a.value.description,
+                      "onUpdate:modelValue": t[6] || (t[6] = (e) => a.value.description = e),
+                      label: o(p)("report.common.description"),
+                      placeholder: o(p)("report.common.description")
+                    }, null, 8, ["modelValue", "label", "placeholder"])
+                  ])
+                ]),
+                _: 1
+              }),
+              n(Ee, {
+                class: "border-solid",
+                "is-open": !1
+              }, {
+                header: v(() => [
+                  g("p", null, G(o(p)("report.editor.advancedUsage")), 1),
+                  t[15] || (t[15] = g("div", { class: "grow" }, null, -1))
+                ]),
+                content: v(() => [
+                  g("div", Ml, [
+                    g("div", ql, [
+                      t[16] || (t[16] = g("span", { class: "fm-typo-en-body-sm-400 text-fm-color-typo-secondary" }, "V2", -1)),
+                      n(j, {
+                        modelValue: he.value,
+                        "onUpdate:modelValue": t[7] || (t[7] = (e) => he.value = e)
+                      }, null, 8, ["modelValue"])
+                    ]),
+                    he.value && ue.value ? (s(), V(U, {
+                      key: 0,
+                      modelValue: a.value.queryDatasource,
+                      "onUpdate:modelValue": t[8] || (t[8] = (e) => a.value.queryDatasource = e),
+                      label: o(p)("report.common.queryDatasource"),
+                      items: L
+                    }, null, 8, ["modelValue", "label"])) : A("", !0),
+                    n(U, {
+                      modelValue: te.value,
+                      "onUpdate:modelValue": t[9] || (t[9] = (e) => te.value = e),
+                      label: o(p)("report.common.batch"),
+                      items: _e
+                    }, null, 8, ["modelValue", "label"]),
+                    te.value !== "none" ? (s(), V(q, {
+                      key: 1,
+                      modelValue: $e.value,
+                      "onUpdate:modelValue": t[10] || (t[10] = (e) => $e.value = e),
+                      modelModifiers: { number: !0 },
+                      label: te.value === "days" ? o(p)("report.common.days") : o(p)("report.common.locations"),
+                      type: "number"
+                    }, null, 8, ["modelValue", "label"])) : A("", !0)
+                  ])
+                ]),
+                _: 1
+              }),
+              n(Ee, {
+                class: "border-solid",
+                "is-open": !1
+              }, {
+                header: v(() => [
+                  g("p", null, G(o(p)("report.section.filter.globalFilter")), 1),
+                  t[17] || (t[17] = g("div", { class: "grow" }, null, -1))
+                ]),
+                content: v(() => [
+                  g("div", Bl, [
+                    n(ne, {
+                      label: o(p)("report.section.filter.addGlobalFilter"),
+                      variant: "secondary",
+                      icon: "add",
+                      "icon-position": "prepend",
+                      "border-color": o(xe).ColorPrimary,
+                      "text-color": o(xe).ColorPrimary,
+                      onClick: t[11] || (t[11] = () => {
+                        _.value = null, P.value = null, ee.value = !0;
+                      })
+                    }, null, 8, ["label", "border-color", "text-color"]),
+                    n(qe, null, {
+                      default: v(() => [
+                        n(o(Ge), {
+                          list: a.value.globalFilters,
+                          "item-key": "`${element.schemaName}-${element.name}`",
+                          class: "flex flex-col gap-2 cursor-grab",
+                          handle: ".handle"
+                        }, {
+                          item: v(({ element: e, index: l }) => [
+                            n(Me, { class: "!cursor-grab border rounded-md border-neutral-300" }, {
+                              default: v(() => [
+                                n(we, {
+                                  name: "drag_handle",
+                                  class: "handle"
+                                }),
+                                g("div", Rl, [
+                                  n(Fe, {
+                                    "z-index": 99,
+                                    content: o($)(e),
+                                    class: "handle"
+                                  }, {
+                                    default: v(() => [
+                                      g("p", Il, G(o($)(e)), 1)
+                                    ]),
+                                    _: 2
+                                  }, 1032, ["content"]),
+                                  We(e) ? (s(), V(Fe, {
+                                    key: 0,
+                                    content: o(p)("report.section.filter.missingSchema"),
+                                    "z-index": 99
+                                  }, {
+                                    default: v(() => [
+                                      n(we, {
+                                        name: "warning",
+                                        class: "text-fm-color-system-error-300"
+                                      })
+                                    ]),
+                                    _: 1
+                                  }, 8, ["content"])) : Ue(e) ? (s(), V(Fe, {
+                                    key: 1,
+                                    content: o(p)("report.section.filter.missingTileIds"),
+                                    "z-index": 99
+                                  }, {
+                                    default: v(() => [
+                                      n(we, {
+                                        name: "warning",
+                                        class: "text-fm-color-system-warning-300"
+                                      })
+                                    ]),
+                                    _: 1
+                                  }, 8, ["content"])) : A("", !0)
+                                ]),
+                                t[18] || (t[18] = g("div", { class: "grow" }, null, -1)),
+                                n(De, {
+                                  trigger: "click",
+                                  shift: !0,
+                                  "stop-click-propagation": !0
+                                }, {
+                                  "menu-button": v(() => [
+                                    n(ne, {
+                                      "append-icon": "more_vert",
+                                      variant: "tertiary"
+                                    })
+                                  ]),
+                                  default: v(() => [
+                                    (s(), C(Z, null, ce(N, (d, c) => n(Ce, {
+                                      key: c,
+                                      onClick: (b) => d.onClick(l)
+                                    }, {
+                                      label: v(() => [
+                                        g("p", {
+                                          class: ke(
+                                            d.variant === "destructive" ? " text-fm-color-system-error-300" : ""
+                                          )
+                                        }, G(o(p)(d.label)), 3)
+                                      ]),
+                                      _: 2
+                                    }, 1032, ["onClick"])), 64))
+                                  ]),
+                                  _: 2
+                                }, 1024)
+                              ]),
+                              _: 2
+                            }, 1024)
+                          ]),
+                          _: 1
+                        }, 8, ["list"])
+                      ]),
+                      _: 1
+                    })
+                  ])
+                ]),
+                _: 1
+              }),
+              g("div", Wl, [
+                n(ne, {
+                  label: o(p)("report.editor.addWidget"),
+                  variant: "secondary",
+                  icon: "add",
+                  "icon-position": "prepend",
+                  "border-color": o(xe).ColorPrimary,
+                  "text-color": o(xe).ColorPrimary,
+                  onClick: t[12] || (t[12] = (e) => W.value = !0)
+                }, null, 8, ["label", "border-color", "text-color"]),
+                n(qe, null, {
+                  default: v(() => [
+                    n(o(Ge), {
+                      list: a.value.tiles,
+                      "item-key": "id",
+                      class: "flex flex-col gap-2 cursor-grab",
+                      handle: ".handle"
+                    }, {
+                      item: v(({ element: e, index: l }) => [
+                        n(Me, { class: "!cursor-grab border rounded-md border-neutral-300" }, {
+                          default: v(() => [
+                            n(we, {
+                              name: "drag_handle",
+                              class: "handle"
+                            }),
+                            n(Fe, {
+                              content: e.widget.title ? ae(e.widget.title) : o(p)("report.editor.widget", { index: l + 1 }),
+                              class: "handle"
+                            }, {
+                              default: v(() => [
+                                g("p", zl, G(e.widget.title ? ae(e.widget.title) : o(p)("report.editor.widget", { index: l + 1 })), 1)
+                              ]),
+                              _: 2
+                            }, 1032, ["content"]),
+                            t[19] || (t[19] = g("div", { class: "grow" }, null, -1)),
+                            n(De, {
+                              trigger: "click",
+                              shift: !0,
+                              "stop-click-propagation": !0
+                            }, {
+                              "menu-button": v(() => [
+                                n(ne, {
+                                  "append-icon": "more_vert",
+                                  variant: "tertiary"
+                                })
+                              ]),
+                              default: v(() => [
+                                (s(), C(Z, null, ce(pe, (d, c) => n(Ce, {
+                                  key: c,
+                                  onClick: (b) => d.onClick(l)
+                                }, {
+                                  label: v(() => [
+                                    g("p", {
+                                      class: ke(
+                                        d.variant === "destructive" ? " text-fm-color-system-error-300" : ""
+                                      )
+                                    }, G(o(p)(d.label)), 3)
+                                  ]),
+                                  _: 2
+                                }, 1032, ["onClick"])), 64))
+                              ]),
+                              _: 2
+                            }, 1024)
+                          ]),
+                          _: 2
+                        }, 1024)
+                      ]),
+                      _: 1
+                    }, 8, ["list"])
+                  ]),
+                  _: 1
+                })
+              ])
+            ]),
+            _: 1
+          }, 512)
+        ]),
+        _: 1
+      }, 8, ["model-value"]);
+    };
+  }
+}), El = { class: "h-full w-full overflow-x-hidden" }, Pl = { class: "flex flex-col bg-fm-color-neutral-white w-[400px]" }, Jl = { class: "flex bg-fm-color-neutral-white w-[88px]" }, Ll = {
+  key: 1,
+  class: "w-full overflow-y-auto"
+}, Al = {
+  key: 0,
+  class: "w-full grid grid-cols-12 gap-[24px] p-24"
+}, Hl = { class: "col-span-12 mb-4 flex flex-wrap gap-2 pb-2" }, jl = { key: 2 }, Gl = {
+  key: 0,
+  class: "grid grid-cols-12 gap-[16px]"
+}, Kl = { class: "col-span-12 mb-4 flex flex-wrap gap-2 pb-2" }, Ql = {
+  key: 3,
+  class: "h-full w-full flex items-start justify-center bg-fm-color-neutral-white py-24",
+  style: { backgroundColor: "#F6F8FC" }
+}, Xl = {
+  key: 0,
+  class: "w-full grid grid-cols-12 gap-[24px] p-24"
+}, Yl = /* @__PURE__ */ ye({
+  __name: "ReportEditorViewport",
+  props: /* @__PURE__ */ ge({
+    hideConfiguration: { type: Boolean, required: !1, default: !1 },
+    previewWidth: { type: Number, required: !0 },
+    previewHeight: { type: Number, required: !0 },
+    previewScale: { type: Number, required: !0 }
+  }, {
+    modelValue: { required: !0, default: () => {
+    } },
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ ge(["hideConfiguration"], ["update:modelValue"]),
+  setup(D, { emit: r }) {
+    const { breakpoints: a } = Ie(), m = be(D, "modelValue"), x = D, f = T(() => x.previewWidth > 0 && x.previewHeight > 0), S = T(() => a.value.sm || a.value.xs), E = r;
+    return (w, u) => {
+      const M = h("FmCircularProgress"), Y = h("FmButton"), B = h("FmMenuDivider"), P = h("FmCard");
+      return s(), C("div", El, [
+        m.value ? (s(), C(Z, { key: 1 }, [
+          f.value ? A("", !0) : (s(), V(fl, {
+            key: 0,
+            "model-value": !x.hideConfiguration
+          }, {
+            right: v(() => [
+              g("div", Pl, [
+                m.value ? (s(), V(Xe, {
+                  key: 0,
+                  modelValue: m.value,
+                  "onUpdate:modelValue": u[0] || (u[0] = (_) => m.value = _),
+                  "hide-configuration": x.hideConfiguration,
+                  onHideConfiguration: u[1] || (u[1] = (_) => E("hideConfiguration", _))
+                }, null, 8, ["modelValue", "hide-configuration"])) : A("", !0)
+              ])
+            ]),
+            left: v(() => [
+              g("div", Jl, [
+                n(Y, {
+                  variant: "secondary",
+                  icon: "keyboard_double_arrow_right",
+                  "border-color": o(xe).ColorPrimary,
+                  "text-color": o(xe).ColorPrimary,
+                  class: "m-24 my-16",
+                  size: "md",
+                  onClick: u[2] || (u[2] = (_) => E("hideConfiguration", !x.hideConfiguration))
+                }, null, 8, ["border-color", "text-color"])
+              ])
+            ]),
+            _: 1
+          }, 8, ["model-value"])),
+          n(B, {
+            vertical: "",
+            style: { margin: "0px" }
+          }),
+          !S.value && !f.value ? (s(), C("div", Ll, [
+            m.value.tiles.length > 0 ? (s(), C("div", Al, [
+              g("div", Hl, [
+                n(Qe)
+              ]),
+              (s(!0), C(Z, null, ce(m.value.tiles, (_, F) => (s(), V(Pe, {
+                key: `${o(Te)()}_${F}`,
+                "model-value": _,
+                index: F,
+                "hide-export": !0
+              }, null, 8, ["model-value", "index"]))), 128))
+            ])) : (s(), V(Le, { key: 1 }))
+          ])) : S.value && !f.value ? (s(), C("div", jl, [
+            n(P, { class: "px-5 pb-28" }, {
+              default: v(() => [
+                m.value.tiles.length > 0 ? (s(), C("div", Gl, [
+                  g("div", Kl, [
+                    n(Qe)
+                  ]),
+                  (s(!0), C(Z, null, ce(m.value.tiles, (_, F) => (s(), V(Pe, {
+                    key: `${o(Te)()}_${F}`,
+                    "model-value": _,
+                    index: F,
+                    "hide-export": !0
+                  }, null, 8, ["model-value", "index"]))), 128))
+                ])) : (s(), V(Le, { key: 1 }))
+              ]),
+              _: 1
+            }),
+            m.value ? (s(), V(Xe, {
+              key: 0,
+              modelValue: m.value,
+              "onUpdate:modelValue": u[3] || (u[3] = (_) => m.value = _),
+              "hide-configuration": x.hideConfiguration,
+              onHideConfiguration: u[4] || (u[4] = (_) => {
+                E("hideConfiguration", _);
+              })
+            }, null, 8, ["modelValue", "hide-configuration"])) : A("", !0)
+          ])) : (s(), C("div", Ql, [
+            g("div", {
+              style: He({
+                transformOrigin: "top center",
+                transform: `scale(${x.previewScale})`
+              })
+            }, [
+              g("div", {
+                class: "overflow-y-auto bg-white rounded-lg",
+                style: He({
+                  width: x.previewWidth + "px",
+                  height: x.previewHeight + "px"
+                })
+              }, [
+                m.value.tiles.length > 0 ? (s(), C("div", Xl, [
+                  (s(!0), C(Z, null, ce(m.value.tiles, (_, F) => (s(), V(Pe, {
+                    key: `${o(Te)()}_${F}`,
+                    "model-value": _,
+                    index: F,
+                    "hide-export": !0,
+                    "custom-screen-width": x.previewWidth
+                  }, null, 8, ["model-value", "index", "custom-screen-width"]))), 128))
+                ])) : (s(), V(Le, { key: 1 }))
+              ], 4)
+            ], 4)
+          ]))
+        ], 64)) : (s(), V(M, { key: 0 }))
+      ]);
+    };
+  }
+}), Zl = { class: "flex items-center gap-4" }, et = { class: "flex justify-center items-center gap-2 w-full" }, lt = { class: "flex gap-4" }, vt = /* @__PURE__ */ ye({
+  __name: "ReportEditor",
+  setup(D) {
+    const r = ll(), a = tl(), m = el(), { promptLoader: x } = hl(), { t: f, te: S } = Oe(), { currentReport: E, editingReport: w } = Re(m), { breakpoints: u } = Ie(), M = T(() => {
+      var N;
+      return !((N = w.value) != null && N.editable);
+    }), Y = T(() => {
+      var N;
+      return ((N = w.value) == null ? void 0 : N.name) ?? f("report.editor.newReport");
+    }), B = T(() => Se(f, S, Y.value, "other")), P = ol(), { promptMessage: _ } = al(), F = R(!1), O = T(() => [
+      { label: f("report.common.cancel"), value: "cancel", isPrimary: !1 },
+      { label: f("report.common.save"), value: "save", isPrimary: !0, prependIcon: "download" }
+    ]);
+    async function $() {
+      if (!w.value || w.value.tiles.length === 0) {
+        P.open({ message: f("report.messages.noWidget"), type: "error" });
+        return;
+      }
+      const N = M.value ? f("report.common.clone") : f("report.common.save");
+      if (await _({
+        title: `${f("report.messages.saveReport")}`,
+        message: f("report.messages.confirmAction", { action: N, name: B.value })
+      }))
+        try {
+          await x(async () => {
+            if (M.value) {
+              const J = JSON.parse(JSON.stringify(w.value));
+              J.editable = !0, J.id = "", J.name = `${J.name} ${f("report.common.duplicate")}`, J.isDefault = !1, await m.createOrUpdateReport(J);
+            } else
+              w.value && await m.createOrUpdateReport(w.value);
+            r.push({
+              name: "reportView",
+              query: a.query
+            });
+          });
+        } catch (J) {
+          console.log(J), P.open({
+            message: f("report.messages.failedToAction", { action: N }),
+            type: "error"
+          });
+        }
+    }
+    async function K() {
+      var I;
+      if (!w.value) return;
+      await _({
+        title: f("report.common.report", 1),
+        message: f("report.editor.notSaved", { name: (I = w.value) == null ? void 0 : I.name })
+      }) && (w.value = JSON.parse(JSON.stringify(E.value)), r.back());
+    }
+    ul(() => {
+      w.value || r.push({ name: "reports" });
+    });
+    const ee = [
+      {
+        labelKey: "report.common.default",
+        width: void 0,
+        height: void 0
+      },
+      {
+        labelKey: "report.editor.devices.desktop",
+        width: 1920,
+        height: 1080
+      },
+      {
+        labelKey: "report.editor.devices.tablet",
+        width: 820,
+        height: 1180
+      },
+      {
+        labelKey: "report.editor.devices.phone",
+        width: 390,
+        height: 859
+      }
+    ], W = R(ee[0]), p = R(!1), ie = T(() => p.value ? Math.max(W.value.width || 0, W.value.height || 0) : Math.min(W.value.width || 0, W.value.height || 0)), le = T(() => p.value ? Math.min(W.value.width || 0, W.value.height || 0) : Math.max(W.value.width || 0, W.value.height || 0)), Q = T(() => window.innerHeight - 72 - 56), se = T(() => {
+      if (!ie.value) return 1;
+      let N = (Q.value - 48) / ie.value, I = le.value * N;
+      return I > window.innerWidth && (N = window.innerWidth / le.value, I = le.value * N), N > 1 ? 1 : N;
+    });
+    function ae(N) {
+      W.value = N;
+    }
+    function pe() {
+      p.value = !p.value;
+    }
+    return (N, I) => {
+      const J = h("FmTooltip"), ue = h("FmButton"), he = h("FmPageHead");
+      return s(), V(gl, null, {
+        default: v(() => [
+          n(he, {
+            "data-editor-header": "true",
+            actions: O.value,
+            "onClick:action": I[0] || (I[0] = (L) => {
+              L === "cancel" && K(), L === "save" && $();
+            })
+          }, {
+            title: v(() => [
+              g("div", Zl, [
+                n(J, {
+                  content: B.value,
+                  placement: "bottom"
+                }, {
+                  default: v(() => [
+                    g("p", {
+                      class: ke(`${o(u).sm || o(u).xs ? "hidden" : ""} text-ellipsis overflow-hidden text-nowrap fm-typo-en-title-md-600 w-[250px]`)
+                    }, G(B.value), 3)
+                  ]),
+                  _: 1
+                }, 8, ["content"]),
+                g("div", et, [
+                  g("div", lt, [
+                    (s(), C(Z, null, ce(ee, (L) => {
+                      var _e;
+                      return n(ue, {
+                        key: L.labelKey,
+                        label: o(f)(L.labelKey),
+                        variant: ((_e = W.value) == null ? void 0 : _e.labelKey) === L.labelKey ? "primary" : "secondary",
+                        size: "md",
+                        onClick: (te) => ae(L)
+                      }, null, 8, ["label", "variant", "onClick"]);
+                    }), 64))
+                  ]),
+                  n(ue, {
+                    icon: "screen_rotation",
+                    variant: "tertiary",
+                    size: "md",
+                    class: "text-fm-color-typo-primary",
+                    onClick: pe
+                  })
+                ])
+              ])
+            ]),
+            _: 1
+          }, 8, ["actions"]),
+          o(w) ? (s(), V(Yl, {
+            key: 0,
+            modelValue: o(w),
+            "onUpdate:modelValue": I[1] || (I[1] = (L) => Ze(w) ? w.value = L : null),
+            style: He({ height: Q.value + "px" }),
+            class: ke(o(u).lg || o(u).md ? "flex" : ""),
+            "hide-configuration": F.value,
+            "preview-width": le.value,
+            "preview-height": ie.value,
+            "preview-scale": se.value,
+            onHideConfiguration: I[2] || (I[2] = (L) => F.value = L)
+          }, null, 8, ["modelValue", "style", "class", "hide-configuration", "preview-width", "preview-height", "preview-scale"])) : A("", !0)
+        ]),
+        _: 1
+      });
+    };
+  }
+});
+export {
+  vt as default
+};