@broberg/app-shell 0.5.0 → 0.7.1

package/dist/preact.js

@@ -224,6 +224,80 @@ function createFetchAccountAdapter(opts = {}) {
     removeAvatar: () => call("/profile/avatar/remove", { method: "POST" })
   };
 }
+var AnalyticsError = class extends Error {
+  constructor(status, code) {
+    super(code ? `HTTP ${status} ${code}` : `HTTP ${status}`);
+    this.status = status;
+    this.code = code;
+    this.name = "AnalyticsError";
+  }
+  status;
+  code;
+};
+function analyticsErrorKind(err) {
+  return err instanceof AnalyticsError && err.status === 503 && err.code === "analytics_unconfigured" ? "unconfigured" : "unavailable";
+}
+function createFetchAnalyticsAdapter(opts = {}) {
+  const url = opts.url ?? "/api/analytics";
+  return {
+    async load(days) {
+      let res;
+      try {
+        res = await (opts.fetch ?? fetch)(`${url}${url.includes("?") ? "&" : "?"}days=${encodeURIComponent(String(days))}`, {
+          credentials: opts.credentials ?? "same-origin",
+          headers: { accept: "application/json" }
+        });
+      } catch {
+        throw new AnalyticsError(0);
+      }
+      const body = await res.json().catch(() => null);
+      if (!res.ok) throw new AnalyticsError(res.status, typeof body?.error === "string" ? body.error : void 0);
+      const ok = body !== null && typeof body.totals?.visitors === "number" && Array.isArray(body.series) && Array.isArray(body.topPages);
+      if (!ok) throw new AnalyticsError(res.status, "bad_response");
+      return body;
+    }
+  };
+}
+function copenhagenDay(at = /* @__PURE__ */ new Date()) {
+  return new Intl.DateTimeFormat("en-CA", { timeZone: "Europe/Copenhagen", year: "numeric", month: "2-digit", day: "2-digit" }).format(at);
+}
+function fillDays(series, days, now = /* @__PURE__ */ new Date()) {
+  const byDay = new Map(series.map((d2) => [d2.day, d2]));
+  const [y, m, d] = copenhagenDay(now).split("-").map(Number);
+  return Array.from({ length: days }, (_, i) => {
+    const day = new Date(Date.UTC(y, m - 1, d - (days - 1 - i))).toISOString().slice(0, 10);
+    return byDay.get(day) ?? { day, visitors: 0, pageviews: 0 };
+  });
+}
+function changePct(now, before) {
+  return before === 0 ? null : Math.round((now - before) / before * 100);
+}
+var TenantLoadError = class extends Error {
+  constructor(status) {
+    super(`HTTP ${status}`);
+    this.status = status;
+    this.name = "TenantLoadError";
+  }
+  status;
+};
+function createFetchTenantAdapter(opts = {}) {
+  return {
+    async load() {
+      let res;
+      try {
+        res = await (opts.fetch ?? fetch)(opts.url ?? "/api/me/memberships", { credentials: opts.credentials ?? "same-origin", headers: { accept: "application/json" } });
+      } catch {
+        throw new TenantLoadError(0);
+      }
+      const body = await res.json().catch(() => null);
+      if (!res.ok) throw new TenantLoadError(res.status);
+      if (!Array.isArray(body) || !body.every((r) => r && typeof r.role === "string" && r.tenant && typeof r.tenant.slug === "string")) {
+        throw new TenantLoadError(res.status);
+      }
+      return body;
+    }
+  };
+}
 var TEXT = {
   da: {
     openMenu: "\xC5bn menu",
@@ -271,7 +345,27 @@ var TEXT = {
     pictureRemoved: "Billedet er fjernet",
     pictureTooLarge: "Billedet er for stort \u2014 h\xF8jst 2 MB.",
     pictureWrongType: "V\xE6lg et PNG-, JPEG- eller WebP-billede.",
-    bidSecurity: "Sikkerhed i Broberg ID"
+    bidSecurity: "Sikkerhed i Broberg ID",
+    analyticsPeriod: "Periode",
+    analyticsDays: "{n} dage",
+    analyticsVisitors: "Bes\xF8gende",
+    analyticsPageviews: "Sidevisninger",
+    analyticsVsPrev: "{pct} % mod forrige periode",
+    analyticsNoPrev: "Ingen sammenligning",
+    analyticsOverTime: "Sidevisninger pr. dag",
+    analyticsTopPages: "Mest bes\xF8gte sider",
+    analyticsDay: "Dag",
+    analyticsPage: "Side",
+    analyticsEmpty: "Ingen bes\xF8g i perioden.",
+    analyticsLoading: "Henter tal\u2026",
+    analyticsUnconfigured: "Analytics er ikke sat op for denne app.",
+    analyticsUnavailable: "Upmetrics svarer ikke lige nu. Pr\xF8v igen om lidt.",
+    tenantSwitch: "Skift organisation",
+    tenantLoadFailed: "Kunne ikke hente dine organisationer.",
+    tenantSwitchFailed: "Kunne ikke skifte organisation. Du er stadig i {name}.",
+    tenantRetry: "Pr\xF8v igen",
+    tenantSuspended: "lukket",
+    tenantActive: "aktiv"
   },
   en: {
     openMenu: "Open menu",
@@ -319,7 +413,27 @@ var TEXT = {
     pictureRemoved: "Picture removed",
     pictureTooLarge: "The picture is too large \u2014 2 MB at most.",
     pictureWrongType: "Choose a PNG, JPEG or WebP image.",
-    bidSecurity: "Security in Broberg ID"
+    bidSecurity: "Security in Broberg ID",
+    analyticsPeriod: "Period",
+    analyticsDays: "{n} days",
+    analyticsVisitors: "Visitors",
+    analyticsPageviews: "Page views",
+    analyticsVsPrev: "{pct}% vs previous period",
+    analyticsNoPrev: "No comparison",
+    analyticsOverTime: "Page views per day",
+    analyticsTopPages: "Most visited pages",
+    analyticsDay: "Day",
+    analyticsPage: "Page",
+    analyticsEmpty: "No visits in this period.",
+    analyticsLoading: "Loading figures\u2026",
+    analyticsUnconfigured: "Analytics is not set up for this app.",
+    analyticsUnavailable: "Upmetrics is not answering right now. Try again shortly.",
+    tenantSwitch: "Switch organisation",
+    tenantLoadFailed: "Could not load your organisations.",
+    tenantSwitchFailed: "Could not switch organisation. You are still in {name}.",
+    tenantRetry: "Try again",
+    tenantSuspended: "suspended",
+    tenantActive: "active"
   }
 };
 var MOBILE_QUERY = "(max-width: 767px)";
@@ -1128,7 +1242,7 @@ function AccountPage({ lang, adapter, reauthHref, onProfileChange }) {
           /* @__PURE__ */ jsx("button", { type: "button", class: "bas-account__btn is-quiet", onClick: () => setConfirming(false), "data-testid": "account-avatar-remove-cancel", children: t.cancel })
         ] }) : null
       ] }),
-      /* @__PURE__ */ jsxs("form", { class: "bas-account__form", onSubmit: onSaveName, children: [
+      /* @__PURE__ */ jsxs("form", { class: "bas-account__form", onSubmit: onSaveName, "data-testid": "account-name-form", children: [
         /* @__PURE__ */ jsx("label", { class: "bas-account__label", for: "bas-account-name", children: t.name }),
         /* @__PURE__ */ jsxs("div", { class: "bas-account__row", children: [
           /* @__PURE__ */ jsx(
@@ -1155,7 +1269,177 @@ function AccountPage({ lang, adapter, reauthHref, onProfileChange }) {
     ] }) : null
   ] });
 }
+function AnalyticsPage({ lang, adapter, periods = [7, 30, 90], initialDays }) {
+  const t = TEXT[lang];
+  const api = useMemo(() => adapter ?? createFetchAnalyticsAdapter(), [adapter]);
+  const [days, setDays] = useState(initialDays ?? (periods.includes(30) ? 30 : periods[0]));
+  const [load, setLoad] = useState({ state: "loading" });
+  const locale = lang === "da" ? "da-DK" : "en-GB";
+  const num = (n) => n.toLocaleString(locale);
+  useEffect(() => {
+    let live = true;
+    setLoad({ state: "loading" });
+    api.load(days).then(
+      (data) => live && setLoad({ state: "ok", days, data }),
+      (e) => live && setLoad({ state: "error", reason: analyticsErrorKind(e) })
+    );
+    return () => {
+      live = false;
+    };
+  }, [api, days]);
+  return /* @__PURE__ */ jsxs("section", { class: "bas-analytics", "data-testid": "analytics-page", "aria-busy": load.state === "loading", children: [
+    /* @__PURE__ */ jsx("div", { class: "bas-analytics__periods", role: "group", "aria-label": t.analyticsPeriod, children: periods.map((d) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        class: "bas-analytics__period" + (d === days ? " is-active" : ""),
+        "aria-pressed": d === days,
+        onClick: () => setDays(d),
+        "data-testid": `analytics-period-${d}`,
+        children: t.analyticsDays.replace("{n}", String(d))
+      },
+      d
+    )) }),
+    load.state === "loading" ? /* @__PURE__ */ jsx("p", { class: "bas-analytics__muted", "data-testid": "analytics-loading", children: t.analyticsLoading }) : null,
+    load.state === "error" ? /* @__PURE__ */ jsx("p", { class: "bas-analytics__note", role: "alert", "data-testid": "analytics-error", "data-reason": load.reason, children: load.reason === "unconfigured" ? t.analyticsUnconfigured : t.analyticsUnavailable }) : null,
+    load.state === "ok" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { class: "bas-analytics__tiles", children: ["visitors", "pageviews"].map((k) => {
+        const c = changePct(load.data.totals[k], load.data.prev[k]);
+        return /* @__PURE__ */ jsxs("div", { class: "bas-analytics__tile", "data-testid": `analytics-${k}`, children: [
+          /* @__PURE__ */ jsx("div", { class: "bas-analytics__label", children: k === "visitors" ? t.analyticsVisitors : t.analyticsPageviews }),
+          /* @__PURE__ */ jsx("div", { class: "bas-analytics__value", "data-testid": `analytics-${k}-value`, children: num(load.data.totals[k]) }),
+          /* @__PURE__ */ jsx("div", { class: "bas-analytics__muted", "data-testid": `analytics-${k}-change`, children: c === null ? t.analyticsNoPrev : t.analyticsVsPrev.replace("{pct}", `${c > 0 ? "+" : ""}${c}`) })
+        ] }, k);
+      }) }),
+      /* @__PURE__ */ jsx(AnalyticsSeries, { data: fillDays(load.data.series, load.days), t, locale, num }),
+      /* @__PURE__ */ jsxs("div", { class: "bas-analytics__card", "data-testid": "analytics-top-pages", children: [
+        /* @__PURE__ */ jsx("h2", { class: "bas-analytics__h", children: t.analyticsTopPages }),
+        load.data.topPages.length === 0 ? /* @__PURE__ */ jsx("p", { class: "bas-analytics__muted", "data-testid": "analytics-top-pages-empty", children: t.analyticsEmpty }) : /* @__PURE__ */ jsx("ol", { class: "bas-analytics__pages", children: load.data.topPages.map((p) => /* @__PURE__ */ jsxs("li", { class: "bas-analytics__page", children: [
+          /* @__PURE__ */ jsx("span", { class: "bas-analytics__path", title: p.value, children: p.value }),
+          /* @__PURE__ */ jsx("span", { class: "bas-analytics__count", children: num(p.count) })
+        ] }, p.value)) })
+      ] })
+    ] }) : null
+  ] });
+}
+function dayLabel(day, locale) {
+  return (/* @__PURE__ */ new Date(`${day}T12:00:00Z`)).toLocaleDateString(locale, { day: "numeric", month: "short", timeZone: "UTC" });
+}
+function AnalyticsSeries({ data, t, locale, num }) {
+  const max = Math.max(1, ...data.map((d) => d.pageviews));
+  const empty = data.every((d) => d.pageviews === 0);
+  return /* @__PURE__ */ jsxs("div", { class: "bas-analytics__card", "data-testid": "analytics-series", children: [
+    /* @__PURE__ */ jsx("h2", { class: "bas-analytics__h", children: t.analyticsOverTime }),
+    empty ? /* @__PURE__ */ jsx("p", { class: "bas-analytics__muted", "data-testid": "analytics-series-empty", children: t.analyticsEmpty }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { class: "bas-analytics__bars", "aria-hidden": "true", children: data.map((d) => /* @__PURE__ */ jsx("div", { class: "bas-analytics__col", title: `${dayLabel(d.day, locale)}: ${num(d.pageviews)}`, "data-day": d.day, children: /* @__PURE__ */ jsx("div", { class: "bas-analytics__bar", style: { height: d.pageviews === 0 ? "0" : `max(2px, ${d.pageviews / max * 100}%)` } }) }, d.day)) }),
+      /* @__PURE__ */ jsxs("div", { class: "bas-analytics__axis", "aria-hidden": "true", children: [
+        /* @__PURE__ */ jsx("span", { children: dayLabel(data[0].day, locale) }),
+        /* @__PURE__ */ jsx("span", { children: dayLabel(data[data.length - 1].day, locale) })
+      ] }),
+      /* @__PURE__ */ jsxs("table", { class: "bas-analytics__sr", "data-testid": "analytics-series-table", children: [
+        /* @__PURE__ */ jsx("caption", { children: t.analyticsOverTime }),
+        /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+          /* @__PURE__ */ jsx("th", { scope: "col", children: t.analyticsDay }),
+          /* @__PURE__ */ jsx("th", { scope: "col", children: t.analyticsPageviews })
+        ] }) }),
+        /* @__PURE__ */ jsx("tbody", { children: data.map((d) => /* @__PURE__ */ jsxs("tr", { children: [
+          /* @__PURE__ */ jsx("td", { children: dayLabel(d.day, locale) }),
+          /* @__PURE__ */ jsx("td", { children: num(d.pageviews) })
+        ] }, d.day)) })
+      ] })
+    ] })
+  ] });
+}
+function TenantSwitcher({ lang, activeSlug, adapter, onSwitch }) {
+  const t = TEXT[lang];
+  const api = useMemo(() => adapter ?? createFetchTenantAdapter(), [adapter]);
+  const [rows, setRows] = useState(null);
+  const [loadFailed, setLoadFailed] = useState(false);
+  const [open, setOpen] = useState(false);
+  const [busy, setBusy] = useState(null);
+  const [switchFailed, setSwitchFailed] = useState(false);
+  const root = useRef(null);
+  const load = () => {
+    setLoadFailed(false);
+    api.load().then(setRows, () => setLoadFailed(true));
+  };
+  useEffect(load, [api]);
+  useEffect(() => {
+    if (!open) return;
+    const onDown = (e) => {
+      if (root.current && !root.current.contains(e.target)) setOpen(false);
+    };
+    const onKey = (e) => e.key === "Escape" && setOpen(false);
+    document.addEventListener("mousedown", onDown);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("mousedown", onDown);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [open]);
+  const active = rows?.find((r) => r.tenant.slug === activeSlug);
+  const label = active?.tenant.name ?? activeSlug;
+  const pick = async (slug) => {
+    if (slug === activeSlug || busy) return;
+    setBusy(slug);
+    setSwitchFailed(false);
+    try {
+      await onSwitch(slug);
+      setOpen(false);
+    } catch {
+      setSwitchFailed(true);
+    } finally {
+      setBusy(null);
+    }
+  };
+  if (rows && rows.length <= 1 && !loadFailed) {
+    return /* @__PURE__ */ jsx("div", { class: "bas-tenant", "data-testid": "tenant-switcher", children: /* @__PURE__ */ jsx("span", { class: "bas-tenant__label", "data-testid": "tenant-switcher-label", children: label }) });
+  }
+  return /* @__PURE__ */ jsxs("div", { class: "bas-tenant", ref: root, "data-testid": "tenant-switcher", children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        class: "bas-tenant__btn" + (open ? " is-open" : ""),
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        "aria-label": t.tenantSwitch,
+        onClick: () => setOpen((v) => !v),
+        "data-testid": "tenant-switcher-button",
+        children: /* @__PURE__ */ jsx("span", { class: "bas-tenant__label", "data-testid": "tenant-switcher-label", children: label })
+      }
+    ),
+    open ? /* @__PURE__ */ jsxs("div", { class: "bas-menu bas-tenant__menu", role: "menu", "data-testid": "tenant-switcher-menu", children: [
+      loadFailed ? /* @__PURE__ */ jsxs("div", { class: "bas-tenant__note", role: "alert", "data-testid": "tenant-switcher-load-error", children: [
+        /* @__PURE__ */ jsx("span", { children: t.tenantLoadFailed }),
+        /* @__PURE__ */ jsx("button", { type: "button", class: "bas-mi", onClick: load, "data-testid": "tenant-switcher-retry", children: t.tenantRetry })
+      ] }) : null,
+      switchFailed ? /* @__PURE__ */ jsx("p", { class: "bas-tenant__note is-error", role: "alert", "data-testid": "tenant-switcher-switch-error", children: t.tenantSwitchFailed.replace("{name}", label) }) : null,
+      (rows ?? []).map((r) => {
+        const isActive = r.tenant.slug === activeSlug;
+        const suspended = r.tenant.status === "suspended";
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            role: "menuitemradio",
+            "aria-checked": isActive,
+            class: "bas-mi bas-tenant__item" + (isActive ? " is-active" : ""),
+            disabled: suspended || busy !== null,
+            onClick: () => void pick(r.tenant.slug),
+            "data-testid": `tenant-switcher-item-${r.tenant.slug}`,
+            children: [
+              /* @__PURE__ */ jsx("span", { class: "bas-tenant__name", children: r.tenant.name }),
+              /* @__PURE__ */ jsx("span", { class: "bas-tenant__role", children: suspended ? t.tenantSuspended : isActive ? t.tenantActive : r.role })
+            ]
+          },
+          r.tenant.id
+        );
+      })
+    ] }) : null
+  ] });
+}
 
-export { AVATAR_MAX_BYTES, AVATAR_TYPES, AccountError, AccountPage, AppShell, Avatar, NotificationBell, PageHeader, PageTabs, Sidebar, TEXT, TopBar, UserMenu, accountErrorKind, activeNavLabel, badgeLabel, checkAvatarFile, createFetchAccountAdapter, createFetchNotificationSource, createMemoryNotificationSource, defaultReauthHref, initials, isActivePath, isExternal, readFlag, readSet, relativeTime, safeNavigate, useIsMobile, writeFlag, writeSet };
+export { AVATAR_MAX_BYTES, AVATAR_TYPES, AccountError, AccountPage, AnalyticsError, AnalyticsPage, AppShell, Avatar, NotificationBell, PageHeader, PageTabs, Sidebar, TEXT, TenantLoadError, TenantSwitcher, TopBar, UserMenu, accountErrorKind, activeNavLabel, analyticsErrorKind, badgeLabel, changePct, checkAvatarFile, copenhagenDay, createFetchAccountAdapter, createFetchAnalyticsAdapter, createFetchNotificationSource, createFetchTenantAdapter, createMemoryNotificationSource, defaultReauthHref, fillDays, initials, isActivePath, isExternal, readFlag, readSet, relativeTime, safeNavigate, useIsMobile, writeFlag, writeSet };
 //# sourceMappingURL=preact.js.map
 //# sourceMappingURL=preact.js.map