@freighttech/ui 0.13.18

package/dist/backend/dynamic-table/components/ConfigureViewPanel.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/backend/dynamic-table/components/ConfigureViewPanel.tsx"],
+  "sourcesContent": ["import React, { useState, useEffect, useMemo, useRef, useCallback } from 'react';\nimport {\n  Sheet,\n  SheetContent,\n} from '@freighttech/ui/primitives/sheet';\nimport { ChevronDown, ChevronUp, Eye, Filter, ArrowUpDown, Layers, Link2, CalendarClock, ListTree, Palette, Sigma, X } from 'lucide-react';\nimport { ColumnDef, FilterRow, FilterColor, LoadFilterSuggestions, LoadLookupSources } from '../types/index';\nimport type { LoadRollupSources, RollupColumnRef } from '../types/rollup';\nimport {\n  SortRule,\n  PerspectiveConfig,\n  LookupColumnRef,\n  generatePerspectiveId,\n  BASE_VIEW_PERSPECTIVE_NAME,\n  PERSPECTIVE_NAME_MAX_LENGTH,\n} from '../types/perspective';\nimport type { TableViewMode } from '../types/perspective';\nimport type { GroupRule, AggregationRule } from '../types/grouping';\nimport ConfigureViewFields from './ConfigureViewFields';\nimport ConfigureViewFilters from './ConfigureViewFilters';\nimport ConfigureViewSorting from './ConfigureViewSorting';\nimport ConfigureViewGrouping from './ConfigureViewGrouping';\nimport ConfigureViewLinkedColumns from './ConfigureViewLinkedColumns';\nimport ConfigureViewRollups from './ConfigureViewRollups';\nimport ConfigureViewFormatting from './ConfigureViewFormatting';\nimport ConfigureViewFormulas from './ConfigureViewFormulas';\nimport SelectMenu from './SelectMenu';\nimport type { ConditionalFormatRule } from '../utils/conditionalFormat';\nimport type { FormulaColumnRef } from '../formula/types';\nimport { isFormulaColumnKey } from '../utils/formulaColumns';\nimport { Button, IconButton, Input } from '../../../primitives-v2';\nimport { useT } from '@open-mercato/shared/lib/i18n/context';\n\n/**\n * Saved-view colour swatches \u2014 the ORDER only. The colour itself comes from\n * `.hot-config-color-<name>` in DynamicTable.v2.css, which resolves the\n * `--m3-view-color-*` tokens.\n *\n * This list used to carry a `bg` hex per entry and set it inline. That was dead\n * code: the CSS rule is `!important` and the v2 appearance is always on, so the\n * inline value never won \u2014 it was a second, quietly diverging copy of the\n * palette that no one could see was wrong.\n */\nconst COLOR_PALETTE: { color: FilterColor }[] = [\n  { color: 'blue' },\n  { color: 'green' },\n  { color: 'teal' },\n  { color: 'purple' },\n  { color: 'pink' },\n  { color: 'red' },\n  { color: 'orange' },\n  { color: 'yellow' },\n];\n\ninterface ConfigureViewPanelProps {\n  isOpen: boolean;\n  onOpenChange: (open: boolean) => void;\n  columns: ColumnDef[];\n  visibleColumns: string[];\n  hiddenColumns: string[];\n  filters: FilterRow[];\n  sortRules: SortRule[];\n  groupRules?: GroupRule[];\n  aggregations?: AggregationRule[];\n  lookupColumns?: LookupColumnRef[];\n  /** View-scoped rollup (\"summarised\") columns over child records. */\n  rollupColumns?: RollupColumnRef[];\n  /** View-scoped calculated (\"formula\") columns. */\n  formulas?: FormulaColumnRef[];\n  /** View-scoped conditional-formatting (\"Highlighting\") rules. */\n  conditionalFormats?: ConditionalFormatRule[];\n  /** One loaded row, so the formula editor can show a live first-row preview. */\n  sampleRow?: Record<string, unknown>;\n  /** Active view-scoped date/time format (opaque host token); undefined = default. */\n  dateFormat?: string;\n  /** Host-supplied date-format presets. When non-empty, the \"Date format\"\n   *  selector is shown. */\n  dateFormatOptions?: { value: string; label: string }[];\n  onColumnVisibilityChange: (visible: string[], hidden: string[]) => void;\n  onFiltersChange: (filters: FilterRow[]) => void;\n  onSortRulesChange: (rules: SortRule[]) => void;\n  onGroupRulesChange?: (rules: GroupRule[]) => void;\n  onAggregationsChange?: (rules: AggregationRule[]) => void;\n  onLookupColumnsChange?: (refs: LookupColumnRef[]) => void;\n  onRollupColumnsChange?: (refs: RollupColumnRef[]) => void;\n  onFormulasChange?: (refs: FormulaColumnRef[]) => void;\n  onConditionalFormatsChange?: (rules: ConditionalFormatRule[]) => void;\n  onDateFormatChange?: (dateFormat: string | undefined) => void;\n  /**\n   * The table's CURRENT drawing mode, carried into the saved view.\n   *\n   * The drawer does not edit it \u2014 the switcher in the toolbar does \u2014 but it has\n   * to travel with a Save, or saving a view while looking at the grid would\n   * quietly write `viewMode: undefined` and the view would open as a table\n   * forever after. Every other view property this drawer does not edit\n   * (`origin`, `publication`) is carried forward for the same reason.\n   */\n  viewMode?: TableViewMode;\n  onSavePerspective: (perspective: PerspectiveConfig) => void;\n  activePerspectiveId?: string | null;\n  /** When set, the panel was opened to edit this saved perspective: its name and\n   *  color pre-populate the save form so saving updates it in place (the save\n   *  upserts by name). Null/undefined when creating a brand-new view. */\n  editingPerspective?: PerspectiveConfig | null;\n  /**\n   * This user's existing personalization of the base (\"Default view\") tab, if\n   * they have one. Passing it is what lets a second save UPDATE that row rather\n   * than insert a duplicate.\n   */\n  baseViewPerspective?: PerspectiveConfig | null;\n  /**\n   * True when the drawer was opened to configure the BASE (\"Default view\") tab.\n   * Explicit rather than inferred from \"no active view\": \"Add view\" opens from\n   * the same state and must still demand a name.\n   */\n  isBaseViewMode?: boolean;\n  loadFilterSuggestions?: LoadFilterSuggestions;\n  /** When set, the panel shows a \"Linked columns\" section that lists the table's\n   *  FK lookup sources so the user can attach read-only related-record columns. */\n  loadLookupSources?: LoadLookupSources;\n  /** When set, the panel shows a \"Summarised columns\" section listing the\n   *  table's one-to-many rollup sources. */\n  loadRollupSources?: LoadRollupSources;\n  /** Section to auto-expand when opening (e.g., 'filters' from column menu \"Filter by this field\") */\n  initialExpandedSection?: string | null;\n}\n\nconst ConfigureViewPanel: React.FC<ConfigureViewPanelProps> = ({\n  isOpen,\n  onOpenChange,\n  columns,\n  visibleColumns,\n  hiddenColumns,\n  filters,\n  sortRules,\n  onColumnVisibilityChange,\n  onFiltersChange,\n  onSortRulesChange,\n  groupRules = [],\n  aggregations = [],\n  lookupColumns = [],\n  rollupColumns = [],\n  formulas = [],\n  conditionalFormats = [],\n  sampleRow,\n  dateFormat,\n  dateFormatOptions = [],\n  onGroupRulesChange,\n  onAggregationsChange,\n  onLookupColumnsChange,\n  onRollupColumnsChange,\n  onFormulasChange,\n  onConditionalFormatsChange,\n  onDateFormatChange,\n  viewMode,\n  onSavePerspective,\n  activePerspectiveId,\n  editingPerspective,\n  baseViewPerspective,\n  isBaseViewMode = false,\n  loadFilterSuggestions,\n  loadLookupSources,\n  loadRollupSources,\n  initialExpandedSection,\n}) => {\n  const t = useT();\n  const [openSections, setOpenSections] = useState<Set<string>>(new Set());\n  const [saveName, setSaveName] = useState('');\n  const [saveColor, setSaveColor] = useState<FilterColor | null>(null);\n\n  useEffect(() => {\n    if (isOpen && initialExpandedSection) {\n      setOpenSections(new Set([initialExpandedSection]));\n    }\n  }, [isOpen, initialExpandedSection]);\n\n  // Pre-populate the save form when opening to edit an existing perspective;\n  // reset to empty when opening to create a new view.\n  useEffect(() => {\n    if (isOpen) {\n      setSaveName(editingPerspective?.name ?? '');\n      setSaveColor(editingPerspective?.color ?? null);\n    }\n  }, [isOpen, editingPerspective]);\n\n  /**\n   * CANCEL MUST UNDO THE LIVE PREVIEW.\n   *\n   * Every control in this drawer edits the grid THROUGH the host: changing a\n   * group rule calls `onGroupRulesChange` immediately so the user sees the\n   * result behind the panel. That live preview is the point. What was missing\n   * is the other half of the contract \u2014 Cancel only closed the drawer, so a\n   * grouping the user explicitly cancelled stayed on screen (72 group-header\n   * rows, in the recorded case). It was never persisted, so a reload cleared it;\n   * the user was simply left staring at a change they had just rejected.\n   *\n   * So: snapshot every controlled value the moment the drawer opens, and on any\n   * dismissal that is NOT a save, push the snapshot back through the same\n   * handlers. Cancel, the X, Escape and an outside click are all dismissals and\n   * all revert \u2014 that is the standard contract for a panel with an explicit\n   * Save/Cancel pair, and having one of them silently keep the edits is exactly\n   * the inconsistency being fixed.\n   */\n  type PanelSnapshot = {\n    visibleColumns: string[];\n    hiddenColumns: string[];\n    filters: FilterRow[];\n    sortRules: SortRule[];\n    groupRules: GroupRule[];\n    aggregations: AggregationRule[];\n    lookupColumns: LookupColumnRef[];\n    rollupColumns: RollupColumnRef[];\n    formulas: FormulaColumnRef[];\n    conditionalFormats: ConditionalFormatRule[];\n    dateFormat: string | undefined;\n  };\n\n  const snapshotRef = useRef<PanelSnapshot | null>(null);\n  const wasOpenRef = useRef(false);\n  // Set by `handleSave` so the close it triggers keeps the edits instead of\n  // rolling them back.\n  const savingRef = useRef(false);\n\n  // Deps are `[isOpen]` ONLY, on purpose: the effect must capture the props as\n  // they were on the render that opened the drawer. Re-running it whenever a\n  // prop changes would overwrite the snapshot with the edited value and make\n  // Cancel a no-op again.\n  useEffect(() => {\n    if (isOpen && !wasOpenRef.current) {\n      snapshotRef.current = {\n        visibleColumns,\n        hiddenColumns,\n        filters,\n        sortRules,\n        groupRules,\n        aggregations,\n        lookupColumns,\n        rollupColumns,\n        formulas,\n        conditionalFormats,\n        dateFormat,\n      };\n    }\n    wasOpenRef.current = isOpen;\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isOpen]);\n\n  const revertToSnapshot = useCallback(() => {\n    const snap = snapshotRef.current;\n    if (!snap) return;\n    // Only fire a handler whose value actually moved. Calling all of them\n    // unconditionally would push a fresh array identity into the host on every\n    // cancel and re-run its effects (re-fetch, re-index) for nothing.\n    const same = (a: unknown, b: unknown) => JSON.stringify(a) === JSON.stringify(b);\n\n    if (!same(snap.visibleColumns, visibleColumns) || !same(snap.hiddenColumns, hiddenColumns)) {\n      onColumnVisibilityChange(snap.visibleColumns, snap.hiddenColumns);\n    }\n    if (!same(snap.filters, filters)) onFiltersChange(snap.filters);\n    if (!same(snap.sortRules, sortRules)) onSortRulesChange(snap.sortRules);\n    if (onGroupRulesChange && !same(snap.groupRules, groupRules)) onGroupRulesChange(snap.groupRules);\n    if (onAggregationsChange && !same(snap.aggregations, aggregations)) {\n      onAggregationsChange(snap.aggregations);\n    }\n    if (onLookupColumnsChange && !same(snap.lookupColumns, lookupColumns)) {\n      onLookupColumnsChange(snap.lookupColumns);\n    }\n    if (onRollupColumnsChange && !same(snap.rollupColumns, rollupColumns)) {\n      onRollupColumnsChange(snap.rollupColumns);\n    }\n    if (onFormulasChange && !same(snap.formulas, formulas)) onFormulasChange(snap.formulas);\n    if (onConditionalFormatsChange && !same(snap.conditionalFormats, conditionalFormats)) {\n      onConditionalFormatsChange(snap.conditionalFormats);\n    }\n    if (onDateFormatChange && snap.dateFormat !== dateFormat) onDateFormatChange(snap.dateFormat);\n  }, [\n    visibleColumns, hiddenColumns, filters, sortRules, groupRules, aggregations,\n    lookupColumns, rollupColumns, formulas, conditionalFormats, dateFormat,\n    onColumnVisibilityChange, onFiltersChange, onSortRulesChange, onGroupRulesChange,\n    onAggregationsChange, onLookupColumnsChange, onRollupColumnsChange, onFormulasChange,\n    onConditionalFormatsChange, onDateFormatChange,\n  ]);\n\n  /** Single close path, so no dismissal can skip the rollback by accident. */\n  const handleOpenChange = useCallback(\n    (open: boolean) => {\n      if (!open) {\n        if (savingRef.current) {\n          savingRef.current = false;\n        } else {\n          revertToSnapshot();\n        }\n        snapshotRef.current = null;\n      }\n      onOpenChange(open);\n    },\n    [onOpenChange, revertToSnapshot],\n  );\n\n  const toggleSection = (section: string) => {\n    setOpenSections(prev => {\n      const next = new Set(prev);\n      if (next.has(section)) {\n        next.delete(section);\n      } else {\n        next.add(section);\n      }\n      return next;\n    });\n  };\n\n  // Only let users filter on columns that are actually visible in the view \u2014\n  // filtering on a hidden column is confusing (no column to see the effect on).\n  // Keep any column already referenced by an existing filter row so that filter\n  // stays editable even if its column was later hidden.\n  const filterableColumns = useMemo(() => {\n    const visible = new Set(visibleColumns);\n    const referenced = new Set(filters.map((f) => f.field));\n    return columns.filter((c) => visible.has(c.data) || referenced.has(c.data));\n  }, [columns, visibleColumns, filters]);\n\n  const hiddenCount = hiddenColumns.length;\n  const visibleCount = visibleColumns.length;\n  const filterCount = filters.length;\n  const sortCount = sortRules.length;\n  const groupCount = groupRules.length;\n  // Count distinct linked sources (tables), not individual field columns.\n  const linkedCount = new Set(lookupColumns.map((r) => r.source)).size;\n  const rollupCount = rollupColumns.length;\n  const formulaCount = formulas.length;\n  const formattingCount = conditionalFormats.length;\n  // A formula may reference native and linked columns, never another formula \u2014\n  // offering calculated columns in its own field picker invites cycles.\n  const formulaSourceColumns = useMemo(\n    () => columns.filter((c) => !isFormulaColumnKey(c.data)),\n    [columns],\n  );\n  const activeDateFormatLabel = dateFormat\n    ? dateFormatOptions.find((o) => o.value === dateFormat)?.label\n    : undefined;\n\n  /**\n   * Section badge: the bare count.\n   *\n   * It used to read \"{count} rules\", which rendered \"1 rules\" \u2014 this i18n layer\n   * has no plural forms, and every locale file carried the plural noun\n   * (`{count} regu\u0142`, `{count} Regeln`). It also made three sibling sections\n   * disagree: Summarised columns and Calculated columns already badge a bare\n   * number. One idiom, and no grammar to get wrong in four languages.\n   */\n  const rulesLabel = (count: number) => String(count);\n\n  /**\n   * True when the drawer is configuring the BASE (\"Default view\") tab rather\n   * than a named saved view. The host says so explicitly; the state check is a\n   * safety net so an \"edit this view\" open can never be mistaken for it.\n   */\n  const onBaseView =\n    isBaseViewMode &&\n    !editingPerspective &&\n    (!activePerspectiveId || activePerspectiveId === baseViewPerspective?.id);\n\n  /**\n   * With no name typed while on the base tab, Save personalizes the DEFAULT\n   * VIEW instead of refusing.\n   *\n   * Before this, `handleSave` was gated on `if (saveName.trim())` and always\n   * minted a fresh id, so the base view had no save path at all \u2014 hiding a\n   * column on the \"Default view\" tab survived exactly until the next reload,\n   * and the only way to keep anything was to invent a name for it. That is half\n   * of why workshop A5 read as data loss.\n   */\n  const savesBaseView = onBaseView && !saveName.trim();\n  const canSave = savesBaseView || !!saveName.trim();\n\n  const handleSave = () => {\n    if (!canSave) return;\n    const perspective: PerspectiveConfig = {\n      // Preserve the id of the row being edited. Minting a new one every time\n      // meant the host could only match the save back to a row BY NAME \u2014 so\n      // renaming a view in this drawer cloned it instead of renaming it.\n      id: savesBaseView\n        ? baseViewPerspective?.id ?? generatePerspectiveId()\n        : editingPerspective?.id ?? generatePerspectiveId(),\n      name: savesBaseView ? BASE_VIEW_PERSPECTIVE_NAME : saveName.trim(),\n      color: savesBaseView ? undefined : saveColor || undefined,\n      columns: {\n        visible: visibleColumns,\n        hidden: hiddenColumns,\n      },\n      filters,\n      sorting: sortRules,\n      grouping: groupRules,\n      aggregations,\n      lookupColumns,\n      rollupColumns,\n      formulas,\n      conditionalFormats,\n      dateFormat,\n      viewMode,\n      // Carry the origin forward: a view copied from a shared template keeps\n      // knowing which template and version it came from across every later edit.\n      origin: savesBaseView ? undefined : editingPerspective?.origin,\n      publication: savesBaseView ? undefined : editingPerspective?.publication,\n      ...(savesBaseView ? { isBaseView: true } : {}),\n    };\n    savingRef.current = true;\n    onSavePerspective(perspective);\n    setSaveName('');\n    setSaveColor(null);\n    handleOpenChange(false);\n  };\n\n  const sectionIcon = (section: string) => {\n    switch (section) {\n      case 'fields': return <Eye className=\"w-4 h-4\" />;\n      case 'filters': return <Filter className=\"w-4 h-4\" />;\n      case 'sorting': return <ArrowUpDown className=\"w-4 h-4\" />;\n      case 'grouping': return <Layers className=\"w-4 h-4\" />;\n      case 'linked': return <Link2 className=\"w-4 h-4\" />;\n      case 'rollups': return <ListTree className=\"w-4 h-4\" />;\n      case 'formulas': return <Sigma className=\"w-4 h-4\" />;\n      case 'formatting': return <Palette className=\"w-4 h-4\" />;\n      case 'dateFormat': return <CalendarClock className=\"w-4 h-4\" />;\n      default: return null;\n    }\n  };\n\n  const v2cls = 'hot-appearance-v2';\n\n  return (\n    <Sheet open={isOpen} onOpenChange={handleOpenChange}>\n      <SheetContent\n        side=\"right\"\n        ariaTitle={t('dynamicTable.configureView.title', 'Configure View')}\n        hideCloseButton={true}\n        className={`hot-config-panel ${v2cls}`.trim()}\n        overlayClassName=\"hot-config-overlay !backdrop-blur-none\"\n        /**\n         * The grid itself is deliberately NOT \"outside\" this drawer: the drawer\n         * is a live editor for the table behind it, so clicking a cell must not\n         * tear it down.\n         *\n         * The drawer's OWN dropdowns need no exemption here even though they\n         * render through `createPortal(\u2026, document.body)`. Radix decides\n         * \"outside\" from the REACT tree, not the DOM tree, and a portal's\n         * content still belongs to the React subtree that rendered it \u2014 so a\n         * click on a dropdown option is already inside. Verified in a browser\n         * after the pointer-events fix below made those options clickable at\n         * all: committing a group/filter/sort option leaves the drawer open,\n         * while a click on the page outside it still dismisses it.\n         */\n        onPointerDownOutside={(e) => {\n          const target = e.target as HTMLElement;\n          if (target.closest('.hot-container')) {\n            e.preventDefault();\n          }\n        }}\n      >\n        <div className=\"hot-config-panel-inner\">\n          {/* Header */}\n          <div className=\"hot-config-panel-header\">\n            <div className=\"hot-config-panel-header-row\">\n              <h3 className=\"hot-config-panel-title\">{t('dynamicTable.configureView.title', 'Configure View')}</h3>\n              <IconButton\n                size=\"sm\"\n                aria-label=\"Close\"\n                icon={<X className=\"w-4 h-4\" />}\n                onClick={() => handleOpenChange(false)}\n              />\n            </div>\n            <p className=\"hot-config-panel-subtitle\">\n              {t('dynamicTable.configureView.subtitle', 'Customize the fields, filters and sorting of this view.')}\n            </p>\n          </div>\n\n          {/* Sections */}\n          <div className=\"hot-config-panel-body\">\n            {/* Fields Section */}\n            <div className={`hot-config-section ${openSections.has('fields') ? 'is-open' : ''}`}>\n              <button\n                className=\"hot-config-section-header\"\n                onClick={() => toggleSection('fields')}\n              >\n                {sectionIcon('fields')}\n                <span className=\"hot-config-section-title\">{t('dynamicTable.configureView.hideFields', 'Hide fields')}</span>\n                <span className=\"hot-config-section-badge\">\n                  {t('dynamicTable.configureView.fieldsVisible', '{visible} of {total} visible', {\n                    visible: visibleCount,\n                    total: visibleCount + hiddenCount,\n                  })}\n                </span>\n                {openSections.has('fields') ? (\n                  <ChevronUp className=\"w-4 h-4 hot-config-section-chevron\" />\n                ) : (\n                  <ChevronDown className=\"w-4 h-4 hot-config-section-chevron\" />\n                )}\n              </button>\n              {openSections.has('fields') && (\n                <ConfigureViewFields\n                  columns={columns}\n                  visibleColumns={visibleColumns}\n                  hiddenColumns={hiddenColumns}\n                  onColumnVisibilityChange={onColumnVisibilityChange}\n                />\n              )}\n            </div>\n\n            {/* Filter Section */}\n            <div className={`hot-config-section ${openSections.has('filters') ? 'is-open' : ''}`}>\n              <button\n                className=\"hot-config-section-header\"\n                onClick={() => toggleSection('filters')}\n              >\n                {sectionIcon('filters')}\n                <span className=\"hot-config-section-title\">{t('dynamicTable.configureView.filter', 'Filter')}</span>\n                {filterCount > 0 && (\n                  <span className=\"hot-config-section-badge\">\n                    {rulesLabel(filterCount)}\n                  </span>\n                )}\n                {openSections.has('filters') ? (\n                  <ChevronUp className=\"w-4 h-4 hot-config-section-chevron\" />\n                ) : (\n                  <ChevronDown className=\"w-4 h-4 hot-config-section-chevron\" />\n                )}\n              </button>\n              {openSections.has('filters') && (\n                <ConfigureViewFilters\n                  columns={filterableColumns}\n                  filters={filters}\n                  onFiltersChange={onFiltersChange}\n                  loadFilterSuggestions={loadFilterSuggestions}\n                />\n              )}\n            </div>\n\n            {/* Sort Section */}\n            <div className={`hot-config-section ${openSections.has('sorting') ? 'is-open' : ''}`}>\n              <button\n                className=\"hot-config-section-header\"\n                onClick={() => toggleSection('sorting')}\n              >\n                {sectionIcon('sorting')}\n                <span className=\"hot-config-section-title\">{t('dynamicTable.configureView.sort', 'Sort')}</span>\n                {sortCount > 0 && (\n                  <span className=\"hot-config-section-badge\">\n                    {rulesLabel(sortCount)}\n                  </span>\n                )}\n                {openSections.has('sorting') ? (\n                  <ChevronUp className=\"w-4 h-4 hot-config-section-chevron\" />\n                ) : (\n                  <ChevronDown className=\"w-4 h-4 hot-config-section-chevron\" />\n                )}\n              </button>\n              {openSections.has('sorting') && (\n                <ConfigureViewSorting\n                  columns={columns}\n                  sortRules={sortRules}\n                  onSortRulesChange={onSortRulesChange}\n                />\n              )}\n            </div>\n\n            {/* Linked Columns Section \u2014 only when the host provides FK sources. */}\n            {loadLookupSources && onLookupColumnsChange && (\n              <div className={`hot-config-section ${openSections.has('linked') ? 'is-open' : ''}`}>\n                <button\n                  className=\"hot-config-section-header\"\n                  onClick={() => toggleSection('linked')}\n                >\n                  {sectionIcon('linked')}\n                  <span className=\"hot-config-section-title\">{t('dynamicTable.configureView.linkedSources', 'Linked sources')}</span>\n                  {linkedCount > 0 && (\n                    <span className=\"hot-config-section-badge\">\n                      {linkedCount}\n                    </span>\n                  )}\n                  {openSections.has('linked') ? (\n                    <ChevronUp className=\"w-4 h-4 hot-config-section-chevron\" />\n                  ) : (\n                    <ChevronDown className=\"w-4 h-4 hot-config-section-chevron\" />\n                  )}\n                </button>\n                {openSections.has('linked') && (\n                  <ConfigureViewLinkedColumns\n                    lookupColumns={lookupColumns}\n                    onLookupColumnsChange={onLookupColumnsChange}\n                    loadLookupSources={loadLookupSources}\n                    visibleColumns={visibleColumns}\n                    hiddenColumns={hiddenColumns}\n                    onColumnVisibilityChange={onColumnVisibilityChange}\n                  />\n                )}\n              </div>\n            )}\n\n            {/* Summarised columns Section \u2014 the one-to-many sibling of\n                \"Linked sources\": aggregates over the records that point AT\n                each row. */}\n            {loadRollupSources && onRollupColumnsChange && (\n              <div className={`hot-config-section ${openSections.has('rollups') ? 'is-open' : ''}`}>\n                <button\n                  className=\"hot-config-section-header\"\n                  onClick={() => toggleSection('rollups')}\n                >\n                  {sectionIcon('rollups')}\n                  <span className=\"hot-config-section-title\">{t('dynamicTable.configureView.rollupColumns', 'Summarised columns')}</span>\n                  {rollupCount > 0 && (\n                    <span className=\"hot-config-section-badge\">{rollupCount}</span>\n                  )}\n                  {openSections.has('rollups') ? (\n                    <ChevronUp className=\"w-4 h-4 hot-config-section-chevron\" />\n                  ) : (\n                    <ChevronDown className=\"w-4 h-4 hot-config-section-chevron\" />\n                  )}\n                </button>\n                {openSections.has('rollups') && (\n                  <ConfigureViewRollups\n                    rollupColumns={rollupColumns}\n                    onRollupColumnsChange={onRollupColumnsChange}\n                    loadRollupSources={loadRollupSources}\n                    visibleColumns={visibleColumns}\n                    hiddenColumns={hiddenColumns}\n                    onColumnVisibilityChange={onColumnVisibilityChange}\n                  />\n                )}\n              </div>\n            )}\n\n            {/* Calculated columns Section \u2014 follows the \"linked\" pattern:\n                another kind of view-scoped virtual column. */}\n            {onFormulasChange && (\n              <div className={`hot-config-section ${openSections.has('formulas') ? 'is-open' : ''}`}>\n                <button\n                  className=\"hot-config-section-header\"\n                  onClick={() => toggleSection('formulas')}\n                >\n                  {sectionIcon('formulas')}\n                  <span className=\"hot-config-section-title\">{t('dynamicTable.configureView.formulas', 'Calculated columns')}</span>\n                  {formulaCount > 0 && (\n                    <span className=\"hot-config-section-badge\">{formulaCount}</span>\n                  )}\n                  {openSections.has('formulas') ? (\n                    <ChevronUp className=\"w-4 h-4 hot-config-section-chevron\" />\n                  ) : (\n                    <ChevronDown className=\"w-4 h-4 hot-config-section-chevron\" />\n                  )}\n                </button>\n                {openSections.has('formulas') && (\n                  <ConfigureViewFormulas\n                    formulas={formulas}\n                    onFormulasChange={onFormulasChange}\n                    columns={formulaSourceColumns}\n                    visibleColumns={visibleColumns}\n                    hiddenColumns={hiddenColumns}\n                    onColumnVisibilityChange={onColumnVisibilityChange}\n                    sampleRow={sampleRow}\n                  />\n                )}\n              </div>\n            )}\n\n            {/* Highlighting (conditional formatting) Section */}\n            {onConditionalFormatsChange && (\n              <div className={`hot-config-section ${openSections.has('formatting') ? 'is-open' : ''}`}>\n                <button\n                  className=\"hot-config-section-header\"\n                  onClick={() => toggleSection('formatting')}\n                >\n                  {sectionIcon('formatting')}\n                  <span className=\"hot-config-section-title\">{t('dynamicTable.conditionalFormat.title', 'Highlighting')}</span>\n                  {formattingCount > 0 && (\n                    <span className=\"hot-config-section-badge\">{rulesLabel(formattingCount)}</span>\n                  )}\n                  {openSections.has('formatting') ? (\n                    <ChevronUp className=\"w-4 h-4 hot-config-section-chevron\" />\n                  ) : (\n                    <ChevronDown className=\"w-4 h-4 hot-config-section-chevron\" />\n                  )}\n                </button>\n                {openSections.has('formatting') && (\n                  <ConfigureViewFormatting\n                    columns={filterableColumns}\n                    rules={conditionalFormats}\n                    onRulesChange={onConditionalFormatsChange}\n                  />\n                )}\n              </div>\n            )}\n\n            {/* Grouping Section */}\n            {onGroupRulesChange && (\n              <div className={`hot-config-section ${openSections.has('grouping') ? 'is-open' : ''}`}>\n                <button\n                  className=\"hot-config-section-header\"\n                  onClick={() => toggleSection('grouping')}\n                >\n                  {sectionIcon('grouping')}\n                  <span className=\"hot-config-section-title\">{t('dynamicTable.configureView.group', 'Group')}</span>\n                  {groupCount > 0 && (\n                    <span className=\"hot-config-section-badge\">\n                      {rulesLabel(groupCount)}\n                    </span>\n                  )}\n                  {openSections.has('grouping') ? (\n                    <ChevronUp className=\"w-4 h-4 hot-config-section-chevron\" />\n                  ) : (\n                    <ChevronDown className=\"w-4 h-4 hot-config-section-chevron\" />\n                  )}\n                </button>\n                {openSections.has('grouping') && (\n                  <ConfigureViewGrouping\n                    columns={columns}\n                    groupRules={groupRules}\n                    onGroupRulesChange={onGroupRulesChange}\n                    aggregations={aggregations}\n                    onAggregationsChange={onAggregationsChange}\n                  />\n                )}\n              </div>\n            )}\n\n            {/* Date-format Section \u2014 only when the host supplies presets. */}\n            {onDateFormatChange && dateFormatOptions.length > 0 && (\n              <div className={`hot-config-section ${openSections.has('dateFormat') ? 'is-open' : ''}`}>\n                <button\n                  className=\"hot-config-section-header\"\n                  onClick={() => toggleSection('dateFormat')}\n                >\n                  {sectionIcon('dateFormat')}\n                  <span className=\"hot-config-section-title\">{t('dynamicTable.configureView.dateFormat', 'Date format')}</span>\n                  {activeDateFormatLabel && (\n                    <span className=\"hot-config-section-badge\">{activeDateFormatLabel}</span>\n                  )}\n                  {openSections.has('dateFormat') ? (\n                    <ChevronUp className=\"w-4 h-4 hot-config-section-chevron\" />\n                  ) : (\n                    <ChevronDown className=\"w-4 h-4 hot-config-section-chevron\" />\n                  )}\n                </button>\n                {openSections.has('dateFormat') && (\n                  <div className=\"hot-config-section-body\">\n                    <SelectMenu\n                      className=\"hot-config-filter-select w-full\"\n                      value={dateFormat ?? ''}\n                      onChange={(next) => onDateFormatChange(next || undefined)}\n                      options={dateFormatOptions}\n                      emptyOptionLabel={t('dynamicTable.configureView.dateFormatDefault', 'Default')}\n                      ariaLabel={t('dynamicTable.configureView.dateFormat', 'Date format')}\n                    />\n                  </div>\n                )}\n              </div>\n            )}\n          </div>\n\n          {/* Save form: always visible (matches Figma). */}\n          {(\n            <div className=\"hot-config-panel-save\">\n              <label className=\"hot-config-save-label\">{t('dynamicTable.configureView.viewName', 'View name')}</label>\n              <Input\n                inputSize=\"md\"\n                value={saveName}\n                onChange={(e) => setSaveName(e.target.value)}\n                // The API caps the name at 120 characters and answers a longer\n                // one with a bare 400 \u2014 so a long name used to close the drawer\n                // as though it had saved and create nothing. Stopping at the\n                // limit here is the honest version of the same rule, and the\n                // hint below only appears once it actually bites.\n                maxLength={PERSPECTIVE_NAME_MAX_LENGTH}\n                placeholder={t('dynamicTable.configureView.viewNamePlaceholder', 'e.g. Active contractors')}\n                // NO autoFocus. It was harmless when this panel was only a save\n                // form; it is a data-corruption bug now that the panel is a\n                // multi-section editor. Opening the drawer put the caret in the\n                // NAME box, so the first thing typed into \"Calculated columns\"\n                // \u2014 or any other section the user had not yet clicked into \u2014\n                // was appended to the view's name instead. Hit live: a saved\n                // view came out named `Koszty teczekDlugosc notatkiLEN(notes)`,\n                // silently, with the formula editor visibly on screen.\n                className=\"w-full\"\n                onKeyDown={(e) => {\n                  if ((e.metaKey || e.ctrlKey) && e.key === 'Enter' && canSave) {\n                    handleSave();\n                  }\n                }}\n              />\n              {saveName.length >= PERSPECTIVE_NAME_MAX_LENGTH && (\n                <p className=\"hot-config-save-hint hot-config-save-hint-limit\" role=\"status\">\n                  {t(\n                    'dynamicTable.configureView.viewNameTooLong',\n                    'A view name can be at most {max} characters.',\n                    { max: String(PERSPECTIVE_NAME_MAX_LENGTH) },\n                  )}\n                </p>\n              )}\n              {onBaseView && (\n                <p className=\"hot-config-save-hint\">\n                  {t(\n                    'dynamicTable.configureView.baseViewHint',\n                    'Leave the name empty to keep these settings on your Default view. They are yours alone \u2014 nobody else sees the change.',\n                  )}\n                </p>\n              )}\n              {/* A base-view save has no colour \u2014 the tab it personalizes is a\n                  fixed part of the strip. The row is removed rather than\n                  disabled: a dead control is a question the user has to answer. */}\n              {!savesBaseView && (\n                <>\n                  <label className=\"hot-config-save-label\">{t('dynamicTable.configureView.color', 'Color')}</label>\n                  <div className=\"hot-config-save-colors\">\n                    {COLOR_PALETTE.map((item) => (\n                      <button\n                        key={item.color}\n                        onClick={() => setSaveColor(item.color)}\n                        className={`hot-config-save-color-btn hot-config-color-${item.color} ${saveColor === item.color ? 'selected' : ''}`}\n                        title={item.color}\n                      />\n                    ))}\n                  </div>\n                </>\n              )}\n            </div>\n          )}\n\n          {/* Footer buttons */}\n          <div className=\"hot-config-panel-footer\">\n            <Button\n              variant=\"outline\"\n              className=\"flex-1\"\n              onClick={() => handleOpenChange(false)}\n            >\n              {t('dynamicTable.configureView.cancel', 'Cancel')}\n            </Button>\n            {/* One button, and its label states exactly what will happen \u2014 the\n                base view, an update in place, or a brand-new view. */}\n            <Button\n              variant=\"primary\"\n              className=\"flex-1\"\n              disabled={!canSave}\n              onClick={handleSave}\n            >\n              {savesBaseView\n                ? t('dynamicTable.configureView.saveBaseView', 'Save Default view')\n                : editingPerspective\n                  ? t('dynamicTable.configureView.saveView', 'Save view')\n                  : t('dynamicTable.configureView.saveAsNewView', 'Save as new view')}\n            </Button>\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  );\n};\n\nexport default ConfigureViewPanel;\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/backend/dynamic-table/components/ConfigureViewRollups.js

@@ -0,0 +1,269 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { Plus, X } from "lucide-react";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import SelectMenu from "./SelectMenu.js";
+import { MAX_ROLLUP_COLUMNS, ROLLUP_COUNT_FIELD } from "../types/rollup.js";
+import { rollupColumnDataKey } from "../utils/rollupColumns.js";
+const ConfigureViewRollups = ({
+  rollupColumns,
+  onRollupColumnsChange,
+  loadRollupSources,
+  visibleColumns,
+  hiddenColumns,
+  onColumnVisibilityChange
+}) => {
+  const t = useT();
+  const [sources, setSources] = useState([]);
+  const [loading, setLoading] = useState(true);
+  useEffect(() => {
+    let cancelled = false;
+    setLoading(true);
+    loadRollupSources().then((result) => {
+      if (!cancelled) setSources(result);
+    }).catch(() => {
+      if (!cancelled) setSources([]);
+    }).finally(() => {
+      if (!cancelled) setLoading(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [loadRollupSources]);
+  const fnLabel = useCallback(
+    (fn) => t(`dynamicTable.rollup.fn.${fn}`, DEFAULT_FN_LABELS[fn]),
+    [t]
+  );
+  const labelFor = useCallback(
+    (source, field, fn) => {
+      if (fn === "count") {
+        return source.countLabel === source.label ? source.label : `${source.label} \xB7 ${source.countLabel}`;
+      }
+      const f = source.fields.find((x) => x.key === field);
+      return `${source.label} \xB7 ${fnLabel(fn)} ${f?.label ?? field}`;
+    },
+    [fnLabel]
+  );
+  const fieldOptions = useCallback(
+    (source) => {
+      if (!source) return [];
+      return [
+        {
+          value: ROLLUP_COUNT_FIELD,
+          label: t("dynamicTable.rollup.recordCount", "Number of records")
+        },
+        ...source.fields.map((f) => ({ value: f.key, label: f.label }))
+      ];
+    },
+    [t]
+  );
+  const fnOptions = useCallback(
+    (source, field) => {
+      if (field === ROLLUP_COUNT_FIELD) return ["count"];
+      const f = source?.fields.find((x) => x.key === field);
+      return f ? f.fns : [];
+    },
+    []
+  );
+  const swapColumnKey = useCallback(
+    (oldKey, newKey) => {
+      const replaceIn = (list) => {
+        if (!oldKey) return list;
+        return newKey ? list.map((k) => k === oldKey ? newKey : k) : list.filter((k) => k !== oldKey);
+      };
+      let nextVisible = replaceIn(visibleColumns);
+      let nextHidden = replaceIn(hiddenColumns);
+      if (newKey && !oldKey) {
+        if (!nextVisible.includes(newKey)) nextVisible = [...nextVisible, newKey];
+        nextHidden = nextHidden.filter((k) => k !== newKey);
+      }
+      onColumnVisibilityChange(nextVisible, nextHidden);
+    },
+    [visibleColumns, hiddenColumns, onColumnVisibilityChange]
+  );
+  const keys = useMemo(() => rollupColumns.map((r) => rollupColumnDataKey(r)), [rollupColumns]);
+  const updateRef = useCallback(
+    (index, patch) => {
+      const current = rollupColumns[index];
+      if (!current) return;
+      const merged = { ...current, ...patch };
+      const source = sources.find((s) => s.key === merged.source);
+      if (patch.source && patch.source !== current.source) {
+        merged.field = ROLLUP_COUNT_FIELD;
+        merged.fn = "count";
+      }
+      if (patch.field && patch.field !== current.field) {
+        const legal = fnOptions(source, merged.field);
+        if (!legal.includes(merged.fn)) merged.fn = legal[0] ?? "count";
+      }
+      if (!source) return;
+      merged.label = labelFor(source, merged.field, merged.fn);
+      const oldKey = rollupColumnDataKey(current);
+      const newKey = rollupColumnDataKey(merged);
+      if (oldKey !== newKey && keys.includes(newKey)) return;
+      const next = rollupColumns.map((r, i) => i === index ? merged : r);
+      onRollupColumnsChange(next);
+      if (oldKey !== newKey) swapColumnKey(oldKey, newKey);
+    },
+    [rollupColumns, sources, keys, fnOptions, labelFor, onRollupColumnsChange, swapColumnKey]
+  );
+  const removeRef = useCallback(
+    (index) => {
+      const current = rollupColumns[index];
+      if (!current) return;
+      onRollupColumnsChange(rollupColumns.filter((_, i) => i !== index));
+      swapColumnKey(rollupColumnDataKey(current), null);
+    },
+    [rollupColumns, onRollupColumnsChange, swapColumnKey]
+  );
+  const addRef = useCallback(() => {
+    if (rollupColumns.length >= MAX_ROLLUP_COLUMNS) return;
+    const taken = new Set(keys);
+    for (const source of sources) {
+      const candidates = [
+        { field: ROLLUP_COUNT_FIELD, fn: "count" },
+        ...source.fields.flatMap((f) => f.fns.map((fn) => ({ field: f.key, fn })))
+      ];
+      for (const c of candidates) {
+        const key = rollupColumnDataKey({ source: source.key, ...c });
+        if (taken.has(key)) continue;
+        const ref = {
+          source: source.key,
+          field: c.field,
+          fn: c.fn,
+          label: labelFor(source, c.field, c.fn)
+        };
+        onRollupColumnsChange([...rollupColumns, ref]);
+        swapColumnKey(null, key);
+        return;
+      }
+    }
+  }, [rollupColumns, keys, sources, labelFor, onRollupColumnsChange, swapColumnKey]);
+  const exhausted = useMemo(() => {
+    const taken = new Set(keys);
+    for (const source of sources) {
+      const candidates = [
+        { field: ROLLUP_COUNT_FIELD, fn: "count" },
+        ...source.fields.flatMap((f) => f.fns.map((fn) => ({ field: f.key, fn })))
+      ];
+      if (candidates.some((c) => !taken.has(rollupColumnDataKey({ source: source.key, ...c })))) {
+        return false;
+      }
+    }
+    return true;
+  }, [keys, sources]);
+  if (loading) {
+    return /* @__PURE__ */ jsx("div", { className: "hot-config-section-body", children: /* @__PURE__ */ jsx("p", { className: "hot-config-empty-hint", children: t("dynamicTable.configureView.loading", "Loading\u2026") }) });
+  }
+  if (sources.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className: "hot-config-section-body", children: /* @__PURE__ */ jsx("p", { className: "hot-config-empty-hint", children: t(
+      "dynamicTable.configureView.rollupSourcesNone",
+      "Nothing on this table can be summarised yet."
+    ) }) });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "hot-config-filters", "data-rollup-editor": true, children: [
+    /* @__PURE__ */ jsx("p", { className: "hot-config-linked-hint", children: t(
+      "dynamicTable.configureView.rollupHint",
+      "Summarise the records linked to each row \u2014 how many there are, or a total of one of their amounts."
+    ) }),
+    rollupColumns.length > 0 && /* @__PURE__ */ jsxs("div", { className: "hot-config-sorting-header", children: [
+      /* @__PURE__ */ jsx("span", { className: "hot-config-sorting-header-label", children: t("dynamicTable.configureView.rollupColumns", "Summarised columns") }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => {
+            for (const key of keys) swapColumnKey(key, null);
+            onRollupColumnsChange([]);
+          },
+          className: "hot-config-clear-btn",
+          children: t("dynamicTable.configureView.clearAll", "Clear all")
+        }
+      )
+    ] }),
+    rollupColumns.map((ref, index) => {
+      const source = sources.find((s) => s.key === ref.source);
+      const fns = fnOptions(source, ref.field);
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "hot-config-filter-row",
+          "data-rollup-row": rollupColumnDataKey(ref),
+          children: [
+            /* @__PURE__ */ jsx(
+              SelectMenu,
+              {
+                value: ref.source,
+                onChange: (next) => updateRef(index, { source: next }),
+                options: sources.map((s) => ({ value: s.key, label: s.label })),
+                className: "hot-config-filter-select",
+                ariaLabel: t("dynamicTable.configureView.rollupSource", "Related records"),
+                dataAttributes: { "data-rollup-source": true }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              SelectMenu,
+              {
+                value: ref.field,
+                onChange: (next) => updateRef(index, { field: next }),
+                options: fieldOptions(source),
+                className: "hot-config-filter-select",
+                ariaLabel: t("dynamicTable.configureView.rollupField", "What to summarise"),
+                dataAttributes: { "data-rollup-field": true }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              SelectMenu,
+              {
+                value: ref.fn,
+                onChange: (next) => updateRef(index, { fn: next }),
+                options: fns.map((fn) => ({ value: fn, label: fnLabel(fn) })),
+                disabled: fns.length <= 1,
+                className: "hot-config-filter-select hot-config-filter-operator",
+                ariaLabel: t("dynamicTable.configureView.rollupFn", "Function"),
+                dataAttributes: { "data-rollup-fn": true }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => removeRef(index),
+                className: "hot-config-filter-remove",
+                "aria-label": t("dynamicTable.configureView.remove", "Remove"),
+                children: /* @__PURE__ */ jsx(X, { className: "w-3.5 h-3.5" })
+              }
+            )
+          ]
+        },
+        rollupColumnDataKey(ref)
+      );
+    }),
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: addRef,
+        disabled: exhausted || rollupColumns.length >= MAX_ROLLUP_COLUMNS,
+        className: "hot-config-add-btn",
+        "data-rollup-add": true,
+        children: [
+          /* @__PURE__ */ jsx(Plus, { className: "w-3.5 h-3.5", "aria-hidden": true }),
+          t("dynamicTable.configureView.rollupAdd", "Add summarised column")
+        ]
+      }
+    ),
+    rollupColumns.length >= MAX_ROLLUP_COLUMNS && /* @__PURE__ */ jsx("p", { className: "hot-config-filters-label", children: t("dynamicTable.configureView.rollupLimitReached", "Column limit reached ({max})", {
+      max: MAX_ROLLUP_COLUMNS
+    }) })
+  ] });
+};
+const DEFAULT_FN_LABELS = {
+  count: "Count",
+  sum: "Sum of",
+  avg: "Average of",
+  min: "Min of",
+  max: "Max of"
+};
+var ConfigureViewRollups_default = ConfigureViewRollups;
+export {
+  ConfigureViewRollups_default as default
+};
+//# sourceMappingURL=ConfigureViewRollups.js.map

package/dist/backend/dynamic-table/components/ConfigureViewRollups.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/backend/dynamic-table/components/ConfigureViewRollups.tsx"],
+  "sourcesContent": ["import React, { useCallback, useEffect, useMemo, useState } from 'react';\nimport { Plus, X } from 'lucide-react';\nimport { useT } from '@open-mercato/shared/lib/i18n/context';\nimport SelectMenu from './SelectMenu';\nimport type {\n  LoadRollupSources,\n  RollupColumnRef,\n  RollupFn,\n  RollupSourceOption,\n} from '../types/rollup';\nimport { MAX_ROLLUP_COLUMNS, ROLLUP_COUNT_FIELD } from '../types/rollup';\nimport { rollupColumnDataKey } from '../utils/rollupColumns';\n\nexport interface ConfigureViewRollupsProps {\n  rollupColumns: RollupColumnRef[];\n  onRollupColumnsChange: (refs: RollupColumnRef[]) => void;\n  loadRollupSources: LoadRollupSources;\n  /** Current column visibility. Adding a summarised column shows it straight\n   *  away; removing one prunes it from both groups. */\n  visibleColumns: string[];\n  hiddenColumns: string[];\n  onColumnVisibilityChange: (visible: string[], hidden: string[]) => void;\n}\n\n/**\n * \"Summarised columns\" \u2014 one row per column, chosen in three steps:\n * **source \u2192 field \u2192 function**.\n *\n * WHY NOT THE LINKED-COLUMNS PATTERN. Linking a lookup source adds one column\n * per field, so \"add them all, hidden, let the user switch on what they want\"\n * is honest. A rollup multiplies field \u00D7 function: the folders `lines` source\n * alone is 2 fields \u00D7 4 functions + 1 \u00D7 1 + count = **ten** columns. Dumping\n * ten hidden columns per source and calling it \"three columns became available\"\n * is how a field list becomes unreadable. So the user names the ONE aggregate\n * they want, and gets exactly one column.\n *\n * Laid out as `hot-config-filter-row` \u2014 the same row shape the filter and\n * highlighting editors use \u2014 because the drawer already teaches that\n * interaction. This is composition, not new UX.\n */\nconst ConfigureViewRollups: React.FC<ConfigureViewRollupsProps> = ({\n  rollupColumns,\n  onRollupColumnsChange,\n  loadRollupSources,\n  visibleColumns,\n  hiddenColumns,\n  onColumnVisibilityChange,\n}) => {\n  const t = useT();\n\n  const [sources, setSources] = useState<RollupSourceOption[]>([]);\n  const [loading, setLoading] = useState(true);\n\n  useEffect(() => {\n    let cancelled = false;\n    setLoading(true);\n    loadRollupSources()\n      .then((result) => {\n        if (!cancelled) setSources(result);\n      })\n      .catch(() => {\n        if (!cancelled) setSources([]);\n      })\n      .finally(() => {\n        if (!cancelled) setLoading(false);\n      });\n    return () => {\n      cancelled = true;\n    };\n  }, [loadRollupSources]);\n\n  const fnLabel = useCallback(\n    (fn: RollupFn) => t(`dynamicTable.rollup.fn.${fn}`, DEFAULT_FN_LABELS[fn]),\n    [t],\n  );\n\n  /**\n   * The header a column carries. Stored ON the ref rather than recomputed at\n   * render time, so a saved view still reads correctly on a page that has not\n   * loaded the source registry (or after a source is retired).\n   */\n  const labelFor = useCallback(\n    (source: RollupSourceOption, field: string, fn: RollupFn): string => {\n      if (fn === 'count') {\n        // \"Documents \u00B7 Documents\" reads as a stutter \u2014 a source whose count\n        // noun already repeats its own name gets the bare label.\n        return source.countLabel === source.label\n          ? source.label\n          : `${source.label} \u00B7 ${source.countLabel}`;\n      }\n      const f = source.fields.find((x) => x.key === field);\n      return `${source.label} \u00B7 ${fnLabel(fn)} ${f?.label ?? field}`;\n    },\n    [fnLabel],\n  );\n\n  /** Field choices for a source: the always-available count, then its fields. */\n  const fieldOptions = useCallback(\n    (source: RollupSourceOption | undefined) => {\n      if (!source) return [];\n      return [\n        {\n          value: ROLLUP_COUNT_FIELD,\n          label: t('dynamicTable.rollup.recordCount', 'Number of records'),\n        },\n        ...source.fields.map((f) => ({ value: f.key, label: f.label })),\n      ];\n    },\n    [t],\n  );\n\n  /** Functions legal for (source, field). COUNT is the only one over records. */\n  const fnOptions = useCallback(\n    (source: RollupSourceOption | undefined, field: string): RollupFn[] => {\n      if (field === ROLLUP_COUNT_FIELD) return ['count'];\n      const f = source?.fields.find((x) => x.key === field);\n      return f ? f.fns : [];\n    },\n    [],\n  );\n\n  /** Rewrite the visible-column list so `oldKey` becomes `newKey` in place.\n   *  Keeping the position matters: the column does not jump when the user\n   *  changes the function on a column they have already placed. */\n  const swapColumnKey = useCallback(\n    (oldKey: string | null, newKey: string | null) => {\n      const replaceIn = (list: string[]) => {\n        if (!oldKey) return list;\n        return newKey ? list.map((k) => (k === oldKey ? newKey : k)) : list.filter((k) => k !== oldKey);\n      };\n      let nextVisible = replaceIn(visibleColumns);\n      let nextHidden = replaceIn(hiddenColumns);\n      if (newKey && !oldKey) {\n        // Brand-new column: SHOW it. The user just named this exact aggregate \u2014\n        // adding it hidden would make them go and find it in another section.\n        if (!nextVisible.includes(newKey)) nextVisible = [...nextVisible, newKey];\n        nextHidden = nextHidden.filter((k) => k !== newKey);\n      }\n      onColumnVisibilityChange(nextVisible, nextHidden);\n    },\n    [visibleColumns, hiddenColumns, onColumnVisibilityChange],\n  );\n\n  const keys = useMemo(() => rollupColumns.map((r) => rollupColumnDataKey(r)), [rollupColumns]);\n\n  /**\n   * Replace the ref at `index`. A change that would duplicate a column already\n   * in the view is refused rather than silently collapsing two rows into one\n   * key (which would leave a row editing a column that is not there).\n   */\n  const updateRef = useCallback(\n    (index: number, patch: Partial<RollupColumnRef>) => {\n      const current = rollupColumns[index];\n      if (!current) return;\n      const merged = { ...current, ...patch };\n      const source = sources.find((s) => s.key === merged.source);\n\n      // Snap field/fn back to something legal whenever the source changes.\n      if (patch.source && patch.source !== current.source) {\n        merged.field = ROLLUP_COUNT_FIELD;\n        merged.fn = 'count';\n      }\n      if (patch.field && patch.field !== current.field) {\n        const legal = fnOptions(source, merged.field);\n        if (!legal.includes(merged.fn)) merged.fn = legal[0] ?? 'count';\n      }\n      if (!source) return;\n      merged.label = labelFor(source, merged.field, merged.fn);\n\n      const oldKey = rollupColumnDataKey(current);\n      const newKey = rollupColumnDataKey(merged);\n      if (oldKey !== newKey && keys.includes(newKey)) return;\n\n      const next = rollupColumns.map((r, i) => (i === index ? merged : r));\n      onRollupColumnsChange(next);\n      if (oldKey !== newKey) swapColumnKey(oldKey, newKey);\n    },\n    [rollupColumns, sources, keys, fnOptions, labelFor, onRollupColumnsChange, swapColumnKey],\n  );\n\n  const removeRef = useCallback(\n    (index: number) => {\n      const current = rollupColumns[index];\n      if (!current) return;\n      onRollupColumnsChange(rollupColumns.filter((_, i) => i !== index));\n      swapColumnKey(rollupColumnDataKey(current), null);\n    },\n    [rollupColumns, onRollupColumnsChange, swapColumnKey],\n  );\n\n  /**\n   * Add the first aggregate not already in the view, scanning sources in\n   * declaration order (count first, then each field \u00D7 each of its functions).\n   * \"Add\" must never be a no-op that looks like a broken button.\n   */\n  const addRef = useCallback(() => {\n    if (rollupColumns.length >= MAX_ROLLUP_COLUMNS) return;\n    const taken = new Set(keys);\n    for (const source of sources) {\n      const candidates: Array<{ field: string; fn: RollupFn }> = [\n        { field: ROLLUP_COUNT_FIELD, fn: 'count' },\n        ...source.fields.flatMap((f) => f.fns.map((fn) => ({ field: f.key, fn: fn as RollupFn }))),\n      ];\n      for (const c of candidates) {\n        const key = rollupColumnDataKey({ source: source.key, ...c });\n        if (taken.has(key)) continue;\n        const ref: RollupColumnRef = {\n          source: source.key,\n          field: c.field,\n          fn: c.fn,\n          label: labelFor(source, c.field, c.fn),\n        };\n        onRollupColumnsChange([...rollupColumns, ref]);\n        swapColumnKey(null, key);\n        return;\n      }\n    }\n  }, [rollupColumns, keys, sources, labelFor, onRollupColumnsChange, swapColumnKey]);\n\n  /** True when every legal aggregate is already in the view. */\n  const exhausted = useMemo(() => {\n    const taken = new Set(keys);\n    for (const source of sources) {\n      const candidates: Array<{ field: string; fn: RollupFn }> = [\n        { field: ROLLUP_COUNT_FIELD, fn: 'count' },\n        ...source.fields.flatMap((f) => f.fns.map((fn) => ({ field: f.key, fn: fn as RollupFn }))),\n      ];\n      if (candidates.some((c) => !taken.has(rollupColumnDataKey({ source: source.key, ...c })))) {\n        return false;\n      }\n    }\n    return true;\n  }, [keys, sources]);\n\n  if (loading) {\n    return (\n      <div className=\"hot-config-section-body\">\n        <p className=\"hot-config-empty-hint\">{t('dynamicTable.configureView.loading', 'Loading\u2026')}</p>\n      </div>\n    );\n  }\n\n  if (sources.length === 0) {\n    return (\n      <div className=\"hot-config-section-body\">\n        <p className=\"hot-config-empty-hint\">\n          {t(\n            'dynamicTable.configureView.rollupSourcesNone',\n            'Nothing on this table can be summarised yet.',\n          )}\n        </p>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"hot-config-filters\" data-rollup-editor>\n      <p className=\"hot-config-linked-hint\">\n        {t(\n          'dynamicTable.configureView.rollupHint',\n          'Summarise the records linked to each row \u2014 how many there are, or a total of one of their amounts.',\n        )}\n      </p>\n\n      {rollupColumns.length > 0 && (\n        <div className=\"hot-config-sorting-header\">\n          <span className=\"hot-config-sorting-header-label\">\n            {t('dynamicTable.configureView.rollupColumns', 'Summarised columns')}\n          </span>\n          <button\n            onClick={() => {\n              for (const key of keys) swapColumnKey(key, null);\n              onRollupColumnsChange([]);\n            }}\n            className=\"hot-config-clear-btn\"\n          >\n            {t('dynamicTable.configureView.clearAll', 'Clear all')}\n          </button>\n        </div>\n      )}\n\n      {rollupColumns.map((ref, index) => {\n        const source = sources.find((s) => s.key === ref.source);\n        const fns = fnOptions(source, ref.field);\n        return (\n          <div\n            key={rollupColumnDataKey(ref)}\n            className=\"hot-config-filter-row\"\n            data-rollup-row={rollupColumnDataKey(ref)}\n          >\n            <SelectMenu\n              value={ref.source}\n              onChange={(next) => updateRef(index, { source: next })}\n              options={sources.map((s) => ({ value: s.key, label: s.label }))}\n              className=\"hot-config-filter-select\"\n              ariaLabel={t('dynamicTable.configureView.rollupSource', 'Related records')}\n              dataAttributes={{ 'data-rollup-source': true }}\n            />\n\n            <SelectMenu\n              value={ref.field}\n              onChange={(next) => updateRef(index, { field: next })}\n              options={fieldOptions(source)}\n              className=\"hot-config-filter-select\"\n              ariaLabel={t('dynamicTable.configureView.rollupField', 'What to summarise')}\n              dataAttributes={{ 'data-rollup-field': true }}\n            />\n\n            {/* One legal function means there is nothing to choose. The control\n                stays on screen \u2014 disabled, showing what WILL be used \u2014 because\n                removing it would make the three-step row change shape row by\n                row, and a shifting layout reads as a glitch. */}\n            <SelectMenu\n              value={ref.fn}\n              onChange={(next) => updateRef(index, { fn: next as RollupFn })}\n              options={fns.map((fn) => ({ value: fn, label: fnLabel(fn) }))}\n              disabled={fns.length <= 1}\n              className=\"hot-config-filter-select hot-config-filter-operator\"\n              ariaLabel={t('dynamicTable.configureView.rollupFn', 'Function')}\n              dataAttributes={{ 'data-rollup-fn': true }}\n            />\n\n            <button\n              onClick={() => removeRef(index)}\n              className=\"hot-config-filter-remove\"\n              aria-label={t('dynamicTable.configureView.remove', 'Remove')}\n            >\n              <X className=\"w-3.5 h-3.5\" />\n            </button>\n          </div>\n        );\n      })}\n\n      <button\n        onClick={addRef}\n        disabled={exhausted || rollupColumns.length >= MAX_ROLLUP_COLUMNS}\n        className=\"hot-config-add-btn\"\n        data-rollup-add\n      >\n        <Plus className=\"w-3.5 h-3.5\" aria-hidden />\n        {t('dynamicTable.configureView.rollupAdd', 'Add summarised column')}\n      </button>\n\n      {rollupColumns.length >= MAX_ROLLUP_COLUMNS && (\n        <p className=\"hot-config-filters-label\">\n          {t('dynamicTable.configureView.rollupLimitReached', 'Column limit reached ({max})', {\n            max: MAX_ROLLUP_COLUMNS,\n          })}\n        </p>\n      )}\n    </div>\n  );\n};\n\n/** English fallbacks. `count` names the thing, the rest name the operation. */\nconst DEFAULT_FN_LABELS: Record<RollupFn, string> = {\n  count: 'Count',\n  sum: 'Sum of',\n  avg: 'Average of',\n  min: 'Min of',\n  max: 'Max of',\n};\n\nexport default ConfigureViewRollups;\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/backend/dynamic-table/components/ConfigureViewSorting.js

@@ -0,0 +1,107 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { Plus, X } from "lucide-react";
+import SelectMenu from "./SelectMenu.js";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { generateSortRuleId, getSortDirectionLabels } from "../types/perspective.js";
+const ConfigureViewSorting = ({
+  columns,
+  sortRules,
+  onSortRulesChange
+}) => {
+  const t = useT();
+  const addSortRule = useCallback(() => {
+    const usedFields = sortRules.map((r) => r.field);
+    const availableColumn = columns.find((c) => !usedFields.includes(c.data));
+    const newRule = {
+      id: generateSortRuleId(),
+      field: availableColumn?.data || columns[0]?.data || "",
+      direction: "asc"
+    };
+    onSortRulesChange([...sortRules, newRule]);
+  }, [columns, sortRules, onSortRulesChange]);
+  const removeSortRule = useCallback((id) => {
+    onSortRulesChange(sortRules.filter((rule) => rule.id !== id));
+  }, [sortRules, onSortRulesChange]);
+  const updateSortRule = useCallback((id, updates) => {
+    onSortRulesChange(sortRules.map(
+      (rule) => rule.id === id ? { ...rule, ...updates } : rule
+    ));
+  }, [sortRules, onSortRulesChange]);
+  const clearAll = useCallback(() => {
+    onSortRulesChange([]);
+  }, [onSortRulesChange]);
+  const getAvailableColumns = (currentRuleId) => {
+    const usedFields = sortRules.filter((r) => r.id !== currentRuleId).map((r) => r.field);
+    return columns.filter((c) => !usedFields.includes(c.data));
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "hot-config-sorting", children: [
+    sortRules.length === 0 ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("div", { className: "hot-config-sorting-header", children: [
+        /* @__PURE__ */ jsx("span", { className: "hot-config-sorting-header-label", children: t("dynamicTable.configureView.sortBy", "Sort by") }),
+        /* @__PURE__ */ jsx("button", { onClick: clearAll, className: "hot-config-clear-btn", children: t("dynamicTable.configureView.clearAll", "Clear all") })
+      ] }),
+      sortRules.map((rule, index) => {
+        const availableColumns = getAvailableColumns(rule.id);
+        const currentColumn = columns.find((c) => c.data === rule.field);
+        return /* @__PURE__ */ jsxs("div", { className: "hot-config-sort-row", children: [
+          /* @__PURE__ */ jsx("span", { className: "hot-config-sort-index", children: index + 1 }),
+          /* @__PURE__ */ jsx(
+            SelectMenu,
+            {
+              value: rule.field,
+              onChange: (next) => updateSortRule(rule.id, { field: next }),
+              options: [
+                ...currentColumn ? [{ value: currentColumn.data, label: currentColumn.title || currentColumn.data }] : [],
+                ...availableColumns.filter((c) => c.data !== rule.field).map((col) => ({ value: col.data, label: col.title || col.data }))
+              ],
+              className: "hot-config-sort-select",
+              ariaLabel: t("dynamicTable.filter.field", "Field")
+            }
+          ),
+          (() => {
+            const labels = getSortDirectionLabels(currentColumn?.type);
+            return /* @__PURE__ */ jsx(
+              SelectMenu,
+              {
+                value: rule.direction,
+                onChange: (next) => updateSortRule(rule.id, { direction: next }),
+                options: [
+                  { value: "asc", label: labels.asc },
+                  { value: "desc", label: labels.desc }
+                ],
+                className: "hot-config-sort-direction-select",
+                ariaLabel: t("dynamicTable.configureView.direction", "Direction")
+              }
+            );
+          })(),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => removeSortRule(rule.id),
+              className: "hot-config-sort-remove",
+              children: /* @__PURE__ */ jsx(X, { className: "w-3.5 h-3.5" })
+            }
+          )
+        ] }, rule.id);
+      })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: addSortRule,
+        disabled: sortRules.length >= columns.length,
+        className: "hot-config-add-btn",
+        children: [
+          /* @__PURE__ */ jsx(Plus, { className: "w-3.5 h-3.5", "aria-hidden": true }),
+          t("dynamicTable.configureView.addSort", "Add sort")
+        ]
+      }
+    )
+  ] });
+};
+var ConfigureViewSorting_default = ConfigureViewSorting;
+export {
+  ConfigureViewSorting_default as default
+};
+//# sourceMappingURL=ConfigureViewSorting.js.map

package/dist/backend/dynamic-table/components/ConfigureViewSorting.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/backend/dynamic-table/components/ConfigureViewSorting.tsx"],
+  "sourcesContent": ["import React, { useCallback } from 'react';\nimport { Plus, X } from 'lucide-react';\nimport SelectMenu from './SelectMenu';\nimport { useT } from '@open-mercato/shared/lib/i18n/context';\nimport { ColumnDef } from '../types/index';\nimport { SortRule, generateSortRuleId, getSortDirectionLabels } from '../types/perspective';\n\ninterface ConfigureViewSortingProps {\n  columns: ColumnDef[];\n  sortRules: SortRule[];\n  onSortRulesChange: (rules: SortRule[]) => void;\n}\n\nconst ConfigureViewSorting: React.FC<ConfigureViewSortingProps> = ({\n  columns,\n  sortRules,\n  onSortRulesChange,\n}) => {\n  const t = useT();\n  const addSortRule = useCallback(() => {\n    const usedFields = sortRules.map(r => r.field);\n    const availableColumn = columns.find(c => !usedFields.includes(c.data));\n    const newRule: SortRule = {\n      id: generateSortRuleId(),\n      field: availableColumn?.data || columns[0]?.data || '',\n      direction: 'asc',\n    };\n    onSortRulesChange([...sortRules, newRule]);\n  }, [columns, sortRules, onSortRulesChange]);\n\n  const removeSortRule = useCallback((id: string) => {\n    onSortRulesChange(sortRules.filter(rule => rule.id !== id));\n  }, [sortRules, onSortRulesChange]);\n\n  const updateSortRule = useCallback((id: string, updates: Partial<SortRule>) => {\n    onSortRulesChange(sortRules.map(rule =>\n      rule.id === id ? { ...rule, ...updates } : rule\n    ));\n  }, [sortRules, onSortRulesChange]);\n\n  const clearAll = useCallback(() => {\n    onSortRulesChange([]);\n  }, [onSortRulesChange]);\n\n  const getAvailableColumns = (currentRuleId: string) => {\n    const usedFields = sortRules\n      .filter(r => r.id !== currentRuleId)\n      .map(r => r.field);\n    return columns.filter(c => !usedFields.includes(c.data));\n  };\n\n  return (\n    <div className=\"hot-config-sorting\">\n      {sortRules.length === 0 ? null : (\n        <>\n          <div className=\"hot-config-sorting-header\">\n            <span className=\"hot-config-sorting-header-label\">{t('dynamicTable.configureView.sortBy', 'Sort by')}</span>\n            <button onClick={clearAll} className=\"hot-config-clear-btn\">\n              {t('dynamicTable.configureView.clearAll', 'Clear all')}\n            </button>\n          </div>\n          {sortRules.map((rule, index) => {\n            const availableColumns = getAvailableColumns(rule.id);\n            const currentColumn = columns.find(c => c.data === rule.field);\n\n            return (\n              <div key={rule.id} className=\"hot-config-sort-row\">\n                <span className=\"hot-config-sort-index\">{index + 1}</span>\n                <SelectMenu\n                  value={rule.field}\n                  onChange={(next) => updateSortRule(rule.id, { field: next })}\n                  options={[\n                    ...(currentColumn\n                      ? [{ value: currentColumn.data, label: currentColumn.title || currentColumn.data }]\n                      : []),\n                    ...availableColumns\n                      .filter((c) => c.data !== rule.field)\n                      .map((col) => ({ value: col.data, label: col.title || col.data })),\n                  ]}\n                  className=\"hot-config-sort-select\"\n                  ariaLabel={t('dynamicTable.filter.field', 'Field')}\n                />\n                {(() => {\n                  const labels = getSortDirectionLabels(currentColumn?.type);\n                  return (\n                    <SelectMenu\n                      value={rule.direction}\n                      onChange={(next) => updateSortRule(rule.id, { direction: next as 'asc' | 'desc' })}\n                      options={[\n                        { value: 'asc', label: labels.asc },\n                        { value: 'desc', label: labels.desc },\n                      ]}\n                      className=\"hot-config-sort-direction-select\"\n                      ariaLabel={t('dynamicTable.configureView.direction', 'Direction')}\n                    />\n                  );\n                })()}\n                <button\n                  onClick={() => removeSortRule(rule.id)}\n                  className=\"hot-config-sort-remove\"\n                >\n                  <X className=\"w-3.5 h-3.5\" />\n                </button>\n              </div>\n            );\n          })}\n        </>\n      )}\n      <button\n        onClick={addSortRule}\n        disabled={sortRules.length >= columns.length}\n        className=\"hot-config-add-btn\"\n      >\n        <Plus className=\"w-3.5 h-3.5\" aria-hidden />\n        {t('dynamicTable.configureView.addSort', 'Add sort')}\n      </button>\n    </div>\n  );\n};\n\nexport default ConfigureViewSorting;\n"],
+  "mappings": "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",
+  "names": []
+}