lytx 0.3.0

package/src/app/components/charts/EventFunnel.tsx

@@ -0,0 +1,45 @@
+import { useTheme } from "@/app/providers/ThemeProvider";
+import { chartColors, createChartTheme } from "@/app/utils/chartThemes";
+import { getEventTypesDistribution, TableComponentProps } from "@db/tranformReports";
+import DashboardCard from "../DashboardCard";
+import { ResponsiveFunnel } from "@nivo/funnel";
+
+export const EventTypesFunnel = ({
+  tableId,
+  tableData,
+  title,
+  labelsMap,
+}: TableComponentProps & { labelsMap?: Map<string, string> }) => {
+  const displayTitle = title || tableData?.title || "Event Types";
+  const rows = tableData?.rows || [];
+  const { theme } = useTheme();
+  const chartTheme = createChartTheme(theme === "dark");
+  const funnelData = getEventTypesDistribution(rows, labelsMap);
+
+  const isEmpty = !tableData || rows.length === 0 || funnelData.length === 0;
+
+  return (
+    <DashboardCard id={tableId} title={displayTitle} className="mb-6" empty={isEmpty}>
+      <div className="h-90 w-full">
+        <ResponsiveFunnel
+          data={funnelData}
+          margin={{ top: 20, right: 20, bottom: 20, left: 20 }}
+          valueFormat={(v) => `${v}%`}
+          colors={chartColors.funnel}
+          interpolation="smooth"
+          shapeBlending={0.9}
+          borderWidth={10}
+          borderOpacity={0.6}
+          labelColor={theme === "dark" ? "#ffffff" : "#111827"}
+          beforeSeparatorLength={90}
+          beforeSeparatorOffset={16}
+          afterSeparatorLength={90}
+          afterSeparatorOffset={16}
+          currentPartSizeExtension={8}
+          currentBorderWidth={20}
+          theme={chartTheme}
+        />
+      </div>
+    </DashboardCard>
+  );
+};

package/src/app/components/charts/EventSummary.tsx

@@ -0,0 +1,194 @@
+"use client";
+
+import { DashboardCard } from "@components/DashboardCard";
+import { Link } from "@components/ui/Link";
+import {
+  DashboardResponseData,
+} from "@db/tranformReports";
+type EventSummaryData = NonNullable<DashboardResponseData["EventSummary"]>;
+type EventSummaryRow = {
+  event: string | null;
+  count: number;
+  firstSeen: string | null;
+  lastSeen: string | null;
+};
+type EventSummaryRowWithPercent = EventSummaryRow & { share: number };
+const formatEventShare = (share: number) => {
+  if (!Number.isFinite(share) || share <= 0) return "0%";
+  if (share < 1) return "<1%";
+  return `${share.toFixed(0)}%`;
+};
+const formatEventDate = (value: string | null, timezone: string) => {
+  if (!value) return "—";
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return "—";
+  try {
+    return date.toLocaleString(undefined, {
+      timeZone: timezone,
+      month: "numeric",
+      day: "numeric",
+      year: "numeric",
+      hour: "numeric",
+      minute: "2-digit",
+    });
+  } catch {
+    return date.toLocaleString(undefined, {
+      month: "numeric",
+      day: "numeric",
+      year: "numeric",
+      hour: "numeric",
+      minute: "2-digit",
+    });
+  }
+};
+
+const getAutocaptureDisplayName = (eventName: string): string => {
+  if (!eventName.startsWith("$ac_")) return eventName;
+
+  const parts = eventName.split("_");
+  const elementText = parts[2] || "unnamed";
+  const elementId = parts[3] || null;
+
+  return elementId ? `${elementText}_${elementId}` : elementText;
+};
+export const EventSummaryTable = ({
+  data,
+  isLoading,
+  timezone,
+  labelsMap,
+}: {
+  data: EventSummaryData | null | undefined;
+  isLoading: boolean;
+  timezone: string;
+  labelsMap?: Map<string, string>;
+}) => {
+  const summary = data?.summary ?? [];
+  const totalEvents = data?.totalEvents ?? 0;
+  const rows = summary.map((row): EventSummaryRowWithPercent => ({
+    ...row,
+    share: totalEvents > 0 ? (row.count / totalEvents) * 100 : 0,
+  }));
+
+  const eventCountSummary = (
+    <div className="flex items-center gap-3 text-sm text-(--theme-text-secondary)">
+      <span>
+        <span className="font-semibold text-(--theme-text-primary)">
+          {totalEvents.toLocaleString()}
+        </span>{" "}
+        total events •{" "}
+        <span className="font-semibold text-(--theme-text-primary)">
+          {(data?.totalEventTypes ?? 0).toLocaleString()}
+        </span>{" "}
+        event types
+      </span>
+      <Link
+        href="/dashboard/events"
+        className="inline-flex items-center gap-1 text-xs font-medium text-primary hover:underline"
+      >
+        View all
+        <svg
+          width="14"
+          height="14"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          aria-hidden="true"
+        >
+          <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
+          <polyline points="15 3 21 3 21 9" />
+          <line x1="10" y1="14" x2="21" y2="3" />
+        </svg>
+      </Link>
+    </div>
+  );
+
+  return (
+    <DashboardCard
+      title="Events Overview"
+      titleAs="h3"
+      subtitle="All captured events with rollups by name."
+      actions={eventCountSummary}
+      isUpdating={isLoading}
+      updatingLabel="Updating events..."
+      empty={rows.length === 0}
+      emptyState={
+        <div className="rounded-md border border-(--theme-border-primary) bg-(--theme-bg-secondary) p-6 text-center">
+          <p className="text-sm text-(--theme-text-secondary)">
+            No events captured for this date range.
+          </p>
+        </div>
+      }
+    >
+      <div className="relative w-full">
+        <div className="overflow-y-auto overflow-x-auto scrollbar-none max-h-80">
+          <table className="min-w-180 w-full divide-y divide-(--theme-border-primary)">
+            <thead className="bg-(--theme-bg-secondary) sticky top-0 z-10">
+              <tr>
+                <th
+                  scope="col"
+                  className="px-3 sm:px-6 py-3 text-left text-xs font-medium text-(--theme-text-secondary) uppercase tracking-wider"
+                >
+                  Event
+                </th>
+                <th
+                  scope="col"
+                  className="px-3 sm:px-6 py-3 text-left text-xs font-medium text-(--theme-text-secondary) uppercase tracking-wider"
+                >
+                  Count
+                </th>
+                <th
+                  scope="col"
+                  className="px-3 sm:px-6 py-3 text-left text-xs font-medium text-(--theme-text-secondary) uppercase tracking-wider"
+                >
+                  Share
+                </th>
+                <th
+                  scope="col"
+                  className="px-3 sm:px-6 py-3 text-left text-xs font-medium text-(--theme-text-secondary) uppercase tracking-wider"
+                >
+                  First Seen
+                </th>
+                <th
+                  scope="col"
+                  className="px-3 sm:px-6 py-3 text-left text-xs font-medium text-(--theme-text-secondary) uppercase tracking-wider"
+                >
+                  Last Seen
+                </th>
+              </tr>
+            </thead>
+            <tbody className="bg-(--theme-card-bg) divide-y divide-(--theme-border-primary)">
+              {rows.map((row) => (
+                <tr
+                  key={`${row.event ?? "unknown"}-${row.firstSeen ?? ""}-${row.lastSeen ?? ""}`}
+                  className="hover:bg-(--theme-bg-secondary) transition-colors"
+                >
+                  <td className="px-3 sm:px-6 py-4 text-sm text-(--theme-text-primary)">
+                    {row.event
+                      ? (labelsMap?.get(row.event) || getAutocaptureDisplayName(row.event))
+                      : "Unknown"}
+                  </td>
+                  <td className="px-3 sm:px-6 py-4 text-sm text-(--theme-text-primary)">
+                    {row.count.toLocaleString()}
+                  </td>
+                  <td className="px-3 sm:px-6 py-4 text-sm text-(--theme-text-primary)">
+                    {formatEventShare(row.share)}
+                  </td>
+                  <td className="px-3 sm:px-6 py-4 text-sm text-(--theme-text-primary)">
+                    {formatEventDate(row.firstSeen, timezone)}
+                  </td>
+                  <td className="px-3 sm:px-6 py-4 text-sm text-(--theme-text-primary)">
+                    {formatEventDate(row.lastSeen, timezone)}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+        <div className="pointer-events-none absolute inset-y-0 right-0 w-6 bg-linear-to-l from-(--theme-card-bg) to-transparent sm:hidden" />
+      </div>
+    </DashboardCard>
+  );
+}

package/src/app/components/charts/SankeyFlows.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import { ResponsiveSankey } from "@nivo/sankey";
+import { DashboardCard } from "@components/DashboardCard";
+import { useTheme } from "@/app/providers/ThemeProvider";
+
+import { createChartTheme, chartColors } from "@/app/utils/chartThemes";
+import { useMediaQuery } from "@/app/utils/media";
+import {
+  type EventTypeDistributionItem,
+  type TableComponentProps,
+  getEventTypesDistribution,
+} from "@db/tranformReports";
+
+type SankeyFlowsProps = TableComponentProps & { labelsMap?: Map<string, string> };
+
+
+export const SankeyFlows = ({
+  tableId,
+  tableData,
+  title,
+  labelsMap,
+}: SankeyFlowsProps) => {
+  const displayTitle = title || "Event Types Sankey";
+  const rows = tableData?.rows || [];
+  const { theme } = useTheme();
+  const chartTheme = createChartTheme(theme === "dark");
+  const isSmallScreen = useMediaQuery("(max-width: 640px)");
+  const sankeyItems = getEventTypesDistribution(rows, labelsMap);
+
+  const nodes = [{ id: "All Events" }, ...sankeyItems.map((item: EventTypeDistributionItem) => ({ id: item.label }))];
+  const links = sankeyItems.map((item: EventTypeDistributionItem) => ({
+    source: "All Events",
+    target: item.label,
+    value: item.value,
+  }));
+
+  const isEmpty = !tableData || rows.length === 0 || sankeyItems.length === 0;
+
+  return (
+    <DashboardCard id={tableId} title={displayTitle} className="mb-6" empty={isEmpty}>
+      <div className="h-90 w-full">
+        <ResponsiveSankey
+          data={{ nodes, links }}
+          margin={
+            isSmallScreen
+              ? { top: 20, right: 100, bottom: 20, left: 76 }
+              : { top: 20, right: 180, bottom: 20, left: 120 }
+          }
+          align="justify"
+          colors={chartColors.funnel}
+          nodeOpacity={1}
+          nodeThickness={isSmallScreen ? 14 : 18}
+          nodeSpacing={isSmallScreen ? 18 : 24}
+          nodeBorderWidth={1}
+          nodeBorderColor={{ from: "color", modifiers: [["darker", 0.3]] }}
+          linkOpacity={0.45}
+          linkHoverOthersOpacity={0.1}
+          enableLinkGradient={true}
+          labelPosition="outside"
+          labelOrientation="horizontal"
+          labelPadding={12}
+          labelTextColor={theme === "dark" ? "#ffffff" : "#111827"}
+          valueFormat={(v) => `${v}%`}
+          theme={chartTheme}
+        />
+      </div>
+    </DashboardCard>
+  );
+};
+
+export default SankeyFlows;

package/src/app/components/marketing/CheckIcon.tsx

@@ -0,0 +1,16 @@
+export function CheckIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+    >
+      <path
+        fillRule="evenodd"
+        d="M19.916 4.626a.75.75 0 01.208 1.04l-9 13.5a.75.75 0 01-1.154.114l-6-6a.75.75 0 011.06-1.06l5.353 5.353 8.493-12.739a.75.75 0 011.04-.208z"
+        clipRule="evenodd"
+      />
+    </svg>
+  );
+}

package/src/app/components/marketing/MarketingLayout.tsx

@@ -0,0 +1,23 @@
+import { MarketingFooter } from "@/app/components/MarketingFooter";
+import { MarketingNav } from "@/app/components/MarketingNav";
+import { ThemeProvider } from "@/app/providers/ThemeProvider";
+
+export function MarketingLayout({
+  children,
+  navLinks,
+  navCta,
+}: {
+  children: React.ReactNode;
+  navLinks?: { label: string; href: string }[];
+  navCta?: { label: string; href: string };
+}) {
+  return (
+    <ThemeProvider>
+      <div className="min-h-screen bg-slate-50 text-slate-900 font-sans selection:bg-amber-100 selection:text-amber-900 dark:bg-black dark:text-slate-100">
+        <MarketingNav links={navLinks} cta={navCta} />
+        {children}
+        <MarketingFooter />
+      </div>
+    </ThemeProvider>
+  );
+}

package/src/app/components/marketing/SectionHeading.tsx

@@ -0,0 +1,35 @@
+export function SectionHeading({
+  badge,
+  title,
+  subtitle,
+  align = "center",
+  as: Tag = "h2",
+}: {
+  badge?: string;
+  title: string;
+  subtitle?: string;
+  align?: "left" | "center";
+  as?: "h1" | "h2";
+}) {
+  return (
+    <div className={`mb-12 ${align === "center" ? "text-center" : "text-left"}`}>
+      {badge && (
+        <span className="inline-block py-1 px-3 rounded-full bg-amber-50 text-amber-700 text-xs font-semibold uppercase tracking-wider mb-4 border border-amber-100 dark:bg-amber-900/30 dark:text-amber-300 dark:border-amber-800">
+          {badge}
+        </span>
+      )}
+      <Tag
+        className={`font-bold text-slate-900 dark:text-white mb-4 tracking-tight ${
+          Tag === "h1" ? "text-4xl md:text-5xl" : "text-3xl md:text-4xl"
+        }`}
+      >
+        {title}
+      </Tag>
+      {subtitle && (
+        <p className="text-lg text-slate-600 dark:text-slate-400 max-w-[46rem] mx-auto leading-relaxed">
+          {subtitle}
+        </p>
+      )}
+    </div>
+  );
+}