@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/projects/[id]/page.js

@@ -0,0 +1,1014 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Page, PageBody } from "@open-mercato/ui/backend/Page";
+import { Button } from "@open-mercato/ui/primitives/button";
+import { Badge } from "@open-mercato/ui/primitives/badge";
+import { Spinner } from "@open-mercato/ui/primitives/spinner";
+import { Input } from "@open-mercato/ui/primitives/input";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@open-mercato/ui/primitives/dialog";
+import { LookupSelect } from "@open-mercato/ui/backend/inputs/LookupSelect";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@open-mercato/ui/primitives/tabs";
+import { apiCall, readApiResultOrThrow } from "@open-mercato/ui/backend/utils/apiCall";
+import { deleteCrud, createCrud } from "@open-mercato/ui/backend/utils/crud";
+import { useConfirmDialog } from "@open-mercato/ui/backend/confirm-dialog";
+import { surfaceRecordConflict } from "@open-mercato/ui/backend/conflicts";
+import { useGuardedMutation } from "@open-mercato/ui/backend/injection/useGuardedMutation";
+import { InjectionSpot, useInjectionWidgets } 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 { useT } from "@open-mercato/shared/lib/i18n/context";
+import { useOrganizationScopeVersion } from "@open-mercato/shared/lib/frontend/useOrganizationScope";
+import { LoadingMessage } from "@open-mercato/ui/backend/detail";
+import { ErrorMessage, RecordNotFoundState } from "@open-mercato/ui/backend/detail";
+import { ArrowLeft, Plus, Pencil, ChevronDown, Trash2, User, Users } from "lucide-react";
+import Link from "next/link";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { createLogger } from "@open-mercato/shared/lib/logger";
+import { formatCurrency } from "@open-mercato/ui/utils/format";
+import { KpiCard, Sparkline } from "@open-mercato/ui/backend/charts";
+import { ProjectTeamDrawer } from "../../../../../lib/time-tracking-ui/ProjectTeamDrawer.js";
+import { NoProjectAccess } from "../../../../../lib/time-tracking-ui/NoProjectAccess.js";
+import { ProjectBudgetCell } from "../../../../../lib/timesheets-projects-ui/ProjectBudgetCell.js";
+import { computeBudgetBurn } from "../../../../../lib/timesheets-projects/budgetBurn.js";
+import { resolveProjectColorHex } from "../../../../../lib/timesheets-ui/colors.js";
+const logger = createLogger("staff");
+const BACK_HREF = "/backend/staff/time-tracking/projects";
+const EMPLOYEE_MUTATION_CONTEXT_ID = "staff-time-project-detail:employees";
+const EMPLOYEE_RESOURCE_KIND = "staff.time_project_member";
+const NO_PROJECT_ACCESS_REASON = "no_project_access";
+const PROJECT_ENTITY_ID = "staff:staff_time_project";
+function readDenialReason(payload) {
+  if (!payload || typeof payload !== "object") return null;
+  const reason = payload.reason;
+  return typeof reason === "string" ? reason : null;
+}
+function RailGroup({ label, first }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `border-b pb-1.5 text-overline font-semibold uppercase tracking-widest text-muted-foreground ${first ? "" : "pt-4"}`,
+      children: label
+    }
+  );
+}
+function RailFact({ label, value }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between gap-3 border-b py-2 text-sm last:border-b-0", children: [
+    /* @__PURE__ */ jsx("dt", { className: "shrink-0 text-muted-foreground", children: label }),
+    /* @__PURE__ */ jsx("dd", { className: "text-right font-medium tabular-nums", children: value })
+  ] });
+}
+function TimesheetProjectDetailPage({ params }) {
+  const projectId = params?.id;
+  const t = useT();
+  const scopeVersion = useOrganizationScopeVersion();
+  const { confirm, ConfirmDialogElement } = useConfirmDialog();
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const [project, setProject] = React.useState(null);
+  const [loading, setLoading] = React.useState(true);
+  const [error, setError] = React.useState(null);
+  const [isNotFound, setIsNotFound] = React.useState(false);
+  const [accessDenied, setAccessDenied] = React.useState(false);
+  const [employees, setEmployees] = React.useState([]);
+  const [employeesLoading, setEmployeesLoading] = React.useState(false);
+  const [expandedCards, setExpandedCards] = React.useState(/* @__PURE__ */ new Set());
+  const [reloadToken, setReloadToken] = React.useState(0);
+  const [activeTab, setActiveTab] = React.useState("team");
+  const [recentEntries, setRecentEntries] = React.useState([]);
+  const [recentEntriesLoading, setRecentEntriesLoading] = React.useState(false);
+  const [projectTasks, setProjectTasks] = React.useState([]);
+  const [projectTasksLoading, setProjectTasksLoading] = React.useState(false);
+  const [canManageProjects, setCanManageProjects] = React.useState(false);
+  const [canSeeMoney, setCanSeeMoney] = React.useState(false);
+  React.useEffect(() => {
+    let cancelled = false;
+    void (async () => {
+      try {
+        const res = await apiCall("/api/auth/feature-check", {
+          method: "POST",
+          headers: { "content-type": "application/json" },
+          body: JSON.stringify({
+            features: ["staff.timesheets.projects.manage", "staff.timesheets.rates.view"]
+          })
+        });
+        if (!cancelled) {
+          const granted = new Set(res.result?.granted ?? []);
+          setCanManageProjects(granted.has("staff.timesheets.projects.manage"));
+          setCanSeeMoney(granted.has("staff.timesheets.rates.view"));
+        }
+      } catch {
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+  const [addDialogOpen, setAddDialogOpen] = React.useState(false);
+  const [addStaffMemberId, setAddStaffMemberId] = React.useState(null);
+  const [addRole, setAddRole] = React.useState("");
+  const [addStartDate, setAddStartDate] = React.useState("");
+  const [addSaving, setAddSaving] = React.useState(false);
+  const [staffLookupError, setStaffLookupError] = React.useState(null);
+  React.useEffect(() => {
+    if (!projectId || activeTab !== "time") return;
+    let cancelled = false;
+    void (async () => {
+      setRecentEntriesLoading(true);
+      try {
+        const res = await apiCall(
+          `/api/staff/timesheets/time-entries?projectId=${encodeURIComponent(projectId)}&page=1&pageSize=25&sortField=date&sortDir=desc`
+        );
+        if (cancelled || !res.ok) return;
+        const items = Array.isArray(res.result?.items) ? res.result.items : [];
+        setRecentEntries(
+          items.map((row) => {
+            const id = typeof row.id === "string" ? row.id : null;
+            if (!id) return null;
+            const raw = row;
+            const minutes = raw.duration_minutes ?? raw.durationMinutes;
+            return {
+              id,
+              date: typeof raw.date === "string" ? raw.date.slice(0, 10) : "",
+              description: typeof raw.description === "string" ? raw.description : typeof raw.notes === "string" ? raw.notes : null,
+              durationMinutes: typeof minutes === "number" ? minutes : Number(minutes ?? 0) || 0,
+              isBillable: raw.is_billable === true || raw.isBillable === true,
+              taskId: typeof (raw.task_id ?? raw.taskId) === "string" ? String(raw.task_id ?? raw.taskId) : null,
+              staffMemberId: typeof (raw.staff_member_id ?? raw.staffMemberId) === "string" ? String(raw.staff_member_id ?? raw.staffMemberId) : null
+            };
+          }).filter((row) => row !== null)
+        );
+      } catch (err) {
+        logger.warn("staff.timesheets.projects.detail recent entries failed", { err });
+      } finally {
+        if (!cancelled) setRecentEntriesLoading(false);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [projectId, activeTab, reloadToken]);
+  React.useEffect(() => {
+    if (!projectId || activeTab !== "tasks") return;
+    let cancelled = false;
+    void (async () => {
+      setProjectTasksLoading(true);
+      try {
+        const res = await apiCall(
+          // `timeProjectId`, not `projectId`: the tasks list schema declares the
+          // former and is `.passthrough()`, so the wrong name is accepted, never
+          // read, and the tab silently lists every task in the tenant.
+          `/api/staff/timesheets/tasks?timeProjectId=${encodeURIComponent(projectId)}&page=1&pageSize=50&sortField=reference&sortDir=asc`
+        );
+        if (cancelled || !res.ok) return;
+        const items = Array.isArray(res.result?.items) ? res.result.items : [];
+        setProjectTasks(
+          items.map((row) => {
+            const id = typeof row.id === "string" ? row.id : null;
+            const title = typeof row.title === "string" ? row.title : null;
+            if (!id || !title) return null;
+            const raw = row;
+            const logged = raw.loggedMinutes ?? raw.logged_minutes;
+            return {
+              id,
+              reference: typeof raw.reference === "string" ? raw.reference : null,
+              title,
+              statusId: typeof (raw.task_status_id ?? raw.taskStatusId) === "string" ? String(raw.task_status_id ?? raw.taskStatusId) : null,
+              assigneeStaffMemberId: typeof (raw.assignee_staff_member_id ?? raw.assigneeStaffMemberId) === "string" ? String(raw.assignee_staff_member_id ?? raw.assigneeStaffMemberId) : null,
+              loggedMinutes: typeof logged === "number" ? logged : null
+            };
+          }).filter((row) => row !== null)
+        );
+      } catch (err) {
+        logger.warn("staff.timesheets.projects.detail tasks failed", { err });
+      } finally {
+        if (!cancelled) setProjectTasksLoading(false);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [projectId, activeTab, reloadToken]);
+  const employeeNameById = React.useMemo(
+    () => new Map(employees.map((emp) => [emp.staffMemberId, emp.displayName ?? ""])),
+    [employees]
+  );
+  const activeCount = employees.filter((emp) => emp.status === "active").length;
+  const inactiveCount = employees.length - activeCount;
+  React.useEffect(() => {
+    if (!projectId) return;
+    let cancelled = false;
+    async function loadProject() {
+      setLoading(true);
+      setError(null);
+      setIsNotFound(false);
+      setAccessDenied(false);
+      try {
+        const queryParams = new URLSearchParams({ page: "1", pageSize: "1", ids: projectId });
+        const call = await apiCall(
+          `/api/staff/timesheets/time-projects?${queryParams.toString()}`
+        );
+        if (call.status === 404 && readDenialReason(call.result) === NO_PROJECT_ACCESS_REASON) {
+          if (!cancelled) setAccessDenied(true);
+          return;
+        }
+        if (!call.ok) {
+          throw new Error(t("staff.timesheets.projects.errors.load", "Failed to load project."));
+        }
+        const payload = call.result;
+        const record = Array.isArray(payload?.items) ? payload.items[0] : null;
+        if (!record) {
+          if (!cancelled) setIsNotFound(true);
+          return;
+        }
+        if (!cancelled) setProject(record);
+      } catch (loadError) {
+        if (!cancelled) {
+          setError(loadError instanceof Error ? loadError.message : t("staff.timesheets.projects.errors.load", "Failed to load project."));
+        }
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    }
+    loadProject();
+    return () => {
+      cancelled = true;
+    };
+  }, [projectId, t, scopeVersion]);
+  const loadEmployees = React.useCallback(async () => {
+    if (!projectId || accessDenied) return;
+    setEmployeesLoading(true);
+    try {
+      const payload = await readApiResultOrThrow(
+        `/api/staff/timesheets/time-projects/${projectId}/employees?page=1&pageSize=100`,
+        void 0,
+        { errorMessage: t("staff.timesheets.projects.employees.empty", "No employees assigned yet."), fallback: { items: [], total: 0 } }
+      );
+      const items = Array.isArray(payload.items) ? payload.items : [];
+      const staffMemberIds = items.map((item) => String(item.staff_member_id ?? item.staffMemberId ?? "")).filter((id) => id.length > 0);
+      let staffMap = /* @__PURE__ */ new Map();
+      if (staffMemberIds.length > 0) {
+        try {
+          const staffRes = await apiCall(
+            `/api/staff/team-members?ids=${staffMemberIds.join(",")}&pageSize=100`
+          );
+          if (staffRes.ok) {
+            const staffItems = Array.isArray(staffRes.result?.items) ? staffRes.result.items : [];
+            staffMap = new Map(staffItems.map((member) => [member.id, member]));
+          }
+        } catch {
+        }
+      }
+      const mapped = items.map((item) => {
+        const staffMemberId = String(item.staff_member_id ?? item.staffMemberId ?? "");
+        const staff = staffMap.get(staffMemberId);
+        return {
+          id: String(item.id ?? ""),
+          staffMemberId,
+          role: typeof item.role === "string" ? item.role : null,
+          status: typeof item.status === "string" ? item.status : null,
+          assignedStartDate: String(item.assigned_start_date ?? item.assignedStartDate ?? ""),
+          assignedEndDate: typeof (item.assigned_end_date ?? item.assignedEndDate) === "string" ? String(item.assigned_end_date ?? item.assignedEndDate) : null,
+          displayName: staff?.display_name ?? staff?.displayName ?? null,
+          teamName: staff?.team?.name ?? null
+        };
+      });
+      setEmployees(mapped);
+    } catch (loadError) {
+      logger.error("staff.timesheets.projects.employees.list", { err: loadError });
+    } finally {
+      setEmployeesLoading(false);
+    }
+  }, [projectId, accessDenied, t]);
+  React.useEffect(() => {
+    void loadEmployees();
+  }, [loadEmployees, reloadToken, scopeVersion]);
+  const toggleCard = React.useCallback((employeeId) => {
+    setExpandedCards((prev) => {
+      const next = new Set(prev);
+      if (next.has(employeeId)) next.delete(employeeId);
+      else next.add(employeeId);
+      return next;
+    });
+  }, []);
+  const { runMutation, retryLastMutation } = useGuardedMutation({
+    contextId: EMPLOYEE_MUTATION_CONTEXT_ID,
+    blockedMessage: t("ui.forms.flash.saveBlocked", "Save blocked by validation")
+  });
+  const projectInjectionContext = React.useMemo(
+    () => ({
+      entityId: PROJECT_ENTITY_ID,
+      recordId: projectId ?? null,
+      projectId: projectId ?? null,
+      path: pathname ?? null,
+      retryLastMutation
+    }),
+    [pathname, projectId, retryLastMutation]
+  );
+  const { widgets: injectedTabWidgets } = useInjectionWidgets(
+    extensionPoints.hosts.projectDetailTabs.spotId,
+    { context: projectInjectionContext, triggerOnLoad: true }
+  );
+  const employeeMutationContext = React.useCallback(
+    (resourceId) => ({
+      formId: EMPLOYEE_MUTATION_CONTEXT_ID,
+      resourceKind: EMPLOYEE_RESOURCE_KIND,
+      resourceId,
+      retryLastMutation
+    }),
+    [retryLastMutation]
+  );
+  const handleRemoveEmployee = React.useCallback(async (emp) => {
+    const confirmed = await confirm({
+      title: t("staff.timesheets.projects.employees.remove", "Remove"),
+      text: t("staff.timesheets.projects.employees.removeConfirm", "Remove this employee from the project?"),
+      variant: "destructive"
+    });
+    if (!confirmed) return;
+    try {
+      await runMutation({
+        operation: () => deleteCrud(
+          `staff/timesheets/time-projects/${projectId}/employees`,
+          emp.id,
+          { errorMessage: t("staff.timesheets.projects.employees.removeError", "Failed to remove employee.") }
+        ),
+        context: employeeMutationContext(emp.id),
+        mutationPayload: { id: emp.id }
+      });
+      flash(t("staff.timesheets.projects.employees.removed", "Employee removed."), "success");
+      setReloadToken((token) => token + 1);
+    } catch (removeError) {
+      if (surfaceRecordConflict(removeError, t)) return;
+      flash(t("staff.timesheets.projects.employees.removeError", "Failed to remove employee."), "error");
+    }
+  }, [projectId, confirm, employeeMutationContext, runMutation, t]);
+  const openAddDialog = React.useCallback(() => {
+    setAddStaffMemberId(null);
+    setAddRole("");
+    setAddStartDate((/* @__PURE__ */ new Date()).toISOString().slice(0, 10));
+    setStaffLookupError(null);
+    setAddDialogOpen(true);
+  }, []);
+  const staffLookupErrorMessage = t(
+    "staff.timesheets.projects.employees.loadError",
+    "Could not load team members. Check your connection and try again."
+  );
+  const fetchStaffMembers = React.useCallback(async (query) => {
+    const params2 = new URLSearchParams({ search: query, pageSize: "20", isActive: "true" });
+    try {
+      const payload = await readApiResultOrThrow(
+        `/api/staff/team-members?${params2.toString()}`,
+        void 0,
+        { errorMessage: staffLookupErrorMessage, fallback: { items: [] } }
+      );
+      const items = Array.isArray(payload.items) ? payload.items : [];
+      setStaffLookupError(null);
+      return items.map((member) => ({
+        id: member.id,
+        title: member.display_name ?? member.displayName ?? member.id,
+        subtitle: member.team?.name ?? null
+      }));
+    } catch (lookupError) {
+      logger.error("staff.timesheets.projects.employees.lookup", { err: lookupError });
+      setStaffLookupError(staffLookupErrorMessage);
+      throw lookupError;
+    }
+  }, [staffLookupErrorMessage]);
+  const handleAddEmployee = React.useCallback(async () => {
+    if (!projectId || !addStaffMemberId || !addStartDate) return;
+    const payload = {
+      staffMemberId: addStaffMemberId,
+      timeProjectId: projectId,
+      role: addRole.trim() || null,
+      assignedStartDate: addStartDate
+    };
+    setAddSaving(true);
+    try {
+      await runMutation({
+        operation: () => createCrud(`staff/timesheets/time-projects/${projectId}/employees`, payload, {
+          errorMessage: t("staff.timesheets.projects.employees.addError", "Failed to add employee.")
+        }),
+        context: employeeMutationContext(addStaffMemberId),
+        mutationPayload: payload
+      });
+      flash(t("staff.timesheets.projects.employees.added", "Employee added."), "success");
+      setAddDialogOpen(false);
+      setReloadToken((token) => token + 1);
+    } catch (addError) {
+      if (surfaceRecordConflict(addError, t)) return;
+      flash(addError instanceof Error ? addError.message : t("staff.timesheets.projects.employees.addError", "Failed to add employee."), "error");
+    } finally {
+      setAddSaving(false);
+    }
+  }, [projectId, addStaffMemberId, addRole, addStartDate, employeeMutationContext, runMutation, t]);
+  const teamPanelRequested = searchParams?.get("panel") === "team";
+  const teamDrawerOpen = teamPanelRequested && canManageProjects;
+  const requesterUserId = searchParams?.get("requesterUserId") ?? null;
+  const openTeamDrawer = React.useCallback(() => {
+    router.replace(`${pathname}?panel=team`);
+  }, [pathname, router]);
+  const handleTeamDrawerOpenChange = React.useCallback((next) => {
+    if (next) openTeamDrawer();
+    else router.replace(pathname ?? BACK_HREF);
+  }, [openTeamDrawer, pathname, router]);
+  const handleTeamSaved = React.useCallback(() => {
+    setReloadToken((token) => token + 1);
+  }, []);
+  const handleAddDialogKeyDown = React.useCallback((event) => {
+    if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
+      event.preventDefault();
+      void handleAddEmployee();
+    }
+  }, [handleAddEmployee]);
+  if (loading) {
+    return /* @__PURE__ */ jsx(Page, { children: /* @__PURE__ */ jsx(PageBody, { children: /* @__PURE__ */ jsx(LoadingMessage, { label: t("staff.timesheets.projects.loading", "Loading project...") }) }) });
+  }
+  if (accessDenied) {
+    return /* @__PURE__ */ jsx(NoProjectAccess, { timeProjectId: projectId });
+  }
+  if (isNotFound) {
+    return /* @__PURE__ */ jsx(Page, { children: /* @__PURE__ */ jsx(PageBody, { children: /* @__PURE__ */ jsx(
+      RecordNotFoundState,
+      {
+        label: t("staff.timesheets.projects.errors.notFound", "Project not found."),
+        backHref: BACK_HREF,
+        backLabel: t("staff.timesheets.projects.actions.backToList", "Back to projects")
+      }
+    ) }) });
+  }
+  if (error || !project) {
+    return /* @__PURE__ */ jsx(Page, { children: /* @__PURE__ */ jsx(PageBody, { children: /* @__PURE__ */ jsx(ErrorMessage, { label: error ?? t("staff.timesheets.projects.errors.load", "Failed to load project.") }) }) });
+  }
+  const projectStatus = project.status ?? "active";
+  const projectType = project.projectType ?? project.project_type ?? null;
+  const projectStartDate = project.startDate ?? project.start_date ?? null;
+  const projectCode = project.code;
+  const readString = (...keys) => {
+    for (const key of keys) {
+      const raw = project[key];
+      if (typeof raw === "string" && raw.trim().length > 0) return raw.trim();
+      if (typeof raw === "number" && Number.isFinite(raw)) return String(raw);
+    }
+    return null;
+  };
+  const readNumber = (...keys) => {
+    for (const key of keys) {
+      const raw = project[key];
+      const parsed = typeof raw === "number" ? raw : typeof raw === "string" ? Number(raw) : NaN;
+      if (Number.isFinite(parsed)) return parsed;
+    }
+    return null;
+  };
+  const readBool = (...keys) => {
+    for (const key of keys) {
+      const raw = project[key];
+      if (typeof raw === "boolean") return raw;
+    }
+    return null;
+  };
+  const enrichment = project._staff ?? {};
+  const readEnriched = (key) => {
+    const raw = enrichment[key];
+    return typeof raw === "number" && Number.isFinite(raw) ? raw : null;
+  };
+  const customerSnapshot = project.customerSnapshot ?? project.customer_snapshot;
+  const customerName = (typeof customerSnapshot?.name === "string" ? customerSnapshot.name : null) ?? (typeof enrichment.customerName === "string" ? enrichment.customerName : null);
+  const customerId = readString("customerId", "customer_id");
+  const projectColor = readString("color");
+  const costCenter = readString("costCenter", "cost_center");
+  const currencyCode = readString("currencyCode", "currency_code");
+  const hourlyRate = readNumber("hourlyRate", "hourly_rate");
+  const billableByDefault = readBool("billableByDefault", "billable_by_default");
+  const createdAt = readString("createdAt", "created_at");
+  const updatedAt = readString("updatedAt", "updated_at");
+  const entryCount = readNumber("entryCount");
+  const currencyLocked = readBool("currencyLocked") ?? false;
+  const lockedEntryCount = readNumber("lockedEntryCount");
+  const totalMinutes = readEnriched("totalMinutes") ?? 0;
+  const billableMinutes = readEnriched("billableMinutes");
+  const cost = readEnriched("cost");
+  const nonBillableMinutes = billableMinutes === null ? null : Math.max(0, totalMinutes - billableMinutes);
+  const billablePercent = billableMinutes === null || totalMinutes <= 0 ? null : Math.round(billableMinutes / totalMinutes * 100);
+  const hoursTrend = Array.isArray(enrichment.hoursTrend) ? enrichment.hoursTrend.filter((value) => typeof value === "number") : [];
+  const budgetKind = readString("budgetKind", "budget_kind");
+  const budgetValue = readNumber("budgetValue", "budget_value");
+  const budgetWarnAt = readNumber("budgetWarnAtPercent", "budget_warn_at_percent");
+  const budgetBurn = computeBudgetBurn({
+    kind: budgetKind,
+    budgetValue,
+    warnAtPercent: budgetWarnAt,
+    totalMinutes,
+    cost
+  });
+  const formatHours = (minutes) => {
+    if (minutes === null) return "\u2014";
+    const sign = minutes < 0 ? "-" : "";
+    const abs = Math.abs(minutes);
+    return `${sign}${Math.floor(abs / 60)}:${String(abs % 60).padStart(2, "0")}`;
+  };
+  const formatDateTime = (value) => {
+    if (!value) return "\u2014";
+    const normalized = value.replace(" ", "T").replace(/(T\d{2}:\d{2}(?::\d{2}(?:\.\d+)?)?)([+-]\d{2})$/, "$1$2:00");
+    const parsed = new Date(normalized);
+    return Number.isNaN(parsed.getTime()) ? value : parsed.toLocaleDateString();
+  };
+  const budgetUsageLabel = budgetBurn ? budgetBurn.kind === "hours" ? t("staff.timesheets.projects.detail.budgetHours", "{percent}% of {value} h", {
+    percent: budgetBurn.percent,
+    value: budgetBurn.budgetValue
+  }) : t("staff.timesheets.projects.detail.budgetAmount", "{percent}% of {value}", {
+    percent: budgetBurn.percent,
+    value: formatCurrency(budgetBurn.budgetValue, currencyCode ?? void 0) ?? String(budgetBurn.budgetValue)
+  }) : null;
+  const injectedTabs = injectedTabWidgets.filter((widget) => (widget.placement?.kind ?? "tab") === "tab").map((widget) => {
+    const tabId = widget.placement?.groupId ?? widget.widgetId;
+    const groupLabel = widget.placement?.groupLabel;
+    const label = groupLabel ? t(groupLabel, groupLabel) : widget.module.metadata.title ?? tabId;
+    const priority = typeof widget.placement?.priority === "number" ? widget.placement.priority : 0;
+    return { tabId, label, priority, Widget: widget.module.Widget };
+  }).sort((left, right) => right.priority - left.priority);
+  return /* @__PURE__ */ jsx(Page, { children: /* @__PURE__ */ jsxs(PageBody, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-start justify-between gap-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-start gap-3", children: [
+          /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", asChild: true, children: /* @__PURE__ */ jsx(Link, { href: BACK_HREF, children: /* @__PURE__ */ jsx(ArrowLeft, { className: "h-4 w-4", "aria-hidden": true }) }) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-1.5", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "size-3 shrink-0 rounded-sm border border-border",
+                  style: { backgroundColor: resolveProjectColorHex(projectColor, project.name) },
+                  "aria-hidden": true
+                }
+              ),
+              /* @__PURE__ */ jsx("h1", { className: "text-xl font-semibold", children: project.name }),
+              /* @__PURE__ */ jsx(
+                Badge,
+                {
+                  variant: projectStatus === "active" ? "success" : projectStatus === "on_hold" ? "warning" : "neutral",
+                  className: "capitalize",
+                  children: projectStatus
+                }
+              ),
+              canSeeMoney && budgetBurn && budgetBurn.tone !== "accent" ? /* @__PURE__ */ jsx(Badge, { variant: budgetBurn.tone === "destructive" ? "destructive" : "warning", children: t("staff.timesheets.projects.detail.budgetBadge", "Budget {percent}%", {
+                percent: budgetBurn.percent
+              }) }) : null,
+              /* @__PURE__ */ jsx(
+                InjectionSpot,
+                {
+                  spotId: extensionPoints.hosts.projectDetailStatusBadges.spotId,
+                  context: projectInjectionContext,
+                  data: project
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2 text-sm text-muted-foreground", children: [
+              /* @__PURE__ */ jsx("span", { className: "rounded-sm border border-border bg-muted px-1.5 py-0.5 font-mono text-xs text-foreground", children: projectCode }),
+              customerName ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: "\xB7" }),
+                customerId ? /* @__PURE__ */ jsx(Link, { className: "underline underline-offset-2", href: `/backend/customers/companies/${customerId}`, children: customerName }) : /* @__PURE__ */ jsx("span", { children: customerName })
+              ] }) : null,
+              projectType ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: "\xB7" }),
+                /* @__PURE__ */ jsx("span", { children: projectType })
+              ] }) : null,
+              projectStartDate ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: "\xB7" }),
+                /* @__PURE__ */ jsx("span", { children: t("staff.timesheets.projects.detail.startedOn", "Started {date}", {
+                  date: formatDateTime(projectStartDate)
+                }) })
+              ] }) : null
+            ] })
+          ] })
+        ] }),
+        canManageProjects && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", onClick: openTeamDrawer, children: [
+            /* @__PURE__ */ jsx(Users, { className: "mr-2 h-4 w-4", "aria-hidden": true }),
+            t("staff.time_tracking.projects.team.manage", "Manage team")
+          ] }),
+          /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", asChild: true, children: /* @__PURE__ */ jsxs(Link, { href: `/backend/staff/time-tracking/projects/${projectId}/edit`, children: [
+            /* @__PURE__ */ jsx(Pencil, { className: "mr-2 h-4 w-4", "aria-hidden": true }),
+            t("staff.timesheets.projects.form.actions.edit", "Edit Project")
+          ] }) })
+        ] }),
+        /* @__PURE__ */ jsx(
+          InjectionSpot,
+          {
+            spotId: extensionPoints.hosts.projectDetailHeader.spotId,
+            context: projectInjectionContext,
+            data: project
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "grid gap-3 sm:grid-cols-2 xl:grid-cols-4", children: [
+        /* @__PURE__ */ jsx(
+          KpiCard,
+          {
+            title: t("staff.timesheets.projects.detail.loggedHours", "Logged hours"),
+            value: totalMinutes / 60,
+            formatValue: () => formatHours(totalMinutes),
+            footer: hoursTrend.length > 0 ? /* @__PURE__ */ jsx(
+              Sparkline,
+              {
+                values: hoursTrend,
+                ariaLabel: t("staff.timesheets.projects.detail.trendAria", "Hours per week, last 7 weeks")
+              }
+            ) : void 0,
+            headerAction: entryCount !== null ? /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: entryCount === 1 ? t("staff.timesheets.projects.detail.entryCountOne", "1 entry") : t("staff.timesheets.projects.detail.entryCountShort", "{count} entries", { count: entryCount }) }) : void 0
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          KpiCard,
+          {
+            title: t("staff.timesheets.projects.detail.billableHours", "Billable hours"),
+            value: (billableMinutes ?? 0) / 60,
+            formatValue: () => formatHours(billableMinutes),
+            headerAction: billablePercent !== null ? /* @__PURE__ */ jsx(Badge, { variant: billablePercent >= 80 ? "success" : "neutral", children: `${billablePercent}%` }) : void 0,
+            footer: nonBillableMinutes !== null ? /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: t("staff.timesheets.projects.detail.nonBillable", "{hours} non-billable", {
+              hours: formatHours(nonBillableMinutes)
+            }) }) : void 0
+          }
+        ),
+        canSeeMoney ? /* @__PURE__ */ jsx(
+          KpiCard,
+          {
+            title: t("staff.timesheets.projects.detail.cost", "Cost to date"),
+            value: cost,
+            formatValue: (value) => formatCurrency(value, currencyCode ?? void 0) ?? String(value),
+            footer: hourlyRate !== null ? /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: t("staff.timesheets.projects.detail.costBasis", "{hours} \xD7 {rate}", {
+              hours: formatHours(billableMinutes),
+              rate: `${formatCurrency(hourlyRate, currencyCode ?? void 0) ?? hourlyRate}/h`
+            }) }) : void 0
+          }
+        ) : null,
+        canSeeMoney ? /* @__PURE__ */ jsxs("div", { className: "rounded-lg border bg-card p-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-muted-foreground", children: t("staff.timesheets.projects.form.budget", "Budget") }),
+            budgetBurn ? /* @__PURE__ */ jsx(
+              Badge,
+              {
+                variant: budgetBurn.tone === "destructive" ? "destructive" : budgetBurn.tone === "warning" ? "warning" : "neutral",
+                children: `${budgetBurn.percent}%`
+              }
+            ) : /* @__PURE__ */ jsx(Badge, { variant: "neutral", children: t("staff.timesheets.projects.detail.noBudget", "No budget") })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "mt-2 space-y-2", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-2xl font-semibold tabular-nums", children: budgetBurn ? `${budgetBurn.percent}%` : "\u2014" }),
+            /* @__PURE__ */ jsx(
+              ProjectBudgetCell,
+              {
+                burn: budgetBurn,
+                usageLabel: budgetUsageLabel,
+                noBudgetLabel: t("staff.timesheets.projects.detail.budgetHint", "Set one to track burn"),
+                ariaLabel: t("staff.timesheets.projects.detail.budgetUsage", "Budget usage")
+              }
+            )
+          ] })
+        ] }) : null
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "grid items-start gap-4 lg:grid-cols-[minmax(0,2fr)_minmax(280px,1fr)]", children: [
+        /* @__PURE__ */ jsxs(
+          Tabs,
+          {
+            value: activeTab,
+            onValueChange: setActiveTab,
+            variant: "underline",
+            className: "min-w-0",
+            children: [
+              /* @__PURE__ */ jsxs(TabsList, { "aria-label": t("staff.timesheets.projects.detail.tabs", "Project sections"), children: [
+                /* @__PURE__ */ jsx(TabsTrigger, { value: "team", count: activeCount, children: t("staff.timesheets.projects.detail.tabTeam", "Team") }),
+                /* @__PURE__ */ jsx(TabsTrigger, { value: "time", count: entryCount ?? void 0, children: t("staff.timesheets.projects.detail.tabTime", "Time") }),
+                /* @__PURE__ */ jsx(TabsTrigger, { value: "tasks", children: t("staff.timesheets.projects.detail.tabTasks", "Tasks") }),
+                injectedTabs.map((tab) => /* @__PURE__ */ jsx(TabsTrigger, { value: tab.tabId, children: tab.label }, tab.tabId))
+              ] }),
+              /* @__PURE__ */ jsx(TabsContent, { value: "team", children: /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+                  /* @__PURE__ */ jsx("h2", { className: "sr-only", children: t("staff.timesheets.projects.employees.title", "Assigned Employees") }),
+                  /* @__PURE__ */ jsx("span", {}),
+                  canManageProjects && /* @__PURE__ */ jsxs(Button, { size: "sm", onClick: openAddDialog, children: [
+                    /* @__PURE__ */ jsx(Plus, { className: "mr-2 h-4 w-4", "aria-hidden": true }),
+                    t("staff.timesheets.projects.add_employee", "Add Employee")
+                  ] })
+                ] }),
+                employeesLoading ? /* @__PURE__ */ jsx(LoadingMessage, { label: t("staff.timesheets.projects.employees.loading", "Loading employees...") }) : employees.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-dashed p-8 text-center", children: [
+                  /* @__PURE__ */ jsx(User, { className: "mx-auto h-8 w-8 text-muted-foreground/50", "aria-hidden": true }),
+                  /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: t("staff.timesheets.projects.employees.empty", "No employees assigned yet.") })
+                ] }) : /* @__PURE__ */ jsx("div", { className: "space-y-2", children: employees.map((emp) => {
+                  const isExpanded = expandedCards.has(emp.id);
+                  const isInactive = emp.status !== "active";
+                  return /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      className: `rounded-lg border ${isInactive ? "opacity-60" : ""}`,
+                      children: [
+                        /* @__PURE__ */ jsxs(
+                          "button",
+                          {
+                            type: "button",
+                            className: "flex w-full items-center justify-between p-4 text-left hover:bg-muted/50 transition-colors",
+                            onClick: () => toggleCard(emp.id),
+                            children: [
+                              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 min-w-0", children: [
+                                /* @__PURE__ */ jsx("div", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-muted", children: /* @__PURE__ */ jsx(User, { className: "h-4 w-4 text-muted-foreground", "aria-hidden": true }) }),
+                                /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                                  /* @__PURE__ */ jsx("p", { className: "text-sm font-medium truncate", children: emp.displayName ?? emp.staffMemberId }),
+                                  emp.role ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground truncate", children: emp.role }) : null
+                                ] })
+                              ] }),
+                              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 shrink-0", children: [
+                                /* @__PURE__ */ jsx(
+                                  Badge,
+                                  {
+                                    variant: (emp.status ?? "active") === "active" ? "success" : "neutral",
+                                    className: "capitalize",
+                                    children: emp.status ?? "active"
+                                  }
+                                ),
+                                emp.assignedStartDate ? /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground hidden sm:inline", children: emp.assignedStartDate }) : null,
+                                /* @__PURE__ */ jsx(ChevronDown, { className: `h-4 w-4 text-muted-foreground transition-transform ${isExpanded ? "rotate-180" : ""}`, "aria-hidden": true })
+                              ] })
+                            ]
+                          }
+                        ),
+                        isExpanded ? /* @__PURE__ */ jsxs("div", { className: "border-t px-4 pb-4 pt-3 space-y-3", children: [
+                          /* @__PURE__ */ jsxs("dl", { className: "grid grid-cols-2 gap-3 text-sm", children: [
+                            /* @__PURE__ */ jsxs("div", { children: [
+                              /* @__PURE__ */ jsx("dt", { className: "font-medium text-muted-foreground", children: t("staff.timesheets.projects.employees.role", "Role") }),
+                              /* @__PURE__ */ jsx("dd", { children: emp.role || "-" })
+                            ] }),
+                            /* @__PURE__ */ jsxs("div", { children: [
+                              /* @__PURE__ */ jsx("dt", { className: "font-medium text-muted-foreground", children: t("staff.timesheets.projects.employees.status", "Status") }),
+                              /* @__PURE__ */ jsx("dd", { className: "capitalize", children: emp.status ?? "active" })
+                            ] }),
+                            /* @__PURE__ */ jsxs("div", { children: [
+                              /* @__PURE__ */ jsx("dt", { className: "font-medium text-muted-foreground", children: t("staff.timesheets.projects.employees.startDate", "Assignment start") }),
+                              /* @__PURE__ */ jsx("dd", { children: emp.assignedStartDate || "-" })
+                            ] }),
+                            /* @__PURE__ */ jsxs("div", { children: [
+                              /* @__PURE__ */ jsx("dt", { className: "font-medium text-muted-foreground", children: t("staff.timesheets.projects.employees.endDate", "Assignment end") }),
+                              /* @__PURE__ */ jsx("dd", { children: emp.assignedEndDate || "-" })
+                            ] }),
+                            emp.teamName ? /* @__PURE__ */ jsxs("div", { children: [
+                              /* @__PURE__ */ jsx("dt", { className: "font-medium text-muted-foreground", children: t("staff.timesheets.projects.employees.department", "Department") }),
+                              /* @__PURE__ */ jsx("dd", { children: emp.teamName })
+                            ] }) : null
+                          ] }),
+                          canManageProjects && /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxs(
+                            Button,
+                            {
+                              variant: "outline",
+                              size: "sm",
+                              className: "text-destructive hover:text-destructive",
+                              onClick: () => {
+                                void handleRemoveEmployee(emp);
+                              },
+                              children: [
+                                /* @__PURE__ */ jsx(Trash2, { className: "mr-2 h-3.5 w-3.5", "aria-hidden": true }),
+                                t("staff.timesheets.projects.employees.remove", "Remove")
+                              ]
+                            }
+                          ) })
+                        ] }) : null
+                      ]
+                    },
+                    emp.id
+                  );
+                }) })
+              ] }) }),
+              /* @__PURE__ */ jsx(TabsContent, { value: "time", children: recentEntriesLoading ? /* @__PURE__ */ jsx(LoadingMessage, { label: t("staff.timesheets.projects.detail.loadingTime", "Loading time entries\u2026") }) : recentEntries.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-dashed p-8 text-center", children: [
+                /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: t("staff.timesheets.projects.detail.noTime", "No time logged yet") }),
+                /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: t("staff.timesheets.projects.detail.noTimeHint", "Hours logged against this project appear here.") })
+              ] }) : /* @__PURE__ */ jsx("div", { className: "overflow-x-auto rounded-lg border", children: /* @__PURE__ */ jsxs("table", { className: "w-full text-sm", children: [
+                /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { className: "border-b bg-muted/40 text-left", children: [
+                  /* @__PURE__ */ jsx("th", { className: "px-3 py-2 font-medium text-muted-foreground", children: t("staff.timesheets.projects.detail.colDate", "Date") }),
+                  /* @__PURE__ */ jsx("th", { className: "px-3 py-2 font-medium text-muted-foreground", children: t("staff.timesheets.projects.detail.colWho", "Person") }),
+                  /* @__PURE__ */ jsx("th", { className: "px-3 py-2 font-medium text-muted-foreground", children: t("staff.timesheets.projects.detail.colDescription", "Description") }),
+                  /* @__PURE__ */ jsx("th", { className: "px-3 py-2 text-right font-medium text-muted-foreground", children: t("staff.timesheets.projects.detail.colHours", "Hours") })
+                ] }) }),
+                /* @__PURE__ */ jsx("tbody", { children: recentEntries.map((entry) => /* @__PURE__ */ jsxs("tr", { className: "border-b last:border-b-0", children: [
+                  /* @__PURE__ */ jsx("td", { className: "whitespace-nowrap px-3 py-2", children: entry.date }),
+                  /* @__PURE__ */ jsx("td", { className: "whitespace-nowrap px-3 py-2", children: employeeNameById.get(entry.staffMemberId ?? "") ?? "\u2014" }),
+                  /* @__PURE__ */ jsx("td", { className: "px-3 py-2", children: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ jsx("span", { className: "truncate", children: entry.description ?? "\u2014" }),
+                    entry.isBillable ? null : /* @__PURE__ */ jsx(Badge, { variant: "neutral", children: t("staff.timesheets.projects.detail.nonBillableTag", "non-billable") })
+                  ] }) }),
+                  /* @__PURE__ */ jsx("td", { className: "whitespace-nowrap px-3 py-2 text-right font-mono tabular-nums", children: formatHours(entry.durationMinutes) })
+                ] }, entry.id)) })
+              ] }) }) }),
+              /* @__PURE__ */ jsx(TabsContent, { value: "tasks", children: projectTasksLoading ? /* @__PURE__ */ jsx(LoadingMessage, { label: t("staff.timesheets.projects.detail.loadingTasks", "Loading tasks\u2026") }) : projectTasks.length === 0 ? /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-dashed p-8 text-center", children: /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: t("staff.timesheets.projects.detail.noTasks", "No tasks yet") }) }) : /* @__PURE__ */ jsx("div", { className: "divide-y rounded-lg border", children: projectTasks.map((task) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 px-3 py-2 text-sm", children: [
+                task.reference ? /* @__PURE__ */ jsx("span", { className: "shrink-0 rounded-sm border border-border bg-muted px-1.5 py-0.5 font-mono text-xs", children: task.reference }) : null,
+                /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: task.title }),
+                /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs text-muted-foreground", children: employeeNameById.get(task.assigneeStaffMemberId ?? "") ?? "" }),
+                task.loggedMinutes !== null ? /* @__PURE__ */ jsx("span", { className: "shrink-0 font-mono text-xs tabular-nums text-muted-foreground", children: formatHours(task.loggedMinutes) }) : null
+              ] }, task.id)) }) }),
+              injectedTabs.map((tab) => /* @__PURE__ */ jsx(TabsContent, { value: tab.tabId, children: /* @__PURE__ */ jsx(tab.Widget, { context: projectInjectionContext, data: project }) }, tab.tabId))
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "rounded-lg border bg-card", children: [
+          /* @__PURE__ */ jsx("div", { className: "border-b px-4 py-3", children: /* @__PURE__ */ jsx("h2", { className: "text-sm font-semibold", children: t("staff.timesheets.projects.detail.details", "Details") }) }),
+          /* @__PURE__ */ jsxs("div", { className: "px-4 py-3", children: [
+            canSeeMoney ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(RailGroup, { label: t("staff.timesheets.projects.detail.commercials", "Billing"), first: true }),
+              /* @__PURE__ */ jsxs("dl", { children: [
+                /* @__PURE__ */ jsx(
+                  RailFact,
+                  {
+                    label: t("staff.timesheets.projects.form.hourlyRate", "Hourly rate"),
+                    value: hourlyRate === null ? "\u2014" : `${formatCurrency(hourlyRate, currencyCode ?? void 0) ?? hourlyRate} / h`
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  RailFact,
+                  {
+                    label: t("staff.timesheets.projects.form.currency", "Currency"),
+                    value: /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5", children: [
+                      currencyCode ?? "\u2014",
+                      currencyLocked ? /* @__PURE__ */ jsx(
+                        Badge,
+                        {
+                          variant: "neutral",
+                          title: t(
+                            "staff.timesheets.projects.detail.currencyLockedHint",
+                            "Locked because hours are already logged against this project."
+                          ),
+                          children: t("staff.timesheets.projects.detail.locked", "locked")
+                        }
+                      ) : null
+                    ] })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  RailFact,
+                  {
+                    label: t("staff.timesheets.projects.form.billableByDefault", "Billable by default"),
+                    value: billableByDefault === null ? "\u2014" : /* @__PURE__ */ jsx(Badge, { variant: billableByDefault ? "success" : "neutral", children: billableByDefault ? t("staff.timesheets.projects.detail.yes", "Yes") : t("staff.timesheets.projects.detail.no", "No") })
+                  }
+                )
+              ] })
+            ] }) : null,
+            /* @__PURE__ */ jsx(
+              RailGroup,
+              {
+                label: t("staff.timesheets.projects.detail.delivery", "Delivery"),
+                first: !canSeeMoney
+              }
+            ),
+            /* @__PURE__ */ jsxs("dl", { children: [
+              /* @__PURE__ */ jsx(
+                RailFact,
+                {
+                  label: t("staff.timesheets.projects.detail.entryCount", "Time entries"),
+                  value: entryCount ?? "\u2014"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                RailFact,
+                {
+                  label: t("staff.timesheets.projects.detail.lockedEntries", "Locked in reports"),
+                  value: lockedEntryCount ?? "\u2014"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx(RailGroup, { label: t("staff.timesheets.projects.detail.administration", "Administration") }),
+            /* @__PURE__ */ jsxs("dl", { children: [
+              /* @__PURE__ */ jsx(
+                RailFact,
+                {
+                  label: t("staff.timesheets.projects.form.costCenter", "Cost center"),
+                  value: costCenter ?? "\u2014"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                RailFact,
+                {
+                  label: t("staff.timesheets.projects.form.color", "Project color"),
+                  value: /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5 capitalize", children: [
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: "size-2.5 rounded-full border border-border",
+                        style: { backgroundColor: resolveProjectColorHex(projectColor, project.name) },
+                        "aria-hidden": true
+                      }
+                    ),
+                    projectColor ?? t("staff.timesheets.projects.detail.autoColor", "Auto")
+                  ] })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                RailFact,
+                {
+                  label: t("staff.timesheets.projects.detail.createdAt", "Created"),
+                  value: formatDateTime(createdAt)
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                RailFact,
+                {
+                  label: t("staff.timesheets.projects.detail.updatedAt", "Last updated"),
+                  value: formatDateTime(updatedAt)
+                }
+              )
+            ] }),
+            project.description ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(RailGroup, { label: t("staff.timesheets.projects.form.description", "Description") }),
+              /* @__PURE__ */ jsx("p", { className: "whitespace-pre-wrap pt-2 text-sm text-muted-foreground", children: project.description })
+            ] }) : null,
+            /* @__PURE__ */ jsx(
+              InjectionSpot,
+              {
+                spotId: extensionPoints.hosts.projectDetailSidebar.spotId,
+                context: projectInjectionContext,
+                data: project
+              }
+            )
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(
+        InjectionSpot,
+        {
+          spotId: extensionPoints.hosts.projectDetailFooter.spotId,
+          context: projectInjectionContext,
+          data: project
+        }
+      )
+    ] }),
+    ConfirmDialogElement,
+    projectId && teamDrawerOpen ? /* @__PURE__ */ jsx(
+      ProjectTeamDrawer,
+      {
+        projectId,
+        projectName: project.name,
+        open: teamDrawerOpen,
+        onOpenChange: handleTeamDrawerOpenChange,
+        preselectUserId: requesterUserId,
+        onSaved: handleTeamSaved
+      }
+    ) : null,
+    /* @__PURE__ */ jsx(Dialog, { open: addDialogOpen, onOpenChange: setAddDialogOpen, children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-md", onKeyDown: handleAddDialogKeyDown, children: [
+      /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: t("staff.timesheets.projects.add_employee", "Add Employee") }) }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-4 pt-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx("label", { className: "text-sm font-medium", children: t("staff.timesheets.projects.employees.selectEmployee", "Select Employee") }),
+          /* @__PURE__ */ jsx(
+            LookupSelect,
+            {
+              value: addStaffMemberId,
+              onChange: setAddStaffMemberId,
+              fetchItems: fetchStaffMembers,
+              searchPlaceholder: t("staff.timesheets.projects.employees.searchEmployee", "Search team members..."),
+              emptyLabel: t("staff.timesheets.projects.employees.noResults", "No team members found")
+            }
+          ),
+          staffLookupError ? /* @__PURE__ */ jsx("p", { className: "text-xs text-status-error-text", role: "alert", children: staffLookupError }) : null
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx("label", { className: "text-sm font-medium", htmlFor: "add-role", children: t("staff.timesheets.projects.employees.roleOnProject", "Role on Project") }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              id: "add-role",
+              value: addRole,
+              onChange: (event) => setAddRole(event.target.value),
+              placeholder: t("staff.timesheets.projects.employees.rolePlaceholder", "e.g. Developer, Designer...")
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx("label", { className: "text-sm font-medium", htmlFor: "add-start-date", children: t("staff.timesheets.projects.employees.assignmentStartDate", "Assignment Start Date") }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              id: "add-start-date",
+              type: "date",
+              value: addStartDate,
+              onChange: (event) => setAddStartDate(event.target.value)
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2 pt-2", children: [
+          /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: () => setAddDialogOpen(false), children: t("staff.timesheets.projects.form.actions.cancel", "Cancel") }),
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              size: "sm",
+              disabled: addSaving || !addStaffMemberId || !addStartDate,
+              onClick: handleAddEmployee,
+              children: [
+                addSaving ? /* @__PURE__ */ jsx(Spinner, { className: "size-4" }) : null,
+                t("staff.timesheets.projects.add_employee", "Add Employee")
+              ]
+            }
+          )
+        ] })
+      ] })
+    ] }) })
+  ] }) });
+}
+export {
+  TimesheetProjectDetailPage as default
+};
+//# sourceMappingURL=page.js.map