@freighttech/ui 0.13.18

package/src/backend/dynamic-table/__tests__/commentAudience.test.tsx

@@ -0,0 +1,137 @@
+import * as React from 'react'
+import { render, fireEvent, screen, waitFor } from '@testing-library/react'
+import { I18nProvider } from '@open-mercato/shared/lib/i18n/context'
+import CellCommentDialog from '../components/CellCommentDialog'
+
+/**
+ * B8c — WHO IS THIS NOTE FOR?
+ *
+ * Two kinds of note share the grid and read identically today: the remark that
+ * ends up printed on the carrier's waybill, and the internal aside ("Szymon,
+ * sprawdź proszę coś"). Nobody can select the printed set without re-reading
+ * every thread by hand.
+ *
+ * The rules pinned here:
+ *   • `internal` is the default, always — a note never escapes to a carrier
+ *     because someone forgot to look at a control;
+ *   • the choice is two visible options, never a closed dropdown, so it is
+ *     legible while the note is being written (house rule: no native selects);
+ *   • the flag reaches the server with the comment, in single-cell and bulk
+ *     mode alike;
+ *   • an existing carrier-facing note is marked as such in the thread.
+ */
+
+const calls: Array<{ url: string; body: any }> = []
+
+jest.mock('../../utils/apiCall', () => ({
+  apiCall: jest.fn(async (url: string, init?: any) => {
+    const body = init?.body ? JSON.parse(init.body) : undefined
+    calls.push({ url, body })
+    if (url.startsWith('/api/annotations/annotations?')) {
+      return {
+        ok: true,
+        result: {
+          items: [
+            {
+              id: 'ann-1',
+              entityType: 'folder_unit',
+              rowId: 'u1',
+              columnKey: 'truckPlate',
+              color: null,
+              comments: [
+                { id: 'c1', userId: 'u', content: 'gate 4, bring the seal', audience: 'carrier' },
+              ],
+              assignees: [],
+            },
+          ],
+        },
+      }
+    }
+    return { ok: true, result: { id: 'new-id' } }
+  }),
+}))
+
+function renderDialog(props: Record<string, unknown> = {}) {
+  return render(
+    React.createElement(
+      I18nProvider as any,
+      { locale: 'en', dict: {} },
+      React.createElement(CellCommentDialog as any, {
+        isOpen: true,
+        onClose: () => {},
+        entityType: 'folder_unit',
+        rowId: 'u1',
+        columnKey: 'truckPlate',
+        columnTitle: 'Truck plate',
+        annotationId: 'ann-1',
+        ...props,
+      }),
+    ),
+  )
+}
+
+beforeEach(() => {
+  calls.length = 0
+})
+
+const lastPost = (match: string) =>
+  [...calls].reverse().find((c) => c.url.includes(match) && c.body)
+
+describe('CellCommentDialog — note audience (B8c)', () => {
+  it('offers both audiences as visible options, with internal preselected', () => {
+    renderDialog()
+    const internal = screen.getByRole('radio', { name: /internal note/i })
+    const carrier = screen.getByRole('radio', { name: /for the carrier/i })
+    expect(internal).toHaveAttribute('aria-checked', 'true')
+    expect(carrier).toHaveAttribute('aria-checked', 'false')
+    // House rule: never a native <select>.
+    expect(document.querySelector('select')).toBeNull()
+  })
+
+  it('sends the chosen audience with a single-cell comment', async () => {
+    renderDialog()
+    fireEvent.click(screen.getByRole('radio', { name: /for the carrier/i }))
+    fireEvent.change(screen.getByRole('textbox'), { target: { value: 'Load through gate 4' } })
+    fireEvent.click(screen.getByRole('button', { name: /^send$/i }))
+    await waitFor(() => expect(lastPost('/comments')).toBeTruthy())
+    expect(lastPost('/comments')!.body).toMatchObject({
+      content: 'Load through gate 4',
+      audience: 'carrier',
+    })
+  })
+
+  it('defaults to internal when the writer touches nothing', async () => {
+    renderDialog()
+    fireEvent.change(screen.getByRole('textbox'), { target: { value: 'Szymon, sprawdź proszę' } })
+    fireEvent.click(screen.getByRole('button', { name: /^send$/i }))
+    await waitFor(() => expect(lastPost('/comments')).toBeTruthy())
+    expect(lastPost('/comments')!.body.audience).toBe('internal')
+  })
+
+  it('marks an existing carrier-facing note in the thread', async () => {
+    renderDialog()
+    await waitFor(() => expect(screen.getByText(/gate 4, bring the seal/)).toBeInTheDocument())
+    expect(screen.getByTitle(/printed on the carrier document/i)).toBeInTheDocument()
+  })
+
+  it('carries the audience through a bulk comment, one request per scope', async () => {
+    renderDialog({
+      bulkCells: [
+        { entityType: 'folder_unit', rowId: 'u1', columnKey: 'containerNumber' },
+        { entityType: 'folder_unit_leg', rowId: 'leg-1', columnKey: 'truckPlate' },
+      ],
+    })
+    fireEvent.click(screen.getByRole('radio', { name: /for the carrier/i }))
+    fireEvent.change(screen.getByRole('textbox'), { target: { value: 'Seal check on arrival' } })
+    fireEvent.click(screen.getByRole('button', { name: /^send$/i }))
+    await waitFor(() =>
+      expect(calls.filter((c) => c.body?.comment === 'Seal check on arrival').length).toBe(2),
+    )
+    const posted = calls.filter((c) => c.body?.comment === 'Seal check on arrival')
+    expect(posted.every((c) => c.body.audience === 'carrier')).toBe(true)
+    // A range can span two scopes; each goes to its own batch call.
+    expect(new Set(posted.map((c) => c.body.entityType))).toEqual(
+      new Set(['folder_unit', 'folder_unit_leg']),
+    )
+  })
+})

package/src/backend/dynamic-table/__tests__/commentScope.test.tsx

@@ -0,0 +1,214 @@
+import * as React from 'react'
+import { render, fireEvent, waitFor } from '@testing-library/react'
+import { I18nProvider } from '@open-mercato/shared/lib/i18n/context'
+import DynamicTable from '../DynamicTable'
+import type { ColumnDef } from '../types/index'
+
+/**
+ * B8a — A COMMENT BELONGS TO A RECORD, NOT TO A ROW.
+ * B9  — A COMMENT MUST BE FINDABLE.
+ *
+ * The transport list shows one row per unit-LEG but keys the table on the
+ * container. A note left on the truck plate of the road leg therefore surfaced
+ * on the sea leg of the same container too: *"on się teraz powiela w innych
+ * miejscach."* Nothing was being copied — both rows were asking the annotations
+ * API for the same id.
+ *
+ * B9's finding was equally blunt: the only way into the comment feature was
+ * `Shift`+click, and the product owner could not find his own feature —
+ * *"Ja sam tego nie znalazłem."*
+ *
+ * These tests read the grid the way a user does: two rows of the same
+ * container, a leg column and a container column, and a look at what each cell
+ * actually shows.
+ */
+
+const columns: ColumnDef[] = [
+  { data: 'containerNumber', title: 'Container' },
+  { data: 'truckPlate', title: 'Truck plate' },
+]
+
+/** Two legs of ONE container: same `unitId`, different unit-leg `id`. */
+const makeRows = () => [
+  { id: 'leg-sea', unitId: 'unit-1', containerNumber: 'MSCU1', truckPlate: '' },
+  { id: 'leg-road', unitId: 'unit-1', containerNumber: 'MSCU1', truckPlate: 'WX 1234' },
+]
+
+/** The transport page's scope map, in miniature. */
+const cellTarget = (row: Record<string, any>, col: ColumnDef) =>
+  col.data === 'truckPlate'
+    ? { entityType: 'folder_unit_leg', rowId: String(row.id) }
+    : { entityType: 'folder_unit', rowId: String(row.unitId) }
+
+type Requested = { entityType: string; rowIds: string[] }
+let requested: Requested[] = []
+/** entityType:rowId:columnKey → number of comments the server reports. */
+let serverComments: Record<string, number> = {}
+
+jest.mock('../../utils/apiCall', () => ({
+  apiCall: jest.fn(async (url: string) => {
+    const parsed = new URL(url, 'http://localhost')
+    // Only the annotations read is of interest — the grid makes other calls.
+    if (!parsed.pathname.startsWith('/api/annotations/annotations')) return { ok: true, result: {} }
+    const entityType = parsed.searchParams.get('entityType') ?? ''
+    const rowIds = (parsed.searchParams.get('rowIds') ?? '').split(',').filter(Boolean)
+    requested.push({ entityType, rowIds })
+    const items: any[] = []
+    for (const rowId of rowIds) {
+      for (const col of ['containerNumber', 'truckPlate']) {
+        const count = serverComments[`${entityType}:${rowId}:${col}`] ?? 0
+        if (!count) continue
+        items.push({
+          id: `${entityType}-${rowId}-${col}`,
+          entityType,
+          rowId,
+          columnKey: col,
+          color: null,
+          comments: Array.from({ length: count }, (_, i) => ({
+            id: `c${i}`,
+            content: 'note',
+            audience: 'internal',
+          })),
+          assignees: [],
+        })
+      }
+    }
+    return { ok: true, result: { items } }
+  }),
+}))
+
+function Harness(props: Record<string, unknown>) {
+  const tableRef = React.useRef<HTMLDivElement | null>(null)
+  const [data] = React.useState(makeRows)
+  return React.createElement(
+    I18nProvider as any,
+    { locale: 'en', dict: {} },
+    React.createElement(DynamicTable as any, {
+      data,
+      columns,
+      tableRef,
+      rowHeaders: true,
+      height: 400,
+      idColumnName: 'unitId',
+      enableComments: true,
+      commentsEntityType: 'folder_unit',
+      ...props,
+    }),
+  )
+}
+
+beforeAll(() => {
+  const rect = {
+    width: 1200, height: 600, top: 0, left: 0, right: 1200, bottom: 600, x: 0, y: 0,
+    toJSON() {},
+  }
+  Object.defineProperty(HTMLElement.prototype, 'getBoundingClientRect', {
+    configurable: true,
+    value: () => rect,
+  })
+  for (const [prop, value] of [
+    ['clientHeight', 600],
+    ['offsetHeight', 600],
+    ['clientWidth', 1200],
+    ['offsetWidth', 1200],
+  ] as const) {
+    Object.defineProperty(HTMLElement.prototype, prop, { configurable: true, get: () => value })
+  }
+})
+
+beforeEach(() => {
+  requested = []
+  serverComments = {}
+})
+
+const cell = (row: number, col: number) =>
+  document.querySelector(`td.hot-cell[data-row="${row}"][data-col="${col}"]`) as HTMLElement | null
+
+const indicatorIn = (row: number, col: number) =>
+  cell(row, col)?.querySelector('.cell-comment-indicator:not(.cell-comment-indicator-ghost)') ?? null
+
+describe('cell comments — scope (B8a)', () => {
+  it('asks for BOTH scopes on screen, each with the ids that belong to it', async () => {
+    render(React.createElement(Harness, { commentsCellTarget: cellTarget }))
+    // One request per SCOPE. Asserted as a set rather than a count: a settling
+    // render may repeat a request, and what matters is which ids each scope is
+    // asked for, never how many times.
+    await waitFor(() => expect(new Set(requested.map((r) => r.entityType)).size).toBe(2))
+    const byType = Object.fromEntries(requested.map((r) => [r.entityType, r.rowIds.slice().sort()]))
+    expect(byType['folder_unit']).toEqual(['unit-1'])
+    expect(byType['folder_unit_leg']).toEqual(['leg-road', 'leg-sea'])
+  })
+
+  it('shows a leg-scoped comment on that leg ONLY — the duplication defect', async () => {
+    serverComments['folder_unit_leg:leg-road:truckPlate'] = 1
+    render(React.createElement(Harness, { commentsCellTarget: cellTarget }))
+    // Row 1 is the road leg; row 0 is the sea leg of the SAME container.
+    await waitFor(() => expect(indicatorIn(1, 1)).not.toBeNull())
+    expect(indicatorIn(0, 1)).toBeNull()
+  })
+
+  it('still shows a container-scoped comment on both rows — it IS the same cell', async () => {
+    serverComments['folder_unit:unit-1:containerNumber'] = 1
+    render(React.createElement(Harness, { commentsCellTarget: cellTarget }))
+    await waitFor(() => expect(indicatorIn(0, 0)).not.toBeNull())
+    expect(indicatorIn(1, 0)).not.toBeNull()
+  })
+
+  it('without a target resolver, behaves exactly as before: one scope, keyed on the id column', async () => {
+    serverComments['folder_unit:unit-1:truckPlate'] = 1
+    render(React.createElement(Harness, {}))
+    await waitFor(() => expect(requested.length).toBeGreaterThan(0))
+    // ONE scope, and the id is the table's id column — today's behaviour, byte
+    // for byte, for the 50-odd consumers that declare no resolver.
+    expect(new Set(requested.map((r) => r.entityType))).toEqual(new Set(['folder_unit']))
+    expect(requested[0].rowIds).toEqual(['unit-1'])
+    // …including the duplication, which is the historical behaviour every other
+    // consumer of this component still relies on.
+    await waitFor(() => expect(indicatorIn(0, 1)).not.toBeNull())
+    expect(indicatorIn(1, 1)).not.toBeNull()
+  })
+})
+
+describe('cell comments — discoverability (B9)', () => {
+  it('shows no ghost affordance on a cell nobody has selected', () => {
+    render(React.createElement(Harness, {}))
+    expect(document.querySelector('.cell-comment-indicator-ghost')).toBeNull()
+  })
+
+  it('offers a ghost affordance on the focused cell, and only there', () => {
+    render(React.createElement(Harness, {}))
+    fireEvent.mouseDown(cell(1, 1)!)
+    const ghosts = document.querySelectorAll('.cell-comment-indicator-ghost')
+    expect(ghosts.length).toBe(1)
+    expect(ghosts[0].closest('td')?.getAttribute('data-row')).toBe('1')
+    expect(ghosts[0].getAttribute('aria-label')).toMatch(/add a comment/i)
+  })
+
+  it('does not double up on a cell that already has a real comment', async () => {
+    serverComments['folder_unit:unit-1:truckPlate'] = 1
+    render(React.createElement(Harness, {}))
+    await waitFor(() => expect(indicatorIn(1, 1)).not.toBeNull())
+    fireEvent.mouseDown(cell(1, 1)!)
+    expect(cell(1, 1)!.querySelectorAll('.cell-comment-indicator').length).toBe(1)
+  })
+
+  it('opens the comment dialog when the ghost affordance is clicked', async () => {
+    render(React.createElement(Harness, {}))
+    fireEvent.mouseDown(cell(1, 1)!)
+    const ghost = document.querySelector('.cell-comment-indicator-ghost')!
+    fireEvent.mouseDown(ghost, { bubbles: true })
+    await waitFor(() =>
+      expect(document.querySelector('.hot-comment-popover')).not.toBeNull(),
+    )
+  })
+
+  it('opens the comment dialog on Shift+F2 — Excel’s own chord', async () => {
+    const { container } = render(React.createElement(Harness, {}))
+    fireEvent.mouseDown(cell(1, 1)!)
+    const grid = container.querySelector('.hot-virtual-container') as HTMLElement
+    fireEvent.keyDown(grid, { key: 'F2', shiftKey: true })
+    await waitFor(() =>
+      expect(document.querySelector('.hot-comment-popover')).not.toBeNull(),
+    )
+  })
+})

package/src/backend/dynamic-table/__tests__/conditionalFormat.test.ts

@@ -0,0 +1,175 @@
+import {
+  compileConditionalFormats,
+  conditionalFormatClassName,
+  parseConditionalFormats,
+  generateConditionalFormatRuleId,
+  MAX_CONDITIONAL_FORMAT_RULES,
+  type ConditionalFormatRule,
+} from '../utils/conditionalFormat'
+
+const rule = (over: Partial<ConditionalFormatRule>): ConditionalFormatRule => ({
+  id: 'cf-1',
+  field: 'amount',
+  operator: 'gt',
+  value: 100,
+  style: 'red',
+  ...over,
+})
+
+function paint(rules: ConditionalFormatRule[], field: string, value: unknown, row: any = {}) {
+  return conditionalFormatClassName(compileConditionalFormats(rules), field, value, row)
+}
+
+describe('conditionalFormat — operators', () => {
+  it('numeric comparisons', () => {
+    expect(paint([rule({ operator: 'gt', value: 100 })], 'amount', 150)).toBe('cell-red')
+    expect(paint([rule({ operator: 'gt', value: 100 })], 'amount', 50)).toBeUndefined()
+    expect(paint([rule({ operator: 'gte', value: 100 })], 'amount', 100)).toBe('cell-red')
+    expect(paint([rule({ operator: 'lt', value: 100 })], 'amount', 99)).toBe('cell-red')
+    expect(paint([rule({ operator: 'lte', value: 100 })], 'amount', 100)).toBe('cell-red')
+  })
+
+  it('compares string cell values numerically (the grid stores numbers as text)', () => {
+    expect(paint([rule({ operator: 'gt', value: 100 })], 'amount', '150.50')).toBe('cell-red')
+  })
+
+  it('eq / neq fall back to case-insensitive text when the value is not numeric', () => {
+    const r = rule({ field: 'status', operator: 'eq', value: 'Open', style: 'green' })
+    expect(paint([r], 'status', 'open')).toBe('cell-green')
+    expect(paint([r], 'status', 'closed')).toBeUndefined()
+    expect(paint([{ ...r, operator: 'neq' }], 'status', 'closed')).toBe('cell-green')
+  })
+
+  it('contains is case-insensitive substring matching', () => {
+    const r = rule({ field: 'name', operator: 'contains', value: 'ACME', style: 'yellow' })
+    expect(paint([r], 'name', 'acme logistics')).toBe('cell-yellow')
+    expect(paint([r], 'name', 'other')).toBeUndefined()
+  })
+
+  it('isEmpty / isNotEmpty treat blank strings as empty', () => {
+    const empty = rule({ field: 'ref', operator: 'isEmpty', style: 'red-subtle' })
+    expect(paint([empty], 'ref', '')).toBe('cell-red-subtle')
+    expect(paint([empty], 'ref', '   ')).toBe('cell-red-subtle')
+    expect(paint([empty], 'ref', null)).toBe('cell-red-subtle')
+    expect(paint([empty], 'ref', 'X')).toBeUndefined()
+    expect(paint([{ ...empty, operator: 'isNotEmpty' }], 'ref', 'X')).toBe('cell-red-subtle')
+  })
+})
+
+describe('conditionalFormat — the ETA-vs-ATA relative case', () => {
+  const delayed = rule({
+    id: 'cf-delay',
+    field: 'ata',
+    operator: 'afterField',
+    compareField: 'eta',
+    style: 'red',
+  })
+
+  it('paints the cell when the actual arrival is after the estimate', () => {
+    expect(paint([delayed], 'ata', '2026-08-05', { eta: '2026-08-01', ata: '2026-08-05' })).toBe(
+      'cell-red',
+    )
+  })
+
+  it('leaves an on-time arrival alone', () => {
+    expect(
+      paint([delayed], 'ata', '2026-07-30', { eta: '2026-08-01', ata: '2026-07-30' }),
+    ).toBeUndefined()
+  })
+
+  it('does not paint when either side is missing rather than guessing', () => {
+    expect(paint([delayed], 'ata', null, { eta: '2026-08-01' })).toBeUndefined()
+    expect(paint([delayed], 'ata', '2026-08-05', {})).toBeUndefined()
+  })
+
+  it('beforeField is the mirror image', () => {
+    const early = { ...delayed, operator: 'beforeField' as const, style: 'green' as const }
+    expect(paint([early], 'ata', '2026-07-30', { eta: '2026-08-01' })).toBe('cell-green')
+  })
+})
+
+describe('conditionalFormat — compilation', () => {
+  it('first matching rule wins', () => {
+    const rules = [
+      rule({ id: 'a', operator: 'gt', value: 10, style: 'yellow' }),
+      rule({ id: 'b', operator: 'gt', value: 100, style: 'red' }),
+    ]
+    expect(paint(rules, 'amount', 150)).toBe('cell-yellow')
+  })
+
+  it('only evaluates rules for the cell’s own field', () => {
+    const rules = [rule({ field: 'other', operator: 'isNotEmpty' })]
+    expect(paint(rules, 'amount', 5)).toBeUndefined()
+  })
+
+  it('drops rules that cannot produce a predicate instead of matching everything', () => {
+    const broken = [
+      rule({ operator: 'gt', value: 'not-a-number' }),
+      rule({ id: 'cf-2', operator: 'beforeField', compareField: undefined }),
+      rule({ id: 'cf-3', operator: 'contains', value: '' }),
+    ]
+    const compiled = compileConditionalFormats(broken)
+    expect(compiled.isEmpty).toBe(true)
+    expect(conditionalFormatClassName(compiled, 'amount', 999, {})).toBeUndefined()
+  })
+
+  it('an empty rule set short-circuits', () => {
+    expect(compileConditionalFormats([]).isEmpty).toBe(true)
+    expect(compileConditionalFormats(undefined).isEmpty).toBe(true)
+  })
+
+  it('caps the compiled rule set (render-path performance guard)', () => {
+    const many = Array.from({ length: MAX_CONDITIONAL_FORMAT_RULES + 5 }, (_, i) =>
+      rule({ id: `cf-${i}`, field: `f${i}`, operator: 'isNotEmpty' }),
+    )
+    expect(compileConditionalFormats(many).byField.size).toBe(MAX_CONDITIONAL_FORMAT_RULES)
+  })
+
+  it('mints unique ids', () => {
+    expect(generateConditionalFormatRuleId()).toMatch(/^cf-/)
+    expect(generateConditionalFormatRuleId()).not.toBe(generateConditionalFormatRuleId())
+  })
+})
+
+describe('parseConditionalFormats — persistence boundary', () => {
+  it('accepts well-formed rules', () => {
+    const parsed = parseConditionalFormats([
+      { id: 'cf-1', field: 'amount', operator: 'gt', value: 100, style: 'red' },
+    ])
+    expect(parsed).toHaveLength(1)
+    expect(parsed[0].operator).toBe('gt')
+  })
+
+  it('drops malformed entries rather than crashing the grid', () => {
+    const parsed = parseConditionalFormats([
+      { id: 'cf-1', field: 'amount', operator: 'gt', value: 100, style: 'red' },
+      { field: '', operator: 'gt', style: 'red' }, // no field
+      { field: 'x', operator: 'sideways', style: 'red' }, // unknown operator
+      { field: 'x', operator: 'gt', style: 'chartreuse' }, // unknown style
+      { field: 'x', operator: 'afterField', style: 'red' }, // relative with no target
+      null,
+      'garbage',
+      42,
+    ])
+    expect(parsed).toHaveLength(1)
+  })
+
+  it('returns [] for anything that is not an array (legacy views)', () => {
+    expect(parseConditionalFormats(undefined)).toEqual([])
+    expect(parseConditionalFormats({})).toEqual([])
+  })
+
+  it('derives an id when one is missing', () => {
+    const parsed = parseConditionalFormats([{ field: 'a', operator: 'isEmpty', style: 'red' }])
+    expect(parsed[0].id).toMatch(/^cf-/)
+  })
+
+  it('caps the persisted list', () => {
+    const many = Array.from({ length: 40 }, () => ({
+      field: 'a',
+      operator: 'isEmpty',
+      style: 'red',
+    }))
+    expect(parseConditionalFormats(many)).toHaveLength(MAX_CONDITIONAL_FORMAT_RULES)
+  })
+})