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

package/dist/modules/staff/backend/staff/time-tracking/timesheet/GridView.js

@@ -0,0 +1,710 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { z } from "zod";
+import { registerComponent } from "@open-mercato/shared/modules/widgets/component-registry";
+import { useRegisteredComponent } from "@open-mercato/ui/backend/injection/useRegisteredComponent";
+import { extensionPoints } from "@open-mercato/core/modules/staff/extension-points";
+import {
+  callbackProp,
+  opaqueProp
+} from "../../../../lib/time-tracking/componentContracts.js";
+import { Lock, X } from "lucide-react";
+import { Button } from "@open-mercato/ui/primitives/button";
+import { SegmentedControl, SegmentedControlItem } from "@open-mercato/ui/primitives/segmented-control";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "@open-mercato/ui/primitives/select";
+import { apiCallOrThrow, withScopedApiRequestHeaders } from "@open-mercato/ui/backend/utils/apiCall";
+import { createCrud, deleteCrud, updateCrud } from "@open-mercato/ui/backend/utils/crud";
+import { useGuardedMutation } from "@open-mercato/ui/backend/injection/useGuardedMutation";
+import { useConfirmDialog } from "@open-mercato/ui/backend/confirm-dialog";
+import { flash } from "@open-mercato/ui/backend/FlashMessages";
+import { surfaceRecordConflict } from "@open-mercato/ui/backend/conflicts";
+import { buildOptimisticLockHeader } from "@open-mercato/ui/backend/utils/optimisticLock";
+import { cn } from "@open-mercato/shared/lib/utils";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { createLogger } from "@open-mercato/shared/lib/logger";
+import { AddRowDropdown } from "../../../../lib/timesheets-ui/AddRowDropdown.js";
+import { ProjectColorDot } from "../../../../lib/timesheets-ui/ProjectColorDot.js";
+import { DurationInput, formatTrimmedDecimalDuration } from "../../../../lib/time-tracking-ui/DurationInput.js";
+import { readErrorCode, isEntryLockedError } from "../../../../lib/time-tracking-ui/timeEntryListData.js";
+import { isWeekendIso, parseIsoDay } from "../../../../lib/time-tracking-ui/timesheetPeriod.js";
+import {
+  buildTargetKey,
+  targetLabel
+} from "../../../../lib/time-tracking-ui/timesheetTargets.js";
+const logger = createLogger("staff").child({ component: "time-tracking/timesheet/grid" });
+const SKELETON_ROW_COUNT = 4;
+const ENTRIES_API_PATH = "staff/timesheets/time-entries";
+const BULK_ENDPOINT = "/api/staff/timesheets/time-entries/bulk";
+const RESOURCE_KIND = "staff.timesheets.time_entry";
+function cellKey(rowKey, date) {
+  return `${rowKey}|${date}`;
+}
+function dayHeaderParts(date, locale) {
+  const parsed = parseIsoDay(date);
+  if (!parsed) return { weekday: "", dayOfMonth: date };
+  let weekday = "";
+  try {
+    weekday = new Intl.DateTimeFormat(locale, { weekday: "short" }).format(parsed);
+  } catch {
+    weekday = "";
+  }
+  return { weekday, dayOfMonth: String(parsed.getDate()) };
+}
+function buildGridRows(projects, tasks, entries, rowMode, extraTaskKeys) {
+  if (rowMode === "projects") {
+    return projects.map((project) => ({
+      key: buildTargetKey(project.id, null),
+      timeProjectId: project.id,
+      taskId: null,
+      projectName: project.name,
+      projectCode: project.code,
+      projectColor: project.color,
+      taskTitle: null,
+      removable: true
+    }));
+  }
+  const tasksById = new Map(tasks.map((task) => [task.id, task]));
+  const usedTaskIds = /* @__PURE__ */ new Map();
+  for (const entry of entries) {
+    if (!entry.taskId || !entry.timeProjectId) continue;
+    const bucket = usedTaskIds.get(entry.timeProjectId) ?? /* @__PURE__ */ new Set();
+    bucket.add(entry.taskId);
+    usedTaskIds.set(entry.timeProjectId, bucket);
+  }
+  for (const key of extraTaskKeys) {
+    const separator = key.indexOf(":");
+    if (separator < 0) continue;
+    const projectId = key.slice(0, separator);
+    const taskId = key.slice(separator + 1);
+    const bucket = usedTaskIds.get(projectId) ?? /* @__PURE__ */ new Set();
+    bucket.add(taskId);
+    usedTaskIds.set(projectId, bucket);
+  }
+  const rows = [];
+  for (const project of projects) {
+    rows.push({
+      key: buildTargetKey(project.id, null),
+      timeProjectId: project.id,
+      taskId: null,
+      projectName: project.name,
+      projectCode: project.code,
+      projectColor: project.color,
+      taskTitle: null,
+      removable: true
+    });
+    const taskIds = Array.from(usedTaskIds.get(project.id) ?? []);
+    const named = taskIds.map((taskId) => ({ taskId, title: tasksById.get(taskId)?.title ?? null })).sort((left, right) => (left.title ?? "").localeCompare(right.title ?? ""));
+    for (const task of named) {
+      rows.push({
+        key: buildTargetKey(project.id, task.taskId),
+        timeProjectId: project.id,
+        taskId: task.taskId,
+        projectName: project.name,
+        projectCode: project.code,
+        projectColor: project.color,
+        taskTitle: task.title,
+        removable: false
+      });
+    }
+  }
+  return rows;
+}
+function buildGridCells(entries, rowMode) {
+  const cells = /* @__PURE__ */ new Map();
+  for (const entry of entries) {
+    if (!entry.timeProjectId) continue;
+    const rowKey = rowMode === "projects" ? buildTargetKey(entry.timeProjectId, null) : buildTargetKey(entry.timeProjectId, entry.taskId);
+    const key = cellKey(rowKey, entry.date);
+    const current = cells.get(key) ?? { minutes: 0, entryIds: [], lockedEntryIds: [], entryVersions: {} };
+    current.minutes += Number.isFinite(entry.durationMinutes) ? entry.durationMinutes : 0;
+    current.entryIds.push(entry.id);
+    current.entryVersions[entry.id] = entry.updatedAt;
+    if (entry.isLocked) current.lockedEntryIds.push(entry.id);
+    cells.set(key, current);
+  }
+  return cells;
+}
+function DefaultGridView({
+  days,
+  projects,
+  allAssignedProjects,
+  tasks,
+  entries,
+  staffMemberId,
+  canManage,
+  canManageProjects,
+  readOnly,
+  isLoading = false,
+  rowMode,
+  onRowModeChange,
+  onAddProject,
+  onRemoveProject,
+  onCreateProject,
+  onSaved
+}) {
+  const t = useT();
+  const { confirm, ConfirmDialogElement } = useConfirmDialog();
+  const [dirty, setDirty] = React.useState({});
+  const [invalidCells, setInvalidCells] = React.useState({});
+  const [extraLockedEntryIds, setExtraLockedEntryIds] = React.useState({});
+  const [extraTaskKeys, setExtraTaskKeys] = React.useState(() => /* @__PURE__ */ new Set());
+  const [isSaving, setIsSaving] = React.useState(false);
+  const mutationContextId = staffMemberId ? `staff-timesheets:${staffMemberId}` : "staff-timesheets:pending";
+  const { runMutation, retryLastMutation } = useGuardedMutation({
+    contextId: mutationContextId,
+    blockedMessage: t("ui.forms.flash.saveBlocked", "Save blocked by validation")
+  });
+  const mutationContext = React.useCallback(
+    (resourceId) => ({
+      formId: mutationContextId,
+      resourceKind: RESOURCE_KIND,
+      resourceId,
+      staffMemberId,
+      retryLastMutation
+    }),
+    [mutationContextId, retryLastMutation, staffMemberId]
+  );
+  const rows = React.useMemo(
+    () => buildGridRows(projects, tasks, entries, rowMode, extraTaskKeys),
+    [entries, extraTaskKeys, projects, rowMode, tasks]
+  );
+  const cells = React.useMemo(() => buildGridCells(entries, rowMode), [entries, rowMode]);
+  const rowsByKey = React.useMemo(() => new Map(rows.map((row) => [row.key, row])), [rows]);
+  const resetToken = `${rowMode}|${days[0] ?? ""}|${days[days.length - 1] ?? ""}|${staffMemberId ?? ""}`;
+  const resetTokenRef = React.useRef(resetToken);
+  React.useEffect(() => {
+    if (resetTokenRef.current === resetToken) return;
+    resetTokenRef.current = resetToken;
+    setDirty({});
+    setInvalidCells({});
+  }, [resetToken]);
+  const isCellLocked = React.useCallback(
+    (key) => {
+      const cell = cells.get(key);
+      if (!cell) return false;
+      if (cell.lockedEntryIds.length > 0) return true;
+      return cell.entryIds.some((id) => extraLockedEntryIds[id]);
+    },
+    [cells, extraLockedEntryIds]
+  );
+  const cellMinutes = React.useCallback(
+    (key) => {
+      const pending = dirty[key];
+      if (pending) return pending.minutes;
+      return cells.get(key)?.minutes ?? 0;
+    },
+    [cells, dirty]
+  );
+  const handleCellChange = React.useCallback(
+    (row, date, minutes, invalid) => {
+      const key = cellKey(row.key, date);
+      setInvalidCells((current) => {
+        if (invalid === Boolean(current[key])) return current;
+        const next = { ...current };
+        if (invalid) next[key] = true;
+        else delete next[key];
+        return next;
+      });
+      if (invalid) return;
+      const nextMinutes = minutes ?? 0;
+      const stored = cells.get(key);
+      const storedMinutes = stored?.minutes ?? 0;
+      const hadEntries = (stored?.entryIds.length ?? 0) > 0;
+      setDirty((current) => {
+        const next = { ...current };
+        if (nextMinutes === storedMinutes && !hadEntries) {
+          delete next[key];
+          return next;
+        }
+        next[key] = { rowKey: row.key, date, minutes: nextMinutes };
+        return next;
+      });
+    },
+    [cells]
+  );
+  const rowTotal = React.useCallback(
+    (rowKey) => days.reduce((sum, date) => sum + cellMinutes(cellKey(rowKey, date)), 0),
+    [cellMinutes, days]
+  );
+  const dayTotal = React.useCallback(
+    (date) => rows.reduce((sum, row) => sum + cellMinutes(cellKey(row.key, date)), 0),
+    [cellMinutes, rows]
+  );
+  const grandTotal = React.useMemo(
+    () => rows.reduce((sum, row) => sum + rowTotal(row.key), 0),
+    [rowTotal, rows]
+  );
+  const dirtyCount = Object.keys(dirty).length;
+  const invalidCount = Object.keys(invalidCells).length;
+  const hasChanges = dirtyCount > 0;
+  const dense = days.length > 10;
+  const markLockedFromError = React.useCallback((error) => {
+    const body = error?.body;
+    const direct = error?.lockedEntryIds;
+    const ids = Array.isArray(body?.lockedEntryIds) ? body?.lockedEntryIds : Array.isArray(direct) ? direct : [];
+    const marked = ids.filter((id) => typeof id === "string");
+    if (marked.length === 0) return false;
+    setExtraLockedEntryIds((current) => {
+      const next = { ...current };
+      for (const id of marked) next[id] = true;
+      return next;
+    });
+    return true;
+  }, []);
+  const reportSaveFailure = React.useCallback(
+    (error) => {
+      if (surfaceRecordConflict(error, t)) return;
+      if (isEntryLockedError(error)) {
+        markLockedFromError(error);
+        flash(
+          t(
+            "staff.time_tracking.timesheet.grid.errors.locked",
+            "Some of these cells belong to a closed report and cannot be changed. They are now marked as locked."
+          ),
+          "error"
+        );
+        return;
+      }
+      logger.error("staff.time_tracking.timesheet.grid save failed", { err: error, code: readErrorCode(error) });
+      flash(t("staff.timesheets.my.errors.save", "Failed to save timesheets."), "error");
+    },
+    [markLockedFromError, t]
+  );
+  const saveTaskCells = React.useCallback(
+    async (changes) => {
+      for (const { row, cell } of changes) {
+        const key = cellKey(row.key, cell.date);
+        const storedCell = cells.get(key);
+        const existingId = storedCell?.entryIds[0] ?? null;
+        const existingVersion = existingId ? storedCell?.entryVersions[existingId] ?? null : null;
+        const errorMessage = t("staff.timesheets.my.errors.save", "Failed to save timesheets.");
+        if (existingId && cell.minutes <= 0) {
+          await runMutation({
+            operation: () => withScopedApiRequestHeaders(
+              buildOptimisticLockHeader(existingVersion),
+              () => deleteCrud(ENTRIES_API_PATH, existingId, { errorMessage })
+            ),
+            context: mutationContext(existingId),
+            mutationPayload: { id: existingId }
+          });
+          continue;
+        }
+        if (cell.minutes <= 0) continue;
+        if (existingId) {
+          const payload2 = { id: existingId, durationMinutes: cell.minutes };
+          await runMutation({
+            operation: () => withScopedApiRequestHeaders(
+              buildOptimisticLockHeader(existingVersion),
+              () => updateCrud(ENTRIES_API_PATH, payload2, { errorMessage })
+            ),
+            context: mutationContext(existingId),
+            mutationPayload: payload2
+          });
+          continue;
+        }
+        const payload = {
+          staffMemberId,
+          date: cell.date,
+          timeProjectId: row.timeProjectId,
+          taskId: row.taskId,
+          durationMinutes: cell.minutes,
+          source: "manual"
+        };
+        await runMutation({
+          operation: () => createCrud(ENTRIES_API_PATH, payload, { errorMessage }),
+          context: mutationContext(),
+          mutationPayload: payload
+        });
+      }
+    },
+    [cells, mutationContext, runMutation, staffMemberId, t]
+  );
+  const handleSave = React.useCallback(async () => {
+    if (!hasChanges || invalidCount > 0) return;
+    const confirmed = await confirm({
+      title: t("staff.timesheets.my.confirm_save.title", "Save changes?"),
+      text: t("staff.timesheets.my.confirm_save.body", "Your timesheet entries will be saved.")
+    });
+    if (!confirmed) return;
+    const bulkEntries = [];
+    const taskChanges = [];
+    for (const cell of Object.values(dirty)) {
+      const row = rowsByKey.get(cell.rowKey);
+      if (!row) continue;
+      if (row.taskId) {
+        taskChanges.push({ row, cell });
+        continue;
+      }
+      const key = cellKey(row.key, cell.date);
+      bulkEntries.push({
+        id: cells.get(key)?.entryIds[0],
+        date: cell.date,
+        timeProjectId: row.timeProjectId,
+        durationMinutes: cell.minutes
+      });
+    }
+    if (bulkEntries.length === 0 && taskChanges.length === 0) return;
+    setIsSaving(true);
+    try {
+      if (bulkEntries.length > 0) {
+        const payload = { entries: bulkEntries };
+        await runMutation({
+          operation: () => apiCallOrThrow(BULK_ENDPOINT, {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify(payload)
+          }),
+          context: mutationContext(staffMemberId ?? void 0),
+          mutationPayload: payload
+        });
+      }
+      if (taskChanges.length > 0) await saveTaskCells(taskChanges);
+      setDirty({});
+      flash(t("staff.timesheets.my.saved", "Timesheet saved."), "success");
+      await onSaved();
+    } catch (error) {
+      reportSaveFailure(error);
+    } finally {
+      setIsSaving(false);
+    }
+  }, [
+    cells,
+    confirm,
+    dirty,
+    hasChanges,
+    invalidCount,
+    mutationContext,
+    onSaved,
+    reportSaveFailure,
+    rowsByKey,
+    runMutation,
+    saveTaskCells,
+    staffMemberId,
+    t
+  ]);
+  const taskRowOptions = React.useMemo(() => {
+    const visibleProjectIds = new Set(projects.map((project) => project.id));
+    const existing = new Set(rows.map((row) => row.key));
+    return tasks.filter((task) => visibleProjectIds.has(task.timeProjectId)).map((task) => {
+      const project = projects.find((candidate) => candidate.id === task.timeProjectId);
+      return {
+        key: buildTargetKey(task.timeProjectId, task.id),
+        label: targetLabel({
+          key: buildTargetKey(task.timeProjectId, task.id),
+          timeProjectId: task.timeProjectId,
+          taskId: task.id,
+          projectName: project.name,
+          projectCode: project.code,
+          projectColor: project.color,
+          taskTitle: task.title
+        })
+      };
+    }).filter((option) => !existing.has(option.key));
+  }, [projects, rows, tasks]);
+  const editable = canManage && !readOnly;
+  const loadingLabel = t("staff.time_tracking.timesheet.grid.loading", "Loading the timesheet grid\u2026");
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [
+      /* @__PURE__ */ jsxs(
+        SegmentedControl,
+        {
+          value: rowMode,
+          onValueChange: (value) => {
+            if (value !== rowMode) onRowModeChange(value);
+          },
+          size: "sm",
+          "aria-label": t("staff.time_tracking.timesheet.grid.rowMode.label", "Grid rows"),
+          children: [
+            /* @__PURE__ */ jsx(SegmentedControlItem, { value: "projects", children: t("staff.time_tracking.timesheet.grid.rowMode.projects", "Projects") }),
+            /* @__PURE__ */ jsx(SegmentedControlItem, { value: "tasks", children: t("staff.time_tracking.timesheet.grid.rowMode.tasks", "Projects + tasks") })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+        invalidCount > 0 ? /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-status-error-text", children: t("staff.time_tracking.timesheet.grid.invalid", "Fix the highlighted cell before saving.") }) : hasChanges ? /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-status-warning-text", children: t("staff.timesheets.my.unsaved", "Unsaved changes") }) : null,
+        editable ? /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "sm",
+            type: "button",
+            onClick: () => void handleSave(),
+            disabled: !hasChanges || invalidCount > 0 || isSaving,
+            children: isSaving ? t("staff.timesheets.my.saving", "Saving...") : t("staff.timesheets.my.save_changes", "Save Changes")
+          }
+        ) : null
+      ] })
+    ] }),
+    rowMode === "tasks" && editable && taskRowOptions.length > 0 ? /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsxs(
+      Select,
+      {
+        value: "",
+        onValueChange: (value) => setExtraTaskKeys((current) => new Set(current).add(value)),
+        children: [
+          /* @__PURE__ */ jsx(
+            SelectTrigger,
+            {
+              className: "w-72",
+              "aria-label": t("staff.time_tracking.timesheet.grid.addTaskRow", "Add a task row"),
+              children: /* @__PURE__ */ jsx(SelectValue, { placeholder: t("staff.time_tracking.timesheet.grid.addTaskRow", "Add a task row") })
+            }
+          ),
+          /* @__PURE__ */ jsx(SelectContent, { children: taskRowOptions.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.key, children: option.label }, option.key)) })
+        ]
+      }
+    ) }) : null,
+    /* @__PURE__ */ jsx("div", { className: "overflow-x-auto rounded-lg border", children: /* @__PURE__ */ jsxs("table", { className: "w-full text-sm table-fixed", "aria-busy": isLoading || void 0, children: [
+      /* @__PURE__ */ jsx("caption", { className: "sr-only", children: t(
+        "staff.time_tracking.timesheet.grid.caption",
+        "Timesheet grid: one row per project or task, one column per day of the period."
+      ) }),
+      /* @__PURE__ */ jsxs("colgroup", { children: [
+        /* @__PURE__ */ jsx("col", { className: dense ? "w-[140px] min-w-[140px]" : "w-[35%]" }),
+        days.map((date) => /* @__PURE__ */ jsx("col", { className: dense ? "w-[36px] min-w-[36px]" : "" }, date)),
+        /* @__PURE__ */ jsx("col", { className: dense ? "w-[56px] min-w-[56px]" : "w-[72px]" })
+      ] }),
+      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { className: "border-b bg-muted/50", children: [
+        /* @__PURE__ */ jsx("th", { scope: "col", className: "sticky left-0 z-10 bg-muted px-3 py-2 text-left font-medium", children: t("staff.timesheets.my.project", "Project") }),
+        days.map((date) => {
+          const { weekday, dayOfMonth } = dayHeaderParts(date);
+          const weekend = isWeekendIso(date);
+          const weekendLabel = t("staff.time_tracking.timesheet.grid.weekend", "Weekend day");
+          return /* @__PURE__ */ jsxs(
+            "th",
+            {
+              scope: "col",
+              title: weekend ? `${date} \xB7 ${weekendLabel}` : date,
+              className: cn(
+                "py-2 text-center font-medium px-1",
+                weekend ? "bg-muted/80 text-muted-foreground" : null
+              ),
+              children: [
+                /* @__PURE__ */ jsx("div", { className: "text-xs uppercase text-muted-foreground", children: weekday }),
+                /* @__PURE__ */ jsx("div", { className: "text-xs", children: dayOfMonth }),
+                weekend ? /* @__PURE__ */ jsx("span", { className: "sr-only", children: weekendLabel }) : null
+              ]
+            },
+            date
+          );
+        }),
+        /* @__PURE__ */ jsx("th", { scope: "col", className: "px-3 py-2 text-right font-medium", children: t("staff.timesheets.my.total", "Total") })
+      ] }) }),
+      /* @__PURE__ */ jsxs("tbody", { children: [
+        isLoading ? Array.from({ length: SKELETON_ROW_COUNT }).map((_, index) => /* @__PURE__ */ jsxs("tr", { "data-testid": "grid-skeleton-row", className: "border-b", children: [
+          /* @__PURE__ */ jsxs("th", { scope: "row", className: "sticky left-0 z-10 bg-background px-3 py-1.5 text-left font-medium", children: [
+            index === 0 ? /* @__PURE__ */ jsx("span", { className: "sr-only", children: loadingLabel }) : null,
+            /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "block h-4 w-32 animate-pulse rounded bg-muted" })
+          ] }),
+          days.map((date) => /* @__PURE__ */ jsx("td", { className: "px-0.5 py-0.5", children: /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: cn("mx-auto block h-6 animate-pulse rounded bg-muted", dense ? "w-10" : "w-16")
+            }
+          ) }, date)),
+          /* @__PURE__ */ jsx("td", { className: "px-3 py-1.5", children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "ml-auto block h-4 w-8 animate-pulse rounded bg-muted" }) })
+        ] }, `grid-skeleton-${index}`)) : null,
+        !isLoading && rows.length === 0 ? /* @__PURE__ */ jsx("tr", { "data-testid": "grid-empty-row", className: "border-b", children: /* @__PURE__ */ jsxs("td", { colSpan: days.length + 2, className: "px-3 py-10 text-center", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-foreground", children: t("staff.time_tracking.timesheet.grid.empty.title", "This grid has no rows yet") }),
+          /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: t(
+            "staff.time_tracking.timesheet.grid.noRows",
+            "Add a project row to start filling the grid."
+          ) })
+        ] }) }) : null,
+        isLoading ? null : rows.map((row) => /* @__PURE__ */ jsxs("tr", { className: "group border-b hover:bg-muted/30", children: [
+          /* @__PURE__ */ jsx(
+            "th",
+            {
+              scope: "row",
+              className: cn(
+                "sticky left-0 z-10 bg-background px-3 py-1.5 text-left font-medium text-foreground",
+                row.taskId ? "pl-6" : null
+              ),
+              children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+                /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 truncate", title: targetLabel(row), children: [
+                    row.taskId ? null : /* @__PURE__ */ jsx(ProjectColorDot, { colorKey: row.projectColor, projectName: row.projectName, size: "sm" }),
+                    /* @__PURE__ */ jsx("span", { className: "truncate", children: row.taskId ? row.taskTitle ?? targetLabel(row) : row.projectName })
+                  ] }),
+                  row.taskId ? /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground truncate", children: row.projectName }) : row.projectCode ? /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: row.projectCode }) : null
+                ] }),
+                row.removable && editable ? /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => {
+                      const project = projects.find((candidate) => candidate.id === row.timeProjectId);
+                      if (!project) return;
+                      setInvalidCells((current) => {
+                        const prefix = cellKey(row.key, "");
+                        const next = Object.fromEntries(
+                          Object.entries(current).filter(([key]) => !key.startsWith(prefix))
+                        );
+                        return Object.keys(next).length === Object.keys(current).length ? current : next;
+                      });
+                      setDirty((current) => {
+                        const prefix = cellKey(row.key, "");
+                        const next = Object.fromEntries(
+                          Object.entries(current).filter(([key]) => !key.startsWith(prefix))
+                        );
+                        return Object.keys(next).length === Object.keys(current).length ? current : next;
+                      });
+                      void onRemoveProject(project);
+                    },
+                    "aria-label": t("staff.timesheets.my.removeRow", "Remove from grid"),
+                    title: t("staff.timesheets.my.removeRow", "Remove from grid"),
+                    className: "opacity-0 group-hover:opacity-100 focus:opacity-100 inline-flex h-5 w-5 shrink-0 cursor-pointer items-center justify-center rounded text-muted-foreground hover:bg-muted hover:text-foreground transition-opacity",
+                    children: /* @__PURE__ */ jsx(X, { className: "size-3.5" })
+                  }
+                ) : null
+              ] })
+            }
+          ),
+          days.map((date) => {
+            const key = cellKey(row.key, date);
+            const weekend = isWeekendIso(date);
+            const minutes = cellMinutes(key);
+            const locked = isCellLocked(key);
+            const isDirty = dirty[key] !== void 0;
+            const isInvalid = Boolean(invalidCells[key]);
+            return /* @__PURE__ */ jsx(
+              "td",
+              {
+                className: cn(
+                  "px-0.5 py-0.5",
+                  weekend ? "bg-muted/40" : null,
+                  // The old grid tinted the input itself amber; the border and
+                  // background of a `DurationInput` belong to the primitive, so
+                  // the pending-edit cue moved to the cell — same signal, DS
+                  // status tokens instead of raw `amber-*` (Boy Scout rule).
+                  isInvalid ? "bg-status-error-bg" : isDirty ? "bg-status-warning-bg" : null
+                ),
+                children: weekend && minutes === 0 ? /* @__PURE__ */ jsx("div", { className: "rounded px-1 py-1 text-center text-xs text-muted-foreground/50", children: "-" }) : locked || !editable ? /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: "flex items-center justify-center gap-1 rounded px-1 py-1 text-center text-xs tabular-nums text-muted-foreground",
+                    title: locked ? t(
+                      "staff.time_tracking.timesheet.grid.lockedCell",
+                      "Locked by a closed report"
+                    ) : void 0,
+                    children: [
+                      locked ? /* @__PURE__ */ jsx(Lock, { className: "size-3 shrink-0", "aria-hidden": "true" }) : null,
+                      /* @__PURE__ */ jsx("span", { children: formatTrimmedDecimalDuration(minutes) || "-" })
+                    ]
+                  }
+                ) : /* @__PURE__ */ jsx(
+                  DurationInput,
+                  {
+                    variant: "compact",
+                    inputSize: "sm",
+                    value: minutes > 0 ? minutes : null,
+                    formatValue: formatTrimmedDecimalDuration,
+                    onChange: (nextMinutes, state) => handleCellChange(row, date, nextMinutes, state.status === "invalid"),
+                    placeholder: t("staff.timesheets.my.durationPlaceholder", "0"),
+                    ariaLabel: `${targetLabel(row)} \xB7 ${date}`,
+                    className: cn("mx-auto", dense ? "w-10" : "w-16"),
+                    inputClassName: cn(
+                      "text-center px-1 tabular-nums",
+                      dense ? "text-xs" : null,
+                      minutes > 0 ? "font-semibold" : "text-muted-foreground"
+                    )
+                  }
+                )
+              },
+              date
+            );
+          }),
+          /* @__PURE__ */ jsx("td", { className: "px-3 py-1.5 text-right font-semibold text-xs tabular-nums", children: formatTrimmedDecimalDuration(rowTotal(row.key)) || "0" })
+        ] }, row.key)),
+        editable && !isLoading ? /* @__PURE__ */ jsx("tr", { className: "border-b", children: /* @__PURE__ */ jsx("td", { colSpan: days.length + 2, className: "sticky left-0 bg-background px-1 py-0.5", children: /* @__PURE__ */ jsx(
+          AddRowDropdown,
+          {
+            assignedProjects: allAssignedProjects.map((project) => ({
+              id: project.id,
+              name: project.name,
+              code: project.code,
+              color: project.color
+            })),
+            visibleProjectIds: new Set(projects.map((project) => project.id)),
+            canCreateProject: canManageProjects,
+            onAddProject: (project) => {
+              void onAddProject({
+                id: project.id,
+                name: project.name,
+                code: project.code ?? null,
+                color: project.color ?? null
+              });
+            },
+            onCreateProject
+          }
+        ) }) }) : null
+      ] }),
+      /* @__PURE__ */ jsx("tfoot", { children: /* @__PURE__ */ jsxs("tr", { className: "border-t bg-muted/50 font-semibold", children: [
+        /* @__PURE__ */ jsx("th", { scope: "row", className: "sticky left-0 z-10 bg-muted px-3 py-2 text-left", children: t("staff.timesheets.my.daily_total", "Daily Total") }),
+        days.map((date) => {
+          const weekend = isWeekendIso(date);
+          const minutes = dayTotal(date);
+          return /* @__PURE__ */ jsx(
+            "td",
+            {
+              className: cn(
+                "py-2 text-center text-xs tabular-nums",
+                weekend ? "text-muted-foreground/50" : null
+              ),
+              children: weekend && minutes === 0 ? "-" : formatTrimmedDecimalDuration(minutes) || "-"
+            },
+            date
+          );
+        }),
+        /* @__PURE__ */ jsx("td", { className: "px-3 py-2 text-right tabular-nums font-semibold", children: formatTrimmedDecimalDuration(grandTotal) || "0" })
+      ] }) })
+    ] }) }),
+    ConfirmDialogElement
+  ] });
+}
+const gridViewPropsSchema = z.object({
+  days: z.array(z.string()),
+  projects: z.array(opaqueProp()),
+  allAssignedProjects: z.array(opaqueProp()),
+  tasks: z.array(opaqueProp()),
+  entries: z.array(opaqueProp()),
+  staffMemberId: z.string().nullable(),
+  canManage: z.boolean(),
+  canManageProjects: z.boolean(),
+  readOnly: z.boolean(),
+  isLoading: z.boolean().optional(),
+  rowMode: z.union([z.literal("projects"), z.literal("tasks")]),
+  onRowModeChange: callbackProp(),
+  onAddProject: callbackProp(),
+  onRemoveProject: callbackProp(),
+  onCreateProject: callbackProp(),
+  onSaved: callbackProp()
+});
+registerComponent({
+  id: extensionPoints.hosts.timesheetGridComponent.componentId,
+  component: DefaultGridView,
+  metadata: {
+    module: "staff",
+    description: "Timesheet grid view \u2014 projects/tasks by day, editable cells.",
+    propsSchema: gridViewPropsSchema
+  }
+});
+function GridView(props) {
+  const Resolved = useRegisteredComponent(
+    extensionPoints.hosts.timesheetGridComponent.componentId,
+    DefaultGridView
+  );
+  return /* @__PURE__ */ jsx(Resolved, { ...props });
+}
+export {
+  GridView,
+  buildGridCells,
+  buildGridRows
+};
+//# sourceMappingURL=GridView.js.map