@multiplatform.one/components 6.7.0 → 7.1.0

package/src/views/ReportBuilder.tsx

@@ -1,5 +1,7 @@
 import { BarChart } from "../charts/BarChart";
 import { componentColors } from "../componentColors";
+import { DropdownMenu } from "../DropdownMenu";
+import { useDirection } from "../hooks/useDirection";
 import { AsyncBoundary, AsyncSkeleton, resolveAsyncStatus } from "../layouts/AsyncBoundary";
 import { EmptyState } from "../layouts/page";
 import {
@@ -9,127 +11,83 @@ import {
   formatNumber,
   formatPercent,
   formatTimeOfDay,
+  hairline,
+  keyboardFocusRingProps,
   pressTargetStyle,
   useResolvedKnobs,
+  ensureKeyboardModalityTracking,
+  wasKeyboardFocus,
 } from "@multiplatform.one/theme";
-// House Button (not raw tamagui): carries the DG-LAY-04 / D-02 ≥44px press
-// floor — the raw tamagui Button rendered these toolbar actions at 28px.
 import { Button } from "@multiplatform.one/forms";
-import React, { useState, useMemo, useCallback } from "react";
-import { useTranslation } from "react-i18next";
-import { Card, ScrollView, Text, XStack, YStack, type YStackProps } from "tamagui";
-
-// ============================================================================
-// Types
-// ============================================================================
+import {
+  CaretDownIcon,
+  CaretLeftIcon,
+  CaretRightIcon,
+  CaretUpIcon,
+  ChartBarIcon,
+  DownloadSimpleIcon,
+} from "@phosphor-icons/react";
+import { useHotkey } from "@tanstack/react-hotkeys";
+import React, { useState, useMemo, useCallback, useId, useRef } from "react";
+import { useTranslation } from "../shared/i18n";
+import { ScrollView, Text, XStack, YStack, type YStackProps } from "tamagui";
+
+const AGGREGATIONS = ["count", "sum", "avg", "min", "max"] as const;
 
-/**
- * A column definition for the report builder.
- */
 export interface ReportColumn {
-  /** Field name / accessor key */
   fieldname: string;
-  /** Display label */
   label: string;
-  /** Field type (e.g. 'Data', 'Int', 'Currency') */
   fieldtype: string;
-  /** Whether this column is enabled by default */
   enabled: boolean;
 }
 
-/**
- * Group-by configuration with aggregation.
- */
 export interface GroupByConfig {
-  /** Field to group by */
   field: string;
-  /** Aggregation function */
-  aggregation: "count" | "sum" | "avg" | "min" | "max";
-  /** Field to aggregate (for sum/avg/min/max) */
+  aggregation: (typeof AGGREGATIONS)[number];
   aggregationField?: string;
 }
 
-/**
- * Props for the generic ReportBuilder component.
- */
 export interface ReportBuilderProps extends Omit<YStackProps, "children"> {
-  /** Column definitions */
   columns: ReportColumn[];
-  /** Data rows */
   data: Record<string, unknown>[];
-  /** Initial or active group-by configuration */
   groupBy?: GroupByConfig;
-  /** Called when group-by changes */
   onGroupByChange?: (config: GroupByConfig | null) => void;
-  /** Called when columns toggle */
   onColumnsChange?: (enabledFieldnames: string[]) => void;
-  /** Called for data export */
   onExport?: (data: Record<string, unknown>[]) => void;
-  /** Row press handler — rows become interactive when provided */
   onRowPress?: (row: Record<string, unknown>, index: number) => void;
-  /** Show a simple bar chart for grouped data (default: false) */
   showChart?: boolean;
-  /** Whether report rows are loading — renders a table-shaped skeleton (LC-20 / DG-ST-02) */
   isLoading?: boolean;
-  /**
-   * Failed load (DG-ST-01 / Axiom 6). Wins over the empty chrome and hides
-   * the toolbar/chart so counts can't lie (DG-ST-04). Pass a string, Error,
-   * custom node, or `true` for the default error UI.
-   */
   error?: boolean | string | Error | React.ReactNode | null;
-  /** Retry handler for the default error chrome */
   onRetry?: () => void;
-  /**
-   * True when the caller has filters narrowing `data`. Zero rows then render
-   * as "no results" instead of the true-empty chrome (DG-TBL-06 / Axiom 6:
-   * empty ≠ no-results).
-   */
   hasActiveFilters?: boolean;
 }
 
-// ============================================================================
-// Constants
-// ============================================================================
-
 const numericFieldTypes = new Set(["Int", "Float", "Currency", "Percent", "Rating", "Duration"]);
 
-/** Dense report copy rides two steps below the size knob (medium keeps $2). */
 const reportTextSizeMap: Record<string, "$1" | "$2" | "$3"> = {
   $3: "$1",
   $4: "$2",
   $5: "$3",
 };
 
-const aggregationLabels: Record<GroupByConfig["aggregation"], string> = {
-  count: "Count",
-  sum: "Sum",
-  avg: "Average",
-  min: "Min",
-  max: "Max",
-};
-
-// ============================================================================
-// Helpers
-// ============================================================================
+type SortDir = "asc" | "desc";
+type SortState = { field: string; dir: SortDir } | null;
+type FocusItem =
+  | { type: "group"; key: string }
+  | { type: "row"; row: Record<string, unknown>; index: number };
 
 function isNumericFieldType(fieldtype: string): boolean {
   return numericFieldTypes.has(fieldtype);
 }
 
 function formatCellValue(value: unknown, fieldtype: string): string {
-  if (value === null || value === undefined) return "\u2014"; // em dash
+  if (value === null || value === undefined) return "\u2014";
   if (typeof value === "boolean") return value ? "Yes" : "No";
 
   switch (fieldtype) {
     case "Check":
       return value ? "Yes" : "No";
-    // Report cells take the fixed-precision variants of the house number
-    // registers (LC-12 render channel): money keeps its two digits so a
-    // column stays aligned, floats keep report precision, ints stay whole.
     case "Currency":
-      // No symbol travels with a report column, so the money register
-      // renders the amount alone — still the money register, not a
-      // hand-rolled one.
       return formatCurrency(value as number);
     case "Float":
       return formatNumber(value as number, { maximumFractionDigits: 4 });
@@ -139,8 +97,6 @@ function formatCellValue(value: unknown, fieldtype: string): string {
       return formatPercent(value as number, { precision: 1 });
     case "Rating":
       return `${formatNumber(Number(value) * 5, { precision: 1 })} / 5`;
-    // Date-class cells take the house absolute register instead of letting
-    // the wire string ("2026-01-15") reach the reader.
     case "Date":
       return formatAbsoluteDate(value as string);
     case "Datetime":
@@ -152,9 +108,18 @@ function formatCellValue(value: unknown, fieldtype: string): string {
   }
 }
 
-// ============================================================================
-// Sub-components
-// ============================================================================
+function compareValues(a: unknown, b: unknown, fieldtype: string): number {
+  if (a == null && b == null) return 0;
+  if (a == null) return 1;
+  if (b == null) return -1;
+  if (isNumericFieldType(fieldtype)) {
+    return (Number(a) || 0) - (Number(b) || 0);
+  }
+  if (fieldtype === "Date" || fieldtype === "Datetime" || fieldtype === "Time") {
+    return String(a).localeCompare(String(b));
+  }
+  return String(a).localeCompare(String(b), undefined, { numeric: true, sensitivity: "base" });
+}
 
 function SimpleBarChart({
   data,
@@ -166,44 +131,23 @@ function SimpleBarChart({
   const { knobProps } = useResolvedKnobs();
   if (data.length === 0) return null;
 
-  // One measure across group rows = a single series: the universal BarChart
-  // defaults every bar to the theme identity from the canonical chart
-  // palette (LC-27); per-bar hue variation would imply information the data
-  // doesn't carry. The chart is universal (d3 math + react-native-svg), so
-  // the report chart now renders on native too.
   return (
-    <Card
-      size={knobProps.sizeToken}
-      {...{ backgroundColor: componentColors.surface.background }}
+    <YStack
+      {...knobProps.surface}
+      {...knobProps.containerRadius}
       padding="$2"
       overflow="hidden"
     >
       <BarChart data={data} height={height} />
-    </Card>
+    </YStack>
   );
 }
 
-// ============================================================================
-// Main Component
-// ============================================================================
-
 /**
- * Generic report builder component.
- *
- * Accepts columns and data purely through props. Supports column toggling,
- * group-by with aggregation, collapsible groups, optional chart, and export.
- * Uses Tamagui `Card` for panel containers and theme-aware tokens throughout.
- *
- * @example
- * ```tsx
- * <ReportBuilder
- *   columns={columns}
- *   data={data}
- *   groupBy={{ field: 'status', aggregation: 'count' }}
- *   showChart
- *   onExport={(data) => downloadCsv(data)}
- * />
- * ```
+ * Generic report builder — Frappe Report View / Query Report chrome:
+ * column picker, group-by + aggregation, sortable headers, totals strip,
+ * optional grouped chart, export. Rows are a stacked group (LC-72
+ * CONTAINER-CLIP); selected = fill, keyboard focus = one inset ring (LC-71).
  */
 export function ReportBuilder({
   columns,
@@ -218,17 +162,23 @@ export function ReportBuilder({
   error = null,
   onRetry,
   hasActiveFilters = false,
+  height,
+  minHeight,
   ...stackProps
 }: ReportBuilderProps) {
   const { t } = useTranslation();
   const { knobProps } = useResolvedKnobs();
-  // Report chrome copy follows the size knob through the dense-table scale
-  // (LC-18 / SB-M-804); medium stays at the previous $2.
   const reportFontSize = reportTextSizeMap[knobProps.sizeToken] ?? "$2";
-  // Error wins (DG-ST-01); initial load renders the table-shaped skeleton twin.
+  const nestedPx = knobProps.nestedControl.px;
+  const isRTL = useDirection() === "rtl";
+  const CollapsedCaretIcon = isRTL ? CaretLeftIcon : CaretRightIcon;
   const hasError = resolveAsyncStatus({ error }) === "error";
   const isInitialLoading = !hasError && isLoading && data.length === 0;
-  // Column management
+  const bounded = height != null || minHeight != null;
+  const tableId = useId();
+  const gridRef = useRef<HTMLDivElement>(null);
+  if (typeof document !== "undefined") ensureKeyboardModalityTracking();
+
   const [enabledColumnSet, setEnabledColumnSet] = useState<Set<string>>(
     () => new Set(columns.filter((c) => c.enabled).map((c) => c.fieldname)),
   );
@@ -238,16 +188,17 @@ export function ReportBuilder({
     [columns, enabledColumnSet],
   );
 
-  const _numericColumns = useMemo(
+  const numericColumns = useMemo(
     () => columns.filter((c) => isNumericFieldType(c.fieldtype)),
     [columns],
   );
 
-  const _toggleColumn = useCallback(
+  const toggleColumn = useCallback(
     (fieldname: string) => {
       setEnabledColumnSet((prev) => {
         const next = new Set(prev);
         if (next.has(fieldname)) {
+          if (next.size <= 1) return prev;
           next.delete(fieldname);
         } else {
           next.add(fieldname);
@@ -259,12 +210,10 @@ export function ReportBuilder({
     [onColumnsChange],
   );
 
-  // Group By
   const [internalGroupBy, setInternalGroupBy] = useState<GroupByConfig | null>(groupByProp ?? null);
-
   const groupBy = groupByProp !== undefined ? groupByProp : internalGroupBy;
 
-  const _handleGroupByChange = useCallback(
+  const handleGroupByChange = useCallback(
     (config: GroupByConfig | null) => {
       setInternalGroupBy(config);
       onGroupByChange?.(config);
@@ -273,6 +222,21 @@ export function ReportBuilder({
   );
 
   const [collapsedGroups, setCollapsedGroups] = useState<Set<string>>(() => new Set());
+  const [sort, setSort] = useState<SortState>(null);
+  const [chartVisible, setChartVisible] = useState(showChart);
+  const [focusedIndex, setFocusedIndex] = useState(-1);
+
+  const sortedData = useMemo(() => {
+    if (!sort) return data;
+    const col = columns.find((c) => c.fieldname === sort.field);
+    const fieldtype = col?.fieldtype ?? "Data";
+    const copy = data.slice();
+    copy.sort((a, b) => {
+      const cmp = compareValues(a[sort.field], b[sort.field], fieldtype);
+      return sort.dir === "asc" ? cmp : -cmp;
+    });
+    return copy;
+  }, [data, sort, columns]);
 
   const groupedData = useMemo(() => {
     if (!groupBy) return null;
@@ -280,8 +244,8 @@ export function ReportBuilder({
     const groups: Record<string, { rows: Record<string, unknown>[]; aggregationValue: number }> =
       {};
 
-    for (const row of data) {
-      const key = String(row[groupBy.field] ?? "(empty)");
+    for (const row of sortedData) {
+      const key = String(row[groupBy.field] ?? t("(empty)"));
       if (!groups[key]) {
         groups[key] = { rows: [], aggregationValue: 0 };
       }
@@ -326,33 +290,62 @@ export function ReportBuilder({
     }
 
     return groups;
-  }, [groupBy, data]);
+  }, [groupBy, sortedData, t]);
 
-  const chartData = useMemo(() => {
-    if (!groupedData) return [];
-    return Object.entries(groupedData).map(([label, group]) => ({
-      label,
-      value: group.aggregationValue,
-    }));
-  }, [groupedData]);
+  const groupEntries = useMemo(
+    () => (groupedData ? Object.entries(groupedData) : []),
+    [groupedData],
+  );
 
-  const [chartVisible, setChartVisible] = useState(false);
+  const chartData = useMemo(
+    () => groupEntries.map(([label, group]) => ({ label, value: group.aggregationValue })),
+    [groupEntries],
+  );
+
+  const totals = useMemo(() => {
+    return enabledColumns
+      .filter((col) => isNumericFieldType(col.fieldtype))
+      .map((col) => ({
+        col,
+        value: sortedData.reduce((acc, row) => acc + (Number(row[col.fieldname]) || 0), 0),
+      }));
+  }, [enabledColumns, sortedData]);
+
+  const focusItems = useMemo((): FocusItem[] => {
+    if (groupBy && groupedData) {
+      const items: FocusItem[] = [];
+      for (const [key, group] of groupEntries) {
+        items.push({ type: "group", key });
+        if (!collapsedGroups.has(key)) {
+          group.rows.forEach((row, index) => items.push({ type: "row", row, index }));
+        }
+      }
+      return items;
+    }
+    return sortedData.map((row, index) => ({ type: "row" as const, row, index }));
+  }, [groupBy, groupedData, groupEntries, collapsedGroups, sortedData]);
+
+  const effectiveFocused = focusedIndex >= focusItems.length ? -1 : focusedIndex;
 
   const toggleGroup = useCallback((groupKey: string) => {
     setCollapsedGroups((prev) => {
       const next = new Set(prev);
-      if (next.has(groupKey)) {
-        next.delete(groupKey);
-      } else {
-        next.add(groupKey);
-      }
+      if (next.has(groupKey)) next.delete(groupKey);
+      else next.add(groupKey);
       return next;
     });
   }, []);
 
-  // Export
+  const cycleSort = useCallback((field: string) => {
+    setSort((prev) => {
+      if (prev?.field !== field) return { field, dir: "asc" };
+      if (prev.dir === "asc") return { field, dir: "desc" };
+      return null;
+    });
+  }, []);
+
   const handleExport = useCallback(() => {
-    const exportData = data.map((row) => {
+    const exportData = sortedData.map((row) => {
       const filtered: Record<string, unknown> = {};
       for (const col of enabledColumns) {
         filtered[col.fieldname] = row[col.fieldname];
@@ -360,118 +353,333 @@ export function ReportBuilder({
       return filtered;
     });
     onExport?.(exportData);
-  }, [data, enabledColumns, onExport]);
+  }, [sortedData, enabledColumns, onExport]);
 
-  // Render helpers
-  const renderHeaderRow = () => (
-    <XStack
-      padding="$2"
-      {...{ backgroundColor: componentColors.surface.background }}
-      borderBottomWidth={1}
-      borderBottomColor="$borderColor"
-    >
-      {enabledColumns.map((col) => (
-        <Text
-          key={col.fieldname}
-          flex={1}
-          fontWeight="600"
-          fontSize={reportFontSize}
-          color="$color"
-          paddingHorizontal="$2"
-          numberOfLines={1}
-        >
-          {col.label}
-        </Text>
-      ))}
-    </XStack>
+  const selectGroupField = useCallback(
+    (fieldname: string | null) => {
+      if (!fieldname) {
+        handleGroupByChange(null);
+        return;
+      }
+      handleGroupByChange({
+        field: fieldname,
+        aggregation: groupBy?.aggregation ?? "count",
+        aggregationField: groupBy?.aggregationField,
+      });
+    },
+    [groupBy, handleGroupByChange],
   );
 
-  const renderDataRow = (row: Record<string, unknown>, index: number, isGrouped = false) => (
-    <XStack
-      key={`row-${String(row.name ?? index)}`}
-      padding="$2"
-      borderBottomWidth={1}
-      borderBottomColor={componentColors.divider}
-      backgroundColor={
-        index % 2 === 0
-          ? "$background"
-          : { backgroundColor: componentColors.surface.background }.backgroundColor
+  const selectAggregation = useCallback(
+    (aggregation: GroupByConfig["aggregation"]) => {
+      if (!groupBy) return;
+      handleGroupByChange({
+        ...groupBy,
+        aggregation,
+        aggregationField:
+          aggregation === "count"
+            ? undefined
+            : (groupBy.aggregationField ?? numericColumns[0]?.fieldname),
+      });
+    },
+    [groupBy, handleGroupByChange, numericColumns],
+  );
+
+  const aggregationLabels: Record<GroupByConfig["aggregation"], string> = {
+    count: t("Count"),
+    sum: t("Sum"),
+    avg: t("Average"),
+    min: t("Min"),
+    max: t("Max"),
+  };
+
+  const handleContainerFocus = useCallback(() => {
+    if (!wasKeyboardFocus()) return;
+    setFocusedIndex((prev) => (prev < 0 ? 0 : prev));
+  }, []);
+
+  const scrollToFocused = useCallback(
+    (index: number) => {
+      document.getElementById(`${tableId}-item-${index}`)?.scrollIntoView({ block: "nearest" });
+    },
+    [tableId],
+  );
+
+  const hotkeyOpts = { target: gridRef as React.RefObject<HTMLElement | null> };
+
+  useHotkey(
+    "ArrowDown",
+    () => {
+      setFocusedIndex((prev) => {
+        const next = prev < 0 ? 0 : Math.min(prev + 1, focusItems.length - 1);
+        scrollToFocused(next);
+        return next;
+      });
+    },
+    hotkeyOpts,
+  );
+  useHotkey(
+    "ArrowUp",
+    () => {
+      setFocusedIndex((prev) => {
+        const next = prev < 0 ? focusItems.length - 1 : Math.max(prev - 1, 0);
+        scrollToFocused(next);
+        return next;
+      });
+    },
+    hotkeyOpts,
+  );
+  useHotkey(
+    "Home",
+    () => {
+      if (focusItems.length > 0) {
+        setFocusedIndex(0);
+        scrollToFocused(0);
+      }
+    },
+    hotkeyOpts,
+  );
+  useHotkey(
+    "End",
+    () => {
+      if (focusItems.length > 0) {
+        const last = focusItems.length - 1;
+        setFocusedIndex(last);
+        scrollToFocused(last);
       }
-      hoverStyle={{ backgroundColor: componentColors.surface.background }}
-      {...(isGrouped ? { paddingInlineStart: knobProps.panelPadding.padding } : {})}
-      {...(onRowPress ? { cursor: "pointer", onPress: () => onRowPress(row, index) } : {})}
+    },
+    hotkeyOpts,
+  );
+  useHotkey(
+    "Enter",
+    () => {
+      const item = focusItems[effectiveFocused];
+      if (!item) return;
+      if (item.type === "group") toggleGroup(item.key);
+      else onRowPress?.(item.row, item.index);
+    },
+    hotkeyOpts,
+  );
+  useHotkey(
+    "ArrowLeft",
+    () => {
+      const item = focusItems[effectiveFocused];
+      if (item?.type === "group" && !collapsedGroups.has(item.key)) toggleGroup(item.key);
+    },
+    hotkeyOpts,
+  );
+  useHotkey(
+    "ArrowRight",
+    () => {
+      const item = focusItems[effectiveFocused];
+      if (item?.type === "group" && collapsedGroups.has(item.key)) toggleGroup(item.key);
+    },
+    hotkeyOpts,
+  );
+
+  const rowRing = (isFocused: boolean) =>
+    isFocused && wasKeyboardFocus() ? keyboardFocusRingProps : { outlineWidth: 0 as const };
+
+  const cellAlign = (col: ReportColumn) =>
+    isNumericFieldType(col.fieldtype) ? ("right" as const) : ("left" as const);
+
+  const renderHeaderRow = () => (
+    <XStack
+      role="row"
+      minHeight={nestedPx}
+      alignItems="center"
+      backgroundColor={componentColors.surface.background}
+      {...hairline.bottom}
     >
-      {enabledColumns.map((col) => (
-        <Text
-          key={col.fieldname}
-          flex={1}
-          fontSize={reportFontSize}
-          color="$color"
-          paddingHorizontal="$2"
-          numberOfLines={1}
-        >
-          {formatCellValue(row[col.fieldname], col.fieldtype)}
-        </Text>
-      ))}
+      {enabledColumns.map((col) => {
+        const active = sort?.field === col.fieldname;
+        const SortIcon = active && sort?.dir === "desc" ? CaretDownIcon : CaretUpIcon;
+        return (
+          <XStack
+            key={col.fieldname}
+            role="columnheader"
+            aria-sort={
+              active ? (sort?.dir === "asc" ? "ascending" : "descending") : "none"
+            }
+            flex={1}
+            minWidth={0}
+            minHeight={nestedPx}
+            hitSlop={knobProps.nestedControl.hitSlop}
+            alignItems="center"
+            justifyContent={cellAlign(col) === "right" ? "flex-end" : "flex-start"}
+            gap="$1"
+            paddingHorizontal="$2"
+            cursor="pointer"
+            tabIndex={-1}
+            onPress={() => cycleSort(col.fieldname)}
+            hoverStyle={{ backgroundColor: componentColors.interactive.background }}
+          >
+            <Text
+              fontWeight="600"
+              fontSize={reportFontSize}
+              color="$color"
+              numberOfLines={1}
+              textAlign={cellAlign(col)}
+            >
+              {col.label}
+            </Text>
+            <SortIcon
+              size={10}
+              weight="bold"
+              color={active ? componentColors.text.primary : componentColors.text.muted}
+              opacity={active ? 1 : 0.35}
+            />
+          </XStack>
+        );
+      })}
     </XStack>
   );
 
-  const renderGroupedRows = () => {
-    if (!groupedData || !groupBy) return null;
+  const renderDataRow = (
+    row: Record<string, unknown>,
+    index: number,
+    focusIdx: number,
+    isLast: boolean,
+    isGrouped = false,
+  ) => {
+    const isFocused = effectiveFocused === focusIdx;
+    return (
+      <XStack
+        key={`${tableId}-row-${String(row.name ?? index)}`}
+        id={`${tableId}-item-${focusIdx}`}
+        role="row"
+        aria-selected={isFocused}
+        tabIndex={-1}
+        {...(isFocused ? { "data-focused": true } : {})}
+        minHeight={nestedPx}
+        alignItems="center"
+        backgroundColor={isFocused ? "$accentBackground" : "transparent"}
+        {...rowRing(isFocused)}
+        hoverStyle={{
+          backgroundColor: isFocused ? "$accentBackground" : componentColors.interactive.background,
+        }}
+        {...(isLast ? {} : hairline.bottom)}
+        {...(isGrouped ? { paddingInlineStart: knobProps.panelPadding.padding } : {})}
+        {...(onRowPress
+          ? {
+              cursor: "pointer",
+              hitSlop: knobProps.nestedControl.hitSlop,
+              onPress: () => {
+                setFocusedIndex(focusIdx);
+                gridRef.current?.focus();
+                onRowPress(row, index);
+              },
+            }
+          : {})}
+      >
+        {enabledColumns.map((col) => (
+          <Text
+            key={col.fieldname}
+            role="cell"
+            flex={1}
+            minWidth={0}
+            fontSize={reportFontSize}
+            color="$color"
+            paddingHorizontal="$2"
+            numberOfLines={1}
+            textAlign={cellAlign(col)}
+          >
+            {formatCellValue(row[col.fieldname], col.fieldtype)}
+          </Text>
+        ))}
+      </XStack>
+    );
+  };
 
+  const renderGroupedRows = () => {
+    if (!groupBy) return null;
     const groupByCol = columns.find((c) => c.fieldname === groupBy.field);
     const aggLabel = aggregationLabels[groupBy.aggregation];
     const aggFieldCol = groupBy.aggregationField
       ? columns.find((c) => c.fieldname === groupBy.aggregationField)
       : null;
 
-    return Object.entries(groupedData).map(([groupKey, group]) => {
+    let cursor = 0;
+    return groupEntries.map(([groupKey, group], groupIndex) => {
       const isCollapsed = collapsedGroups.has(groupKey);
-      // Group aggregates are the same number class as the cells below them,
-      // so they take the same register (LC-12 render channel) instead of
-      // dropping into raw digits.
+      const headerFocus = cursor;
+      cursor += 1;
       const aggDisplay =
         groupBy.aggregation === "count"
           ? `${aggLabel}: ${formatNumber(group.aggregationValue, { maximumFractionDigits: 0 })}`
           : `${aggLabel}(${aggFieldCol?.label ?? groupBy.aggregationField ?? ""}): ${formatNumber(
               group.aggregationValue,
             )}`;
-
+      const isFocused = effectiveFocused === headerFocus;
+      const header = (
+        <XStack
+          key={`group-${groupKey}`}
+          id={`${tableId}-item-${headerFocus}`}
+          role="row"
+          aria-expanded={!isCollapsed}
+          aria-selected={isFocused}
+          tabIndex={-1}
+          {...(isFocused ? { "data-focused": true } : {})}
+          minHeight={nestedPx}
+          hitSlop={knobProps.nestedControl.hitSlop}
+          paddingHorizontal="$2"
+          backgroundColor={isFocused ? "$accentBackground" : componentColors.interactive.background}
+          {...(groupIndex === groupEntries.length - 1 && isCollapsed ? {} : hairline.bottom)}
+          alignItems="center"
+          gap="$2"
+          cursor="pointer"
+          {...rowRing(isFocused)}
+          onPress={() => {
+            setFocusedIndex(headerFocus);
+            gridRef.current?.focus();
+            toggleGroup(groupKey);
+          }}
+          hoverStyle={{
+            backgroundColor: isFocused ? "$accentBackground" : componentColors.interactive.hover,
+          }}
+        >
+          {isCollapsed ? (
+            <CollapsedCaretIcon size={12} weight="bold" />
+          ) : (
+            <CaretDownIcon size={12} weight="bold" />
+          )}
+          <Text fontWeight="600" fontSize={reportFontSize} color="$accentColor" numberOfLines={1}>
+            {groupByCol?.label ?? groupBy.field}: {groupKey}
+          </Text>
+          <Text fontSize={reportFontSize} color={componentColors.text.muted}>
+            ({group.rows.length}{" "}
+            {group.rows.length === 1 ? t("record") : t("records")})
+          </Text>
+          <XStack flex={1} />
+          <Text fontWeight="500" fontSize={reportFontSize} color="$accentColor" numberOfLines={1}>
+            {aggDisplay}
+          </Text>
+        </XStack>
+      );
+      const rows = isCollapsed
+        ? null
+        : group.rows.map((row, index) => {
+            const focusIdx = cursor;
+            cursor += 1;
+            const lastInTable =
+              groupIndex === groupEntries.length - 1 && index === group.rows.length - 1;
+            return renderDataRow(row, index, focusIdx, lastInTable, true);
+          });
       return (
         <YStack key={groupKey}>
-          <XStack
-            padding="$2"
-            paddingHorizontal={knobProps.panelPadding.padding}
-            backgroundColor={componentColors.interactive.background}
-            borderBottomWidth={1}
-            borderBottomColor="$borderColor"
-            alignItems="center"
-            gap="$2"
-            cursor="pointer"
-            onPress={() => toggleGroup(groupKey)}
-            hoverStyle={{ backgroundColor: componentColors.interactive.hover }}
-          >
-            <Text fontSize={reportFontSize}>{isCollapsed ? "▶" : "▼"}</Text>
-            <Text fontWeight="600" fontSize={reportFontSize} color="$accentColor">
-              {groupByCol?.label ?? groupBy.field}: {groupKey}
-            </Text>
-            <Text fontSize={reportFontSize} color={componentColors.text.muted}>
-              ({group.rows.length} {group.rows.length === 1 ? "record" : "records"})
-            </Text>
-            <XStack flex={1} />
-            <Text fontWeight="500" fontSize={reportFontSize} color="$accentColor">
-              {aggDisplay}
-            </Text>
-          </XStack>
-
-          {!isCollapsed && group.rows.map((row, index) => renderDataRow(row, index, true))}
+          {header}
+          {rows}
         </YStack>
       );
     });
   };
 
-  // Failed load: error chrome replaces the report; toolbar/chart/table hide
-  // so the column count and stale rows can't lie (DG-ST-01 / DG-ST-04).
+  const groupByCol = groupBy ? columns.find((c) => c.fieldname === groupBy.field) : undefined;
+  const aggregationFieldCol = groupBy?.aggregationField
+    ? columns.find((c) => c.fieldname === groupBy.aggregationField)
+    : undefined;
+  const chartAvailable = Boolean(groupedData && chartData.length > 0);
+
   if (hasError) {
     return (
       <AsyncBoundary
@@ -487,83 +695,247 @@ export function ReportBuilder({
   }
 
   return (
-    <YStack {...knobProps.gap} {...stackProps}>
-      {/* Toolbar */}
-      <Card
-        size={knobProps.sizeToken}
-        {...knobProps.borderRadius}
-        borderWidth={1}
-        borderColor="$borderColor"
+    <YStack
+      testID="report-builder"
+      {...knobProps.gap}
+      height={height}
+      minHeight={minHeight}
+      {...stackProps}
+    >
+      <XStack
+        {...knobProps.surface}
+        {...knobProps.containerRadius}
+        {...knobProps.panelPadding}
+        {...knobProps.gap}
+        alignItems="center"
+        flexWrap="wrap"
       >
-        <XStack {...knobProps.panelPadding} {...knobProps.gap} alignItems="center" flexWrap="wrap">
-          {/* Column toggle info */}
-          <Text fontSize={reportFontSize} color={componentColors.text.muted}>
-            {enabledColumns.length} / {columns.length} columns
-          </Text>
+        <DropdownMenu>
+          <DropdownMenu.Trigger asChild>
+            <Button size={knobProps.sizeToken} chromeless {...pressTargetStyle()}>
+              {t("Columns ({{enabled}}/{{total}})", {
+                enabled: enabledColumns.length,
+                total: columns.length,
+              })}
+            </Button>
+          </DropdownMenu.Trigger>
+          <DropdownMenu.Content maxHeight={360}>
+            <DropdownMenu.Label>{t("Report columns")}</DropdownMenu.Label>
+            {columns.map((column) => {
+              const checked = enabledColumnSet.has(column.fieldname);
+              const lastEnabled = checked && enabledColumnSet.size === 1;
+              return (
+                <DropdownMenu.CheckboxItem
+                  key={column.fieldname}
+                  checked={checked}
+                  disabled={lastEnabled}
+                  disabledReason={
+                    lastEnabled ? t("At least one column stays visible") : undefined
+                  }
+                  onCheckedChange={() => toggleColumn(column.fieldname)}
+                >
+                  {column.label}
+                </DropdownMenu.CheckboxItem>
+              );
+            })}
+          </DropdownMenu.Content>
+        </DropdownMenu>
+
+        <DropdownMenu>
+          <DropdownMenu.Trigger asChild>
+            <Button size={knobProps.sizeToken} chromeless {...pressTargetStyle()}>
+              {groupByCol
+                ? t("Group by: {{field}}", { field: groupByCol.label })
+                : t("Group by")}
+            </Button>
+          </DropdownMenu.Trigger>
+          <DropdownMenu.Content maxHeight={360}>
+            <DropdownMenu.CheckboxItem
+              checked={!groupBy}
+              closeOnSelect
+              onCheckedChange={() => selectGroupField(null)}
+            >
+              {t("No grouping")}
+            </DropdownMenu.CheckboxItem>
+            <DropdownMenu.Separator />
+            {columns.map((column) => (
+              <DropdownMenu.CheckboxItem
+                key={column.fieldname}
+                checked={groupBy?.field === column.fieldname}
+                closeOnSelect
+                onCheckedChange={() => selectGroupField(column.fieldname)}
+              >
+                {column.label}
+              </DropdownMenu.CheckboxItem>
+            ))}
+          </DropdownMenu.Content>
+        </DropdownMenu>
+
+        {groupBy && (
+          <DropdownMenu>
+            <DropdownMenu.Trigger asChild>
+              <Button size={knobProps.sizeToken} chromeless {...pressTargetStyle()}>
+                {aggregationLabels[groupBy.aggregation]}
+              </Button>
+            </DropdownMenu.Trigger>
+            <DropdownMenu.Content>
+              {AGGREGATIONS.map((aggregation) => {
+                const needsNumeric = aggregation !== "count" && numericColumns.length === 0;
+                return (
+                  <DropdownMenu.CheckboxItem
+                    key={aggregation}
+                    checked={groupBy.aggregation === aggregation}
+                    closeOnSelect
+                    disabled={needsNumeric}
+                    disabledReason={
+                      needsNumeric ? t("No numeric fields to aggregate") : undefined
+                    }
+                    onCheckedChange={() => selectAggregation(aggregation)}
+                  >
+                    {aggregationLabels[aggregation]}
+                  </DropdownMenu.CheckboxItem>
+                );
+              })}
+            </DropdownMenu.Content>
+          </DropdownMenu>
+        )}
 
-          <XStack flex={1} />
+        {groupBy && groupBy.aggregation !== "count" && numericColumns.length > 0 && (
+          <DropdownMenu>
+            <DropdownMenu.Trigger asChild>
+              <Button size={knobProps.sizeToken} chromeless {...pressTargetStyle()}>
+                {t("of {{field}}", {
+                  field: aggregationFieldCol?.label ?? groupBy.aggregationField ?? t("field"),
+                })}
+              </Button>
+            </DropdownMenu.Trigger>
+            <DropdownMenu.Content maxHeight={360}>
+              {numericColumns.map((column) => (
+                <DropdownMenu.CheckboxItem
+                  key={column.fieldname}
+                  checked={groupBy.aggregationField === column.fieldname}
+                  closeOnSelect
+                  onCheckedChange={() =>
+                    handleGroupByChange({ ...groupBy, aggregationField: column.fieldname })
+                  }
+                >
+                  {column.label}
+                </DropdownMenu.CheckboxItem>
+              ))}
+            </DropdownMenu.Content>
+          </DropdownMenu>
+        )}
 
-          {/* Chart toggle */}
-          {showChart && groupedData && (
-            <Button
-              size={knobProps.sizeToken}
-              onPress={() => setChartVisible((v) => !v)}
-              theme={chartVisible ? "active" : undefined}
-              {...pressTargetStyle()}
-            >
-              Chart
-            </Button>
-          )}
+        <XStack flex={1} />
+
+        {chartAvailable && (
+          <Button
+            size={knobProps.sizeToken}
+            chromeless
+            icon={ChartBarIcon}
+            aria-pressed={chartVisible}
+            onPress={() => setChartVisible((v) => !v)}
+            theme={chartVisible ? "active" : undefined}
+            {...pressTargetStyle()}
+          >
+            {t("Chart")}
+          </Button>
+        )}
 
-          {/* Export */}
-          {onExport && (
-            <Button size={knobProps.sizeToken} onPress={handleExport} {...pressTargetStyle()}>
-              Export
-            </Button>
-          )}
-        </XStack>
-      </Card>
+        {onExport && (
+          <Button
+            size={knobProps.sizeToken}
+            chromeless
+            icon={DownloadSimpleIcon}
+            onPress={handleExport}
+            {...pressTargetStyle()}
+          >
+            {t("Export")}
+          </Button>
+        )}
+      </XStack>
 
-      {/* Chart area */}
-      {chartVisible && groupedData && chartData.length > 0 && (
+      {chartVisible && chartAvailable && (
         <YStack {...knobProps.gap}>
           <SimpleBarChart data={chartData} />
         </YStack>
       )}
 
-      {/* Report table */}
-      <Card
-        size={knobProps.sizeToken}
-        {...knobProps.borderRadius}
-        borderWidth={1}
-        borderColor="$borderColor"
-        flex={1}
+      <YStack
+        {...knobProps.surface}
+        {...knobProps.containerRadius}
+        overflow="hidden"
+        flex={bounded ? 1 : undefined}
+        minHeight={bounded ? 0 : undefined}
       >
         {isInitialLoading ? (
-          /* Skeleton twin inside the live table card (LC-20 / DG-ST-02) */
           <AsyncSkeleton layout="table" padding="$2" />
         ) : (
-          <ScrollView flex={1}>
-            <YStack minWidth="100%">
-              {renderHeaderRow()}
-              {groupBy && groupedData
-                ? renderGroupedRows()
-                : data.map((row, index) => renderDataRow(row, index))}
-
-              {/* Zero rows: distinguish "filters matched nothing" from a truly
-                  empty dataset (DG-TBL-06 / Axiom 6: empty ≠ no-results) */}
-              {data.length === 0 && (
-                <EmptyState
-                  compact
-                  aria-live="polite"
-                  data-async-state={hasActiveFilters ? "no-results" : "empty"}
-                  title={hasActiveFilters ? t("No results found") : t("No data to display")}
-                />
-              )}
-            </YStack>
-          </ScrollView>
+          <YStack
+            ref={gridRef as any}
+            flex={bounded ? 1 : undefined}
+            minHeight={bounded ? 0 : undefined}
+            role="grid"
+            aria-rowcount={sortedData.length}
+            aria-colcount={enabledColumns.length}
+            aria-label={t("Report")}
+            aria-activedescendant={
+              effectiveFocused >= 0 ? `${tableId}-item-${effectiveFocused}` : undefined
+            }
+            tabIndex={0}
+            outlineWidth={0}
+            onFocus={handleContainerFocus}
+          >
+            <ScrollView flex={bounded ? 1 : undefined}>
+              <YStack minWidth="100%">
+                {renderHeaderRow()}
+                {groupBy && groupedData
+                  ? renderGroupedRows()
+                  : sortedData.map((row, index) =>
+                      renderDataRow(row, index, index, index === sortedData.length - 1),
+                    )}
+
+                {data.length === 0 && (
+                  <EmptyState
+                    compact
+                    aria-live="polite"
+                    data-async-state={hasActiveFilters ? "no-results" : "empty"}
+                    title={hasActiveFilters ? t("No results found") : t("No data to display")}
+                  />
+                )}
+              </YStack>
+            </ScrollView>
+            {data.length > 0 && (
+              <XStack
+                role="row"
+                minHeight={nestedPx}
+                alignItems="center"
+                paddingHorizontal="$2"
+                {...hairline.top}
+                backgroundColor={componentColors.surface.background}
+                gap="$3"
+                flexWrap="wrap"
+              >
+                <Text fontSize={reportFontSize} fontWeight="600" color={componentColors.text.muted}>
+                  {t("Totals")}
+                </Text>
+                {totals.map(({ col, value }) => (
+                  <Text key={col.fieldname} fontSize={reportFontSize} color="$color">
+                    {col.label}:{" "}
+                    <Text fontSize={reportFontSize} fontWeight="600">
+                      {formatCellValue(value, col.fieldtype)}
+                    </Text>
+                  </Text>
+                ))}
+                <XStack flex={1} />
+                <Text fontSize={reportFontSize} color={componentColors.text.muted}>
+                  {t("{{count}} row(s)", { count: data.length })}
+                </Text>
+              </XStack>
+            )}
+          </YStack>
         )}
-      </Card>
+      </YStack>
     </YStack>
   );
 }