@orchidui/dashboard 1.25.0 → 1.27.0

package/dist/Dashboard/Card/OcCard.js

@@ -1,4 +1,4 @@
-import { _ as o } from "../../OcCard-D574SeK2.js";
+import { _ as o } from "../../OcCard-C-0VY9wF.js";
 export {
   o as Card
 };

package/dist/Dashboard/Charts/OverviewMonthlyBarChart/OcOverviewMonthlyBarChart.js

@@ -0,0 +1,5 @@
+import { defineAsyncComponent as o } from "vue";
+const t = o(() => import("../../../OcOverviewMonthlyBarChart-DWCIliP7.js"));
+export {
+  t as OverviewMonthlyBarChart
+};

package/dist/Dashboard/Charts/OverviewPieChart/OcOverviewPieChart.js

@@ -0,0 +1,5 @@
+import { defineAsyncComponent as e } from "vue";
+const r = e(() => import("../../../OcOverviewPieChart-BIpg_ZOf.js"));
+export {
+  r as OcOverviewPieChart
+};

package/dist/Dashboard/TextEditor/QuillEditor.js

@@ -1,4 +1,4 @@
-import { a as t } from "../../QuillEditor-DivN3eFB.js";
+import { a as t } from "../../QuillEditor-caFVpQGG.js";
 import "vue";
 export {
   t as QuillEditor

package/dist/EducationLogo-DoptB1eX.js

@@ -0,0 +1,21 @@
+import { createElementBlock as i, openBlock as l, createElementVNode as t } from "vue";
+import { _ as r } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const o = "data:image/svg+xml,%3csvg%20width='226'%20height='144'%20viewBox='0%200%20226%20144'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20filter='url(%23filter0_f_18_27022)'%3e%3cg%20filter='url(%23filter1_f_18_27022)'%3e%3cpath%20d='M125.315%20-16.2661C118.148%2024.3074%2049.1696%20129.856%2027.3722%2042.1896C-36.2886%20-15.0572%20-51.7829%20-5.71072%20-44.6156%20-46.2841C-37.4484%20-86.8575%206.40209%20-113.029%2053.3271%20-104.74C100.252%20-96.4505%20132.482%20-56.8395%20125.315%20-16.2661Z'%20fill='%23E8C9FA'/%3e%3c/g%3e%3cg%20filter='url(%23filter2_f_18_27022)'%3e%3cpath%20d='M-39.8923%20102.937C-68.1616%2084.0944%20-96.0324%2062.7969%20-96.4756%2036.0738C-97.1101%20-2.18793%20-21.0604%20-12.528%207.20883%206.31465C35.478%2025.1573%2038.9695%2069.5756%2015.0073%20105.526C-8.95498%20141.475%20-11.6231%20121.78%20-39.8923%20102.937Z'%20fill='%23FFE0A2'/%3e%3c/g%3e%3c/g%3e%3cdefs%3e%3cfilter%20id='filter0_f_18_27022'%20x='-196.118'%20y='-205.911'%20width='422.07'%20height='431.126'%20filterUnits='userSpaceOnUse'%20color-interpolation-filters='sRGB'%3e%3cfeFlood%20flood-opacity='0'%20result='BackgroundImageFix'/%3e%3cfeBlend%20mode='normal'%20in='SourceGraphic'%20in2='BackgroundImageFix'%20result='shape'/%3e%3cfeGaussianBlur%20stdDeviation='49.8195'%20result='effect1_foregroundBlur_18_27022'/%3e%3c/filter%3e%3cfilter%20id='filter1_f_18_27022'%20x='-98.2067'%20y='-158.252'%20width='276.499'%20height='286.287'%20filterUnits='userSpaceOnUse'%20color-interpolation-filters='sRGB'%3e%3cfeFlood%20flood-opacity='0'%20result='BackgroundImageFix'/%3e%3cfeBlend%20mode='normal'%20in='SourceGraphic'%20in2='BackgroundImageFix'%20result='shape'/%3e%3cfeGaussianBlur%20stdDeviation='25.9902'%20result='effect1_foregroundBlur_18_27022'/%3e%3c/filter%3e%3cfilter%20id='filter2_f_18_27022'%20x='-148.46'%20y='-54.8334'%20width='231.363'%20height='232.391'%20filterUnits='userSpaceOnUse'%20color-interpolation-filters='sRGB'%3e%3cfeFlood%20flood-opacity='0'%20result='BackgroundImageFix'/%3e%3cfeBlend%20mode='normal'%20in='SourceGraphic'%20in2='BackgroundImageFix'%20result='shape'/%3e%3cfeGaussianBlur%20stdDeviation='25.9902'%20result='effect1_foregroundBlur_18_27022'/%3e%3c/filter%3e%3c/defs%3e%3c/svg%3e", c = "data:image/svg+xml,%3csvg%20width='144'%20height='144'%20viewBox='0%200%20144%20144'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20style='mix-blend-mode:plus-darker'%20clip-path='url(%23clip0_18_27017)'%3e%3cpath%20d='M79.3546%2074.3213C82.3584%2071.3173%2087.0856%2071.0862%2090.3546%2073.628L91.1396%2074.3213L108.817%2091.9992C126.716%20109.898%20126.716%20138.918%20108.817%20156.817C91.4151%20174.219%2063.5016%20174.702%2045.5156%20158.267L43.9988%20156.817L26.3213%20139.139C23.0669%20135.885%2023.0669%20130.608%2026.3213%20127.354C29.3251%20124.35%2034.0523%20124.119%2037.3212%20126.661L38.1063%20127.354L55.7838%20145.032C67.1746%20156.423%2085.6421%20156.423%2097.0321%20145.032C108.015%20134.048%20108.408%20116.484%2098.2089%20105.031L97.0321%20103.784L79.3546%2086.1067C76.0996%2082.8517%2076.0996%2077.5759%2079.3546%2074.3213ZM20.4276%2068.4287C23.4317%2065.4247%2028.1589%2065.1936%2031.4279%2067.7355L32.2129%2068.4287L67.5679%20103.784C70.8221%20107.038%2070.8221%20112.315%2067.5679%20115.569C64.5641%20118.573%2059.8369%20118.804%2056.568%20116.262L55.7829%20115.569L20.4276%2080.2142C17.1733%2076.9592%2017.1733%2071.6831%2020.4276%2068.4287ZM-20.8192%2027.1808C-3.41727%209.77903%2024.4963%209.29565%2042.4819%2025.7307L43.9988%2027.1808L61.6763%2044.8585C64.9313%2048.1128%2064.9313%2053.3893%2061.6763%2056.6436C58.6724%2059.6477%2053.946%2059.8788%2050.6765%2057.3368L49.8913%2056.6436L32.2138%2038.9659C20.8236%2027.5757%202.35626%2027.5757%20-9.03399%2038.9659C-20.0175%2049.9495%20-20.4098%2067.5135%20-10.2108%2078.9673L-9.03399%2080.2142L8.64368%2097.8917C11.898%20101.146%2011.898%20106.423%208.64368%20109.677C5.6396%20112.681%200.912707%20112.912%20-2.35642%20110.37L-3.14149%20109.677L-20.8192%2091.9992C-38.7182%2074.0999%20-38.7182%2045.0798%20-20.8192%2027.1808Z'%20fill='url(%23paint0_linear_18_27017)'/%3e%3c/g%3e%3cdefs%3e%3clinearGradient%20id='paint0_linear_18_27017'%20x1='43.999'%20y1='13.7566'%20x2='43.999'%20y2='170.241'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%23FFF0F0'/%3e%3cstop%20offset='1'%20stop-color='%23E5EEFF'/%3e%3c/linearGradient%3e%3cclipPath%20id='clip0_18_27017'%3e%3crect%20width='200'%20height='200'%20fill='white'%20transform='translate(-56%20-8)'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e", s = {}, a = { class: "md:relative" };
+function n(f, e) {
+  return l(), i("div", a, [...e[0] || (e[0] = [
+    t("img", {
+      class: "absolute top-0 bottom-0 left-0 h-full w-auto group-hover:scale-125 transition-all duration-[400ms] origin-top-left",
+      src: o,
+      alt: "link-blur"
+    }, null, -1),
+    t("img", {
+      class: "hidden md:block",
+      src: c,
+      alt: "link.svg"
+    }, null, -1)
+  ])]);
+}
+const _ = /* @__PURE__ */ r(s, [["render", n]]);
+export {
+  _ as default
+};

package/dist/OcCard-C-0VY9wF.js

@@ -0,0 +1,127 @@
+import { defineAsyncComponent as s, computed as S, createElementBlock as a, openBlock as t, createCommentVNode as c, createElementVNode as r, normalizeClass as d, renderSlot as f, createVNode as u, createBlock as n, unref as o, toDisplayString as m, mergeProps as p, withModifiers as G } from "vue";
+import { Icon as h, Button as y } from "@orchidui/core";
+const $ = "data:image/svg+xml,%3csvg%20width='230'%20height='144'%20viewBox='0%200%20230%20144'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20opacity='0.8'%20filter='url(%23filter0_f_18_27130)'%3e%3cg%20filter='url(%23filter1_f_18_27130)'%3e%3cpath%20d='M239.182%20122.718C205.323%2072.8506%20170.036%20-108.206%20282.302%20-38.4795C407.458%20-43.3538%20414.178%20-68.9586%20448.037%20-19.0912C481.896%2030.7762%20462.591%20102.947%20404.917%20142.106C347.243%20181.266%20273.041%20172.585%20239.182%20122.718Z'%20fill='%23E8C9FA'/%3e%3c/g%3e%3cg%20filter='url(%23filter2_f_18_27130)'%3e%3cpath%20d='M186.005%20209.774C144.648%20182.208%20103.875%20151.051%20103.226%20111.956C102.298%2055.9813%20213.555%2040.8542%20254.912%2068.4202C296.268%2095.9861%20301.376%20160.968%20266.32%20213.561C231.265%20266.154%20227.361%20237.34%20186.005%20209.774Z'%20fill='%23FFE0A2'/%3e%3c/g%3e%3c/g%3e%3cdefs%3e%3cfilter%20id='filter0_f_18_27130'%20x='3.58167'%20y='-153.894'%20width='560.78'%20height='496.427'%20filterUnits='userSpaceOnUse'%20color-interpolation-filters='sRGB'%3e%3cfeFlood%20flood-opacity='0'%20result='BackgroundImageFix'/%3e%3cfeBlend%20mode='normal'%20in='SourceGraphic'%20in2='BackgroundImageFix'%20result='shape'/%3e%3cfeGaussianBlur%20stdDeviation='49.8195'%20result='effect1_foregroundBlur_18_27130'/%3e%3c/filter%3e%3cfilter%20id='filter1_f_18_27130'%20x='153.925'%20y='-106.235'%20width='362.779'%20height='324.839'%20filterUnits='userSpaceOnUse'%20color-interpolation-filters='sRGB'%3e%3cfeFlood%20flood-opacity='0'%20result='BackgroundImageFix'/%3e%3cfeBlend%20mode='normal'%20in='SourceGraphic'%20in2='BackgroundImageFix'%20result='shape'/%3e%3cfeGaussianBlur%20stdDeviation='25.9902'%20result='effect1_foregroundBlur_18_27130'/%3e%3c/filter%3e%3cfilter%20id='filter2_f_18_27130'%20x='51.2402'%20y='3.02788'%20width='290.345'%20height='291.847'%20filterUnits='userSpaceOnUse'%20color-interpolation-filters='sRGB'%3e%3cfeFlood%20flood-opacity='0'%20result='BackgroundImageFix'/%3e%3cfeBlend%20mode='normal'%20in='SourceGraphic'%20in2='BackgroundImageFix'%20result='shape'/%3e%3cfeGaussianBlur%20stdDeviation='25.9902'%20result='effect1_foregroundBlur_18_27130'/%3e%3c/filter%3e%3c/defs%3e%3c/svg%3e", I = { class: "relative group gap-x-6 items-center px-px flex rounded" }, z = { class: "max-w-[338px] relative z-10 flex flex-col w-full gap-y-3" }, D = { class: "md:hidden w-fit p-2 rounded-sm bg-white text-oc-text" }, E = {
+  key: 0,
+  class: "flex-1 flex justify-end pr-5"
+}, O = {
+  key: 1,
+  class: "absolute right-0 group-hover:-right-8 transition-all duration-[400ms] ease-in-out",
+  alt: "video_blur",
+  src: $
+}, L = "w-full absolute left-0 top-0 h-full z-[1] rounded-[9px] bg-gradient-to-r from-[#F8BFBC] to-[#CDBBF4]", A = {
+  __name: "OcCard",
+  props: {
+    type: {
+      type: String,
+      default: "education"
+    },
+    isFull: {
+      type: Boolean,
+      default: !1
+    },
+    version: {
+      type: String,
+      default: "v2"
+    },
+    title: {
+      type: String,
+      default: ""
+    },
+    description: {
+      type: String,
+      default: ""
+    },
+    fullButtonProps: {
+      type: Object,
+      default: () => {
+      }
+    },
+    hideButtonProps: {
+      type: Object,
+      default: () => {
+      }
+    }
+  },
+  emits: ["hide-all", "learn-more"],
+  setup(e) {
+    const v = s(() => import("./CrossFeatureLogo-DPn4eaPq.js")), x = s(() => import("./CrossSellPosLogo-DvvO35BP.js")), B = s(() => import("./CrossSellOsLogo-mQbmBVVJ.js")), F = s(() => import("./VideoLogo-29qfw7xn.js")), b = s(() => import("./EducationLogo-DoptB1eX.js")), C = e, w = {
+      education: "bg-white",
+      cross_feature: "bg-white ",
+      cross_sell_pos: "bg-[#F5F4EF]",
+      cross_sell_os: "bg-[#FDF2F9] ",
+      video: "bg-white "
+    }, _ = {
+      education: "!bg-oc-accent-1-600",
+      cross_feature: "!bg-oc-accent-2",
+      cross_sell_pos: "!bg-[#FDB012]",
+      cross_sell_os: "!bg-[#EC6ABC]",
+      video: "!bg-oc-gray-800"
+    }, k = S(() => ({
+      education: "book",
+      cross_feature: "receipt",
+      cross_sell_pos: "counter",
+      cross_sell_os: "shopping_cart",
+      video: "play"
+    })[C.type]);
+    return (l, i) => (t(), a("div", I, [
+      e.type !== "cross_sell_pos" ? (t(), a("div", {
+        key: 0,
+        class: d(L)
+      })) : c("", !0),
+      r("div", {
+        class: d(["md:gap-x-6 pr-7 z-[1] py-7 pl-5 my-px md:h-[144px] md:p-0 items-center h-full relative flex overflow-hidden rounded w-full", [e.version === "v1" ? _[e.type] : "", w[e.type]]])
+      }, [
+        f(l.$slots, "logo", {}, () => [
+          e.type === "education" ? (t(), n(o(b), { key: 0 })) : e.type === "cross_feature" ? (t(), n(o(v), { key: 1 })) : e.type === "cross_sell_pos" ? (t(), n(o(x), { key: 2 })) : e.type === "cross_sell_os" ? (t(), n(o(B), { key: 3 })) : e.type === "video" ? (t(), n(o(F), { key: 4 })) : c("", !0)
+        ]),
+        r("div", z, [
+          r("div", D, [
+            u(o(h), {
+              name: k.value,
+              width: "20",
+              height: "20"
+            }, null, 8, ["name"])
+          ]),
+          f(l.$slots, "title", {}, () => [
+            r("span", {
+              class: d(["font-medium md:text-xl", e.version === "v2" ? "" : "text-white"])
+            }, m(e.title), 3)
+          ]),
+          f(l.$slots, "description", {}, () => [
+            r("span", {
+              class: d(["md:text-base text-sm", e.version === "v2" ? "text-oc-text-400" : "text-oc-accent-1-100"])
+            }, m(e.description), 3)
+          ])
+        ]),
+        u(o(y), p({
+          "is-transparent": "",
+          size: "small",
+          variant: "secondary",
+          class: "md:group-hover:flex hidden px-3 absolute top-2 z-10 right-2",
+          label: "Hide all"
+        }, e.hideButtonProps, {
+          onClick: i[0] || (i[0] = (g) => l.$emit("hide-all"))
+        }), null, 16),
+        u(o(h), {
+          name: "filled-x-circle",
+          width: "20",
+          height: "20",
+          class: "md:hidden absolute top-3 z-10 right-3 text-oc-text-200",
+          onClick: i[1] || (i[1] = G((g) => l.$emit("hide-all"), ["stop"]))
+        }),
+        e.isFull ? (t(), a("div", E, [
+          u(o(y), p({
+            label: "Learn more ->",
+            "is-transparent": ""
+          }, e.fullButtonProps, {
+            onClick: i[2] || (i[2] = (g) => l.$emit("learn-more"))
+          }), null, 16)
+        ])) : c("", !0),
+        e.type === "video" && e.version !== "v1" ? (t(), a("img", O)) : c("", !0)
+      ], 2)
+    ]));
+  }
+};
+export {
+  A as _
+};

package/dist/{OcLottieAnimation-Ct46GGkM.js → OcLottieAnimation-DtD2oJib.js}

@@ -1,5 +1,5 @@
 import { ref, watch, onMounted, createElementBlock, openBlock, normalizeStyle } from "vue";
-import { g as getDefaultExportFromCjs } from "./QuillEditor-DivN3eFB.js";
+import { g as getDefaultExportFromCjs } from "./_commonjsHelpers-B4e78b8K.js";
 var lottie$2 = { exports: {} }, lottie$1 = lottie$2.exports, hasRequiredLottie;
 function requireLottie() {
   return hasRequiredLottie || (hasRequiredLottie = 1, (function(module, exports) {

package/dist/OcOverviewMonthlyBarChart-DWCIliP7.js

@@ -0,0 +1,155 @@
+import { computed as s, ref as w, watch as F, createElementBlock as S, openBlock as k } from "vue";
+import { useChart as B } from "./Dashboard/composables/useChart.js";
+import { d as l } from "./dayjs.min-CTPVfFeV.js";
+const O = {
+  __name: "OcOverviewMonthlyBarChart",
+  props: {
+    variant: {
+      type: String,
+      validator: (d) => ["primary", "purple"].includes(d)
+    },
+    showTooltip: Boolean,
+    showLegend: Boolean,
+    showGrid: Boolean,
+    chartData: Array,
+    labelData: Array,
+    yAxisFormatter: Function,
+    xAxisFormatter: Function,
+    tooltipFormatter: Function,
+    tooltipValueFormatter: Function
+  },
+  setup(d) {
+    const a = d, i = s(() => a.labelData.length === 30), x = s(() => Math.max(...a.chartData));
+    s(() => a.chartData.indexOf(x.value));
+    const g = (t, e = "SGD") => (typeof t == "number" ? t : Number(t)).toLocaleString("en-US", {
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2
+    }), y = (t, e = !1) => e ? l(t).format("DD MMM").toUpperCase() : l(t).format("ddd DD/MM").toUpperCase(), D = (t) => {
+      const e = [...a.chartData].sort((r, c) => c - r);
+      return t === e[0] ? "#4C8AFD" : t === e[1] ? "#80ACFE" : "#CCDEFE";
+    }, b = s(() => ({
+      xAxis: {
+        data: a.labelData.map((t) => y(t, i.value)),
+        splitLine: { show: !1 },
+        axisLine: { show: !1 },
+        axisTick: { show: !1 },
+        axisLabel: {
+          color: "#9295A5",
+          fontSize: 10,
+          margin: 4,
+          width: 70,
+          interval: i.value ? 3 : 0
+        }
+      },
+      tooltip: {
+        trigger: "axis",
+        borderWidth: 0,
+        padding: 0,
+        axisPointer: {
+          type: "line",
+          lineStyle: { color: "#2465DE" }
+        },
+        formatter: (t) => {
+          const e = a.labelData.find(
+            (u) => l(u).format("DD MMM") === t[0].name
+          ), r = l(e).format("DD MMM YYYY"), c = t[0].value;
+          return `
+        <div class="py-3 px-4">
+          <div class="flex items-center gap-2">
+            <span class="text-xs font-medium text-oc-text-300">${r}</span>
+          </div>
+          <div class="flex items-center gap-2">
+            <span class="font-semibold text-oc-text font-reddit-mono">SGD ${g(c)}</span>
+          </div>
+        </div>
+      `;
+        }
+      },
+      legend: {},
+      yAxis: {
+        axisLabel: {
+          align: "center",
+          fontSize: 10,
+          color: "#9295A5",
+          margin: 20,
+          formatter: (t) => t && `${(t / 1e3).toFixed(1)}K`
+        },
+        splitLine: { show: !1 }
+      },
+      grid: {
+        left: "0",
+        right: "0",
+        bottom: "0",
+        top: "20",
+        containLabel: !0
+      },
+      series: [{
+        id: "myBar",
+        data: a.chartData,
+        type: "bar",
+        barCategoryGap: 4,
+        itemStyle: {
+          borderRadius: i.value ? [100, 100, 0, 0] : [4, 4, 0, 0],
+          color: ({ value: t }) => D(t)
+        },
+        clip: !0
+      }]
+    })), f = s(() => a.labelData.map((t, e) => l(t).day() === 6 && e + 1 < a.labelData.length ? [e, e + 1] : null).filter(Boolean)), v = {
+      silent: !0,
+      itemStyle: {
+        color: {
+          type: "linear",
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [
+            { offset: 0, color: "rgba(53, 109, 255, 0.08)" },
+            { offset: 1, color: "rgba(36, 93, 239, 0.01)" }
+          ],
+          global: !1
+        },
+        borderColor: "rgba(53, 109, 255, 0.15)",
+        borderWidth: 1
+      }
+    }, h = w(), { chart: n } = B(h, b), C = (t, e, r = !1) => {
+      const u = t.getModel().getSeriesByType("bar").map((m) => m.getData())[0], A = u.count(), o = [];
+      return e.forEach((m) => {
+        if (m < A) {
+          const p = u.getItemLayout(m);
+          o.push([
+            { x: p.x - 2 },
+            { x: p.x + p.width + 2 }
+          ]);
+        }
+      }), r && o.length > 0 ? [[
+        { x: o[0][0].x },
+        { x: o[o.length - 1][1].x }
+      ]] : o;
+    }, M = () => {
+      if (!n.value || f.value.length === 0) return;
+      const t = f.value.map(
+        (r) => C(n.value, r, !0).flat()
+      ), e = {
+        series: {
+          id: "myBar",
+          markArea: {
+            ...v,
+            data: t
+          }
+        }
+      };
+      n.value.setOption(e);
+    };
+    return F([n, i], () => {
+      n.value && M();
+    }), (t, e) => (k(), S("div", {
+      ref_key: "barChart",
+      ref: h,
+      class: "w-full"
+    }, null, 512));
+  }
+};
+export {
+  O as default
+};

package/dist/OcOverviewPieChart-BIpg_ZOf.js

@@ -0,0 +1,94 @@
+import { ref as d, computed as x, watch as y, nextTick as C, createElementBlock as i, openBlock as c, createElementVNode as a, createCommentVNode as k, toDisplayString as h, Fragment as w, renderList as F, normalizeStyle as L } from "vue";
+import { useChart as S } from "./Dashboard/composables/useChart.js";
+import "./dayjs.min-CTPVfFeV.js";
+const V = { class: "flex flex-col items-center justify-center" }, T = { class: "relative w-[210px] h-[210px]" }, I = { class: "absolute inset-0 flex flex-col items-center justify-center pointer-events-none" }, O = { class: "text-center" }, j = { class: "text-oc-text-400" }, A = { class: "text-lg font-semibold font-reddit-mono" }, E = {
+  key: 0,
+  class: "mt-4 flex flex-wrap gap-3 justify-center"
+}, N = ["onClick"], z = { class: "text-sm" }, R = {
+  __name: "OcOverviewPieChart",
+  props: {
+    chartData: Array
+  },
+  setup(r) {
+    const n = r, o = d(""), s = d(0), _ = (e, t = "SGD") => (typeof e == "number" ? e : Number(e)).toLocaleString("en-US", {
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2
+    }), m = x(() => !n.chartData || n.chartData.length === 0 ? 0 : n.chartData.reduce((e, t) => e + (t.value || 0), 0)), v = () => {
+      o.value = "Total", s.value = m.value;
+    }, g = x(() => ({
+      series: [{
+        id: "overviewPieChart",
+        data: n.chartData || [],
+        type: "pie",
+        radius: ["80%", "100%"],
+        avoidLabelOverlap: !1,
+        itemStyle: {
+          borderRadius: 6,
+          borderColor: "#fff",
+          borderWidth: 2
+        },
+        label: {
+          show: !1
+          // Hide default labels
+        },
+        labelLine: {
+          show: !1
+        },
+        emphasis: {
+          disabled: !0,
+          label: {
+            show: !1
+          }
+        }
+      }]
+    })), f = d(), { chart: l } = S(f, g), D = (e) => {
+      const t = ["#356DFF", "#AEC5FF", "#86FFCC"];
+      return t[e % t.length];
+    }, b = (e) => {
+      o.value = e.name, s.value = e.value, l.value && l.value.dispatchAction({
+        type: "highlight",
+        seriesIndex: 0,
+        dataIndex: n.chartData.findIndex((t) => t.name === e.name)
+      });
+    };
+    return y(l, async (e) => {
+      e && (await C(), v(), e.on("mouseover", "series", (t) => {
+        t.componentType === "series" && t.seriesType === "pie" && (o.value = t.name || "Unknown", s.value = t.value || 0);
+      }), e.on("mouseout", "series", () => {
+        o.value = "Total", s.value = m.value;
+      }));
+    }), y(() => n.chartData, () => {
+      l.value && v();
+    }, { deep: !0 }), (e, t) => (c(), i("div", V, [
+      a("div", T, [
+        a("div", {
+          ref_key: "pieChart",
+          ref: f,
+          class: "w-[210px] h-[210px]"
+        }, null, 512),
+        a("div", I, [
+          a("div", O, [
+            a("div", j, h(o.value), 1),
+            a("div", A, "SGD " + h(_(s.value)), 1)
+          ])
+        ])
+      ]),
+      r.chartData && r.chartData.length > 0 ? (c(), i("div", E, [
+        (c(!0), i(w, null, F(r.chartData, (u, p) => (c(), i("div", {
+          key: p,
+          class: "flex items-center gap-2 cursor-pointer hover:opacity-80 transition-opacity",
+          onClick: (B) => b(u)
+        }, [
+          a("div", {
+            class: "w-3 h-3 rounded-full",
+            style: L({ backgroundColor: D(p) })
+          }, null, 4),
+          a("span", z, h(u.name), 1)
+        ], 8, N))), 128))
+      ])) : k("", !0)
+    ]));
+  }
+};
+export {
+  R as default
+};