@oneclick.dev/cms-core-modules 0.0.106 → 0.0.107

package/dist/Overview-ejh4vUMT.mjs

@@ -1,567 +0,0 @@
-import { defineComponent as _e, ref as f, computed as te, watch as he, onMounted as ye, resolveComponent as h, openBlock as n, createElementBlock as i, createElementVNode as s, toDisplayString as u, unref as r, Fragment as w, renderList as D, normalizeClass as L, createVNode as t, withCtx as l, createCommentVNode as T, createBlock as P, createTextVNode as y, resolveDynamicComponent as W, normalizeStyle as se } from "vue";
-import { useModule as be, useModuleRoute as we, useModuleBreadcrumbs as Ce } from "@oneclick.dev/cms-kit";
-import "./index-Bvxc5xv_.mjs";
-import { componentToString as oe, ChartTooltipContent as ae } from "@oneclick.dev/cms-kit/charts";
-import { MousePointerClick as ke, Users as $e, Eye as De, Clock as Te, Zap as Pe, TrendingDown as le, TrendingUp as ne, UserPlus as Se, Activity as Ue, RefreshCw as Ve, Loader2 as Re, ArrowUpRight as Me, Globe as Fe, Minus as Ae, Smartphone as ze, Tablet as Ne, Monitor as Be } from "lucide-vue-next";
-import { S as re, C as j, A as ie, z as ue } from "./index-uOkqO74I.mjs";
-import { j as ce, C as H } from "./index-BRdCrvcz.mjs";
-const Le = { class: "flex flex-col gap-4 w-full max-w-7xl mx-auto py-8" }, je = { class: "flex justify-between gap-4 flex-col @lg:flex-row @lg:items-center" }, Ge = { class: "text-muted-foreground text-sm mt-1" }, Ie = {
-  key: 0,
-  class: "flex items-center gap-2"
-}, Xe = { class: "flex items-center border rounded-lg overflow-hidden" }, Ee = ["onClick"], Oe = { class: "text-sm text-destructive font-medium" }, We = {
-  key: 2,
-  class: "flex items-center justify-center py-20"
-}, He = { class: "flex items-start justify-between" }, qe = { class: "flex items-center gap-2" }, Ke = { class: "text-sm font-medium" }, Ze = { class: "grid grid-cols-2 @md:grid-cols-3 @xl:grid-cols-4 gap-4" }, Je = { class: "flex items-center gap-1.5 text-muted-foreground mb-2" }, Qe = { class: "text-xs font-medium uppercase tracking-wide" }, Ye = { class: "text-2xl font-semibold tabular-nums" }, et = {
-  key: 0,
-  class: "flex items-center gap-1 mt-1"
-}, tt = { class: "flex flex-col @xl:grid @xl:grid-cols-2 gap-4 max-w-full" }, st = { class: "flex flex-col @lg:grid @lg:grid-cols-2 gap-4" }, ot = { class: "divide-y" }, at = { class: "flex items-center gap-3 min-w-0" }, lt = { class: "text-muted-foreground w-5 text-right shrink-0" }, nt = { class: "truncate font-mono text-xs" }, rt = { class: "flex items-center gap-4 shrink-0 tabular-nums" }, it = { class: "text-muted-foreground text-xs w-16 text-right" }, ut = { class: "text-muted-foreground text-xs w-16 text-right" }, ct = {
-  key: 0,
-  class: "px-6 py-8 text-center text-muted-foreground text-sm"
-}, dt = { class: "divide-y" }, ft = { class: "flex items-center gap-3 min-w-0" }, mt = { class: "text-muted-foreground w-5 text-right shrink-0" }, vt = { class: "truncate" }, pt = { class: "flex items-center gap-4 shrink-0 tabular-nums" }, gt = { class: "text-muted-foreground text-xs w-20 text-right" }, xt = {
-  key: 0,
-  class: "px-6 py-8 text-center text-muted-foreground text-sm"
-}, _t = { class: "grid @lg:grid-cols-2 gap-4" }, ht = { class: "space-y-3" }, yt = { class: "text-sm capitalize flex-1" }, bt = { class: "flex-1 h-2 bg-muted rounded-full overflow-hidden" }, wt = { class: "text-xs tabular-nums text-muted-foreground w-16 text-right" }, Ct = {
-  key: 0,
-  class: "py-4 text-center text-muted-foreground text-sm"
-}, kt = { class: "space-y-3" }, $t = { class: "text-sm flex-1" }, Dt = { class: "flex-1 h-2 bg-muted rounded-full overflow-hidden" }, Tt = { class: "text-xs tabular-nums text-muted-foreground w-16 text-right" }, Pt = {
-  key: 0,
-  class: "py-4 text-center text-muted-foreground text-sm"
-}, Nt = /* @__PURE__ */ _e({
-  __name: "Overview",
-  setup(St) {
-    const { config: G } = be(), { moduleId: de } = we();
-    Ce(() => [{ label: "Overview" }]);
-    const C = f(!0), V = f(null), R = f("30"), S = f([]), m = f({}), fe = f({}), v = f({}), q = f(0), I = f([]), X = f([]), M = f([]), F = f([]), A = te(() => !!(G.serviceAccount && G.propertyId));
-    function k(a) {
-      return `/api/v1/modules/${de}${a}`;
-    }
-    const me = [
-      { label: "7 days", value: "7" },
-      { label: "14 days", value: "14" },
-      { label: "30 days", value: "30" },
-      { label: "90 days", value: "90" }
-    ], x = {
-      sessions: "#3b82f6",
-      users: "#8b5cf6",
-      pageViews: "#10b981"
-    }, E = {
-      sessions: { label: "Sessions", color: x.sessions },
-      totalUsers: { label: "Users", color: x.users }
-    }, O = {
-      screenPageViews: { label: "Page Views", color: x.pageViews }
-    }, U = (a, e) => e, K = (a) => a.sessions || 0, ve = (a) => a.totalUsers || 0, Z = (a) => a.screenPageViews || 0, J = (a) => {
-      const e = S.value[Math.round(a)];
-      if (!e) return "";
-      const d = new Date(e.date);
-      return `${d.getDate()}/${d.getMonth() + 1}`;
-    }, Q = (a) => {
-      const e = S.value[Math.round(Number(a))];
-      return e ? new Date(e.date).toLocaleDateString(void 0, { weekday: "short", month: "short", day: "numeric" }) : "";
-    }, pe = te(() => [
-      {
-        label: "Sessions",
-        value: p(m.value.sessions || 0),
-        icon: ke,
-        change: v.value.sessions
-      },
-      {
-        label: "Users",
-        value: p(m.value.totalUsers || 0),
-        icon: $e,
-        change: v.value.totalUsers
-      },
-      {
-        label: "Page Views",
-        value: p(m.value.screenPageViews || 0),
-        icon: De,
-        change: v.value.screenPageViews
-      },
-      {
-        label: "Avg. Duration",
-        value: ge(m.value.averageSessionDuration || 0),
-        icon: Te,
-        change: v.value.averageSessionDuration
-      },
-      {
-        label: "Engagement",
-        value: `${((m.value.engagementRate || 0) * 100).toFixed(1)}%`,
-        icon: Pe,
-        change: v.value.engagementRate,
-        positive: !0
-      },
-      {
-        label: "Bounce Rate",
-        value: `${((m.value.bounceRate || 0) * 100).toFixed(1)}%`,
-        icon: (m.value.bounceRate || 0) > 0.5 ? le : ne,
-        change: v.value.bounceRate,
-        positive: !1
-      },
-      {
-        label: "New Users",
-        value: p(m.value.newUsers || 0),
-        icon: Se,
-        change: v.value.newUsers
-      },
-      {
-        label: "Pages / Session",
-        value: (m.value.screenPageViewsPerSession || 0).toFixed(1),
-        icon: Ue,
-        change: v.value.screenPageViewsPerSession
-      }
-    ]);
-    function p(a) {
-      return a >= 1e6 ? `${(a / 1e6).toFixed(1)}M` : a >= 1e3 ? `${(a / 1e3).toFixed(1)}K` : Math.round(a).toString();
-    }
-    function ge(a) {
-      const e = Math.floor(a / 60), d = Math.round(a % 60);
-      return e > 0 ? `${e}m ${d}s` : `${d}s`;
-    }
-    function z(a, e = !0) {
-      if (a == null)
-        return { text: "—", cls: "text-muted-foreground", icon: Ae };
-      const c = `${Math.abs(a).toFixed(1)}%`, b = a > 0;
-      return {
-        text: c,
-        cls: (e ? b : !b) ? "text-emerald-600 dark:text-emerald-400" : "text-red-500 dark:text-red-400",
-        icon: b ? ne : le
-      };
-    }
-    function xe(a) {
-      const e = a.toLowerCase();
-      return e === "mobile" ? ze : e === "tablet" ? Ne : Be;
-    }
-    async function N() {
-      if (!A.value) return;
-      C.value = !0, V.value = null;
-      const a = `${R.value}daysAgo`;
-      try {
-        const [e, d, c, b, g, _] = await Promise.all([
-          $fetch(k(`/report?startDate=${a}&endDate=today`)),
-          $fetch(k("/realtime")).catch(() => ({ activeUsers: 0 })),
-          $fetch(k(`/top-pages?startDate=${a}&endDate=today&limit=10`)),
-          $fetch(k(`/top-sources?startDate=${a}&endDate=today`)),
-          $fetch(k(`/devices?startDate=${a}&endDate=today`)),
-          $fetch(k(`/countries?startDate=${a}&endDate=today`))
-        ]);
-        S.value = e.rows || [], m.value = e.totals || {}, fe.value = e.previousTotals || {}, v.value = e.changes || {}, q.value = d.activeUsers || 0, I.value = c.rows || [], X.value = b.rows || [], M.value = g.rows || [], F.value = _.rows || [];
-      } catch (e) {
-        console.error("Failed to fetch analytics data:", e), V.value = e?.data?.statusMessage || e?.message || "Failed to load analytics data";
-      } finally {
-        C.value = !1;
-      }
-    }
-    return he(R, () => N()), ye(() => {
-      A.value ? N() : C.value = !1;
-    }), (a, e) => {
-      const d = h("Button"), c = h("Card"), b = h("Badge"), g = h("CardTitle"), _ = h("CardHeader"), Y = h("ChartLegendContent"), ee = h("ChartContainer"), $ = h("CardContent");
-      return n(), i("div", Le, [
-        s("div", je, [
-          s("div", null, [
-            e[0] || (e[0] = s("h1", { class: "text-2xl font-semibold" }, "Analytics Overview", -1)),
-            s("p", Ge, "Property " + u(r(G).propertyId || "—"), 1)
-          ]),
-          A.value ? (n(), i("div", Ie, [
-            s("div", Xe, [
-              (n(), i(w, null, D(me, (o) => s("button", {
-                key: o.value,
-                class: L(["px-3 py-1.5 text-xs font-medium transition-colors", R.value === o.value ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:text-foreground hover:bg-muted"]),
-                onClick: (B) => R.value = o.value
-              }, u(o.label), 11, Ee)), 64))
-            ]),
-            t(d, {
-              variant: "outline",
-              size: "icon",
-              onClick: N,
-              disabled: C.value
-            }, {
-              default: l(() => [
-                t(r(Ve), {
-                  class: L(["size-4", { "animate-spin": C.value }])
-                }, null, 8, ["class"])
-              ]),
-              _: 1
-            }, 8, ["disabled"])
-          ])) : T("", !0)
-        ]),
-        A.value ? V.value ? (n(), P(c, {
-          key: 1,
-          class: "p-6 border-destructive/50 bg-destructive/5"
-        }, {
-          default: l(() => [
-            s("p", Oe, u(V.value), 1),
-            t(d, {
-              variant: "outline",
-              size: "sm",
-              class: "mt-3",
-              onClick: N
-            }, {
-              default: l(() => [...e[2] || (e[2] = [
-                y("Retry", -1)
-              ])]),
-              _: 1
-            })
-          ]),
-          _: 1
-        })) : C.value ? (n(), i("div", We, [
-          t(r(Re), { class: "size-8 animate-spin text-muted-foreground" })
-        ])) : (n(), i(w, { key: 3 }, [
-          t(c, { class: "p-4" }, {
-            default: l(() => [
-              s("div", He, [
-                s("div", qe, [
-                  e[3] || (e[3] = s("span", { class: "relative flex h-2.5 w-2.5" }, [
-                    s("span", { class: "animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75" }),
-                    s("span", { class: "relative inline-flex rounded-full h-2.5 w-2.5 bg-green-500" })
-                  ], -1)),
-                  s("span", Ke, u(q.value) + " visitors", 1),
-                  e[4] || (e[4] = s("span", { class: "text-xs text-muted-foreground translate-y-0.25" }, "in the last 30 minutes", -1))
-                ]),
-                t(b, {
-                  variant: "outline",
-                  class: "text-xs"
-                }, {
-                  default: l(() => [...e[5] || (e[5] = [
-                    y("Live", -1)
-                  ])]),
-                  _: 1
-                })
-              ])
-            ]),
-            _: 1
-          }),
-          s("div", Ze, [
-            (n(!0), i(w, null, D(pe.value, (o) => (n(), P(c, {
-              key: o.label,
-              class: "p-4"
-            }, {
-              default: l(() => [
-                s("div", Je, [
-                  (n(), P(W(o.icon), { class: "size-3.5" })),
-                  s("span", Qe, u(o.label), 1)
-                ]),
-                s("p", Ye, u(o.value), 1),
-                o.change !== void 0 ? (n(), i("div", et, [
-                  (n(), P(W(z(o.change, o.positive !== !1).icon), {
-                    class: L(["size-3", z(o.change, o.positive !== !1).cls])
-                  }, null, 8, ["class"])),
-                  s("span", {
-                    class: L(["text-xs font-medium", z(o.change, o.positive !== !1).cls])
-                  }, u(z(o.change, o.positive !== !1).text), 3),
-                  e[6] || (e[6] = s("span", { class: "text-xs text-muted-foreground" }, "vs prev.", -1))
-                ])) : T("", !0)
-              ]),
-              _: 2
-            }, 1024))), 128))
-          ]),
-          s("div", tt, [
-            t(c, null, {
-              default: l(() => [
-                t(_, { class: "pb-2" }, {
-                  default: l(() => [
-                    t(g, { class: "text-base" }, {
-                      default: l(() => [...e[7] || (e[7] = [
-                        y("Sessions & Users", -1)
-                      ])]),
-                      _: 1
-                    })
-                  ]),
-                  _: 1
-                }),
-                t($, null, {
-                  default: l(() => [
-                    t(ee, {
-                      config: E,
-                      class: "h-[240px] w-full"
-                    }, {
-                      default: l(() => [
-                        t(r(re), {
-                          data: S.value,
-                          margin: { top: 8, right: 8, bottom: 24, left: 40 }
-                        }, {
-                          default: l(() => [
-                            t(r(ce), {
-                              x: U,
-                              y: K,
-                              color: x.sessions,
-                              opacity: 0.1,
-                              curveType: "monotoneX"
-                            }, null, 8, ["color"]),
-                            t(r(H), {
-                              x: U,
-                              y: K,
-                              color: x.sessions,
-                              lineWidth: 2,
-                              curveType: "monotoneX"
-                            }, null, 8, ["color"]),
-                            t(r(H), {
-                              x: U,
-                              y: ve,
-                              color: x.users,
-                              lineWidth: 2,
-                              curveType: "monotoneX"
-                            }, null, 8, ["color"]),
-                            t(r(j), {
-                              type: "x",
-                              tickFormat: J,
-                              numTicks: 6
-                            }),
-                            t(r(j), {
-                              type: "y",
-                              numTicks: 4
-                            }),
-                            t(r(ie), {
-                              template: r(oe)(E, r(ae), { labelFormatter: Q })
-                            }, null, 8, ["template"]),
-                            t(r(ue))
-                          ]),
-                          _: 1
-                        }, 8, ["data"]),
-                        t(Y, { config: E })
-                      ]),
-                      _: 1
-                    })
-                  ]),
-                  _: 1
-                })
-              ]),
-              _: 1
-            }),
-            t(c, null, {
-              default: l(() => [
-                t(_, { class: "pb-2" }, {
-                  default: l(() => [
-                    t(g, { class: "text-base" }, {
-                      default: l(() => [...e[8] || (e[8] = [
-                        y("Page Views", -1)
-                      ])]),
-                      _: 1
-                    })
-                  ]),
-                  _: 1
-                }),
-                t($, null, {
-                  default: l(() => [
-                    t(ee, {
-                      config: O,
-                      class: "h-[240px] w-full"
-                    }, {
-                      default: l(() => [
-                        t(r(re), {
-                          data: S.value,
-                          margin: { top: 8, right: 8, bottom: 24, left: 40 }
-                        }, {
-                          default: l(() => [
-                            t(r(ce), {
-                              x: U,
-                              y: Z,
-                              color: x.pageViews,
-                              opacity: 0.15,
-                              curveType: "monotoneX"
-                            }, null, 8, ["color"]),
-                            t(r(H), {
-                              x: U,
-                              y: Z,
-                              color: x.pageViews,
-                              lineWidth: 2,
-                              curveType: "monotoneX"
-                            }, null, 8, ["color"]),
-                            t(r(j), {
-                              type: "x",
-                              tickFormat: J,
-                              numTicks: 6
-                            }),
-                            t(r(j), {
-                              type: "y",
-                              numTicks: 4
-                            }),
-                            t(r(ie), {
-                              template: r(oe)(O, r(ae), { labelFormatter: Q })
-                            }, null, 8, ["template"]),
-                            t(r(ue))
-                          ]),
-                          _: 1
-                        }, 8, ["data"]),
-                        t(Y, { config: O })
-                      ]),
-                      _: 1
-                    })
-                  ]),
-                  _: 1
-                })
-              ]),
-              _: 1
-            })
-          ]),
-          s("div", st, [
-            t(c, null, {
-              default: l(() => [
-                t(_, { class: "pb-2" }, {
-                  default: l(() => [
-                    t(g, { class: "text-base" }, {
-                      default: l(() => [...e[9] || (e[9] = [
-                        y("Top Pages", -1)
-                      ])]),
-                      _: 1
-                    })
-                  ]),
-                  _: 1
-                }),
-                t($, { class: "p-0" }, {
-                  default: l(() => [
-                    s("div", ot, [
-                      (n(!0), i(w, null, D(I.value, (o, B) => (n(), i("div", {
-                        key: o.pagePath,
-                        class: "flex items-center justify-between px-6 py-3 text-sm"
-                      }, [
-                        s("div", at, [
-                          s("span", lt, u(B + 1), 1),
-                          s("span", nt, u(o.pagePath), 1)
-                        ]),
-                        s("div", rt, [
-                          s("span", it, u(p(o.screenPageViews)) + " views", 1),
-                          s("span", ut, u(p(o.totalUsers)) + " users", 1)
-                        ])
-                      ]))), 128)),
-                      I.value.length ? T("", !0) : (n(), i("div", ct, "No data available"))
-                    ])
-                  ]),
-                  _: 1
-                })
-              ]),
-              _: 1
-            }),
-            t(c, null, {
-              default: l(() => [
-                t(_, { class: "pb-2" }, {
-                  default: l(() => [
-                    t(g, { class: "text-base" }, {
-                      default: l(() => [...e[10] || (e[10] = [
-                        y("Traffic Sources", -1)
-                      ])]),
-                      _: 1
-                    })
-                  ]),
-                  _: 1
-                }),
-                t($, { class: "p-0" }, {
-                  default: l(() => [
-                    s("div", dt, [
-                      (n(!0), i(w, null, D(X.value, (o, B) => (n(), i("div", {
-                        key: o.sessionSource,
-                        class: "flex items-center justify-between px-6 py-3 text-sm"
-                      }, [
-                        s("div", ft, [
-                          s("span", mt, u(B + 1), 1),
-                          t(r(Me), { class: "size-3.5 text-muted-foreground shrink-0" }),
-                          s("span", vt, u(o.sessionSource || "(direct)"), 1)
-                        ]),
-                        s("div", pt, [
-                          s("span", gt, u(p(o.sessions)) + " sessions", 1)
-                        ])
-                      ]))), 128)),
-                      X.value.length ? T("", !0) : (n(), i("div", xt, "No data available"))
-                    ])
-                  ]),
-                  _: 1
-                })
-              ]),
-              _: 1
-            })
-          ]),
-          s("div", _t, [
-            t(c, null, {
-              default: l(() => [
-                t(_, { class: "pb-2" }, {
-                  default: l(() => [
-                    t(g, { class: "text-base" }, {
-                      default: l(() => [...e[11] || (e[11] = [
-                        y("Devices", -1)
-                      ])]),
-                      _: 1
-                    })
-                  ]),
-                  _: 1
-                }),
-                t($, null, {
-                  default: l(() => [
-                    s("div", ht, [
-                      (n(!0), i(w, null, D(M.value, (o) => (n(), i("div", {
-                        key: o.deviceCategory,
-                        class: "flex items-center gap-3"
-                      }, [
-                        (n(), P(W(xe(o.deviceCategory)), { class: "size-4 text-muted-foreground shrink-0" })),
-                        s("span", yt, u(o.deviceCategory), 1),
-                        s("div", bt, [
-                          s("div", {
-                            class: "h-full bg-primary rounded-full transition-all",
-                            style: se({ width: `${o.sessions / (M.value[0]?.sessions || 1) * 100}%` })
-                          }, null, 4)
-                        ]),
-                        s("span", wt, u(p(o.sessions)), 1)
-                      ]))), 128)),
-                      M.value.length ? T("", !0) : (n(), i("div", Ct, "No data available"))
-                    ])
-                  ]),
-                  _: 1
-                })
-              ]),
-              _: 1
-            }),
-            t(c, null, {
-              default: l(() => [
-                t(_, { class: "pb-2" }, {
-                  default: l(() => [
-                    t(g, { class: "text-base" }, {
-                      default: l(() => [...e[12] || (e[12] = [
-                        y("Top Countries", -1)
-                      ])]),
-                      _: 1
-                    })
-                  ]),
-                  _: 1
-                }),
-                t($, null, {
-                  default: l(() => [
-                    s("div", kt, [
-                      (n(!0), i(w, null, D(F.value, (o) => (n(), i("div", {
-                        key: o.country,
-                        class: "flex items-center gap-3"
-                      }, [
-                        t(r(Fe), { class: "size-4 text-muted-foreground shrink-0" }),
-                        s("span", $t, u(o.country), 1),
-                        s("div", Dt, [
-                          s("div", {
-                            class: "h-full bg-primary rounded-full transition-all",
-                            style: se({ width: `${o.sessions / (F.value[0]?.sessions || 1) * 100}%` })
-                          }, null, 4)
-                        ]),
-                        s("span", Tt, u(p(o.sessions)), 1)
-                      ]))), 128)),
-                      F.value.length ? T("", !0) : (n(), i("div", Pt, "No data available"))
-                    ])
-                  ]),
-                  _: 1
-                })
-              ]),
-              _: 1
-            })
-          ])
-        ], 64)) : (n(), P(c, {
-          key: 0,
-          class: "p-8 text-center"
-        }, {
-          default: l(() => [...e[1] || (e[1] = [
-            s("div", { class: "mx-auto max-w-md space-y-3" }, [
-              s("p", { class: "text-lg font-medium" }, "Setup required"),
-              s("p", { class: "text-sm text-muted-foreground" }, "Connect a Google Service Account and enter your GA4 Property ID in the module settings to start seeing analytics.")
-            ], -1)
-          ])]),
-          _: 1
-        }))
-      ]);
-    };
-  }
-});
-export {
-  Nt as default
-};