@open-mercato/core 0.7.1-develop.7178.1.ab93fbaf4e → 0.7.1-develop.7180.1.9717fbbb43

package/src/modules/staff/lib/time-tracking-ui/boardDirectory.ts

@@ -0,0 +1,231 @@
+"use client"
+
+import * as React from 'react'
+import { useQuery } from '@tanstack/react-query'
+import { apiCall } from '@open-mercato/ui/backend/utils/apiCall'
+import { useOrganizationScopeVersion } from '@open-mercato/shared/lib/frontend/useOrganizationScope'
+import {
+  readItems,
+  readString,
+  readTotal,
+  sortByPosition,
+  toBoardStatus,
+  type BoardApiRow,
+  type BoardStatus,
+} from './kanbanBoardData'
+
+/**
+ * The lookups every board surface needs — statuses, the caller's own staff member,
+ * assignee names and tag labels — behind one set of query keys.
+ *
+ * They live here rather than inside `KanbanBoard` so the filter chips, the flat list
+ * view and the board all read the *same* react-query entries. Two components asking for
+ * the project's statuses must not produce two requests, and a status renamed in one
+ * place must not stay stale in another.
+ */
+
+export const BOARD_QUERY_ROOT = ['staff', 'time-tracking', 'board'] as const
+
+export const BOARD_PAGE_SIZE = 50
+export const BOARD_DIRECTORY_PAGE_SIZE = 100
+
+export type BoardSelf = {
+  id: string
+  displayName: string | null
+}
+
+export type BoardTagOption = {
+  id: string
+  label: string
+}
+
+export function boardStatusesQueryKey(scopeVersion: number, timeProjectId: string) {
+  return [...BOARD_QUERY_ROOT, 'statuses', `scope:${scopeVersion}`, `project:${timeProjectId}`]
+}
+
+export function boardColumnQueryKey(
+  scopeVersion: number,
+  timeProjectId: string,
+  statusId: string,
+  pages: number,
+  filterKey: string,
+) {
+  return [
+    ...BOARD_QUERY_ROOT,
+    'column',
+    `scope:${scopeVersion}`,
+    `project:${timeProjectId}`,
+    `status:${statusId}`,
+    `pages:${pages}`,
+    `filters:${filterKey}`,
+  ]
+}
+
+export function boardSelfQueryKey(scopeVersion: number) {
+  return [...BOARD_QUERY_ROOT, 'self', `scope:${scopeVersion}`]
+}
+
+export type TaskPageResult = { items: BoardApiRow[]; total: number }
+
+/**
+ * Pulls up to `maxPages` pages of the tasks list, stopping as soon as the server has
+ * nothing more to give. Shared by the column queries and the flat list so both agree on
+ * what "one more page" means.
+ */
+export async function fetchTaskPages(
+  params: (page: number) => string,
+  maxPages: number,
+): Promise<TaskPageResult> {
+  const items: BoardApiRow[] = []
+  let total = 0
+  for (let page = 1; page <= maxPages; page += 1) {
+    const call = await apiCall<Record<string, unknown>>(`/api/staff/timesheets/tasks?${params(page)}`)
+    if (!call.ok) throw new Error('[internal] task page request failed')
+    const pageItems = readItems(call.result)
+    total = readTotal(call.result, items.length + pageItems.length)
+    items.push(...pageItems)
+    if (pageItems.length < BOARD_PAGE_SIZE || items.length >= total) break
+  }
+  return { items, total }
+}
+
+export function useBoardStatuses(timeProjectId: string) {
+  const scopeVersion = useOrganizationScopeVersion()
+  return useQuery<BoardStatus[]>({
+    queryKey: boardStatusesQueryKey(scopeVersion, timeProjectId),
+    staleTime: 30_000,
+    queryFn: async () => {
+      const call = await apiCall<Record<string, unknown>>(
+        `/api/staff/timesheets/task-statuses?timeProjectId=${encodeURIComponent(timeProjectId)}&page=1&pageSize=${BOARD_DIRECTORY_PAGE_SIZE}&sortField=position&sortDir=asc`,
+      )
+      if (!call.ok) throw new Error('[internal] task-statuses request failed')
+      const statuses = readItems(call.result)
+        .map(toBoardStatus)
+        .filter((status): status is BoardStatus => status !== null)
+      return sortByPosition(statuses)
+    },
+  })
+}
+
+/**
+ * The caller's own staff member — the identity behind "Przypisane do mnie" and the
+ * avatar the chip draws.
+ */
+export function useBoardSelf() {
+  const scopeVersion = useOrganizationScopeVersion()
+  return useQuery<BoardSelf | null>({
+    queryKey: boardSelfQueryKey(scopeVersion),
+    staleTime: 300_000,
+    queryFn: async () => {
+      const call = await apiCall<{ member?: { id?: string | null; displayName?: string | null } | null }>(
+        '/api/staff/team-members/self',
+      )
+      if (!call.ok) return null
+      const id = call.result?.member?.id ?? null
+      if (!id) return null
+      return { id, displayName: call.result?.member?.displayName ?? null }
+    },
+  })
+}
+
+/** Display names for the assignees a surface is about to render. */
+export function useAssigneeNames(assigneeIds: readonly string[]) {
+  const scopeVersion = useOrganizationScopeVersion()
+  const ids = React.useMemo(() => Array.from(new Set(assigneeIds)).sort((a, b) => (a < b ? -1 : a > b ? 1 : 0)), [assigneeIds])
+  return useQuery<Map<string, string>>({
+    queryKey: [...BOARD_QUERY_ROOT, 'assignees', `scope:${scopeVersion}`, ids.join(',')],
+    enabled: ids.length > 0,
+    staleTime: 300_000,
+    queryFn: async () => {
+      const call = await apiCall<Record<string, unknown>>(
+        `/api/staff/team-members?ids=${ids.map(encodeURIComponent).join(',')}&pageSize=${BOARD_DIRECTORY_PAGE_SIZE}`,
+      )
+      const names = new Map<string, string>()
+      if (!call.ok) return names
+      for (const row of readItems(call.result)) {
+        const id = readString(row, 'id')
+        if (!id) continue
+        names.set(id, readString(row, 'display_name', 'displayName') ?? id)
+      }
+      return names
+    },
+  })
+}
+
+/**
+ * Labels for the tags a surface is about to render.
+ *
+ * Only tags that actually have a label land in the map. A caller renders a chip
+ * for the ids it finds here and skips the rest, so a tag whose label has not
+ * arrived yet — or a row that carries none — is never drawn as its raw id.
+ */
+export function useTagLabels(tagIds: readonly string[]) {
+  const scopeVersion = useOrganizationScopeVersion()
+  const ids = React.useMemo(() => Array.from(new Set(tagIds)).sort((a, b) => (a < b ? -1 : a > b ? 1 : 0)), [tagIds])
+  return useQuery<Map<string, string>>({
+    queryKey: [...BOARD_QUERY_ROOT, 'tags', `scope:${scopeVersion}`, ids.join(',')],
+    enabled: ids.length > 0,
+    staleTime: 300_000,
+    queryFn: async () => {
+      const call = await apiCall<Record<string, unknown>>(
+        `/api/staff/timesheets/tags?ids=${ids.map(encodeURIComponent).join(',')}&pageSize=${BOARD_DIRECTORY_PAGE_SIZE}`,
+      )
+      const labels = new Map<string, string>()
+      if (!call.ok) return labels
+      for (const row of readItems(call.result)) {
+        const id = readString(row, 'id')
+        if (!id) continue
+        const label = readString(row, 'label')
+        if (!label) continue
+        labels.set(id, label)
+      }
+      return labels
+    },
+  })
+}
+
+/** Every tag in the organization — the option list behind the "Tag" filter. */
+export function useTagDirectory(enabled: boolean) {
+  const scopeVersion = useOrganizationScopeVersion()
+  return useQuery<BoardTagOption[]>({
+    queryKey: [...BOARD_QUERY_ROOT, 'tag-directory', `scope:${scopeVersion}`],
+    enabled,
+    staleTime: 300_000,
+    queryFn: async () => {
+      const call = await apiCall<Record<string, unknown>>(
+        `/api/staff/timesheets/tags?page=1&pageSize=${BOARD_DIRECTORY_PAGE_SIZE}&sortField=label&sortDir=asc`,
+      )
+      if (!call.ok) return []
+      return readItems(call.result)
+        .map((row) => {
+          const id = readString(row, 'id')
+          if (!id) return null
+          return { id, label: readString(row, 'label') ?? id }
+        })
+        .filter((tag): tag is BoardTagOption => tag !== null)
+    },
+  })
+}
+
+/** The people who can be picked as an assignee filter. */
+export function useStaffMemberDirectory(enabled: boolean) {
+  const scopeVersion = useOrganizationScopeVersion()
+  return useQuery<Array<{ id: string; displayName: string }>>({
+    queryKey: [...BOARD_QUERY_ROOT, 'member-directory', `scope:${scopeVersion}`],
+    enabled,
+    staleTime: 300_000,
+    queryFn: async () => {
+      const call = await apiCall<Record<string, unknown>>(
+        `/api/staff/team-members?page=1&pageSize=${BOARD_DIRECTORY_PAGE_SIZE}&sortField=displayName&sortDir=asc`,
+      )
+      if (!call.ok) return []
+      return readItems(call.result)
+        .map((row) => {
+          const id = readString(row, 'id')
+          if (!id) return null
+          return { id, displayName: readString(row, 'display_name', 'displayName') ?? id }
+        })
+        .filter((member): member is { id: string; displayName: string } => member !== null)
+    },
+  })
+}

package/src/modules/staff/lib/time-tracking-ui/boardFilters.ts

@@ -0,0 +1,128 @@
+/**
+ * Board filter state (T3.8) — the `dt-chips` row of screen 6.
+ *
+ * Three filters, and they are deliberately not all the same kind of filter:
+ *
+ *  - **assignee** narrows on the server. `/api/staff/timesheets/tasks` accepts
+ *    `assigneeStaffMemberId`, so the filter goes into the request and the column
+ *    totals stay honest.
+ *  - **status** does not narrow a request at all — it picks which columns render.
+ *    The board already asks one request per column keyed by `taskStatusId`, so
+ *    filtering by status is "render this column only", not "add a parameter".
+ *    The flat list view has no columns, so there it *is* a request parameter.
+ *  - **tag** narrows on the server too, since T7.6 gave `/api/staff/timesheets/tasks`
+ *    a `tagIds` parameter (W9). It used to filter loaded rows in the browser, which
+ *    made a match on page two invisible and the column badge count depend on how far
+ *    the board had been paged. The parameter means **every** listed tag, which is
+ *    what the chips have always meant.
+ *
+ * The split matters for caching: only the server-narrowed part may appear in a
+ * react-query key, otherwise flipping a chip would evict and refetch pages whose
+ * bytes did not change. `boardServerFilterKey` is that part.
+ */
+
+export type BoardFilters = {
+  assigneeStaffMemberId: string | null
+  taskStatusId: string | null
+  tagIds: string[]
+}
+
+export const EMPTY_BOARD_FILTERS: BoardFilters = {
+  assigneeStaffMemberId: null,
+  taskStatusId: null,
+  tagIds: [],
+}
+
+function readOptionalId(value: unknown): string | null {
+  return typeof value === 'string' && value.trim().length > 0 ? value.trim() : null
+}
+
+/** Parses whatever came out of storage, so a hand-edited or stale entry cannot wedge the board. */
+export function normalizeBoardFilters(raw: unknown): BoardFilters {
+  if (!raw || typeof raw !== 'object') return { ...EMPTY_BOARD_FILTERS }
+  const source = raw as Record<string, unknown>
+  const tagIds = Array.isArray(source.tagIds)
+    ? Array.from(
+        new Set(
+          source.tagIds
+            .map((entry) => readOptionalId(entry))
+            .filter((entry): entry is string => entry !== null),
+        ),
+      )
+    : []
+  return {
+    assigneeStaffMemberId: readOptionalId(source.assigneeStaffMemberId),
+    taskStatusId: readOptionalId(source.taskStatusId),
+    tagIds,
+  }
+}
+
+export function countActiveBoardFilters(filters: BoardFilters): number {
+  let count = 0
+  if (filters.assigneeStaffMemberId) count += 1
+  if (filters.taskStatusId) count += 1
+  return count + filters.tagIds.length
+}
+
+export function hasActiveBoardFilters(filters: BoardFilters): boolean {
+  return countActiveBoardFilters(filters) > 0
+}
+
+export type BoardFilterScope = {
+  /** The flat list view sends the status as a request parameter; the board picks columns instead. */
+  includeStatus?: boolean
+}
+
+/**
+ * The part of the filter state a request actually depends on — and therefore the only
+ * part allowed into a react-query key. Tags are ordered so that picking the same two
+ * chips in either order shares one cache entry.
+ */
+export function boardServerFilterKey(filters: BoardFilters, scope: BoardFilterScope = {}): string {
+  const parts = [`assignee:${filters.assigneeStaffMemberId ?? ''}`]
+  if (scope.includeStatus) parts.push(`status:${filters.taskStatusId ?? ''}`)
+  parts.push(`tags:${[...filters.tagIds].sort((a, b) => (a < b ? -1 : a > b ? 1 : 0)).join(',')}`)
+  return parts.join('|')
+}
+
+/** URL fragment appended to a tasks list request; always starts with `&` or is empty. */
+export function boardServerFilterParams(filters: BoardFilters, scope: BoardFilterScope = {}): string {
+  let params = ''
+  if (filters.assigneeStaffMemberId) {
+    params += `&assigneeStaffMemberId=${encodeURIComponent(filters.assigneeStaffMemberId)}`
+  }
+  if (scope.includeStatus && filters.taskStatusId) {
+    params += `&taskStatusId=${encodeURIComponent(filters.taskStatusId)}`
+  }
+  if (filters.tagIds.length > 0) {
+    params += `&tagIds=${encodeURIComponent([...filters.tagIds].sort((a, b) => (a < b ? -1 : a > b ? 1 : 0)).join(','))}`
+  }
+  return params
+}
+
+/** Which columns the board renders under the current status filter. */
+export function visibleBoardStatusIds<T extends { id: string }>(
+  statuses: readonly T[],
+  filters: BoardFilters,
+): T[] {
+  if (!filters.taskStatusId) return [...statuses]
+  return statuses.filter((status) => status.id === filters.taskStatusId)
+}
+
+export function withAssigneeFilter(filters: BoardFilters, staffMemberId: string | null): BoardFilters {
+  return { ...filters, assigneeStaffMemberId: readOptionalId(staffMemberId) }
+}
+
+export function withStatusFilter(filters: BoardFilters, taskStatusId: string | null): BoardFilters {
+  return { ...filters, taskStatusId: readOptionalId(taskStatusId) }
+}
+
+export function withTagFilter(filters: BoardFilters, tagId: string): BoardFilters {
+  if (filters.tagIds.includes(tagId)) return filters
+  return { ...filters, tagIds: [...filters.tagIds, tagId] }
+}
+
+export function withoutTagFilter(filters: BoardFilters, tagId: string): BoardFilters {
+  if (!filters.tagIds.includes(tagId)) return filters
+  return { ...filters, tagIds: filters.tagIds.filter((entry) => entry !== tagId) }
+}

package/src/modules/staff/lib/time-tracking-ui/boardSummary.ts

@@ -0,0 +1,20 @@
+/**
+ * What the screen-6 page head says under the title:
+ * `Nordvik — migracja B2B · 24 zadania · 78:20 zalogowane`.
+ *
+ * The active view (board or list) reports it upward rather than the head fetching the
+ * same tasks a second time, so the subtitle always describes exactly the rows the user
+ * is looking at — filters included.
+ *
+ * `loggedMinutes` MUST come from `sumTaskLoggedMinutes`. A task's `loggedMinutes` is the
+ * inclusive rollup (own + children, D-2), so folding parents and children together in a
+ * plain `reduce` counts the children twice — risk R10. That helper drops any row whose
+ * parent is present in the same set, which is why it is the only sanctioned way to total
+ * a mixed set.
+ */
+export type BoardSummary = {
+  taskCount: number
+  loggedMinutes: number
+}
+
+export const EMPTY_BOARD_SUMMARY: BoardSummary = { taskCount: 0, loggedMinutes: 0 }

package/src/modules/staff/lib/time-tracking-ui/kanbanBoardData.ts

@@ -0,0 +1,228 @@
+/**
+ * Row parsing and board arithmetic for the Kanban board of screen 6 (T3.6).
+ *
+ * Kept apart from `KanbanBoard.tsx` so the parts that decide what a card says —
+ * which rows become cards, what a column's hours are, where a dropped card lands —
+ * are unit-testable without a DOM, and so the board component stays about drag,
+ * optimistic writes and rollback.
+ *
+ * The column total deliberately delegates to `sumTaskLoggedMinutes` rather than
+ * folding `loggedMinutes` inline: that helper drops any row whose parent is present
+ * in the same set, which is the only guard against risk R10 (a parent's rollup
+ * already contains its children's minutes, so adding both double-counts).
+ */
+
+import { formatDuration } from '../time-tracking/duration'
+import { sumTaskLoggedMinutes } from '../timesheets-tasks/taskHoursTotals'
+import { STATUS_POSITION_GAP } from '../timesheets-tasks/statusPositions'
+import { resolveProjectColorHex } from '../timesheets-ui/colors'
+
+export type BoardApiRow = Record<string, unknown>
+
+export type BoardStatus = {
+  id: string
+  name: string
+  slug: string | null
+  color: string | null
+  position: number
+  isDefault: boolean
+  isDone: boolean
+}
+
+export type BoardTask = {
+  id: string
+  title: string
+  reference: string | null
+  timeProjectId: string | null
+  parentTaskId: string | null
+  taskStatusId: string | null
+  assigneeStaffMemberId: string | null
+  position: number
+  ownMinutes: number
+  loggedMinutes: number
+  childCount: number
+  closedAt: string | null
+  updatedAt: string | null
+  tagIds: string[]
+}
+
+export type SubtaskProgress = {
+  total: number
+  done: number
+}
+
+export function readString(row: BoardApiRow, ...keys: string[]): string | null {
+  for (const key of keys) {
+    const value = row[key]
+    if (typeof value === 'string' && value.length > 0) return value
+  }
+  return null
+}
+
+export function readNumber(row: BoardApiRow, ...keys: string[]): number | null {
+  for (const key of keys) {
+    const value = row[key]
+    if (typeof value === 'number' && Number.isFinite(value)) return value
+    if (typeof value === 'string' && value.trim().length > 0) {
+      const parsed = Number(value)
+      if (Number.isFinite(parsed)) return parsed
+    }
+  }
+  return null
+}
+
+export function readBoolean(row: BoardApiRow, ...keys: string[]): boolean {
+  for (const key of keys) {
+    const value = row[key]
+    if (typeof value === 'boolean') return value
+    if (value === 'true') return true
+    if (value === 'false') return false
+  }
+  return false
+}
+
+function readStringArray(row: BoardApiRow, ...keys: string[]): string[] {
+  for (const key of keys) {
+    const value = row[key]
+    if (!Array.isArray(value)) continue
+    const ids = value.filter((entry): entry is string => typeof entry === 'string' && entry.length > 0)
+    if (ids.length > 0) return ids
+  }
+  return []
+}
+
+export function toBoardStatus(row: BoardApiRow): BoardStatus | null {
+  const id = readString(row, 'id')
+  if (!id) return null
+  return {
+    id,
+    name: readString(row, 'name') ?? id,
+    slug: readString(row, 'slug'),
+    color: readString(row, 'color'),
+    position: readNumber(row, 'position') ?? 0,
+    isDefault: readBoolean(row, 'is_default', 'isDefault'),
+    isDone: readBoolean(row, 'is_done', 'isDone'),
+  }
+}
+
+export function toBoardTask(row: BoardApiRow): BoardTask | null {
+  const id = readString(row, 'id')
+  if (!id) return null
+  return {
+    id,
+    title: readString(row, 'title') ?? id,
+    reference: readString(row, 'reference'),
+    timeProjectId: readString(row, 'time_project_id', 'timeProjectId'),
+    parentTaskId: readString(row, 'parent_task_id', 'parentTaskId'),
+    taskStatusId: readString(row, 'task_status_id', 'taskStatusId'),
+    assigneeStaffMemberId: readString(row, 'assignee_staff_member_id', 'assigneeStaffMemberId'),
+    position: readNumber(row, 'position') ?? 0,
+    ownMinutes: readNumber(row, 'ownMinutes', 'own_minutes') ?? 0,
+    loggedMinutes: readNumber(row, 'loggedMinutes', 'logged_minutes') ?? 0,
+    childCount: readNumber(row, 'childCount', 'child_count') ?? 0,
+    closedAt: readString(row, 'closed_at', 'closedAt'),
+    updatedAt: readString(row, 'updated_at', 'updatedAt'),
+    tagIds: readStringArray(row, 'tagIds', 'tag_ids'),
+  }
+}
+
+export function readItems(payload: unknown): BoardApiRow[] {
+  if (!payload || typeof payload !== 'object') return []
+  const items = (payload as { items?: unknown }).items
+  if (!Array.isArray(items)) return []
+  return items.filter((item): item is BoardApiRow => !!item && typeof item === 'object')
+}
+
+export function readTotal(payload: unknown, fallback: number): number {
+  if (!payload || typeof payload !== 'object') return fallback
+  const total = (payload as { total?: unknown }).total
+  return typeof total === 'number' && Number.isFinite(total) ? total : fallback
+}
+
+/** `22:45` — the card and column-header hours format of the mockup. */
+export function formatBoardMinutes(minutes: number): string {
+  return formatDuration(Number.isFinite(minutes) ? minutes : 0, 'clock')
+}
+
+/**
+ * A column's summed hours (mockup note 4). Never fold `loggedMinutes` by hand —
+ * see the module docblock and `taskHoursTotals.ts` on risk R10.
+ */
+export function columnLoggedMinutes(tasks: readonly BoardTask[]): number {
+  return sumTaskLoggedMinutes(
+    tasks.map((task) => ({
+      id: task.id,
+      parentTaskId: task.parentTaskId,
+      loggedMinutes: task.loggedMinutes,
+    })),
+  )
+}
+
+/**
+ * Subtask progress per parent (`3/5 podzadań`).
+ *
+ * The board only ever renders top-level cards, so children arrive from a separate
+ * sweep. A child counts as done when it sits in a column flagged `is_done`, with
+ * `closed_at` as the fallback for a child whose status is no longer on the board.
+ */
+export function computeSubtaskProgress(
+  children: readonly BoardTask[],
+  doneStatusIds: ReadonlySet<string>,
+): Map<string, SubtaskProgress> {
+  const progress = new Map<string, SubtaskProgress>()
+  for (const child of children) {
+    if (!child.parentTaskId) continue
+    const entry = progress.get(child.parentTaskId) ?? { total: 0, done: 0 }
+    entry.total += 1
+    const isDone = (child.taskStatusId && doneStatusIds.has(child.taskStatusId)) || !!child.closedAt
+    if (isDone) entry.done += 1
+    progress.set(child.parentTaskId, entry)
+  }
+  return progress
+}
+
+/**
+ * The slot a card dropped on a column takes.
+ *
+ * Cards land at the top of the target column, matching where the optimistic update
+ * puts them, so the server order and the rendered order agree without a refetch.
+ * Positions stay on the gap grid the server seeds, so a drop writes one row.
+ */
+export function nextPositionAtColumnTop(tasks: readonly BoardTask[]): number {
+  let lowest: number | null = null
+  for (const task of tasks) {
+    if (!Number.isFinite(task.position)) continue
+    if (lowest === null || task.position < lowest) lowest = task.position
+  }
+  if (lowest === null) return STATUS_POSITION_GAP
+  const candidate = Math.floor(lowest / 2)
+  return candidate > 0 ? candidate : 1
+}
+
+/** Two-letter avatar initials, matching the mockup's `AN` / `PZ` chips. */
+export function initialsFromName(name: string | null | undefined): string {
+  const safe = (name ?? '').trim()
+  if (!safe) return '?'
+  const parts = safe.split(/\s+/).filter((part) => part.length > 0)
+  if (parts.length === 0) return '?'
+  if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase()
+  return `${parts[0][0]}${parts[parts.length - 1][0]}`.toUpperCase()
+}
+
+/**
+ * The column accent bar colour.
+ *
+ * Statuses store a `PROJECT_COLOR_KEYS` token, never raw CSS, so the board resolves
+ * the key through the shared palette and paints the 6px bar with an inline
+ * background. No status-colour Tailwind class is involved.
+ */
+export function statusAccentColor(status: BoardStatus): string {
+  return resolveProjectColorHex(status.color, status.name)
+}
+
+export function sortByPosition<T extends { position: number; id: string }>(rows: readonly T[]): T[] {
+  return [...rows].sort((left, right) => {
+    if (left.position !== right.position) return left.position - right.position
+    return left.id < right.id ? -1 : left.id > right.id ? 1 : 0
+  })
+}