@oneclick.dev/cms-core-modules 0.0.108 → 0.0.110

package/dist/Audience-CUeMVYRy.mjs

@@ -0,0 +1,489 @@
+import { defineComponent as oe, ref as m, computed as C, watch as q, onMounted as re, resolveComponent as $, openBlock as o, createElementBlock as r, createElementVNode as e, Fragment as f, renderList as g, normalizeClass as E, toDisplayString as u, createVNode as l, withCtx as n, unref as x, createCommentVNode as R, createBlock as W, createTextVNode as b, normalizeStyle as M, resolveDynamicComponent as K } from "vue";
+import { useModule as ue, useModuleRoute as de, useModuleBreadcrumbs as ie } from "@oneclick.dev/cms-kit";
+import "./index-BFLV54kw.mjs";
+import { RefreshCw as ce, Loader2 as fe, UserPlus as me, UserCheck as ge, Clock as xe, Chrome as ve, Cpu as _e, Monitor as pe, Languages as be, MapPin as he } from "lucide-vue-next";
+import { S as ye, E as ke } from "./index-V78huaSJ.mjs";
+import { _ as we } from "./_plugin-vue_export-helper-CHgC5LLL.mjs";
+const Ce = { class: "flex flex-col gap-6 w-full max-w-7xl mx-auto py-8" }, $e = { class: "flex justify-between gap-4 flex-col @lg:flex-row @lg:items-center" }, Re = {
+  key: 0,
+  class: "flex items-center gap-2"
+}, De = { class: "flex items-center border rounded-lg overflow-hidden" }, Ue = ["onClick"], ze = { class: "text-sm text-destructive font-medium" }, Me = {
+  key: 2,
+  class: "flex items-center justify-center py-20"
+}, Se = { class: "flex flex-col @lg:grid @lg:grid-cols-3 gap-6" }, Ae = { class: "relative" }, Ne = { class: "absolute inset-0 flex items-center justify-center pointer-events-none" }, Ve = { class: "text-center" }, Te = { class: "text-xl font-bold tabular-nums" }, Be = { class: "mt-4 flex items-center gap-6" }, Fe = { class: "flex items-center gap-2" }, Pe = { class: "text-sm font-semibold tabular-nums" }, Le = {
+  key: 0,
+  class: "text-xs text-muted-foreground"
+}, Oe = { class: "flex items-center gap-2" }, Ee = { class: "text-sm font-semibold tabular-nums" }, We = {
+  key: 0,
+  class: "text-xs text-muted-foreground"
+}, je = { class: "overflow-x-auto" }, Ie = { class: "w-full text-sm" }, He = { class: "divide-y" }, qe = { class: "px-4 py-3" }, Ke = { class: "flex items-center gap-2" }, Ge = { class: "font-medium capitalize" }, Je = { class: "px-4 py-3 text-right tabular-nums" }, Qe = { class: "px-4 py-3 text-right tabular-nums" }, Xe = { class: "px-4 py-3 text-right tabular-nums" }, Ye = { class: "px-4 py-3 text-right tabular-nums" }, Ze = { class: "px-4 py-3 text-right tabular-nums" }, et = { class: "overflow-x-auto" }, tt = { class: "min-w-[600px]" }, st = { class: "flex items-center mb-1.5" }, lt = { class: "flex-1 grid grid-cols-24 gap-0.5" }, nt = { class: "w-10 shrink-0 text-xs text-muted-foreground" }, at = { class: "flex-1 grid grid-cols-24 gap-0.5" }, ot = ["title"], rt = { class: "grid @lg:grid-cols-3 gap-6" }, ut = { class: "flex items-center justify-between" }, dt = { class: "flex items-center gap-1" }, it = ["onClick", "title"], ct = { class: "space-y-3" }, ft = { class: "text-sm flex-1 truncate" }, mt = { class: "flex-1 h-2 bg-muted rounded-full overflow-hidden" }, gt = { class: "text-xs tabular-nums text-muted-foreground w-12 text-right" }, xt = {
+  key: 0,
+  class: "py-4 text-center text-muted-foreground text-sm"
+}, vt = { class: "space-y-3" }, _t = { class: "text-sm flex-1 truncate" }, pt = { class: "flex-1 h-2 bg-muted rounded-full overflow-hidden" }, bt = { class: "text-xs tabular-nums text-muted-foreground w-12 text-right" }, ht = {
+  key: 0,
+  class: "py-4 text-center text-muted-foreground text-sm"
+}, yt = { class: "space-y-2.5" }, kt = { class: "flex-1 min-w-0" }, wt = { class: "text-sm truncate block" }, Ct = { class: "text-xs text-muted-foreground truncate block" }, $t = { class: "flex-1 h-2 bg-muted rounded-full overflow-hidden" }, Rt = { class: "text-xs tabular-nums text-muted-foreground w-12 text-right" }, Dt = {
+  key: 0,
+  class: "py-4 text-center text-muted-foreground text-sm"
+}, Ut = /* @__PURE__ */ oe({
+  __name: "Audience",
+  setup(zt) {
+    const { config: I } = ue(), { moduleId: G } = de();
+    ie(() => [{ label: "Audience" }]);
+    const h = m(!0), S = m(null), D = m("30"), p = m("browser"), A = m([]), U = m([]), N = m([]), H = m([]), V = m([]), T = C(() => !!(I.serviceAccount && I.propertyId));
+    function y(a) {
+      return `/api/v1/modules/${G}${a}`;
+    }
+    const J = [
+      { label: "7d", value: "7" },
+      { label: "14d", value: "14" },
+      { label: "30d", value: "30" },
+      { label: "90d", value: "90" }
+    ];
+    function v(a) {
+      return a >= 1e6 ? `${(a / 1e6).toFixed(1)}M` : a >= 1e3 ? `${(a / 1e3).toFixed(1)}K` : Math.round(a).toString();
+    }
+    function Q(a) {
+      return `${(a * 100).toFixed(1)}%`;
+    }
+    function X(a) {
+      const t = Math.floor(a / 60), d = Math.round(a % 60);
+      return t > 0 ? `${t}m ${d}s` : `${d}s`;
+    }
+    const k = { new: "#3b82f6", returning: "#8b5cf6" }, Y = {
+      new: { label: "New Users", color: k.new },
+      returning: { label: "Returning Users", color: k.returning }
+    }, B = C(() => A.value.find((t) => t.newVsReturning === "new")?.totalUsers || 0), F = C(() => A.value.find((t) => t.newVsReturning === "returning")?.totalUsers || 0), Z = C(() => [
+      { key: "new", label: "New", value: B.value, fill: k.new },
+      { key: "returning", label: "Returning", value: F.value, fill: k.returning }
+    ]), z = C(() => B.value + F.value), ee = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"], te = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], j = C(() => {
+      const a = Array.from({ length: 7 }, () => Array(24).fill(0));
+      let t = 1;
+      return H.value.forEach((d) => {
+        const i = ee.indexOf(d.dayOfWeekName), c = parseInt(d.hour, 10);
+        i >= 0 && c >= 0 && c < 24 && (a[i][c] = d.sessions || 0, d.sessions > t && (t = d.sessions));
+      }), { matrix: a, maxVal: t };
+    });
+    function se(a, t) {
+      if (a === 0) return "bg-muted";
+      const d = a / t;
+      return d > 0.75 ? "bg-blue-600 dark:bg-blue-500" : d > 0.5 ? "bg-blue-500 dark:bg-blue-400" : d > 0.25 ? "bg-blue-400/70 dark:bg-blue-400/60" : "bg-blue-300/50 dark:bg-blue-300/30";
+    }
+    const le = [
+      { key: "browser", label: "Browser", icon: ve },
+      { key: "operatingSystem", label: "OS", icon: _e },
+      { key: "screenResolution", label: "Screen", icon: pe }
+    ];
+    async function P() {
+      if (!T.value) return;
+      h.value = !0, S.value = null;
+      const a = `${D.value}daysAgo`;
+      try {
+        const [t, d, i, c, _] = await Promise.all([
+          $fetch(y(`/audience/overview?startDate=${a}&endDate=today`)),
+          $fetch(y(`/audience/technology?startDate=${a}&endDate=today&dimension=${p.value}`)),
+          $fetch(y(`/audience/languages?startDate=${a}&endDate=today`)),
+          $fetch(y(`/audience/hours?startDate=${a}&endDate=today`)),
+          $fetch(y(`/audience/cities?startDate=${a}&endDate=today`))
+        ]);
+        A.value = t.rows || [], U.value = d.rows || [], N.value = i.rows || [], H.value = c.rows || [], V.value = _.rows || [];
+      } catch (t) {
+        S.value = t?.data?.statusMessage || t?.message || "Failed to load audience data";
+      } finally {
+        h.value = !1;
+      }
+    }
+    async function ne() {
+      const a = `${D.value}daysAgo`;
+      try {
+        const t = await $fetch(y(`/audience/technology?startDate=${a}&endDate=today&dimension=${p.value}`));
+        U.value = t.rows || [];
+      } catch {
+      }
+    }
+    return q(D, () => P()), q(p, () => ne()), re(() => {
+      T.value ? P() : h.value = !1;
+    }), (a, t) => {
+      const d = $("Button"), i = $("Card"), c = $("CardTitle"), _ = $("CardHeader"), ae = $("ChartContainer"), w = $("CardContent");
+      return o(), r("div", Ce, [
+        e("div", $e, [
+          t[0] || (t[0] = e("div", null, [
+            e("h1", { class: "text-2xl font-semibold" }, "Audience"),
+            e("p", { class: "text-muted-foreground text-sm mt-1" }, "Who visits your site")
+          ], -1)),
+          T.value ? (o(), r("div", Re, [
+            e("div", De, [
+              (o(), r(f, null, g(J, (s) => e("button", {
+                key: s.value,
+                class: E(["px-3 py-1.5 text-xs font-medium transition-colors", D.value === s.value ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:text-foreground hover:bg-muted"]),
+                onClick: (L) => D.value = s.value
+              }, u(s.label), 11, Ue)), 64))
+            ]),
+            l(d, {
+              variant: "outline",
+              size: "icon",
+              onClick: P,
+              disabled: h.value
+            }, {
+              default: n(() => [
+                l(x(ce), {
+                  class: E(["size-4", { "animate-spin": h.value }])
+                }, null, 8, ["class"])
+              ]),
+              _: 1
+            }, 8, ["disabled"])
+          ])) : R("", !0)
+        ]),
+        T.value ? S.value ? (o(), W(i, {
+          key: 1,
+          class: "p-6 border-destructive/50 bg-destructive/5"
+        }, {
+          default: n(() => [
+            e("p", ze, u(S.value), 1),
+            l(d, {
+              variant: "outline",
+              size: "sm",
+              class: "mt-3",
+              onClick: P
+            }, {
+              default: n(() => [...t[2] || (t[2] = [
+                b("Retry", -1)
+              ])]),
+              _: 1
+            })
+          ]),
+          _: 1
+        })) : h.value ? (o(), r("div", Me, [
+          l(x(fe), { class: "size-8 animate-spin text-muted-foreground" })
+        ])) : (o(), r(f, { key: 3 }, [
+          e("div", Se, [
+            l(i, null, {
+              default: n(() => [
+                l(_, { class: "pb-2" }, {
+                  default: n(() => [
+                    l(c, { class: "text-base" }, {
+                      default: n(() => [...t[3] || (t[3] = [
+                        b("New vs Returning", -1)
+                      ])]),
+                      _: 1
+                    })
+                  ]),
+                  _: 1
+                }),
+                l(w, { class: "flex flex-col items-center" }, {
+                  default: n(() => [
+                    e("div", Ae, [
+                      l(ae, {
+                        config: Y,
+                        class: "mx-auto aspect-square max-h-[200px]"
+                      }, {
+                        default: n(() => [
+                          l(x(ye), {
+                            data: Z.value,
+                            margin: { top: 16, bottom: 16, left: 16, right: 16 }
+                          }, {
+                            default: n(() => [
+                              l(x(ke), {
+                                value: (s) => s.value,
+                                color: (s) => s.fill,
+                                arcWidth: 35,
+                                padAngle: 0.03,
+                                cornerRadius: 4
+                              }, null, 8, ["value", "color"])
+                            ]),
+                            _: 1
+                          }, 8, ["data"])
+                        ]),
+                        _: 1
+                      }),
+                      e("div", Ne, [
+                        e("div", Ve, [
+                          e("p", Te, u(v(z.value)), 1),
+                          t[4] || (t[4] = e("p", { class: "text-xs text-muted-foreground" }, "total users", -1))
+                        ])
+                      ])
+                    ]),
+                    e("div", Be, [
+                      e("div", Fe, [
+                        e("div", {
+                          class: "size-2.5 rounded-full",
+                          style: M({ backgroundColor: k.new })
+                        }, null, 4),
+                        t[5] || (t[5] = e("span", { class: "text-sm" }, "New", -1)),
+                        e("span", Pe, u(v(B.value)), 1),
+                        z.value ? (o(), r("span", Le, u(Math.round(B.value / z.value * 100)) + "%", 1)) : R("", !0)
+                      ]),
+                      e("div", Oe, [
+                        e("div", {
+                          class: "size-2.5 rounded-full",
+                          style: M({ backgroundColor: k.returning })
+                        }, null, 4),
+                        t[6] || (t[6] = e("span", { class: "text-sm" }, "Returning", -1)),
+                        e("span", Ee, u(v(F.value)), 1),
+                        z.value ? (o(), r("span", We, u(Math.round(F.value / z.value * 100)) + "%", 1)) : R("", !0)
+                      ])
+                    ])
+                  ]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            }),
+            l(i, { class: "@lg:col-span-2" }, {
+              default: n(() => [
+                l(_, { class: "pb-2" }, {
+                  default: n(() => [
+                    l(c, { class: "text-base" }, {
+                      default: n(() => [...t[7] || (t[7] = [
+                        b("Engagement by Visitor Type", -1)
+                      ])]),
+                      _: 1
+                    })
+                  ]),
+                  _: 1
+                }),
+                l(w, null, {
+                  default: n(() => [
+                    e("div", je, [
+                      e("table", Ie, [
+                        t[8] || (t[8] = e("thead", null, [
+                          e("tr", { class: "border-b text-left" }, [
+                            e("th", { class: "px-4 py-3 font-medium text-muted-foreground" }, "Type"),
+                            e("th", { class: "px-4 py-3 font-medium text-muted-foreground text-right" }, "Users"),
+                            e("th", { class: "px-4 py-3 font-medium text-muted-foreground text-right" }, "Sessions"),
+                            e("th", { class: "px-4 py-3 font-medium text-muted-foreground text-right" }, "Engagement Rate"),
+                            e("th", { class: "px-4 py-3 font-medium text-muted-foreground text-right" }, "Avg Duration"),
+                            e("th", { class: "px-4 py-3 font-medium text-muted-foreground text-right" }, "Pages/Session")
+                          ])
+                        ], -1)),
+                        e("tbody", He, [
+                          (o(!0), r(f, null, g(A.value, (s) => (o(), r("tr", {
+                            key: s.newVsReturning,
+                            class: "hover:bg-muted/50"
+                          }, [
+                            e("td", qe, [
+                              e("div", Ke, [
+                                (o(), W(K(s.newVsReturning === "new" ? x(me) : x(ge)), { class: "size-4 text-muted-foreground" })),
+                                e("span", Ge, u(s.newVsReturning), 1)
+                              ])
+                            ]),
+                            e("td", Je, u(v(s.totalUsers)), 1),
+                            e("td", Qe, u(v(s.sessions)), 1),
+                            e("td", Xe, u(Q(s.engagementRate || 0)), 1),
+                            e("td", Ye, u(X(s.averageSessionDuration || 0)), 1),
+                            e("td", Ze, u((s.screenPageViewsPerSession || 0).toFixed(1)), 1)
+                          ]))), 128))
+                        ])
+                      ])
+                    ])
+                  ]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            })
+          ]),
+          l(i, null, {
+            default: n(() => [
+              l(_, { class: "pb-2" }, {
+                default: n(() => [
+                  l(c, { class: "text-base flex items-center gap-2" }, {
+                    default: n(() => [
+                      l(x(xe), { class: "size-4" }),
+                      t[9] || (t[9] = b(" Peak Hours ", -1))
+                    ]),
+                    _: 1
+                  }),
+                  t[10] || (t[10] = e("p", { class: "text-xs text-muted-foreground mt-1" }, "When your visitors are most active (based on sessions)", -1))
+                ]),
+                _: 1
+              }),
+              l(w, null, {
+                default: n(() => [
+                  e("div", et, [
+                    e("div", tt, [
+                      e("div", st, [
+                        t[11] || (t[11] = e("div", { class: "w-10 shrink-0" }, null, -1)),
+                        e("div", lt, [
+                          (o(), r(f, null, g(24, (s) => e("div", {
+                            key: s,
+                            class: "text-[10px] text-muted-foreground text-center"
+                          }, u(s - 1), 1)), 64))
+                        ])
+                      ]),
+                      (o(), r(f, null, g(te, (s, L) => e("div", {
+                        key: s,
+                        class: "flex items-center mb-0.5"
+                      }, [
+                        e("div", nt, u(s), 1),
+                        e("div", at, [
+                          (o(), r(f, null, g(24, (O) => e("div", {
+                            key: O,
+                            class: E(["aspect-square rounded-sm transition-colors", se(j.value.matrix[L]?.[O - 1] || 0, j.value.maxVal)]),
+                            title: `${s} ${O - 1}:00 — ${j.value.matrix[L]?.[O - 1] || 0} sessions`
+                          }, null, 10, ot)), 64))
+                        ])
+                      ])), 64)),
+                      t[12] || (t[12] = e("div", { class: "flex items-center justify-end gap-1.5 mt-3" }, [
+                        e("span", { class: "text-[10px] text-muted-foreground" }, "Less"),
+                        e("div", { class: "size-3 rounded-sm bg-muted" }),
+                        e("div", { class: "size-3 rounded-sm bg-blue-300/50 dark:bg-blue-300/30" }),
+                        e("div", { class: "size-3 rounded-sm bg-blue-400/70 dark:bg-blue-400/60" }),
+                        e("div", { class: "size-3 rounded-sm bg-blue-500 dark:bg-blue-400" }),
+                        e("div", { class: "size-3 rounded-sm bg-blue-600 dark:bg-blue-500" }),
+                        e("span", { class: "text-[10px] text-muted-foreground" }, "More")
+                      ], -1))
+                    ])
+                  ])
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          }),
+          e("div", rt, [
+            l(i, null, {
+              default: n(() => [
+                l(_, { class: "pb-2" }, {
+                  default: n(() => [
+                    e("div", ut, [
+                      l(c, { class: "text-base" }, {
+                        default: n(() => [...t[13] || (t[13] = [
+                          b("Technology", -1)
+                        ])]),
+                        _: 1
+                      }),
+                      e("div", dt, [
+                        (o(), r(f, null, g(le, (s) => e("button", {
+                          key: s.key,
+                          class: E(["p-1.5 rounded-md transition-colors", p.value === s.key ? "bg-muted text-foreground" : "text-muted-foreground hover:text-foreground"]),
+                          onClick: (L) => p.value = s.key,
+                          title: s.label
+                        }, [
+                          (o(), W(K(s.icon), { class: "size-3.5" }))
+                        ], 10, it)), 64))
+                      ])
+                    ])
+                  ]),
+                  _: 1
+                }),
+                l(w, null, {
+                  default: n(() => [
+                    e("div", ct, [
+                      (o(!0), r(f, null, g(U.value, (s) => (o(), r("div", {
+                        key: s[p.value],
+                        class: "flex items-center gap-3"
+                      }, [
+                        e("span", ft, u(s[p.value] || "(not set)"), 1),
+                        e("div", mt, [
+                          e("div", {
+                            class: "h-full bg-primary rounded-full transition-all",
+                            style: M({ width: `${s.totalUsers / (U.value[0]?.totalUsers || 1) * 100}%` })
+                          }, null, 4)
+                        ]),
+                        e("span", gt, u(v(s.totalUsers)), 1)
+                      ]))), 128)),
+                      U.value.length ? R("", !0) : (o(), r("div", xt, "No data"))
+                    ])
+                  ]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            }),
+            l(i, null, {
+              default: n(() => [
+                l(_, { class: "pb-2" }, {
+                  default: n(() => [
+                    l(c, { class: "text-base flex items-center gap-2" }, {
+                      default: n(() => [
+                        l(x(be), { class: "size-4" }),
+                        t[14] || (t[14] = b(" Languages ", -1))
+                      ]),
+                      _: 1
+                    })
+                  ]),
+                  _: 1
+                }),
+                l(w, null, {
+                  default: n(() => [
+                    e("div", vt, [
+                      (o(!0), r(f, null, g(N.value, (s) => (o(), r("div", {
+                        key: s.language,
+                        class: "flex items-center gap-3"
+                      }, [
+                        e("span", _t, u(s.language), 1),
+                        e("div", pt, [
+                          e("div", {
+                            class: "h-full bg-primary rounded-full transition-all",
+                            style: M({ width: `${s.totalUsers / (N.value[0]?.totalUsers || 1) * 100}%` })
+                          }, null, 4)
+                        ]),
+                        e("span", bt, u(v(s.totalUsers)), 1)
+                      ]))), 128)),
+                      N.value.length ? R("", !0) : (o(), r("div", ht, "No data"))
+                    ])
+                  ]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            }),
+            l(i, null, {
+              default: n(() => [
+                l(_, { class: "pb-2" }, {
+                  default: n(() => [
+                    l(c, { class: "text-base flex items-center gap-2" }, {
+                      default: n(() => [
+                        l(x(he), { class: "size-4" }),
+                        t[15] || (t[15] = b(" Top Cities ", -1))
+                      ]),
+                      _: 1
+                    })
+                  ]),
+                  _: 1
+                }),
+                l(w, null, {
+                  default: n(() => [
+                    e("div", yt, [
+                      (o(!0), r(f, null, g(V.value, (s) => (o(), r("div", {
+                        key: `${s.city}-${s.country}`,
+                        class: "flex items-center gap-3"
+                      }, [
+                        e("div", kt, [
+                          e("span", wt, u(s.city), 1),
+                          e("span", Ct, u(s.country), 1)
+                        ]),
+                        e("div", $t, [
+                          e("div", {
+                            class: "h-full bg-primary rounded-full transition-all",
+                            style: M({ width: `${s.totalUsers / (V.value[0]?.totalUsers || 1) * 100}%` })
+                          }, null, 4)
+                        ]),
+                        e("span", Rt, u(v(s.totalUsers)), 1)
+                      ]))), 128)),
+                      V.value.length ? R("", !0) : (o(), r("div", Dt, "No data"))
+                    ])
+                  ]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            })
+          ])
+        ], 64)) : (o(), W(i, {
+          key: 0,
+          class: "p-8 text-center"
+        }, {
+          default: n(() => [...t[1] || (t[1] = [
+            e("p", { class: "text-lg font-medium" }, "Setup required", -1)
+          ])]),
+          _: 1
+        }))
+      ]);
+    };
+  }
+}), Bt = /* @__PURE__ */ we(Ut, [["__scopeId", "data-v-4f3ae270"]]);
+export {
+  Bt as default
+};