@feedmepos/mf-report 5.22.25 → 5.22.26

package/dist/InsightView-B8Wrd2SX.js

@@ -0,0 +1,664 @@
+import { ref as B, defineComponent as S, watch as T, computed as _, onMounted as le, createElementBlock as d, openBlock as o, createElementVNode as a, renderSlot as H, toDisplayString as w, resolveDirective as X, createCommentVNode as A, Fragment as z, renderList as P, createBlock as V, withDirectives as M, resolveDynamicComponent as N, unref as m, withCtx as I, createVNode as y, normalizeClass as L, resolveComponent as R, useModel as ae, createTextVNode as oe, isRef as j, nextTick as se } from "vue";
+import { _ as ne } from "./Default.vue_vue_type_script_setup_true_lang-BUIcdcLn.js";
+import { _ as ie } from "./DateRangeSelect.vue_vue_type_script_setup_true_lang-DlpbyWWd.js";
+import { d as W, u as G, F as O, q as J, h as Y, a as re } from "./app-C2vt2B-i.js";
+import { storeToRefs as K } from "pinia";
+import { C as Q, r as de } from "./chart-DDDh8zNk.js";
+import { components as E, useSnackbar as ce } from "@feedmepos/ui-library";
+import { u as ee } from "./vue-i18n-DVWuTfed.js";
+import { _ as ue } from "./NoData.vue_vue_type_script_setup_true_lang-CDKHIlF2.js";
+import { a as fe, G as me } from "./NavigationTab.vue_vue_type_script_setup_true_lang-lfncwvdP.js";
+import { useCoreStore as ge } from "@feedmepos/mf-common";
+function pe({ start: e, end: t }) {
+  return `${W(t).format("DD MMM")}, ${W(t).format("YYYY")}`;
+}
+B(!0);
+const he = async (e) => {
+  const { businessId: t } = K(G());
+  if (t) {
+    const l = {
+      fetchType: O.Post,
+      url: `${t.value}/insights`,
+      data: {
+        ...e,
+        isAnomaly: !0
+        // isAnomaly: anomaly.value
+      }
+    };
+    return J.fetch(l);
+  } else
+    return Promise.reject(new Error("Business Id is not defined"));
+}, ye = async (e) => {
+  const { businessId: t } = G(), l = {
+    fetchType: O.Post,
+    url: `${t}/insights/feedbacks`,
+    data: e
+  };
+  return J.fetch(l);
+};
+Q.register(...de);
+const ve = { class: "flex flex-col h-full overflow-hidden" }, xe = { class: "flex flex-col gap-8" }, we = { class: "fm-color-typo-primary fm-typo-en-body-lg-400" }, be = { class: "fm-color-typo-secondary fm-typo-en-body-md-400" }, Ce = { class: "grow" }, ke = /* @__PURE__ */ S({
+  __name: "LineChart",
+  props: {
+    name: { default: void 0 },
+    paragraph: { default: void 0 },
+    datasets: {},
+    xAxis: {},
+    transpose: { type: Boolean, default: !1 },
+    stacked: { type: Boolean },
+    maintainAspectRatio: { type: Boolean },
+    hideXAxis: { type: Boolean, default: void 0 },
+    hideYAxis: { type: Boolean, default: void 0 },
+    legend: { default: void 0 }
+  },
+  setup(e) {
+    const t = e, l = B(null);
+    let s = null;
+    T(
+      [
+        () => t.transpose,
+        () => t.maintainAspectRatio,
+        () => t.hideXAxis,
+        () => t.hideYAxis,
+        () => t.legend
+      ],
+      () => {
+        s && s.config.options && (s.destroy(), u());
+      }
+    );
+    const i = _(() => t.transpose ? "y" : "x"), x = _(() => ({
+      labels: t.xAxis.categories,
+      datasets: t.datasets.map((r) => ({
+        ...r,
+        borderDash: r.dash ? [5, 5] : void 0,
+        tension: r.tension || 0.1
+      }))
+    }));
+    T(
+      x,
+      () => {
+        s && (s.data = x.value, s.update());
+      },
+      { deep: !0 }
+    );
+    function u() {
+      l.value && (s = new Q(l.value, {
+        type: "line",
+        data: x.value,
+        options: {
+          plugins: {
+            legend: t.legend || {
+              display: !0,
+              position: "bottom",
+              maxHeight: 60,
+              labels: {
+                usePointStyle: !0,
+                pointStyle: "line"
+              }
+            }
+          },
+          maintainAspectRatio: t.maintainAspectRatio,
+          responsive: !0,
+          indexAxis: i.value,
+          scales: {
+            x: {
+              display: !t.hideXAxis,
+              stacked: t.stacked,
+              grid: {
+                display: !1
+              },
+              beginAtZero: !0
+            },
+            y: {
+              display: !t.hideYAxis,
+              stacked: t.stacked,
+              grid: {
+                display: !0
+              },
+              position: "right",
+              beginAtZero: !0
+            }
+          },
+          elements: {
+            line: {
+              borderWidth: 1.5
+            },
+            point: {
+              radius: 0,
+              hitRadius: 30,
+              hoverRadius: 6,
+              hoverBackgroundColor: "#FFFFFF",
+              hoverBorderWidth: 3
+            }
+          }
+        }
+      }));
+    }
+    return le(() => {
+      u();
+    }), (r, b) => (o(), d("div", ve, [
+      a("div", xe, [
+        H(r.$slots, "title"),
+        a("div", we, w(r.name), 1),
+        a("div", be, w(r.paragraph), 1)
+      ]),
+      a("div", Ce, [
+        a("canvas", {
+          ref_key: "canvas",
+          ref: l
+        }, null, 512)
+      ])
+    ]));
+  }
+}), _e = ["width", "height"], $e = ["fill"], Ae = ["fill"], Fe = ["stroke"], Ve = ["stroke"], te = /* @__PURE__ */ S({
+  __name: "SparkIcon",
+  props: {
+    size: {
+      type: Number,
+      default: 24
+    },
+    color: {
+      type: String,
+      default: "#6B6B6B"
+    }
+  },
+  setup(e) {
+    const t = e, l = _(() => `${t.size}px`);
+    return (s, i) => (o(), d("svg", {
+      width: l.value,
+      height: l.value,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, [
+      a("path", {
+        d: "M7.6 7.6C8.17076 6.94229 8.5 5.5 8.5 5.5C8.5 5.5 8.81356 6.87361 9.35714 7.5C9.92948 8.15953 11.5 8.5 11.5 8.5C11.5 8.5 9.92948 8.69761 9.35714 9.35714C8.81356 9.98354 8.5 11.5 8.5 11.5C8.5 11.5 8.32076 10.1888 7.75 9.59091C7.14905 8.96136 5.5 8.5 5.5 8.5C5.5 8.5 6.99905 8.29251 7.6 7.6Z",
+        fill: t.color
+      }, null, 8, $e),
+      a("path", {
+        d: "M12.2 12.2C13.3415 10.8846 14 8 14 8C14 8 14.6271 10.7472 15.7143 12C16.859 13.3191 20 14 20 14C20 14 16.859 14.3952 15.7143 15.7143C14.6271 16.9671 14 20 14 20C14 20 13.6415 17.3777 12.5 16.1818C11.2981 14.9227 8 14 8 14C8 14 10.9981 13.585 12.2 12.2Z",
+        fill: t.color
+      }, null, 8, Ae),
+      a("path", {
+        d: "M7.6 7.6C8.17076 6.94229 8.5 5.5 8.5 5.5C8.5 5.5 8.81356 6.87361 9.35714 7.5C9.92948 8.15953 11.5 8.5 11.5 8.5C11.5 8.5 9.92948 8.69761 9.35714 9.35714C8.81356 9.98354 8.5 11.5 8.5 11.5C8.5 11.5 8.32076 10.1888 7.75 9.59091C7.14905 8.96136 5.5 8.5 5.5 8.5C5.5 8.5 6.99905 8.29251 7.6 7.6Z",
+        stroke: t.color,
+        "stroke-width": "1.5",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round"
+      }, null, 8, Fe),
+      a("path", {
+        d: "M12.2 12.2C13.3415 10.8846 14 8 14 8C14 8 14.6271 10.7472 15.7143 12C16.859 13.3191 20 14 20 14C20 14 16.859 14.3952 15.7143 15.7143C14.6271 16.9671 14 20 14 20C14 20 13.6415 17.3777 12.5 16.1818C11.2981 14.9227 8 14 8 14C8 14 10.9981 13.585 12.2 12.2Z",
+        stroke: t.color,
+        "stroke-width": "1.5",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round"
+      }, null, 8, Ve)
+    ], 8, _e));
+  }
+}), Be = { class: "flex flex-col gap-16" }, Ie = { class: "fm-typo-en-title-sm-600" }, Se = { class: "flex justify-center items-center" }, Re = { class: "fm-typo-en-body-lg-600 text-fm-color-typo-primary" }, De = {
+  key: 0,
+  class: "rounded-lg p-2"
+}, Me = { class: "fm-typo-en-body-lg-400 text-fm-color-typo-secondary text-wrap" }, Le = { key: 0 }, Te = {
+  key: 0,
+  class: "flex justify-center w-full gap-8"
+}, je = ["onClick"], Z = /* @__PURE__ */ S({
+  __name: "CarouselCard",
+  props: {
+    title: {
+      type: String,
+      default: ""
+    },
+    items: {
+      type: Array,
+      default: () => []
+    }
+  },
+  setup(e) {
+    const t = B(0), l = B(), s = e;
+    function i(u) {
+      var r;
+      if (l.value) {
+        const b = (((r = l.value) == null ? void 0 : r.scrollWidth) ?? 1) / s.items.length;
+        l.value.scrollLeft = b * u;
+      }
+      t.value = u;
+    }
+    T(
+      () => l.value,
+      () => {
+        var u;
+        if (l.value) {
+          const r = ((((u = l.value) == null ? void 0 : u.scrollWidth) ?? 1) - 400) / s.items.length;
+          l.value.addEventListener("scroll", () => {
+            var n;
+            const b = Math.floor((((n = l.value) == null ? void 0 : n.scrollLeft) ?? 1) / r);
+            t.value = b;
+          });
+        }
+      }
+    );
+    const { FmTooltip: x } = E;
+    return (u, r) => {
+      const b = X("wave");
+      return o(), d("div", Be, [
+        a("p", Ie, w(s.title), 1),
+        a("div", {
+          ref_key: "scroll",
+          ref: l,
+          class: "flex gap-8 overflow-x-scroll snap-x snap-mandatory w-full scrollbar-hide"
+        }, [
+          (o(!0), d(z, null, P(s.items, (n, g) => (o(), d("div", {
+            key: `reason_${g}`,
+            class: "min-w-[368px] border rounded-lg p-16 snap-always snap-center flex gap-8 flex-col"
+          }, [
+            a("div", Se, [
+              (o(), V(N(n.defination ? m(x) : "div"), {
+                content: n.defination,
+                "z-index": 100
+              }, {
+                default: I(() => [
+                  a("p", Re, w(n.header), 1)
+                ]),
+                _: 2
+              }, 1032, ["content"])),
+              r[0] || (r[0] = a("div", { class: "grow" }, null, -1)),
+              n.header === "Introduce Kid-Friendly Menu Items" ? M((o(), d("button", De, [
+                y(te, { size: 22 })
+              ])), [
+                [b, !0]
+              ]) : A("", !0)
+            ]),
+            a("p", Me, w(n.subLabel), 1)
+          ]))), 128)),
+          s.items.length === 0 ? (o(), d("div", Le, [
+            a("p", null, "No " + w(s.title.toLowerCase()) + " at the moment", 1)
+          ])) : A("", !0)
+        ], 512),
+        e.items.length > 1 ? (o(), d("div", Te, [
+          (o(!0), d(z, null, P(e.items, (n, g) => (o(), d("span", {
+            key: `carousel_${g}`,
+            class: L([
+              "w-[11px] h-[11px] rounded-lg cursor-pointer",
+              g === t.value ? " bg-fm-color-neutral-gray-300" : "bg-fm-color-neutral-gray-100"
+            ]),
+            onClick: ($) => i(g)
+          }, null, 10, je))), 128))
+        ])) : A("", !0)
+      ]);
+    };
+  }
+}), ze = { class: "flex flex-col flex-grow gap-16" }, Pe = { class: "flex flex-row items-center gap-2" }, We = { class: "flex flex-row items-center justify-center gap-1" }, Ne = { class: "text-fm-color-typo-secondary fm-typo-en-body-lg-400" }, Ee = { class: "flex flex-col fm-typo-en-body-lg-600" }, Ue = { class: "flex flex-col" }, Ye = { class: "fm-typo-en-body-md-400 text-fm-color-typo-secondary" }, Ze = { class: "fm-typo-en-body-md-400 text-fm-color-typo-secondary" }, qe = {
+  key: 0,
+  style: { height: "240px" }
+}, He = {
+  key: 1,
+  class: "fm-typo-en-body-lg-400 text-fm-color-typo-secondary"
+}, Xe = {
+  key: 0,
+  class: "flex flex-col gap-40"
+}, Ge = {
+  key: 1,
+  class: "flex flex-row items-center justify-between"
+}, Oe = { class: "fm-typo-en-body-lg-600" }, Je = { class: "flex flex-row items-center gap-8" }, q = /* @__PURE__ */ S({
+  __name: "InsightCard",
+  props: {
+    widget: {
+      type: Object,
+      default: () => null
+    },
+    detail: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: ["click-feedback"],
+  setup(e, { emit: t }) {
+    const { t: l } = ee(), s = _(() => e.widget.data.isAnomaly > 0 ? "bg-fm-color-system-success-100 text-fm-color-typo-success" : e.widget.data.isAnomaly < 0 ? "bg-fm-color-system-error-100 text-fm-color-typo-error" : ""), i = t;
+    function x(h) {
+      h === e.widget.feedback.reaction ? i("click-feedback", null) : i("click-feedback", h);
+    }
+    const u = _(() => {
+      const h = "rgb(66, 133, 244)";
+      let c = h;
+      return e.widget.data.isAnomaly > 0 ? c = "#1F7735" : e.widget.data.isAnomaly < 0 && (c = "#99231D"), [
+        {
+          label: "Anomaly",
+          data: e.widget.data.actualValues.map(
+            (v, p) => p >= e.widget.data.actualValues.length - 2 ? v : null
+          ),
+          fill: !1,
+          borderColor: c,
+          borderWidth: 2,
+          pointRadius: function(v) {
+            return v.dataIndex === e.widget.data.actualValues.length - 1 ? 5 : 0;
+          },
+          pointStyle: "circle",
+          pointBackgroundColor: c
+        },
+        {
+          label: "Actual",
+          data: e.widget.data.actualValues.map(
+            (v, p) => p !== e.widget.data.actualValues.length - 1 ? v : null
+          ),
+          fill: !1,
+          borderColor: h,
+          borderWidth: 2
+        },
+        {
+          label: "Expected",
+          data: e.widget.data.forecastValues,
+          fill: !1,
+          borderColor: "white",
+          borderWidth: 2
+        },
+        {
+          label: "Upper",
+          data: e.widget.data.upperBoundValues,
+          fill: 4,
+          backgroundColor: "rgba(66, 133, 244, 0.3)",
+          borderColor: "white"
+        },
+        {
+          label: "Lower",
+          legend: !1,
+          data: e.widget.data.lowerBoundValues,
+          color: "",
+          fill: !1,
+          borderColor: "white"
+        }
+      ];
+    }), r = _(
+      () => e.widget.data.labels.map((h) => {
+        const c = W(h), k = [c.format("DD MMM")], v = c.format("d");
+        return (v === "6" || v === "0") && k.push(c.format("ddd")), k;
+      })
+    ), b = {
+      display: !0,
+      position: "bottom",
+      maxHeight: 54,
+      onClick: (h) => h.stopPropagation(),
+      labels: {
+        usePointStyle: !0,
+        filter: function(h, c) {
+          return !["Upper", "Lower", "Actual"].includes(
+            c.datasets[h.datasetIndex].label
+          );
+        }
+      }
+    }, n = _(() => ({ categories: r.value }));
+    _(() => Y(e.widget.category));
+    const g = _(() => "The total money earned from all customer purchases, including sales, service charges, rounding, and delivery fees, minus any discounts. Revenue = gross sales - discounts + SST + service charge + rounding + delivery fee"), { FmTooltip: $ } = E;
+    return (h, c) => {
+      var f, D;
+      const k = R("FmChip"), v = R("FmIcon"), p = X("wave");
+      return o(), d("div", {
+        class: L(["flex flex-col gap-40 overflow-y-scroll relative scrollbar-hide", e.detail ? "max-w-[515px]" : "max-w-[368px]"])
+      }, [
+        M((o(), d("div", {
+          variant: "outlined",
+          class: L(["flex flex-col p-16 gap-16 relative border rounded-lg", e.detail ? "" : "cursor-pointer"])
+        }, [
+          a("div", ze, [
+            a("div", Pe, [
+              a("div", We, [
+                y(te, { size: 22 }),
+                a("div", Ne, w(m(l)("report.view.insight.title")), 1)
+              ]),
+              y(k, {
+                compact: "",
+                label: m(l)(`report.category.${m(Y)(e.widget.category)}`),
+                class: "bg-fm-color-system-info-100 text-fm-color-typo-info"
+              }, null, 8, ["label"]),
+              y(k, {
+                class: L(s.value),
+                compact: "",
+                label: e.widget.data.isAnomaly !== 0 ? m(l)("report.view.insight.status.abnormal") : m(l)("report.view.insight.status.normal")
+              }, null, 8, ["class", "label"])
+            ]),
+            (o(), V(N(e.detail ? m($) : "div"), {
+              content: g.value,
+              "z-index": 100
+            }, {
+              default: I(() => [
+                a("div", Ee, w(e.widget.title), 1)
+              ]),
+              _: 1
+            }, 8, ["content"])),
+            a("div", Ue, [
+              a("div", Ye, w(e.widget.restaurantName), 1),
+              a("div", Ze, w(m(pe)(e.widget.dateRange)), 1)
+            ])
+          ]),
+          e.detail ? (o(), d("div", qe, [
+            y(ke, {
+              datasets: u.value,
+              "x-axis": n.value,
+              legend: b,
+              "maintain-aspect-ratio": !1
+            }, null, 8, ["datasets", "x-axis"])
+          ])) : A("", !0),
+          e.detail ? (o(), d("div", He, w(e.widget.description), 1)) : A("", !0)
+        ], 2)), [
+          [p, !e.detail]
+        ]),
+        e.detail && e.widget.data.isAnomaly < 0 ? (o(), d("div", Xe, [
+          y(Z, {
+            title: m(l)("report.view.insight.reason"),
+            items: (f = e.widget.data.recommendations) == null ? void 0 : f.map((C) => ({
+              header: C.label,
+              subLabel: C.reason.replace(C.metric, C.label),
+              defination: C.definition
+            }))
+          }, null, 8, ["title", "items"]),
+          y(Z, {
+            title: m(l)("report.view.insight.recommendation"),
+            items: (D = e.widget.data.recommendations) == null ? void 0 : D.map((C) => ({
+              header: C.label,
+              subLabel: C.recommendation,
+              defination: C.definition
+            }))
+          }, null, 8, ["title", "items"])
+        ])) : A("", !0),
+        e.detail ? (o(), d("div", Ge, [
+          a("div", Oe, w(m(l)("report.view.insight.feedback.question")), 1),
+          a("div", Je, [
+            M(y(v, {
+              class: "cursor-pointer p-4 icon-btn",
+              name: "thumb_up",
+              size: "md",
+              outline: e.widget.feedback.reaction !== !0,
+              onClick: c[0] || (c[0] = () => x(!0))
+            }, null, 8, ["outline"]), [
+              [p, !0]
+            ]),
+            M(y(v, {
+              class: "cursor-pointer p-4 icon-btn",
+              name: "thumb_down",
+              size: "md",
+              outline: e.widget.feedback.reaction !== !1,
+              onClick: c[1] || (c[1] = () => x(!1))
+            }, null, 8, ["outline"]), [
+              [p, !0]
+            ])
+          ])
+        ])) : A("", !0)
+      ], 2);
+    };
+  }
+}), Ke = { class: "flex w-full justify-between items-center" }, Qe = /* @__PURE__ */ S({
+  __name: "SidePanel",
+  props: {
+    modelValue: { type: Boolean, required: !0 },
+    modelModifiers: {}
+  },
+  emits: ["update:modelValue"],
+  setup(e) {
+    const t = ae(e, "modelValue"), { FmSideSheet: l } = E;
+    return (s, i) => {
+      const x = R("FmButton");
+      return o(), V(N(m(l)), {
+        modelValue: t.value,
+        "onUpdate:modelValue": i[1] || (i[1] = (u) => t.value = u),
+        "fullscreen-size": "sm",
+        "dismiss-away": !0,
+        "max-width": 512
+      }, {
+        "side-sheet-header": I(() => i[2] || (i[2] = [
+          oe("Insight")
+        ])),
+        "top-sheet-header": I(() => [
+          a("div", Ke, [
+            i[3] || (i[3] = a("p", null, "Insight", -1)),
+            y(x, {
+              icon: "close",
+              variant: "tertiary",
+              onClick: i[0] || (i[0] = (u) => t.value = !1)
+            })
+          ])
+        ]),
+        default: I(() => [
+          H(s.$slots, "default")
+        ]),
+        _: 3
+      }, 8, ["modelValue"]);
+    };
+  }
+}), et = { class: "flex flex-row px-24 justify-between items-center" }, tt = { class: "flex flex-row items-center gap-2" }, lt = {
+  key: 0,
+  class: "h-full w-full flex items-center justify-center"
+}, at = {
+  key: 1,
+  class: "h-full"
+}, ot = {
+  key: 0,
+  class: "flex flex-row flex-wrap gap-24 px-24 py-16"
+}, ht = /* @__PURE__ */ S({
+  __name: "InsightView",
+  setup(e) {
+    const { t } = ee(), l = ge(), {
+      dateRange: s,
+      compareDateRange: i,
+      locations: x,
+      selectedLocationIds: u,
+      selectedRestaurantIds: r,
+      business: b
+    } = K(re()), n = B([]), g = B(null), $ = B(!1), h = ce();
+    T(
+      b,
+      () => {
+        b.value && c();
+      },
+      { immediate: !0 }
+    );
+    async function c() {
+      try {
+        $.value = !0, r.value.length === 0 ? n.value = [] : n.value = await he({
+          start: s.value.startDate,
+          end: s.value.endDate,
+          restaurantIds: r.value
+        });
+      } catch (p) {
+        h.open({ message: p, type: "error" }), n.value = [];
+      } finally {
+        $.value = !1;
+      }
+    }
+    function k(p) {
+      if (p !== null) {
+        try {
+          l.pushDataLayer(
+            {
+              event: me.report_insight_click_insight_card,
+              insight: JSON.stringify(n.value[p])
+            },
+            "insight"
+          );
+        } catch (f) {
+          console.warn(f);
+        }
+        g.value = null;
+      }
+      se(() => {
+        g.value = p;
+      });
+    }
+    async function v(p) {
+      if (g.value !== null)
+        try {
+          $.value = !0;
+          const f = await ye({
+            ...n.value[g.value].feedback,
+            reaction: p
+          });
+          n.value[g.value].feedback = f;
+        } catch (f) {
+          h.open({ message: f, type: "error" });
+        } finally {
+          $.value = !1;
+        }
+    }
+    return (p, f) => {
+      const D = R("FmPageHead"), C = R("FmCircularProgress");
+      return o(), V(ne, null, {
+        default: I(() => [
+          y(D, {
+            title: m(t)("report.view.insight.title")
+          }, null, 8, ["title"]),
+          a("template", null, [
+            a("div", et, [
+              a("div", tt, [
+                y(fe, {
+                  modelValue: m(u),
+                  "onUpdate:modelValue": [
+                    f[0] || (f[0] = (F) => j(u) ? u.value = F : null),
+                    c
+                  ],
+                  options: m(x)
+                }, null, 8, ["modelValue", "options"]),
+                y(ie, {
+                  "date-range": m(s),
+                  "onUpdate:dateRange": [
+                    f[1] || (f[1] = (F) => j(s) ? s.value = F : null),
+                    c
+                  ],
+                  "compare-date-range": m(i),
+                  "onUpdate:compareDateRange": f[2] || (f[2] = (F) => j(i) ? i.value = F : null),
+                  compare: !1
+                }, null, 8, ["date-range", "compare-date-range"])
+              ])
+            ]),
+            $.value ? (o(), d("div", lt, [
+              y(C, { size: "xl" })
+            ])) : (o(), d("div", at, [
+              n.value.length > 0 ? (o(), d("div", ot, [
+                (o(!0), d(z, null, P(n.value, (F, U) => (o(), V(q, {
+                  key: U,
+                  widget: F,
+                  onClick: () => k(U)
+                }, null, 8, ["widget", "onClick"]))), 128))
+              ])) : (o(), V(ue, { key: 1 }))
+            ])),
+            y(Qe, {
+              "model-value": g.value !== null,
+              onBack: f[3] || (f[3] = () => k(null))
+            }, {
+              default: I(() => [
+                g.value !== null ? (o(), V(q, {
+                  key: 0,
+                  widget: n.value[g.value],
+                  detail: "",
+                  onClickFeedback: v
+                }, null, 8, ["widget"])) : A("", !0)
+              ]),
+              _: 1
+            }, 8, ["model-value"])
+          ])
+        ]),
+        _: 1
+      });
+    };
+  }
+});
+export {
+  ht as default
+};