@multiplatform.one/backoffice 6.4.2 → 6.6.0

package/src/report/report-grid.tsx

@@ -0,0 +1,366 @@
+// Desk-parity report spreadsheet: row numbers, sortable column headers, a
+// per-column FILTER ROW under the headers (desk's killer report feature —
+// inputs drive the standard frappe filter pipeline via reportViewModel's
+// kind→operator mapping), group header rows, and a totals row.
+//
+// Composed from @multiplatform.one/table's Table primitives (exported for
+// standalone use) rather than DataTable: DataTable owns a single internal
+// scrollport and wraps header content in Text, so it cannot host an input
+// row under its headers today — capability gap flagged to the table
+// workstream; this grid is the interim desk-parity surface.
+import { ScrollView, Text, Tooltip, View, XStack } from "@multiplatform.one/components";
+import { Input } from "@multiplatform.one/forms";
+import { Table } from "@multiplatform.one/table";
+import { formatCurrency, formatNumber, formatPercent } from "@multiplatform.one/theme";
+import { CaretDownIcon, CaretUpDownIcon } from "@phosphor-icons/react";
+import React, { useCallback } from "react";
+import { useTranslation } from "react-i18next";
+import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
+import { formatDateCell } from "../list/listFormat";
+import {
+  REPORT_NUMERIC_FIELDTYPES,
+  type ReportColumnDef,
+  type ReportGridRow,
+  type ReportRow,
+  type ReportSortState,
+  type ReportTotalsCell,
+} from "./reportViewModel";
+
+const ROW_NUMBER_WIDTH = 56;
+
+export interface ReportGridProps {
+  columns: readonly ReportColumnDef[];
+  rows: readonly ReportGridRow[];
+  sort: ReportSortState;
+  onSortChange: (sort: ReportSortState) => void;
+  /** Filter-row DRAFT values by fieldname (uncommitted text). */
+  columnFilters: Readonly<Record<string, string>>;
+  onColumnFilterChange: (fieldname: string, value: string) => void;
+  /** Open the row's document form. */
+  onOpenRow: (name: string) => void;
+  /** Open a Link cell's target document. */
+  onOpenLink?: (doctype: string, name: string) => void;
+  /** Totals over the full filtered result — rendered as a bottom row. */
+  totals: readonly ReportTotalsCell[];
+  /** Group-by column (group header rows span the grid). */
+  groupByColumn?: ReportColumnDef;
+}
+
+function alignToJustify(align: ReportColumnDef["align"]) {
+  return align === "right" ? "flex-end" : align === "center" ? "center" : "flex-start";
+}
+
+function formatNumericCell(value: number, fieldtype: string): string {
+  switch (fieldtype) {
+    case "Currency":
+      return formatCurrency(value);
+    case "Int":
+      return formatNumber(Math.round(value), { maximumFractionDigits: 0 });
+    case "Percent":
+      return formatPercent(value, { precision: 1 });
+    default:
+      return formatNumber(value);
+  }
+}
+
+/** Fieldtype-aware cell content (query-report cell channel, D-04 numbers). */
+function ReportCellValue({
+  column,
+  row,
+  onOpenLink,
+}: {
+  column: ReportColumnDef;
+  row: ReportRow;
+  onOpenLink?: (doctype: string, name: string) => void;
+}) {
+  const raw = row[column.fieldname];
+  if (raw === null || raw === undefined || raw === "") {
+    return (
+      <Text fontSize="$3" color="$color8">
+        —
+      </Text>
+    );
+  }
+  if (column.fieldtype === "Check") {
+    return (
+      <Text fontSize="$3" color={raw ? "$green11" : "$color8"}>
+        {raw ? "✓" : "—"}
+      </Text>
+    );
+  }
+  if (REPORT_NUMERIC_FIELDTYPES.has(column.fieldtype)) {
+    const numeric = Number(raw);
+    return (
+      <Text fontSize="$3" color="$color12" fontFamily="$mono">
+        {Number.isFinite(numeric) ? formatNumericCell(numeric, column.fieldtype) : String(raw)}
+      </Text>
+    );
+  }
+  const value = String(raw);
+  switch (column.fieldtype) {
+    case "Date":
+    case "Datetime":
+      return (
+        <Text fontSize="$3" color="$color11" numberOfLines={1}>
+          {formatDateCell(value)}
+        </Text>
+      );
+    case "Link": {
+      const target = column.options;
+      if (target && onOpenLink) {
+        return (
+          <Text
+            fontSize="$3"
+            color="$color11"
+            textDecorationLine="underline"
+            cursor="pointer"
+            numberOfLines={1}
+            role="link"
+            onPress={(event) => {
+              event?.stopPropagation?.();
+              onOpenLink(target, value);
+            }}
+          >
+            {value}
+          </Text>
+        );
+      }
+      return (
+        <Text fontSize="$3" color="$color11" numberOfLines={1}>
+          {value}
+        </Text>
+      );
+    }
+    default:
+      return (
+        <Text fontSize="$3" color="$color11" numberOfLines={1}>
+          {value}
+        </Text>
+      );
+  }
+}
+
+export function ReportGrid({
+  columns,
+  rows,
+  sort,
+  onSortChange,
+  columnFilters,
+  onColumnFilterChange,
+  onOpenRow,
+  onOpenLink,
+  totals,
+  groupByColumn,
+}: ReportGridProps) {
+  const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
+
+  const handleSortPress = useCallback(
+    (fieldname: string) => {
+      if (sort.field === fieldname) {
+        onSortChange({ field: fieldname, order: sort.order === "asc" ? "desc" : "asc" });
+      } else {
+        onSortChange({ field: fieldname, order: "asc" });
+      }
+    },
+    [sort, onSortChange],
+  );
+
+  const totalsByField = new Map(totals.map((total) => [total.fieldname, total]));
+  const gridWidth = ROW_NUMBER_WIDTH + columns.reduce((sum, column) => sum + column.width, 0);
+
+  return (
+    <ScrollView horizontal showsHorizontalScrollIndicator flexGrow={0} flexShrink={1}>
+      <Table minWidth={gridWidth} width={gridWidth} displayMode="flex" cellHeight="$3">
+        <Table.Head>
+          {/* Header row: label + sort affordance (aria-sort, Enter/Space). */}
+          <Table.Row>
+            <Table.HeaderCell
+              cellWidth={ROW_NUMBER_WIDTH}
+              aria-label={t("report.rowNumber", "Row number")}
+            >
+              <Text fontSize="$2" color="$color9">
+                #
+              </Text>
+            </Table.HeaderCell>
+            {columns.map((column) => {
+              const sorted = sort.field === column.fieldname ? sort.order : undefined;
+              return (
+                <Table.HeaderCell
+                  key={column.fieldname}
+                  cellWidth={column.width}
+                  justifyContent={alignToJustify(column.align)}
+                  aria-sort={
+                    sorted === "asc" ? "ascending" : sorted === "desc" ? "descending" : "none"
+                  }
+                >
+                  <Tooltip
+                    content={
+                      sorted === "asc"
+                        ? t("report.sortDesc", "Sorted ascending (press to sort descending)")
+                        : sorted === "desc"
+                          ? t("report.sortAsc", "Sorted descending (press to sort ascending)")
+                          : t("report.sortColumn", "Sort by this column")
+                    }
+                  >
+                    <XStack
+                      gap="$1.5"
+                      alignItems="center"
+                      cursor="pointer"
+                      role="button"
+                      tabIndex={0}
+                      aria-label={t("report.sortBy", {
+                        defaultValue: "Sort by {{column}}",
+                        column: column.label,
+                      })}
+                      onPress={() => handleSortPress(column.fieldname)}
+                      onKeyDown={(event: { key?: string; preventDefault?: () => void }) => {
+                        if (event.key === "Enter" || event.key === " ") {
+                          event.preventDefault?.();
+                          handleSortPress(column.fieldname);
+                        }
+                      }}
+                      hoverStyle={{ opacity: 0.8 }}
+                    >
+                      <Text fontSize="$3" fontWeight="600" numberOfLines={1}>
+                        {column.label}
+                      </Text>
+                      {/* Caret orientation mirrors DataTable's headers:
+                          asc = caret-down, desc = rotated 180. */}
+                      <View aria-hidden role="presentation">
+                        {sorted ? (
+                          <CaretDownIcon
+                            size={12}
+                            color="var(--color10)"
+                            style={sorted === "desc" ? { transform: "rotate(180deg)" } : undefined}
+                          />
+                        ) : (
+                          <CaretUpDownIcon size={12} color="var(--color8)" />
+                        )}
+                      </View>
+                    </XStack>
+                  </Tooltip>
+                </Table.HeaderCell>
+              );
+            })}
+          </Table.Row>
+          {/* Filter row — desk parity: one input per column, standard filter
+              pipeline. Number/date accept comparison prefixes (>, <, >=…). */}
+          <Table.Row>
+            <Table.HeaderCell cellWidth={ROW_NUMBER_WIDTH} paddingVertical="$1.5" />
+            {columns.map((column) => {
+              const placeholder =
+                column.kind === "number" || column.kind === "date"
+                  ? t("report.filterComparablePlaceholder", "= > <…")
+                  : column.kind === "check"
+                    ? t("report.filterCheckPlaceholder", "yes / no")
+                    : t("report.filterPlaceholder", "Filter…");
+              return (
+                <Table.HeaderCell
+                  key={column.fieldname}
+                  cellWidth={column.width}
+                  paddingVertical="$1.5"
+                >
+                  <View flex={1} minWidth={0}>
+                    <Input
+                      size="$2"
+                      compact
+                      value={columnFilters[column.fieldname] ?? ""}
+                      onChangeText={(next) => onColumnFilterChange(column.fieldname, next)}
+                      placeholder={placeholder}
+                      // inputProps is the eject that reaches the real input
+                      // element — a top-level aria-label stays on the wrapper.
+                      inputProps={{
+                        "aria-label": t("report.filterColumn", {
+                          defaultValue: "Filter {{column}}",
+                          column: column.label,
+                        }),
+                      }}
+                    />
+                  </View>
+                </Table.HeaderCell>
+              );
+            })}
+          </Table.Row>
+        </Table.Head>
+        <Table.Body>
+          {rows.map((gridRow) => {
+            if (gridRow.kind === "group") {
+              const label =
+                gridRow.value === null || gridRow.value === undefined || gridRow.value === ""
+                  ? t("report.groupEmpty", "(blank)")
+                  : String(gridRow.value);
+              return (
+                <Table.Row key={gridRow.key} backgroundColor="$color2">
+                  <Table.Cell cellWidth={gridWidth} paddingVertical="$1.5" role="rowheader">
+                    <Text fontSize="$2" fontWeight="700" color="$color11" numberOfLines={1}>
+                      {groupByColumn
+                        ? t("report.groupHeader", {
+                            defaultValue: "{{field}}: {{value}} · {{count}}",
+                            field: groupByColumn.label,
+                            value: label,
+                            count: gridRow.count,
+                          })
+                        : label}
+                    </Text>
+                  </Table.Cell>
+                </Table.Row>
+              );
+            }
+            return (
+              <Table.Row
+                key={gridRow.key}
+                cursor="pointer"
+                hoverStyle={{ backgroundColor: "$color2" }}
+                onPress={() => onOpenRow(gridRow.row.name)}
+              >
+                <Table.Cell cellWidth={ROW_NUMBER_WIDTH} paddingVertical="$2">
+                  <Text fontSize="$2" color="$color9" fontFamily="$mono">
+                    {gridRow.index}
+                  </Text>
+                </Table.Cell>
+                {columns.map((column) => (
+                  <Table.Cell
+                    key={column.fieldname}
+                    cellWidth={column.width}
+                    paddingVertical="$2"
+                    justifyContent={alignToJustify(column.align)}
+                  >
+                    <ReportCellValue column={column} row={gridRow.row} onOpenLink={onOpenLink} />
+                  </Table.Cell>
+                ))}
+              </Table.Row>
+            );
+          })}
+        </Table.Body>
+        {totals.length > 0 && (
+          <Table.Foot borderTopWidth={1} borderTopColor="$color6">
+            <Table.Row backgroundColor="$color2">
+              <Table.Cell cellWidth={ROW_NUMBER_WIDTH} paddingVertical="$2">
+                <Text fontSize="$2" fontWeight="700" color="$color10">
+                  {t("report.totals", "Totals")}
+                </Text>
+              </Table.Cell>
+              {columns.map((column) => {
+                const total = totalsByField.get(column.fieldname);
+                return (
+                  <Table.Cell
+                    key={column.fieldname}
+                    cellWidth={column.width}
+                    paddingVertical="$2"
+                    justifyContent={alignToJustify(column.align)}
+                  >
+                    {total ? (
+                      <Text fontSize="$3" fontWeight="700" color="$color12" fontFamily="$mono">
+                        {formatNumericCell(total.value, total.fieldtype)}
+                      </Text>
+                    ) : null}
+                  </Table.Cell>
+                );
+              })}
+            </Table.Row>
+          </Table.Foot>
+        )}
+      </Table>
+    </ScrollView>
+  );
+}

package/src/report/report-toolbar.tsx

@@ -0,0 +1,313 @@
+// The report view's ONE control row (audit: the old surface stacked three
+// toolbar bands with the column count shown twice). Left: column picker,
+// group-by, saved-report selector + save affordances. Right: filter chips
+// (?f= base filters + column-filter summary) and Export. Page size lives in
+// the footer pager (list-screen parity), not here.
+import { DropdownMenu, Popover, Text, XStack, YStack } from "@multiplatform.one/components";
+import { Button, Input } from "@multiplatform.one/forms";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import {
+  ColumnsIcon,
+  DownloadSimpleIcon,
+  FloppyDiskIcon,
+  RowsIcon,
+  StackIcon,
+} from "@phosphor-icons/react";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
+import { filterTupleLabel } from "../list/filter-fields";
+import type { FrappeFilters } from "../shared/types";
+import type { SavedReportSummary } from "./savedReports";
+import type { ReportColumnDef } from "./reportViewModel";
+
+export interface ReportToolbarProps {
+  /** Every pickable column (reportColumnsFromMeta). */
+  columns: readonly ReportColumnDef[];
+  /** Selected (visible) fieldnames, in render order. */
+  selected: readonly string[];
+  onToggleColumn: (fieldname: string) => void;
+  onResetColumns: () => void;
+  groupBy: string | null;
+  onGroupByChange: (fieldname: string | null) => void;
+  /** Base filters (?f= deep link) — chips with a clear affordance. */
+  baseFilters: FrappeFilters;
+  onClearBaseFilters?: () => void;
+  /** Count of active column-row filters (chip + clear-all). */
+  columnFilterCount: number;
+  onClearColumnFilters: () => void;
+  savedReports: readonly SavedReportSummary[];
+  /** Selected saved report name (null = unsaved/new). */
+  currentReport: string | null;
+  onSelectReport: (name: string | null) => void;
+  /** Save under a (new or existing) name. */
+  onSaveReport: (name: string) => void;
+  onDeleteReport: (name: string) => void;
+  onExport: () => void;
+  exportDisabled?: boolean;
+}
+
+export function ReportToolbar({
+  columns,
+  selected,
+  onToggleColumn,
+  onResetColumns,
+  groupBy,
+  onGroupByChange,
+  baseFilters,
+  onClearBaseFilters,
+  columnFilterCount,
+  onClearColumnFilters,
+  savedReports,
+  currentReport,
+  onSelectReport,
+  onSaveReport,
+  onDeleteReport,
+  onExport,
+  exportDisabled,
+}: ReportToolbarProps) {
+  const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
+  const { knobProps } = useResolvedKnobs();
+  const [saveOpen, setSaveOpen] = useState(false);
+  const [saveName, setSaveName] = useState("");
+
+  const selectedSet = new Set(selected);
+  const groupByColumn = groupBy
+    ? columns.find((column) => column.fieldname === groupBy)
+    : undefined;
+  const currentSummary = currentReport
+    ? savedReports.find((report) => report.name === currentReport)
+    : undefined;
+
+  const handleSaveAs = () => {
+    const name = saveName.trim();
+    if (!name) return;
+    onSaveReport(name);
+    setSaveOpen(false);
+    setSaveName("");
+  };
+
+  return (
+    <XStack
+      alignItems="center"
+      flexWrap="wrap"
+      gap="$2"
+      {...knobProps.panelPadding}
+      paddingVertical="$2"
+    >
+      {/* Column add/remove picker (persisted per doctype) */}
+      <DropdownMenu>
+        <DropdownMenu.Trigger asChild>
+          <Button size="$3" chromeless icon={ColumnsIcon}>
+            {t("report.columns", {
+              defaultValue: "Columns ({{enabled}}/{{total}})",
+              enabled: selected.length,
+              total: columns.length,
+            })}
+          </Button>
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content maxHeight={360}>
+          <DropdownMenu.Label>{t("report.pickColumns", "Report columns")}</DropdownMenu.Label>
+          {columns.map((column) => {
+            const isSelected = selectedSet.has(column.fieldname);
+            const lastSelected = isSelected && selected.length === 1;
+            return (
+              <DropdownMenu.CheckboxItem
+                key={column.fieldname}
+                checked={isSelected}
+                disabled={lastSelected}
+                disabledReason={
+                  lastSelected
+                    ? t("report.lastColumn", "At least one column stays visible")
+                    : undefined
+                }
+                onCheckedChange={() => onToggleColumn(column.fieldname)}
+              >
+                {column.label}
+              </DropdownMenu.CheckboxItem>
+            );
+          })}
+          <DropdownMenu.Separator />
+          <DropdownMenu.Item onSelect={onResetColumns}>
+            {t("report.resetColumns", "Reset to default columns")}
+          </DropdownMenu.Item>
+        </DropdownMenu.Content>
+      </DropdownMenu>
+
+      {/* Group-by (rendered as in-grid group header rows) */}
+      <DropdownMenu>
+        <DropdownMenu.Trigger asChild>
+          <Button size="$3" chromeless icon={RowsIcon}>
+            {groupByColumn
+              ? t("report.groupByActive", {
+                  defaultValue: "Group by: {{field}}",
+                  field: groupByColumn.label,
+                })
+              : t("report.groupBy", "Group by")}
+          </Button>
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content maxHeight={360}>
+          <DropdownMenu.CheckboxItem
+            checked={!groupBy}
+            closeOnSelect
+            onCheckedChange={() => onGroupByChange(null)}
+          >
+            {t("report.groupByNone", "No grouping")}
+          </DropdownMenu.CheckboxItem>
+          <DropdownMenu.Separator />
+          {columns.map((column) => (
+            <DropdownMenu.CheckboxItem
+              key={column.fieldname}
+              checked={groupBy === column.fieldname}
+              closeOnSelect
+              onCheckedChange={() => onGroupByChange(column.fieldname)}
+            >
+              {column.label}
+            </DropdownMenu.CheckboxItem>
+          ))}
+        </DropdownMenu.Content>
+      </DropdownMenu>
+
+      {/* Saved-report selector (desk "Select Report": Report Builder docs) */}
+      <DropdownMenu>
+        <DropdownMenu.Trigger asChild>
+          <Button size="$3" chromeless icon={StackIcon}>
+            {currentSummary
+              ? t("report.savedReportActive", {
+                  defaultValue: "Report: {{name}}",
+                  name: currentSummary.reportName,
+                })
+              : t("report.savedReport", "Select Report")}
+          </Button>
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content maxHeight={360}>
+          <DropdownMenu.CheckboxItem
+            checked={!currentReport}
+            closeOnSelect
+            onCheckedChange={() => onSelectReport(null)}
+          >
+            {t("report.savedReportNone", "New report (unsaved)")}
+          </DropdownMenu.CheckboxItem>
+          {savedReports.length > 0 && <DropdownMenu.Separator />}
+          {savedReports.map((report) => (
+            <DropdownMenu.CheckboxItem
+              key={report.name}
+              checked={currentReport === report.name}
+              closeOnSelect
+              onCheckedChange={() => onSelectReport(report.name)}
+            >
+              {report.reportName}
+            </DropdownMenu.CheckboxItem>
+          ))}
+          {currentSummary && (
+            <>
+              <DropdownMenu.Separator />
+              <DropdownMenu.Item destructive onSelect={() => onDeleteReport(currentSummary.name)}>
+                {t("report.deleteReport", {
+                  defaultValue: "Delete “{{name}}”",
+                  name: currentSummary.reportName,
+                })}
+              </DropdownMenu.Item>
+            </>
+          )}
+        </DropdownMenu.Content>
+      </DropdownMenu>
+
+      {/* Save (overwrite the selected report) + Save As (new Report doc) */}
+      {currentSummary && (
+        <Button size="$3" icon={FloppyDiskIcon} onPress={() => onSaveReport(currentSummary.name)}>
+          {t("report.save", "Save")}
+        </Button>
+      )}
+      <Popover placement="bottom-start" open={saveOpen} onOpenChange={setSaveOpen}>
+        <Popover.Trigger asChild>
+          <Button
+            size="$3"
+            chromeless={!!currentSummary}
+            icon={currentSummary ? undefined : FloppyDiskIcon}
+          >
+            {t("report.saveAs", "Save As…")}
+          </Button>
+        </Popover.Trigger>
+        <Popover.Content
+          backgroundColor="$background"
+          {...knobProps.borderRadius}
+          {...knobProps.panelPadding}
+          borderWidth={1}
+          borderColor="$borderColor"
+          elevate
+        >
+          <Popover.Arrow borderWidth={1} borderColor="$borderColor" />
+          <XStack gap="$2" alignItems="center" minWidth={280}>
+            <YStack flex={1} minWidth={0}>
+              <Input
+                size="$3"
+                compact
+                value={saveName}
+                onChangeText={setSaveName}
+                placeholder={t("report.reportNamePlaceholder", "New report name")}
+                inputProps={{
+                  "aria-label": t("report.reportNamePlaceholder", "New report name"),
+                }}
+              />
+            </YStack>
+            <Button
+              size="$3"
+              accent
+              disabled={!saveName.trim()}
+              disabledReason={t("report.saveNeedsName", "Name the report to save it")}
+              disabledReasonPlacement="inline"
+              onPress={handleSaveAs}
+            >
+              {t("report.save", "Save")}
+            </Button>
+          </XStack>
+        </Popover.Content>
+      </Popover>
+
+      <XStack flex={1} />
+
+      {/* Base filter chips (?f= deep link) */}
+      {baseFilters.map((tuple, index) => (
+        <XStack
+          key={`${tuple[0]}-${index}`}
+          alignItems="center"
+          backgroundColor="$color3"
+          borderRadius={999}
+          paddingHorizontal="$2.5"
+          paddingVertical="$1"
+        >
+          <Text fontSize="$2" color="$color11">
+            {filterTupleLabel([...columns], tuple)}
+          </Text>
+        </XStack>
+      ))}
+      {onClearBaseFilters && baseFilters.length > 0 && (
+        <Button size="$3" chromeless onPress={onClearBaseFilters}>
+          {t("report.clearFilters", "Clear filters")}
+        </Button>
+      )}
+
+      {/* Column filter-row summary + clear-all */}
+      {columnFilterCount > 0 && (
+        <Button size="$3" chromeless onPress={onClearColumnFilters}>
+          {t("report.clearColumnFilters", {
+            defaultValue: "Clear column filters ({{count}})",
+            count: columnFilterCount,
+          })}
+        </Button>
+      )}
+
+      <Button
+        size="$3"
+        icon={DownloadSimpleIcon}
+        disabled={exportDisabled}
+        disabledReason={exportDisabled ? t("report.exportEmpty", "No rows to export") : undefined}
+        disabledReasonPlacement="inline"
+        onPress={onExport}
+      >
+        {t("report.export", "Export CSV")}
+      </Button>
+    </XStack>
+  );
+}