@feedmepos/mf-report 5.33.0 → 5.33.1-beta.0

package/dist/ReportEditor-CYKIOEDv.js

@@ -0,0 +1,2117 @@
+import { defineComponent as he, mergeModels as Se, useModel as $e, ref as G, computed as b, resolveComponent as S, createBlock as C, openBlock as c, withCtx as V, createElementVNode as f, createVNode as d, unref as t, normalizeClass as Ae, createTextVNode as Je, toDisplayString as B, createElementBlock as R, Fragment as ye, renderSlot as bl, createCommentVNode as U, watch as ge, renderList as Le, onMounted as yl, onUnmounted as Ol, resolveDynamicComponent as Dl, isRef as hl, normalizeStyle as nl } from "vue";
+import { W as Il, g as Ul, _ as Nl, a as Bl, e as Be, S as je, d as wl, b as _l, T as Ml, c as Rl } from "./TransitionFade-Da9yU0De.js";
+import { C as ke, D as ae, b as Pe, F as Ye, c as Me, u as sl, i as qe, d as fe, M as Fl, r as zl, e as ll, n as Pl, f as ql, g as El, h as Ll, j as Al, k as Gl, m as Wl, a as Hl, o as cl, p as tl, q as jl, Q as Xe, l as Jl, t as Ql } from "./report-BtUlq8BM.js";
+import { storeToRefs as Ee } from "pinia";
+import { useRouter as ul, useRoute as dl } from "vue-router";
+import { useBreakpoints as Ze, useSnackbar as Vl, FmButtonColorThemeVariant as Te } from "@feedmepos/ui-library";
+import { u as ml } from "./message-dialog-UoMWOnil.js";
+import { u as Kl } from "./global-loader-BuxFfehu.js";
+import { u as Ge } from "./_plugin-vue_export-helper-C6QDExPN.js";
+import { r as Qe } from "./i18n-DbyciK4x.js";
+import { _ as ol } from "./TilePageStack.vue_vue_type_script_setup_true_lang-D8d93Bzw.js";
+import { a as al, _ as rl } from "./SelectComponent.vue_vue_type_script_setup_true_lang-DW7Dk7iQ.js";
+import { d as Yl, e as Xl, i as Zl } from "./DynamicWidget.vue_vue_type_script_setup_true_lang-DFn0SFrY.js";
+import { g as et, d as lt, _ as pl } from "./GlobalFilterSelect.vue_vue_type_script_setup_true_lang-C7qNbWLB.js";
+import { useCoreStore as tt } from "@feedmepos/mf-common";
+import { u as ot, a as at } from "./app-B91tkGfv.js";
+import { d as rt } from "./DateRangeSelect-BBw7T_aW.js";
+const nt = /* @__PURE__ */ he({
+  __name: "WidgetDialog",
+  props: /* @__PURE__ */ Se({
+    isOpen: { type: Boolean }
+  }, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ Se(["update:isOpen"], ["update:modelValue"]),
+  setup(q, { emit: v }) {
+    const { t: m } = Ge(), { breakpoints: y } = Ze(), n = $e(q, "modelValue"), w = q, E = v;
+    function Z() {
+      E("update:isOpen", !1);
+    }
+    function O() {
+      F.value && (n.value = F.value, F.value = void 0, E("update:isOpen", !1));
+    }
+    const F = G(), N = b(() => !F.value);
+    return (le, L) => {
+      const a = S("FmButton"), D = S("FmDialog");
+      return c(), C(D, {
+        "model-value": w.isOpen
+      }, {
+        "dialog-header": V(() => [
+          Je(B(t(m)("report.widget.type")), 1)
+        ]),
+        default: V(() => [
+          d(Il, {
+            modelValue: F.value,
+            "onUpdate:modelValue": L[0] || (L[0] = ($) => F.value = $),
+            class: Ae(`grid ${t(y).lg || t(y).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(() => [
+          L[1] || (L[1] = f("div", { class: "grow" }, null, -1)),
+          d(a, {
+            label: t(m)("report.common.cancel"),
+            variant: "tertiary",
+            onClick: Z
+          }, null, 8, ["label"]),
+          d(a, {
+            label: t(m)("report.common.confirm"),
+            disabled: N.value,
+            onClick: O
+          }, null, 8, ["label", "disabled"])
+        ]),
+        _: 1
+      }, 8, ["model-value"]);
+    };
+  }
+}), it = { class: "fm-typo-en-body-lg-600" }, il = /* @__PURE__ */ he({
+  __name: "ReportEditorTabHeader",
+  props: /* @__PURE__ */ Se({
+    icon: {
+      type: String,
+      required: !0
+    }
+  }, {
+    modelValue: { type: Boolean, required: !0, default: !1 },
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(q) {
+    const { t: v } = Ge(), m = $e(q, "modelValue"), y = q;
+    return (n, w) => {
+      const E = S("FmIcon");
+      return c(), R("div", {
+        class: "px-6 py-16 flex items-center gap-2 bg-fm-color-neutral-white border cursor-pointer",
+        onClick: w[0] || (w[0] = (Z) => m.value = !m.value)
+      }, [
+        f("p", it, B(t(v)("report.editor.customizeReport")), 1),
+        w[1] || (w[1] = f("div", { class: "grow" }, null, -1)),
+        d(E, {
+          name: y.icon
+        }, null, 8, ["name"])
+      ]);
+    };
+  }
+}), st = /* @__PURE__ */ he({
+  __name: "ReportEditorTabDesktop",
+  props: {
+    modelValue: { required: !0, default: !1 },
+    modelModifiers: {}
+  },
+  emits: ["update:modelValue"],
+  setup(q) {
+    const v = $e(q, "modelValue");
+    return (m, y) => (c(), R(ye, null, [
+      d(il, {
+        modelValue: v.value,
+        "onUpdate:modelValue": y[0] || (y[0] = (n) => v.value = n),
+        icon: "keyboard_double_arrow_left"
+      }, null, 8, ["modelValue"]),
+      bl(m.$slots, "default")
+    ], 64));
+  }
+}), ut = /* @__PURE__ */ he({
+  __name: "ReportEditorTabMobile",
+  props: {
+    modelValue: { required: !0, default: !1 },
+    modelModifiers: {}
+  },
+  emits: ["update:modelValue"],
+  setup(q) {
+    const v = $e(q, "modelValue");
+    return (m, y) => {
+      const n = S("FmTopSheet"), w = S("FmCard");
+      return c(), C(w, { class: "fixed bottom-0 w-full" }, {
+        default: V(() => [
+          d(il, {
+            modelValue: v.value,
+            "onUpdate:modelValue": y[0] || (y[0] = (E) => v.value = E),
+            icon: "keyboard_double_arrow_up"
+          }, null, 8, ["modelValue"]),
+          d(n, {
+            modelValue: v.value,
+            "onUpdate:modelValue": y[2] || (y[2] = (E) => v.value = E),
+            "fullscreen-size": "sm"
+          }, {
+            default: V(() => [
+              d(il, {
+                modelValue: v.value,
+                "onUpdate:modelValue": y[1] || (y[1] = (E) => v.value = E),
+                icon: "keyboard_double_arrow_down"
+              }, null, 8, ["modelValue"]),
+              v.value ? bl(m.$slots, "default", { key: 0 }) : U("", !0)
+            ]),
+            _: 3
+          }, 8, ["modelValue"])
+        ]),
+        _: 3
+      });
+    };
+  }
+}), dt = {
+  key: 2,
+  class: "flex flex-col gap-3 mt-2 border border-neutral-300 p-3"
+}, mt = { 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" }, ct = {
+  key: 0,
+  class: "flex justify-end sm:pb-[2px]"
+}, pt = { class: "fm-typo-en-body-lg-600 text-fm-color-typo-primary" }, vt = { class: "pl-1" }, ft = {
+  key: 0,
+  class: "flex justify-end sm:pb-[2px]"
+}, gt = {
+  key: 3,
+  class: "flex flex-col gap-1 mt-2"
+}, bt = { class: "fm-typo-en-body-sm-400 text-fm-color-typo-secondary" }, yt = {
+  key: 4,
+  class: "flex flex-col gap-2"
+}, ht = /* @__PURE__ */ he({
+  __name: "GlobalFilterDialog",
+  props: /* @__PURE__ */ Se({
+    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(q) {
+    const { t: v, te: m } = Ge(), y = $e(q, "globalFilter"), n = $e(q, "isOpen"), w = Vl(), E = q, Z = G(""), O = G(), F = G(), N = G(), le = G([]), L = G([]), a = G(!1), D = G([]), $ = G([]), K = G(ke.Equal), re = G(!1), me = b(
+      () => !!F.value && F.value.type !== ae.Timestamp
+    );
+    function j(e) {
+      return JSON.parse(JSON.stringify(e));
+    }
+    function ie(e, l) {
+      return { hour: e, minute: l };
+    }
+    function x(e) {
+      return e ? `${String(e.hour).padStart(2, "0")}:${String(e.minute).padStart(2, "0")}` : null;
+    }
+    function pe(e) {
+      if (!e) return null;
+      const [l, p] = e.split(":").map(Number);
+      return Number.isNaN(l) || Number.isNaN(p) ? null : { hour: l, minute: p };
+    }
+    const se = b(() => F.value ? !(F.value.type === ae.Timestamp && N.value === Pe.DateTime) : !1), Y = b(
+      () => {
+        var e;
+        return ((e = F.value) == null ? void 0 : e.type) === ae.Timestamp && N.value === Pe.TimeOfDay;
+      }
+    ), ue = b(() => {
+      var e;
+      return (((e = F.value) == null ? void 0 : e.filterOperators) ?? []).filter((l) => l !== ke.And && l !== ke.Or).map((l) => ({
+        label: v(`report.section.comparisonOperator.${l}`),
+        value: l
+      }));
+    });
+    function ne() {
+      var l;
+      const e = (l = ue.value[0]) == null ? void 0 : l.value;
+      return e || (F.value ? oe(
+        F.value.type,
+        N.value ?? null
+      ) : ke.Equal);
+    }
+    function ce(e) {
+      if (F.value)
+        return et({
+          operator: e ?? ne(),
+          dataType: F.value.type,
+          dimensionOption: F.value.type === ae.Timestamp ? N.value ?? null : null,
+          t: v
+        });
+    }
+    function de(e, l) {
+      if (typeof (l == null ? void 0 : l.default) == "boolean" || e.length > 0 && e.every((_) => typeof _ == "boolean")) {
+        const _ = e.reduce((k, T) => (typeof T == "boolean" && k.push(T), k), []);
+        if (l)
+          for (l.fixed && _.splice(l.count); _.length < l.count; )
+            _.push(typeof l.default == "boolean" ? l.default : !1);
+        return _;
+      }
+      const g = e.reduce((_, k) => (typeof k == "string" && _.push(k), _), []);
+      if (l)
+        for (l.fixed && g.splice(l.count); g.length < l.count; )
+          g.push(typeof l.default == "string" ? l.default : "");
+      return g;
+    }
+    function z(e = K.value) {
+      const l = ce(e), p = de(
+        l ? Array(l.count).fill(l.default) : [],
+        l
+      );
+      return {
+        label: "",
+        operator: e,
+        values: p
+      };
+    }
+    function A() {
+      return {
+        name: "",
+        startTime: ie(0, 0),
+        endTime: ie(23, 59)
+      };
+    }
+    function H() {
+      if (!(!se.value || !a.value)) {
+        if (Y.value) {
+          $.value.length === 0 && ($.value = [A()]);
+          return;
+        }
+        D.value.length === 0 && (D.value = [z()]);
+      }
+    }
+    function ve() {
+      var p, g, _;
+      const e = j(((p = y.value) == null ? void 0 : p.customOptions) ?? []), l = j(((g = y.value) == null ? void 0 : g.customTimeRanges) ?? []);
+      K.value = ((_ = e[0]) == null ? void 0 : _.operator) ?? ne(), a.value = e.length > 0 || l.length > 0, D.value = e, $.value = l, H();
+    }
+    function we(e) {
+      K.value = e, D.value = D.value.map((l, p) => {
+        const g = D.value[p];
+        if (!g)
+          return z(e);
+        const _ = ce(e), k = de(
+          Array.isArray(g.values) ? [...g.values] : [],
+          _
+        );
+        return {
+          ...g,
+          operator: e,
+          values: k
+        };
+      });
+    }
+    function X() {
+      D.value = [...D.value, z()];
+    }
+    function te(e) {
+      D.value.length <= 1 || (D.value = D.value.filter((l, p) => p !== e));
+    }
+    function Oe() {
+      $.value = [...$.value, A()];
+    }
+    function Re(e) {
+      $.value.length <= 1 || ($.value = $.value.filter(
+        (l, p) => p !== e
+      ));
+    }
+    function De(e, l, p) {
+      const g = $.value[e];
+      g && ($.value[e] = {
+        ...g,
+        [l]: pe(p)
+      });
+    }
+    function _e(e) {
+      return e.length === 0 || e.some((l) => l === "");
+    }
+    function Fe() {
+      if (!a.value) return !0;
+      if (Y.value) {
+        const p = $.value.map((_) => _.name.trim()).filter(Boolean);
+        return $.value.some(
+          (_) => !_.name.trim() || !_.startTime || !_.endTime
+        ) ? (w.open({
+          message: v("report.section.filter.invalidCustomTimeRange"),
+          type: "error"
+        }), !1) : new Set(p).size !== p.length ? (w.open({
+          message: v("report.section.filter.customTimeRangeNamesMustBeUnique"),
+          type: "error"
+        }), !1) : !0;
+      }
+      const e = D.value.map((p) => p.label.trim()).filter(Boolean);
+      return D.value.some(
+        (p) => !p.label.trim() || _e(p.values)
+      ) ? (w.open({ message: v("report.section.filter.invalidCustomOption"), type: "error" }), !1) : new Set(e).size !== e.length ? (w.open({
+        message: v("report.section.filter.customOptionLabelsMustBeUnique"),
+        type: "error"
+      }), !1) : !0;
+    }
+    ge(n, (e) => {
+      var l, p, g, _, k, T;
+      e && (Z.value = ((l = y.value) == null ? void 0 : l.label) || "", O.value = E.schemas.find(
+        (W) => {
+          var P;
+          return W.name === ((P = y.value) == null ? void 0 : P.schemaName);
+        }
+      ), F.value = (p = Ue.value.find(
+        (W) => {
+          var P;
+          return W.value.name === ((P = y.value) == null ? void 0 : P.name);
+        }
+      )) == null ? void 0 : p.value, N.value = (g = y.value) == null ? void 0 : g.option, le.value = ((_ = y.value) == null ? void 0 : _.tileIds) || [], L.value = ((k = y.value) == null ? void 0 : k.filters) || [], re.value = ((T = y.value) == null ? void 0 : T.beforeAggregation) === !0, ve());
+    }), ge(a, (e) => {
+      var l;
+      e && (K.value = ((l = D.value[0]) == null ? void 0 : l.operator) ?? ne(), H());
+    }), ge(se, (e) => {
+      if (!e) {
+        a.value = !1, D.value = [], $.value = [];
+        return;
+      }
+      H();
+    }), ge(Y, () => {
+      H();
+    }), ge(ue, (e) => {
+      var p;
+      const l = (p = e[0]) == null ? void 0 : p.value;
+      l && (e.some((g) => g.value === K.value) || we(l));
+    });
+    const Ie = b(
+      () => E.schemas.map((e) => ({
+        label: e.label || e.name,
+        value: e
+      }))
+    ), Ue = b(() => {
+      var e;
+      return (((e = O.value) == null ? void 0 : e.fields) || []).filter((l) => l.type !== ae.Numeric).map((l) => ({
+        label: l.label || l.name,
+        value: l
+      }));
+    }), ze = b(() => {
+      var e;
+      return ((e = F.value) == null ? void 0 : e.type) !== ae.Timestamp ? [] : Ul(v);
+    }), be = b(() => E.tiles.reduce((e, l, p) => {
+      var k, T, W, P, u;
+      const g = ((k = l.widget) == null ? void 0 : k.config.schemaNames) ?? [], _ = (((T = l.widget) == null ? void 0 : T.config.joinDatasources) ?? []).flatMap(
+        (s) => s.schemaNames ?? []
+      );
+      return [...g, ..._].includes(((W = O.value) == null ? void 0 : W.name) || "") && e.push({
+        label: (u = (P = l.widget) == null ? void 0 : P.title) != null && u.trim() ? l.widget.title : `Widget ${p + 1}`,
+        value: l.id
+      }), e;
+    }, [])), Ve = b(
+      () => E.schemas.flatMap(
+        (e) => (e.fields ?? []).map((l) => ({
+          ...l,
+          labels: [
+            Qe(v, m, e.label, "schema"),
+            Qe(v, m, l.label || l.name, "other")
+          ]
+        }))
+      )
+    );
+    function xe(e) {
+      var l;
+      e.name !== ((l = O.value) == null ? void 0 : l.name) && (O.value = e, F.value = void 0, K.value = ke.Equal, a.value = !1, D.value = [], $.value = []);
+    }
+    function Ce(e) {
+      F.value = e, N.value = e.type === ae.Timestamp ? Pe.DateTime : void 0, K.value = ne(), a.value = !1, D.value = [], $.value = [];
+    }
+    function oe(e, l) {
+      switch (e) {
+        case ae.Timestamp:
+          return l === Pe.DateTime || l === Pe.TimeOfDay ? ke.Between : ke.Equal;
+        case ae.Bool:
+        case ae.String:
+        case ae.Numeric:
+          return ke.Equal;
+        default:
+          throw new Error(`Unsupported data type: ${e}`);
+      }
+    }
+    function Ne(e) {
+      var k, T, W, P;
+      const l = y.value;
+      if (!((k = l == null ? void 0 : l.defaultValues) != null && k.length) || !(l.schemaName === ((T = O.value) == null ? void 0 : T.name) && l.name === ((W = F.value) == null ? void 0 : W.name)) || !!e != !!((P = l.customOptions) != null && P.length)) return;
+      const g = new Set((e ?? []).map((u) => u.label)), _ = e ? l.defaultValues.filter((u) => g.has(String(u))) : l.defaultValues;
+      return _.length ? { defaultValues: _ } : void 0;
+    }
+    function We() {
+      if (!O.value) {
+        w.open({ message: v("report.section.filter.invalidSchema"), type: "error" });
+        return;
+      }
+      if (!F.value) {
+        w.open({ message: v("report.section.filter.invalidDimension"), type: "error" });
+        return;
+      }
+      const e = L.value.filter((g) => g ? !Ie.value.some((k) => k.value.name === g.schemaName) : !0);
+      if (e.length > 0) {
+        const g = e.filter((k) => !!k).map((k) => k.schemaName), _ = e.some((k) => !k) ? `, ${v("report.section.filter.unknownFilters")}` : "";
+        w.open({
+          message: v("report.section.filter.invalidFiltersSchemaNotFound", {
+            schemas: g.join(", "),
+            unknownFiltersSuffix: _
+          }),
+          type: "error"
+        });
+        return;
+      }
+      if (!Fe())
+        return;
+      const l = a.value && !Y.value ? D.value.map((g) => ({
+        label: g.label.trim(),
+        operator: g.operator ?? ne(),
+        values: de(
+          [...g.values],
+          ce(g.operator)
+        )
+      })) : void 0, p = a.value && Y.value ? $.value.map((g) => ({
+        name: g.name.trim(),
+        startTime: g.startTime,
+        endTime: g.endTime
+      })) : void 0;
+      y.value = {
+        schemaName: O.value.name,
+        name: F.value.name,
+        label: Z.value,
+        operator: oe(
+          F.value.type,
+          F.value.type === ae.Timestamp ? N.value ?? Pe.DateTime : null
+        ),
+        option: F.value.type === ae.Timestamp ? N.value : null,
+        values: [],
+        tileIds: [...le.value],
+        filters: j(L.value),
+        customOptions: l,
+        customTimeRanges: p,
+        ...me.value && re.value ? { beforeAggregation: !0 } : {},
+        ...Ne(l)
+      }, n.value = !1;
+    }
+    function He() {
+      n.value = !1;
+    }
+    const r = b(() => {
+      var e;
+      return [
+        (e = O.value) == null ? void 0 : e.name,
+        ...L.value.map((l) => l.schemaName)
+      ];
+    });
+    function o(e) {
+      var Q;
+      const l = E.tiles.find((J) => J.id === e.value);
+      if (!l || !O.value || !F.value) return null;
+      const p = (Q = l == null ? void 0 : l.widget) == null ? void 0 : Q.config, g = (p == null ? void 0 : p.schemaNames) ?? [], _ = ((p == null ? void 0 : p.joinDatasources) ?? []).flatMap(
+        (J) => J.schemaNames ?? []
+      ), k = [...g, ..._], T = r.value.filter((J) => !!J).some((J) => !k.includes(J)), P = F.value.type === ae.Timestamp || me.value && re.value;
+      if (T)
+        return v(
+          P ? "report.section.filter.missingFilterSchema" : "report.section.filter.missingFilterSchemaOrDimension"
+        );
+      if (P) return null;
+      const u = ((p == null ? void 0 : p.dimensions) ?? []).map((J) => ({
+        schemaName: J.schemaName,
+        name: J.name
+      })), s = ((p == null ? void 0 : p.joinDatasources) ?? []).flatMap(
+        (J) => (J.dimensions ?? []).map((Ke) => ({
+          schemaName: Ke.schemaName,
+          name: Ke.name
+        }))
+      ), i = [...u, ...s], I = O.value.name, h = F.value.name;
+      return i.some(
+        (J) => J.schemaName === I && J.name === h
+      ) ? null : v("report.section.filter.missingFilterSchemaOrDimension");
+    }
+    return (e, l) => {
+      const p = S("FmTextField"), g = S("FmSelect"), _ = S("FmCheckbox"), k = S("FmTimePicker"), T = S("FmButton"), W = S("FmLabel"), P = S("FmIcon"), u = S("FmTooltip"), s = S("FmForm"), i = S("FmDialog");
+      return c(), C(i, {
+        modelValue: n.value,
+        "onUpdate:modelValue": l[10] || (l[10] = (I) => n.value = I),
+        overlay: !0,
+        "z-index": 10
+      }, {
+        "dialog-header": V(() => [
+          Je(B(t(v)("report.section.filter.globalFilter")), 1)
+        ]),
+        default: V(() => [
+          d(s, {
+            ref: "form",
+            class: "flex flex-col gap-2 w-[490px]"
+          }, {
+            default: V(() => {
+              var I;
+              return [
+                d(p, {
+                  modelValue: Z.value,
+                  "onUpdate:modelValue": l[0] || (l[0] = (h) => Z.value = h),
+                  placeholder: t(v)("report.section.filter.displayName"),
+                  label: t(v)("report.section.filter.displayName"),
+                  class: "mb-2"
+                }, null, 8, ["modelValue", "placeholder", "label"]),
+                d(al, {
+                  "model-value": O.value,
+                  items: Ie.value,
+                  placeholder: t(v)("report.section.schema.title"),
+                  label: t(v)("report.section.schema.title"),
+                  "onUpdate:modelValue": l[1] || (l[1] = (h) => xe(h))
+                }, null, 8, ["model-value", "items", "placeholder", "label"]),
+                d(al, {
+                  "model-value": F.value,
+                  items: Ue.value,
+                  placeholder: t(v)("report.section.dimension.title"),
+                  label: t(v)("report.section.dimension.title"),
+                  "onUpdate:modelValue": l[2] || (l[2] = (h) => Ce(h))
+                }, null, 8, ["model-value", "items", "placeholder", "label"]),
+                ((I = F.value) == null ? void 0 : I.type) === t(ae).Timestamp ? (c(), C(g, {
+                  key: 0,
+                  modelValue: N.value,
+                  "onUpdate:modelValue": l[3] || (l[3] = (h) => N.value = h),
+                  items: ze.value,
+                  placeholder: t(v)("report.section.filter.timeFormatter"),
+                  label: t(v)("report.section.filter.timeFormatter")
+                }, null, 8, ["modelValue", "items", "placeholder", "label"])) : U("", !0),
+                se.value ? (c(), C(_, {
+                  key: 1,
+                  modelValue: a.value,
+                  "onUpdate:modelValue": l[4] || (l[4] = (h) => a.value = h),
+                  label: t(v)("report.section.filter.customOptions"),
+                  value: !0
+                }, null, 8, ["modelValue", "label"])) : U("", !0),
+                se.value && a.value ? (c(), R("div", dt, [
+                  Y.value ? (c(!0), R(ye, { key: 0 }, Le($.value, (h, ee) => (c(), R("div", {
+                    key: `custom-time-range-${ee}`,
+                    class: "flex flex-col gap-2"
+                  }, [
+                    f("div", mt, [
+                      d(p, {
+                        modelValue: h.name,
+                        "onUpdate:modelValue": (Q) => h.name = Q,
+                        label: t(v)("report.section.filter.label")
+                      }, null, 8, ["modelValue", "onUpdate:modelValue", "label"]),
+                      d(k, {
+                        "model-value": x(h.startTime),
+                        label: t(v)("report.date.startingTime"),
+                        "onUpdate:modelValue": (Q) => De(ee, "startTime", Q)
+                      }, null, 8, ["model-value", "label", "onUpdate:modelValue"]),
+                      d(k, {
+                        "model-value": x(h.endTime),
+                        label: t(v)("report.date.endingTime"),
+                        "onUpdate:modelValue": (Q) => De(ee, "endTime", Q)
+                      }, null, 8, ["model-value", "label", "onUpdate:modelValue"]),
+                      $.value.length > 1 ? (c(), R("div", ct, [
+                        d(T, {
+                          icon: "delete",
+                          variant: "tertiary",
+                          onClick: (Q) => Re(ee)
+                        }, null, 8, ["onClick"])
+                      ])) : U("", !0)
+                    ])
+                  ]))), 128)) : (c(), R(ye, { key: 1 }, [
+                    f("p", pt, B(t(v)("report.section.filter.operator")), 1),
+                    ue.value.length > 0 ? (c(), C(al, {
+                      key: 0,
+                      "model-value": K.value,
+                      items: ue.value,
+                      placeholder: t(v)("report.section.filter.operator"),
+                      "onUpdate:modelValue": l[5] || (l[5] = (h) => we(h))
+                    }, null, 8, ["model-value", "items", "placeholder"])) : U("", !0),
+                    (c(!0), R(ye, null, Le(D.value, (h, ee) => (c(), R("div", {
+                      key: `custom-option-${ee}`,
+                      class: "flex flex-col gap-2"
+                    }, [
+                      f("div", {
+                        class: Ae(["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", vt, B(t(v)("report.section.filter.label")), 1),
+                        d(p, {
+                          modelValue: h.label,
+                          "onUpdate:modelValue": (Q) => h.label = Q
+                        }, null, 8, ["modelValue", "onUpdate:modelValue"]),
+                        (c(), C(Nl, {
+                          key: `custom-option-value-${ee}-${h.operator ?? ""}-${N.value ?? ""}`,
+                          modelValue: h.values,
+                          "onUpdate:modelValue": (Q) => h.values = Q,
+                          config: ce(h.operator),
+                          option: N.value
+                        }, null, 8, ["modelValue", "onUpdate:modelValue", "config", "option"])),
+                        D.value.length > 1 ? (c(), R("div", ft, [
+                          d(T, {
+                            icon: "delete",
+                            variant: "tertiary",
+                            onClick: (Q) => te(ee)
+                          }, null, 8, ["onClick"])
+                        ])) : U("", !0)
+                      ])
+                    ]))), 128))
+                  ], 64)),
+                  d(T, {
+                    class: "w-full",
+                    variant: "primary",
+                    icon: "add",
+                    "icon-position": "prepend",
+                    onClick: l[6] || (l[6] = (h) => Y.value ? Oe() : X())
+                  })
+                ])) : U("", !0),
+                d(Bl, {
+                  modelValue: L.value,
+                  "onUpdate:modelValue": l[7] || (l[7] = (h) => L.value = h),
+                  options: Ve.value
+                }, null, 8, ["modelValue", "options"]),
+                me.value ? (c(), R("div", gt, [
+                  d(_, {
+                    modelValue: re.value,
+                    "onUpdate:modelValue": l[8] || (l[8] = (h) => re.value = h),
+                    label: t(v)("reportV5.globalFilter.beforeAggregation"),
+                    value: !0
+                  }, null, 8, ["modelValue", "label"]),
+                  f("p", bt, B(t(v)("reportV5.globalFilter.beforeAggregationHint")), 1)
+                ])) : U("", !0),
+                d(W, { class: "mt-2 fm-typo-en-body-lg-600" }, {
+                  default: V(() => [
+                    Je(B(t(v)("report.section.filter.applyWidget")), 1)
+                  ]),
+                  _: 1
+                }),
+                q.tiles.length > 0 ? (c(), R("div", yt, [
+                  (c(!0), R(ye, null, Le(be.value, (h) => (c(), R("div", {
+                    key: h.value,
+                    class: "flex items-center"
+                  }, [
+                    d(_, {
+                      modelValue: le.value,
+                      "onUpdate:modelValue": l[9] || (l[9] = (ee) => le.value = ee),
+                      label: h.label,
+                      value: h.value
+                    }, null, 8, ["modelValue", "label", "value"]),
+                    o(h) ? (c(), C(u, {
+                      key: 0,
+                      content: o(h) ?? void 0,
+                      "z-index": 99,
+                      class: "ml-2"
+                    }, {
+                      default: V(() => [
+                        d(P, {
+                          name: "warning",
+                          class: "text-fm-color-system-error-300"
+                        })
+                      ]),
+                      _: 2
+                    }, 1032, ["content"])) : U("", !0)
+                  ]))), 128))
+                ])) : (c(), C(W, {
+                  key: 5,
+                  class: "fm-typo-en-body-lg-400",
+                  label: t(v)("report.section.filter.noWidget")
+                }, null, 8, ["label"]))
+              ];
+            }),
+            _: 1
+          }, 512)
+        ]),
+        "dialog-footer": V(() => [
+          l[11] || (l[11] = f("div", { class: "grow" }, null, -1)),
+          d(T, {
+            label: t(v)("report.common.cancel"),
+            variant: "tertiary",
+            onClick: He
+          }, null, 8, ["label"]),
+          d(T, {
+            label: t(v)("report.common.confirm"),
+            onClick: We
+          }, null, 8, ["label"])
+        ]),
+        _: 1
+      }, 8, ["modelValue"]);
+    };
+  }
+}), wt = 8.4375, _t = 1024 ** 4, Ft = {
+  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" }
+}, Vt = { rate: 1, currency: "USD", symbol: "$" };
+function vl(q, v) {
+  const m = q / _t * wt, { rate: y, currency: n, symbol: w } = Ft[v] ?? Vt;
+  return {
+    amount: m * y,
+    currency: n,
+    symbol: w,
+    costUsd: m
+  };
+}
+function fl(q, v) {
+  return q < 0.01 ? `< ${v}0.01` : `${v}${q.toFixed(2)}`;
+}
+const xt = { class: "flex flex-col gap-16" }, Ct = {
+  key: 0,
+  class: "flex flex-col gap-8"
+}, kt = { class: "flex items-center gap-4 pb-8 border-b border-neutral-300" }, Tt = ["title"], St = { class: "fm-typo-en-title-sm-600 pt-8" }, $t = { class: "mx-16 flex flex-col gap-12 py-4" }, Ot = { class: "fm-typo-en-body-lg-600" }, Dt = { class: "fm-typo-en-body-md-400 text-fm-color-typo-tertiary" }, It = { class: "flex flex-col gap-12 border-t border-neutral-200 pt-12" }, Ut = { class: "fm-typo-en-body-lg-600" }, Nt = { class: "grid grid-cols-2 items-end gap-12" }, Bt = { class: "flex flex-col gap-8 min-w-0" }, Mt = { class: "fm-typo-en-body-sm-600 whitespace-nowrap" }, Rt = { class: "flex gap-8" }, zt = { class: "grid grid-cols-2 items-end gap-12" }, Pt = { class: "flex flex-col gap-8 min-w-0" }, qt = { class: "fm-typo-en-body-sm-600 whitespace-nowrap" }, Et = { class: "flex gap-8" }, Lt = {
+  key: 1,
+  class: "rounded-md border border-dashed border-neutral-300 p-12 text-center fm-typo-en-body-sm-400 text-fm-color-typo-secondary"
+}, At = ["onClick"], Gt = ["title"], Wt = {
+  key: 0,
+  class: "text-fm-color-typo-secondary"
+}, Ht = { class: "text-fm-color-system-error-300" }, jt = { class: "w-full text-left" }, Jt = /* @__PURE__ */ he({
+  __name: "TileDrillPanel",
+  props: {
+    report: {}
+  },
+  emits: ["add-widget"],
+  setup(q, { emit: v }) {
+    const m = q, y = v, { t: n, te: w } = Ge(), E = [
+      { label: n("report.tile.widget.icon.small"), value: Ye.Small },
+      { label: n("report.tile.widget.icon.medium"), value: Ye.Medium },
+      { label: n("report.tile.widget.icon.large"), value: Ye.Large },
+      { label: n("report.tile.widget.icon.extraLarge"), value: Ye.ExtraLarge }
+    ], Z = [
+      { label: n("report.tile.widget.icon.material"), value: Me.Material },
+      { label: n("report.tile.widget.icon.customSvg"), value: Me.Custom }
+    ], O = ul(), F = dl(), { promptMessage: N } = ml(), le = sl(), L = b(() => {
+      const r = [];
+      let o = m.report.tiles;
+      for (const e of Be.value) {
+        const l = o.find((p) => p.id === e);
+        if (!l) break;
+        r.push(l), o = l.tiles ?? [];
+      }
+      return r;
+    });
+    ge(L, (r) => {
+      r.length !== Be.value.length && (Be.value = r.map((o) => o.id));
+    });
+    const a = b(() => L.value[L.value.length - 1] ?? null), D = b(() => L.value[L.value.length - 2] ?? null), $ = b(
+      () => a.value ? a.value.tiles ?? [] : m.report.tiles
+    ), K = b(() => {
+      var r;
+      return ((r = a.value) == null ? void 0 : r.id) ?? null;
+    }), re = b(() => L.value.length === 0), me = b(() => a.value ? qe(a.value) : !1), j = b(
+      () => D.value ? qe(D.value) : !1
+    ), ie = b(() => a.value ? fe(a.value) : !1), x = b(
+      () => L.value.reduce(
+        (r, o) => qe(o) ? r : fe(o) ? 1 : r + 1,
+        1
+      )
+    ), pe = b(() => !me.value && x.value < Fl), se = b(() => re.value);
+    function Y(r) {
+      r.widget && !fe(r) || (Be.value = [...Be.value, r.id]);
+    }
+    function ue() {
+      Be.value = Be.value.slice(0, -1);
+    }
+    function ne(r) {
+      if (!r) return "";
+      const o = `report.widget.types.${r.toLowerCase()}`;
+      return w(o) ? n(o) : Qe(n, w, r, "other");
+    }
+    function ce(r, o) {
+      if (r.widget) {
+        const e = r.widget.title ? ne(r.widget.title) : n("report.editor.widget", { index: o + 1 });
+        return fe(r) ? `${e} · ${n("report.editor.page")}` : e;
+      }
+      return r.tabTitle !== void 0 ? r.tabTitle || n("report.editor.tab", { index: o + 1 }) : r.title ? r.title : qe(r) ? n("report.editor.tabGroup") : n("report.editor.group");
+    }
+    function de(r, o) {
+      return !r.widget && me.value ? r.tabTitle || n("report.editor.tab", { index: o + 1 }) : ce(r, o);
+    }
+    function z(r) {
+      var o;
+      return ((o = r.tiles) == null ? void 0 : o.length) ?? 0;
+    }
+    const A = b(
+      () => L.value.map((r, o) => ce(r, o)).join(" › ")
+    );
+    function H(r, o) {
+      _l.value = K.value, le.editingTileIndex = o, le.editingTile = JSON.parse(JSON.stringify(r)), O.push({ name: "tileEditor", query: F.query });
+    }
+    function ve(r, o) {
+      $.value.splice(o + 1, 0, zl(r));
+    }
+    async function we(r, o) {
+      var p;
+      if (!await N({
+        title: n("report.editor.deleteWidget"),
+        message: n("report.editor.deleteWidgetConfirm", { title: de(r, o) })
+      })) return;
+      const l = ll(r);
+      $.value.splice(o, 1), (p = m.report.globalFilters) == null || p.forEach((g) => {
+        var _;
+        g.tileIds = (_ = g.tileIds) == null ? void 0 : _.filter((k) => !l.includes(k));
+      });
+    }
+    function X() {
+      a.value && (a.value.tiles || (a.value.tiles = []), a.value.tiles.push(Pl(a.value.tiles.length + 1)));
+    }
+    function te(r) {
+      ql(r);
+    }
+    async function Oe(r, o) {
+      var p;
+      if (!await N({
+        title: n("report.editor.removePage"),
+        message: n("report.editor.removePageConfirm", { title: de(r, o) })
+      })) return;
+      const l = ll(r).filter((g) => g !== r.id);
+      (p = m.report.globalFilters) == null || p.forEach((g) => {
+        var _;
+        g.tileIds = (_ = g.tileIds) == null ? void 0 : _.filter((k) => !l.includes(k));
+      }), El(r);
+    }
+    function Re() {
+      $.value.push(Ll());
+    }
+    function De() {
+      $.value.push(Al());
+    }
+    function _e(r) {
+      var e;
+      const o = Number((e = r.size) == null ? void 0 : e.width);
+      r.size || (r.size = { width: 12, height: 12 }), !Number.isFinite(o) || o < 1 ? r.size.width = 1 : o > 12 && (r.size.width = 12);
+    }
+    function Fe(r) {
+      var e;
+      const o = Number((e = r.size) == null ? void 0 : e.height);
+      r.size || (r.size = { width: 12, height: 12 }), !Number.isFinite(o) || o < 1 ? r.size.height = 1 : o > 12 && (r.size.height = 12);
+    }
+    function Ie(r, o) {
+      const e = Number(r[o]);
+      !Number.isFinite(e) || e < 1 ? r[o] = 1 : e > 24 && (r[o] = 24);
+    }
+    const Ue = b({
+      get: () => {
+        var r;
+        return ((r = a.value) == null ? void 0 : r.titleFontSize) ?? 16;
+      },
+      set: (r) => {
+        a.value && (a.value.titleFontSize = r ?? void 0);
+      }
+    }), ze = b({
+      get: () => {
+        var r;
+        return ((r = a.value) == null ? void 0 : r.descriptionFontSize) ?? 14;
+      },
+      set: (r) => {
+        a.value && (a.value.descriptionFontSize = r ?? void 0);
+      }
+    }), be = b({
+      get: () => {
+        var r, o, e;
+        return ((r = a.value) == null ? void 0 : r.tabIconType) ?? ((e = (o = a.value) == null ? void 0 : o.tabIcon) != null && e.trim().startsWith("<svg") ? Me.Custom : Me.Material);
+      },
+      set: (r) => {
+        a.value && (a.value.tabIconType = r);
+      }
+    }), Ve = b({
+      get: () => {
+        var r, o;
+        return be.value === Me.Custom ? Yl(((r = a.value) == null ? void 0 : r.tabIcon) ?? "") : ((o = a.value) == null ? void 0 : o.tabIcon) ?? "";
+      },
+      set: (r) => {
+        a.value && (a.value.tabIcon = be.value === Me.Custom ? Xl(r) : r.trim());
+      }
+    }), xe = G(!1), Ce = G(null), oe = G([]);
+    function Ne(r) {
+      const o = [
+        { parentId: null, label: n("report.editor.topLevel"), level: 1 }
+      ], e = (p, g, _) => {
+        let k = 0;
+        p.forEach((T) => {
+          var W;
+          if (T.widget) {
+            if (fe(T)) {
+              const P = `${_}${T.tabTitle || ne(T.widget.title)} · ${n("report.editor.page")}`;
+              o.push({ parentId: T.id, label: P, level: 1 }), e(T.tiles ?? [], 1, `${P} › `);
+            }
+            return;
+          }
+          if (qe(T)) {
+            const P = `${_}${n("report.editor.tabGroup")}`;
+            (W = T.tiles) == null || W.forEach((u, s) => {
+              const i = `${P} › ${u.tabTitle || n("report.editor.tab", { index: s + 1 })}`;
+              o.push({ parentId: u.id, label: i, level: g + 1 }), e(u.tiles ?? [], g + 1, `${i} › `);
+            });
+          } else {
+            k += 1;
+            const P = `${_}${T.title || `${n("report.editor.group")} ${k}`}`;
+            o.push({ parentId: T.id, label: P, level: g + 1 }), e(T.tiles ?? [], g + 1, `${P} › `);
+          }
+        });
+      };
+      e(m.report.tiles, 1, "");
+      const l = new Set(ll(r));
+      return o.filter(
+        (p) => p.parentId !== K.value && !(p.parentId && l.has(p.parentId)) && Wl(r, p.level)
+      );
+    }
+    function We(r) {
+      Ce.value = r, oe.value = Ne(r), xe.value = !0;
+    }
+    function He(r) {
+      const o = Ce.value;
+      if (!o) return;
+      const e = $.value.indexOf(o);
+      e >= 0 && $.value.splice(e, 1), Gl(m.report.tiles, r.parentId).push(o), xe.value = !1, Ce.value = null;
+    }
+    return (r, o) => {
+      const e = S("FmButton"), l = S("FmTextField"), p = S("FmSelect"), g = S("FmTextarea"), _ = S("FmStepperField"), k = S("FmIcon"), T = S("FmMenuItem"), W = S("FmMenu"), P = S("FmList"), u = S("FmListItem"), s = S("FmDialog");
+      return c(), R("div", xt, [
+        re.value ? U("", !0) : (c(), R("div", Ct, [
+          f("div", kt, [
+            d(e, {
+              icon: "arrow_back",
+              variant: "tertiary",
+              class: "-ml-8",
+              onClick: ue
+            }),
+            f("p", {
+              class: "fm-typo-en-body-md-600 line-clamp-1 overflow-hidden break-all min-w-0 grow text-left",
+              title: A.value
+            }, B(A.value), 9, Tt)
+          ]),
+          ie.value && a.value ? (c(), C(l, {
+            key: 0,
+            modelValue: a.value.tabTitle,
+            "onUpdate:modelValue": o[0] || (o[0] = (i) => a.value.tabTitle = i),
+            label: t(n)("report.editor.pageName"),
+            placeholder: t(n)("report.editor.pageName")
+          }, null, 8, ["modelValue", "label", "placeholder"])) : U("", !0),
+          j.value && a.value ? (c(), C(l, {
+            key: 1,
+            modelValue: a.value.tabTitle,
+            "onUpdate:modelValue": o[1] || (o[1] = (i) => a.value.tabTitle = i),
+            label: t(n)("report.editor.tabName"),
+            placeholder: t(n)("report.editor.tabName")
+          }, null, 8, ["modelValue", "label", "placeholder"])) : U("", !0),
+          j.value && a.value ? (c(), C(p, {
+            key: 2,
+            modelValue: be.value,
+            "onUpdate:modelValue": o[2] || (o[2] = (i) => be.value = i),
+            label: t(n)("report.tile.widget.icon.type"),
+            items: Z
+          }, null, 8, ["modelValue", "label"])) : U("", !0),
+          j.value && a.value && be.value === t(Me).Material ? (c(), C(l, {
+            key: 3,
+            modelValue: Ve.value,
+            "onUpdate:modelValue": o[3] || (o[3] = (i) => Ve.value = i),
+            label: t(n)("report.tile.widget.icon.materialName"),
+            placeholder: t(n)("report.tile.widget.icon.materialPlaceholder")
+          }, null, 8, ["modelValue", "label", "placeholder"])) : j.value && a.value ? (c(), C(g, {
+            key: 4,
+            modelValue: Ve.value,
+            "onUpdate:modelValue": o[4] || (o[4] = (i) => Ve.value = i),
+            label: t(n)("report.tile.widget.icon.customSvg"),
+            placeholder: t(n)("report.tile.widget.icon.customPlaceholder")
+          }, null, 8, ["modelValue", "label", "placeholder"])) : U("", !0),
+          j.value && a.value ? (c(), C(p, {
+            key: 5,
+            modelValue: a.value.tabIconSize,
+            "onUpdate:modelValue": o[5] || (o[5] = (i) => a.value.tabIconSize = i),
+            label: t(n)("report.tile.widget.icon.size"),
+            items: E
+          }, null, 8, ["modelValue", "label"])) : U("", !0),
+          !j.value && !ie.value && a.value ? (c(), C(je, {
+            key: 6,
+            "is-open": !1
+          }, {
+            header: V(() => [
+              f("p", St, B(t(n)("report.editor.groupDetails")), 1),
+              o[24] || (o[24] = f("div", { class: "grow" }, null, -1))
+            ]),
+            content: V(() => [
+              f("div", $t, [
+                d(l, {
+                  modelValue: a.value.title,
+                  "onUpdate:modelValue": o[6] || (o[6] = (i) => a.value.title = i),
+                  label: t(n)("report.editor.groupTitle"),
+                  placeholder: t(n)("report.editor.groupTitlePlaceholder")
+                }, null, 8, ["modelValue", "label", "placeholder"]),
+                d(g, {
+                  modelValue: a.value.description,
+                  "onUpdate:modelValue": o[7] || (o[7] = (i) => a.value.description = i),
+                  placeholder: t(n)("report.editor.groupDescriptionPlaceholder")
+                }, {
+                  label: V(() => [
+                    f("p", Ot, B(t(n)("report.editor.groupDescription")), 1),
+                    f("p", Dt, " (" + B(t(n)("report.editor.optional")) + ") ", 1)
+                  ]),
+                  _: 1
+                }, 8, ["modelValue", "placeholder"]),
+                f("div", It, [
+                  f("p", Ut, B(t(n)("report.editor.typography")), 1),
+                  f("div", Nt, [
+                    d(_, {
+                      modelValue: Ue.value,
+                      "onUpdate:modelValue": o[8] || (o[8] = (i) => Ue.value = i),
+                      modelModifiers: { number: !0 },
+                      class: "w-full",
+                      label: t(n)("report.editor.titleSize"),
+                      max: 24,
+                      min: 1,
+                      type: "number",
+                      onBlur: o[9] || (o[9] = (i) => Ie(a.value, "titleFontSize"))
+                    }, null, 8, ["modelValue", "label"]),
+                    f("div", Bt, [
+                      f("p", Mt, B(t(n)("report.editor.titleFormatting")), 1),
+                      f("div", Rt, [
+                        d(e, {
+                          "append-icon": "format_bold",
+                          "model-value": a.value.titleBold ?? !0,
+                          variant: "tertiary",
+                          "icon-color": a.value.titleBold ?? !0 ? "neutral-gray-400" : "neutral-gray-300",
+                          "bg-color": a.value.titleBold ?? !0 ? "neutral-gray-100" : "neutral-white",
+                          class: "rounded-sm",
+                          title: t(n)("report.editor.bold"),
+                          onClick: o[10] || (o[10] = (i) => a.value.titleBold = !(a.value.titleBold ?? !0))
+                        }, null, 8, ["model-value", "icon-color", "bg-color", "title"]),
+                        d(e, {
+                          "append-icon": "format_italic",
+                          "model-value": a.value.titleItalic ?? !1,
+                          variant: "tertiary",
+                          "icon-color": a.value.titleItalic ? "neutral-gray-400" : "neutral-gray-300",
+                          "bg-color": a.value.titleItalic ? "neutral-gray-100" : "neutral-white",
+                          class: "rounded-sm",
+                          title: t(n)("report.editor.italic"),
+                          onClick: o[11] || (o[11] = (i) => a.value.titleItalic = !a.value.titleItalic)
+                        }, null, 8, ["model-value", "icon-color", "bg-color", "title"]),
+                        d(e, {
+                          "append-icon": "format_underlined",
+                          "model-value": a.value.titleUnderline ?? !1,
+                          variant: "tertiary",
+                          "icon-color": a.value.titleUnderline ? "neutral-gray-400" : "neutral-gray-300",
+                          "bg-color": a.value.titleUnderline ? "neutral-gray-100" : "neutral-white",
+                          class: "rounded-sm",
+                          title: t(n)("report.editor.underline"),
+                          onClick: o[12] || (o[12] = (i) => a.value.titleUnderline = !a.value.titleUnderline)
+                        }, null, 8, ["model-value", "icon-color", "bg-color", "title"])
+                      ])
+                    ])
+                  ]),
+                  f("div", zt, [
+                    d(_, {
+                      modelValue: ze.value,
+                      "onUpdate:modelValue": o[13] || (o[13] = (i) => ze.value = i),
+                      modelModifiers: { number: !0 },
+                      class: "w-full",
+                      label: t(n)("report.editor.descriptionSize"),
+                      max: 24,
+                      min: 1,
+                      type: "number",
+                      onBlur: o[14] || (o[14] = (i) => Ie(a.value, "descriptionFontSize"))
+                    }, null, 8, ["modelValue", "label"]),
+                    f("div", Pt, [
+                      f("p", qt, B(t(n)("report.editor.descriptionFormatting")), 1),
+                      f("div", Et, [
+                        d(e, {
+                          "append-icon": "format_bold",
+                          "model-value": a.value.descriptionBold ?? !1,
+                          variant: "tertiary",
+                          "icon-color": a.value.descriptionBold ? "neutral-gray-400" : "neutral-gray-300",
+                          "bg-color": a.value.descriptionBold ? "neutral-gray-100" : "neutral-white",
+                          class: "rounded-sm",
+                          title: t(n)("report.editor.bold"),
+                          onClick: o[15] || (o[15] = (i) => a.value.descriptionBold = !a.value.descriptionBold)
+                        }, null, 8, ["model-value", "icon-color", "bg-color", "title"]),
+                        d(e, {
+                          "append-icon": "format_italic",
+                          "model-value": a.value.descriptionItalic ?? !1,
+                          variant: "tertiary",
+                          "icon-color": a.value.descriptionItalic ? "neutral-gray-400" : "neutral-gray-300",
+                          "bg-color": a.value.descriptionItalic ? "neutral-gray-100" : "neutral-white",
+                          class: "rounded-sm",
+                          title: t(n)("report.editor.italic"),
+                          onClick: o[16] || (o[16] = (i) => a.value.descriptionItalic = !a.value.descriptionItalic)
+                        }, null, 8, ["model-value", "icon-color", "bg-color", "title"]),
+                        d(e, {
+                          "append-icon": "format_underlined",
+                          "model-value": a.value.descriptionUnderline ?? !1,
+                          variant: "tertiary",
+                          "icon-color": a.value.descriptionUnderline ? "neutral-gray-400" : "neutral-gray-300",
+                          "bg-color": a.value.descriptionUnderline ? "neutral-gray-100" : "neutral-white",
+                          class: "rounded-sm",
+                          title: t(n)("report.editor.underline"),
+                          onClick: o[17] || (o[17] = (i) => a.value.descriptionUnderline = !a.value.descriptionUnderline)
+                        }, null, 8, ["model-value", "icon-color", "bg-color", "title"])
+                      ])
+                    ])
+                  ])
+                ])
+              ])
+            ]),
+            _: 1
+          })) : U("", !0),
+          !j.value && a.value ? (c(), C(l, {
+            key: 7,
+            modelValue: a.value.size.width,
+            "onUpdate:modelValue": o[18] || (o[18] = (i) => a.value.size.width = i),
+            modelModifiers: { number: !0 },
+            type: "number",
+            label: t(n)("report.editor.width"),
+            onBlur: o[19] || (o[19] = (i) => _e(a.value))
+          }, null, 8, ["modelValue", "label"])) : U("", !0),
+          !j.value && a.value ? (c(), C(l, {
+            key: 8,
+            modelValue: a.value.size.height,
+            "onUpdate:modelValue": o[20] || (o[20] = (i) => a.value.size.height = i),
+            modelModifiers: { number: !0 },
+            type: "number",
+            label: t(n)("report.editor.height"),
+            onBlur: o[21] || (o[21] = (i) => Fe(a.value))
+          }, null, 8, ["modelValue", "label"])) : U("", !0)
+        ])),
+        $.value.length === 0 ? (c(), R("div", Lt, B(t(n)("report.editor.emptyLevel")), 1)) : (c(), C(P, { key: 2 }, {
+          default: V(() => [
+            d(t(wl), {
+              list: $.value,
+              "item-key": "id",
+              class: "flex flex-col gap-2 cursor-grab",
+              handle: ".handle"
+            }, {
+              item: V(({ element: i, index: I }) => [
+                f("div", {
+                  class: Ae(["flex items-center gap-8 px-12 py-8 border rounded-md border-neutral-300 hover:bg-fm-color-opacity-sm", i.widget && !t(fe)(i) ? "cursor-grab" : "cursor-pointer"]),
+                  onClick: (h) => Y(i)
+                }, [
+                  d(k, {
+                    name: "drag_handle",
+                    class: "handle shrink-0 !cursor-grab"
+                  }),
+                  f("p", {
+                    class: "flex-1 min-w-0 truncate text-left fm-typo-en-body-lg-400",
+                    title: de(i, I)
+                  }, [
+                    Je(B(de(i, I)) + " ", 1),
+                    !i.widget || t(fe)(i) ? (c(), R("span", Wt, " · " + B(z(i)), 1)) : U("", !0)
+                  ], 8, Gt),
+                  !i.widget || t(fe)(i) ? (c(), C(k, {
+                    key: 0,
+                    name: "chevron_right",
+                    class: "shrink-0"
+                  })) : U("", !0),
+                  d(W, {
+                    trigger: "click",
+                    shift: !0,
+                    "stop-click-propagation": !0,
+                    class: "shrink-0"
+                  }, {
+                    "menu-button": V(() => [
+                      d(e, {
+                        "append-icon": "more_vert",
+                        variant: "tertiary"
+                      })
+                    ]),
+                    default: V(() => [
+                      i.widget ? (c(), C(T, {
+                        key: 0,
+                        label: t(n)("report.common.edit"),
+                        onClick: (h) => H(i, I)
+                      }, null, 8, ["label", "onClick"])) : U("", !0),
+                      i.widget && !t(fe)(i) ? (c(), C(T, {
+                        key: 1,
+                        label: t(n)("report.editor.convertToPage"),
+                        onClick: (h) => te(i)
+                      }, null, 8, ["label", "onClick"])) : U("", !0),
+                      t(fe)(i) ? (c(), C(T, {
+                        key: 2,
+                        label: t(n)("report.editor.removePage"),
+                        onClick: (h) => Oe(i, I)
+                      }, null, 8, ["label", "onClick"])) : U("", !0),
+                      t(qe)(i) ? U("", !0) : (c(), C(T, {
+                        key: 3,
+                        label: t(n)("report.editor.moveTo"),
+                        onClick: (h) => We(i)
+                      }, null, 8, ["label", "onClick"])),
+                      d(T, {
+                        label: t(n)("report.common.duplicate"),
+                        onClick: (h) => ve(i, I)
+                      }, null, 8, ["label", "onClick"]),
+                      d(T, {
+                        onClick: (h) => we(i, I)
+                      }, {
+                        label: V(() => [
+                          f("p", Ht, B(t(n)("report.common.remove")), 1)
+                        ]),
+                        _: 2
+                      }, 1032, ["onClick"])
+                    ]),
+                    _: 2
+                  }, 1024)
+                ], 10, At)
+              ]),
+              _: 1
+            }, 8, ["list"])
+          ]),
+          _: 1
+        })),
+        me.value ? (c(), C(e, {
+          key: 3,
+          label: t(n)("report.editor.addTab"),
+          variant: "secondary",
+          icon: "add",
+          "icon-position": "prepend",
+          "border-color": t(Te).ColorPrimary,
+          "text-color": t(Te).ColorPrimary,
+          onClick: X
+        }, null, 8, ["label", "border-color", "text-color"])) : (c(), C(W, {
+          key: 4,
+          trigger: "click",
+          shift: !0
+        }, {
+          "menu-button": V(() => [
+            d(e, {
+              label: t(n)("report.common.add"),
+              variant: "secondary",
+              icon: "add",
+              "icon-position": "prepend",
+              class: "w-full",
+              "border-color": t(Te).ColorPrimary,
+              "text-color": t(Te).ColorPrimary
+            }, null, 8, ["label", "border-color", "text-color"])
+          ]),
+          default: V(() => [
+            d(T, {
+              label: t(n)("report.editor.addWidget"),
+              onClick: o[22] || (o[22] = (i) => y("add-widget", K.value))
+            }, null, 8, ["label"]),
+            pe.value ? (c(), C(T, {
+              key: 0,
+              label: t(n)("report.editor.addGroup"),
+              onClick: Re
+            }, null, 8, ["label"])) : U("", !0),
+            se.value ? (c(), C(T, {
+              key: 1,
+              label: t(n)("report.editor.addTabGroup"),
+              onClick: De
+            }, null, 8, ["label"])) : U("", !0)
+          ]),
+          _: 1
+        })),
+        d(s, {
+          modelValue: xe.value,
+          "onUpdate:modelValue": o[23] || (o[23] = (i) => xe.value = i),
+          overlay: !0,
+          "z-index": 10
+        }, {
+          "dialog-header": V(() => [
+            Je(B(t(n)("report.editor.moveTo")), 1)
+          ]),
+          default: V(() => [
+            d(P, null, {
+              default: V(() => [
+                (c(!0), R(ye, null, Le(oe.value, (i) => (c(), C(u, {
+                  key: i.parentId ?? "root",
+                  onClick: (I) => He(i)
+                }, {
+                  default: V(() => [
+                    f("p", jt, B(i.label), 1)
+                  ]),
+                  _: 2
+                }, 1032, ["onClick"]))), 128))
+              ]),
+              _: 1
+            })
+          ]),
+          _: 1
+        }, 8, ["modelValue"])
+      ]);
+    };
+  }
+}), Qt = { class: "flex flex-col gap-24 top-0 bg-fm-color-neutral-white z-10" }, Kt = { class: "flex flex-col gap-24 top-0 bg-fm-color-neutral-white z-10" }, Yt = { class: "flex items-center gap-8" }, Xt = {
+  key: 2,
+  class: "flex flex-col gap-8 rounded-md border border-fm-color-border px-16 py-12"
+}, Zt = { class: "fm-typo-en-body-sm-400" }, eo = { class: "fm-typo-en-body-sm-400 font-bold" }, lo = { class: "space-y-1 fm-typo-en-body-sm-400 text-fm-color-typo-secondary" }, to = { class: "flex flex-col gap-24 top-0 bg-fm-color-neutral-white z-10" }, oo = { class: "flex items-center gap-1 max-w-[195px] w-[195px]" }, ao = { class: "line-clamp-2 overflow-hidden max-w-[195px] w-[195px]" }, gl = /* @__PURE__ */ he({
+  __name: "ReportEditorTab",
+  props: /* @__PURE__ */ Se({
+    hideConfiguration: {
+      type: Boolean,
+      default: !1
+    },
+    // general report: only the query version and datasource may change
+    readOnly: {
+      type: Boolean,
+      default: !1
+    }
+  }, {
+    modelValue: { required: !0 },
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ Se(["hideConfiguration"], ["update:modelValue"]),
+  setup(q, { emit: v }) {
+    const m = $e(q, "modelValue"), { breakpoints: y } = Ze(), n = q, w = v, E = ul(), Z = dl(), O = G(), {
+      currentSelectWidgetType: F,
+      categories: N,
+      editingTile: le,
+      editingTileIndex: L,
+      editingGlobalFilter: a,
+      editingGlobalFilterIndex: D
+    } = Ee(sl()), { schemas: $ } = Ee(Hl()), { globalFilters: K } = Ee(cl()), { getGlobalFilterLabel: re } = cl(), { promptMessage: me } = ml(), j = G(!1), ie = G(!1), { t: x, te: pe, locale: se } = Ge(), Y = G(void 0), ue = b(() => {
+      const u = tl(m.value.tiles).flatMap((s) => {
+        var h;
+        const i = s.widget.config.schemaNames ?? [], I = ((h = s.widget.config.joinDatasources) == null ? void 0 : h.flatMap((ee) => ee.schemaNames ?? [])) ?? [];
+        return [...i, ...I];
+      });
+      return [...new Set(u)].reduce((s, i) => {
+        const I = $.value.find((h) => h.name === i);
+        return I && s.push(I), s;
+      }, []);
+    }), ne = G(null);
+    function ce(u) {
+      ne.value = u, ie.value = !0;
+    }
+    ge(
+      () => F.value,
+      () => {
+        F.value !== void 0 && (Y.value = Zl(F.value), le.value = Y.value, L.value = -1, _l.value = ne.value, E.push({
+          name: "tileEditor",
+          query: Z.query
+        }));
+      },
+      { immediate: !0 }
+    ), ge(
+      () => m.value.tiles,
+      (u) => {
+        jl(u);
+      },
+      { immediate: !0, deep: !0 }
+    );
+    const de = [
+      {
+        label: "report.common.edit",
+        selected: !1,
+        variant: "tertiary",
+        onClick: (u) => {
+          var s;
+          D.value = u, a.value = JSON.parse(JSON.stringify((s = m.value.globalFilters) == null ? void 0 : s[u])), j.value = !0;
+        }
+      },
+      {
+        label: "report.common.duplicate",
+        selected: !1,
+        variant: "tertiary",
+        onClick: (u) => {
+          var I;
+          const s = (I = m.value.globalFilters) == null ? void 0 : I[u];
+          if (!s) return;
+          const i = JSON.parse(JSON.stringify(s));
+          m.value.globalFilters || (m.value.globalFilters = []), m.value.globalFilters.push(i);
+        }
+      },
+      {
+        label: "report.common.remove",
+        selected: !1,
+        variant: "destructive",
+        onClick: async (u) => {
+          var I, h;
+          const s = (I = m.value.globalFilters) == null ? void 0 : I[u];
+          if (!s) return;
+          await me({
+            title: x("report.editor.deleteWidget"),
+            message: x("report.editor.deleteWidgetConfirm", {
+              title: re(s)
+            })
+          }) && ((h = m.value.globalFilters) == null || h.splice(u, 1));
+        }
+      }
+    ], z = b(() => N.value.map((u) => ({
+      label: x(`report.category.${u.name}`),
+      value: u.id
+    }))), { sessionUser: A } = tt(), H = b(
+      () => {
+        var u, s, i, I;
+        return ((s = (u = A.value) == null ? void 0 : u.role) == null ? void 0 : s.isAdmin) === !0 || ((I = (i = A.value) == null ? void 0 : i.role) == null ? void 0 : I.isStaff) === !0;
+      }
+    ), ve = b({
+      get: () => m.value.queryVersion === "v2",
+      set: (u) => {
+        m.value.queryVersion = u ? "v2" : "v1", u ? m.value.queryDatasource = m.value.queryDatasource ?? Xe.Postgres : m.value.queryDatasource = void 0;
+      }
+    }), we = [
+      { label: x("report.common.postgresql"), value: Xe.Postgres },
+      { label: x("report.common.bigquery"), value: Xe.BigQuery }
+    ], X = [
+      { label: x("report.common.noBatch"), value: "none" },
+      { label: x("report.common.days"), value: "days" },
+      { label: x("report.common.locations"), value: "locations" }
+    ], te = b({
+      get: () => {
+        var u, s;
+        return (u = m.value.batch) != null && u.days ? "days" : (s = m.value.batch) != null && s.locations ? "locations" : "none";
+      },
+      set: (u) => {
+        var s, i;
+        u === "none" ? m.value.batch = n.readOnly ? null : void 0 : u === "days" ? m.value.batch = { days: ((s = m.value.batch) == null ? void 0 : s.days) || 1 } : u === "locations" && (m.value.batch = { locations: ((i = m.value.batch) == null ? void 0 : i.locations) || 10 });
+      }
+    }), Oe = b({
+      get: () => {
+        var u, s;
+        if (te.value === "days") return ((u = m.value.batch) == null ? void 0 : u.days) ?? 1;
+        if (te.value === "locations") return ((s = m.value.batch) == null ? void 0 : s.locations) ?? 1;
+      },
+      set: (u) => {
+        u && (te.value === "days" ? m.value.batch = { days: u } : te.value === "locations" && (m.value.batch = { locations: u }));
+      }
+    }), Re = b({
+      get: () => Qe(x, pe, m.value.name, "other"),
+      set: (u) => {
+        m.value.name = u;
+      }
+    }), { country: De } = Ee(ot()), {
+      dateRange: _e,
+      compareDateRange: Fe,
+      timeRange: Ie,
+      selectedLocationIds: Ue,
+      businessDataVersion: ze,
+      restaurants: be,
+      warehouses: Ve
+    } = Ee(at()), xe = b(
+      () => m.value.queryVersion === "v2" && m.value.queryDatasource === Xe.BigQuery
+    ), Ce = b(() => xe.value && H.value), oe = G(null), Ne = G(!1), We = b(() => {
+      const u = _e.value.startDate ?? _e.value.endDate;
+      return u ? {
+        startDate: u,
+        endDate: u
+      } : _e.value;
+    }), He = b(() => {
+      const u = Fe.value.startDate ?? Fe.value.endDate;
+      return u ? {
+        startDate: u,
+        endDate: u
+      } : Fe.value;
+    }), r = b(() => {
+      const u = m.value.batch;
+      if (!u) return 1;
+      if (u.locations) {
+        const s = be.value.length + Ve.value.length;
+        return Math.max(1, Math.ceil(s / u.locations));
+      }
+      return 1;
+    }), o = b(() => {
+      if (oe.value == null || oe.value === 0) return null;
+      const u = oe.value * r.value;
+      return vl(u, De.value);
+    }), e = b(() => oe.value == null || oe.value === 0 ? null : vl(oe.value, De.value)), l = b(() => o.value ? fl(o.value.amount, o.value.symbol) : ""), p = b(() => e.value ? fl(e.value.amount, e.value.symbol) : ""), g = b(() => r.value === 1 ? x("report.common.estimatedCostBatchSingular") : x("report.common.estimatedCostBatchPlural")), _ = b(() => Ne.value ? "..." : !l.value || !p.value ? "--" : x("report.common.estimatedCostFormula", {
+      batchCount: r.value,
+      batchLabel: g.value,
+      baseCost: p.value,
+      totalCost: l.value
+    }));
+    let k = [];
+    const T = rt(async () => {
+      if (!Ce.value) return;
+      const u = tl(m.value.tiles).filter(
+        (s) => {
+          var i;
+          return ((i = s.widget.config.schemaNames) == null ? void 0 : i.length) > 0;
+        }
+      );
+      if (u.length === 0) {
+        oe.value = null;
+        return;
+      }
+      Ne.value = !0, k.forEach((s) => s.abort()), k = [];
+      try {
+        const s = await Promise.all(
+          u.map((i) => {
+            const I = new AbortController();
+            return k.push(I), lt({
+              widget: i.widget,
+              signal: I.signal,
+              tileId: i.id,
+              scopedDateRange: We.value,
+              scopedCompareDateRange: He.value
+            });
+          })
+        );
+        oe.value = s.reduce((i, I) => i + (I.totalBytesProcessed ?? 0), 0);
+      } catch (s) {
+        s.code !== "ERR_CANCELED" && (oe.value = null);
+      } finally {
+        Ne.value = !1;
+      }
+    }, 1e3);
+    ge(
+      [
+        () => m.value.tiles,
+        () => m.value.queryVersion,
+        () => m.value.queryDatasource,
+        () => m.value.batch,
+        () => _e.value,
+        () => Ie.value,
+        () => Fe.value,
+        () => Ue.value,
+        () => ze.value
+      ],
+      () => {
+        T();
+      },
+      { deep: !0 }
+    ), yl(() => {
+      T();
+    }), Ol(() => {
+      k.forEach((u) => u.abort());
+    });
+    function W(u) {
+      var s;
+      return !((s = u.tileIds) != null && s.length);
+    }
+    function P(u) {
+      return !ue.value.find((s) => s.name === u.schemaName);
+    }
+    return ge(
+      () => m.value.globalFilters,
+      (u) => {
+        K.value = JSON.parse(JSON.stringify(u || []));
+      },
+      { deep: !0, immediate: !0 }
+    ), (u, s) => {
+      const i = S("FmTextField"), I = S("FmSelect"), h = S("FmSwitch"), ee = S("FmButton"), Q = S("FmIcon"), J = S("FmTooltip"), Ke = S("FmMenuItem"), xl = S("FmMenu"), Cl = S("FmListItem"), kl = S("FmList"), Tl = S("FmForm");
+      return c(), C(Dl(t(y).lg || t(y).md ? st : ut), {
+        "model-value": n.hideConfiguration,
+        "onUpdate:modelValue": s[12] || (s[12] = (M) => w("hideConfiguration", M))
+      }, {
+        default: V(() => [
+          d(ht, {
+            "is-open": j.value,
+            "onUpdate:isOpen": s[0] || (s[0] = (M) => j.value = M),
+            "global-filter": t(a),
+            tiles: t(tl)(m.value.tiles),
+            schemas: ue.value,
+            "onUpdate:globalFilter": s[1] || (s[1] = (M) => {
+              M && (m.value.globalFilters || (m.value.globalFilters = []), typeof t(D) == "number" && t(D) >= 0 ? m.value.globalFilters[t(D)] = M : m.value.globalFilters.push(M));
+            })
+          }, null, 8, ["is-open", "global-filter", "tiles", "schemas"]),
+          d(nt, {
+            modelValue: t(F),
+            "onUpdate:modelValue": s[2] || (s[2] = (M) => hl(F) ? F.value = M : null),
+            "is-open": ie.value,
+            "onUpdate:isOpen": s[3] || (s[3] = (M) => ie.value = M)
+          }, null, 8, ["modelValue", "is-open"]),
+          d(Tl, {
+            ref_key: "form",
+            ref: O,
+            class: "px-6 py-16 flex flex-col gap-24 overflow-y-auto overflow-x-hidden"
+          }, {
+            default: V(() => [
+              d(je, { class: "border-solid" }, {
+                header: V(() => [
+                  f("p", null, B(t(x)("report.editor.reportInfo")), 1),
+                  s[13] || (s[13] = f("div", { class: "grow" }, null, -1))
+                ]),
+                content: V(() => [
+                  f("div", Qt, [
+                    d(i, {
+                      modelValue: Re.value,
+                      "onUpdate:modelValue": s[4] || (s[4] = (M) => Re.value = M),
+                      label: t(x)("report.common.name"),
+                      placeholder: t(x)("report.common.name"),
+                      disabled: n.readOnly
+                    }, null, 8, ["modelValue", "label", "placeholder", "disabled"]),
+                    (c(), C(I, {
+                      key: `category-${t(se)}`,
+                      modelValue: m.value.category,
+                      "onUpdate:modelValue": s[5] || (s[5] = (M) => m.value.category = M),
+                      label: t(x)("report.common.category"),
+                      items: z.value,
+                      disabled: n.readOnly
+                    }, null, 8, ["modelValue", "label", "items", "disabled"])),
+                    d(i, {
+                      modelValue: m.value.description,
+                      "onUpdate:modelValue": s[6] || (s[6] = (M) => m.value.description = M),
+                      label: t(x)("report.common.description"),
+                      placeholder: t(x)("report.common.description"),
+                      disabled: n.readOnly
+                    }, null, 8, ["modelValue", "label", "placeholder", "disabled"])
+                  ])
+                ]),
+                _: 1
+              }),
+              d(je, {
+                class: "border-solid",
+                "is-open": !1
+              }, {
+                header: V(() => [
+                  f("p", null, B(t(x)("report.editor.advancedUsage")), 1),
+                  s[14] || (s[14] = f("div", { class: "grow" }, null, -1))
+                ]),
+                content: V(() => [
+                  f("div", Kt, [
+                    f("div", Yt, [
+                      s[15] || (s[15] = f("span", { class: "fm-typo-en-body-sm-400 text-fm-color-typo-secondary" }, "V2", -1)),
+                      d(h, {
+                        modelValue: ve.value,
+                        "onUpdate:modelValue": s[7] || (s[7] = (M) => ve.value = M)
+                      }, null, 8, ["modelValue"])
+                    ]),
+                    ve.value && H.value ? (c(), C(I, {
+                      key: 0,
+                      modelValue: m.value.queryDatasource,
+                      "onUpdate:modelValue": s[8] || (s[8] = (M) => m.value.queryDatasource = M),
+                      label: t(x)("report.common.queryDatasource"),
+                      items: we
+                    }, null, 8, ["modelValue", "label"])) : U("", !0),
+                    d(I, {
+                      modelValue: te.value,
+                      "onUpdate:modelValue": s[9] || (s[9] = (M) => te.value = M),
+                      label: t(x)("report.common.batch"),
+                      items: X
+                    }, null, 8, ["modelValue", "label"]),
+                    te.value !== "none" ? (c(), C(i, {
+                      key: 1,
+                      modelValue: Oe.value,
+                      "onUpdate:modelValue": s[10] || (s[10] = (M) => Oe.value = M),
+                      modelModifiers: { number: !0 },
+                      label: te.value === "days" ? t(x)("report.common.days") : t(x)("report.common.locations"),
+                      type: "number"
+                    }, null, 8, ["modelValue", "label"])) : U("", !0),
+                    Ce.value ? (c(), R("div", Xt, [
+                      f("span", Zt, B(t(x)("report.common.estimatedBqCost")), 1),
+                      f("p", eo, B(_.value), 1),
+                      f("div", lo, [
+                        f("div", null, "* " + B(t(x)("report.common.estimatedCostGuidelineBigQuery")), 1),
+                        f("div", null, "* " + B(t(x)("report.common.estimatedCostGuidelineDateRange")), 1),
+                        f("div", null, "* " + B(t(x)("report.common.estimatedCostGuidelineLocationBatch")), 1)
+                      ])
+                    ])) : U("", !0)
+                  ])
+                ]),
+                _: 1
+              }),
+              n.readOnly ? U("", !0) : (c(), C(je, {
+                key: 0,
+                class: "border-solid",
+                "is-open": !1
+              }, {
+                header: V(() => [
+                  f("p", null, B(t(x)("report.section.filter.globalFilter")), 1),
+                  s[16] || (s[16] = f("div", { class: "grow" }, null, -1))
+                ]),
+                content: V(() => [
+                  f("div", to, [
+                    d(ee, {
+                      label: t(x)("report.section.filter.addGlobalFilter"),
+                      variant: "secondary",
+                      icon: "add",
+                      "icon-position": "prepend",
+                      "border-color": t(Te).ColorPrimary,
+                      "text-color": t(Te).ColorPrimary,
+                      onClick: s[11] || (s[11] = () => {
+                        D.value = null, a.value = null, j.value = !0;
+                      })
+                    }, null, 8, ["label", "border-color", "text-color"]),
+                    d(kl, null, {
+                      default: V(() => [
+                        d(t(wl), {
+                          list: m.value.globalFilters,
+                          "item-key": "`${element.schemaName}-${element.name}`",
+                          class: "flex flex-col gap-2 cursor-grab",
+                          handle: ".handle"
+                        }, {
+                          item: V(({ element: M, index: Sl }) => [
+                            d(Cl, { class: "!cursor-grab border rounded-md border-neutral-300" }, {
+                              default: V(() => [
+                                d(Q, {
+                                  name: "drag_handle",
+                                  class: "handle"
+                                }),
+                                f("div", oo, [
+                                  d(J, {
+                                    "z-index": 99,
+                                    content: t(re)(M),
+                                    class: "handle"
+                                  }, {
+                                    default: V(() => [
+                                      f("p", ao, B(t(re)(M)), 1)
+                                    ]),
+                                    _: 2
+                                  }, 1032, ["content"]),
+                                  P(M) ? (c(), C(J, {
+                                    key: 0,
+                                    content: t(x)("report.section.filter.missingSchema"),
+                                    "z-index": 99
+                                  }, {
+                                    default: V(() => [
+                                      d(Q, {
+                                        name: "warning",
+                                        class: "text-fm-color-system-error-300"
+                                      })
+                                    ]),
+                                    _: 1
+                                  }, 8, ["content"])) : W(M) ? (c(), C(J, {
+                                    key: 1,
+                                    content: t(x)("report.section.filter.missingTileIds"),
+                                    "z-index": 99
+                                  }, {
+                                    default: V(() => [
+                                      d(Q, {
+                                        name: "warning",
+                                        class: "text-fm-color-system-warning-300"
+                                      })
+                                    ]),
+                                    _: 1
+                                  }, 8, ["content"])) : U("", !0)
+                                ]),
+                                s[17] || (s[17] = f("div", { class: "grow" }, null, -1)),
+                                d(xl, {
+                                  trigger: "click",
+                                  shift: !0,
+                                  "stop-click-propagation": !0
+                                }, {
+                                  "menu-button": V(() => [
+                                    d(ee, {
+                                      "append-icon": "more_vert",
+                                      variant: "tertiary"
+                                    })
+                                  ]),
+                                  default: V(() => [
+                                    (c(), R(ye, null, Le(de, (el, $l) => d(Ke, {
+                                      key: $l,
+                                      onClick: (_o) => el.onClick(Sl)
+                                    }, {
+                                      label: V(() => [
+                                        f("p", {
+                                          class: Ae(
+                                            el.variant === "destructive" ? " text-fm-color-system-error-300" : ""
+                                          )
+                                        }, B(t(x)(el.label)), 3)
+                                      ]),
+                                      _: 2
+                                    }, 1032, ["onClick"])), 64))
+                                  ]),
+                                  _: 2
+                                }, 1024)
+                              ]),
+                              _: 2
+                            }, 1024)
+                          ]),
+                          _: 1
+                        }, 8, ["list"])
+                      ]),
+                      _: 1
+                    })
+                  ])
+                ]),
+                _: 1
+              })),
+              n.readOnly ? U("", !0) : (c(), C(je, {
+                key: 1,
+                class: "border-solid"
+              }, {
+                header: V(() => [
+                  f("p", null, B(t(x)("report.editor.widgets")), 1),
+                  s[18] || (s[18] = f("div", { class: "grow" }, null, -1))
+                ]),
+                content: V(() => [
+                  d(Jt, {
+                    report: m.value,
+                    onAddWidget: ce
+                  }, null, 8, ["report"])
+                ]),
+                _: 1
+              }))
+            ]),
+            _: 1
+          }, 512)
+        ]),
+        _: 1
+      }, 8, ["model-value"]);
+    };
+  }
+}), ro = { class: "h-full w-full overflow-x-hidden" }, no = { class: "flex flex-col bg-fm-color-neutral-white w-[400px]" }, io = { class: "flex bg-fm-color-neutral-white w-[88px]" }, so = {
+  key: 1,
+  class: "w-full overflow-y-auto"
+}, uo = {
+  key: 0,
+  class: "w-full p-24"
+}, mo = { class: "mb-4 flex flex-wrap gap-2 pb-2" }, co = { key: 2 }, po = { key: 0 }, vo = { class: "mb-4 flex flex-wrap gap-2 pb-2" }, fo = {
+  key: 3,
+  class: "h-full w-full flex items-start justify-center bg-fm-color-neutral-white py-24",
+  style: { backgroundColor: "#F6F8FC" }
+}, go = {
+  key: 0,
+  class: "w-full"
+}, bo = /* @__PURE__ */ he({
+  __name: "ReportEditorViewport",
+  props: /* @__PURE__ */ Se({
+    hideConfiguration: { type: Boolean, required: !1, default: !1 },
+    readOnly: { 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__ */ Se(["hideConfiguration"], ["update:modelValue"]),
+  setup(q, { emit: v }) {
+    const { breakpoints: m } = Ze(), y = $e(q, "modelValue"), n = b(() => {
+      var F;
+      return Jl((F = y.value) == null ? void 0 : F.tiles);
+    }), w = q, E = b(() => w.previewWidth > 0 && w.previewHeight > 0), Z = b(() => m.value.sm || m.value.xs), O = v;
+    return (F, N) => {
+      const le = S("FmCircularProgress"), L = S("FmButton"), a = S("FmMenuDivider"), D = S("FmCard");
+      return c(), R("div", ro, [
+        y.value ? (c(), R(ye, { key: 1 }, [
+          E.value ? U("", !0) : (c(), C(Ml, {
+            key: 0,
+            "model-value": !w.hideConfiguration
+          }, {
+            right: V(() => [
+              f("div", no, [
+                y.value ? (c(), C(gl, {
+                  key: 0,
+                  modelValue: y.value,
+                  "onUpdate:modelValue": N[0] || (N[0] = ($) => y.value = $),
+                  "hide-configuration": w.hideConfiguration,
+                  "read-only": w.readOnly,
+                  onHideConfiguration: N[1] || (N[1] = ($) => O("hideConfiguration", $))
+                }, null, 8, ["modelValue", "hide-configuration", "read-only"])) : U("", !0)
+              ])
+            ]),
+            left: V(() => [
+              f("div", io, [
+                d(L, {
+                  variant: "secondary",
+                  icon: "keyboard_double_arrow_right",
+                  "border-color": t(Te).ColorPrimary,
+                  "text-color": t(Te).ColorPrimary,
+                  class: "m-24 my-16",
+                  size: "md",
+                  onClick: N[2] || (N[2] = ($) => O("hideConfiguration", !w.hideConfiguration))
+                }, null, 8, ["border-color", "text-color"])
+              ])
+            ]),
+            _: 1
+          }, 8, ["model-value"])),
+          d(a, {
+            vertical: "",
+            style: { margin: "0px" }
+          }),
+          !Z.value && !E.value ? (c(), R("div", so, [
+            y.value.tiles.length > 0 ? (c(), R("div", uo, [
+              f("div", mo, [
+                d(pl)
+              ]),
+              d(ol, {
+                tiles: y.value.tiles,
+                "report-id": y.value.id || "editing",
+                "leaf-index-by-id": n.value,
+                "hide-export": !0,
+                "grid-class": "gap-[24px]"
+              }, null, 8, ["tiles", "report-id", "leaf-index-by-id"])
+            ])) : (c(), C(rl, { key: 1 }))
+          ])) : Z.value && !E.value ? (c(), R("div", co, [
+            d(D, { class: "px-5 pb-28" }, {
+              default: V(() => [
+                y.value.tiles.length > 0 ? (c(), R("div", po, [
+                  f("div", vo, [
+                    d(pl)
+                  ]),
+                  d(ol, {
+                    tiles: y.value.tiles,
+                    "report-id": y.value.id || "editing",
+                    "leaf-index-by-id": n.value,
+                    "hide-export": !0,
+                    "grid-class": "gap-[16px]"
+                  }, null, 8, ["tiles", "report-id", "leaf-index-by-id"])
+                ])) : (c(), C(rl, { key: 1 }))
+              ]),
+              _: 1
+            }),
+            y.value ? (c(), C(gl, {
+              key: 0,
+              modelValue: y.value,
+              "onUpdate:modelValue": N[3] || (N[3] = ($) => y.value = $),
+              "hide-configuration": w.hideConfiguration,
+              "read-only": w.readOnly,
+              onHideConfiguration: N[4] || (N[4] = ($) => {
+                O("hideConfiguration", $);
+              })
+            }, null, 8, ["modelValue", "hide-configuration", "read-only"])) : U("", !0)
+          ])) : (c(), R("div", fo, [
+            f("div", {
+              style: nl({
+                transformOrigin: "top center",
+                transform: `scale(${w.previewScale})`
+              })
+            }, [
+              f("div", {
+                class: "overflow-y-auto bg-white rounded-lg",
+                style: nl({
+                  width: w.previewWidth + "px",
+                  height: w.previewHeight + "px"
+                })
+              }, [
+                y.value.tiles.length > 0 ? (c(), R("div", go, [
+                  d(ol, {
+                    tiles: y.value.tiles,
+                    "report-id": y.value.id || "editing",
+                    "leaf-index-by-id": n.value,
+                    "hide-export": !0,
+                    "custom-screen-width": w.previewWidth,
+                    "grid-class": "gap-[24px] p-24"
+                  }, null, 8, ["tiles", "report-id", "leaf-index-by-id", "custom-screen-width"])
+                ])) : (c(), C(rl, { key: 1 }))
+              ], 4)
+            ], 4)
+          ]))
+        ], 64)) : (c(), C(le, { key: 0 }))
+      ]);
+    };
+  }
+}), yo = { class: "flex items-center gap-4" }, ho = { class: "flex justify-center items-center gap-2 w-full" }, wo = { class: "flex gap-4" }, Po = /* @__PURE__ */ he({
+  __name: "ReportEditor",
+  setup(q) {
+    const v = ul(), m = dl(), y = sl(), { promptLoader: n } = Kl(), { t: w, te: E } = Ge(), { currentReport: Z, editingReport: O } = Ee(y), { breakpoints: F } = Ze(), N = b(() => {
+      var z;
+      return !((z = O.value) != null && z.editable);
+    }), le = b(() => {
+      var z, A;
+      return !((z = O.value) != null && z.editable) && !((A = O.value) != null && A.isDefault);
+    }), L = b(() => {
+      var z;
+      return ((z = O.value) == null ? void 0 : z.name) ?? w("report.editor.newReport");
+    }), a = b(() => Qe(w, E, L.value, "other")), D = Vl(), { promptMessage: $ } = ml(), K = G(!1), re = b(() => [
+      { label: w("report.common.cancel"), value: "cancel", isPrimary: !1 },
+      { label: w("report.common.save"), value: "save", isPrimary: !0, prependIcon: "download" }
+    ]);
+    async function me() {
+      if (!O.value || O.value.tiles.length === 0) {
+        D.open({ message: w("report.messages.noWidget"), type: "error" });
+        return;
+      }
+      if (Ql(O.value.tiles) > Fl) {
+        D.open({ message: w("report.messages.tooDeepNesting"), type: "error" });
+        return;
+      }
+      const z = le.value ? w("report.common.clone") : w("report.common.save");
+      if (await $({
+        title: `${w("report.messages.saveReport")}`,
+        message: w("report.messages.confirmAction", { action: z, name: a.value })
+      }))
+        try {
+          await n(async () => {
+            if (le.value) {
+              const H = JSON.parse(JSON.stringify(O.value));
+              H.editable = !0, H.id = "", H.name = `${H.name} ${w("report.common.duplicate")}`, H.isDefault = !1, await y.createOrUpdateReport(H);
+            } else
+              O.value && await y.createOrUpdateReport(O.value);
+            v.push({
+              name: "reportView",
+              query: m.query
+            });
+          });
+        } catch (H) {
+          console.log(H), D.open({
+            message: w("report.messages.failedToAction", { action: z }),
+            type: "error"
+          });
+        }
+    }
+    async function j() {
+      var A;
+      if (!O.value) return;
+      await $({
+        title: w("report.common.report", 1),
+        message: w("report.editor.notSaved", { name: (A = O.value) == null ? void 0 : A.name })
+      }) && (O.value = JSON.parse(JSON.stringify(Z.value)), v.back());
+    }
+    yl(() => {
+      O.value || v.push({ name: "reports" });
+    });
+    const ie = [
+      {
+        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
+      }
+    ], x = G(ie[0]), pe = G(!1), se = b(() => pe.value ? Math.max(x.value.width || 0, x.value.height || 0) : Math.min(x.value.width || 0, x.value.height || 0)), Y = b(() => pe.value ? Math.min(x.value.width || 0, x.value.height || 0) : Math.max(x.value.width || 0, x.value.height || 0)), ue = b(() => window.innerHeight - 72 - 56), ne = b(() => {
+      if (!se.value) return 1;
+      let z = (ue.value - 48) / se.value, A = Y.value * z;
+      return A > window.innerWidth && (z = window.innerWidth / Y.value, A = Y.value * z), z > 1 ? 1 : z;
+    });
+    function ce(z) {
+      x.value = z;
+    }
+    function de() {
+      pe.value = !pe.value;
+    }
+    return (z, A) => {
+      const H = S("FmTooltip"), ve = S("FmButton"), we = S("FmPageHead");
+      return c(), C(Rl, null, {
+        default: V(() => [
+          d(we, {
+            "data-editor-header": "true",
+            actions: re.value,
+            "onClick:action": A[0] || (A[0] = (X) => {
+              X === "cancel" && j(), X === "save" && me();
+            })
+          }, {
+            title: V(() => [
+              f("div", yo, [
+                d(H, {
+                  content: a.value,
+                  placement: "bottom"
+                }, {
+                  default: V(() => [
+                    f("p", {
+                      class: Ae(`${t(F).sm || t(F).xs ? "hidden" : ""} text-ellipsis overflow-hidden text-nowrap fm-typo-en-title-md-600 w-[250px]`)
+                    }, B(a.value), 3)
+                  ]),
+                  _: 1
+                }, 8, ["content"]),
+                f("div", ho, [
+                  f("div", wo, [
+                    (c(), R(ye, null, Le(ie, (X) => {
+                      var te;
+                      return d(ve, {
+                        key: X.labelKey,
+                        label: t(w)(X.labelKey),
+                        variant: ((te = x.value) == null ? void 0 : te.labelKey) === X.labelKey ? "primary" : "secondary",
+                        size: "md",
+                        onClick: (Oe) => ce(X)
+                      }, null, 8, ["label", "variant", "onClick"]);
+                    }), 64))
+                  ]),
+                  d(ve, {
+                    icon: "screen_rotation",
+                    variant: "tertiary",
+                    size: "md",
+                    class: "text-fm-color-typo-primary",
+                    onClick: de
+                  })
+                ])
+              ])
+            ]),
+            _: 1
+          }, 8, ["actions"]),
+          t(O) ? (c(), C(bo, {
+            key: 0,
+            modelValue: t(O),
+            "onUpdate:modelValue": A[1] || (A[1] = (X) => hl(O) ? O.value = X : null),
+            "read-only": N.value,
+            style: nl({ height: ue.value + "px" }),
+            class: Ae(t(F).lg || t(F).md ? "flex" : ""),
+            "hide-configuration": K.value,
+            "preview-width": Y.value,
+            "preview-height": se.value,
+            "preview-scale": ne.value,
+            onHideConfiguration: A[2] || (A[2] = (X) => K.value = X)
+          }, null, 8, ["modelValue", "read-only", "style", "class", "hide-configuration", "preview-width", "preview-height", "preview-scale"])) : U("", !0)
+        ]),
+        _: 1
+      });
+    };
+  }
+});
+export {
+  Po as default
+};