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

package/dist/modules/staff/lib/time-tracking-ui/KanbanBoard.js

@@ -0,0 +1,855 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { useQueries, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+  DndContext,
+  DragOverlay,
+  MeasuringStrategy,
+  PointerSensor,
+  pointerWithin,
+  useSensor,
+  useSensors
+} from "@dnd-kit/core";
+import { Plus, RotateCcw } from "lucide-react";
+import { Alert, AlertDescription } from "@open-mercato/ui/primitives/alert";
+import { Button } from "@open-mercato/ui/primitives/button";
+import { EmptyState } from "@open-mercato/ui/primitives/empty-state";
+import { Input } from "@open-mercato/ui/primitives/input";
+import { ErrorMessage, LoadingMessage } from "@open-mercato/ui/backend/detail";
+import { apiCall, apiCallOrThrow, withScopedApiRequestHeaders } from "@open-mercato/ui/backend/utils/apiCall";
+import { buildOptimisticLockHeader } from "@open-mercato/ui/backend/utils/optimisticLock";
+import { surfaceRecordConflict } from "@open-mercato/ui/backend/conflicts";
+import { useBackendChrome } from "@open-mercato/ui/backend/BackendChromeProvider";
+import { useGuardedMutation } from "@open-mercato/ui/backend/injection/useGuardedMutation";
+import { useAppEvent } from "@open-mercato/ui/backend/injection/useAppEvent";
+import { flash } from "@open-mercato/ui/backend/FlashMessages";
+import { hasFeature } from "@open-mercato/shared/security/features";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { useOrganizationScopeVersion } from "@open-mercato/shared/lib/frontend/useOrganizationScope";
+import { createLogger } from "@open-mercato/shared/lib/logger";
+import { sumTaskLoggedMinutes } from "../timesheets-tasks/taskHoursTotals.js";
+import { KanbanColumn, KANBAN_COLUMN_DROPPABLE_PREFIX } from "./KanbanColumn.js";
+import { InjectionSpot } from "@open-mercato/ui/backend/injection/InjectionSpot";
+import { extensionPoints } from "@open-mercato/core/modules/staff/extension-points";
+import { TaskDrawer } from "./TaskDrawer.js";
+import {
+  BOARD_DIRECTORY_PAGE_SIZE,
+  BOARD_PAGE_SIZE,
+  BOARD_QUERY_ROOT,
+  boardColumnQueryKey,
+  fetchTaskPages,
+  useAssigneeNames,
+  useBoardSelf,
+  useBoardStatuses,
+  useTagLabels
+} from "./boardDirectory.js";
+import {
+  EMPTY_BOARD_FILTERS,
+  boardServerFilterKey,
+  boardServerFilterParams,
+  visibleBoardStatusIds
+} from "./boardFilters.js";
+import {
+  computeSubtaskProgress,
+  formatBoardMinutes,
+  nextPositionAtColumnTop,
+  readItems,
+  readString,
+  sortByPosition,
+  toBoardTask
+} from "./kanbanBoardData.js";
+const logger = createLogger("staff").child({ component: "KanbanBoard" });
+const BOARD_MAX_CHILD_PAGES = 5;
+const MOVE_MUTATION_CONTEXT_ID = "staff.time_tracking.board.move";
+const CREATE_MUTATION_CONTEXT_ID = "staff.time_tracking.board.create";
+const MANAGE_COLUMNS_FEATURE = "staff.timesheets.projects.manage";
+const MANAGE_TASKS_FEATURE = "staff.timesheets.tasks.manage";
+const TASK_STATUS_CHANGED_EVENT = "staff.timesheets.time_task.status_changed";
+const OWN_MOVE_ECHO_TTL_MS = 15e3;
+function statusIdFromColumnKey(key) {
+  const part = key.find((entry) => typeof entry === "string" && entry.startsWith("status:"));
+  return typeof part === "string" ? part.slice("status:".length) : null;
+}
+function isOlderVersion(candidate, reference) {
+  const candidateAt = Date.parse(candidate);
+  const referenceAt = Date.parse(reference);
+  if (!Number.isFinite(candidateAt) || !Number.isFinite(referenceAt)) return false;
+  return candidateAt < referenceAt;
+}
+function KanbanBoard({
+  timeProjectId,
+  projectName,
+  filters = EMPTY_BOARD_FILTERS,
+  onSummaryChange
+}) {
+  const t = useT();
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const queryClient = useQueryClient();
+  const scopeVersion = useOrganizationScopeVersion();
+  const { payload } = useBackendChrome();
+  const canManageColumns = hasFeature(payload?.grantedFeatures, MANAGE_COLUMNS_FEATURE);
+  const canManageTasks = hasFeature(payload?.grantedFeatures, MANAGE_TASKS_FEATURE);
+  const serverFilterKey = boardServerFilterKey(filters);
+  const serverFilterParams = boardServerFilterParams(filters);
+  const [pagesByStatus, setPagesByStatus] = React.useState({});
+  const [activeDragTaskId, setActiveDragTaskId] = React.useState(null);
+  const [pendingTaskIds, setPendingTaskIds] = React.useState(/* @__PURE__ */ new Set());
+  const [failedMove, setFailedMove] = React.useState(null);
+  const [quickAddPendingStatusId, setQuickAddPendingStatusId] = React.useState(null);
+  const [composingStatus, setComposingStatus] = React.useState(false);
+  const [statusDraft, setStatusDraft] = React.useState("");
+  const ownMoveKeysRef = React.useRef(/* @__PURE__ */ new Map());
+  const confirmedVersionsRef = React.useRef(/* @__PURE__ */ new Map());
+  const resolveTaskVersion = React.useCallback(
+    (taskId, rowVersion) => {
+      const confirmed = confirmedVersionsRef.current.get(taskId);
+      if (!confirmed) return rowVersion;
+      if (rowVersion && !isOlderVersion(rowVersion, confirmed)) {
+        confirmedVersionsRef.current.delete(taskId);
+        return rowVersion;
+      }
+      return confirmed;
+    },
+    []
+  );
+  const { runMutation: runMoveMutation, retryLastMutation: retryMoveMutation } = useGuardedMutation({
+    contextId: MOVE_MUTATION_CONTEXT_ID,
+    blockedMessage: t("staff.time_tracking.board.move.error", "Could not move the task.")
+  });
+  const { runMutation: runCreateMutation, retryLastMutation: retryCreateMutation } = useGuardedMutation({
+    contextId: CREATE_MUTATION_CONTEXT_ID,
+    blockedMessage: t("staff.time_tracking.board.quickAdd.error", "Could not create the task.")
+  });
+  const statusesQuery = useBoardStatuses(timeProjectId);
+  const statuses = React.useMemo(() => statusesQuery.data ?? [], [statusesQuery.data]);
+  const visibleStatuses = React.useMemo(
+    () => visibleBoardStatusIds(statuses, filters),
+    [filters, statuses]
+  );
+  const columnQueries = useQueries({
+    queries: visibleStatuses.map((status) => {
+      const pages = pagesByStatus[status.id] ?? 1;
+      return {
+        queryKey: boardColumnQueryKey(scopeVersion, timeProjectId, status.id, pages, serverFilterKey),
+        staleTime: 15e3,
+        queryFn: async () => fetchTaskPages(
+          (page) => `timeProjectId=${encodeURIComponent(timeProjectId)}&taskStatusId=${encodeURIComponent(status.id)}&topLevelOnly=true&page=${page}&pageSize=${BOARD_PAGE_SIZE}&sortField=position&sortDir=asc${serverFilterParams}`,
+          pages
+        )
+      };
+    })
+  });
+  const tasksByStatusId = React.useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    visibleStatuses.forEach((status, index) => {
+      const data = columnQueries[index]?.data;
+      const loaded = (data?.items ?? []).map(toBoardTask).filter((task) => task !== null);
+      map.set(status.id, {
+        tasks: sortByPosition(loaded),
+        loaded: loaded.length,
+        total: data?.total ?? loaded.length
+      });
+    });
+    return map;
+  }, [columnQueries, visibleStatuses]);
+  const allTasks = React.useMemo(() => {
+    const rows = [];
+    for (const entry of tasksByStatusId.values()) rows.push(...entry.tasks);
+    return rows;
+  }, [tasksByStatusId]);
+  const hasChildren = React.useMemo(() => allTasks.some((task) => task.childCount > 0), [allTasks]);
+  const childrenQuery = useQuery({
+    queryKey: [...BOARD_QUERY_ROOT, "children", `scope:${scopeVersion}`, `project:${timeProjectId}`],
+    enabled: hasChildren,
+    staleTime: 3e4,
+    queryFn: async () => {
+      const { items } = await fetchTaskPages(
+        (page) => `timeProjectId=${encodeURIComponent(timeProjectId)}&page=${page}&pageSize=${BOARD_PAGE_SIZE}&sortField=position&sortDir=asc`,
+        BOARD_MAX_CHILD_PAGES
+      );
+      return items.map(toBoardTask).filter((task) => task !== null && !!task.parentTaskId);
+    }
+  });
+  const doneStatusIds = React.useMemo(
+    () => new Set(statuses.filter((status) => status.isDone).map((status) => status.id)),
+    [statuses]
+  );
+  const subtasksByTaskId = React.useMemo(
+    () => computeSubtaskProgress(childrenQuery.data ?? [], doneStatusIds),
+    [childrenQuery.data, doneStatusIds]
+  );
+  const assigneeIds = React.useMemo(() => {
+    const ids = /* @__PURE__ */ new Set();
+    for (const task of allTasks) {
+      if (task.assigneeStaffMemberId) ids.add(task.assigneeStaffMemberId);
+    }
+    return Array.from(ids).sort((a, b) => a < b ? -1 : a > b ? 1 : 0);
+  }, [allTasks]);
+  const assigneeQuery = useAssigneeNames(assigneeIds);
+  const tagIds = React.useMemo(() => {
+    const ids = /* @__PURE__ */ new Set();
+    for (const task of allTasks) {
+      for (const id of task.tagIds) ids.add(id);
+    }
+    return Array.from(ids).sort((a, b) => a < b ? -1 : a > b ? 1 : 0);
+  }, [allTasks]);
+  const tagQuery = useTagLabels(tagIds);
+  const tagsByTaskId = React.useMemo(() => {
+    const labels = tagQuery.data ?? /* @__PURE__ */ new Map();
+    const map = /* @__PURE__ */ new Map();
+    for (const task of allTasks) {
+      if (task.tagIds.length === 0) continue;
+      const named = [];
+      for (const id of task.tagIds) {
+        const label = labels.get(id);
+        if (label) named.push({ id, label });
+      }
+      if (named.length === 0) continue;
+      map.set(task.id, named);
+    }
+    return map;
+  }, [allTasks, tagQuery.data]);
+  const selfQuery = useBoardSelf();
+  const selfStaffMemberId = selfQuery.data?.id ?? null;
+  const runningTimerQuery = useQuery({
+    queryKey: [...BOARD_QUERY_ROOT, "running-timer", `scope:${scopeVersion}`, selfStaffMemberId ?? "none"],
+    enabled: !!selfStaffMemberId,
+    staleTime: 15e3,
+    refetchInterval: 3e4,
+    queryFn: async () => {
+      if (!selfStaffMemberId) return { entryId: null, taskId: null };
+      const call = await apiCall(
+        `/api/staff/timesheets/time-entries?staffMemberId=${encodeURIComponent(selfStaffMemberId)}&running=true&pageSize=${BOARD_PAGE_SIZE}`
+      );
+      if (!call.ok) return { entryId: null, taskId: null };
+      for (const row of readItems(call.result)) {
+        const endedAt = readString(row, "ended_at", "endedAt");
+        const startedAt = readString(row, "started_at", "startedAt");
+        if (!startedAt || endedAt) continue;
+        return { entryId: readString(row, "id"), taskId: readString(row, "task_id", "taskId") };
+      }
+      return { entryId: null, taskId: null };
+    }
+  });
+  const runningTimerTaskId = runningTimerQuery.data?.taskId ?? null;
+  const runningTimerEntryId = runningTimerQuery.data?.entryId ?? null;
+  const invalidateBoard = React.useCallback(() => {
+    queryClient.invalidateQueries({ queryKey: [...BOARD_QUERY_ROOT, "column"] }).catch(() => {
+    });
+    queryClient.invalidateQueries({ queryKey: [...BOARD_QUERY_ROOT, "children"] }).catch(() => {
+    });
+  }, [queryClient]);
+  const invalidateStatuses = React.useCallback(() => {
+    queryClient.invalidateQueries({ queryKey: [...BOARD_QUERY_ROOT, "statuses"] }).catch(() => {
+    });
+  }, [queryClient]);
+  const markOwnMove = React.useCallback((taskId, statusId) => {
+    ownMoveKeysRef.current.set(`${taskId}|${statusId}`, Date.now());
+  }, []);
+  const consumeOwnMove = React.useCallback((taskId, statusId) => {
+    const keys = ownMoveKeysRef.current;
+    const key = `${taskId}|${statusId}`;
+    const stamped = keys.get(key);
+    for (const [entry, at] of keys) {
+      if (Date.now() - at > OWN_MOVE_ECHO_TTL_MS) keys.delete(entry);
+    }
+    if (stamped === void 0) return false;
+    keys.delete(key);
+    return true;
+  }, []);
+  useAppEvent(
+    TASK_STATUS_CHANGED_EVENT,
+    (event) => {
+      const eventPayload = event.payload;
+      if (!eventPayload) return;
+      const projectId = typeof eventPayload.timeProjectId === "string" ? eventPayload.timeProjectId : null;
+      if (projectId && projectId !== timeProjectId) return;
+      const taskId = typeof eventPayload.taskId === "string" ? eventPayload.taskId : typeof eventPayload.id === "string" ? eventPayload.id : null;
+      const statusId = typeof eventPayload.taskStatusId === "string" ? eventPayload.taskStatusId : null;
+      if (taskId && statusId && consumeOwnMove(taskId, statusId)) return;
+      invalidateBoard();
+    },
+    [consumeOwnMove, invalidateBoard, timeProjectId]
+  );
+  const setTaskPending = React.useCallback((taskId, pending) => {
+    setPendingTaskIds((previous) => {
+      const next = new Set(previous);
+      if (pending) next.add(taskId);
+      else next.delete(taskId);
+      return next;
+    });
+  }, []);
+  const moveTask = React.useCallback(
+    (taskId, targetStatusId) => {
+      const columnCaches = queryClient.getQueriesData({
+        queryKey: [...BOARD_QUERY_ROOT, "column"]
+      });
+      const snapshot = columnCaches.map(([key, data]) => [key, data]);
+      let sourceStatusId = null;
+      let movingRow = null;
+      for (const [key, data] of columnCaches) {
+        if (!data) continue;
+        const statusId = statusIdFromColumnKey(key);
+        if (!statusId) continue;
+        const index = data.items.findIndex((item) => readString(item, "id") === taskId);
+        if (index < 0) continue;
+        sourceStatusId = statusId;
+        movingRow = { ...data.items[index], task_status_id: targetStatusId, taskStatusId: targetStatusId };
+        queryClient.setQueryData(key, {
+          items: data.items.filter((item) => readString(item, "id") !== taskId),
+          total: Math.max(0, data.total - 1)
+        });
+        break;
+      }
+      if (!movingRow || !sourceStatusId || sourceStatusId === targetStatusId) {
+        for (const [key, data] of snapshot) queryClient.setQueryData(key, data);
+        return;
+      }
+      const targetTasks = tasksByStatusId.get(targetStatusId)?.tasks ?? [];
+      const position = nextPositionAtColumnTop(targetTasks);
+      const landed = { ...movingRow, position };
+      for (const [key, data] of columnCaches) {
+        if (!data) continue;
+        if (statusIdFromColumnKey(key) !== targetStatusId) continue;
+        queryClient.setQueryData(key, {
+          items: [landed, ...data.items],
+          total: data.total + 1
+        });
+      }
+      const taskVersion = resolveTaskVersion(taskId, readString(movingRow, "updated_at", "updatedAt"));
+      setTaskPending(taskId, true);
+      setFailedMove(null);
+      markOwnMove(taskId, targetStatusId);
+      runMoveMutation({
+        operation: async () => {
+          const call = await withScopedApiRequestHeaders(
+            buildOptimisticLockHeader(taskVersion),
+            () => apiCallOrThrow(
+              `/api/staff/timesheets/tasks/${encodeURIComponent(taskId)}/status`,
+              {
+                method: "PATCH",
+                headers: { "content-type": "application/json" },
+                body: JSON.stringify({ taskStatusId: targetStatusId, position })
+              },
+              { errorMessage: t("staff.time_tracking.board.move.error", "Could not move the task.") }
+            )
+          );
+          return readString(call.result ?? {}, "updatedAt", "updated_at");
+        },
+        context: {
+          formId: MOVE_MUTATION_CONTEXT_ID,
+          resourceKind: "staff.timesheets.task",
+          resourceId: taskId,
+          retryLastMutation: retryMoveMutation
+        }
+      }).then((confirmedVersion) => {
+        if (confirmedVersion) confirmedVersionsRef.current.set(taskId, confirmedVersion);
+        invalidateBoard();
+      }).catch((error) => {
+        for (const [key, data] of snapshot) queryClient.setQueryData(key, data);
+        consumeOwnMove(taskId, targetStatusId);
+        if (surfaceRecordConflict(error, t)) {
+          confirmedVersionsRef.current.delete(taskId);
+          invalidateBoard();
+          return;
+        }
+        setFailedMove({ taskId, targetStatusId });
+        const message = error instanceof Error && error.message ? error.message : t("staff.time_tracking.board.move.error", "Could not move the task.");
+        flash(message, "error");
+      }).finally(() => {
+        setTaskPending(taskId, false);
+      });
+    },
+    [
+      consumeOwnMove,
+      invalidateBoard,
+      markOwnMove,
+      queryClient,
+      resolveTaskVersion,
+      retryMoveMutation,
+      runMoveMutation,
+      setTaskPending,
+      t,
+      tasksByStatusId
+    ]
+  );
+  const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 4 } }));
+  const collisionDetection = React.useCallback((args) => pointerWithin(args), []);
+  const measuringConfig = React.useMemo(
+    () => ({ droppable: { strategy: MeasuringStrategy.BeforeDragging } }),
+    []
+  );
+  const statusIdByTaskId = React.useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const [statusId, entry] of tasksByStatusId) {
+      for (const task of entry.tasks) map.set(task.id, statusId);
+    }
+    return map;
+  }, [tasksByStatusId]);
+  const activeDragTask = React.useMemo(
+    () => activeDragTaskId ? allTasks.find((task) => task.id === activeDragTaskId) ?? null : null,
+    [activeDragTaskId, allTasks]
+  );
+  const handleDragStart = React.useCallback((event) => {
+    setActiveDragTaskId(typeof event.active.id === "string" ? event.active.id : null);
+  }, []);
+  const handleDragCancel = React.useCallback(() => setActiveDragTaskId(null), []);
+  const targetStatusIdFor = React.useCallback(
+    (overId) => {
+      if (typeof overId !== "string") return null;
+      return overId.startsWith(KANBAN_COLUMN_DROPPABLE_PREFIX) ? overId.slice(KANBAN_COLUMN_DROPPABLE_PREFIX.length) : statusIdByTaskId.get(overId) ?? null;
+    },
+    [statusIdByTaskId]
+  );
+  const handleDragEnd = React.useCallback(
+    (event) => {
+      setActiveDragTaskId(null);
+      const taskId = typeof event.active.id === "string" ? event.active.id : null;
+      if (!taskId) return;
+      const targetStatusId = targetStatusIdFor(event.over?.id);
+      if (!targetStatusId) return;
+      if (statusIdByTaskId.get(taskId) === targetStatusId) return;
+      moveTask(taskId, targetStatusId);
+    },
+    [moveTask, statusIdByTaskId, targetStatusIdFor]
+  );
+  const moveTargets = React.useMemo(
+    () => visibleStatuses.map((status) => ({ id: status.id, name: status.name })),
+    [visibleStatuses]
+  );
+  const describeTask = React.useCallback(
+    (taskId) => {
+      if (typeof taskId !== "string") return "";
+      return allTasks.find((task) => task.id === taskId)?.title ?? taskId;
+    },
+    [allTasks]
+  );
+  const describeColumn = React.useCallback(
+    (overId) => {
+      const statusId = targetStatusIdFor(overId);
+      if (!statusId) return null;
+      return statuses.find((status) => status.id === statusId)?.name ?? statusId;
+    },
+    [statuses, targetStatusIdFor]
+  );
+  const announcements = React.useMemo(
+    () => ({
+      onDragStart: ({ active }) => t("staff.time_tracking.board.dnd.dragStart", "Picked up the task {task}.", {
+        task: describeTask(active.id)
+      }),
+      onDragOver: ({ active, over }) => {
+        const column = describeColumn(over?.id);
+        return column ? t("staff.time_tracking.board.dnd.dragOver", "The task {task} is over the column {column}.", {
+          task: describeTask(active.id),
+          column
+        }) : t("staff.time_tracking.board.dnd.dragOverNothing", "The task {task} is not over a column.", {
+          task: describeTask(active.id)
+        });
+      },
+      onDragEnd: ({ active, over }) => {
+        const column = describeColumn(over?.id);
+        return column ? t("staff.time_tracking.board.dnd.dragEnd", "The task {task} was dropped into the column {column}.", {
+          task: describeTask(active.id),
+          column
+        }) : t("staff.time_tracking.board.dnd.dragEndOutside", "The task {task} was dropped outside the columns.", {
+          task: describeTask(active.id)
+        });
+      },
+      onDragCancel: ({ active }) => t("staff.time_tracking.board.dnd.dragCancel", "Moving the task {task} was cancelled.", {
+        task: describeTask(active.id)
+      })
+    }),
+    [describeColumn, describeTask, t]
+  );
+  const screenReaderInstructions = React.useMemo(
+    () => ({
+      draggable: t(
+        "staff.time_tracking.board.dnd.instructions",
+        "Drag a card with the pointer to move it between columns. With the keyboard, press Enter on a card to open it, or use the Move button in the card actions to choose a target column."
+      )
+    }),
+    [t]
+  );
+  const accessibility = React.useMemo(
+    () => ({ announcements, screenReaderInstructions }),
+    [announcements, screenReaderInstructions]
+  );
+  const handleQuickAdd = React.useCallback(
+    async (statusId, title) => {
+      setQuickAddPendingStatusId(statusId);
+      try {
+        await runCreateMutation({
+          operation: () => apiCallOrThrow(
+            "/api/staff/timesheets/tasks",
+            {
+              method: "POST",
+              headers: { "content-type": "application/json" },
+              body: JSON.stringify({
+                timeProjectId,
+                taskStatusId: statusId,
+                title,
+                // US-C1: the creator owns what they just typed until somebody reassigns it.
+                assigneeStaffMemberId: selfStaffMemberId
+              })
+            },
+            { errorMessage: t("staff.time_tracking.board.quickAdd.error", "Could not create the task.") }
+          ),
+          context: {
+            formId: CREATE_MUTATION_CONTEXT_ID,
+            resourceKind: "staff.timesheets.task",
+            resourceId: statusId,
+            retryLastMutation: retryCreateMutation
+          }
+        });
+        invalidateBoard();
+      } catch (error) {
+        if (surfaceRecordConflict(error, t)) return;
+        logger.error("staff.time_tracking board quick add failed", { err: error });
+        flash(
+          error instanceof Error && error.message ? error.message : t("staff.time_tracking.board.quickAdd.error", "Could not create the task."),
+          "error"
+        );
+      } finally {
+        setQuickAddPendingStatusId(null);
+      }
+    },
+    [invalidateBoard, retryCreateMutation, runCreateMutation, selfStaffMemberId, t, timeProjectId]
+  );
+  const handleCreateStatus = React.useCallback(async () => {
+    const name = statusDraft.trim();
+    if (!name) {
+      setComposingStatus(false);
+      setStatusDraft("");
+      return;
+    }
+    try {
+      await runCreateMutation({
+        operation: () => apiCallOrThrow(
+          "/api/staff/timesheets/task-statuses",
+          {
+            method: "POST",
+            headers: { "content-type": "application/json" },
+            body: JSON.stringify({ timeProjectId, name })
+          },
+          { errorMessage: t("staff.time_tracking.board.addStatus.error", "Could not add the column.") }
+        ),
+        context: {
+          formId: CREATE_MUTATION_CONTEXT_ID,
+          resourceKind: "staff.timesheets.task_status",
+          resourceId: timeProjectId,
+          retryLastMutation: retryCreateMutation
+        }
+      });
+      setStatusDraft("");
+      setComposingStatus(false);
+      invalidateStatuses();
+    } catch (error) {
+      if (surfaceRecordConflict(error, t)) return;
+      flash(
+        error instanceof Error && error.message ? error.message : t("staff.time_tracking.board.addStatus.error", "Could not add the column."),
+        "error"
+      );
+    }
+  }, [invalidateStatuses, retryCreateMutation, runCreateMutation, statusDraft, t, timeProjectId]);
+  const handleLoadMore = React.useCallback((statusId) => {
+    setPagesByStatus((previous) => ({ ...previous, [statusId]: (previous[statusId] ?? 1) + 1 }));
+  }, []);
+  const openTask = React.useCallback(
+    (taskId) => {
+      const params = new URLSearchParams(searchParams?.toString() ?? "");
+      params.set("task", taskId);
+      router.push(`?${params.toString()}`, { scroll: false });
+    },
+    [router, searchParams]
+  );
+  const handleAddTime = React.useCallback(
+    (taskId) => {
+      const params = new URLSearchParams(searchParams?.toString() ?? "");
+      params.set("task", taskId);
+      params.set("panel", "time");
+      router.push(`?${params.toString()}`, { scroll: false });
+    },
+    [router, searchParams]
+  );
+  const drawerTaskId = searchParams?.get("task") ?? null;
+  const drawerPanel = searchParams?.get("panel") ?? null;
+  const closeTaskDrawer = React.useCallback(() => {
+    const params = new URLSearchParams(searchParams?.toString() ?? "");
+    params.delete("task");
+    params.delete("panel");
+    const query = params.toString();
+    router.push(query.length > 0 ? `?${query}` : "?", { scroll: false });
+  }, [router, searchParams]);
+  const handleStartTimer = React.useCallback(
+    async (taskId) => {
+      if (!selfStaffMemberId) return;
+      const task = allTasks.find((entry) => entry.id === taskId) ?? null;
+      try {
+        const started = await runCreateMutation({
+          operation: () => apiCallOrThrow(
+            "/api/staff/timesheets/time-entries/start-timer",
+            {
+              method: "POST",
+              headers: { "content-type": "application/json" },
+              body: JSON.stringify({
+                staffMemberId: selfStaffMemberId,
+                timeProjectId,
+                date: (/* @__PURE__ */ new Date()).toISOString().slice(0, 10),
+                notes: task?.title ?? null
+              })
+            },
+            { errorMessage: t("staff.time_tracking.board.timer.startError", "Could not start the timer.") }
+          ),
+          context: {
+            formId: CREATE_MUTATION_CONTEXT_ID,
+            resourceKind: "staff.timesheets.time_entry",
+            resourceId: taskId,
+            retryLastMutation: retryCreateMutation
+          }
+        });
+        const entryId = typeof started?.result?.id === "string" ? started.result.id : null;
+        if (entryId) {
+          const linked = await apiCall(`/api/staff/timesheets/time-entries`, {
+            method: "PUT",
+            headers: { "content-type": "application/json" },
+            body: JSON.stringify({ id: entryId, taskId })
+          });
+          if (!linked.ok) {
+            flash(
+              t(
+                "staff.time_tracking.board.timer.linkWarning",
+                "The timer is running but is not linked to this task yet."
+              ),
+              "warning"
+            );
+          }
+        }
+        await runningTimerQuery.refetch();
+      } catch (error) {
+        if (surfaceRecordConflict(error, t)) return;
+        flash(
+          error instanceof Error && error.message ? error.message : t("staff.time_tracking.board.timer.startError", "Could not start the timer."),
+          "error"
+        );
+      }
+    },
+    [allTasks, retryCreateMutation, runCreateMutation, runningTimerQuery, selfStaffMemberId, t, timeProjectId]
+  );
+  const handleStopTimer = React.useCallback(async () => {
+    if (!runningTimerEntryId) return;
+    try {
+      await runCreateMutation({
+        operation: () => apiCallOrThrow(
+          `/api/staff/timesheets/time-entries/${encodeURIComponent(runningTimerEntryId)}/timer-stop`,
+          { method: "POST" },
+          { errorMessage: t("staff.time_tracking.board.timer.stopError", "Could not stop the timer.") }
+        ),
+        context: {
+          formId: CREATE_MUTATION_CONTEXT_ID,
+          resourceKind: "staff.timesheets.time_entry",
+          resourceId: runningTimerEntryId,
+          retryLastMutation: retryCreateMutation
+        }
+      });
+      await runningTimerQuery.refetch();
+      invalidateBoard();
+    } catch (error) {
+      if (surfaceRecordConflict(error, t)) return;
+      flash(
+        error instanceof Error && error.message ? error.message : t("staff.time_tracking.board.timer.stopError", "Could not stop the timer."),
+        "error"
+      );
+    }
+  }, [invalidateBoard, retryCreateMutation, runCreateMutation, runningTimerEntryId, runningTimerQuery, t]);
+  const summary = React.useMemo(
+    () => ({ taskCount: allTasks.length, loggedMinutes: sumTaskLoggedMinutes(allTasks) }),
+    [allTasks]
+  );
+  React.useEffect(() => {
+    onSummaryChange?.(summary);
+  }, [onSummaryChange, summary]);
+  if (statusesQuery.isLoading) {
+    return /* @__PURE__ */ jsx(LoadingMessage, { label: t("staff.time_tracking.board.loading", "Loading the board\u2026") });
+  }
+  if (statusesQuery.isError) {
+    return /* @__PURE__ */ jsx(
+      ErrorMessage,
+      {
+        label: t("staff.time_tracking.board.loadError", "Could not load the board."),
+        action: /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => void statusesQuery.refetch(), children: t("staff.time_tracking.board.reload", "Try again") })
+      }
+    );
+  }
+  if (statuses.length === 0) {
+    return /* @__PURE__ */ jsx(
+      EmptyState,
+      {
+        title: t("staff.time_tracking.board.empty.title", "This project has no columns yet"),
+        description: t(
+          "staff.time_tracking.board.empty.description",
+          "A Team Leader configures the board columns for each project."
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+    /* @__PURE__ */ jsx(
+      InjectionSpot,
+      {
+        spotId: extensionPoints.hosts.taskBoardToolbar.spotId,
+        context: { timeProjectId, projectName: projectName ?? null, statusIds: visibleStatuses.map((status) => status.id) },
+        data: summary
+      }
+    ),
+    failedMove ? /* @__PURE__ */ jsx(Alert, { status: "error", "data-testid": "kanban-move-retry", children: /* @__PURE__ */ jsxs(AlertDescription, { className: "flex flex-wrap items-center gap-3", children: [
+      /* @__PURE__ */ jsx("span", { children: t("staff.time_tracking.board.move.rolledBack", "The task was moved back \u2014 the change was not saved.") }),
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          type: "button",
+          variant: "outline",
+          size: "sm",
+          onClick: () => {
+            const retry = failedMove;
+            setFailedMove(null);
+            moveTask(retry.taskId, retry.targetStatusId);
+          },
+          children: [
+            /* @__PURE__ */ jsx(RotateCcw, { className: "size-3.5", "aria-hidden": "true" }),
+            t("staff.time_tracking.board.move.retry", "Retry")
+          ]
+        }
+      )
+    ] }) }) : null,
+    /* @__PURE__ */ jsxs(
+      DndContext,
+      {
+        sensors,
+        accessibility,
+        collisionDetection,
+        measuring: measuringConfig,
+        onDragStart: handleDragStart,
+        onDragEnd: handleDragEnd,
+        onDragCancel: handleDragCancel,
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: `flex min-w-0 gap-3.5 overflow-x-auto pb-6 ${activeDragTaskId ? "cursor-grabbing select-none" : ""}`,
+              children: [
+                visibleStatuses.map((status, index) => {
+                  const entry = tasksByStatusId.get(status.id);
+                  const serverTotal = entry?.total ?? 0;
+                  const loaded = entry?.loaded ?? 0;
+                  return /* @__PURE__ */ jsx(
+                    KanbanColumn,
+                    {
+                      status,
+                      tasks: entry?.tasks ?? [],
+                      total: serverTotal,
+                      remaining: Math.max(0, serverTotal - loaded),
+                      canQuickAdd: canManageTasks,
+                      loadingMore: columnQueries[index]?.isFetching ?? false,
+                      activeDragTaskId,
+                      pendingTaskIds,
+                      runningTimerTaskId,
+                      assigneeNames: assigneeQuery.data ?? /* @__PURE__ */ new Map(),
+                      tagsByTaskId,
+                      subtasksByTaskId,
+                      quickAddPending: quickAddPendingStatusId === status.id,
+                      moveTargets,
+                      onQuickAdd: handleQuickAdd,
+                      onLoadMore: handleLoadMore,
+                      onOpenTask: openTask,
+                      onStartTimer: handleStartTimer,
+                      onStopTimer: handleStopTimer,
+                      onAddTime: handleAddTime,
+                      onMoveTask: moveTask
+                    },
+                    status.id
+                  );
+                }),
+                canManageColumns ? /* @__PURE__ */ jsx("div", { className: "flex w-72 flex-none flex-col gap-3", children: composingStatus ? /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    autoFocus: true,
+                    value: statusDraft,
+                    onChange: (event) => setStatusDraft(event.target.value),
+                    onKeyDown: (event) => {
+                      if (event.key === "Enter") {
+                        event.preventDefault();
+                        void handleCreateStatus();
+                      }
+                      if (event.key === "Escape") {
+                        event.preventDefault();
+                        setComposingStatus(false);
+                        setStatusDraft("");
+                      }
+                    },
+                    placeholder: t("staff.time_tracking.board.addStatus.placeholder", "Column name"),
+                    "aria-label": t("staff.time_tracking.board.addStatus.cta", "Add status"),
+                    "data-testid": "kanban-add-status-input"
+                  }
+                ) : /* @__PURE__ */ jsxs(
+                  Button,
+                  {
+                    type: "button",
+                    variant: "ghost",
+                    onClick: () => setComposingStatus(true),
+                    "data-testid": "kanban-add-status",
+                    className: "flex h-24 flex-col items-center justify-center gap-2 rounded-lg border border-dashed border-muted-foreground/60 bg-muted/40 text-sm font-semibold leading-normal text-muted-foreground hover:text-foreground",
+                    children: [
+                      /* @__PURE__ */ jsx(Plus, { className: "size-5", "aria-hidden": "true" }),
+                      t("staff.time_tracking.board.addStatus.cta", "Add status")
+                    ]
+                  }
+                ) }) : null
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(DragOverlay, { dropAnimation: null, children: activeDragTask ? /* @__PURE__ */ jsxs(
+            "div",
+            {
+              "data-testid": "kanban-drag-overlay",
+              className: "pointer-events-none w-72 rotate-2 cursor-grabbing select-none rounded-lg border border-border bg-card px-4 py-3 opacity-80 shadow-xl",
+              children: [
+                /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold leading-normal text-foreground", children: activeDragTask.title }),
+                /* @__PURE__ */ jsx("div", { className: "mt-2 text-xs font-semibold tabular-nums leading-normal text-muted-foreground", children: formatBoardMinutes(activeDragTask.loggedMinutes) })
+              ]
+            }
+          ) : null })
+        ]
+      }
+    ),
+    drawerTaskId ? /* @__PURE__ */ jsx(
+      TaskDrawer,
+      {
+        taskId: drawerTaskId,
+        open: true,
+        onOpenChange: (next) => {
+          if (!next) closeTaskDrawer();
+        },
+        projectName: projectName ?? null,
+        focusPanel: drawerPanel,
+        onChanged: invalidateBoard
+      }
+    ) : null
+  ] });
+}
+var KanbanBoard_default = KanbanBoard;
+export {
+  BOARD_DIRECTORY_PAGE_SIZE,
+  BOARD_MAX_CHILD_PAGES,
+  BOARD_PAGE_SIZE,
+  CREATE_MUTATION_CONTEXT_ID,
+  KanbanBoard,
+  MANAGE_COLUMNS_FEATURE,
+  MANAGE_TASKS_FEATURE,
+  MOVE_MUTATION_CONTEXT_ID,
+  TASK_STATUS_CHANGED_EVENT,
+  KanbanBoard_default as default
+};
+//# sourceMappingURL=KanbanBoard.js.map