@carlonicora/nextjs-jsonapi 3.24.2 → 3.25.0

package/src/features/analytics/components/AnalyticsAdminTiles.tsx

@@ -0,0 +1,191 @@
+"use client";
+
+import { ArrowDownIcon, ArrowUpIcon } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { MicroLabel } from "../../../components";
+import { Card, CardContent } from "../../../shadcnui";
+import { cn } from "../../../utils";
+import { useUsageFormatters } from "../../tokenusage/lib/formatters";
+import { percentageDelta } from "../../tokenusage/lib/metrics";
+import type { AnalyticsSummaryInterface } from "../data/analytics-summary.interface";
+
+type Props = {
+  /** The six summary rows: {public, app, total} × {current, previous}. */
+  summary: AnalyticsSummaryInterface[];
+};
+
+type SummaryMetrics = Pick<
+  AnalyticsSummaryInterface,
+  "visitors" | "sessions" | "pageViews" | "pagesPerSession" | "consentShare"
+>;
+
+const ZERO: SummaryMetrics = { visitors: 0, sessions: 0, pageViews: 0, pagesPerSession: 0, consentShare: 0 };
+
+/**
+ * The KPI header of the administrative analytics page.
+ *
+ * Three lead tiles carry the traffic volumes — visitors, sessions, page views —
+ * each with its delta against the equal-length preceding window. Two supporting
+ * tiles below carry the ratios that give those numbers context.
+ *
+ * The tiles read the `total` row: the backend already applies the section filter
+ * to it, so it is the figure for whatever the filter bar selected. The backend
+ * always returns both windows, which is why no tile has to branch on a missing
+ * row: an absent one is simply zero-filled here.
+ */
+export function AnalyticsAdminTiles({ summary }: Props) {
+  const t = useTranslations();
+  const { decimal } = useUsageFormatters();
+
+  const rowFor = (window: string): SummaryMetrics =>
+    summary.find((r) => r.section === "total" && r.window === window) ?? ZERO;
+
+  const current = rowFor("current");
+  const previous = rowFor("previous");
+
+  const previousLabel = t("analytics.admin.tiles.vs_previous");
+
+  return (
+    <div className="grid gap-3">
+      <div className="grid gap-3 sm:grid-cols-3">
+        <LeadTile
+          testId="analytics-tile-visitors"
+          label={t("analytics.admin.tiles.visitors")}
+          value={decimal(current.visitors, 0)}
+          delta={percentageDelta(current.visitors, previous.visitors)}
+          previousLabel={previousLabel}
+          decimal={decimal}
+        />
+        <LeadTile
+          testId="analytics-tile-sessions"
+          label={t("analytics.admin.tiles.sessions")}
+          value={decimal(current.sessions, 0)}
+          delta={percentageDelta(current.sessions, previous.sessions)}
+          previousLabel={previousLabel}
+          decimal={decimal}
+        />
+        <LeadTile
+          testId="analytics-tile-page-views"
+          label={t("analytics.admin.tiles.page_views")}
+          value={decimal(current.pageViews, 0)}
+          delta={percentageDelta(current.pageViews, previous.pageViews)}
+          previousLabel={previousLabel}
+          decimal={decimal}
+        />
+      </div>
+
+      <div className="grid gap-3 sm:grid-cols-2">
+        <SupportingTile
+          testId="analytics-tile-pages-per-session"
+          label={t("analytics.admin.tiles.pages_per_session")}
+          value={decimal(current.pagesPerSession, 1)}
+          delta={percentageDelta(current.pagesPerSession, previous.pagesPerSession)}
+          decimal={decimal}
+        />
+        <SupportingTile
+          testId="analytics-tile-consent-share"
+          label={t("analytics.admin.tiles.consent_share")}
+          // consentShare is a 0..1 ratio on the wire.
+          value={`${decimal(current.consentShare * 100, 0)}%`}
+          decimal={decimal}
+        />
+      </div>
+    </div>
+  );
+}
+
+function LeadTile({
+  testId,
+  label,
+  value,
+  delta,
+  previousLabel,
+  decimal,
+}: {
+  testId: string;
+  label: string;
+  value: string;
+  delta: number | undefined;
+  previousLabel: string;
+  /** Passed down because `Delta` is a plain function, not a component: it cannot call the hook itself. */
+  decimal: (value: number, decimals: number) => string;
+}) {
+  return (
+    <Card data-testid={testId}>
+      <CardContent className="grid gap-1">
+        <MicroLabel>{label}</MicroLabel>
+        <span className="text-primary text-xl font-semibold tabular-nums">{value}</span>
+        <span className="flex items-center gap-1">
+          <Delta testId={`${testId}-delta`} delta={delta} decimal={decimal} />
+          <span className="text-muted-foreground text-xs">{previousLabel}</span>
+        </span>
+      </CardContent>
+    </Card>
+  );
+}
+
+function SupportingTile({
+  testId,
+  label,
+  value,
+  delta,
+  decimal,
+}: {
+  testId: string;
+  label: string;
+  value: string;
+  delta?: number | undefined;
+  /** Passed down because `Delta` is a plain function, not a component: it cannot call the hook itself. */
+  decimal: (value: number, decimals: number) => string;
+}) {
+  return (
+    <Card data-testid={testId} size="sm">
+      <CardContent className="grid gap-1">
+        <MicroLabel>{label}</MicroLabel>
+        <span className="flex items-center gap-2">
+          <span className="text-sm font-medium tabular-nums">{value}</span>
+          {delta !== undefined && <Delta testId={`${testId}-delta`} delta={delta} decimal={decimal} />}
+        </span>
+      </CardContent>
+    </Card>
+  );
+}
+
+/**
+ * The delta slot. An undefined delta means the previous window was zero: an
+ * em dash says "not comparable" where a percentage would say "infinite growth".
+ */
+function Delta({
+  testId,
+  delta,
+  decimal,
+}: {
+  testId: string;
+  delta: number | undefined;
+  decimal: (value: number, decimals: number) => string;
+}) {
+  if (delta === undefined) {
+    return (
+      <span data-testid={testId} className="text-muted-foreground text-xs">
+        —
+      </span>
+    );
+  }
+
+  const increased = delta >= 0;
+  const Icon = increased ? ArrowUpIcon : ArrowDownIcon;
+  const sign = delta > 0 ? "+" : delta < 0 ? "-" : "";
+
+  return (
+    <span
+      data-testid={testId}
+      className={cn(
+        "inline-flex items-center gap-0.5 text-xs tabular-nums",
+        increased ? "text-success" : "text-destructive",
+      )}
+    >
+      <Icon aria-hidden className="size-3" />
+      {`${sign}${decimal(Math.abs(delta), 0)}%`}
+    </span>
+  );
+}

package/src/features/analytics/components/AnalyticsBreakdownTable.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { useMemo } from "react";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "../../../shadcnui";
+import { useUsageFormatters } from "../../tokenusage/lib/formatters";
+import type { AnalyticsBreakdownInterface } from "../data/analytics-breakdown.interface";
+import { ANALYTICS_DIMENSIONS, type AnalyticsDimension } from "../data/analytics.types";
+
+type Props = {
+  breakdowns: Record<AnalyticsDimension, AnalyticsBreakdownInterface[]>;
+};
+
+/** The key the repository folds the tail past the limit into. */
+const OTHER_KEY = "other";
+
+/**
+ * Attribution and content breakdowns, one tab per dimension.
+ *
+ * Each tab is the same four-column table — key, visitors, sessions, page views —
+ * sorted by visitors. Sorting is client-side because the whole ranked set is
+ * already in memory, so a round trip would buy nothing. Keys are data, not
+ * vocabulary: `(none)` and the routes are rendered as the backend wrote them;
+ * only the `other` rollup is translated.
+ */
+export function AnalyticsBreakdownTable({ breakdowns }: Props) {
+  const t = useTranslations();
+
+  const labels: Record<AnalyticsDimension, string> = {
+    source: t("analytics.admin.dimensions.source"),
+    medium: t("analytics.admin.dimensions.medium"),
+    campaign: t("analytics.admin.dimensions.campaign"),
+    referrer: t("analytics.admin.dimensions.referrer"),
+    route: t("analytics.admin.dimensions.route"),
+    landing: t("analytics.admin.dimensions.landing"),
+  };
+
+  return (
+    <Tabs defaultValue={ANALYTICS_DIMENSIONS[0]}>
+      <TabsList>
+        {ANALYTICS_DIMENSIONS.map((dimension) => (
+          <TabsTrigger key={dimension} value={dimension}>
+            {labels[dimension]}
+          </TabsTrigger>
+        ))}
+      </TabsList>
+      {ANALYTICS_DIMENSIONS.map((dimension) => (
+        <TabsContent key={dimension} value={dimension}>
+          <BreakdownRows rows={breakdowns[dimension] ?? []} />
+        </TabsContent>
+      ))}
+    </Tabs>
+  );
+}
+
+function BreakdownRows({ rows }: { rows: AnalyticsBreakdownInterface[] }) {
+  const t = useTranslations();
+  const { decimal } = useUsageFormatters();
+
+  const sortedRows = useMemo(() => [...rows].sort((a, b) => b.visitors - a.visitors), [rows]);
+
+  if (sortedRows.length === 0) {
+    return <p className="text-muted-foreground text-sm">{t("analytics.admin.no_data")}</p>;
+  }
+
+  return (
+    // The package's <Table> wraps itself in an `overflow-x-clip` container, which
+    // would swallow the overflow before this scroller ever saw it — hence the
+    // child override. Wide tables must scroll, never widen the page.
+    <div className="overflow-x-auto [&_[data-slot=table-container]]:overflow-x-visible">
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead className="text-xs font-medium">{t("analytics.admin.columns.key")}</TableHead>
+            <TableHead className="text-end text-xs font-medium">{t("analytics.admin.columns.visitors")}</TableHead>
+            <TableHead className="text-end text-xs font-medium">{t("analytics.admin.columns.sessions")}</TableHead>
+            <TableHead className="text-end text-xs font-medium">{t("analytics.admin.columns.page_views")}</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {sortedRows.map((row) => (
+            <TableRow key={row.id} data-testid={`analytics-breakdown-row-${row.id}`}>
+              <TableCell className="text-xs">{row.key === OTHER_KEY ? t("analytics.admin.other") : row.key}</TableCell>
+              <TableCell className="text-end text-xs tabular-nums">{decimal(row.visitors, 0)}</TableCell>
+              <TableCell className="text-end text-xs tabular-nums">{decimal(row.sessions, 0)}</TableCell>
+              <TableCell className="text-end text-xs tabular-nums">{decimal(row.pageViews, 0)}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}

package/src/features/analytics/components/AnalyticsJourneyContainer.tsx

@@ -0,0 +1,246 @@
+"use client";
+
+import { useLocale, useTranslations } from "next-intl";
+import { useEffect, useMemo, useState } from "react";
+import { DetailField, RoundPageContainer } from "../../../components";
+import { SharedProvider } from "../../../contexts";
+import { usePageUrlGenerator } from "../../../hooks";
+import { BreadcrumbItemData } from "../../../interfaces";
+import {
+  Badge,
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "../../../shadcnui";
+import type { AnalyticsPageViewInterface } from "../data/analytics-page-view.interface";
+import type { AnalyticsSessionInterface } from "../data/analytics-session.interface";
+import { AnalyticsAdminService } from "../data/AnalyticsAdminService";
+import { AnalyticsSessionsTable } from "./AnalyticsSessionsTable";
+
+/** Default route of the dashboard the breadcrumb links back to. */
+const ANALYTICS_ADMIN_PAGE_URL = "/administration/analytics";
+
+/**
+ * How far back the visitor's other sessions are looked up: the 13-month raw
+ * retention, which sits inside the API's 400-day maximum range.
+ */
+const OTHER_SESSIONS_WINDOW_DAYS = 395;
+
+type Props = {
+  sessionId: string;
+  /** Route of the dashboard; the journey pages live under `${pageUrl}/sessions`. */
+  pageUrl?: string;
+};
+
+/**
+ * One session, followed page by page.
+ *
+ * The attribution header says where the visitor came from, the page-view table
+ * replays the session in order with the time spent before each step, and the
+ * visitor's other sessions close the page. Unlike the dashboard this page has no
+ * filters, so it fetches on mount without a provider and publishes its own
+ * breadcrumb back to the dashboard.
+ */
+export function AnalyticsJourneyContainer({ sessionId, pageUrl = ANALYTICS_ADMIN_PAGE_URL }: Props) {
+  const t = useTranslations();
+  const locale = useLocale();
+  const generateUrl = usePageUrlGenerator();
+
+  const [session, setSession] = useState<AnalyticsSessionInterface | undefined>(undefined);
+  const [pageViews, setPageViews] = useState<AnalyticsPageViewInterface[]>([]);
+  const [otherSessions, setOtherSessions] = useState<AnalyticsSessionInterface[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    // Out-of-order guard, as in AnalyticsAdminContext: a new sessionId must not
+    // be overwritten by the slower response for the previous one.
+    let cancelled = false;
+
+    setIsLoading(true);
+    setError(null);
+
+    Promise.all([
+      AnalyticsAdminService.getSession({ id: sessionId }),
+      AnalyticsAdminService.getSessionPageViews({ sessionId }),
+    ])
+      .then(async ([nextSession, nextPageViews]) => {
+        if (cancelled) return;
+        setSession(nextSession);
+        setPageViews(nextPageViews ?? []);
+
+        const to = new Date();
+        const from = new Date(to.getTime() - OTHER_SESSIONS_WINDOW_DAYS * 24 * 60 * 60 * 1000);
+        const visitorSessions = await AnalyticsAdminService.getSessions({
+          from: from.toISOString(),
+          to: to.toISOString(),
+          section: "all",
+          visitorId: nextSession.visitorId,
+        });
+        if (cancelled) return;
+        setOtherSessions((visitorSessions ?? []).filter((other) => other.id !== sessionId));
+      })
+      .catch((err) => {
+        if (cancelled) return;
+        console.error("Failed to load the analytics journey:", err);
+        setError(err instanceof Error ? err.message : String(err));
+      })
+      .finally(() => {
+        if (cancelled) return;
+        setIsLoading(false);
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [sessionId]);
+
+  const dateTime = useMemo(
+    () => new Intl.DateTimeFormat(locale, { dateStyle: "short", timeStyle: "medium" }),
+    [locale],
+  );
+
+  /** Time since the previous page view, in the largest whole unit that fits. */
+  const formatGap = (milliseconds: number): string => {
+    const seconds = Math.max(0, Math.round(milliseconds / 1000));
+    if (seconds < 60) return unit(locale, "second", seconds);
+    if (seconds < 3600) return unit(locale, "minute", Math.round(seconds / 60));
+    return unit(locale, "hour", Math.round(seconds / 3600));
+  };
+
+  const breadcrumb: BreadcrumbItemData[] = [
+    { name: t("analytics.admin.title"), href: generateUrl({ page: pageUrl }) },
+    { name: t("analytics.admin.panels.journey") },
+  ];
+
+  const title = { type: t("analytics.admin.panels.journey") };
+
+  const renderBody = () => {
+    if (error) {
+      return (
+        <RoundPageContainer fullWidth forceHeader>
+          <div className="p-4">
+            <Card>
+              <CardContent>
+                <p className="text-destructive text-xs/relaxed">{error}</p>
+              </CardContent>
+            </Card>
+          </div>
+        </RoundPageContainer>
+      );
+    }
+
+    // Loading renders nothing in the body, as on the dashboard.
+    if (isLoading || !session) return <RoundPageContainer fullWidth forceHeader />;
+
+    const source = [session.utmSource ?? session.referrerHost, session.utmMedium, session.utmCampaign]
+      .filter(Boolean)
+      .join(" / ");
+
+    return (
+      <RoundPageContainer fullWidth forceHeader>
+        <div className="flex w-full flex-col gap-4 p-4">
+          <Card data-testid="analytics-journey-attribution">
+            <CardContent className="flex flex-col gap-3">
+              <div className="flex flex-wrap items-center gap-2">
+                {session.user ? (
+                  <span className="flex flex-col">
+                    <span className="text-sm">{session.user.name}</span>
+                    <span className="text-muted-foreground text-xs">{session.user.email}</span>
+                  </span>
+                ) : (
+                  <Badge variant="softGray">{t("analytics.admin.anonymous")}</Badge>
+                )}
+                {session.consented ? (
+                  <Badge variant="softGreen">{t("analytics.admin.consented")}</Badge>
+                ) : (
+                  <Badge variant="softGray">{t("analytics.admin.not_consented")}</Badge>
+                )}
+              </div>
+              <div className="grid gap-3 sm:grid-cols-3">
+                <DetailField label={t("analytics.admin.columns.started")} value={dateTime.format(session.startedAt)} />
+                <DetailField label={t("analytics.admin.columns.source")} value={source} />
+                <DetailField label={t("analytics.admin.columns.landing")} value={session.landingRoute} />
+                <DetailField label={t("analytics.admin.columns.device")} value={session.deviceType} />
+                <DetailField
+                  label={t("analytics.admin.columns.visitor")}
+                  value={<span className="tabular-nums">{session.visitorId}</span>}
+                />
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle>{t("analytics.admin.columns.pages")}</CardTitle>
+            </CardHeader>
+            <CardContent>
+              {pageViews.length === 0 ? (
+                <p className="text-muted-foreground text-sm">{t("analytics.admin.no_data")}</p>
+              ) : (
+                // The package's <Table> wraps itself in an `overflow-x-clip`
+                // container — hence the child override, so wide rows scroll.
+                <div className="overflow-x-auto [&_[data-slot=table-container]]:overflow-x-visible">
+                  <Table>
+                    <TableHeader>
+                      <TableRow>
+                        <TableHead className="text-xs font-medium">{t("analytics.admin.columns.time")}</TableHead>
+                        <TableHead className="text-end text-xs font-medium">
+                          {t("analytics.admin.columns.gap")}
+                        </TableHead>
+                        <TableHead className="text-xs font-medium">{t("analytics.admin.columns.path")}</TableHead>
+                      </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                      {pageViews.map((pageView, index) => {
+                        const previous = index > 0 ? pageViews[index - 1] : undefined;
+                        return (
+                          <TableRow key={pageView.id} data-testid={`analytics-pageview-row-${pageView.id}`}>
+                            <TableCell className="text-xs tabular-nums">
+                              {dateTime.format(pageView.createdAt)}
+                            </TableCell>
+                            <TableCell className="text-end text-xs tabular-nums">
+                              {previous ? formatGap(pageView.createdAt.getTime() - previous.createdAt.getTime()) : "—"}
+                            </TableCell>
+                            <TableCell className="text-xs">{pageView.path}</TableCell>
+                          </TableRow>
+                        );
+                      })}
+                    </TableBody>
+                  </Table>
+                </div>
+              )}
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle>{t("analytics.admin.panels.other_sessions")}</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <AnalyticsSessionsTable
+                rows={otherSessions}
+                sessionPageUrl={`${pageUrl}/sessions`}
+                onLoadMore={() => undefined}
+                hasMore={false}
+              />
+            </CardContent>
+          </Card>
+        </div>
+      </RoundPageContainer>
+    );
+  };
+
+  return <SharedProvider value={{ breadcrumbs: breadcrumb, title }}>{renderBody()}</SharedProvider>;
+}
+
+function unit(locale: string, name: "second" | "minute" | "hour", value: number): string {
+  return new Intl.NumberFormat(locale, { style: "unit", unit: name, unitDisplay: "short" }).format(value);
+}

package/src/features/analytics/components/AnalyticsJourneyPageContainer.tsx

@@ -0,0 +1,14 @@
+"use client";
+
+import { AnalyticsJourneyContainer } from "./AnalyticsJourneyContainer";
+
+type Props = {
+  sessionId: string;
+  /** Route the breadcrumb links back to. Defaults to the container's default. */
+  pageUrl?: string;
+};
+
+/** The single-session journey page as one client component. */
+export function AnalyticsJourneyPageContainer({ sessionId, pageUrl }: Props) {
+  return <AnalyticsJourneyContainer sessionId={sessionId} pageUrl={pageUrl} />;
+}

package/src/features/analytics/components/AnalyticsSessionsTable.tsx

@@ -0,0 +1,107 @@
+"use client";
+
+import { useLocale, useTranslations } from "next-intl";
+import { useMemo } from "react";
+import { usePageUrlGenerator } from "../../../hooks";
+import { Badge, Button, Link, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../../../shadcnui";
+import { useUsageFormatters } from "../../tokenusage/lib/formatters";
+import type { AnalyticsSessionInterface } from "../data/analytics-session.interface";
+
+type Props = {
+  rows: AnalyticsSessionInterface[];
+  /** Base route of the journey page; each row links to `${sessionPageUrl}/${id}`. */
+  sessionPageUrl: string;
+  onLoadMore: () => void;
+  hasMore: boolean;
+};
+
+/** How many trailing characters of the visitor id identify an anonymous visitor. */
+const VISITOR_SUFFIX_LENGTH = 6;
+
+/**
+ * The sessions in the selected window, newest first as the backend returns them.
+ *
+ * Paginated by cursor: the owning context holds the next-page reference and
+ * appends on `onLoadMore`, so this table stays stateless. A session linked to a
+ * signed-in user shows the user; any other shows a short visitor suffix, enough
+ * to tell two anonymous visitors apart without displaying the whole id.
+ */
+export function AnalyticsSessionsTable({ rows, sessionPageUrl, onLoadMore, hasMore }: Props) {
+  const t = useTranslations();
+  const locale = useLocale();
+  const generateUrl = usePageUrlGenerator();
+  const { decimal } = useUsageFormatters();
+
+  const dateTime = useMemo(() => new Intl.DateTimeFormat(locale, { dateStyle: "short", timeStyle: "short" }), [locale]);
+
+  if (rows.length === 0) {
+    return <p className="text-muted-foreground text-sm">{t("analytics.admin.no_data")}</p>;
+  }
+
+  return (
+    <div className="flex flex-col gap-3">
+      {/* The package's <Table> wraps itself in an `overflow-x-clip` container,
+          which would swallow the overflow before this scroller ever saw it —
+          hence the child override. Wide tables must scroll, never widen the page. */}
+      <div className="overflow-x-auto [&_[data-slot=table-container]]:overflow-x-visible">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead className="text-xs font-medium">{t("analytics.admin.columns.started")}</TableHead>
+              <TableHead className="text-xs font-medium">{t("analytics.admin.columns.visitor")}</TableHead>
+              <TableHead className="text-xs font-medium">{t("analytics.admin.columns.source")}</TableHead>
+              <TableHead className="text-xs font-medium">{t("analytics.admin.columns.landing")}</TableHead>
+              <TableHead className="text-end text-xs font-medium">{t("analytics.admin.columns.pages")}</TableHead>
+              <TableHead className="text-xs font-medium">{t("analytics.admin.columns.device")}</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {rows.map((row) => {
+              const source = [row.utmSource ?? row.referrerHost, row.utmMedium].filter(Boolean).join(" / ");
+
+              return (
+                <TableRow key={row.id} data-testid={`analytics-session-row-${row.id}`}>
+                  <TableCell className="text-xs tabular-nums">
+                    <Link
+                      href={generateUrl({ page: sessionPageUrl, id: row.id })}
+                      data-testid={`analytics-session-link-${row.id}`}
+                    >
+                      {dateTime.format(row.startedAt)}
+                    </Link>
+                  </TableCell>
+                  <TableCell className="text-xs">
+                    {row.user ? (
+                      <span className="flex flex-col">
+                        <span>{row.user.name}</span>
+                        <span className="text-muted-foreground text-xs">{row.user.email}</span>
+                      </span>
+                    ) : (
+                      <span className="flex items-center gap-2">
+                        <Badge variant="softGray">{t("analytics.admin.anonymous")}</Badge>
+                        <span className="text-muted-foreground text-xs tabular-nums">
+                          {row.visitorId.slice(-VISITOR_SUFFIX_LENGTH)}
+                        </span>
+                      </span>
+                    )}
+                  </TableCell>
+                  <TableCell className="text-xs">{source}</TableCell>
+                  <TableCell className="text-xs">{row.landingRoute}</TableCell>
+                  <TableCell className="text-end text-xs tabular-nums">{decimal(row.pageViews, 0)}</TableCell>
+                  <TableCell className="text-muted-foreground text-xs">{row.deviceType}</TableCell>
+                </TableRow>
+              );
+            })}
+          </TableBody>
+        </Table>
+      </div>
+
+      {hasMore && (
+        <div className="flex justify-center">
+          <Button type="button" variant="outline" size="sm" onClick={onLoadMore}>
+            {t("analytics.admin.load_more")}
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}