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

package/dist/ReportEditor-BXonwurv.js

@@ -0,0 +1,1594 @@
+import { defineComponent as ye, mergeModels as fe, useModel as ge, ref as q, computed as b, resolveComponent as w, createBlock as O, openBlock as u, withCtx as g, createElementVNode as f, createVNode as r, unref as o, normalizeClass as ke, createTextVNode as tt, toDisplayString as P, createElementBlock as S, Fragment as le, renderSlot as pt, createCommentVNode as G, watch as me, renderList as ce, onMounted as vt, onUnmounted as Vt, resolveDynamicComponent as Ct, isRef as ft, normalizeStyle as lt } from "vue";
+import { W as xt, g as kt, _ as Tt, a as St, i as Ot, S as Qe, d as it, T as $t, b as Dt } from "./TransitionFade-DrqfMLM2.js";
+import { C as ve, D as Z, c as Ce, g as Rt, u as gt, a as Nt, d as Ye, v as De, e as Ut, b as ut } from "./GlobalFilterSelect.vue_vue_type_script_setup_true_lang-WsX9TkYh.js";
+import { storeToRefs as _e } from "pinia";
+import { useRouter as yt, useRoute as bt } from "vue-router";
+import { useBreakpoints as We, useSnackbar as ht, FmButtonColorThemeVariant as xe } from "@feedmepos/ui-library";
+import { u as _t } from "./message-dialog-UoMWOnil.js";
+import { u as Ne, a as Bt } from "./vue-i18n-DVWuTfed.js";
+import { r as Re } from "./i18n-CI_sQ5d_.js";
+import { _ as Xe } from "./DynamicWidget.vue_vue_type_script_setup_true_lang-AFf7ykZ0.js";
+import { a as Ze, _ as et } from "./SelectComponent.vue_vue_type_script_setup_true_lang-BL1jpiXN.js";
+import { useCoreStore as qt } from "@feedmepos/mf-common";
+import { u as Mt, a as Et } from "./app-BDQ3NF5t.js";
+import { d as It } from "./DateRangeSelect.vue_vue_type_script_setup_true_lang-B8ZGp45p.js";
+const Wt = /* @__PURE__ */ ye({
+  __name: "WidgetDialog",
+  props: /* @__PURE__ */ fe({
+    isOpen: { type: Boolean }
+  }, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ fe(["update:isOpen"], ["update:modelValue"]),
+  setup($, { emit: s }) {
+    const { t: a } = Ne(), { breakpoints: m } = We(), x = ge($, "modelValue"), y = $, D = s;
+    function H() {
+      D("update:isOpen", !1);
+    }
+    function C() {
+      d.value && (x.value = d.value, d.value = void 0, D("update:isOpen", !1));
+    }
+    const d = q(), M = b(() => !d.value);
+    return (ee, E) => {
+      const J = w("FmButton"), F = w("FmDialog");
+      return u(), O(F, {
+        "model-value": y.isOpen
+      }, {
+        "dialog-header": g(() => [
+          tt(P(o(a)("report.widget.type")), 1)
+        ]),
+        default: g(() => [
+          r(xt, {
+            modelValue: d.value,
+            "onUpdate:modelValue": E[0] || (E[0] = (T) => d.value = T),
+            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": g(() => [
+          E[1] || (E[1] = f("div", { class: "grow" }, null, -1)),
+          r(J, {
+            label: o(a)("report.common.cancel"),
+            variant: "tertiary",
+            onClick: H
+          }, null, 8, ["label"]),
+          r(J, {
+            label: o(a)("report.common.confirm"),
+            disabled: M.value,
+            onClick: C
+          }, null, 8, ["label", "disabled"])
+        ]),
+        _: 1
+      }, 8, ["model-value"]);
+    };
+  }
+}), Lt = { class: "fm-typo-en-body-lg-600" }, ot = /* @__PURE__ */ ye({
+  __name: "ReportEditorTabHeader",
+  props: /* @__PURE__ */ fe({
+    icon: {
+      type: String,
+      required: !0
+    }
+  }, {
+    modelValue: { type: Boolean, required: !0, default: !1 },
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup($) {
+    const { t: s } = Ne(), a = ge($, "modelValue"), m = $;
+    return (x, y) => {
+      const D = w("FmIcon");
+      return u(), S("div", {
+        class: "px-6 py-16 flex items-center gap-2 bg-fm-color-neutral-white border cursor-pointer",
+        onClick: y[0] || (y[0] = (H) => a.value = !a.value)
+      }, [
+        f("p", Lt, P(o(s)("report.editor.customizeReport")), 1),
+        y[1] || (y[1] = f("div", { class: "grow" }, null, -1)),
+        r(D, {
+          name: m.icon
+        }, null, 8, ["name"])
+      ]);
+    };
+  }
+}), Pt = /* @__PURE__ */ ye({
+  __name: "ReportEditorTabDesktop",
+  props: {
+    modelValue: { required: !0, default: !1 },
+    modelModifiers: {}
+  },
+  emits: ["update:modelValue"],
+  setup($) {
+    const s = ge($, "modelValue");
+    return (a, m) => (u(), S(le, null, [
+      r(ot, {
+        modelValue: s.value,
+        "onUpdate:modelValue": m[0] || (m[0] = (x) => s.value = x),
+        icon: "keyboard_double_arrow_left"
+      }, null, 8, ["modelValue"]),
+      pt(a.$slots, "default")
+    ], 64));
+  }
+}), zt = /* @__PURE__ */ ye({
+  __name: "ReportEditorTabMobile",
+  props: {
+    modelValue: { required: !0, default: !1 },
+    modelModifiers: {}
+  },
+  emits: ["update:modelValue"],
+  setup($) {
+    const s = ge($, "modelValue");
+    return (a, m) => {
+      const x = w("FmTopSheet"), y = w("FmCard");
+      return u(), O(y, { class: "fixed bottom-0 w-full" }, {
+        default: g(() => [
+          r(ot, {
+            modelValue: s.value,
+            "onUpdate:modelValue": m[0] || (m[0] = (D) => s.value = D),
+            icon: "keyboard_double_arrow_up"
+          }, null, 8, ["modelValue"]),
+          r(x, {
+            modelValue: s.value,
+            "onUpdate:modelValue": m[2] || (m[2] = (D) => s.value = D),
+            "fullscreen-size": "sm"
+          }, {
+            default: g(() => [
+              r(ot, {
+                modelValue: s.value,
+                "onUpdate:modelValue": m[1] || (m[1] = (D) => s.value = D),
+                icon: "keyboard_double_arrow_down"
+              }, null, 8, ["modelValue"]),
+              s.value ? pt(a.$slots, "default", { key: 0 }) : G("", !0)
+            ]),
+            _: 3
+          }, 8, ["modelValue"])
+        ]),
+        _: 3
+      });
+    };
+  }
+}), At = {
+  key: 2,
+  class: "flex flex-col gap-3 mt-2 border border-neutral-300 p-3"
+}, Gt = { 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" }, Ht = {
+  key: 0,
+  class: "flex justify-end sm:pb-[2px]"
+}, Jt = { class: "fm-typo-en-body-lg-600 text-fm-color-typo-primary" }, jt = { class: "pl-1" }, Kt = {
+  key: 0,
+  class: "flex justify-end sm:pb-[2px]"
+}, Qt = {
+  key: 4,
+  class: "flex flex-col gap-2"
+}, Yt = /* @__PURE__ */ ye({
+  __name: "GlobalFilterDialog",
+  props: /* @__PURE__ */ fe({
+    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($) {
+    const { t: s, te: a } = Ne(), m = ge($, "globalFilter"), x = ge($, "isOpen"), y = ht(), D = $, H = q(""), C = q(), d = q(), M = q(), ee = q([]), E = q([]), J = q(""), F = q(!1), T = q(!1), R = q([]), N = q([]), Y = q(ve.Equal);
+    function oe(t) {
+      return JSON.parse(JSON.stringify(t));
+    }
+    function z(t, e) {
+      return { hour: t, minute: e };
+    }
+    function c(t) {
+      return t ? `${String(t.hour).padStart(2, "0")}:${String(t.minute).padStart(2, "0")}` : null;
+    }
+    function ue(t) {
+      if (!t) return null;
+      const [e, p] = t.split(":").map(Number);
+      return Number.isNaN(e) || Number.isNaN(p) ? null : { hour: e, minute: p };
+    }
+    const ae = b(() => d.value ? !(d.value.type === Z.Timestamp && M.value === Ce.DateTime) : !1), X = b(
+      () => {
+        var t;
+        return ((t = d.value) == null ? void 0 : t.type) === Z.Timestamp && M.value === Ce.TimeOfDay;
+      }
+    ), de = b(() => {
+      var t;
+      return (((t = d.value) == null ? void 0 : t.filterOperators) ?? []).filter((e) => e !== ve.And && e !== ve.Or).map((e) => ({
+        label: s(`report.section.comparisonOperator.${e}`),
+        value: e
+      }));
+    });
+    function se() {
+      var e;
+      const t = (e = de.value[0]) == null ? void 0 : e.value;
+      return t || (d.value ? Se(d.value.type, M.value ?? null) : ve.Equal);
+    }
+    function pe(t) {
+      if (d.value)
+        return Rt({
+          operator: t ?? se(),
+          dataType: d.value.type,
+          dimensionOption: d.value.type === Z.Timestamp ? M.value ?? null : null,
+          t: s
+        });
+    }
+    function U(t, e) {
+      if (typeof (e == null ? void 0 : e.default) == "boolean" || t.length > 0 && t.every((h) => typeof h == "boolean")) {
+        const h = t.reduce((k, L) => (typeof L == "boolean" && k.push(L), k), []);
+        if (e)
+          for (e.fixed && h.splice(e.count); h.length < e.count; )
+            h.push(typeof e.default == "boolean" ? e.default : !1);
+        return h;
+      }
+      const v = t.reduce((h, k) => (typeof k == "string" && h.push(k), h), []);
+      if (e)
+        for (e.fixed && v.splice(e.count); v.length < e.count; )
+          v.push(typeof e.default == "string" ? e.default : "");
+      return v;
+    }
+    function W(t = Y.value) {
+      const e = pe(t), p = U(
+        e ? Array(e.count).fill(e.default) : [],
+        e
+      );
+      return {
+        label: "",
+        operator: t,
+        values: p
+      };
+    }
+    function j() {
+      return {
+        name: "",
+        startTime: z(0, 0),
+        endTime: z(23, 59)
+      };
+    }
+    function ie() {
+      if (!(!ae.value || !T.value)) {
+        if (X.value) {
+          N.value.length === 0 && (N.value = [j()]);
+          return;
+        }
+        R.value.length === 0 && (R.value = [W()]);
+      }
+    }
+    function be() {
+      var p, v, h;
+      const t = oe(((p = m.value) == null ? void 0 : p.customOptions) ?? []), e = oe(((v = m.value) == null ? void 0 : v.customTimeRanges) ?? []);
+      Y.value = ((h = t[0]) == null ? void 0 : h.operator) ?? se(), T.value = t.length > 0 || e.length > 0, R.value = t, N.value = e, ie();
+    }
+    function K(t) {
+      Y.value = t, R.value = R.value.map((e, p) => {
+        const v = R.value[p];
+        if (!v)
+          return W(t);
+        const h = pe(t), k = U(
+          Array.isArray(v.values) ? [...v.values] : [],
+          h
+        );
+        return {
+          ...v,
+          operator: t,
+          values: k
+        };
+      });
+    }
+    function we() {
+      R.value = [...R.value, W()];
+    }
+    function ne(t) {
+      R.value.length <= 1 || (R.value = R.value.filter((e, p) => p !== t));
+    }
+    function Ue() {
+      N.value = [...N.value, j()];
+    }
+    function Be(t) {
+      N.value.length <= 1 || (N.value = N.value.filter(
+        (e, p) => p !== t
+      ));
+    }
+    function Te(t, e, p) {
+      const v = N.value[t];
+      v && (N.value[t] = {
+        ...v,
+        [e]: ue(p)
+      });
+    }
+    function Fe(t) {
+      return t.length === 0 || t.some((e) => e == null || e === "");
+    }
+    function Ve() {
+      if (!T.value) return !0;
+      if (X.value) {
+        const p = N.value.map((h) => h.name.trim()).filter(Boolean);
+        return N.value.some(
+          (h) => !h.name.trim() || !h.startTime || !h.endTime
+        ) ? (y.open({
+          message: s("report.section.filter.invalidCustomTimeRange"),
+          type: "error"
+        }), !1) : new Set(p).size !== p.length ? (y.open({
+          message: s("report.section.filter.customTimeRangeNamesMustBeUnique"),
+          type: "error"
+        }), !1) : !0;
+      }
+      const t = R.value.map((p) => p.label.trim()).filter(Boolean);
+      return R.value.some(
+        (p) => !p.label.trim() || Fe(p.values)
+      ) ? (y.open({ message: s("report.section.filter.invalidCustomOption"), type: "error" }), !1) : new Set(t).size !== t.length ? (y.open({
+        message: s("report.section.filter.customOptionLabelsMustBeUnique"),
+        type: "error"
+      }), !1) : !0;
+    }
+    me(x, (t) => {
+      var e, p, v, h, k, L, Q;
+      t && (H.value = ((e = m.value) == null ? void 0 : e.label) || "", C.value = D.schemas.find(
+        (te) => {
+          var A;
+          return te.name === ((A = m.value) == null ? void 0 : A.schemaName);
+        }
+      ), d.value = (p = Me.value.find(
+        (te) => {
+          var A;
+          return te.value.name === ((A = m.value) == null ? void 0 : A.name);
+        }
+      )) == null ? void 0 : p.value, M.value = (v = m.value) == null ? void 0 : v.option, ee.value = ((h = m.value) == null ? void 0 : h.tileIds) || [], E.value = ((k = m.value) == null ? void 0 : k.filters) || [], F.value = !!((L = m.value) != null && L.dataFormula), J.value = ((Q = m.value) == null ? void 0 : Q.dataFormula) || "", be());
+    }), me(T, (t) => {
+      var e;
+      t && (Y.value = ((e = R.value[0]) == null ? void 0 : e.operator) ?? se(), ie());
+    }), me(ae, (t) => {
+      if (!t) {
+        T.value = !1, R.value = [], N.value = [];
+        return;
+      }
+      ie();
+    }), me(X, () => {
+      ie();
+    }), me(de, (t) => {
+      var p;
+      const e = (p = t[0]) == null ? void 0 : p.value;
+      e && (t.some((v) => v.value === Y.value) || K(e));
+    });
+    const qe = b(
+      () => D.schemas.map((t) => ({
+        label: t.label || t.name,
+        value: t
+      }))
+    ), Me = b(() => {
+      var t;
+      return (((t = C.value) == null ? void 0 : t.fields) || []).filter((e) => e.type !== Z.Numeric).map((e) => ({
+        label: e.label || e.name,
+        value: e
+      }));
+    }), Le = b(() => {
+      var t;
+      return ((t = d.value) == null ? void 0 : t.type) !== Z.Timestamp ? [] : kt(s);
+    }), Pe = b(() => D.tiles.reduce((t, e, p) => {
+      var k, L;
+      const v = e.widget.config.schemaNames ?? [], h = (e.widget.config.joinDatasources ?? []).flatMap(
+        (Q) => Q.schemaNames ?? []
+      );
+      return [...v, ...h].includes(((k = C.value) == null ? void 0 : k.name) || "") && t.push({
+        label: (L = e == null ? void 0 : e.widget.title) != null && L.trim() ? e.widget.title : `Widget ${p + 1}`,
+        value: e.id
+      }), t;
+    }, [])), ze = b(
+      () => D.schemas.flatMap(
+        (t) => (t.fields ?? []).map((e) => ({
+          ...e,
+          labels: [
+            Re(s, a, t.label, "schema"),
+            Re(s, a, e.label || e.name, "other")
+          ]
+        }))
+      )
+    );
+    function Ae(t) {
+      var e;
+      t.name !== ((e = C.value) == null ? void 0 : e.name) && (C.value = t, d.value = void 0, Y.value = ve.Equal, T.value = !1, R.value = [], N.value = []);
+    }
+    function Ge(t) {
+      d.value = t, M.value = t.type === Z.Timestamp ? Ce.DateTime : void 0, Y.value = se(), T.value = !1, R.value = [], N.value = [];
+    }
+    function Se(t, e) {
+      switch (t) {
+        case Z.Timestamp:
+          return e === Ce.DateTime || e === Ce.TimeOfDay ? ve.Between : ve.Equal;
+        case Z.Bool:
+        case Z.String:
+        case Z.Numeric:
+          return ve.Equal;
+        default:
+          throw new Error(`Unsupported data type: ${t}`);
+      }
+    }
+    function re() {
+      if (!C.value) {
+        y.open({ message: s("report.section.filter.invalidSchema"), type: "error" });
+        return;
+      }
+      if (!d.value) {
+        y.open({ message: s("report.section.filter.invalidDimension"), type: "error" });
+        return;
+      }
+      const t = E.value.filter((v) => v ? !qe.value.some((k) => k.value.name === v.schemaName) : !0);
+      if (t.length > 0) {
+        const v = t.filter((k) => !!k).map((k) => k.schemaName), h = t.some((k) => !k) ? `, ${s("report.section.filter.unknownFilters")}` : "";
+        y.open({
+          message: s("report.section.filter.invalidFiltersSchemaNotFound", {
+            schemas: v.join(", "),
+            unknownFiltersSuffix: h
+          }),
+          type: "error"
+        });
+        return;
+      }
+      if (!Ve())
+        return;
+      const e = T.value && !X.value ? R.value.map((v) => ({
+        label: v.label.trim(),
+        operator: v.operator ?? se(),
+        values: U(
+          [...v.values],
+          pe(v.operator)
+        )
+      })) : void 0, p = T.value && X.value ? N.value.map((v) => ({
+        name: v.name.trim(),
+        startTime: v.startTime,
+        endTime: v.endTime
+      })) : void 0;
+      m.value = {
+        schemaName: C.value.name,
+        name: d.value.name,
+        label: H.value,
+        operator: Se(
+          d.value.type,
+          d.value.type === Z.Timestamp ? M.value ?? Ce.DateTime : null
+        ),
+        option: d.value.type === Z.Timestamp ? M.value : null,
+        values: [],
+        tileIds: [...ee.value],
+        filters: oe(E.value),
+        dataFormula: F.value ? J.value : void 0,
+        customOptions: e,
+        customTimeRanges: p
+      }, x.value = !1;
+    }
+    function Oe() {
+      x.value = !1;
+    }
+    const He = b(() => {
+      var t;
+      return [
+        (t = C.value) == null ? void 0 : t.name,
+        ...E.value.map((e) => e.schemaName)
+      ];
+    });
+    function Je(t) {
+      var k, L, Q, te;
+      const e = D.tiles.find((A) => A.id === t.value), p = ((L = (k = e == null ? void 0 : e.widget) == null ? void 0 : k.config) == null ? void 0 : L.schemaNames) ?? [], v = (((te = (Q = e == null ? void 0 : e.widget) == null ? void 0 : Q.config) == null ? void 0 : te.joinDatasources) ?? []).flatMap(
+        (A) => A.schemaNames ?? []
+      ), h = [...p, ...v];
+      return He.value.filter((A) => !!A).some((A) => !h.includes(A));
+    }
+    return (t, e) => {
+      const p = w("FmTextField"), v = w("FmSelect"), h = w("FmCheckbox"), k = w("FmTimePicker"), L = w("FmButton"), Q = w("FmTextarea"), te = w("FmLabel"), A = w("FmIcon"), je = w("FmTooltip"), n = w("FmForm"), l = w("FmDialog");
+      return u(), O(l, {
+        modelValue: x.value,
+        "onUpdate:modelValue": e[11] || (e[11] = (V) => x.value = V),
+        overlay: !0,
+        "z-index": 10
+      }, {
+        "dialog-header": g(() => [
+          tt(P(o(s)("report.section.filter.globalFilter")), 1)
+        ]),
+        default: g(() => [
+          r(n, {
+            ref: "form",
+            class: "flex flex-col gap-2 w-[490px]"
+          }, {
+            default: g(() => {
+              var V;
+              return [
+                r(p, {
+                  modelValue: H.value,
+                  "onUpdate:modelValue": e[0] || (e[0] = (i) => H.value = i),
+                  placeholder: o(s)("report.section.filter.displayName"),
+                  label: o(s)("report.section.filter.displayName"),
+                  class: "mb-2"
+                }, null, 8, ["modelValue", "placeholder", "label"]),
+                r(Ze, {
+                  "model-value": C.value,
+                  items: qe.value,
+                  placeholder: o(s)("report.section.schema.title"),
+                  label: o(s)("report.section.schema.title"),
+                  "onUpdate:modelValue": e[1] || (e[1] = (i) => Ae(i))
+                }, null, 8, ["model-value", "items", "placeholder", "label"]),
+                r(Ze, {
+                  "model-value": d.value,
+                  items: Me.value,
+                  placeholder: o(s)("report.section.dimension.title"),
+                  label: o(s)("report.section.dimension.title"),
+                  "onUpdate:modelValue": e[2] || (e[2] = (i) => Ge(i))
+                }, null, 8, ["model-value", "items", "placeholder", "label"]),
+                ((V = d.value) == null ? void 0 : V.type) === o(Z).Timestamp ? (u(), O(v, {
+                  key: 0,
+                  modelValue: M.value,
+                  "onUpdate:modelValue": e[3] || (e[3] = (i) => M.value = i),
+                  items: Le.value,
+                  placeholder: o(s)("report.section.filter.timeFormatter"),
+                  label: o(s)("report.section.filter.timeFormatter")
+                }, null, 8, ["modelValue", "items", "placeholder", "label"])) : G("", !0),
+                ae.value ? (u(), O(h, {
+                  key: 1,
+                  modelValue: T.value,
+                  "onUpdate:modelValue": e[4] || (e[4] = (i) => T.value = i),
+                  label: o(s)("report.section.filter.customOptions"),
+                  value: !0
+                }, null, 8, ["modelValue", "label"])) : G("", !0),
+                ae.value && T.value ? (u(), S("div", At, [
+                  X.value ? (u(!0), S(le, { key: 0 }, ce(N.value, (i, B) => (u(), S("div", {
+                    key: `custom-time-range-${B}`,
+                    class: "flex flex-col gap-2"
+                  }, [
+                    f("div", Gt, [
+                      r(p, {
+                        modelValue: i.name,
+                        "onUpdate:modelValue": (I) => i.name = I,
+                        label: o(s)("report.section.filter.label")
+                      }, null, 8, ["modelValue", "onUpdate:modelValue", "label"]),
+                      r(k, {
+                        "model-value": c(i.startTime),
+                        label: o(s)("report.date.startingTime"),
+                        "onUpdate:modelValue": (I) => Te(B, "startTime", I)
+                      }, null, 8, ["model-value", "label", "onUpdate:modelValue"]),
+                      r(k, {
+                        "model-value": c(i.endTime),
+                        label: o(s)("report.date.endingTime"),
+                        "onUpdate:modelValue": (I) => Te(B, "endTime", I)
+                      }, null, 8, ["model-value", "label", "onUpdate:modelValue"]),
+                      N.value.length > 1 ? (u(), S("div", Ht, [
+                        r(L, {
+                          icon: "delete",
+                          variant: "tertiary",
+                          onClick: (I) => Be(B)
+                        }, null, 8, ["onClick"])
+                      ])) : G("", !0)
+                    ])
+                  ]))), 128)) : (u(), S(le, { key: 1 }, [
+                    f("p", Jt, P(o(s)("report.section.filter.operator")), 1),
+                    de.value.length > 0 ? (u(), O(Ze, {
+                      key: 0,
+                      "model-value": Y.value,
+                      items: de.value,
+                      placeholder: o(s)("report.section.filter.operator"),
+                      "onUpdate:modelValue": e[5] || (e[5] = (i) => K(i))
+                    }, null, 8, ["model-value", "items", "placeholder"])) : G("", !0),
+                    (u(!0), S(le, null, ce(R.value, (i, B) => (u(), S("div", {
+                      key: `custom-option-${B}`,
+                      class: "flex flex-col gap-2"
+                    }, [
+                      f("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]"
+                        ])
+                      }, [
+                        f("span", jt, P(o(s)("report.section.filter.label")), 1),
+                        r(p, {
+                          modelValue: i.label,
+                          "onUpdate:modelValue": (I) => i.label = I
+                        }, null, 8, ["modelValue", "onUpdate:modelValue"]),
+                        (u(), O(Tt, {
+                          key: `custom-option-value-${B}-${i.operator ?? ""}-${M.value ?? ""}`,
+                          modelValue: i.values,
+                          "onUpdate:modelValue": (I) => i.values = I,
+                          config: pe(i.operator),
+                          option: M.value
+                        }, null, 8, ["modelValue", "onUpdate:modelValue", "config", "option"])),
+                        R.value.length > 1 ? (u(), S("div", Kt, [
+                          r(L, {
+                            icon: "delete",
+                            variant: "tertiary",
+                            onClick: (I) => ne(B)
+                          }, null, 8, ["onClick"])
+                        ])) : G("", !0)
+                      ])
+                    ]))), 128))
+                  ], 64)),
+                  r(L, {
+                    class: "w-full",
+                    variant: "primary",
+                    icon: "add",
+                    "icon-position": "prepend",
+                    onClick: e[6] || (e[6] = (i) => X.value ? Ue() : we())
+                  })
+                ])) : G("", !0),
+                r(h, {
+                  modelValue: F.value,
+                  "onUpdate:modelValue": e[7] || (e[7] = (i) => F.value = i),
+                  label: o(s)("report.section.filter.advance"),
+                  value: !0
+                }, null, 8, ["modelValue", "label"]),
+                F.value ? (u(), O(Q, {
+                  key: 3,
+                  modelValue: J.value,
+                  "onUpdate:modelValue": e[8] || (e[8] = (i) => J.value = i),
+                  placeholder: o(s)("report.section.filter.dataFormula")
+                }, null, 8, ["modelValue", "placeholder"])) : G("", !0),
+                r(St, {
+                  modelValue: E.value,
+                  "onUpdate:modelValue": e[9] || (e[9] = (i) => E.value = i),
+                  options: ze.value
+                }, null, 8, ["modelValue", "options"]),
+                r(te, { class: "mt-2 fm-typo-en-body-lg-600" }, {
+                  default: g(() => [
+                    tt(P(o(s)("report.section.filter.applyWidget")), 1)
+                  ]),
+                  _: 1
+                }),
+                $.tiles.length > 0 ? (u(), S("div", Qt, [
+                  (u(!0), S(le, null, ce(Pe.value, (i) => (u(), S("div", {
+                    key: i.value,
+                    class: "flex items-center"
+                  }, [
+                    r(h, {
+                      modelValue: ee.value,
+                      "onUpdate:modelValue": e[10] || (e[10] = (B) => ee.value = B),
+                      label: i.label,
+                      value: i.value
+                    }, null, 8, ["modelValue", "label", "value"]),
+                    Je(i) ? (u(), O(je, {
+                      key: 0,
+                      content: o(s)("report.section.filter.missingFilterSchema"),
+                      "z-index": 99,
+                      class: "ml-2"
+                    }, {
+                      default: g(() => [
+                        r(A, {
+                          name: "warning",
+                          class: "text-fm-color-system-error-300"
+                        })
+                      ]),
+                      _: 1
+                    }, 8, ["content"])) : G("", !0)
+                  ]))), 128))
+                ])) : (u(), O(te, {
+                  key: 5,
+                  class: "fm-typo-en-body-lg-400",
+                  label: o(s)("report.section.filter.noWidget")
+                }, null, 8, ["label"]))
+              ];
+            }),
+            _: 1
+          }, 512)
+        ]),
+        "dialog-footer": g(() => [
+          e[12] || (e[12] = f("div", { class: "grow" }, null, -1)),
+          r(L, {
+            label: o(s)("report.common.cancel"),
+            variant: "tertiary",
+            onClick: Oe
+          }, null, 8, ["label"]),
+          r(L, {
+            label: o(s)("report.common.confirm"),
+            onClick: re
+          }, null, 8, ["label"])
+        ]),
+        _: 1
+      }, 8, ["modelValue"]);
+    };
+  }
+}), Xt = 8.4375, Zt = 1024 ** 4, el = {
+  MY: { rate: 4, currency: "MYR", symbol: "RM" },
+  TH: { rate: 33, currency: "THB", symbol: "฿" },
+  SG: { rate: 1.29, currency: "SGD", symbol: "S$" },
+  ID: { rate: 17900, currency: "IDR", symbol: "Rp" }
+}, tl = { rate: 1, currency: "USD", symbol: "$" };
+function dt($, s) {
+  const a = $ / Zt * Xt, { rate: m, currency: x, symbol: y } = el[s] ?? tl;
+  return {
+    amount: a * m,
+    currency: x,
+    symbol: y,
+    costUsd: a
+  };
+}
+function mt($, s) {
+  return $ < 0.01 ? `< ${s}0.01` : `${s}${$.toFixed(2)}`;
+}
+const ll = { class: "flex flex-col gap-24 top-0 bg-fm-color-neutral-white z-10" }, ol = { class: "flex flex-col gap-24 top-0 bg-fm-color-neutral-white z-10" }, al = { class: "flex items-center gap-8" }, nl = {
+  key: 2,
+  class: "flex flex-col gap-8 rounded-md border border-fm-color-border px-16 py-12"
+}, rl = { class: "fm-typo-en-body-sm-400" }, sl = { class: "fm-typo-en-body-sm-400 font-bold" }, il = { class: "space-y-1 fm-typo-en-body-sm-400 text-fm-color-typo-secondary" }, ul = { class: "flex flex-col gap-24 top-0 bg-fm-color-neutral-white z-10" }, dl = { class: "flex items-center gap-1 max-w-[195px] w-[195px]" }, ml = { class: "line-clamp-2 overflow-hidden max-w-[195px] w-[195px]" }, cl = { class: "flex flex-col gap-24" }, pl = { class: "line-clamp-2 overflow-hidden max-w-[195px] w-[195px]" }, ct = /* @__PURE__ */ ye({
+  __name: "ReportEditorTab",
+  props: /* @__PURE__ */ fe({
+    hideConfiguration: {
+      type: Boolean,
+      default: !1
+    }
+  }, {
+    modelValue: { required: !0 },
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ fe(["hideConfiguration"], ["update:modelValue"]),
+  setup($, { emit: s }) {
+    const a = ge($, "modelValue"), { breakpoints: m } = We(), x = $, y = s, D = yt(), H = bt(), C = q(), {
+      currentSelectWidgetType: d,
+      categories: M,
+      editingTile: ee,
+      editingTileIndex: E,
+      editingGlobalFilter: J,
+      editingGlobalFilterIndex: F
+    } = _e(gt()), { schemas: T } = _e(Nt()), { globalFilters: R } = _e(Ye()), { getGlobalFilterLabel: N } = Ye(), { promptMessage: Y } = _t(), oe = q(!1), z = q(!1), { t: c, te: ue, locale: ae } = Ne(), X = q(void 0), de = b(() => {
+      const n = a.value.tiles.flatMap((l) => {
+        var B;
+        const V = l.widget.config.schemaNames ?? [], i = ((B = l.widget.config.joinDatasources) == null ? void 0 : B.flatMap((I) => I.schemaNames ?? [])) ?? [];
+        return [...V, ...i];
+      });
+      return [...new Set(n)].reduce((l, V) => {
+        const i = T.value.find((B) => B.name === V);
+        return i && l.push(i), l;
+      }, []);
+    });
+    function se(n) {
+      if (!n) return "";
+      const l = `report.widget.types.${n.toLowerCase()}`;
+      return ue(l) ? c(l) : Re(c, ue, n, "other");
+    }
+    me(
+      () => d.value,
+      () => {
+        d.value !== void 0 && (X.value = Ot(d.value), ee.value = X.value, E.value = -1, D.push({
+          name: "tileEditor",
+          query: H.query
+        }));
+      },
+      { immediate: !0 }
+    ), me(
+      () => a.value.tiles,
+      (n) => {
+        n.forEach((l) => {
+          l.id || (l.id = De());
+        });
+      },
+      { immediate: !0, deep: !0 }
+    );
+    const pe = [
+      {
+        label: "report.common.edit",
+        selected: !1,
+        variant: "tertiary",
+        onClick: (n) => {
+          E.value = n, ee.value = JSON.parse(JSON.stringify(a.value.tiles[n])), D.push({
+            name: "tileEditor",
+            query: H.query
+          });
+        }
+      },
+      {
+        label: "report.common.duplicate",
+        selected: !1,
+        variant: "tertiary",
+        onClick: (n) => {
+          const l = {
+            ...JSON.parse(JSON.stringify(a.value.tiles[n])),
+            id: De()
+          };
+          a.value.tiles.push(l);
+        }
+      },
+      {
+        label: "report.common.remove",
+        selected: !1,
+        variant: "destructive",
+        onClick: async (n) => {
+          if (await Y({
+            title: c("report.editor.deleteWidget"),
+            message: c("report.editor.deleteWidgetConfirm", {
+              title: a.value.tiles[n].widget.title
+            })
+          })) {
+            const V = a.value.tiles[n].id;
+            a.value.tiles.splice(n, 1), a.value.globalFilters && a.value.globalFilters.forEach((i) => {
+              var B;
+              i.tileIds = (B = i.tileIds) == null ? void 0 : B.filter((I) => I !== V);
+            });
+          }
+        }
+      }
+    ], U = [
+      {
+        label: "report.common.edit",
+        selected: !1,
+        variant: "tertiary",
+        onClick: (n) => {
+          var l;
+          F.value = n, J.value = JSON.parse(JSON.stringify((l = a.value.globalFilters) == null ? void 0 : l[n])), oe.value = !0;
+        }
+      },
+      {
+        label: "report.common.duplicate",
+        selected: !1,
+        variant: "tertiary",
+        onClick: (n) => {
+          var i;
+          const l = (i = a.value.globalFilters) == null ? void 0 : i[n];
+          if (!l) return;
+          const V = JSON.parse(JSON.stringify(l));
+          a.value.globalFilters || (a.value.globalFilters = []), a.value.globalFilters.push(V);
+        }
+      },
+      {
+        label: "report.common.remove",
+        selected: !1,
+        variant: "destructive",
+        onClick: async (n) => {
+          var i, B;
+          const l = (i = a.value.globalFilters) == null ? void 0 : i[n];
+          if (!l) return;
+          await Y({
+            title: c("report.editor.deleteWidget"),
+            message: c("report.editor.deleteWidgetConfirm", {
+              title: N(l)
+            })
+          }) && ((B = a.value.globalFilters) == null || B.splice(n, 1));
+        }
+      }
+    ], W = b(() => M.value.map((n) => ({
+      label: c(`report.category.${n.name}`),
+      value: n.id
+    }))), { sessionUser: j } = qt(), ie = b(
+      () => {
+        var n, l, V, i;
+        return ((l = (n = j.value) == null ? void 0 : n.role) == null ? void 0 : l.isAdmin) === !0 || ((i = (V = j.value) == null ? void 0 : V.role) == null ? void 0 : i.isStaff) === !0;
+      }
+    ), be = b({
+      get: () => a.value.queryVersion === "v2",
+      set: (n) => {
+        a.value.queryVersion = n ? "v2" : "v1", n ? a.value.queryDatasource = a.value.queryDatasource ?? "pg" : a.value.queryDatasource = void 0;
+      }
+    }), K = [
+      { label: c("report.common.postgresql"), value: "pg" },
+      { label: c("report.common.bigquery"), value: "bq" }
+    ], we = [
+      { label: c("report.common.noBatch"), value: "none" },
+      { label: c("report.common.days"), value: "days" },
+      { label: c("report.common.locations"), value: "locations" }
+    ], ne = b({
+      get: () => {
+        var n, l;
+        return (n = a.value.batch) != null && n.days ? "days" : (l = a.value.batch) != null && l.locations ? "locations" : "none";
+      },
+      set: (n) => {
+        var l, V;
+        n === "none" ? a.value.batch = void 0 : n === "days" ? a.value.batch = { days: ((l = a.value.batch) == null ? void 0 : l.days) || 1 } : n === "locations" && (a.value.batch = { locations: ((V = a.value.batch) == null ? void 0 : V.locations) || 10 });
+      }
+    }), Ue = b({
+      get: () => {
+        var n, l;
+        if (ne.value === "days") return ((n = a.value.batch) == null ? void 0 : n.days) ?? 1;
+        if (ne.value === "locations") return ((l = a.value.batch) == null ? void 0 : l.locations) ?? 1;
+      },
+      set: (n) => {
+        n && (ne.value === "days" ? a.value.batch = { days: n } : ne.value === "locations" && (a.value.batch = { locations: n }));
+      }
+    }), Be = b({
+      get: () => Re(c, ue, a.value.name, "other"),
+      set: (n) => {
+        a.value.name = n;
+      }
+    }), { country: Te } = _e(Mt()), {
+      dateRange: Fe,
+      compareDateRange: Ve,
+      timeRange: qe,
+      selectedLocationIds: Me,
+      businessDataVersion: Le,
+      restaurants: Pe,
+      warehouses: ze
+    } = _e(Et()), { isAllGlobalFiltersLoaded: Ae } = _e(Ye()), Ge = b(
+      () => a.value.queryVersion === "v2" && a.value.queryDatasource === "bq"
+    ), Se = b(() => Ge.value && ie.value), re = q(null), Oe = q(!1), He = b(() => {
+      const n = Fe.value.startDate ?? Fe.value.endDate;
+      return n ? {
+        startDate: n,
+        endDate: n
+      } : Fe.value;
+    }), Je = b(() => {
+      const n = Ve.value.startDate ?? Ve.value.endDate;
+      return n ? {
+        startDate: n,
+        endDate: n
+      } : Ve.value;
+    }), t = b(() => {
+      const n = a.value.batch;
+      if (!n) return 1;
+      if (n.locations) {
+        const l = Pe.value.length + ze.value.length;
+        return Math.max(1, Math.ceil(l / n.locations));
+      }
+      return 1;
+    }), e = b(() => {
+      if (re.value == null || re.value === 0) return null;
+      const n = re.value * t.value;
+      return dt(n, Te.value);
+    }), p = b(() => re.value == null || re.value === 0 ? null : dt(re.value, Te.value)), v = b(() => e.value ? mt(e.value.amount, e.value.symbol) : ""), h = b(() => p.value ? mt(p.value.amount, p.value.symbol) : ""), k = b(() => t.value === 1 ? c("report.common.estimatedCostBatchSingular") : c("report.common.estimatedCostBatchPlural")), L = b(() => Oe.value ? "..." : !v.value || !h.value ? "--" : c("report.common.estimatedCostFormula", {
+      batchCount: t.value,
+      batchLabel: k.value,
+      baseCost: h.value,
+      totalCost: v.value
+    }));
+    let Q = [];
+    const te = It(async () => {
+      if (!Se.value) return;
+      const n = a.value.tiles.filter((l) => {
+        var V;
+        return ((V = l.widget.config.schemaNames) == null ? void 0 : V.length) > 0;
+      });
+      if (n.length === 0) {
+        re.value = null;
+        return;
+      }
+      Oe.value = !0, Q.forEach((l) => l.abort()), Q = [];
+      try {
+        const l = await Promise.all(
+          n.map((V) => {
+            const i = new AbortController();
+            return Q.push(i), Ut({
+              widget: V.widget,
+              signal: i.signal,
+              tileId: V.id,
+              scopedDateRange: He.value,
+              scopedCompareDateRange: Je.value
+            });
+          })
+        );
+        re.value = l.reduce((V, i) => V + (i.totalBytesProcessed ?? 0), 0);
+      } catch (l) {
+        l.code !== "ERR_CANCELED" && (re.value = null);
+      } finally {
+        Oe.value = !1;
+      }
+    }, 1e3);
+    me(
+      [
+        () => a.value.tiles,
+        () => a.value.queryVersion,
+        () => a.value.queryDatasource,
+        () => a.value.batch,
+        () => Fe.value,
+        () => qe.value,
+        () => Ve.value,
+        () => Me.value,
+        () => Le.value,
+        () => Ae.value
+      ],
+      () => {
+        te();
+      },
+      { deep: !0 }
+    ), vt(() => {
+      te();
+    }), Vt(() => {
+      Q.forEach((n) => n.abort());
+    });
+    function A(n) {
+      var l;
+      return !((l = n.tileIds) != null && l.length);
+    }
+    function je(n) {
+      return !de.value.find((l) => l.name === n.schemaName);
+    }
+    return me(
+      () => a.value.globalFilters,
+      (n) => {
+        R.value = JSON.parse(JSON.stringify(n || []));
+      },
+      { deep: !0, immediate: !0 }
+    ), (n, l) => {
+      const V = w("FmTextField"), i = w("FmSelect"), B = w("FmSwitch"), I = w("FmButton"), Ee = w("FmIcon"), Ie = w("FmTooltip"), at = w("FmMenuItem"), nt = w("FmMenu"), rt = w("FmListItem"), st = w("FmList"), wt = w("FmForm");
+      return u(), O(Ct(o(m).lg || o(m).md ? Pt : zt), {
+        "model-value": x.hideConfiguration,
+        "onUpdate:modelValue": l[13] || (l[13] = (_) => y("hideConfiguration", _))
+      }, {
+        default: g(() => [
+          r(Yt, {
+            "is-open": oe.value,
+            "onUpdate:isOpen": l[0] || (l[0] = (_) => oe.value = _),
+            "global-filter": o(J),
+            tiles: a.value.tiles,
+            schemas: de.value,
+            "onUpdate:globalFilter": l[1] || (l[1] = (_) => {
+              _ && (a.value.globalFilters || (a.value.globalFilters = []), typeof o(F) == "number" && o(F) >= 0 ? a.value.globalFilters[o(F)] = _ : a.value.globalFilters.push(_));
+            })
+          }, null, 8, ["is-open", "global-filter", "tiles", "schemas"]),
+          r(Wt, {
+            modelValue: o(d),
+            "onUpdate:modelValue": l[2] || (l[2] = (_) => ft(d) ? d.value = _ : null),
+            "is-open": z.value,
+            "onUpdate:isOpen": l[3] || (l[3] = (_) => z.value = _)
+          }, null, 8, ["modelValue", "is-open"]),
+          r(wt, {
+            ref_key: "form",
+            ref: C,
+            class: "px-6 py-16 flex flex-col gap-24 overflow-y-auto overflow-x-hidden"
+          }, {
+            default: g(() => [
+              r(Qe, { class: "border-solid" }, {
+                header: g(() => [
+                  f("p", null, P(o(c)("report.editor.reportInfo")), 1),
+                  l[14] || (l[14] = f("div", { class: "grow" }, null, -1))
+                ]),
+                content: g(() => [
+                  f("div", ll, [
+                    r(V, {
+                      modelValue: Be.value,
+                      "onUpdate:modelValue": l[4] || (l[4] = (_) => Be.value = _),
+                      label: o(c)("report.common.name"),
+                      placeholder: o(c)("report.common.name")
+                    }, null, 8, ["modelValue", "label", "placeholder"]),
+                    (u(), O(i, {
+                      key: `category-${o(ae)}`,
+                      modelValue: a.value.category,
+                      "onUpdate:modelValue": l[5] || (l[5] = (_) => a.value.category = _),
+                      label: o(c)("report.common.category"),
+                      items: W.value
+                    }, null, 8, ["modelValue", "label", "items"])),
+                    r(V, {
+                      modelValue: a.value.description,
+                      "onUpdate:modelValue": l[6] || (l[6] = (_) => a.value.description = _),
+                      label: o(c)("report.common.description"),
+                      placeholder: o(c)("report.common.description")
+                    }, null, 8, ["modelValue", "label", "placeholder"])
+                  ])
+                ]),
+                _: 1
+              }),
+              r(Qe, {
+                class: "border-solid",
+                "is-open": !1
+              }, {
+                header: g(() => [
+                  f("p", null, P(o(c)("report.editor.advancedUsage")), 1),
+                  l[15] || (l[15] = f("div", { class: "grow" }, null, -1))
+                ]),
+                content: g(() => [
+                  f("div", ol, [
+                    f("div", al, [
+                      l[16] || (l[16] = f("span", { class: "fm-typo-en-body-sm-400 text-fm-color-typo-secondary" }, "V2", -1)),
+                      r(B, {
+                        modelValue: be.value,
+                        "onUpdate:modelValue": l[7] || (l[7] = (_) => be.value = _)
+                      }, null, 8, ["modelValue"])
+                    ]),
+                    be.value && ie.value ? (u(), O(i, {
+                      key: 0,
+                      modelValue: a.value.queryDatasource,
+                      "onUpdate:modelValue": l[8] || (l[8] = (_) => a.value.queryDatasource = _),
+                      label: o(c)("report.common.queryDatasource"),
+                      items: K
+                    }, null, 8, ["modelValue", "label"])) : G("", !0),
+                    r(i, {
+                      modelValue: ne.value,
+                      "onUpdate:modelValue": l[9] || (l[9] = (_) => ne.value = _),
+                      label: o(c)("report.common.batch"),
+                      items: we
+                    }, null, 8, ["modelValue", "label"]),
+                    ne.value !== "none" ? (u(), O(V, {
+                      key: 1,
+                      modelValue: Ue.value,
+                      "onUpdate:modelValue": l[10] || (l[10] = (_) => Ue.value = _),
+                      modelModifiers: { number: !0 },
+                      label: ne.value === "days" ? o(c)("report.common.days") : o(c)("report.common.locations"),
+                      type: "number"
+                    }, null, 8, ["modelValue", "label"])) : G("", !0),
+                    Se.value ? (u(), S("div", nl, [
+                      f("span", rl, P(o(c)("report.common.estimatedBqCost")), 1),
+                      f("p", sl, P(L.value), 1),
+                      f("div", il, [
+                        f("div", null, "* " + P(o(c)("report.common.estimatedCostGuidelineBigQuery")), 1),
+                        f("div", null, "* " + P(o(c)("report.common.estimatedCostGuidelineDateRange")), 1),
+                        f("div", null, "* " + P(o(c)("report.common.estimatedCostGuidelineLocationBatch")), 1)
+                      ])
+                    ])) : G("", !0)
+                  ])
+                ]),
+                _: 1
+              }),
+              r(Qe, {
+                class: "border-solid",
+                "is-open": !1
+              }, {
+                header: g(() => [
+                  f("p", null, P(o(c)("report.section.filter.globalFilter")), 1),
+                  l[17] || (l[17] = f("div", { class: "grow" }, null, -1))
+                ]),
+                content: g(() => [
+                  f("div", ul, [
+                    r(I, {
+                      label: o(c)("report.section.filter.addGlobalFilter"),
+                      variant: "secondary",
+                      icon: "add",
+                      "icon-position": "prepend",
+                      "border-color": o(xe).ColorPrimary,
+                      "text-color": o(xe).ColorPrimary,
+                      onClick: l[11] || (l[11] = () => {
+                        F.value = null, J.value = null, oe.value = !0;
+                      })
+                    }, null, 8, ["label", "border-color", "text-color"]),
+                    r(st, null, {
+                      default: g(() => [
+                        r(o(it), {
+                          list: a.value.globalFilters,
+                          "item-key": "`${element.schemaName}-${element.name}`",
+                          class: "flex flex-col gap-2 cursor-grab",
+                          handle: ".handle"
+                        }, {
+                          item: g(({ element: _, index: $e }) => [
+                            r(rt, { class: "!cursor-grab border rounded-md border-neutral-300" }, {
+                              default: g(() => [
+                                r(Ee, {
+                                  name: "drag_handle",
+                                  class: "handle"
+                                }),
+                                f("div", dl, [
+                                  r(Ie, {
+                                    "z-index": 99,
+                                    content: o(N)(_),
+                                    class: "handle"
+                                  }, {
+                                    default: g(() => [
+                                      f("p", ml, P(o(N)(_)), 1)
+                                    ]),
+                                    _: 2
+                                  }, 1032, ["content"]),
+                                  je(_) ? (u(), O(Ie, {
+                                    key: 0,
+                                    content: o(c)("report.section.filter.missingSchema"),
+                                    "z-index": 99
+                                  }, {
+                                    default: g(() => [
+                                      r(Ee, {
+                                        name: "warning",
+                                        class: "text-fm-color-system-error-300"
+                                      })
+                                    ]),
+                                    _: 1
+                                  }, 8, ["content"])) : A(_) ? (u(), O(Ie, {
+                                    key: 1,
+                                    content: o(c)("report.section.filter.missingTileIds"),
+                                    "z-index": 99
+                                  }, {
+                                    default: g(() => [
+                                      r(Ee, {
+                                        name: "warning",
+                                        class: "text-fm-color-system-warning-300"
+                                      })
+                                    ]),
+                                    _: 1
+                                  }, 8, ["content"])) : G("", !0)
+                                ]),
+                                l[18] || (l[18] = f("div", { class: "grow" }, null, -1)),
+                                r(nt, {
+                                  trigger: "click",
+                                  shift: !0,
+                                  "stop-click-propagation": !0
+                                }, {
+                                  "menu-button": g(() => [
+                                    r(I, {
+                                      "append-icon": "more_vert",
+                                      variant: "tertiary"
+                                    })
+                                  ]),
+                                  default: g(() => [
+                                    (u(), S(le, null, ce(U, (he, Ke) => r(at, {
+                                      key: Ke,
+                                      onClick: (Ft) => he.onClick($e)
+                                    }, {
+                                      label: g(() => [
+                                        f("p", {
+                                          class: ke(
+                                            he.variant === "destructive" ? " text-fm-color-system-error-300" : ""
+                                          )
+                                        }, P(o(c)(he.label)), 3)
+                                      ]),
+                                      _: 2
+                                    }, 1032, ["onClick"])), 64))
+                                  ]),
+                                  _: 2
+                                }, 1024)
+                              ]),
+                              _: 2
+                            }, 1024)
+                          ]),
+                          _: 1
+                        }, 8, ["list"])
+                      ]),
+                      _: 1
+                    })
+                  ])
+                ]),
+                _: 1
+              }),
+              f("div", cl, [
+                r(I, {
+                  label: o(c)("report.editor.addWidget"),
+                  variant: "secondary",
+                  icon: "add",
+                  "icon-position": "prepend",
+                  "border-color": o(xe).ColorPrimary,
+                  "text-color": o(xe).ColorPrimary,
+                  onClick: l[12] || (l[12] = (_) => z.value = !0)
+                }, null, 8, ["label", "border-color", "text-color"]),
+                r(st, null, {
+                  default: g(() => [
+                    r(o(it), {
+                      list: a.value.tiles,
+                      "item-key": "id",
+                      class: "flex flex-col gap-2 cursor-grab",
+                      handle: ".handle"
+                    }, {
+                      item: g(({ element: _, index: $e }) => [
+                        r(rt, { class: "!cursor-grab border rounded-md border-neutral-300" }, {
+                          default: g(() => [
+                            r(Ee, {
+                              name: "drag_handle",
+                              class: "handle"
+                            }),
+                            r(Ie, {
+                              content: _.widget.title ? se(_.widget.title) : o(c)("report.editor.widget", { index: $e + 1 }),
+                              class: "handle"
+                            }, {
+                              default: g(() => [
+                                f("p", pl, P(_.widget.title ? se(_.widget.title) : o(c)("report.editor.widget", { index: $e + 1 })), 1)
+                              ]),
+                              _: 2
+                            }, 1032, ["content"]),
+                            l[19] || (l[19] = f("div", { class: "grow" }, null, -1)),
+                            r(nt, {
+                              trigger: "click",
+                              shift: !0,
+                              "stop-click-propagation": !0
+                            }, {
+                              "menu-button": g(() => [
+                                r(I, {
+                                  "append-icon": "more_vert",
+                                  variant: "tertiary"
+                                })
+                              ]),
+                              default: g(() => [
+                                (u(), S(le, null, ce(pe, (he, Ke) => r(at, {
+                                  key: Ke,
+                                  onClick: (Ft) => he.onClick($e)
+                                }, {
+                                  label: g(() => [
+                                    f("p", {
+                                      class: ke(
+                                        he.variant === "destructive" ? " text-fm-color-system-error-300" : ""
+                                      )
+                                    }, P(o(c)(he.label)), 3)
+                                  ]),
+                                  _: 2
+                                }, 1032, ["onClick"])), 64))
+                              ]),
+                              _: 2
+                            }, 1024)
+                          ]),
+                          _: 2
+                        }, 1024)
+                      ]),
+                      _: 1
+                    }, 8, ["list"])
+                  ]),
+                  _: 1
+                })
+              ])
+            ]),
+            _: 1
+          }, 512)
+        ]),
+        _: 1
+      }, 8, ["model-value"]);
+    };
+  }
+}), vl = { class: "h-full w-full overflow-x-hidden" }, fl = { class: "flex flex-col bg-fm-color-neutral-white w-[400px]" }, gl = { class: "flex bg-fm-color-neutral-white w-[88px]" }, yl = {
+  key: 1,
+  class: "w-full overflow-y-auto"
+}, bl = {
+  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" }, _l = { key: 2 }, wl = {
+  key: 0,
+  class: "grid grid-cols-12 gap-[16px]"
+}, Fl = { class: "col-span-12 mb-4 flex flex-wrap gap-2 pb-2" }, Vl = {
+  key: 3,
+  class: "h-full w-full flex items-start justify-center bg-fm-color-neutral-white py-24",
+  style: { backgroundColor: "#F6F8FC" }
+}, Cl = {
+  key: 0,
+  class: "w-full grid grid-cols-12 gap-[24px] p-24"
+}, xl = /* @__PURE__ */ ye({
+  __name: "ReportEditorViewport",
+  props: /* @__PURE__ */ fe({
+    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__ */ fe(["hideConfiguration"], ["update:modelValue"]),
+  setup($, { emit: s }) {
+    const { breakpoints: a } = We(), m = ge($, "modelValue"), x = $, y = b(() => x.previewWidth > 0 && x.previewHeight > 0), D = b(() => a.value.sm || a.value.xs), H = s;
+    return (C, d) => {
+      const M = w("FmCircularProgress"), ee = w("FmButton"), E = w("FmMenuDivider"), J = w("FmCard");
+      return u(), S("div", vl, [
+        m.value ? (u(), S(le, { key: 1 }, [
+          y.value ? G("", !0) : (u(), O($t, {
+            key: 0,
+            "model-value": !x.hideConfiguration
+          }, {
+            right: g(() => [
+              f("div", fl, [
+                m.value ? (u(), O(ct, {
+                  key: 0,
+                  modelValue: m.value,
+                  "onUpdate:modelValue": d[0] || (d[0] = (F) => m.value = F),
+                  "hide-configuration": x.hideConfiguration,
+                  onHideConfiguration: d[1] || (d[1] = (F) => H("hideConfiguration", F))
+                }, null, 8, ["modelValue", "hide-configuration"])) : G("", !0)
+              ])
+            ]),
+            left: g(() => [
+              f("div", gl, [
+                r(ee, {
+                  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: d[2] || (d[2] = (F) => H("hideConfiguration", !x.hideConfiguration))
+                }, null, 8, ["border-color", "text-color"])
+              ])
+            ]),
+            _: 1
+          }, 8, ["model-value"])),
+          r(E, {
+            vertical: "",
+            style: { margin: "0px" }
+          }),
+          !D.value && !y.value ? (u(), S("div", yl, [
+            m.value.tiles.length > 0 ? (u(), S("div", bl, [
+              f("div", hl, [
+                r(ut)
+              ]),
+              (u(!0), S(le, null, ce(m.value.tiles, (F, T) => (u(), O(Xe, {
+                key: `${o(De)()}_${T}`,
+                "model-value": F,
+                index: T,
+                "hide-export": !0
+              }, null, 8, ["model-value", "index"]))), 128))
+            ])) : (u(), O(et, { key: 1 }))
+          ])) : D.value && !y.value ? (u(), S("div", _l, [
+            r(J, { class: "px-5 pb-28" }, {
+              default: g(() => [
+                m.value.tiles.length > 0 ? (u(), S("div", wl, [
+                  f("div", Fl, [
+                    r(ut)
+                  ]),
+                  (u(!0), S(le, null, ce(m.value.tiles, (F, T) => (u(), O(Xe, {
+                    key: `${o(De)()}_${T}`,
+                    "model-value": F,
+                    index: T,
+                    "hide-export": !0
+                  }, null, 8, ["model-value", "index"]))), 128))
+                ])) : (u(), O(et, { key: 1 }))
+              ]),
+              _: 1
+            }),
+            m.value ? (u(), O(ct, {
+              key: 0,
+              modelValue: m.value,
+              "onUpdate:modelValue": d[3] || (d[3] = (F) => m.value = F),
+              "hide-configuration": x.hideConfiguration,
+              onHideConfiguration: d[4] || (d[4] = (F) => {
+                H("hideConfiguration", F);
+              })
+            }, null, 8, ["modelValue", "hide-configuration"])) : G("", !0)
+          ])) : (u(), S("div", Vl, [
+            f("div", {
+              style: lt({
+                transformOrigin: "top center",
+                transform: `scale(${x.previewScale})`
+              })
+            }, [
+              f("div", {
+                class: "overflow-y-auto bg-white rounded-lg",
+                style: lt({
+                  width: x.previewWidth + "px",
+                  height: x.previewHeight + "px"
+                })
+              }, [
+                m.value.tiles.length > 0 ? (u(), S("div", Cl, [
+                  (u(!0), S(le, null, ce(m.value.tiles, (F, T) => (u(), O(Xe, {
+                    key: `${o(De)()}_${T}`,
+                    "model-value": F,
+                    index: T,
+                    "hide-export": !0,
+                    "custom-screen-width": x.previewWidth
+                  }, null, 8, ["model-value", "index", "custom-screen-width"]))), 128))
+                ])) : (u(), O(et, { key: 1 }))
+              ], 4)
+            ], 4)
+          ]))
+        ], 64)) : (u(), O(M, { key: 0 }))
+      ]);
+    };
+  }
+}), kl = { class: "flex items-center gap-4" }, Tl = { class: "flex justify-center items-center gap-2 w-full" }, Sl = { class: "flex gap-4" }, zl = /* @__PURE__ */ ye({
+  __name: "ReportEditor",
+  setup($) {
+    const s = yt(), a = bt(), m = gt(), { promptLoader: x } = Bt(), { t: y, te: D } = Ne(), { currentReport: H, editingReport: C } = _e(m), { breakpoints: d } = We(), M = b(() => {
+      var U;
+      return !((U = C.value) != null && U.editable);
+    }), ee = b(() => {
+      var U;
+      return ((U = C.value) == null ? void 0 : U.name) ?? y("report.editor.newReport");
+    }), E = b(() => Re(y, D, ee.value, "other")), J = ht(), { promptMessage: F } = _t(), T = q(!1), R = b(() => [
+      { label: y("report.common.cancel"), value: "cancel", isPrimary: !1 },
+      { label: y("report.common.save"), value: "save", isPrimary: !0, prependIcon: "download" }
+    ]);
+    async function N() {
+      if (!C.value || C.value.tiles.length === 0) {
+        J.open({ message: y("report.messages.noWidget"), type: "error" });
+        return;
+      }
+      const U = M.value ? y("report.common.clone") : y("report.common.save");
+      if (await F({
+        title: `${y("report.messages.saveReport")}`,
+        message: y("report.messages.confirmAction", { action: U, name: E.value })
+      }))
+        try {
+          await x(async () => {
+            if (M.value) {
+              const j = JSON.parse(JSON.stringify(C.value));
+              j.editable = !0, j.id = "", j.name = `${j.name} ${y("report.common.duplicate")}`, j.isDefault = !1, await m.createOrUpdateReport(j);
+            } else
+              C.value && await m.createOrUpdateReport(C.value);
+            s.push({
+              name: "reportView",
+              query: a.query
+            });
+          });
+        } catch (j) {
+          console.log(j), J.open({
+            message: y("report.messages.failedToAction", { action: U }),
+            type: "error"
+          });
+        }
+    }
+    async function Y() {
+      var W;
+      if (!C.value) return;
+      await F({
+        title: y("report.common.report", 1),
+        message: y("report.editor.notSaved", { name: (W = C.value) == null ? void 0 : W.name })
+      }) && (C.value = JSON.parse(JSON.stringify(H.value)), s.back());
+    }
+    vt(() => {
+      C.value || s.push({ name: "reports" });
+    });
+    const oe = [
+      {
+        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
+      }
+    ], z = q(oe[0]), c = q(!1), ue = b(() => c.value ? Math.max(z.value.width || 0, z.value.height || 0) : Math.min(z.value.width || 0, z.value.height || 0)), ae = b(() => c.value ? Math.min(z.value.width || 0, z.value.height || 0) : Math.max(z.value.width || 0, z.value.height || 0)), X = b(() => window.innerHeight - 72 - 56), de = b(() => {
+      if (!ue.value) return 1;
+      let U = (X.value - 48) / ue.value, W = ae.value * U;
+      return W > window.innerWidth && (U = window.innerWidth / ae.value, W = ae.value * U), U > 1 ? 1 : U;
+    });
+    function se(U) {
+      z.value = U;
+    }
+    function pe() {
+      c.value = !c.value;
+    }
+    return (U, W) => {
+      const j = w("FmTooltip"), ie = w("FmButton"), be = w("FmPageHead");
+      return u(), O(Dt, null, {
+        default: g(() => [
+          r(be, {
+            "data-editor-header": "true",
+            actions: R.value,
+            "onClick:action": W[0] || (W[0] = (K) => {
+              K === "cancel" && Y(), K === "save" && N();
+            })
+          }, {
+            title: g(() => [
+              f("div", kl, [
+                r(j, {
+                  content: E.value,
+                  placement: "bottom"
+                }, {
+                  default: g(() => [
+                    f("p", {
+                      class: ke(`${o(d).sm || o(d).xs ? "hidden" : ""} text-ellipsis overflow-hidden text-nowrap fm-typo-en-title-md-600 w-[250px]`)
+                    }, P(E.value), 3)
+                  ]),
+                  _: 1
+                }, 8, ["content"]),
+                f("div", Tl, [
+                  f("div", Sl, [
+                    (u(), S(le, null, ce(oe, (K) => {
+                      var we;
+                      return r(ie, {
+                        key: K.labelKey,
+                        label: o(y)(K.labelKey),
+                        variant: ((we = z.value) == null ? void 0 : we.labelKey) === K.labelKey ? "primary" : "secondary",
+                        size: "md",
+                        onClick: (ne) => se(K)
+                      }, null, 8, ["label", "variant", "onClick"]);
+                    }), 64))
+                  ]),
+                  r(ie, {
+                    icon: "screen_rotation",
+                    variant: "tertiary",
+                    size: "md",
+                    class: "text-fm-color-typo-primary",
+                    onClick: pe
+                  })
+                ])
+              ])
+            ]),
+            _: 1
+          }, 8, ["actions"]),
+          o(C) ? (u(), O(xl, {
+            key: 0,
+            modelValue: o(C),
+            "onUpdate:modelValue": W[1] || (W[1] = (K) => ft(C) ? C.value = K : null),
+            style: lt({ height: X.value + "px" }),
+            class: ke(o(d).lg || o(d).md ? "flex" : ""),
+            "hide-configuration": T.value,
+            "preview-width": ae.value,
+            "preview-height": ue.value,
+            "preview-scale": de.value,
+            onHideConfiguration: W[2] || (W[2] = (K) => T.value = K)
+          }, null, 8, ["modelValue", "style", "class", "hide-configuration", "preview-width", "preview-height", "preview-scale"])) : G("", !0)
+        ]),
+        _: 1
+      });
+    };
+  }
+});
+export {
+  zl as default
+};