@multiplatform.one/backoffice 6.4.2 → 6.6.0

package/src/views/report-controls.tsx

@@ -0,0 +1,440 @@
+// Report-view chrome around FrappeReportBuilder. The component owns the
+// grid, group rendering, save/load and the Export button, but exposes no
+// interactive picker / pagination / row-click UI (its column-toggle and
+// group-by handlers are dead code) — so the desk chrome lives here:
+//   - ReportToolbar: column add/remove picker across all meta fields,
+//     group-by + aggregation pickers, page-size selector, filter chips
+//   - ReportFooter: totals strip (desk "Show Totals" parity, computed over
+//     the full filtered result), an "Open" record jump (interim affordance
+//     for the missing per-row click-through), numbered pagination
+import {
+  Button,
+  DropdownMenu,
+  Pagination,
+  Text,
+  XStack,
+  YStack,
+} from "@multiplatform.one/components";
+import type { GroupByConfig, ReportColumn } from "@multiplatform.one/frappe-ui";
+import { formatCurrency, formatNumber, formatPercent } from "@multiplatform.one/theme";
+import { ArrowSquareOutIcon } from "@phosphor-icons/react";
+import { useTranslation } from "react-i18next";
+import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
+import type { FrappeFilters } from "../shared/types";
+
+/** Field types the report can total / aggregate (mirrors ReportBuilder). */
+export const REPORT_NUMERIC_FIELDTYPES = new Set([
+  "Int",
+  "Float",
+  "Currency",
+  "Percent",
+  "Rating",
+  "Duration",
+]);
+
+/** Desk report page lengths. */
+export const REPORT_PAGE_SIZES = [20, 100, 500] as const;
+
+const AGGREGATIONS: GroupByConfig["aggregation"][] = ["count", "sum", "avg", "min", "max"];
+
+/** Human-readable chip text for a frappe filter tuple. */
+function filterChipLabel([fieldname, operator, value]: FrappeFilters[number]): string {
+  const rendered =
+    typeof value === "string"
+      ? value.replace(/^%|%$/g, "")
+      : Array.isArray(value)
+        ? value.map(String).join(", ")
+        : JSON.stringify(value);
+  return `${fieldname} ${operator} ${rendered}`;
+}
+
+export interface ReportToolbarProps {
+  /** All pickable report columns; `enabled` reflects the current selection. */
+  columns: ReportColumn[];
+  onToggleColumn: (fieldname: string) => void;
+  groupBy: GroupByConfig | null;
+  onGroupByChange: (groupBy: GroupByConfig | null) => void;
+  pageSize: number;
+  onPageSizeChange: (pageSize: number) => void;
+  /** Base filters applied to the report (`?f=` URL param), shown as chips. */
+  filters: FrappeFilters;
+  onClearFilters?: () => void;
+}
+
+export function ReportToolbar({
+  columns,
+  onToggleColumn,
+  groupBy,
+  onGroupByChange,
+  pageSize,
+  onPageSizeChange,
+  filters,
+  onClearFilters,
+}: ReportToolbarProps) {
+  const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
+  const enabledCount = columns.filter((column) => column.enabled).length;
+  const numericColumns = columns.filter((column) =>
+    REPORT_NUMERIC_FIELDTYPES.has(column.fieldtype),
+  );
+  const groupByColumn = groupBy
+    ? columns.find((column) => column.fieldname === groupBy.field)
+    : undefined;
+  const aggregationFieldColumn = groupBy?.aggregationField
+    ? columns.find((column) => column.fieldname === groupBy.aggregationField)
+    : undefined;
+
+  const aggregationLabels: Record<GroupByConfig["aggregation"], string> = {
+    count: t("report.aggCount", "Count"),
+    sum: t("report.aggSum", "Sum"),
+    avg: t("report.aggAvg", "Average"),
+    min: t("report.aggMin", "Min"),
+    max: t("report.aggMax", "Max"),
+  };
+
+  const selectGroupField = (fieldname: string | null) => {
+    if (!fieldname) {
+      onGroupByChange(null);
+      return;
+    }
+    onGroupByChange({
+      field: fieldname,
+      aggregation: groupBy?.aggregation ?? "count",
+      aggregationField: groupBy?.aggregationField,
+    });
+  };
+
+  const selectAggregation = (aggregation: GroupByConfig["aggregation"]) => {
+    if (!groupBy) return;
+    onGroupByChange({
+      ...groupBy,
+      aggregation,
+      aggregationField:
+        aggregation === "count"
+          ? undefined
+          : (groupBy.aggregationField ?? numericColumns[0]?.fieldname),
+    });
+  };
+
+  return (
+    <XStack alignItems="center" flexWrap="wrap" gap="$2">
+      {/* Column add/remove picker across all meta fields */}
+      <DropdownMenu>
+        <DropdownMenu.Trigger asChild>
+          <Button size="$2" chromeless>
+            {t("report.columns", {
+              defaultValue: "Columns ({{enabled}}/{{total}})",
+              enabled: enabledCount,
+              total: columns.length,
+            })}
+          </Button>
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content maxHeight={360}>
+          <DropdownMenu.Label>{t("report.pickColumns", "Report columns")}</DropdownMenu.Label>
+          {columns.map((column) => {
+            const lastEnabled = column.enabled && enabledCount === 1;
+            return (
+              <DropdownMenu.CheckboxItem
+                key={column.fieldname}
+                checked={column.enabled}
+                disabled={lastEnabled}
+                disabledReason={
+                  lastEnabled
+                    ? t("report.lastColumn", "At least one column stays visible")
+                    : undefined
+                }
+                onCheckedChange={() => onToggleColumn(column.fieldname)}
+              >
+                {column.label}
+              </DropdownMenu.CheckboxItem>
+            );
+          })}
+        </DropdownMenu.Content>
+      </DropdownMenu>
+
+      {/* Group-by field */}
+      <DropdownMenu>
+        <DropdownMenu.Trigger asChild>
+          <Button size="$2" chromeless>
+            {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={() => selectGroupField(null)}
+          >
+            {t("report.groupByNone", "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>
+
+      {/* Aggregation (per-group summary rendered by ReportBuilder) */}
+      {groupBy && (
+        <DropdownMenu>
+          <DropdownMenu.Trigger asChild>
+            <Button size="$2" chromeless>
+              {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("report.noNumericFields", "No numeric fields to aggregate")
+                      : undefined
+                  }
+                  onCheckedChange={() => selectAggregation(aggregation)}
+                >
+                  {aggregationLabels[aggregation]}
+                </DropdownMenu.CheckboxItem>
+              );
+            })}
+          </DropdownMenu.Content>
+        </DropdownMenu>
+      )}
+
+      {/* Aggregated field (sum/avg/min/max) */}
+      {groupBy && groupBy.aggregation !== "count" && numericColumns.length > 0 && (
+        <DropdownMenu>
+          <DropdownMenu.Trigger asChild>
+            <Button size="$2" chromeless>
+              {t("report.aggregationOf", {
+                defaultValue: "of {{field}}",
+                field:
+                  aggregationFieldColumn?.label ??
+                  groupBy.aggregationField ??
+                  t("report.pickField", "field"),
+              })}
+            </Button>
+          </DropdownMenu.Trigger>
+          <DropdownMenu.Content maxHeight={360}>
+            {numericColumns.map((column) => (
+              <DropdownMenu.CheckboxItem
+                key={column.fieldname}
+                checked={groupBy.aggregationField === column.fieldname}
+                closeOnSelect
+                onCheckedChange={() =>
+                  onGroupByChange({ ...groupBy, aggregationField: column.fieldname })
+                }
+              >
+                {column.label}
+              </DropdownMenu.CheckboxItem>
+            ))}
+          </DropdownMenu.Content>
+        </DropdownMenu>
+      )}
+
+      <XStack flex={1} />
+
+      {/* Base filter chips (?f= URL param) */}
+      {filters.map((tuple, index) => (
+        <XStack
+          key={`${tuple[0]}-${index}`}
+          alignItems="center"
+          backgroundColor="$color3"
+          borderRadius={999}
+          paddingHorizontal="$2.5"
+          paddingVertical="$1"
+        >
+          <Text fontSize="$2" color="$color11">
+            {filterChipLabel(tuple)}
+          </Text>
+        </XStack>
+      ))}
+      {onClearFilters && filters.length > 0 && (
+        <Button size="$2" chromeless onPress={onClearFilters}>
+          {t("report.clearFilters", "Clear filters")}
+        </Button>
+      )}
+
+      {/* Page size (desk page lengths) */}
+      <DropdownMenu>
+        <DropdownMenu.Trigger asChild>
+          <Button size="$2" chromeless>
+            {t("report.pageSize", {
+              defaultValue: "{{count}} / page",
+              count: pageSize,
+            })}
+          </Button>
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content>
+          {REPORT_PAGE_SIZES.map((size) => (
+            <DropdownMenu.CheckboxItem
+              key={size}
+              checked={pageSize === size}
+              closeOnSelect
+              onCheckedChange={() => onPageSizeChange(size)}
+            >
+              {String(size)}
+            </DropdownMenu.CheckboxItem>
+          ))}
+        </DropdownMenu.Content>
+      </DropdownMenu>
+    </XStack>
+  );
+}
+
+export interface ReportRecordRef {
+  name: string;
+  /** Display title (the doctype's title field value, falling back to name). */
+  title: string;
+}
+
+export interface ReportTotal {
+  label: string;
+  fieldtype: string;
+  value: number;
+}
+
+export interface ReportFooterProps {
+  /** 0-based current page. */
+  page: number;
+  pageCount: number;
+  pageSize: number;
+  totalItems: number;
+  /** Called with the new 0-based page. */
+  onPageChange: (page: number) => void;
+  /** Records on the current page, for the open-record jump. */
+  records: ReportRecordRef[];
+  onOpenRecord: (name: string) => void;
+  /** Column totals over the full filtered result (desk totals row). */
+  totals: ReportTotal[];
+}
+
+const OPEN_MENU_LIMIT = 50;
+
+/**
+ * Totals render through the house number channel (LC-12 render channel /
+ * D-04): the same registers the table cells use, so a footer total never
+ * reads raw ("15400") beside a localized cell ("15,400"). The Currency
+ * register stays symbol-less here — a column total across mixed-currency
+ * rows must not invent a unit the data does not carry.
+ */
+function formatTotalValue(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);
+  }
+}
+
+export function ReportFooter({
+  page,
+  pageCount,
+  pageSize,
+  totalItems,
+  onPageChange,
+  records,
+  onOpenRecord,
+  totals,
+}: ReportFooterProps) {
+  const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
+  const openRecords = records.slice(0, OPEN_MENU_LIMIT);
+
+  return (
+    <YStack gap="$2">
+      {totals.length > 0 && (
+        <XStack alignItems="center" flexWrap="wrap" gap="$3">
+          <Text fontSize="$2" fontWeight="600" color="$color10">
+            {t("report.totals", "Totals")}
+          </Text>
+          {totals.map((total) => (
+            <Text key={total.label} fontSize="$2" color="$color11">
+              {total.label}:{" "}
+              <Text fontSize="$2" fontWeight="600" color="$color12">
+                {formatTotalValue(total.value, total.fieldtype)}
+              </Text>
+            </Text>
+          ))}
+        </XStack>
+      )}
+      <XStack alignItems="center" flexWrap="wrap" gap="$2">
+        {records.length > 0 && (
+          <DropdownMenu>
+            <DropdownMenu.Trigger asChild>
+              <Button size="$2" chromeless icon={ArrowSquareOutIcon}>
+                {t("report.openRecord", "Open")}
+              </Button>
+            </DropdownMenu.Trigger>
+            <DropdownMenu.Content maxHeight={360}>
+              <DropdownMenu.Label>
+                {t("report.openRecordHint", "Open a record from this page")}
+              </DropdownMenu.Label>
+              {openRecords.map((record) => (
+                <DropdownMenu.Item
+                  key={record.name}
+                  shortcut={record.title !== record.name ? record.name : undefined}
+                  onSelect={() => onOpenRecord(record.name)}
+                >
+                  {record.title}
+                </DropdownMenu.Item>
+              ))}
+              {records.length > OPEN_MENU_LIMIT && (
+                <DropdownMenu.Item
+                  disabled
+                  disabledReason={t(
+                    "report.openRecordOverflow",
+                    "Narrow with filters or a smaller page to reach the rest",
+                  )}
+                >
+                  {t("report.moreRecords", {
+                    defaultValue: "+{{count}} more on this page",
+                    count: records.length - OPEN_MENU_LIMIT,
+                  })}
+                </DropdownMenu.Item>
+              )}
+            </DropdownMenu.Content>
+          </DropdownMenu>
+        )}
+        <XStack flex={1} />
+        {pageCount > 1 ? (
+          <Pagination
+            variant="numbered"
+            total={pageCount}
+            page={page + 1}
+            onPageChange={(nextPage) => onPageChange(nextPage - 1)}
+            totalItems={totalItems}
+            pageSize={pageSize}
+            showSummary
+          />
+        ) : (
+          <Text fontSize="$2" color="$color10">
+            {t("report.recordCount", {
+              defaultValue: "{{count}} record(s)",
+              count: totalItems,
+            })}
+          </Text>
+        )}
+      </XStack>
+    </YStack>
+  );
+}

package/src/views/viewMeta.ts

@@ -0,0 +1,117 @@
+// Field-detection helpers shared by the alternate views, riding the
+// sanctioned backoffice meta loader (shared/useDoctypeMeta: getdoctype RPC,
+// module-wide cache, fixture branch for stories) — every backoffice surface
+// shares one meta fetch per doctype per session.
+import { useDoctypeMeta, type DocFieldMeta, type DoctypeMeta } from "../shared/useDoctypeMeta";
+
+export function useViewMeta(doctype: string): {
+  meta: DoctypeMeta | undefined;
+  isLoading: boolean;
+  error: Error | null;
+  refetch: () => void;
+} {
+  const { meta, loading, error, reload } = useDoctypeMeta(doctype);
+  return { meta, isLoading: loading, error: error ?? null, refetch: reload };
+}
+
+const DATE_FIELD_TYPES = new Set(["Date", "Datetime"]);
+
+function isDateField(field: DocFieldMeta): boolean {
+  return DATE_FIELD_TYPES.has(field.fieldtype) && !field.hidden;
+}
+
+/**
+ * Desk calendar-view conventions: known start/end fieldname pairs, checked
+ * in order. Mirrors the common `calendar_settings` shapes stock doctypes use.
+ */
+const DATE_PAIR_CONVENTIONS: ReadonlyArray<readonly [string, string]> = [
+  ["starts_on", "ends_on"],
+  ["start_date", "end_date"],
+  ["from_date", "to_date"],
+  ["start_datetime", "end_datetime"],
+  ["start", "end"],
+];
+
+export interface DetectedDateFields {
+  dateField?: string;
+  endDateField?: string;
+}
+
+/**
+ * Pick the calendar date field(s) for a doctype: an explicit override wins
+ * (when it names a real Date/Datetime field), then the desk start/end pair
+ * conventions, then the first visible Date/Datetime field.
+ */
+export function detectDateFields(meta: DoctypeMeta, override?: string): DetectedDateFields {
+  const dateFields = new Map(meta.fields.filter(isDateField).map((f) => [f.fieldname, f]));
+  if (override && dateFields.has(override)) {
+    const pair = DATE_PAIR_CONVENTIONS.find(([start]) => start === override);
+    return {
+      dateField: override,
+      endDateField: pair && dateFields.has(pair[1]) ? pair[1] : undefined,
+    };
+  }
+  for (const [start, end] of DATE_PAIR_CONVENTIONS) {
+    if (dateFields.has(start)) {
+      return { dateField: start, endDateField: dateFields.has(end) ? end : undefined };
+    }
+  }
+  const first = meta.fields.find(isDateField);
+  return first ? { dateField: first.fieldname } : {};
+}
+
+/** First visible Select field with options — desk's kanban fallback axis. */
+export function detectSelectField(meta: DoctypeMeta): DocFieldMeta | undefined {
+  return meta.fields.find(
+    (f) => f.fieldtype === "Select" && !f.hidden && (f.options ?? "").trim().length > 0,
+  );
+}
+
+export function selectFieldOptions(field: DocFieldMeta): string[] {
+  return (field.options ?? "")
+    .split("\n")
+    .map((option) => option.trim())
+    .filter(Boolean);
+}
+
+/** meta.image_field, else the first visible Attach Image field. */
+export function detectImageField(meta: DoctypeMeta): string | undefined {
+  if (meta.image_field) return meta.image_field;
+  return meta.fields.find((f) => f.fieldtype === "Attach Image" && !f.hidden)?.fieldname;
+}
+
+const LAYOUT_FIELD_TYPES = new Set(["Section Break", "Column Break", "Tab Break"]);
+
+export interface DetectedCardFields {
+  titleField: string;
+  /** Up to `max` extra in_list_view fields for the card body. */
+  extraFields: string[];
+}
+
+/**
+ * Card anatomy for kanban/image cards: the doctype's title field plus a
+ * couple of `in_list_view` fields (excluding the title and the kanban
+ * status axis).
+ */
+export function detectCardFields(
+  meta: DoctypeMeta,
+  excludeFields: readonly string[] = [],
+  max = 2,
+): DetectedCardFields {
+  const titleField = meta.title_field || "name";
+  const exclude = new Set([titleField, "name", ...excludeFields]);
+  const extraFields = meta.fields
+    .filter(
+      (f) =>
+        f.in_list_view &&
+        !f.hidden &&
+        !LAYOUT_FIELD_TYPES.has(f.fieldtype) &&
+        !exclude.has(f.fieldname),
+    )
+    .slice(0, max)
+    .map((f) => f.fieldname);
+  return { titleField, extraFields };
+}
+
+/** Loose doc shape for the generic frappe-ui view wrappers. */
+export type AnyDoc = { name: string; doctype: string } & Record<string, unknown>;

package/src/workspace/WorkspaceChartBlock.tsx

@@ -77,10 +77,7 @@ export function WorkspaceChartBlock({ row }: WorkspaceChartBlockProps) {
             {title}
           </SizableText>
           <SizableText size="$2" color="$color10">
-            {t(
-              "workspaceChartFixture",
-              "Chart data is only available on a live bench",
-            )}
+            {t("workspaceChartFixture", "Chart data is only available on a live bench")}
           </SizableText>
         </YStack>
       </Card>

package/src/workspace/WorkspaceGrid.tsx

@@ -9,11 +9,9 @@
  * phones, two-up on mid widths, desk's ~3–4 column layout when wide.
  */
 import { XStack, YStack, type YStackProps } from "@multiplatform.one/components";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { getLayoutSizeClass, useResolvedKnobs } from "@multiplatform.one/theme";
 import { useState, type ReactNode } from "react";
 
-/** Container width below which every block is full-width. */
-const NARROW_MAX = 640;
 /** Container width below which small blocks go two-up. */
 const MEDIUM_MAX = 960;
 
@@ -27,7 +25,8 @@ export interface WorkspaceGridItem {
 function effectiveSpan(raw: number | undefined, width: number): number {
   const span = Math.min(Math.max(Math.round(raw ?? 12), 1), 12);
   if (width <= 0) return span; // not measured yet — desk-wide layout
-  if (width < NARROW_MAX) return 12;
+  // `compact` is the canonical class below the house medium breakpoint (LC-28).
+  if (getLayoutSizeClass(width) === "compact") return 12;
   if (width < MEDIUM_MAX) return span <= 6 ? 6 : 12;
   return span;
 }

package/src/workspace/WorkspaceLinkCard.tsx

@@ -109,8 +109,13 @@ export function WorkspaceLinkCard({ group }: WorkspaceLinkCardProps) {
   });
 
   return (
-    <Card flexGrow={1} height="100%">
-      <YStack {...knobProps.panelPadding} {...knobProps.gap} flex={1}>
+    // LC-10 FRAME-CONTAINMENT: no `height="100%"` — a cyclic percentage
+    // against the auto-height grid row zeroed the card's intrinsic height
+    // (with the basis-0 inner column) and the links painted past the card
+    // border. flexGrow (basis auto) equalizes heights in the stretched grid
+    // cell while the content keeps its intrinsic size.
+    <Card flexGrow={1}>
+      <YStack {...knobProps.panelPadding} {...knobProps.gap} flexGrow={1}>
         {/* Catalog list-group caption (Sidebar section-label treatment):
             small-caps muted label, no underline rule — a full-width rule
             under uneven columns read as table chrome (Axiom 16). */}

package/src/workspace/WorkspaceLinkDirectory.tsx

@@ -109,11 +109,9 @@ export function WorkspaceLinkDirectory({ items }: WorkspaceLinkDirectoryProps) {
             {filteredItems.length === 0 ? (
               <EmptyState
                 compact
-                title={t(
-                  "workspaceFilterNoMatch",
-                  'No links match "{{query}}"',
-                  { query: filter.trim() },
-                )}
+                title={t("workspaceFilterNoMatch", 'No links match "{{query}}"', {
+                  query: filter.trim(),
+                })}
               />
             ) : (
               <WorkspaceGrid items={filteredItems} />

package/src/workspace/WorkspaceNumberCard.tsx

@@ -106,10 +106,7 @@ export function WorkspaceNumberCard({ row }: WorkspaceNumberCardProps) {
             {title}
           </SizableText>
           <SizableText size="$2" color="$color10">
-            {t(
-              "workspaceNumberCardUnsupported",
-              "This card type is only available in desk",
-            )}
+            {t("workspaceNumberCardUnsupported", "This card type is only available in desk")}
           </SizableText>
         </YStack>
       </Card>

package/src/workspace/WorkspaceRecents.tsx

@@ -68,10 +68,7 @@ export function WorkspaceRecents() {
   return (
     // Section heading on the shared sectionHeading scale (LC-17); no
     // divider rule over a chip band (Axiom 16 chrome-earns-role).
-    <PageSection
-      title={t("workspaceRecents", "Continue where you left off")}
-      divider={false}
-    >
+    <PageSection title={t("workspaceRecents", "Continue where you left off")} divider={false}>
       <XStack flexWrap="wrap" {...knobProps.gap}>
         {recents.map((item) => (
           <Card

package/src/workspace/WorkspaceScreen.tsx

@@ -258,11 +258,9 @@ export function WorkspaceScreen({
           onRetry={refresh}
           errorTitle={
             isPermissionError
-              ? t(
-                  "workspacePermissionError",
-                  "You do not have permission to view {{workspace}}",
-                  { workspace },
-                )
+              ? t("workspacePermissionError", "You do not have permission to view {{workspace}}", {
+                  workspace,
+                })
               : t("workspaceError", "Couldn't load workspace {{workspace}}", {
                   workspace,
                 })