@coursebuilder/analytics 1.1.0 → 1.1.2-canary.0.0c9beb2ae

package/dist/components/index.js

@@ -3,7 +3,7 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
 
 // src/components/omnibus-dashboard.tsx
 import React3, { useState as useState2, useTransition } from "react";
-import { CheckIcon, ChevronDownIcon, ClipboardIcon, ClipboardListIcon, ClockIcon, DollarSignIcon, ExternalLinkIcon, FilmIcon, GlobeIcon, LinkIcon, Loader2Icon, MousePointerClickIcon, PlayIcon, ShoppingCartIcon, TrendingUpIcon } from "lucide-react";
+import { CheckIcon, ChevronDownIcon, ClipboardIcon, ClipboardListIcon, ClockIcon, DollarSignIcon, ExternalLinkIcon, FilmIcon, GlobeIcon, LinkIcon, Loader2Icon, MousePointerClickIcon, PlayIcon, ShoppingCartIcon, TrendingUpIcon, RouteIcon } from "lucide-react";
 import { parseAsStringLiteral, useQueryState } from "nuqs";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@coursebuilder/ui";
 
@@ -684,6 +684,88 @@ function ShortlinksCard({ shortlinks, totalClicks }) {
   }), expanded ? "Show less" : `Show ${shortlinks.length - 10} more`)));
 }
 __name(ShortlinksCard, "ShortlinksCard");
+function fmtPct(v) {
+  return `${v.toFixed(1)}%`;
+}
+__name(fmtPct, "fmtPct");
+function TrafficBreakdownTable({ title, label, rows, getName }) {
+  if (!rows.length)
+    return null;
+  return /* @__PURE__ */ React3.createElement("section", {
+    className: "min-w-0"
+  }, /* @__PURE__ */ React3.createElement("div", {
+    className: "mb-2 flex items-baseline justify-between gap-2"
+  }, /* @__PURE__ */ React3.createElement("h3", {
+    className: "text-sm font-semibold"
+  }, title), /* @__PURE__ */ React3.createElement("span", {
+    className: "text-muted-foreground text-[11px]"
+  }, "Top ", rows.length)), /* @__PURE__ */ React3.createElement("div", {
+    className: "overflow-x-auto rounded-xl border border-border/50"
+  }, /* @__PURE__ */ React3.createElement("table", {
+    className: "w-full min-w-[440px] text-left text-sm"
+  }, /* @__PURE__ */ React3.createElement("thead", {
+    className: "bg-muted/30 text-muted-foreground text-[11px] uppercase tracking-wide"
+  }, /* @__PURE__ */ React3.createElement("tr", null, /* @__PURE__ */ React3.createElement("th", {
+    className: "px-3 py-2 font-medium"
+  }, label), /* @__PURE__ */ React3.createElement("th", {
+    className: "px-3 py-2 text-right font-medium"
+  }, "Sessions"), /* @__PURE__ */ React3.createElement("th", {
+    className: "px-3 py-2 text-right font-medium"
+  }, "Users"), /* @__PURE__ */ React3.createElement("th", {
+    className: "px-3 py-2 text-right font-medium"
+  }, "In rows"), /* @__PURE__ */ React3.createElement("th", {
+    className: "px-3 py-2 text-right font-medium"
+  }, "Of traffic"))), /* @__PURE__ */ React3.createElement("tbody", null, rows.map((row) => /* @__PURE__ */ React3.createElement("tr", {
+    key: getName(row),
+    className: "border-t border-border/40 tabular-nums"
+  }, /* @__PURE__ */ React3.createElement("td", {
+    className: "max-w-[220px] truncate px-3 py-2 font-medium"
+  }, getName(row)), /* @__PURE__ */ React3.createElement("td", {
+    className: "px-3 py-2 text-right"
+  }, row.sessions.toLocaleString()), /* @__PURE__ */ React3.createElement("td", {
+    className: "px-3 py-2 text-right"
+  }, row.users.toLocaleString()), /* @__PURE__ */ React3.createElement("td", {
+    className: "px-3 py-2 text-right"
+  }, fmtPct(row.sessionPercent)), /* @__PURE__ */ React3.createElement("td", {
+    className: "px-3 py-2 text-right"
+  }, fmtPct(row.trafficSessionPercent))))))));
+}
+__name(TrafficBreakdownTable, "TrafficBreakdownTable");
+function TrafficBreakdownsCard({ traffic }) {
+  const deviceCategories = traffic.deviceCategories ?? [];
+  const operatingSystems = traffic.operatingSystems ?? [];
+  const screenResolutions = traffic.screenResolutions ?? [];
+  if (deviceCategories.length === 0 && operatingSystems.length === 0 && screenResolutions.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ React3.createElement(Card, null, /* @__PURE__ */ React3.createElement(CardHeader, null, /* @__PURE__ */ React3.createElement("div", {
+    className: "flex items-center gap-2.5"
+  }, /* @__PURE__ */ React3.createElement(GlobeIcon, {
+    className: "text-muted-foreground h-4 w-4"
+  }), /* @__PURE__ */ React3.createElement("div", null, /* @__PURE__ */ React3.createElement(CardTitle, {
+    className: "text-sm font-semibold"
+  }, "Traffic Details"), /* @__PURE__ */ React3.createElement(CardDescription, {
+    className: "text-[11px]"
+  }, "Device, OS, and screen share. In rows is share inside the table. Of traffic is share of total sessions.")))), /* @__PURE__ */ React3.createElement(CardContent, null, /* @__PURE__ */ React3.createElement("div", {
+    className: "grid gap-4 xl:grid-cols-3"
+  }, /* @__PURE__ */ React3.createElement(TrafficBreakdownTable, {
+    title: "Device category",
+    label: "Device",
+    rows: deviceCategories,
+    getName: (row) => row.deviceCategory
+  }), /* @__PURE__ */ React3.createElement(TrafficBreakdownTable, {
+    title: "Operating systems",
+    label: "OS",
+    rows: operatingSystems.slice(0, 10),
+    getName: (row) => row.operatingSystem
+  }), /* @__PURE__ */ React3.createElement(TrafficBreakdownTable, {
+    title: "Screen resolutions",
+    label: "Resolution",
+    rows: screenResolutions.slice(0, 10),
+    getName: (row) => row.screenResolution
+  }))));
+}
+__name(TrafficBreakdownsCard, "TrafficBreakdownsCard");
 var RANGES = [
   {
     value: "24h",
@@ -731,6 +813,7 @@ function OmnibusDashboard({ data, initialRange, appName, surveyDrilldownHref })
   const hasTraffic = data.traffic != null;
   const hasSurveys = data.surveySegments != null && data.surveySegments.length > 0;
   const hasSurveyCorrelation = data.surveyCorrelation != null;
+  const hasValuePaths = data.valuePaths != null && data.valuePaths.contacts > 0;
   const hasShortlinks = data.shortlinks.length > 0;
   return /* @__PURE__ */ React3.createElement("div", {
     className: "flex flex-col gap-5 lg:gap-7"
@@ -742,7 +825,7 @@ function OmnibusDashboard({ data, initialRange, appName, surveyDrilldownHref })
     className: "text-pretty text-xl font-bold tracking-tight sm:text-2xl"
   }, "Analytics"), /* @__PURE__ */ React3.createElement("p", {
     className: "text-muted-foreground truncate text-[13px]"
-  }, "Revenue \xB7 Attribution \xB7 Video \xB7 Traffic \xB7 Surveys \u2014 ", rangeLabel)), /* @__PURE__ */ React3.createElement("div", {
+  }, "Revenue \xB7 Attribution \xB7 Video \xB7 Traffic \xB7 Surveys, ", rangeLabel)), /* @__PURE__ */ React3.createElement("div", {
     className: "flex shrink-0 items-center gap-2"
   }, isPending && /* @__PURE__ */ React3.createElement("span", {
     className: "text-muted-foreground animate-pulse text-xs"
@@ -787,12 +870,19 @@ function OmnibusDashboard({ data, initialRange, appName, surveyDrilldownHref })
     value: fmtK(totalClicks),
     sub: `${data.shortlinks.length} active \xB7 ${signupCount} signups`,
     icon: MousePointerClickIcon
+  }), hasValuePaths && /* @__PURE__ */ React3.createElement(Stat, {
+    label: "Value Paths",
+    value: `${data.valuePaths.terminalParticipants}/${data.valuePaths.contacts}`,
+    sub: `${data.valuePaths.answerEvents} answers \xB7 ${data.valuePaths.dripEvents} drips`,
+    icon: RouteIcon
   }), hasSurveys && /* @__PURE__ */ React3.createElement(Stat, {
     label: "Surveys",
     value: `${data.surveySegments.length}`,
     sub: `${data.surveySegments.reduce((s, q) => s + q.responses, 0).toLocaleString()} responses`,
     icon: ClipboardListIcon
-  })), hasMux && data.mux.topVideos.length > 0 && /* @__PURE__ */ React3.createElement(TopVideosCard, {
+  })), hasTraffic && /* @__PURE__ */ React3.createElement(TrafficBreakdownsCard, {
+    traffic: data.traffic
+  }), hasMux && data.mux.topVideos.length > 0 && /* @__PURE__ */ React3.createElement(TopVideosCard, {
     label: "Site Videos",
     subtitle: `${fmtWatchMs(data.mux.overview.totalPlayingTimeMs)} watch time \xB7 ${fmtK(data.mux.overview.uniqueViewers)} viewers`,
     icon: FilmIcon,
@@ -834,7 +924,7 @@ function OmnibusDashboard({ data, initialRange, appName, surveyDrilldownHref })
     className: "text-muted-foreground block text-[11px] font-medium uppercase tracking-wider"
   }, "Conversion Rate"), /* @__PURE__ */ React3.createElement("span", {
     className: "text-foreground mt-1 block text-xl font-bold tabular-nums"
-  }, signupCount > 0 ? `${(purchaseAttrCount / signupCount * 100).toFixed(1)}%` : "\u2014"))))), hasAttributionCoverage && data.attributionCoverage.totalPurchases > 0 && /* @__PURE__ */ React3.createElement(Card, null, /* @__PURE__ */ React3.createElement(CardHeader, {
+  }, signupCount > 0 ? `${(purchaseAttrCount / signupCount * 100).toFixed(1)}%` : "-"))))), hasAttributionCoverage && data.attributionCoverage.totalPurchases > 0 && /* @__PURE__ */ React3.createElement(Card, null, /* @__PURE__ */ React3.createElement(CardHeader, {
     className: "pb-3"
   }, /* @__PURE__ */ React3.createElement("div", {
     className: "flex items-center gap-2.5"
@@ -866,7 +956,109 @@ function OmnibusDashboard({ data, initialRange, appName, surveyDrilldownHref })
     className: "text-muted-foreground block text-[11px] font-medium uppercase tracking-wider"
   }, "Total Purchases"), /* @__PURE__ */ React3.createElement("span", {
     className: "text-foreground mt-1 block text-xl font-bold tabular-nums"
-  }, data.attributionCoverage.totalPurchases.toLocaleString()))))), hasSurveys && /* @__PURE__ */ React3.createElement(Card, null, /* @__PURE__ */ React3.createElement(CardHeader, {
+  }, data.attributionCoverage.totalPurchases.toLocaleString()))), data.attributionCoverage.quality && /* @__PURE__ */ React3.createElement("div", {
+    className: "mt-4 grid gap-2 sm:grid-cols-4"
+  }, [
+    "strong",
+    "medium",
+    "weak",
+    "unknown"
+  ].map((lane) => {
+    const item = data.attributionCoverage.quality[lane];
+    return /* @__PURE__ */ React3.createElement("div", {
+      key: lane,
+      className: "rounded-lg border border-border/40 p-3"
+    }, /* @__PURE__ */ React3.createElement("span", {
+      className: "text-muted-foreground block text-[11px] font-medium uppercase tracking-wider"
+    }, lane), /* @__PURE__ */ React3.createElement("span", {
+      className: "text-foreground mt-1 block text-lg font-bold tabular-nums"
+    }, fmt$(item.revenue)), /* @__PURE__ */ React3.createElement("span", {
+      className: "text-muted-foreground text-[11px]"
+    }, item.purchases.toLocaleString(), " purchases \xB7", " ", (item.revenuePercent * 100).toFixed(1), "%"));
+  })))), hasValuePaths && /* @__PURE__ */ React3.createElement(Card, null, /* @__PURE__ */ React3.createElement(CardHeader, {
+    className: "pb-3"
+  }, /* @__PURE__ */ React3.createElement("div", {
+    className: "flex items-center gap-2.5"
+  }, /* @__PURE__ */ React3.createElement("div", {
+    className: "flex h-7 w-7 items-center justify-center rounded-lg bg-sky-500/10 text-sky-500"
+  }, /* @__PURE__ */ React3.createElement(RouteIcon, {
+    className: "h-3.5 w-3.5"
+  })), /* @__PURE__ */ React3.createElement("div", null, /* @__PURE__ */ React3.createElement(CardTitle, {
+    className: "text-sm font-semibold"
+  }, "Value Paths"), /* @__PURE__ */ React3.createElement(CardDescription, {
+    className: "text-[11px]"
+  }, "Progression, answer clicks, drip fallback, and terminal completion")))), /* @__PURE__ */ React3.createElement(CardContent, {
+    className: "space-y-5"
+  }, (() => {
+    const vp = data.valuePaths;
+    const completionRate = vp.contacts > 0 ? vp.terminalParticipants / vp.contacts * 100 : 0;
+    const clickRate = vp.contacts > 0 ? vp.participantsWithAnswerClicks / vp.contacts * 100 : 0;
+    return /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement("div", {
+      className: "grid grid-cols-2 gap-2 sm:grid-cols-5"
+    }, /* @__PURE__ */ React3.createElement("div", {
+      className: "bg-muted/20 rounded-lg p-3"
+    }, /* @__PURE__ */ React3.createElement("span", {
+      className: "text-muted-foreground block text-[11px] font-medium uppercase tracking-wider"
+    }, "Contacts"), /* @__PURE__ */ React3.createElement("span", {
+      className: "text-foreground mt-1 block text-lg font-bold tabular-nums"
+    }, vp.contacts.toLocaleString())), /* @__PURE__ */ React3.createElement("div", {
+      className: "bg-muted/20 rounded-lg p-3"
+    }, /* @__PURE__ */ React3.createElement("span", {
+      className: "text-muted-foreground block text-[11px] font-medium uppercase tracking-wider"
+    }, "Terminal"), /* @__PURE__ */ React3.createElement("span", {
+      className: "text-foreground mt-1 block text-lg font-bold tabular-nums"
+    }, vp.terminalParticipants.toLocaleString()), /* @__PURE__ */ React3.createElement("span", {
+      className: "text-muted-foreground/70 text-[10px]"
+    }, completionRate.toFixed(0), "% completed")), /* @__PURE__ */ React3.createElement("div", {
+      className: "bg-muted/20 rounded-lg p-3"
+    }, /* @__PURE__ */ React3.createElement("span", {
+      className: "text-muted-foreground block text-[11px] font-medium uppercase tracking-wider"
+    }, "Answered"), /* @__PURE__ */ React3.createElement("span", {
+      className: "text-foreground mt-1 block text-lg font-bold tabular-nums"
+    }, vp.participantsWithAnswerClicks.toLocaleString()), /* @__PURE__ */ React3.createElement("span", {
+      className: "text-muted-foreground/70 text-[10px]"
+    }, clickRate.toFixed(0), "% clicked")), /* @__PURE__ */ React3.createElement("div", {
+      className: "bg-muted/20 rounded-lg p-3"
+    }, /* @__PURE__ */ React3.createElement("span", {
+      className: "text-muted-foreground block text-[11px] font-medium uppercase tracking-wider"
+    }, "Drips"), /* @__PURE__ */ React3.createElement("span", {
+      className: "text-foreground mt-1 block text-lg font-bold tabular-nums"
+    }, vp.dripEvents.toLocaleString())), /* @__PURE__ */ React3.createElement("div", {
+      className: "bg-muted/20 rounded-lg p-3"
+    }, /* @__PURE__ */ React3.createElement("span", {
+      className: "text-muted-foreground block text-[11px] font-medium uppercase tracking-wider"
+    }, "Blocked"), /* @__PURE__ */ React3.createElement("span", {
+      className: "text-foreground mt-1 block text-lg font-bold tabular-nums"
+    }, vp.blockedIntents.toLocaleString()))), vp.answerOptions.length > 0 && /* @__PURE__ */ React3.createElement("div", {
+      className: "space-y-2"
+    }, /* @__PURE__ */ React3.createElement("p", {
+      className: "text-muted-foreground text-[11px]"
+    }, "Top answer choices by captured answer event"), /* @__PURE__ */ React3.createElement("div", {
+      className: "space-y-1.5"
+    }, vp.answerOptions.slice(0, 8).map((answer) => {
+      const pct = vp.answerEvents > 0 ? answer.count / vp.answerEvents * 100 : 0;
+      return /* @__PURE__ */ React3.createElement("div", {
+        key: answer.key,
+        className: "flex items-center gap-2.5"
+      }, /* @__PURE__ */ React3.createElement("span", {
+        className: "text-muted-foreground w-[140px] shrink-0 truncate text-right text-[12px]",
+        title: answer.key
+      }, answer.optionValue), /* @__PURE__ */ React3.createElement("div", {
+        className: "bg-muted/50 relative h-5 flex-1 overflow-hidden rounded"
+      }, /* @__PURE__ */ React3.createElement("div", {
+        className: "absolute inset-y-0 left-0 rounded bg-sky-500/20",
+        style: {
+          width: `${Math.max(pct, 1)}%`
+        }
+      }), /* @__PURE__ */ React3.createElement("div", {
+        className: "relative flex h-full items-center px-2"
+      }, /* @__PURE__ */ React3.createElement("span", {
+        className: "text-foreground/70 text-[11px] font-medium tabular-nums"
+      }, pct.toFixed(0), "%"))), /* @__PURE__ */ React3.createElement("span", {
+        className: "text-muted-foreground w-10 shrink-0 text-right text-[11px] tabular-nums"
+      }, answer.count.toLocaleString()));
+    }))));
+  })())), hasSurveys && /* @__PURE__ */ React3.createElement(Card, null, /* @__PURE__ */ React3.createElement(CardHeader, {
     className: "pb-3"
   }, /* @__PURE__ */ React3.createElement("div", {
     className: "flex items-center justify-between"
@@ -1238,13 +1430,13 @@ function OmnibusDashboard({ data, initialRange, appName, surveyDrilldownHref })
     className: `py-2.5 pr-4 text-right text-sm font-semibold tabular-nums ${p.totalAmount > 0 ? "text-emerald-600 dark:text-emerald-400" : "text-muted-foreground"}`
   }, p.totalAmount > 0 ? fmt$(p.totalAmount) : "Free"), /* @__PURE__ */ React3.createElement("td", {
     className: "py-2.5 pr-4 text-right text-sm tabular-nums"
-  }, p.seats ?? "\u2014"), /* @__PURE__ */ React3.createElement("td", {
+  }, p.seats ?? "-"), /* @__PURE__ */ React3.createElement("td", {
     className: "max-w-[200px] truncate py-2.5 pr-4 text-sm font-medium"
   }, p.productName), /* @__PURE__ */ React3.createElement("td", {
     className: "text-muted-foreground hidden max-w-[150px] truncate py-2.5 pr-4 text-sm sm:table-cell"
-  }, p.userName ?? p.userEmail ?? "\u2014"), /* @__PURE__ */ React3.createElement("td", {
+  }, p.userName ?? p.userEmail ?? "-"), /* @__PURE__ */ React3.createElement("td", {
     className: "text-muted-foreground hidden py-2.5 pr-4 text-sm sm:table-cell"
-  }, p.country ? `${countryFlag2(p.country)} ${p.country}` : "\u2014"), /* @__PURE__ */ React3.createElement("td", {
+  }, p.country ? `${countryFlag2(p.country)} ${p.country}` : "-"), /* @__PURE__ */ React3.createElement("td", {
     className: "text-muted-foreground whitespace-nowrap py-2.5 pr-4 text-sm"
   }, fmtAgo(p.createdAt)))))))))));
 }