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

@@ -0,0 +1,1040 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { extensionPoints } from "@open-mercato/core/modules/staff/extension-points";
+import * as React from "react";
+import Link from "next/link";
+import { useRouter, useSearchParams } from "next/navigation";
+import { Page, PageBody } from "@open-mercato/ui/backend/Page";
+import { DataTable, withDataTableNamespaces } from "@open-mercato/ui/backend/DataTable";
+import { FilterBar } from "@open-mercato/ui/backend/FilterBar";
+import { RowActions } from "@open-mercato/ui/backend/RowActions";
+import { Button } from "@open-mercato/ui/primitives/button";
+import { Checkbox } from "@open-mercato/ui/primitives/checkbox";
+import { StatusBadge } from "@open-mercato/ui/primitives/status-badge";
+import { readApiResultOrThrow, withScopedApiRequestHeaders } from "@open-mercato/ui/backend/utils/apiCall";
+import { buildOptimisticLockHeader } from "@open-mercato/ui/backend/utils/optimisticLock";
+import { surfaceRecordConflict } from "@open-mercato/ui/backend/conflicts";
+import { createCrud, deleteCrud } from "@open-mercato/ui/backend/utils/crud";
+import { groupBulkDeleteFailures, runBulkDelete } from "@open-mercato/ui/backend/utils/bulkDelete";
+import { useGuardedMutation } from "@open-mercato/ui/backend/injection/useGuardedMutation";
+import { useBackendChrome } from "@open-mercato/ui/backend/BackendChromeProvider";
+import { flash } from "@open-mercato/ui/backend/FlashMessages";
+import { useConfirmDialog } from "@open-mercato/ui/backend/confirm-dialog";
+import { formatCurrency, formatDate } from "@open-mercato/ui/utils/format";
+import { hasAllFeatures } from "@open-mercato/shared/security/features";
+import { useOrganizationScopeVersion } from "@open-mercato/shared/lib/frontend/useOrganizationScope";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { formatDateTime } from "@open-mercato/shared/lib/time";
+import { ProjectColorDot } from "../../../../lib/timesheets-ui/ProjectColorDot.js";
+import { resolveProjectColorHex } from "../../../../lib/timesheets-ui/colors.js";
+import { formatDuration } from "../../../../lib/time-tracking/duration.js";
+import {
+  ProjectsKpiStrip
+} from "../../../../lib/timesheets-projects-ui/ProjectsKpiStrip.js";
+import { SavedViewTabs } from "../../../../lib/timesheets-projects-ui/SavedViewTabs.js";
+import { HoursSparkline } from "../../../../lib/timesheets-projects-ui/HoursSparkline.js";
+import {
+  ProjectMembersAvatarStack
+} from "../../../../lib/timesheets-projects-ui/ProjectMembersAvatarStack.js";
+import { ViewModeToggle } from "../../../../lib/timesheets-projects-ui/ViewModeToggle.js";
+import {
+  useProjectsViewMode
+} from "../../../../lib/timesheets-projects-ui/useProjectsViewMode.js";
+import {
+  ProjectCard
+} from "../../../../lib/timesheets-projects-ui/ProjectCard.js";
+import { ProjectBudgetCell } from "../../../../lib/timesheets-projects-ui/ProjectBudgetCell.js";
+import { ProjectsBulkActionsBar } from "../../../../lib/timesheets-projects-ui/ProjectsBulkActionsBar.js";
+import {
+  AssignMembersDialog
+} from "../../../../lib/timesheets-projects-ui/AssignMembersDialog.js";
+import { computeBudgetBurn } from "../../../../lib/timesheets-projects/budgetBurn.js";
+import { resolveReportSelection } from "../../../../lib/timesheets-projects/reportSelection.js";
+import { createLogger } from "@open-mercato/shared/lib/logger";
+const logger = createLogger("staff");
+const PAGE_SIZE = 50;
+const INCLUDE_FIELDS = "hoursWeek,hoursTrend,members,myRole";
+const MANAGE_FEATURE = "staff.timesheets.projects.manage";
+const RATES_FEATURE = "staff.timesheets.rates.view";
+const REPORTS_FEATURES = ["staff.timesheets.reports.view", "staff.timesheets.reports.manage"];
+const REPORTS_HREF = "/backend/staff/time-tracking/reports";
+const STATUS_VARIANTS = {
+  active: "success",
+  on_hold: "warning",
+  completed: "neutral"
+};
+function readString(item, camel, snake) {
+  const camelValue = item[camel];
+  if (typeof camelValue === "string") return camelValue;
+  const snakeValue = item[snake];
+  return typeof snakeValue === "string" ? snakeValue : null;
+}
+function readNumber(value) {
+  if (typeof value === "number" && Number.isFinite(value)) return value;
+  if (typeof value === "string" && value.trim().length > 0) {
+    const parsed = Number(value);
+    if (Number.isFinite(parsed)) return parsed;
+  }
+  return null;
+}
+function readBudgetKind(value) {
+  return value === "hours" || value === "amount" ? value : "none";
+}
+function formatRelativeTime(iso, fallback, t) {
+  if (!iso) return fallback;
+  const parsed = new Date(iso);
+  if (Number.isNaN(parsed.getTime())) return fallback;
+  const diffMs = Date.now() - parsed.getTime();
+  const minutes = Math.round(diffMs / 6e4);
+  if (minutes < 1) return t("staff.timesheets.projects.portfolio.relativeTime.justNow", "just now");
+  if (minutes < 60) return t("staff.timesheets.projects.portfolio.relativeTime.minutesAgo", "{minutes}m ago", { minutes });
+  const hours = Math.round(minutes / 60);
+  if (hours < 24) return t("staff.timesheets.projects.portfolio.relativeTime.hoursAgo", "{hours}h ago", { hours });
+  const days = Math.round(hours / 24);
+  if (days < 14) return t("staff.timesheets.projects.portfolio.relativeTime.daysAgo", "{days}d ago", { days });
+  return formatDateTime(iso) ?? fallback;
+}
+function mapApiProject(item) {
+  const id = typeof item.id === "string" ? item.id : "";
+  const name = typeof item.name === "string" ? item.name : id;
+  const code = typeof item.code === "string" && item.code.trim().length ? item.code.trim() : null;
+  const customerId = readString(item, "customerId", "customer_id");
+  const status = typeof item.status === "string" ? item.status : "active";
+  const projectType = readString(item, "projectType", "project_type");
+  const color = typeof item.color === "string" ? item.color : null;
+  const startDate = readString(item, "startDate", "start_date");
+  const updatedAt = readString(item, "updatedAt", "updated_at");
+  const currencyCode = readString(item, "currencyCode", "currency_code");
+  const enrichment = item._staff ?? {};
+  const hoursWeek = typeof enrichment.hoursWeek === "number" ? enrichment.hoursWeek : 0;
+  const hoursTrend = Array.isArray(enrichment.hoursTrend) ? enrichment.hoursTrend.filter((v) => typeof v === "number") : [];
+  const members = Array.isArray(enrichment.members) ? enrichment.members.filter((m) => !!m && typeof m === "object" && typeof m.id === "string").map((m) => ({
+    id: m.id,
+    name: m.name ?? "",
+    initials: m.initials ?? "",
+    avatarUrl: m.avatarUrl ?? null
+  })) : [];
+  const memberCount = typeof enrichment.memberCount === "number" ? enrichment.memberCount : members.length;
+  const myRole = typeof enrichment.myRole === "string" ? enrichment.myRole : null;
+  const customerName = typeof enrichment.customerName === "string" && enrichment.customerName.length > 0 ? enrichment.customerName : readString(item, "customerName", "customer_name");
+  return withDataTableNamespaces(
+    {
+      id,
+      name,
+      code,
+      customerId,
+      customerName,
+      status,
+      projectType,
+      color,
+      startDate,
+      updatedAt,
+      currencyCode,
+      hoursWeek,
+      hoursTrend,
+      myRole,
+      members,
+      memberCount,
+      totalMinutes: typeof enrichment.totalMinutes === "number" ? enrichment.totalMinutes : 0,
+      hourlyRate: readNumber(enrichment.hourlyRate),
+      cost: readNumber(enrichment.cost),
+      budgetKind: readBudgetKind(enrichment.budget?.kind),
+      budgetValue: readNumber(enrichment.budget?.value),
+      budgetWarnAtPercent: readNumber(enrichment.budget?.warnAtPercent)
+    },
+    item
+  );
+}
+function TimesheetProjectsPage() {
+  const t = useT();
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const scopeVersion = useOrganizationScopeVersion();
+  const { confirm, ConfirmDialogElement } = useConfirmDialog();
+  const { payload: chromePayload } = useBackendChrome();
+  const [rows, setRows] = React.useState([]);
+  const [page, setPage] = React.useState(1);
+  const [total, setTotal] = React.useState(0);
+  const [totalIsCapped, setTotalIsCapped] = React.useState(false);
+  const [totalPages, setTotalPages] = React.useState(1);
+  const [sorting, setSorting] = React.useState([{ id: "updatedAt", desc: true }]);
+  const [search, setSearch] = React.useState("");
+  const [filterValues, setFilterValues] = React.useState({});
+  const [isLoading, setIsLoading] = React.useState(true);
+  const [isRefreshing, setIsRefreshing] = React.useState(false);
+  const hasLoadedOnceRef = React.useRef(false);
+  const [reloadToken, setReloadToken] = React.useState(0);
+  const [kpis, setKpis] = React.useState(null);
+  const [isLoadingKpis, setIsLoadingKpis] = React.useState(true);
+  const [selectedIds, setSelectedIds] = React.useState([]);
+  const [assignDialogOpen, setAssignDialogOpen] = React.useState(false);
+  const [isAssigning, setIsAssigning] = React.useState(false);
+  const activeTab = searchParams.get("tab") ?? "all";
+  const urlViewMode = searchParams.get("view");
+  const [viewMode, setViewMode] = useProjectsViewMode({
+    userKey: null,
+    urlOverride: urlViewMode
+  });
+  const grantedFeatures = React.useMemo(
+    () => chromePayload?.grantedFeatures ?? [],
+    [chromePayload?.grantedFeatures]
+  );
+  const canManageProjects = hasAllFeatures(grantedFeatures, [MANAGE_FEATURE]);
+  const canViewRates = hasAllFeatures(grantedFeatures, [RATES_FEATURE]);
+  const canCreateReports = hasAllFeatures(grantedFeatures, REPORTS_FEATURES);
+  const canSelectRows = canManageProjects || canCreateReports;
+  const labels = React.useMemo(
+    () => ({
+      title: t("staff.timesheets.projects.page.title", "Projects"),
+      table: {
+        name: t("staff.timesheets.projects.table.name", "Project"),
+        status: t("staff.timesheets.projects.table.status", "Status"),
+        type: t("staff.timesheets.projects.table.type", "Type"),
+        updatedAt: t("staff.timesheets.projects.table.updatedAt", "Updated"),
+        empty: t("staff.timesheets.projects.table.empty", "No projects yet."),
+        search: t("staff.timesheets.projects.table.search", "Search projects..."),
+        team: t("staff.timesheets.projects.portfolio.team", "Team"),
+        myRole: t("staff.timesheets.projects.portfolio.myRole", "My role"),
+        hoursWeek: t("staff.timesheets.projects.portfolio.hoursWeek", "Hours / week"),
+        myHoursWeek: t("staff.timesheets.projects.portfolio.myHoursWeek", "My hours / week"),
+        customer: t("staff.time_tracking.projects.columns.customer", "Customer"),
+        rate: t("staff.time_tracking.projects.columns.rate", "Rate"),
+        hours: t("staff.time_tracking.projects.columns.hours", "Hours"),
+        cost: t("staff.time_tracking.projects.columns.cost", "Cost"),
+        budget: t("staff.time_tracking.projects.columns.budget", "Budget"),
+        selectRow: t("staff.time_tracking.projects.selection.selectRow", "Select project"),
+        selectAll: t("staff.time_tracking.projects.selection.selectAll", "Select all projects on this page")
+      },
+      actions: {
+        add: t("staff.timesheets.projects.actions.add", "Add Project"),
+        addFirst: t("staff.timesheets.projects.actions.addFirst", "+ Add first project"),
+        viewDetails: t("staff.timesheets.projects.actions.viewDetails", "View Details"),
+        delete: t("staff.timesheets.projects.actions.delete", "Delete"),
+        deleteConfirm: t("staff.timesheets.projects.actions.deleteConfirm", 'Delete project "{{name}}"?'),
+        refresh: t("staff.timesheets.projects.actions.refresh", "Refresh"),
+        assignCustomer: t("staff.time_tracking.projects.actions.assignCustomer", "Assign a customer")
+      },
+      messages: {
+        deleted: t("staff.timesheets.projects.messages.deleted", "Project deleted.")
+      },
+      errors: {
+        load: t("staff.timesheets.projects.errors.load", "Failed to load projects."),
+        delete: t("staff.timesheets.projects.errors.delete", "Failed to delete project.")
+      },
+      statuses: {
+        all: t("staff.timesheets.projects.statuses.all", "All"),
+        active: t("staff.timesheets.projects.statuses.active", "Active"),
+        on_hold: t("staff.timesheets.projects.statuses.onHold", "On Hold"),
+        completed: t("staff.timesheets.projects.statuses.completed", "Completed")
+      },
+      tabs: {
+        all: t("staff.timesheets.projects.portfolio.tabs.all", "All"),
+        active: t("staff.timesheets.projects.portfolio.tabs.active", "Active"),
+        onHold: t("staff.timesheets.projects.portfolio.tabs.onHold", "On Hold"),
+        completed: t("staff.timesheets.projects.portfolio.tabs.completed", "Completed"),
+        mine: t("staff.timesheets.projects.portfolio.tabs.mine", "Mine")
+      },
+      viewMode: {
+        table: t("staff.timesheets.projects.portfolio.viewMode.table", "Table"),
+        cards: t("staff.timesheets.projects.portfolio.viewMode.cards", "Cards")
+      },
+      kpi: {
+        totalProjects: t("staff.timesheets.projects.portfolio.kpi.totalProjects", "Total Projects"),
+        hoursWeek: t("staff.timesheets.projects.portfolio.kpi.hoursWeek", "Hours this week"),
+        hoursWeekSub: t("staff.timesheets.projects.portfolio.kpi.hoursWeekSub", "vs previous week"),
+        assignedToMe: t("staff.timesheets.projects.portfolio.kpi.assignedToMe", "Assigned to me"),
+        hoursMonth: t("staff.timesheets.projects.portfolio.kpi.hoursMonth", "Hours this month"),
+        hoursMonthSub: t("staff.timesheets.projects.portfolio.kpi.hoursMonthSub", "vs previous month"),
+        teamActive: t("staff.timesheets.projects.portfolio.kpi.teamActive", "Active team"),
+        teamActiveSub: t("staff.timesheets.projects.portfolio.kpi.teamActiveSub", "Members with entries this month"),
+        myProjects: t("staff.timesheets.projects.portfolio.kpi.myProjects", "My projects"),
+        myHoursWeek: t("staff.timesheets.projects.portfolio.kpi.myHoursWeek", "My hours this week"),
+        myHoursMonth: t("staff.timesheets.projects.portfolio.kpi.myHoursMonth", "My hours this month"),
+        deltaFlat: t("staff.timesheets.projects.portfolio.kpi.deltaFlat", "no change"),
+        noPrevious: t("staff.timesheets.projects.portfolio.kpi.noPrevious", "no previous data")
+      },
+      card: {
+        hoursPanelPm: t("staff.timesheets.projects.portfolio.card.hoursPanelPm", "Team hours \xB7 last 7w"),
+        hoursPanelCollab: t("staff.timesheets.projects.portfolio.card.hoursPanelCollab", "My hours \xB7 last 7w"),
+        sparklineAria: t("staff.timesheets.projects.portfolio.sparkline.ariaLabel", "Hours per week, last 7 weeks"),
+        role: t("staff.timesheets.projects.portfolio.card.role", "Role")
+      },
+      emptyState: {
+        noProjects: t("staff.timesheets.projects.portfolio.emptyState.noProjects", "No projects yet."),
+        noAssignments: t(
+          "staff.timesheets.projects.portfolio.emptyState.noAssignments",
+          "You aren't assigned to any projects yet. Ask a PM to add you."
+        ),
+        noMatches: t("staff.timesheets.projects.portfolio.emptyState.noMatches", "No projects match these filters.")
+      },
+      budget: {
+        none: t("staff.time_tracking.projects.budget.none", "no budget"),
+        aria: t("staff.time_tracking.projects.budget.ariaLabel", "Budget usage")
+      },
+      bulk: {
+        report: t("staff.time_tracking.projects.bulk.report", "Report from selected"),
+        assignMembers: t("staff.time_tracking.projects.bulk.assignMembers", "Assign members"),
+        clear: t("staff.time_tracking.projects.bulk.clear", "Clear")
+      },
+      assign: {
+        title: t("staff.time_tracking.projects.assignMembers.title", "Assign members"),
+        searchPlaceholder: t("staff.timesheets.projects.employees.searchEmployee", "Search team members..."),
+        empty: t("staff.timesheets.projects.employees.noResults", "No team members found"),
+        loadError: t(
+          "staff.time_tracking.projects.assignMembers.loadError",
+          "Could not load team members. Check your connection and try again."
+        ),
+        loading: t("staff.timesheets.projects.employees.loading", "Loading employees..."),
+        role: t("staff.timesheets.projects.employees.roleOnProject", "Role on Project"),
+        rolePlaceholder: t("staff.timesheets.projects.employees.rolePlaceholder", "e.g. Developer, Designer..."),
+        startDate: t("staff.timesheets.projects.employees.assignmentStartDate", "Assignment Start Date"),
+        cancel: t("staff.timesheets.projects.form.actions.cancel", "Cancel"),
+        confirm: t("staff.time_tracking.projects.assignMembers.confirm", "Assign"),
+        error: t("staff.time_tracking.projects.assignMembers.error", "Failed to assign members."),
+        progressName: t("staff.time_tracking.projects.assignMembers.progressName", "Assign members to projects")
+      }
+    }),
+    [t]
+  );
+  const kpiLabels = React.useMemo(
+    () => ({
+      totalProjects: labels.kpi.totalProjects,
+      totalProjectsSub: ({ active, onHold }) => `${active} ${labels.statuses.active.toLowerCase()} \xB7 ${onHold} ${labels.statuses.on_hold.toLowerCase()}`,
+      hoursWeek: labels.kpi.hoursWeek,
+      hoursWeekSub: labels.kpi.hoursWeekSub,
+      assignedToMe: labels.kpi.assignedToMe,
+      assignedToMeSub: (active) => `${active} ${labels.statuses.active.toLowerCase()}`,
+      hoursMonth: labels.kpi.hoursMonth,
+      hoursMonthSub: labels.kpi.hoursMonthSub,
+      teamActive: labels.kpi.teamActive,
+      teamActiveSub: labels.kpi.teamActiveSub,
+      myProjects: labels.kpi.myProjects,
+      myProjectsSub: (active) => `${active} ${labels.statuses.active.toLowerCase()}`,
+      myHoursWeek: labels.kpi.myHoursWeek,
+      myHoursMonth: labels.kpi.myHoursMonth,
+      deltaUp: (pct) => `up ${pct}%`,
+      deltaDown: (pct) => `down ${pct}%`,
+      deltaFlat: labels.kpi.deltaFlat,
+      noPrevious: labels.kpi.noPrevious
+    }),
+    [labels]
+  );
+  const isPmRole = kpis?.role === "pm";
+  const filters = React.useMemo(
+    () => [
+      {
+        id: "status",
+        label: labels.table.status,
+        type: "select",
+        options: [
+          { value: "active", label: labels.statuses.active },
+          { value: "on_hold", label: labels.statuses.on_hold },
+          { value: "completed", label: labels.statuses.completed }
+        ]
+      }
+    ],
+    [labels.table.status, labels.statuses]
+  );
+  const tabs = React.useMemo(() => {
+    const base = [
+      { id: "all", label: labels.tabs.all },
+      { id: "active", label: labels.tabs.active }
+    ];
+    if (isPmRole) {
+      base.push({ id: "on_hold", label: labels.tabs.onHold });
+    }
+    base.push({ id: "completed", label: labels.tabs.completed });
+    if (isPmRole) {
+      base.push({ id: "mine", label: labels.tabs.mine });
+    }
+    return base;
+  }, [labels.tabs, isPmRole]);
+  const statusFromTab = (tabId) => {
+    if (tabId === "active" || tabId === "on_hold" || tabId === "completed") return tabId;
+    return null;
+  };
+  const mineFromTab = (tabId) => tabId === "mine" || !isPmRole;
+  const loadKpis = React.useCallback(async () => {
+    setIsLoadingKpis(true);
+    try {
+      const payload = await readApiResultOrThrow(
+        "/api/staff/timesheets/projects/kpis",
+        void 0,
+        {
+          errorMessage: labels.errors.load,
+          fallback: null
+        }
+      );
+      setKpis(payload);
+    } catch {
+      setKpis(null);
+    } finally {
+      setIsLoadingKpis(false);
+    }
+  }, [labels.errors.load]);
+  const loadProjects = React.useCallback(async () => {
+    if (hasLoadedOnceRef.current) {
+      setIsRefreshing(true);
+    } else {
+      setIsLoading(true);
+    }
+    try {
+      const params = new URLSearchParams({
+        page: String(page),
+        pageSize: String(PAGE_SIZE),
+        include: INCLUDE_FIELDS
+      });
+      const sort = sorting[0];
+      if (sort?.id) {
+        params.set("sortField", sort.id);
+        params.set("sortDir", sort.desc ? "desc" : "asc");
+      }
+      if (search.trim()) params.set("q", search.trim());
+      const tabStatus = statusFromTab(activeTab);
+      if (tabStatus) params.set("status", tabStatus);
+      else if (typeof filterValues.status === "string" && filterValues.status.length > 0) {
+        params.set("status", filterValues.status);
+      }
+      if (mineFromTab(activeTab)) params.set("mine", "1");
+      const payload = await readApiResultOrThrow(
+        `/api/staff/timesheets/time-projects?${params.toString()}`,
+        void 0,
+        { errorMessage: labels.errors.load, fallback: { items: [], total: 0, totalPages: 1 } }
+      );
+      const items = Array.isArray(payload.items) ? payload.items : [];
+      setRows(items.map(mapApiProject));
+      setTotal(typeof payload.total === "number" ? payload.total : items.length);
+      setTotalIsCapped(payload.totalIsCapped === true);
+      setTotalPages(
+        typeof payload.totalPages === "number" ? payload.totalPages : Math.max(1, Math.ceil(items.length / PAGE_SIZE))
+      );
+    } catch (error) {
+      logger.error("staff.timesheets.projects.list", { err: error });
+      flash(labels.errors.load, "error");
+    } finally {
+      setIsLoading(false);
+      setIsRefreshing(false);
+      hasLoadedOnceRef.current = true;
+    }
+  }, [labels.errors.load, page, search, sorting, filterValues.status, activeTab, isPmRole]);
+  React.useEffect(() => {
+    void loadKpis();
+  }, [loadKpis, scopeVersion, reloadToken]);
+  React.useEffect(() => {
+    void loadProjects();
+  }, [loadProjects, scopeVersion, reloadToken]);
+  React.useEffect(() => {
+    setSelectedIds([]);
+  }, [page, activeTab, search, filterValues.status, scopeVersion]);
+  const selectedRows = React.useMemo(
+    () => rows.filter((row) => selectedIds.includes(row.id)),
+    [rows, selectedIds]
+  );
+  const reportSelection = React.useMemo(
+    () => resolveReportSelection(
+      selectedRows.map((row) => ({
+        id: row.id,
+        name: row.name,
+        customerId: row.customerId,
+        customerName: row.customerName,
+        currencyCode: row.currencyCode
+      }))
+    ),
+    [selectedRows]
+  );
+  const reportBlockedReason = React.useMemo(() => {
+    if (reportSelection.ok) return null;
+    const offenders = reportSelection.offenders.join(", ");
+    if (reportSelection.reason === "multiple_customers") {
+      return t(
+        "staff.time_tracking.projects.bulk.reportBlocked.multipleCustomers",
+        "A report always covers one customer. Selected: {customers}.",
+        { customers: offenders }
+      );
+    }
+    if (reportSelection.reason === "multiple_currencies") {
+      return t(
+        "staff.time_tracking.projects.bulk.reportBlocked.multipleCurrencies",
+        "A report always covers one currency. Selected: {currencies}.",
+        { currencies: offenders }
+      );
+    }
+    if (reportSelection.reason === "missing_customer") {
+      return t(
+        "staff.time_tracking.projects.bulk.reportBlocked.missingCustomer",
+        "These projects have no customer yet: {projects}.",
+        { projects: offenders }
+      );
+    }
+    return null;
+  }, [reportSelection, t]);
+  const handleTabSelect = React.useCallback(
+    (id) => {
+      const params = new URLSearchParams(searchParams.toString());
+      if (id === "all") params.delete("tab");
+      else params.set("tab", id);
+      router.replace(`?${params.toString()}`);
+      setPage(1);
+    },
+    [router, searchParams]
+  );
+  const handleViewModeChange = React.useCallback(
+    (next) => {
+      setViewMode(next);
+      const params = new URLSearchParams(searchParams.toString());
+      if (next === "table") params.delete("view");
+      else params.set("view", next);
+      router.replace(`?${params.toString()}`);
+    },
+    [router, searchParams, setViewMode]
+  );
+  const handleSearchChange = React.useCallback((value) => {
+    setSearch(value);
+    setPage(1);
+  }, []);
+  const handleFiltersApply = React.useCallback((values) => {
+    setFilterValues(values);
+    setPage(1);
+  }, []);
+  const handleFiltersClear = React.useCallback(() => {
+    setFilterValues({});
+    setPage(1);
+  }, []);
+  const handleRefresh = React.useCallback(() => {
+    setReloadToken((token) => token + 1);
+  }, []);
+  const projectsMutationContextId = "staff-time-projects-list:assign-members";
+  const { runMutation: runProjectsMutation, retryLastMutation: retryProjectsMutation } = useGuardedMutation({
+    contextId: projectsMutationContextId,
+    blockedMessage: t("ui.forms.flash.saveBlocked", "Save blocked by validation")
+  });
+  const handleDelete = React.useCallback(
+    async (entry) => {
+      const message = labels.actions.deleteConfirm.replace("{{name}}", entry.name);
+      const confirmed = await confirm({
+        title: labels.actions.delete,
+        text: message,
+        variant: "destructive"
+      });
+      if (!confirmed) return;
+      try {
+        await runProjectsMutation({
+          operation: () => withScopedApiRequestHeaders(
+            buildOptimisticLockHeader(entry.updatedAt),
+            () => deleteCrud("staff/timesheets/time-projects", entry.id, { errorMessage: labels.errors.delete })
+          ),
+          context: {
+            formId: projectsMutationContextId,
+            resourceKind: "staff.time_project",
+            resourceId: entry.id,
+            retryLastMutation: retryProjectsMutation
+          },
+          mutationPayload: { id: entry.id }
+        });
+        flash(labels.messages.deleted, "success");
+        handleRefresh();
+      } catch (error) {
+        if (surfaceRecordConflict(error, t)) {
+          handleRefresh();
+          return;
+        }
+        logger.error("staff.timesheets.projects.delete", { err: error });
+        flash(labels.errors.delete, "error");
+      }
+    },
+    [confirm, handleRefresh, projectsMutationContextId, retryProjectsMutation, runProjectsMutation, t, labels.actions.deleteConfirm, labels.actions.delete, labels.errors.delete, labels.messages.deleted]
+  );
+  const handleAssignMembers = React.useCallback(
+    async (input) => {
+      const targets = selectedRows;
+      if (targets.length === 0 || input.staffMemberIds.length === 0) return;
+      setIsAssigning(true);
+      try {
+        const { succeeded, failures } = await runProjectsMutation({
+          operation: () => runBulkDelete(
+            targets,
+            async (row) => {
+              for (const staffMemberId of input.staffMemberIds) {
+                await createCrud(
+                  `staff/timesheets/time-projects/${row.id}/employees`,
+                  {
+                    timeProjectId: row.id,
+                    staffMemberId,
+                    role: input.role,
+                    assignedStartDate: input.assignedStartDate
+                  },
+                  { errorMessage: labels.assign.error }
+                );
+              }
+            },
+            {
+              fallbackErrorMessage: labels.assign.error,
+              logTag: "staff.timesheets.projects.assignMembers",
+              progress: {
+                jobType: "staff.timesheets.projects.bulk_assign_members",
+                name: labels.assign.progressName
+              }
+            }
+          ),
+          context: {
+            formId: projectsMutationContextId,
+            resourceKind: "staff.time_project_member",
+            retryLastMutation: retryProjectsMutation
+          },
+          mutationPayload: {
+            projectIds: targets.map((row) => row.id),
+            staffMemberIds: input.staffMemberIds
+          }
+        });
+        if (succeeded.length > 0) {
+          flash(
+            t("staff.time_tracking.projects.assignMembers.success", "Members assigned to {count} projects.", {
+              count: succeeded.length
+            }),
+            "success"
+          );
+        }
+        for (const group of groupBulkDeleteFailures(failures)) {
+          flash(group.sampleMessage, "error");
+        }
+        setAssignDialogOpen(false);
+        setSelectedIds([]);
+        handleRefresh();
+      } catch (error) {
+        logger.error("staff.timesheets.projects.assignMembers", { err: error });
+        flash(labels.assign.error, "error");
+      } finally {
+        setIsAssigning(false);
+      }
+    },
+    [
+      projectsMutationContextId,
+      handleRefresh,
+      labels.assign.error,
+      labels.assign.progressName,
+      retryProjectsMutation,
+      runProjectsMutation,
+      selectedRows,
+      t
+    ]
+  );
+  const handleReportFromSelected = React.useCallback(() => {
+    if (!reportSelection.ok) return;
+    const params = new URLSearchParams({
+      customerId: reportSelection.customerId,
+      projectIds: reportSelection.projectIds.join(",")
+    });
+    router.push(`${REPORTS_HREF}?${params.toString()}`);
+  }, [reportSelection, router]);
+  const toggleRowSelection = React.useCallback((id, checked) => {
+    setSelectedIds((prev) => checked ? Array.from(/* @__PURE__ */ new Set([...prev, id])) : prev.filter((value) => value !== id));
+  }, []);
+  const toggleAllSelection = React.useCallback(
+    (checked) => {
+      setSelectedIds(checked ? rows.map((row) => row.id) : []);
+    },
+    [rows]
+  );
+  const allSelected = rows.length > 0 && selectedIds.length === rows.length;
+  const someSelected = selectedIds.length > 0 && !allSelected;
+  const columns = React.useMemo(() => {
+    const rightHeader = (label) => () => /* @__PURE__ */ jsx("span", { className: "block text-right", children: label });
+    const defs = [];
+    if (canSelectRows) {
+      defs.push({
+        id: "select",
+        accessorKey: "id",
+        header: () => /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            checked: allSelected ? true : someSelected ? "indeterminate" : false,
+            onCheckedChange: (checked) => toggleAllSelection(Boolean(checked)),
+            "aria-label": labels.table.selectAll
+          }
+        ),
+        enableSorting: false,
+        meta: { priority: 1 },
+        cell: ({ row }) => /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            checked: selectedIds.includes(row.original.id),
+            onCheckedChange: (checked) => toggleRowSelection(row.original.id, Boolean(checked)),
+            onClick: (event) => event.stopPropagation(),
+            "aria-label": labels.table.selectRow
+          }
+        )
+      });
+    }
+    defs.push({
+      accessorKey: "name",
+      header: labels.table.name,
+      meta: { priority: 1 },
+      cell: ({ row }) => {
+        const startDate = row.original.startDate ? formatDate(row.original.startDate) : null;
+        return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5", children: [
+          /* @__PURE__ */ jsx(ProjectColorDot, { colorKey: row.original.color, projectName: row.original.name, size: "sm" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col", children: [
+            /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-medium text-foreground", children: row.original.name }),
+            /* @__PURE__ */ jsxs("span", { className: "truncate font-mono text-xs text-muted-foreground", children: [
+              row.original.code ?? "\u2014",
+              startDate ? ` \xB7 ${startDate}` : ""
+            ] })
+          ] })
+        ] });
+      }
+    });
+    defs.push({
+      accessorKey: "customerName",
+      id: "customerName",
+      header: labels.table.customer,
+      enableSorting: false,
+      meta: { priority: 2 },
+      cell: ({ row }) => {
+        if (row.original.customerName) {
+          return /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: row.original.customerName });
+        }
+        if (canManageProjects && !row.original.customerId) {
+          return /* @__PURE__ */ jsx(
+            Link,
+            {
+              href: `/backend/staff/time-tracking/projects/${row.original.id}/edit`,
+              className: "text-sm text-primary underline-offset-2 hover:underline",
+              onClick: (event) => event.stopPropagation(),
+              children: labels.actions.assignCustomer
+            }
+          );
+        }
+        return /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground/70", children: "\u2014" });
+      }
+    });
+    defs.push({
+      accessorKey: "status",
+      header: labels.table.status,
+      meta: { priority: 3 },
+      cell: ({ row }) => /* @__PURE__ */ jsx(StatusBadge, { variant: STATUS_VARIANTS[row.original.status] ?? "neutral", dot: true, children: labels.statuses[row.original.status] ?? row.original.status })
+    });
+    defs.push(
+      isPmRole ? {
+        accessorKey: "members",
+        id: "members",
+        header: labels.table.team,
+        enableSorting: false,
+        meta: { priority: 4 },
+        cell: ({ row }) => /* @__PURE__ */ jsx(
+          ProjectMembersAvatarStack,
+          {
+            members: row.original.members,
+            total: row.original.memberCount,
+            peopleCountLabel: `${row.original.memberCount}`
+          }
+        )
+      } : {
+        accessorKey: "myRole",
+        header: labels.table.myRole,
+        enableSorting: false,
+        meta: { priority: 4 },
+        cell: ({ row }) => row.original.myRole ? /* @__PURE__ */ jsx("span", { className: "text-sm text-foreground", children: row.original.myRole }) : /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground/70", children: "\u2014" })
+      }
+    );
+    if (canViewRates) {
+      defs.push({
+        accessorKey: "hourlyRate",
+        id: "hourlyRate",
+        header: rightHeader(labels.table.rate),
+        enableSorting: false,
+        meta: { priority: 5 },
+        cell: ({ row }) => /* @__PURE__ */ jsx("span", { className: "block text-right font-mono text-sm tabular-nums text-foreground", children: formatCurrency(row.original.hourlyRate, row.original.currencyCode) ?? "\u2014" })
+      });
+    }
+    defs.push({
+      accessorKey: "totalMinutes",
+      id: "totalMinutes",
+      header: rightHeader(labels.table.hours),
+      enableSorting: false,
+      meta: { priority: 5 },
+      cell: ({ row }) => /* @__PURE__ */ jsx("span", { className: "block text-right font-mono text-sm font-semibold tabular-nums text-foreground", children: row.original.totalMinutes > 0 ? formatDuration(row.original.totalMinutes, "clock") : "\u2014" })
+    });
+    if (canViewRates) {
+      defs.push({
+        accessorKey: "cost",
+        id: "cost",
+        header: rightHeader(labels.table.cost),
+        enableSorting: false,
+        meta: { priority: 5 },
+        cell: ({ row }) => /* @__PURE__ */ jsx("span", { className: "block text-right font-mono text-sm tabular-nums text-foreground", children: formatCurrency(row.original.cost, row.original.currencyCode) ?? "\u2014" })
+      });
+    }
+    defs.push({
+      accessorKey: "budgetValue",
+      id: "budget",
+      header: labels.table.budget,
+      enableSorting: false,
+      meta: { priority: 5 },
+      cell: ({ row }) => {
+        if (row.original.budgetKind === "amount" && !canViewRates) {
+          return /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "\u2014" });
+        }
+        const burn = computeBudgetBurn({
+          kind: row.original.budgetKind,
+          budgetValue: row.original.budgetValue,
+          warnAtPercent: row.original.budgetWarnAtPercent,
+          totalMinutes: row.original.totalMinutes,
+          cost: row.original.cost
+        });
+        const budgetLabel = burn ? burn.kind === "hours" ? t("staff.time_tracking.projects.budget.hoursValue", "{value} h", {
+          value: Math.round(burn.budgetValue * 10) / 10
+        }) : formatCurrency(burn.budgetValue, row.original.currencyCode) ?? `${burn.budgetValue}` : null;
+        return /* @__PURE__ */ jsx(
+          ProjectBudgetCell,
+          {
+            burn,
+            usageLabel: burn ? t("staff.time_tracking.projects.budget.usage", "{percent}% of {value}", {
+              percent: burn.percent,
+              value: budgetLabel ?? ""
+            }) : null,
+            noBudgetLabel: labels.budget.none,
+            ariaLabel: labels.budget.aria
+          }
+        );
+      }
+    });
+    defs.push({
+      accessorKey: "hoursWeek",
+      header: isPmRole ? labels.table.hoursWeek : labels.table.myHoursWeek,
+      enableSorting: false,
+      meta: { priority: 6 },
+      cell: ({ row }) => {
+        const stripe = resolveProjectColorHex(row.original.color, row.original.name);
+        return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-2", children: [
+          /* @__PURE__ */ jsx(
+            HoursSparkline,
+            {
+              values: row.original.hoursTrend,
+              color: stripe,
+              ariaLabel: labels.card.sparklineAria
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "text-xs font-medium tabular-nums text-foreground", children: row.original.hoursWeek > 0 ? `${row.original.hoursWeek}h` : "\u2014" })
+        ] });
+      }
+    });
+    defs.push({
+      accessorKey: "projectType",
+      header: labels.table.type,
+      meta: { priority: 7 },
+      cell: ({ row }) => row.original.projectType ? /* @__PURE__ */ jsx("span", { className: "text-sm text-foreground", children: row.original.projectType }) : /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground/70", children: "\u2014" })
+    });
+    defs.push({
+      accessorKey: "updatedAt",
+      header: labels.table.updatedAt,
+      meta: { priority: 8 },
+      cell: ({ row }) => /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: formatRelativeTime(row.original.updatedAt, "\u2014", t) })
+    });
+    return defs;
+  }, [
+    allSelected,
+    canManageProjects,
+    canSelectRows,
+    canViewRates,
+    isPmRole,
+    labels,
+    selectedIds,
+    someSelected,
+    t,
+    toggleAllSelection,
+    toggleRowSelection
+  ]);
+  const cardLabels = React.useMemo(
+    () => ({
+      hoursPanelPm: labels.card.hoursPanelPm,
+      hoursPanelCollab: labels.card.hoursPanelCollab,
+      sparklineAria: labels.card.sparklineAria,
+      peopleCount: (count) => `${count}`,
+      role: labels.card.role,
+      noCustomer: "\u2014",
+      statuses: labels.statuses
+    }),
+    [labels.card, labels.statuses]
+  );
+  const emptyStateCopy = React.useMemo(() => {
+    const hasFiltersApplied = activeTab !== "all" || search.trim().length > 0 || Object.values(filterValues).some(Boolean);
+    if (hasFiltersApplied) return labels.emptyState.noMatches;
+    if (!canManageProjects) return labels.emptyState.noAssignments;
+    return labels.emptyState.noProjects;
+  }, [activeTab, search, filterValues, canManageProjects, labels.emptyState]);
+  const cardsData = rows.map((row) => ({
+    id: row.id,
+    name: row.name,
+    code: row.code,
+    customerName: row.customerName,
+    color: row.color,
+    status: row.status,
+    hoursWeek: row.hoursWeek,
+    hoursTrend: row.hoursTrend,
+    members: row.members,
+    memberCount: row.memberCount,
+    myRole: row.myRole,
+    updatedAt: row.updatedAt
+  }));
+  const tableToolbar = /* @__PURE__ */ jsx(
+    FilterBar,
+    {
+      searchValue: search,
+      onSearchChange: handleSearchChange,
+      searchPlaceholder: labels.table.search,
+      filters,
+      values: filterValues,
+      onApply: handleFiltersApply,
+      onClear: handleFiltersClear,
+      trailingItems: canSelectRows ? /* @__PURE__ */ jsx(
+        ProjectsBulkActionsBar,
+        {
+          selectedCount: selectedIds.length,
+          labels: {
+            selectedCount: t("staff.time_tracking.projects.bulk.selectedCount", "{count} selected", {
+              count: selectedIds.length
+            }),
+            report: labels.bulk.report,
+            assignMembers: labels.bulk.assignMembers,
+            clear: labels.bulk.clear
+          },
+          canReport: canCreateReports,
+          canAssignMembers: canManageProjects,
+          reportBlockedReason,
+          isBusy: isAssigning,
+          onReport: handleReportFromSelected,
+          onAssignMembers: () => setAssignDialogOpen(true),
+          onClear: () => setSelectedIds([])
+        }
+      ) : null
+    }
+  );
+  return /* @__PURE__ */ jsxs(Page, { children: [
+    /* @__PURE__ */ jsxs(PageBody, { children: [
+      /* @__PURE__ */ jsx("div", { className: "mb-4", children: /* @__PURE__ */ jsx(ProjectsKpiStrip, { kpis, labels: kpiLabels, isLoading: isLoadingKpis }) }),
+      /* @__PURE__ */ jsxs("div", { className: "mb-3 flex flex-wrap items-center justify-between gap-3", children: [
+        /* @__PURE__ */ jsx(
+          SavedViewTabs,
+          {
+            tabs,
+            activeId: activeTab,
+            onSelect: handleTabSelect,
+            ariaLabel: t("staff.timesheets.projects.portfolio.savedViews.ariaLabel", "Saved views")
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ViewModeToggle,
+          {
+            mode: viewMode,
+            onChange: handleViewModeChange,
+            tableLabel: labels.viewMode.table,
+            cardsLabel: labels.viewMode.cards,
+            ariaLabel: t("staff.timesheets.projects.portfolio.viewMode.ariaLabel", "View mode")
+          }
+        )
+      ] }),
+      viewMode === "cards" ? /* @__PURE__ */ jsx("div", { children: isLoading ? /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-3", children: Array.from({ length: 6 }).map((_, idx) => /* @__PURE__ */ jsx("div", { className: "h-48 animate-pulse rounded-lg border border-border bg-muted/40" }, idx)) }) : rows.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-dashed border-border bg-card p-10 text-center", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: emptyStateCopy }),
+        canManageProjects ? /* @__PURE__ */ jsx("div", { className: "mt-3", children: /* @__PURE__ */ jsx(Button, { asChild: true, size: "sm", children: /* @__PURE__ */ jsx(Link, { href: "/backend/staff/time-tracking/projects/create", children: labels.actions.addFirst }) }) }) : null
+      ] }) : /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-3", children: cardsData.map((card) => /* @__PURE__ */ jsx(
+        ProjectCard,
+        {
+          data: card,
+          labels: cardLabels,
+          showTeam: isPmRole,
+          href: `/backend/staff/time-tracking/projects/${card.id}`
+        },
+        card.id
+      )) }) }) : /* @__PURE__ */ jsx(
+        DataTable,
+        {
+          extensionTableId: extensionPoints.hosts.timeProjectsTable.tableId,
+          title: labels.title,
+          titleHeadingLevel: 1,
+          data: rows,
+          columns,
+          isLoading,
+          toolbar: tableToolbar,
+          emptyState: /* @__PURE__ */ jsxs("div", { className: "py-12 text-center", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mb-4", children: emptyStateCopy }),
+            canManageProjects ? /* @__PURE__ */ jsx(Button, { asChild: true, size: "sm", children: /* @__PURE__ */ jsx(Link, { href: "/backend/staff/time-tracking/projects/create", children: labels.actions.addFirst }) }) : null
+          ] }),
+          actions: canManageProjects ? /* @__PURE__ */ jsx(Button, { asChild: true, size: "sm", children: /* @__PURE__ */ jsx(Link, { href: "/backend/staff/time-tracking/projects/create", children: labels.actions.add }) }) : void 0,
+          refreshButton: {
+            label: labels.actions.refresh,
+            onRefresh: handleRefresh,
+            isRefreshing: isLoading || isRefreshing
+          },
+          sortable: true,
+          sorting,
+          onSortingChange: setSorting,
+          pagination: {
+            page,
+            pageSize: PAGE_SIZE,
+            total,
+            totalIsCapped,
+            totalPages,
+            onPageChange: setPage
+          },
+          stickyActionsColumn: true,
+          rowActions: (row) => /* @__PURE__ */ jsx(
+            RowActions,
+            {
+              items: [
+                {
+                  id: "view",
+                  label: labels.actions.viewDetails,
+                  href: `/backend/staff/time-tracking/projects/${row.id}`
+                },
+                ...canManageProjects ? [
+                  {
+                    id: "delete",
+                    label: labels.actions.delete,
+                    destructive: true,
+                    onSelect: () => {
+                      void handleDelete(row);
+                    }
+                  }
+                ] : []
+              ]
+            }
+          ),
+          onRowClick: (row) => router.push(`/backend/staff/time-tracking/projects/${row.id}`)
+        }
+      )
+    ] }),
+    canManageProjects ? /* @__PURE__ */ jsx(
+      AssignMembersDialog,
+      {
+        open: assignDialogOpen,
+        onOpenChange: setAssignDialogOpen,
+        isSaving: isAssigning,
+        labels: {
+          title: labels.assign.title,
+          description: t(
+            "staff.time_tracking.projects.assignMembers.description",
+            "Selected projects: {count}.",
+            { count: selectedIds.length }
+          ),
+          searchPlaceholder: labels.assign.searchPlaceholder,
+          empty: labels.assign.empty,
+          loadError: labels.assign.loadError,
+          loading: labels.assign.loading,
+          role: labels.assign.role,
+          rolePlaceholder: labels.assign.rolePlaceholder,
+          startDate: labels.assign.startDate,
+          cancel: labels.assign.cancel,
+          confirm: labels.assign.confirm
+        },
+        onConfirm: (input) => {
+          void handleAssignMembers(input);
+        }
+      }
+    ) : null,
+    ConfirmDialogElement
+  ] });
+}
+export {
+  TimesheetProjectsPage as default
+};
+//# sourceMappingURL=page.js.map