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

@@ -0,0 +1,307 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Check, ChevronDown, Search } from "lucide-react";
+import { Avatar } from "@open-mercato/ui/primitives/avatar";
+import { Kbd } from "@open-mercato/ui/primitives/kbd";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { resolveProjectColorHex } from "../timesheets-ui/colors.js";
+function formatHours(minutes) {
+  if (minutes === null || minutes <= 0) return null;
+  return `${Math.floor(minutes / 60)}:${String(minutes % 60).padStart(2, "0")}`;
+}
+function highlight(text, term) {
+  const trimmed = term.trim();
+  if (!trimmed) return text;
+  const index = text.toLowerCase().indexOf(trimmed.toLowerCase());
+  if (index < 0) return text;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    text.slice(0, index),
+    /* @__PURE__ */ jsx("mark", { className: "rounded-sm bg-status-warning-bg px-0.5 text-status-warning-text", children: text.slice(index, index + trimmed.length) }),
+    text.slice(index + trimmed.length)
+  ] });
+}
+function matchesTask(item, term) {
+  const trimmed = term.trim().toLowerCase();
+  if (!trimmed) return true;
+  return item.title.toLowerCase().includes(trimmed) || (item.reference ?? "").toLowerCase().includes(trimmed);
+}
+function groupTasks(items, recentTaskIds, labels) {
+  const byId = new Map(items.map((item) => [item.id, item]));
+  const groups = [];
+  const recent = recentTaskIds.map((id) => byId.get(id)).filter((item) => item !== void 0);
+  if (recent.length > 0) {
+    groups.push({ key: "__recent", label: labels.recent, sublabel: null, items: recent });
+  }
+  const byProject = /* @__PURE__ */ new Map();
+  for (const item of items) {
+    const key = item.projectId ?? "__none";
+    const bucket = byProject.get(key) ?? [];
+    bucket.push(item);
+    byProject.set(key, bucket);
+  }
+  const projectGroups = [...byProject.entries()].map(([key, groupItems]) => ({
+    key,
+    label: groupItems[0]?.projectName ?? labels.noProject,
+    sublabel: groupItems[0]?.customerName ?? null,
+    items: groupItems
+  }));
+  projectGroups.sort((left, right) => left.label.localeCompare(right.label));
+  return [...groups, ...projectGroups];
+}
+function TaskPicker({
+  value,
+  onChange,
+  items,
+  recentTaskIds = [],
+  statuses = {},
+  onQueryChange,
+  searching,
+  loading,
+  disabled,
+  scopedProjectName,
+  autoFocus
+}) {
+  const t = useT();
+  const [open, setOpen] = React.useState(false);
+  const [query, setQuery] = React.useState("");
+  const [activeIndex, setActiveIndex] = React.useState(0);
+  const containerRef = React.useRef(null);
+  const inputRef = React.useRef(null);
+  const listRef = React.useRef(null);
+  const labels = React.useMemo(
+    () => ({
+      recent: t("staff.time_tracking.taskPicker.recent", "Recent"),
+      noProject: t("staff.time_tracking.taskPicker.noProject", "No project"),
+      search: scopedProjectName ? t("staff.time_tracking.taskPicker.searchScoped", "Search {project} tasks", { project: scopedProjectName }) : t("staff.time_tracking.taskPicker.search", "Search tasks"),
+      placeholder: t("staff.time_tracking.taskPicker.placeholder", "Pick a task"),
+      change: t("staff.time_tracking.taskPicker.change", "Change"),
+      empty: t("staff.time_tracking.taskPicker.empty", "Nothing matches {term}"),
+      move: t("staff.time_tracking.taskPicker.keyMove", "move"),
+      pick: t("staff.time_tracking.taskPicker.keyPick", "pick"),
+      close: t("staff.time_tracking.taskPicker.keyClose", "close"),
+      count: t("staff.time_tracking.taskPicker.count", "{shown} of {total}"),
+      loading: t("staff.time_tracking.taskPicker.loading", "Loading tasks\u2026")
+    }),
+    [scopedProjectName, t]
+  );
+  const filtered = React.useMemo(() => items.filter((item) => matchesTask(item, query)), [items, query]);
+  const groups = React.useMemo(
+    // Recents are only a shortcut for the unfiltered list; once you are typing,
+    // the match itself is the shortcut and a duplicate row is just noise.
+    () => groupTasks(filtered, query.trim() ? [] : recentTaskIds, labels),
+    [filtered, labels, query, recentTaskIds]
+  );
+  const flat = React.useMemo(() => groups.flatMap((group) => group.items), [groups]);
+  React.useEffect(() => {
+    setActiveIndex(0);
+  }, [query]);
+  React.useEffect(() => {
+    onQueryChange?.(query);
+  }, [onQueryChange, query]);
+  React.useEffect(() => {
+    if (!open) return;
+    const onPointerDown = (event) => {
+      if (!containerRef.current?.contains(event.target)) setOpen(false);
+    };
+    const onEscapeCapture = (event) => {
+      if (event.key !== "Escape") return;
+      event.preventDefault();
+      event.stopPropagation();
+      setOpen(false);
+    };
+    document.addEventListener("mousedown", onPointerDown);
+    window.addEventListener("keydown", onEscapeCapture, true);
+    return () => {
+      document.removeEventListener("mousedown", onPointerDown);
+      window.removeEventListener("keydown", onEscapeCapture, true);
+    };
+  }, [open]);
+  React.useEffect(() => {
+    if (!open) return;
+    listRef.current?.querySelector('[data-active="true"]')?.scrollIntoView({ block: "nearest" });
+  }, [activeIndex, open]);
+  const selected = React.useMemo(() => items.find((item) => item.id === value) ?? null, [items, value]);
+  const choose = React.useCallback(
+    (taskId) => {
+      onChange(taskId);
+      setQuery("");
+      setOpen(false);
+    },
+    [onChange]
+  );
+  const handleKeyDown = React.useCallback(
+    (event) => {
+      if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+        event.preventDefault();
+        if (flat.length === 0) return;
+        const step = event.key === "ArrowDown" ? 1 : -1;
+        setActiveIndex((current) => (current + step + flat.length) % flat.length);
+        return;
+      }
+      if (event.key === "Enter") {
+        event.preventDefault();
+        const target = flat[activeIndex];
+        if (target) choose(target.id);
+      }
+    },
+    [activeIndex, choose, flat]
+  );
+  const statusDot = (item) => {
+    const status = item.statusId ? statuses[item.statusId] : void 0;
+    const hex = status ? resolveProjectColorHex(status.color, status.name) : null;
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "size-2 shrink-0 rounded-full",
+        style: { backgroundColor: hex ?? "var(--muted-foreground)" },
+        title: status?.name ?? void 0,
+        "aria-hidden": true
+      }
+    );
+  };
+  if (selected && !open) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: containerRef,
+        className: "flex items-center gap-2 rounded-md border border-input bg-background px-2.5 py-2",
+        "data-testid": "task-picker-selected",
+        children: [
+          statusDot(selected),
+          selected.reference ? /* @__PURE__ */ jsx("span", { className: "shrink-0 font-mono text-xs text-muted-foreground", children: selected.reference }) : null,
+          /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-sm font-medium", children: selected.title }),
+          selected.projectName ? /* @__PURE__ */ jsx("span", { className: "shrink-0 rounded-full border border-border bg-muted px-2 py-0.5 text-xs text-muted-foreground", children: selected.customerName ? `${selected.projectName} \xB7 ${selected.customerName}` : selected.projectName }) : null,
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              disabled,
+              className: "shrink-0 text-xs text-muted-foreground underline underline-offset-2",
+              onClick: () => {
+                setOpen(true);
+                window.setTimeout(() => inputRef.current?.focus(), 0);
+              },
+              "data-testid": "task-picker-change",
+              children: labels.change
+            }
+          )
+        ]
+      }
+    );
+  }
+  let flatIndex = -1;
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: "flex flex-col gap-1", "data-testid": "task-picker", children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "flex h-9 items-center gap-2 rounded-md border border-input bg-background px-2.5\n                   focus-within:border-foreground focus-within:shadow-focus",
+        children: [
+          /* @__PURE__ */ jsx(Search, { className: "size-4 shrink-0 text-muted-foreground", "aria-hidden": true }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: inputRef,
+              value: query,
+              disabled,
+              autoFocus,
+              onFocus: () => setOpen(true),
+              onChange: (event) => {
+                setQuery(event.target.value);
+                setOpen(true);
+              },
+              onKeyDown: handleKeyDown,
+              placeholder: selected ? selected.title : labels.search,
+              "aria-label": labels.placeholder,
+              "aria-expanded": open,
+              role: "combobox",
+              "aria-controls": "task-picker-listbox",
+              className: "h-full w-full bg-transparent text-sm outline-none placeholder:text-muted-foreground",
+              "data-testid": "task-picker-input"
+            }
+          ),
+          /* @__PURE__ */ jsx(ChevronDown, { className: "size-4 shrink-0 text-muted-foreground", "aria-hidden": true })
+        ]
+      }
+    ),
+    open ? /* @__PURE__ */ jsxs("div", { className: "overflow-hidden rounded-md border border-border bg-popover shadow-md", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: listRef,
+          id: "task-picker-listbox",
+          role: "listbox",
+          className: "max-h-72 overflow-y-auto",
+          children: loading || searching && flat.length === 0 ? (
+            // A remote search that has not answered yet is still "loading" to
+            // the reader; saying "nothing matches" first and contradicting it
+            // a moment later is what makes a picker feel unreliable.
+            /* @__PURE__ */ jsx("p", { className: "px-3 py-4 text-center text-xs text-muted-foreground", children: labels.loading })
+          ) : flat.length === 0 ? /* @__PURE__ */ jsx("p", { className: "px-3 py-4 text-center text-xs text-muted-foreground", children: labels.empty.replace("{term}", query.trim()) }) : groups.map((group) => /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsxs("div", { className: "sticky top-0 z-10 flex items-center justify-between gap-2 border-b border-border bg-muted px-2.5 py-1 text-overline font-semibold uppercase tracking-widest text-muted-foreground", children: [
+              /* @__PURE__ */ jsx("span", { className: "truncate", children: group.sublabel ? `${group.label} \xB7 ${group.sublabel}` : group.label }),
+              /* @__PURE__ */ jsx("span", { className: "shrink-0 font-medium normal-case tracking-normal", children: group.items.length })
+            ] }),
+            group.items.map((item) => {
+              flatIndex += 1;
+              const isActive = flatIndex === activeIndex;
+              const hours = formatHours(item.loggedMinutes);
+              return /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  role: "option",
+                  "aria-selected": item.id === value,
+                  "data-active": isActive,
+                  "data-testid": `task-picker-option-${item.id}`,
+                  onMouseEnter: () => setActiveIndex(flat.indexOf(item)),
+                  onClick: () => choose(item.id),
+                  className: `flex h-9 w-full items-center gap-2 border-b border-border/50 px-2.5 text-left text-sm last:border-b-0 ${isActive ? "bg-accent" : ""}`,
+                  children: [
+                    statusDot(item),
+                    /* @__PURE__ */ jsx("span", { className: "w-14 shrink-0 truncate font-mono text-xs text-muted-foreground", children: item.reference ? highlight(item.reference, query) : "" }),
+                    /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: highlight(item.title, query) }),
+                    item.assigneeInitials ? /* @__PURE__ */ jsx(
+                      Avatar,
+                      {
+                        size: "sm",
+                        variant: "monochrome",
+                        label: item.assigneeInitials,
+                        ariaLabel: item.assigneeName ?? item.assigneeInitials,
+                        title: item.assigneeName ?? void 0
+                      }
+                    ) : null,
+                    hours ? /* @__PURE__ */ jsx("span", { className: "shrink-0 font-mono text-xs tabular-nums text-muted-foreground", children: hours }) : null,
+                    item.id === value ? /* @__PURE__ */ jsx(Check, { className: "size-3.5 shrink-0 text-foreground", "aria-hidden": true }) : null
+                  ]
+                },
+                `${group.key}:${item.id}`
+              );
+            })
+          ] }, group.key))
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 border-t border-border bg-muted px-2.5 py-1 text-xs text-muted-foreground", children: [
+        /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx(Kbd, { children: "\u2191" }),
+          /* @__PURE__ */ jsx(Kbd, { children: "\u2193" }),
+          labels.move,
+          /* @__PURE__ */ jsx(Kbd, { className: "ml-1", children: "\u21B5" }),
+          labels.pick,
+          /* @__PURE__ */ jsx(Kbd, { className: "ml-1", children: "esc" }),
+          labels.close
+        ] }),
+        /* @__PURE__ */ jsx("span", { children: labels.count.replace("{shown}", String(flat.length)).replace("{total}", String(items.length)) })
+      ] })
+    ] }) : null
+  ] });
+}
+var TaskPicker_default = TaskPicker;
+export {
+  TaskPicker,
+  TaskPicker_default as default,
+  groupTasks,
+  highlight,
+  matchesTask
+};
+//# sourceMappingURL=TaskPicker.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/modules/staff/lib/time-tracking-ui/TaskPicker.tsx"],
+  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport { Check, ChevronDown, Search } from 'lucide-react'\nimport { Avatar } from '@open-mercato/ui/primitives/avatar'\nimport { Kbd } from '@open-mercato/ui/primitives/kbd'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { resolveProjectColorHex } from '../timesheets-ui/colors'\n\n/**\n * The task picker.\n *\n * A generic entity lookup is the wrong shape for this: thirty tasks belonging to\n * six projects are not thirty independent rows, they are six groups, and the one\n * thing every row in a group shares \u2014 the project and its customer \u2014 is exactly\n * what a flat list repeats and then truncates. So the project becomes a sticky\n * header said once, and the row spends its width on what differs.\n *\n * The other departure is what leads a row. `AWR-6` is how a task is named out\n * loud and quoted in a report, but nobody *scans* for it \u2014 they scan for \"the\n * booking thing\". The title is therefore the headline and the reference is a\n * quiet monospace column beside it, readable when you need it and silent when\n * you do not.\n *\n * Recents lead the list because time logging is repetitive: most entries in a\n * week go to a handful of tasks, so opening on those makes the common case one\n * keystroke.\n */\n\nexport type TaskPickerStatus = {\n  id: string\n  name: string\n  color: string | null\n  isDone: boolean\n}\n\nexport type TaskPickerItem = {\n  id: string\n  reference: string | null\n  title: string\n  projectId: string | null\n  projectName: string | null\n  customerName: string | null\n  statusId: string | null\n  assigneeInitials: string | null\n  assigneeName: string | null\n  loggedMinutes: number | null\n}\n\nexport type TaskPickerProps = {\n  value: string | null\n  onChange: (taskId: string | null) => void\n  /** Every task the caller may pick, already scoped. */\n  items: TaskPickerItem[]\n  /** Task ids the viewer logged time to recently, most recent first. */\n  recentTaskIds?: string[]\n  statuses?: Record<string, TaskPickerStatus>\n  /**\n   * The search term, reported on every keystroke so the host can widen `items`\n   * with a server-side search. The picker keeps filtering what it was given, so\n   * a host that ignores this stays exactly as it was.\n   */\n  onQueryChange?: (query: string) => void\n  /** A host-side search for the current term is still in flight. */\n  searching?: boolean\n  loading?: boolean\n  disabled?: boolean\n  /** Set when the picker was opened from inside one project. */\n  scopedProjectName?: string | null\n  autoFocus?: boolean\n}\n\ntype Group = { key: string; label: string; sublabel: string | null; items: TaskPickerItem[] }\n\nfunction formatHours(minutes: number | null): string | null {\n  if (minutes === null || minutes <= 0) return null\n  return `${Math.floor(minutes / 60)}:${String(minutes % 60).padStart(2, '0')}`\n}\n\n/** Case-insensitive, first occurrence only \u2014 enough to show *why* a row matched. */\nexport function highlight(text: string, term: string): React.ReactNode {\n  const trimmed = term.trim()\n  if (!trimmed) return text\n  const index = text.toLowerCase().indexOf(trimmed.toLowerCase())\n  if (index < 0) return text\n  return (\n    <>\n      {text.slice(0, index)}\n      <mark className=\"rounded-sm bg-status-warning-bg px-0.5 text-status-warning-text\">\n        {text.slice(index, index + trimmed.length)}\n      </mark>\n      {text.slice(index + trimmed.length)}\n    </>\n  )\n}\n\nexport function matchesTask(item: TaskPickerItem, term: string): boolean {\n  const trimmed = term.trim().toLowerCase()\n  if (!trimmed) return true\n  return (\n    item.title.toLowerCase().includes(trimmed) ||\n    (item.reference ?? '').toLowerCase().includes(trimmed)\n  )\n}\n\n/**\n * Recents first, then one group per project.\n *\n * A task that is in recents is deliberately still listed under its project: the\n * recents block is a shortcut, not a move, and a reader scanning Apollo should\n * find every Apollo task where they expect it.\n */\nexport function groupTasks(\n  items: TaskPickerItem[],\n  recentTaskIds: string[],\n  labels: { recent: string; noProject: string },\n): Group[] {\n  const byId = new Map(items.map((item) => [item.id, item]))\n  const groups: Group[] = []\n\n  const recent = recentTaskIds\n    .map((id) => byId.get(id))\n    .filter((item): item is TaskPickerItem => item !== undefined)\n  if (recent.length > 0) {\n    groups.push({ key: '__recent', label: labels.recent, sublabel: null, items: recent })\n  }\n\n  const byProject = new Map<string, TaskPickerItem[]>()\n  for (const item of items) {\n    const key = item.projectId ?? '__none'\n    const bucket = byProject.get(key) ?? []\n    bucket.push(item)\n    byProject.set(key, bucket)\n  }\n\n  const projectGroups = [...byProject.entries()].map(([key, groupItems]) => ({\n    key,\n    label: groupItems[0]?.projectName ?? labels.noProject,\n    sublabel: groupItems[0]?.customerName ?? null,\n    items: groupItems,\n  }))\n  projectGroups.sort((left, right) => left.label.localeCompare(right.label))\n\n  return [...groups, ...projectGroups]\n}\n\nexport function TaskPicker({\n  value,\n  onChange,\n  items,\n  recentTaskIds = [],\n  statuses = {},\n  onQueryChange,\n  searching,\n  loading,\n  disabled,\n  scopedProjectName,\n  autoFocus,\n}: TaskPickerProps) {\n  const t = useT()\n  const [open, setOpen] = React.useState(false)\n  const [query, setQuery] = React.useState('')\n  const [activeIndex, setActiveIndex] = React.useState(0)\n  const containerRef = React.useRef<HTMLDivElement | null>(null)\n  const inputRef = React.useRef<HTMLInputElement | null>(null)\n  const listRef = React.useRef<HTMLDivElement | null>(null)\n\n  const labels = React.useMemo(\n    () => ({\n      recent: t('staff.time_tracking.taskPicker.recent', 'Recent'),\n      noProject: t('staff.time_tracking.taskPicker.noProject', 'No project'),\n      search: scopedProjectName\n        ? t('staff.time_tracking.taskPicker.searchScoped', 'Search {project} tasks', { project: scopedProjectName })\n        : t('staff.time_tracking.taskPicker.search', 'Search tasks'),\n      placeholder: t('staff.time_tracking.taskPicker.placeholder', 'Pick a task'),\n      change: t('staff.time_tracking.taskPicker.change', 'Change'),\n      empty: t('staff.time_tracking.taskPicker.empty', 'Nothing matches {term}'),\n      move: t('staff.time_tracking.taskPicker.keyMove', 'move'),\n      pick: t('staff.time_tracking.taskPicker.keyPick', 'pick'),\n      close: t('staff.time_tracking.taskPicker.keyClose', 'close'),\n      count: t('staff.time_tracking.taskPicker.count', '{shown} of {total}'),\n      loading: t('staff.time_tracking.taskPicker.loading', 'Loading tasks\u2026'),\n    }),\n    [scopedProjectName, t],\n  )\n\n  const filtered = React.useMemo(() => items.filter((item) => matchesTask(item, query)), [items, query])\n  const groups = React.useMemo(\n    // Recents are only a shortcut for the unfiltered list; once you are typing,\n    // the match itself is the shortcut and a duplicate row is just noise.\n    () => groupTasks(filtered, query.trim() ? [] : recentTaskIds, labels),\n    [filtered, labels, query, recentTaskIds],\n  )\n  const flat = React.useMemo(() => groups.flatMap((group) => group.items), [groups])\n\n  React.useEffect(() => { setActiveIndex(0) }, [query])\n\n  React.useEffect(() => { onQueryChange?.(query) }, [onQueryChange, query])\n\n  React.useEffect(() => {\n    if (!open) return\n    const onPointerDown = (event: MouseEvent) => {\n      if (!containerRef.current?.contains(event.target as Node)) setOpen(false)\n    }\n    /**\n     * Escape belongs to the innermost open layer, and while this list is open\n     * that layer is the list \u2014 not the dialog hosting it.\n     *\n     * Radix's `DismissableLayer`, which every Dialog and Drawer sits on, listens\n     * for Escape on the *document in the capture phase*, so anything bubbling\n     * out of this component runs after the dialog has already dismissed itself\n     * and taken the half-entered entry with it. The window is one step earlier\n     * in the same propagation path, so listening there \u2014 and stopping the event\n     * \u2014 is what makes \"close the popover\" and \"close the dialog\" two different\n     * keystrokes rather than one.\n     */\n    const onEscapeCapture = (event: KeyboardEvent) => {\n      if (event.key !== 'Escape') return\n      event.preventDefault()\n      event.stopPropagation()\n      setOpen(false)\n    }\n    document.addEventListener('mousedown', onPointerDown)\n    window.addEventListener('keydown', onEscapeCapture, true)\n    return () => {\n      document.removeEventListener('mousedown', onPointerDown)\n      window.removeEventListener('keydown', onEscapeCapture, true)\n    }\n  }, [open])\n\n  React.useEffect(() => {\n    if (!open) return\n    listRef.current?.querySelector('[data-active=\"true\"]')?.scrollIntoView({ block: 'nearest' })\n  }, [activeIndex, open])\n\n  const selected = React.useMemo(() => items.find((item) => item.id === value) ?? null, [items, value])\n\n  const choose = React.useCallback(\n    (taskId: string) => {\n      onChange(taskId)\n      setQuery('')\n      setOpen(false)\n    },\n    [onChange],\n  )\n\n  const handleKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLInputElement>) => {\n      if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n        event.preventDefault()\n        if (flat.length === 0) return\n        const step = event.key === 'ArrowDown' ? 1 : -1\n        setActiveIndex((current) => (current + step + flat.length) % flat.length)\n        return\n      }\n      if (event.key === 'Enter') {\n        event.preventDefault()\n        const target = flat[activeIndex]\n        if (target) choose(target.id)\n      }\n      // Escape is handled by the window-capture listener above, which has to run\n      // before Radix's document-capture dismissal \u2014 a React handler here would\n      // never see the key.\n    },\n    [activeIndex, choose, flat],\n  )\n\n  const statusDot = (item: TaskPickerItem) => {\n    const status = item.statusId ? statuses[item.statusId] : undefined\n    const hex = status ? resolveProjectColorHex(status.color, status.name) : null\n    return (\n      <span\n        className=\"size-2 shrink-0 rounded-full\"\n        style={{ backgroundColor: hex ?? 'var(--muted-foreground)' }}\n        title={status?.name ?? undefined}\n        aria-hidden\n      />\n    )\n  }\n\n  // Chosen and closed: one line, out of the way. The whole point of picking is\n  // to stop looking at the picker.\n  if (selected && !open) {\n    return (\n      <div\n        ref={containerRef}\n        className=\"flex items-center gap-2 rounded-md border border-input bg-background px-2.5 py-2\"\n        data-testid=\"task-picker-selected\"\n      >\n        {statusDot(selected)}\n        {selected.reference ? (\n          <span className=\"shrink-0 font-mono text-xs text-muted-foreground\">{selected.reference}</span>\n        ) : null}\n        <span className=\"min-w-0 flex-1 truncate text-sm font-medium\">{selected.title}</span>\n        {selected.projectName ? (\n          <span className=\"shrink-0 rounded-full border border-border bg-muted px-2 py-0.5 text-xs text-muted-foreground\">\n            {selected.customerName ? `${selected.projectName} \u00B7 ${selected.customerName}` : selected.projectName}\n          </span>\n        ) : null}\n        <button\n          type=\"button\"\n          disabled={disabled}\n          className=\"shrink-0 text-xs text-muted-foreground underline underline-offset-2\"\n          onClick={() => {\n            setOpen(true)\n            window.setTimeout(() => inputRef.current?.focus(), 0)\n          }}\n          data-testid=\"task-picker-change\"\n        >\n          {labels.change}\n        </button>\n      </div>\n    )\n  }\n\n  let flatIndex = -1\n\n  return (\n    <div ref={containerRef} className=\"flex flex-col gap-1\" data-testid=\"task-picker\">\n      <div\n        className=\"flex h-9 items-center gap-2 rounded-md border border-input bg-background px-2.5\n                   focus-within:border-foreground focus-within:shadow-focus\"\n      >\n        <Search className=\"size-4 shrink-0 text-muted-foreground\" aria-hidden />\n        <input\n          ref={inputRef}\n          value={query}\n          disabled={disabled}\n          autoFocus={autoFocus}\n          onFocus={() => setOpen(true)}\n          onChange={(event) => {\n            setQuery(event.target.value)\n            setOpen(true)\n          }}\n          onKeyDown={handleKeyDown}\n          placeholder={selected ? selected.title : labels.search}\n          aria-label={labels.placeholder}\n          aria-expanded={open}\n          role=\"combobox\"\n          aria-controls=\"task-picker-listbox\"\n          className=\"h-full w-full bg-transparent text-sm outline-none placeholder:text-muted-foreground\"\n          data-testid=\"task-picker-input\"\n        />\n        <ChevronDown className=\"size-4 shrink-0 text-muted-foreground\" aria-hidden />\n      </div>\n\n      {open ? (\n        <div className=\"overflow-hidden rounded-md border border-border bg-popover shadow-md\">\n          <div\n            ref={listRef}\n            id=\"task-picker-listbox\"\n            role=\"listbox\"\n            className=\"max-h-72 overflow-y-auto\"\n          >\n            {loading || (searching && flat.length === 0) ? (\n              // A remote search that has not answered yet is still \"loading\" to\n              // the reader; saying \"nothing matches\" first and contradicting it\n              // a moment later is what makes a picker feel unreliable.\n              <p className=\"px-3 py-4 text-center text-xs text-muted-foreground\">{labels.loading}</p>\n            ) : flat.length === 0 ? (\n              <p className=\"px-3 py-4 text-center text-xs text-muted-foreground\">\n                {labels.empty.replace('{term}', query.trim())}\n              </p>\n            ) : (\n              groups.map((group) => (\n                <div key={group.key}>\n                  <div className=\"sticky top-0 z-10 flex items-center justify-between gap-2 border-b border-border bg-muted px-2.5 py-1 text-overline font-semibold uppercase tracking-widest text-muted-foreground\">\n                    <span className=\"truncate\">\n                      {group.sublabel ? `${group.label} \u00B7 ${group.sublabel}` : group.label}\n                    </span>\n                    <span className=\"shrink-0 font-medium normal-case tracking-normal\">{group.items.length}</span>\n                  </div>\n                  {group.items.map((item) => {\n                    flatIndex += 1\n                    const isActive = flatIndex === activeIndex\n                    const hours = formatHours(item.loggedMinutes)\n                    return (\n                      <button\n                        key={`${group.key}:${item.id}`}\n                        type=\"button\"\n                        role=\"option\"\n                        aria-selected={item.id === value}\n                        data-active={isActive}\n                        data-testid={`task-picker-option-${item.id}`}\n                        onMouseEnter={() => setActiveIndex(flat.indexOf(item))}\n                        onClick={() => choose(item.id)}\n                        className={`flex h-9 w-full items-center gap-2 border-b border-border/50 px-2.5 text-left text-sm last:border-b-0 ${\n                          isActive ? 'bg-accent' : ''\n                        }`}\n                      >\n                        {statusDot(item)}\n                        <span className=\"w-14 shrink-0 truncate font-mono text-xs text-muted-foreground\">\n                          {item.reference ? highlight(item.reference, query) : ''}\n                        </span>\n                        <span className=\"min-w-0 flex-1 truncate\">{highlight(item.title, query)}</span>\n                        {item.assigneeInitials ? (\n                          <Avatar\n                            size=\"sm\"\n                            variant=\"monochrome\"\n                            label={item.assigneeInitials}\n                            ariaLabel={item.assigneeName ?? item.assigneeInitials}\n                            title={item.assigneeName ?? undefined}\n                          />\n                        ) : null}\n                        {hours ? (\n                          <span className=\"shrink-0 font-mono text-xs tabular-nums text-muted-foreground\">{hours}</span>\n                        ) : null}\n                        {item.id === value ? <Check className=\"size-3.5 shrink-0 text-foreground\" aria-hidden /> : null}\n                      </button>\n                    )\n                  })}\n                </div>\n              ))\n            )}\n          </div>\n\n          <div className=\"flex items-center justify-between gap-2 border-t border-border bg-muted px-2.5 py-1 text-xs text-muted-foreground\">\n            <span className=\"flex items-center gap-1\">\n              <Kbd>\u2191</Kbd>\n              <Kbd>\u2193</Kbd>\n              {labels.move}\n              <Kbd className=\"ml-1\">\u21B5</Kbd>\n              {labels.pick}\n              <Kbd className=\"ml-1\">esc</Kbd>\n              {labels.close}\n            </span>\n            <span>{labels.count.replace('{shown}', String(flat.length)).replace('{total}', String(items.length))}</span>\n          </div>\n        </div>\n      ) : null}\n    </div>\n  )\n}\n\nexport default TaskPicker\n"],
+  "mappings": "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",
+  "names": []
+}

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

@@ -0,0 +1,284 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { ChevronDown, Play, Plus, Square } from "lucide-react";
+import { Button } from "@open-mercato/ui/primitives/button";
+import { Input } from "@open-mercato/ui/primitives/input";
+import { Switch } from "@open-mercato/ui/primitives/switch";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { DurationInput } from "./DurationInput.js";
+function TaskQuickLog({
+  onLog,
+  logging,
+  timerRunningHere,
+  elapsed,
+  timerBusy,
+  onStartTimer,
+  onStopTimer,
+  autoFocus,
+  disabled,
+  today,
+  billableByDefault = true
+}) {
+  const t = useT();
+  const [minutes, setMinutes] = React.useState(null);
+  const [status, setStatus] = React.useState("empty");
+  const [expanded, setExpanded] = React.useState(false);
+  const [description, setDescription] = React.useState("");
+  const [date, setDate] = React.useState(today);
+  const [startClock, setStartClock] = React.useState("");
+  const [endClock, setEndClock] = React.useState("");
+  const [isBillable, setIsBillable] = React.useState(billableByDefault);
+  React.useEffect(() => {
+    setIsBillable(billableByDefault);
+  }, [billableByDefault]);
+  React.useEffect(() => {
+    setDate(today);
+  }, [today]);
+  const handleChange = React.useCallback((next, state) => {
+    setMinutes(next);
+    setStatus(state.status);
+  }, []);
+  const submit = React.useCallback(async () => {
+    if (minutes === null || minutes <= 0 || logging || disabled) return;
+    if (!date) return;
+    const saved = await onLog({
+      minutes,
+      description: description.trim() || null,
+      date,
+      isBillable,
+      startClock: startClock.trim() || null,
+      endClock: endClock.trim() || null
+    });
+    if (!saved) return;
+    setMinutes(null);
+    setDescription("");
+    setStartClock("");
+    setEndClock("");
+  }, [date, description, disabled, endClock, isBillable, logging, minutes, onLog, startClock]);
+  const handleKeyDown = React.useCallback(
+    (event) => {
+      if (event.key !== "Enter") return;
+      event.preventDefault();
+      void submit();
+    },
+    [submit]
+  );
+  const canSubmit = !disabled && !logging && status === "valid" && minutes !== null && minutes > 0 && date.length > 0;
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", "data-testid": "task-drawer-quick-log", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-start gap-2", children: [
+      /* @__PURE__ */ jsx("div", { className: "w-28", children: /* @__PURE__ */ jsx(
+        DurationInput,
+        {
+          value: minutes,
+          onChange: handleChange,
+          onKeyDown: handleKeyDown,
+          autoFocus,
+          disabled: disabled || logging,
+          inputSize: "sm",
+          placeholder: t("staff.time_tracking.taskDrawer.quickLog.placeholder", "1h 40m"),
+          ariaLabel: t("staff.time_tracking.taskDrawer.quickLog.label", "Time to log")
+        }
+      ) }),
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          type: "button",
+          size: "sm",
+          disabled: !canSubmit,
+          onClick: () => {
+            void submit();
+          },
+          "data-testid": "task-drawer-quick-log-submit",
+          children: [
+            /* @__PURE__ */ jsx(Plus, { className: "size-3.5", "aria-hidden": "true" }),
+            t("staff.time_tracking.taskDrawer.quickLog.cta", "Log")
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "sm",
+          disabled,
+          "aria-expanded": expanded,
+          onClick: () => {
+            setExpanded((value) => !value);
+          },
+          "data-testid": "task-drawer-quick-log-toggle",
+          children: [
+            /* @__PURE__ */ jsx(
+              ChevronDown,
+              {
+                className: `size-3.5 transition-transform ${expanded ? "rotate-180" : ""}`,
+                "aria-hidden": "true"
+              }
+            ),
+            t("staff.time_tracking.taskDrawer.quickLog.details", "Details")
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "flex-1" }),
+      timerRunningHere ? /* @__PURE__ */ jsxs(
+        Button,
+        {
+          type: "button",
+          variant: "outline",
+          size: "sm",
+          disabled: timerBusy,
+          onClick: onStopTimer,
+          "data-testid": "task-drawer-timer-stop",
+          children: [
+            /* @__PURE__ */ jsx(Square, { className: "size-3.5", "aria-hidden": "true" }),
+            t("staff.time_tracking.taskDrawer.timer.stop", "Stop {elapsed}", { elapsed: elapsed ?? "" })
+          ]
+        }
+      ) : /* @__PURE__ */ jsxs(
+        Button,
+        {
+          type: "button",
+          variant: "outline",
+          size: "sm",
+          disabled: disabled || timerBusy,
+          onClick: onStartTimer,
+          "data-testid": "task-drawer-timer-start",
+          children: [
+            /* @__PURE__ */ jsx(Play, { className: "size-3.5", "aria-hidden": "true" }),
+            t("staff.time_tracking.taskDrawer.timer.start", "Start")
+          ]
+        }
+      )
+    ] }),
+    expanded ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 rounded-md border border-border bg-muted/40 p-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ jsx(
+          "label",
+          {
+            className: "text-xs font-medium text-muted-foreground",
+            htmlFor: "task-drawer-quick-log-description",
+            children: t("staff.time_tracking.entryDialog.description", "Description")
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            id: "task-drawer-quick-log-description",
+            value: description,
+            onChange: (event) => {
+              setDescription(event.target.value);
+            },
+            onKeyDown: handleKeyDown,
+            disabled: disabled || logging,
+            size: "sm",
+            maxLength: 2e3,
+            placeholder: t(
+              "staff.time_tracking.taskDrawer.quickLog.descriptionPlaceholder",
+              "What did the time go on?"
+            ),
+            "data-testid": "task-drawer-quick-log-description"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-end gap-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ jsx(
+            "label",
+            {
+              className: "text-xs font-medium text-muted-foreground",
+              htmlFor: "task-drawer-quick-log-date",
+              children: t("staff.time_tracking.entryDialog.date", "Date")
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              id: "task-drawer-quick-log-date",
+              type: "date",
+              value: date,
+              onChange: (event) => {
+                setDate(event.target.value);
+              },
+              disabled: disabled || logging,
+              size: "sm",
+              className: "w-40",
+              "data-testid": "task-drawer-quick-log-date"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ jsx(
+            "label",
+            {
+              className: "text-xs font-medium text-muted-foreground",
+              htmlFor: "task-drawer-quick-log-start",
+              children: t("staff.time_tracking.entryDialog.start", "Start")
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              id: "task-drawer-quick-log-start",
+              type: "time",
+              value: startClock,
+              onChange: (event) => {
+                setStartClock(event.target.value);
+              },
+              disabled: disabled || logging,
+              size: "sm",
+              className: "w-28",
+              inputClassName: "font-mono tabular-nums",
+              "data-testid": "task-drawer-quick-log-start"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ jsx(
+            "label",
+            {
+              className: "text-xs font-medium text-muted-foreground",
+              htmlFor: "task-drawer-quick-log-end",
+              children: t("staff.time_tracking.entryDialog.end", "End")
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              id: "task-drawer-quick-log-end",
+              type: "time",
+              value: endClock,
+              onChange: (event) => {
+                setEndClock(event.target.value);
+              },
+              disabled: disabled || logging,
+              size: "sm",
+              className: "w-28",
+              inputClassName: "font-mono tabular-nums",
+              "data-testid": "task-drawer-quick-log-end"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 pb-1", children: [
+          /* @__PURE__ */ jsx(
+            Switch,
+            {
+              checked: isBillable,
+              onCheckedChange: setIsBillable,
+              disabled: disabled || logging,
+              "aria-label": t("staff.time_tracking.entryDialog.billable", "Billable"),
+              "data-testid": "task-drawer-quick-log-billable"
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "text-xs text-foreground", children: t("staff.time_tracking.entryDialog.billable", "Billable") })
+        ] })
+      ] })
+    ] }) : null
+  ] });
+}
+var TaskQuickLog_default = TaskQuickLog;
+export {
+  TaskQuickLog,
+  TaskQuickLog_default as default
+};
+//# sourceMappingURL=TaskQuickLog.js.map