@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/TaskDrawer.js

@@ -0,0 +1,1196 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { useRouter } from "next/navigation";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { Plus, X } from "lucide-react";
+import {
+  Drawer,
+  DrawerBody,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle
+} from "@open-mercato/ui/primitives/drawer";
+import { Avatar } from "@open-mercato/ui/primitives/avatar";
+import { Badge } from "@open-mercato/ui/primitives/badge";
+import { Button } from "@open-mercato/ui/primitives/button";
+import { Checkbox } from "@open-mercato/ui/primitives/checkbox";
+import { Input } from "@open-mercato/ui/primitives/input";
+import { Progress } from "@open-mercato/ui/primitives/progress";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "@open-mercato/ui/primitives/select";
+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 { useConfirmDialog } from "@open-mercato/ui/backend/confirm-dialog";
+import { useGuardedMutation } from "@open-mercato/ui/backend/injection/useGuardedMutation";
+import { InjectionSpot } from "@open-mercato/ui/backend/injection/InjectionSpot";
+import { extensionPoints } from "@open-mercato/core/modules/staff/extension-points";
+import { flash } from "@open-mercato/ui/backend/FlashMessages";
+import { formatCurrency, formatDate } from "@open-mercato/ui/utils/format";
+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 { TaskCommentThread } from "./TaskCommentThread.js";
+import { TaskQuickLog } from "./TaskQuickLog.js";
+import { TagPicker, tagChipStyle } from "./TagPicker.js";
+import { slugifyProjectName } from "../time-tracking/projectCode.js";
+import {
+  computeSubtaskProgress,
+  formatBoardMinutes,
+  readItems,
+  readString,
+  readTotal,
+  sortByPosition,
+  toBoardStatus,
+  toBoardTask
+} from "./kanbanBoardData.js";
+import {
+  childMinutes,
+  formatElapsed,
+  formatSplitMinutes,
+  resolveDefaultStatusId,
+  resolveDoneStatusId,
+  summarizeEntries,
+  toDrawerComment,
+  toDrawerEntry,
+  todayIsoDate,
+  buildEntryClocks
+} from "./taskDrawerData.js";
+const logger = createLogger("staff").child({ component: "TaskDrawer" });
+const TASK_ENTITY_ID = "staff:staff_time_task";
+const TASK_DRAWER_MUTATION_CONTEXT_ID = "staff.time_tracking.task_drawer";
+const RATES_FEATURE = "staff.timesheets.rates.view";
+const TASKS_MANAGE_FEATURE = "staff.timesheets.tasks.manage";
+const ENTRIES_LIST_PATH = "/backend/staff/time-tracking/entries";
+const DRAWER_QUERY_ROOT = ["staff", "time-tracking", "task-drawer"];
+const DIRECTORY_PAGE_SIZE = 100;
+const CHILD_PAGE_SIZE = 100;
+const COMMENT_PAGE_SIZE = 50;
+const ENTRY_PAGE_SIZE = 100;
+const MAX_ENTRY_PAGES = 3;
+const RECENT_ENTRY_COUNT = 5;
+const ELAPSED_TICK_MS = 1e3;
+async function fetchProjectEntries(projectId) {
+  const rows = [];
+  for (let page = 1; page <= MAX_ENTRY_PAGES; page += 1) {
+    const call = await apiCall(
+      `/api/staff/timesheets/time-entries?projectId=${encodeURIComponent(projectId)}&page=${page}&pageSize=${ENTRY_PAGE_SIZE}&sortField=date&sortDir=desc`
+    );
+    if (!call.ok) return { rows, partial: true };
+    const items = readItems(call.result);
+    rows.push(...items);
+    if (items.length < ENTRY_PAGE_SIZE) return { rows, partial: false };
+    if (rows.length >= readTotal(call.result, rows.length)) return { rows, partial: false };
+  }
+  return { rows, partial: true };
+}
+function TaskDrawer({
+  taskId,
+  open,
+  onOpenChange,
+  projectName,
+  focusPanel,
+  onChanged
+}) {
+  const t = useT();
+  const router = useRouter();
+  const queryClient = useQueryClient();
+  const scopeVersion = useOrganizationScopeVersion();
+  const { payload } = useBackendChrome();
+  const { confirm, ConfirmDialogElement } = useConfirmDialog();
+  const canSeeMoney = hasFeature(payload?.grantedFeatures, RATES_FEATURE);
+  const canManage = hasFeature(payload?.grantedFeatures, TASKS_MANAGE_FEATURE);
+  const [tagIds, setTagIds] = React.useState([]);
+  const [subtaskDraft, setSubtaskDraft] = React.useState("");
+  const [composingSubtask, setComposingSubtask] = React.useState(false);
+  const [busy, setBusy] = React.useState(false);
+  const [timerBusy, setTimerBusy] = React.useState(false);
+  const [now, setNow] = React.useState(() => Date.now());
+  const saveChainRef = React.useRef(Promise.resolve());
+  const versionRef = React.useRef(null);
+  const { runMutation, retryLastMutation } = useGuardedMutation({
+    contextId: TASK_DRAWER_MUTATION_CONTEXT_ID,
+    blockedMessage: t("staff.time_tracking.taskDrawer.properties.saveError", "Could not save the change.")
+  });
+  const taskQuery = useQuery({
+    queryKey: [...DRAWER_QUERY_ROOT, "task", `scope:${scopeVersion}`, taskId],
+    enabled: open && taskId.length > 0,
+    staleTime: 5e3,
+    queryFn: async () => {
+      const call = await apiCall(
+        `/api/staff/timesheets/tasks?id=${encodeURIComponent(taskId)}&pageSize=1`
+      );
+      if (!call.ok) throw new Error("[internal] task request failed");
+      const row = readItems(call.result)[0];
+      if (!row) return null;
+      const parsed = toBoardTask(row);
+      return parsed ? { task: parsed, createdAt: readString(row, "created_at", "createdAt") } : null;
+    }
+  });
+  const task = taskQuery.data?.task ?? null;
+  const createdAt = taskQuery.data?.createdAt ?? null;
+  const projectId = task?.timeProjectId ?? null;
+  const taskInjectionContext = React.useMemo(
+    () => ({
+      entityId: TASK_ENTITY_ID,
+      recordId: taskId,
+      taskId,
+      timeProjectId: projectId,
+      retryLastMutation
+    }),
+    [projectId, retryLastMutation, taskId]
+  );
+  const isChildTask = !!task?.parentTaskId;
+  React.useEffect(() => {
+    if (!task) return;
+    versionRef.current = task.updatedAt;
+    setTagIds(task.tagIds);
+  }, [task]);
+  const statusesQuery = useQuery({
+    queryKey: [...DRAWER_QUERY_ROOT, "statuses", `scope:${scopeVersion}`, projectId ?? "none"],
+    enabled: open && !!projectId,
+    staleTime: 3e4,
+    queryFn: async () => {
+      if (!projectId) return [];
+      const call = await apiCall(
+        `/api/staff/timesheets/task-statuses?timeProjectId=${encodeURIComponent(projectId)}&page=1&pageSize=${DIRECTORY_PAGE_SIZE}&sortField=position&sortDir=asc`
+      );
+      if (!call.ok) return [];
+      const statuses2 = readItems(call.result).map(toBoardStatus).filter((status2) => status2 !== null);
+      return sortByPosition(statuses2);
+    }
+  });
+  const statuses = React.useMemo(() => statusesQuery.data ?? [], [statusesQuery.data]);
+  const childrenQuery = useQuery({
+    queryKey: [...DRAWER_QUERY_ROOT, "children", `scope:${scopeVersion}`, taskId],
+    enabled: open && !isChildTask && !!task,
+    staleTime: 1e4,
+    queryFn: async () => {
+      const call = await apiCall(
+        `/api/staff/timesheets/tasks?parentTaskId=${encodeURIComponent(taskId)}&page=1&pageSize=${CHILD_PAGE_SIZE}&sortField=position&sortDir=asc`
+      );
+      if (!call.ok) return [];
+      const rows = readItems(call.result).map(toBoardTask).filter((row) => row !== null);
+      return sortByPosition(rows);
+    }
+  });
+  const children = React.useMemo(() => childrenQuery.data ?? [], [childrenQuery.data]);
+  const commentsQuery = useQuery({
+    queryKey: [...DRAWER_QUERY_ROOT, "comments", `scope:${scopeVersion}`, taskId],
+    enabled: open && taskId.length > 0,
+    staleTime: 1e4,
+    queryFn: async () => {
+      const call = await apiCall(
+        `/api/staff/timesheets/tasks/${encodeURIComponent(taskId)}/comments?page=1&pageSize=${COMMENT_PAGE_SIZE}`
+      );
+      if (!call.ok) throw new Error("[internal] comments request failed");
+      return readItems(call.result).map(toDrawerComment).filter((comment) => comment !== null);
+    }
+  });
+  const entriesQuery = useQuery({
+    queryKey: [...DRAWER_QUERY_ROOT, "entries", `scope:${scopeVersion}`, projectId ?? "none"],
+    enabled: open && !!projectId,
+    staleTime: 1e4,
+    queryFn: async () => projectId ? fetchProjectEntries(projectId) : { rows: [], partial: false }
+  });
+  const selfQuery = useQuery({
+    queryKey: [...DRAWER_QUERY_ROOT, "self", `scope:${scopeVersion}`],
+    enabled: open,
+    staleTime: 3e5,
+    queryFn: async () => {
+      const call = await apiCall("/api/staff/team-members/self");
+      return call.ok ? call.result?.member?.id ?? null : null;
+    }
+  });
+  const selfStaffMemberId = selfQuery.data ?? null;
+  const membersQuery = useQuery({
+    queryKey: [...DRAWER_QUERY_ROOT, "members", `scope:${scopeVersion}`],
+    enabled: open,
+    staleTime: 3e5,
+    queryFn: async () => {
+      const call = await apiCall(
+        `/api/staff/team-members?page=1&pageSize=${DIRECTORY_PAGE_SIZE}&isActive=true`
+      );
+      if (!call.ok) return [];
+      return readItems(call.result).map((row) => {
+        const id = readString(row, "id");
+        if (!id) return null;
+        return { id, name: readString(row, "display_name", "displayName") ?? id };
+      }).filter((member) => member !== null);
+    }
+  });
+  const members = React.useMemo(() => membersQuery.data ?? [], [membersQuery.data]);
+  const memberNames = React.useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const member of members) map.set(member.id, member.name);
+    return map;
+  }, [members]);
+  const tagsQuery = useQuery({
+    queryKey: [...DRAWER_QUERY_ROOT, "tags", `scope:${scopeVersion}`],
+    enabled: open,
+    staleTime: 3e5,
+    queryFn: async () => {
+      const call = await apiCall(
+        `/api/staff/timesheets/tags?page=1&pageSize=${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, color: readString(row, "color") };
+      }).filter((tag) => tag !== null);
+    }
+  });
+  const tagOptions = React.useMemo(() => tagsQuery.data ?? [], [tagsQuery.data]);
+  const runningTimerQuery = useQuery({
+    queryKey: [...DRAWER_QUERY_ROOT, "running-timer", `scope:${scopeVersion}`, selfStaffMemberId ?? "none"],
+    enabled: open && !!selfStaffMemberId,
+    staleTime: 15e3,
+    refetchInterval: 3e4,
+    queryFn: async () => {
+      if (!selfStaffMemberId) return { entryId: null, taskId: null, startedAt: null };
+      const call = await apiCall(
+        `/api/staff/timesheets/time-entries?staffMemberId=${encodeURIComponent(selfStaffMemberId)}&running=true&pageSize=${ENTRY_PAGE_SIZE}`
+      );
+      if (!call.ok) return { entryId: null, taskId: null, startedAt: null };
+      for (const row of readItems(call.result)) {
+        const startedAt = readString(row, "started_at", "startedAt");
+        const endedAt = readString(row, "ended_at", "endedAt");
+        if (!startedAt || endedAt) continue;
+        return {
+          entryId: readString(row, "id"),
+          taskId: readString(row, "task_id", "taskId"),
+          startedAt
+        };
+      }
+      return { entryId: null, taskId: null, startedAt: null };
+    }
+  });
+  const runningTimer = runningTimerQuery.data ?? { entryId: null, taskId: null, startedAt: null };
+  const timerRunningHere = !!runningTimer.entryId && runningTimer.taskId === taskId;
+  React.useEffect(() => {
+    if (!open || !timerRunningHere) return;
+    const handle = setInterval(() => setNow(Date.now()), ELAPSED_TICK_MS);
+    return () => clearInterval(handle);
+  }, [open, timerRunningHere]);
+  const doneStatusIds = React.useMemo(
+    () => new Set(statuses.filter((status2) => status2.isDone).map((status2) => status2.id)),
+    [statuses]
+  );
+  const progress = React.useMemo(
+    () => computeSubtaskProgress(children, doneStatusIds).get(taskId) ?? { total: 0, done: 0 },
+    [children, doneStatusIds, taskId]
+  );
+  const subtaskTotal = Math.max(progress.total, task?.childCount ?? 0);
+  const taskIdsForEntries = React.useMemo(() => {
+    const ids = /* @__PURE__ */ new Set([taskId]);
+    for (const child of children) ids.add(child.id);
+    return ids;
+  }, [children, taskId]);
+  const entries = React.useMemo(() => {
+    const rows = entriesQuery.data?.rows ?? [];
+    return rows.map(toDrawerEntry).filter((entry) => entry !== null && !!entry.taskId && taskIdsForEntries.has(entry.taskId));
+  }, [entriesQuery.data, taskIdsForEntries]);
+  const totals = React.useMemo(
+    () => summarizeEntries(entries, entriesQuery.data?.partial ?? false),
+    [entries, entriesQuery.data]
+  );
+  const invalidate = React.useCallback(
+    (part) => {
+      queryClient.invalidateQueries({ queryKey: [...DRAWER_QUERY_ROOT, part] }).catch(() => {
+      });
+    },
+    [queryClient]
+  );
+  const refreshVersion = React.useCallback(async () => {
+    const refreshed = await taskQuery.refetch();
+    const updatedAt = refreshed.data?.task.updatedAt ?? null;
+    if (updatedAt) versionRef.current = updatedAt;
+  }, [taskQuery]);
+  const reportError = React.useCallback(
+    (error, fallback) => {
+      if (surfaceRecordConflict(error, t)) {
+        invalidate("task");
+        invalidate("children");
+        return;
+      }
+      logger.error("staff.time_tracking task drawer mutation failed", { err: error });
+      flash(error instanceof Error && error.message ? error.message : fallback, "error");
+    },
+    [invalidate, t]
+  );
+  const handleQuickLog = React.useCallback(
+    async ({ minutes, description, date, isBillable, startClock, endClock }) => {
+      if (!selfStaffMemberId || !projectId) {
+        flash(t("staff.time_tracking.taskDrawer.quickLog.error", "Could not save the time entry."), "error");
+        return false;
+      }
+      setBusy(true);
+      try {
+        await runMutation({
+          operation: () => apiCallOrThrow(
+            "/api/staff/timesheets/time-entries",
+            {
+              method: "POST",
+              headers: { "content-type": "application/json" },
+              body: JSON.stringify({
+                // US-C5 defaults — today, me, billable — unless the Details block
+                // overrode them. The person is never overridable here: logging
+                // for somebody else is a different act with different permissions.
+                staffMemberId: selfStaffMemberId,
+                date,
+                durationMinutes: minutes,
+                taskId,
+                timeProjectId: projectId,
+                isBillable,
+                description,
+                // The clocks are sent as a pair or not at all. A lone
+                // `started_at` is indistinguishable from a running timer —
+                // `started_at IS NOT NULL AND ended_at IS NULL` is exactly how
+                // the list identifies one — so an entry with a start and no end
+                // shows up as a timer running since that moment, and stopping it
+                // fails because no timer segment was ever opened for it.
+                //
+                // The duration is authoritative here, so the missing half is
+                // derived from it rather than left blank: the same 2-of-3
+                // arithmetic the full entry form does.
+                ...buildEntryClocks({ date, startClock, endClock, minutes }),
+                source: "manual"
+              })
+            },
+            { errorMessage: t("staff.time_tracking.taskDrawer.quickLog.error", "Could not save the time entry.") }
+          ),
+          context: {
+            formId: TASK_DRAWER_MUTATION_CONTEXT_ID,
+            resourceKind: "staff.timesheets.time_entry",
+            resourceId: taskId,
+            retryLastMutation
+          }
+        });
+        flash(t("staff.time_tracking.taskDrawer.quickLog.saved", "Time logged."), "success");
+        invalidate("task");
+        invalidate("entries");
+        onChanged?.();
+        return true;
+      } catch (error) {
+        reportError(error, t("staff.time_tracking.taskDrawer.quickLog.error", "Could not save the time entry."));
+        return false;
+      } finally {
+        setBusy(false);
+      }
+    },
+    [invalidate, onChanged, projectId, reportError, retryLastMutation, runMutation, selfStaffMemberId, t, taskId]
+  );
+  const stopTimerEntry = React.useCallback(
+    async (entryId) => {
+      await runMutation({
+        operation: () => apiCallOrThrow(
+          `/api/staff/timesheets/time-entries/${encodeURIComponent(entryId)}/timer-stop`,
+          { method: "POST" },
+          { errorMessage: t("staff.time_tracking.board.timer.stopError", "Could not stop the timer.") }
+        ),
+        context: {
+          formId: TASK_DRAWER_MUTATION_CONTEXT_ID,
+          resourceKind: "staff.timesheets.time_entry",
+          resourceId: entryId,
+          retryLastMutation
+        }
+      });
+    },
+    [retryLastMutation, runMutation, t]
+  );
+  const handleStopTimer = React.useCallback(async () => {
+    if (!runningTimer.entryId) return;
+    setTimerBusy(true);
+    try {
+      await stopTimerEntry(runningTimer.entryId);
+      await runningTimerQuery.refetch();
+      invalidate("task");
+      invalidate("entries");
+      onChanged?.();
+    } catch (error) {
+      reportError(error, t("staff.time_tracking.board.timer.stopError", "Could not stop the timer."));
+    } finally {
+      setTimerBusy(false);
+    }
+  }, [invalidate, onChanged, reportError, runningTimer.entryId, runningTimerQuery, stopTimerEntry, t]);
+  const handleStartTimer = React.useCallback(async () => {
+    if (!selfStaffMemberId || !projectId) return;
+    if (runningTimer.entryId && runningTimer.taskId !== taskId) {
+      const confirmed = await confirm({
+        title: t("staff.time_tracking.taskDrawer.timer.switchTitle", "A timer is running on another task"),
+        text: t(
+          "staff.time_tracking.taskDrawer.timer.switchText",
+          "Only one timer can run at a time. Stop the other one and start it here?"
+        )
+      });
+      if (!confirmed) return;
+    }
+    setTimerBusy(true);
+    try {
+      if (runningTimer.entryId && runningTimer.taskId !== taskId) {
+        await stopTimerEntry(runningTimer.entryId);
+      }
+      const started = await runMutation({
+        operation: () => apiCallOrThrow(
+          "/api/staff/timesheets/time-entries/start-timer",
+          {
+            method: "POST",
+            headers: { "content-type": "application/json" },
+            body: JSON.stringify({
+              staffMemberId: selfStaffMemberId,
+              timeProjectId: projectId,
+              date: todayIsoDate(),
+              notes: task?.title ?? null
+            })
+          },
+          { errorMessage: t("staff.time_tracking.board.timer.startError", "Could not start the timer.") }
+        ),
+        context: {
+          formId: TASK_DRAWER_MUTATION_CONTEXT_ID,
+          resourceKind: "staff.timesheets.time_entry",
+          resourceId: taskId,
+          retryLastMutation
+        }
+      });
+      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();
+      onChanged?.();
+    } catch (error) {
+      reportError(error, t("staff.time_tracking.board.timer.startError", "Could not start the timer."));
+    } finally {
+      setTimerBusy(false);
+    }
+  }, [
+    confirm,
+    onChanged,
+    projectId,
+    reportError,
+    retryLastMutation,
+    runMutation,
+    runningTimer.entryId,
+    runningTimer.taskId,
+    runningTimerQuery,
+    selfStaffMemberId,
+    stopTimerEntry,
+    t,
+    task?.title,
+    taskId
+  ]);
+  const runSerialized = React.useCallback(async (job) => {
+    const chained = saveChainRef.current.then(job, job);
+    saveChainRef.current = chained.catch(() => {
+    });
+    return chained;
+  }, []);
+  const saveTaskField = React.useCallback(
+    async (patch) => {
+      if (!task) return;
+      setBusy(true);
+      try {
+        await runSerialized(async () => {
+          await runMutation({
+            operation: () => withScopedApiRequestHeaders(
+              buildOptimisticLockHeader(versionRef.current),
+              () => apiCallOrThrow(
+                "/api/staff/timesheets/tasks",
+                {
+                  method: "PUT",
+                  headers: { "content-type": "application/json" },
+                  body: JSON.stringify({ id: taskId, ...patch })
+                },
+                {
+                  errorMessage: t(
+                    "staff.time_tracking.taskDrawer.properties.saveError",
+                    "Could not save the change."
+                  )
+                }
+              )
+            ),
+            context: {
+              formId: TASK_DRAWER_MUTATION_CONTEXT_ID,
+              resourceKind: "staff.timesheets.task",
+              resourceId: taskId,
+              retryLastMutation
+            }
+          });
+          await refreshVersion();
+        });
+        onChanged?.();
+      } catch (error) {
+        reportError(error, t("staff.time_tracking.taskDrawer.properties.saveError", "Could not save the change."));
+      } finally {
+        setBusy(false);
+      }
+    },
+    [onChanged, refreshVersion, reportError, retryLastMutation, runMutation, runSerialized, t, task, taskId]
+  );
+  const handleStatusChange = React.useCallback(
+    (statusId) => {
+      if (!task || statusId === task.taskStatusId) return;
+      setBusy(true);
+      void runSerialized(async () => {
+        try {
+          const moved = await runMutation({
+            operation: () => withScopedApiRequestHeaders(
+              buildOptimisticLockHeader(versionRef.current),
+              () => apiCallOrThrow(
+                `/api/staff/timesheets/tasks/${encodeURIComponent(taskId)}/status`,
+                {
+                  method: "PATCH",
+                  headers: { "content-type": "application/json" },
+                  body: JSON.stringify({ taskStatusId: statusId })
+                },
+                { errorMessage: t("staff.time_tracking.board.move.error", "Could not move the task.") }
+              )
+            ),
+            context: {
+              formId: TASK_DRAWER_MUTATION_CONTEXT_ID,
+              resourceKind: "staff.timesheets.task",
+              resourceId: taskId,
+              retryLastMutation
+            }
+          });
+          const updatedAt = typeof moved?.result?.updatedAt === "string" ? moved.result.updatedAt : null;
+          if (updatedAt) versionRef.current = updatedAt;
+          else await refreshVersion();
+          invalidate("task");
+          onChanged?.();
+        } catch (error) {
+          reportError(error, t("staff.time_tracking.board.move.error", "Could not move the task."));
+        } finally {
+          setBusy(false);
+        }
+      });
+    },
+    [
+      invalidate,
+      onChanged,
+      refreshVersion,
+      reportError,
+      retryLastMutation,
+      runMutation,
+      runSerialized,
+      t,
+      task,
+      taskId
+    ]
+  );
+  const handleAssigneeChange = React.useCallback(
+    (value) => {
+      void saveTaskField({ assigneeStaffMemberId: value === "" ? null : value });
+    },
+    [saveTaskField]
+  );
+  const handleToggleSubtask = React.useCallback(
+    async (child, done) => {
+      const targetStatusId = done ? resolveDoneStatusId(statuses) : resolveDefaultStatusId(statuses);
+      if (!targetStatusId) return;
+      setBusy(true);
+      try {
+        await runMutation({
+          operation: () => (
+            // The child's own version, not the parent's — this write touches the
+            // child row.
+            withScopedApiRequestHeaders(
+              buildOptimisticLockHeader(child.updatedAt),
+              () => apiCallOrThrow(
+                `/api/staff/timesheets/tasks/${encodeURIComponent(child.id)}/status`,
+                {
+                  method: "PATCH",
+                  headers: { "content-type": "application/json" },
+                  body: JSON.stringify({ taskStatusId: targetStatusId })
+                },
+                {
+                  errorMessage: t(
+                    "staff.time_tracking.taskDrawer.subtasks.toggleError",
+                    "Could not change the subtask status."
+                  )
+                }
+              )
+            )
+          ),
+          context: {
+            formId: TASK_DRAWER_MUTATION_CONTEXT_ID,
+            resourceKind: "staff.timesheets.task",
+            resourceId: child.id,
+            retryLastMutation
+          }
+        });
+        invalidate("children");
+        invalidate("task");
+        onChanged?.();
+      } catch (error) {
+        reportError(
+          error,
+          t("staff.time_tracking.taskDrawer.subtasks.toggleError", "Could not change the subtask status.")
+        );
+      } finally {
+        setBusy(false);
+      }
+    },
+    [invalidate, onChanged, reportError, retryLastMutation, runMutation, statuses, t]
+  );
+  const handleAddSubtask = React.useCallback(async () => {
+    const title = subtaskDraft.trim();
+    if (!title || !projectId) {
+      setComposingSubtask(false);
+      setSubtaskDraft("");
+      return;
+    }
+    setBusy(true);
+    try {
+      await runMutation({
+        operation: () => apiCallOrThrow(
+          "/api/staff/timesheets/tasks",
+          {
+            method: "POST",
+            headers: { "content-type": "application/json" },
+            body: JSON.stringify({
+              timeProjectId: projectId,
+              parentTaskId: taskId,
+              title,
+              assigneeStaffMemberId: selfStaffMemberId
+            })
+          },
+          {
+            errorMessage: t("staff.time_tracking.taskDrawer.subtasks.addError", "Could not add the subtask.")
+          }
+        ),
+        context: {
+          formId: TASK_DRAWER_MUTATION_CONTEXT_ID,
+          resourceKind: "staff.timesheets.task",
+          resourceId: taskId,
+          retryLastMutation
+        }
+      });
+      setSubtaskDraft("");
+      setComposingSubtask(false);
+      invalidate("children");
+      invalidate("task");
+      onChanged?.();
+    } catch (error) {
+      reportError(error, t("staff.time_tracking.taskDrawer.subtasks.addError", "Could not add the subtask."));
+    } finally {
+      setBusy(false);
+    }
+  }, [
+    invalidate,
+    onChanged,
+    projectId,
+    reportError,
+    retryLastMutation,
+    runMutation,
+    selfStaffMemberId,
+    subtaskDraft,
+    t,
+    taskId
+  ]);
+  const handlePostComment = React.useCallback(
+    async (body2) => {
+      setBusy(true);
+      try {
+        await runMutation({
+          operation: () => apiCallOrThrow(
+            `/api/staff/timesheets/tasks/${encodeURIComponent(taskId)}/comments`,
+            {
+              method: "POST",
+              headers: { "content-type": "application/json" },
+              body: JSON.stringify({ body: body2 })
+            },
+            { errorMessage: t("staff.time_tracking.taskDrawer.comments.error", "Could not post the comment.") }
+          ),
+          context: {
+            formId: TASK_DRAWER_MUTATION_CONTEXT_ID,
+            resourceKind: "staff.timesheets.task_comment",
+            resourceId: taskId,
+            retryLastMutation
+          }
+        });
+        invalidate("comments");
+        return true;
+      } catch (error) {
+        reportError(error, t("staff.time_tracking.taskDrawer.comments.error", "Could not post the comment."));
+        return false;
+      } finally {
+        setBusy(false);
+      }
+    },
+    [invalidate, reportError, retryLastMutation, runMutation, t, taskId]
+  );
+  const handleTagChange = React.useCallback(
+    async (tagId, assign) => {
+      setBusy(true);
+      const previous = tagIds;
+      setTagIds(
+        (current) => assign ? Array.from(/* @__PURE__ */ new Set([...current, tagId])) : current.filter((id) => id !== tagId)
+      );
+      try {
+        await runMutation({
+          operation: () => apiCallOrThrow(
+            "/api/staff/timesheets/tags/task-assignments",
+            {
+              method: assign ? "POST" : "DELETE",
+              headers: { "content-type": "application/json" },
+              body: JSON.stringify({ taskId, tagIds: [tagId] })
+            },
+            { errorMessage: t("staff.time_tracking.taskDrawer.properties.tagError", "Could not save the tags.") }
+          ),
+          context: {
+            formId: TASK_DRAWER_MUTATION_CONTEXT_ID,
+            resourceKind: "staff.timesheets.task_tag",
+            resourceId: taskId,
+            retryLastMutation
+          }
+        });
+        onChanged?.();
+      } catch (error) {
+        setTagIds(previous);
+        reportError(error, t("staff.time_tracking.taskDrawer.properties.tagError", "Could not save the tags."));
+      } finally {
+        setBusy(false);
+      }
+    },
+    [onChanged, reportError, retryLastMutation, runMutation, t, tagIds, taskId]
+  );
+  const createTag = React.useCallback(
+    async (label) => {
+      try {
+        const created = await apiCallOrThrow(
+          "/api/staff/timesheets/tags",
+          {
+            method: "POST",
+            headers: { "content-type": "application/json" },
+            body: JSON.stringify({ label, slug: slugifyProjectName(label).toLowerCase() })
+          },
+          {
+            errorMessage: t(
+              "staff.time_tracking.entryDialog.errors.createTag",
+              "Could not create the tag."
+            )
+          }
+        );
+        const id = typeof created?.result?.id === "string" ? created.result.id : null;
+        if (!id) return null;
+        await queryClient.invalidateQueries({ queryKey: [...DRAWER_QUERY_ROOT, "tags"] });
+        return { id, label, color: null };
+      } catch (error) {
+        logger.warn("staff.time_tracking task drawer tag create failed", { err: error });
+        flash(t("staff.time_tracking.entryDialog.errors.createTag", "Could not create the tag."), "error");
+        return null;
+      }
+    },
+    [queryClient, t]
+  );
+  const status = React.useMemo(
+    () => statuses.find((entry) => entry.id === task?.taskStatusId) ?? null,
+    [statuses, task?.taskStatusId]
+  );
+  const statusVariant = status?.isDone ? "success" : status?.isDefault ? "neutral" : "info";
+  const recentEntries = React.useMemo(() => entries.slice(0, RECENT_ENTRY_COUNT), [entries]);
+  const assignedTags = React.useMemo(() => {
+    const byId = new Map(tagOptions.map((tag) => [tag.id, tag]));
+    return tagIds.map((id) => byId.get(id) ?? { id, label: id, color: null });
+  }, [tagIds, tagOptions]);
+  const availableTags = React.useMemo(
+    () => tagOptions.filter((tag) => !tagIds.includes(tag.id)),
+    [tagIds, tagOptions]
+  );
+  const doneStatusId = resolveDoneStatusId(statuses);
+  const body = (() => {
+    if (taskQuery.isLoading) {
+      return /* @__PURE__ */ jsx(LoadingMessage, { label: t("staff.time_tracking.taskDrawer.loading", "Loading the task\u2026") });
+    }
+    if (taskQuery.isError) {
+      return /* @__PURE__ */ jsx(ErrorMessage, { label: t("staff.time_tracking.taskDrawer.loadError", "Could not load the task.") });
+    }
+    if (!task) {
+      return /* @__PURE__ */ jsx(
+        ErrorMessage,
+        {
+          label: t("staff.time_tracking.tasks.errors.notFound", "Task not found or not accessible.")
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6", children: [
+      /* @__PURE__ */ jsx(
+        TaskQuickLog,
+        {
+          onLog: handleQuickLog,
+          logging: busy,
+          timerRunningHere,
+          elapsed: timerRunningHere ? formatElapsed(runningTimer.startedAt, now) : null,
+          timerBusy,
+          onStartTimer: () => {
+            void handleStartTimer();
+          },
+          onStopTimer: () => {
+            void handleStopTimer();
+          },
+          autoFocus: focusPanel === "time",
+          disabled: !canManage,
+          today: todayIsoDate()
+        }
+      ),
+      /* @__PURE__ */ jsxs("section", { className: "flex flex-col gap-2", "data-testid": "task-drawer-logged", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between gap-3", children: [
+          /* @__PURE__ */ jsx("h3", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: t("staff.time_tracking.taskDrawer.logged.title", "Logged time") }),
+          /* @__PURE__ */ jsx("span", { className: "font-mono text-base font-semibold tabular-nums text-foreground", "data-testid": "task-drawer-logged-total", children: formatBoardMinutes(task.loggedMinutes) })
+        ] }),
+        /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", "data-testid": "task-drawer-logged-split", children: t("staff.time_tracking.taskDrawer.logged.split", "own {own} \xB7 subtasks {children}", {
+          own: formatSplitMinutes(task.ownMinutes),
+          children: formatSplitMinutes(childMinutes(task.loggedMinutes, task.ownMinutes))
+        }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+          /* @__PURE__ */ jsx(Badge, { variant: "success", children: t("staff.time_tracking.taskDrawer.logged.billable", "billable {hours}", {
+            hours: formatBoardMinutes(totals.billableMinutes)
+          }) }),
+          /* @__PURE__ */ jsx(Badge, { variant: "neutral", children: t("staff.time_tracking.taskDrawer.logged.nonBillable", "non-billable {hours}", {
+            hours: formatBoardMinutes(totals.nonBillableMinutes)
+          }) }),
+          canSeeMoney && totals.cost !== null ? /* @__PURE__ */ jsx(Badge, { variant: "info", "data-testid": "task-drawer-cost", children: t("staff.time_tracking.taskDrawer.logged.cost", "cost {amount}", {
+            amount: formatCurrency(totals.cost, totals.currencyCode) ?? String(totals.cost)
+          }) }) : null
+        ] }),
+        totals.partial ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: t(
+          "staff.time_tracking.taskDrawer.logged.partialHint",
+          "The split is counted from the most recent entries in this project."
+        ) }) : null
+      ] }),
+      isChildTask ? null : /* @__PURE__ */ jsxs("section", { className: "flex flex-col gap-3", "data-testid": "task-drawer-subtasks", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between gap-3", children: [
+          /* @__PURE__ */ jsx("h3", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: t("staff.time_tracking.taskDrawer.subtasks.title", "Subtasks") }),
+          /* @__PURE__ */ jsx("span", { className: "font-mono text-xs tabular-nums text-muted-foreground", children: t("staff.time_tracking.taskDrawer.subtasks.count", "{done}/{total}", {
+            done: progress.done,
+            total: subtaskTotal
+          }) })
+        ] }),
+        subtaskTotal > 0 ? /* @__PURE__ */ jsx(Progress, { value: subtaskTotal > 0 ? progress.done / subtaskTotal * 100 : 0, max: 100 }) : null,
+        children.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: t("staff.time_tracking.taskDrawer.subtasks.empty", "No subtasks yet.") }) : /* @__PURE__ */ jsx("ul", { className: "flex flex-col", children: children.map((child) => {
+          const done = child.taskStatusId && doneStatusIds.has(child.taskStatusId) || !!child.closedAt;
+          const assigneeName = child.assigneeStaffMemberId ? memberNames.get(child.assigneeStaffMemberId) ?? child.assigneeStaffMemberId : t("staff.time_tracking.taskDrawer.properties.unassigned", "Unassigned");
+          return /* @__PURE__ */ jsxs(
+            "li",
+            {
+              className: "flex items-center gap-2.5 border-b border-border py-2 last:border-b-0",
+              "data-subtask-id": child.id,
+              children: [
+                /* @__PURE__ */ jsx(
+                  Checkbox,
+                  {
+                    checked: done,
+                    disabled: !canManage || busy || !doneStatusId,
+                    "aria-label": t("staff.time_tracking.taskDrawer.subtasks.toggle", "Mark {title} as done", {
+                      title: child.title
+                    }),
+                    onCheckedChange: (next) => {
+                      void handleToggleSubtask(child, next === true);
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: `min-w-0 flex-1 truncate text-sm ${done ? "text-muted-foreground line-through" : "text-foreground"}`,
+                    children: child.title
+                  }
+                ),
+                /* @__PURE__ */ jsx(Avatar, { label: assigneeName, size: "xs" }),
+                /* @__PURE__ */ jsx("span", { className: "font-mono text-xs tabular-nums text-muted-foreground", children: formatBoardMinutes(child.loggedMinutes) })
+              ]
+            },
+            child.id
+          );
+        }) }),
+        !doneStatusId && children.length > 0 ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: t(
+          "staff.time_tracking.taskDrawer.subtasks.noDoneColumn",
+          "This project has no done column, so a subtask has no way to close."
+        ) }) : null,
+        canManage ? composingSubtask ? /* @__PURE__ */ jsx(
+          Input,
+          {
+            autoFocus: true,
+            size: "sm",
+            value: subtaskDraft,
+            disabled: busy,
+            onChange: (event) => setSubtaskDraft(event.target.value),
+            onKeyDown: (event) => {
+              if (event.key === "Enter") {
+                event.preventDefault();
+                void handleAddSubtask();
+              }
+              if (event.key === "Escape") {
+                event.preventDefault();
+                event.stopPropagation();
+                setComposingSubtask(false);
+                setSubtaskDraft("");
+              }
+            },
+            placeholder: t("staff.time_tracking.taskDrawer.subtasks.placeholder", "Subtask title"),
+            "aria-label": t("staff.time_tracking.taskDrawer.subtasks.add", "Add subtask"),
+            "data-testid": "task-drawer-subtask-input"
+          }
+        ) : /* @__PURE__ */ jsxs(
+          Button,
+          {
+            type: "button",
+            variant: "ghost",
+            size: "sm",
+            className: "self-start",
+            onClick: () => setComposingSubtask(true),
+            "data-testid": "task-drawer-add-subtask",
+            children: [
+              /* @__PURE__ */ jsx(Plus, { className: "size-3.5", "aria-hidden": "true" }),
+              t("staff.time_tracking.taskDrawer.subtasks.add", "Add subtask")
+            ]
+          }
+        ) : null
+      ] }),
+      /* @__PURE__ */ jsxs("section", { className: "flex flex-col gap-3", "data-testid": "task-drawer-entries", children: [
+        /* @__PURE__ */ jsx("h3", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: t("staff.time_tracking.taskDrawer.entries.title", "Time entries ({count})", { count: entries.length }) }),
+        recentEntries.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: t("staff.time_tracking.taskDrawer.entries.empty", "No time entries yet.") }) : /* @__PURE__ */ jsx("ul", { className: "flex flex-col", children: recentEntries.map((entry) => /* @__PURE__ */ jsxs(
+          "li",
+          {
+            className: "flex items-center gap-3 border-b border-border py-2 text-sm last:border-b-0",
+            "data-entry-id": entry.id,
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "w-20 shrink-0 text-xs text-muted-foreground", children: formatDate(entry.date) ?? "" }),
+              /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-foreground", children: entry.description ?? t("staff.time_tracking.taskDrawer.entries.noDescription", "No description") }),
+              /* @__PURE__ */ jsx("span", { className: "font-mono text-xs tabular-nums text-muted-foreground", children: formatBoardMinutes(entry.durationMinutes) })
+            ]
+          },
+          entry.id
+        )) }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "ghost",
+            size: "sm",
+            className: "self-start",
+            onClick: () => router.push(`${ENTRIES_LIST_PATH}?taskId=${encodeURIComponent(taskId)}`),
+            children: t("staff.time_tracking.taskDrawer.entries.showAll", "Show all")
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(
+        TaskCommentThread,
+        {
+          comments: commentsQuery.data ?? [],
+          loading: commentsQuery.isLoading,
+          loadError: commentsQuery.isError,
+          posting: busy,
+          canComment: canManage,
+          onPost: handlePostComment
+        }
+      ),
+      /* @__PURE__ */ jsxs("section", { className: "flex flex-col gap-3", "data-testid": "task-drawer-properties", children: [
+        /* @__PURE__ */ jsx("h3", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: t("staff.time_tracking.taskDrawer.properties.title", "Properties") }),
+        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-muted-foreground", children: t("staff.time_tracking.taskDrawer.properties.status", "Status") }),
+            /* @__PURE__ */ jsxs(
+              Select,
+              {
+                value: task.taskStatusId ?? void 0,
+                disabled: !canManage || busy,
+                onValueChange: handleStatusChange,
+                children: [
+                  /* @__PURE__ */ jsx(
+                    SelectTrigger,
+                    {
+                      "aria-label": t("staff.time_tracking.taskDrawer.properties.status", "Status"),
+                      "data-testid": "task-drawer-status-select",
+                      children: /* @__PURE__ */ jsx(SelectValue, {})
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(SelectContent, { children: statuses.map((entry) => /* @__PURE__ */ jsx(SelectItem, { value: entry.id, children: entry.name }, entry.id)) })
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-muted-foreground", children: t("staff.time_tracking.taskDrawer.properties.assignee", "Assignee") }),
+            /* @__PURE__ */ jsxs(
+              Select,
+              {
+                value: task.assigneeStaffMemberId ?? void 0,
+                disabled: !canManage || busy,
+                onValueChange: handleAssigneeChange,
+                children: [
+                  /* @__PURE__ */ jsx(
+                    SelectTrigger,
+                    {
+                      "aria-label": t("staff.time_tracking.taskDrawer.properties.assignee", "Assignee"),
+                      "data-testid": "task-drawer-assignee-select",
+                      children: /* @__PURE__ */ jsx(
+                        SelectValue,
+                        {
+                          placeholder: t("staff.time_tracking.taskDrawer.properties.unassigned", "Unassigned")
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(SelectContent, { children: members.map((member) => /* @__PURE__ */ jsx(SelectItem, { value: member.id, children: member.name }, member.id)) })
+                ]
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-muted-foreground", children: t("staff.time_tracking.taskDrawer.properties.tags", "Tags") }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+            assignedTags.map((tag) => /* @__PURE__ */ jsxs(Badge, { variant: "neutral", className: "gap-1", style: tagChipStyle(tag), children: [
+              tag.label,
+              canManage ? /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": t("staff.time_tracking.taskDrawer.properties.removeTag", "Remove tag {label}", {
+                    label: tag.label
+                  }),
+                  onClick: () => {
+                    void handleTagChange(tag.id, false);
+                  },
+                  children: /* @__PURE__ */ jsx(X, { className: "size-3", "aria-hidden": "true" })
+                }
+              ) : null
+            ] }, tag.id)),
+            canManage ? /* @__PURE__ */ jsx(
+              TagPicker,
+              {
+                available: availableTags,
+                disabled: busy,
+                onAssign: (id) => {
+                  void handleTagChange(id, true);
+                },
+                onCreate: createTag,
+                labels: {
+                  add: t("staff.time_tracking.taskDrawer.properties.addTag", "Add tag"),
+                  create: (name) => t("staff.time_tracking.entryDialog.createTag", 'Create "{name}"', { name }),
+                  empty: t("staff.time_tracking.entryDialog.noTags", "No matching tag")
+                },
+                testIdPrefix: "task-drawer"
+              }
+            ) : null
+          ] }),
+          /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: t(
+            "staff.time_tracking.taskDrawer.properties.tagsPending",
+            "Tags already saved on this task appear here once the task list returns them."
+          ) })
+        ] }),
+        /* @__PURE__ */ jsx(
+          InjectionSpot,
+          {
+            spotId: extensionPoints.hosts.taskDetailSidebar.spotId,
+            context: taskInjectionContext,
+            data: task
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(
+        InjectionSpot,
+        {
+          spotId: extensionPoints.hosts.taskDetailTabs.spotId,
+          context: taskInjectionContext,
+          data: task
+        }
+      )
+    ] });
+  })();
+  const createdLabel = formatDate(createdAt);
+  const headerLine = [
+    projectName ?? null,
+    createdLabel ? t("staff.time_tracking.taskDrawer.created", "created {date}", { date: createdLabel }) : null
+  ].filter((part) => !!part).join(" \xB7 ");
+  return /* @__PURE__ */ jsx(Drawer, { open, onOpenChange, children: /* @__PURE__ */ jsxs(
+    DrawerContent,
+    {
+      className: "sm:max-w-xl",
+      closeAriaLabel: t("staff.time_tracking.taskDrawer.close", "Close"),
+      "data-testid": "task-drawer",
+      children: [
+        /* @__PURE__ */ jsx(DrawerHeader, { children: /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1.5", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            status ? /* @__PURE__ */ jsx(Badge, { variant: statusVariant, children: status.name }) : null,
+            task?.reference ? /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: task.reference }) : null,
+            /* @__PURE__ */ jsx(
+              InjectionSpot,
+              {
+                spotId: extensionPoints.hosts.taskDetailStatusBadges.spotId,
+                context: taskInjectionContext,
+                data: task
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(DrawerTitle, { className: "truncate", children: task?.title ?? "" }),
+          /* @__PURE__ */ jsx(DrawerDescription, { children: headerLine }),
+          /* @__PURE__ */ jsx(
+            InjectionSpot,
+            {
+              spotId: extensionPoints.hosts.taskDetailHeader.spotId,
+              context: taskInjectionContext,
+              data: task
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ jsx(DrawerBody, { children: body }),
+        /* @__PURE__ */ jsxs(
+          DrawerFooter,
+          {
+            leading: /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: t("staff.time_tracking.taskDrawer.autoSave", "Changes are saved automatically") }),
+            children: [
+              /* @__PURE__ */ jsx(
+                InjectionSpot,
+                {
+                  spotId: extensionPoints.hosts.taskDetailFooter.spotId,
+                  context: taskInjectionContext,
+                  data: task
+                }
+              ),
+              /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", onClick: () => onOpenChange(false), children: t("staff.time_tracking.taskDrawer.close", "Close") })
+            ]
+          }
+        ),
+        ConfirmDialogElement
+      ]
+    }
+  ) });
+}
+var TaskDrawer_default = TaskDrawer;
+export {
+  ENTRIES_LIST_PATH,
+  RATES_FEATURE,
+  TASKS_MANAGE_FEATURE,
+  TASK_DRAWER_MUTATION_CONTEXT_ID,
+  TaskDrawer,
+  TaskDrawer_default as default
+};
+//# sourceMappingURL=TaskDrawer.js.map