gantt-lib 0.80.1 → 0.82.0

package/dist/index.mjs

@@ -7632,7 +7632,7 @@ import { Fragment as Fragment3, jsx as jsx15, jsxs as jsxs12 } from "react/jsx-r
 var DEFAULT_DAY_WIDTH = 40;
 var DEFAULT_HEADER_HEIGHT = 40;
 var DEFAULT_LANE_HEIGHT = 40;
-var DEFAULT_ROW_HEADER_WIDTH = 240;
+var DEFAULT_ROW_HEADER_WIDTH = 420;
 var DEFAULT_RESOURCE_ROW_GAP = 8;
 var ITEM_OUTER_VERTICAL_INSET = 2;
 var ITEM_INNER_VERTICAL_INSET = 1;
@@ -7720,20 +7720,97 @@ var clampOverlaySegments = (segments2, maxWidth) => segments2.flatMap((segment)
   return width > 0 ? [{ left, width }] : [];
 });
 var getDurationValue = (startDate, endDate, businessDays, weekendPredicate) => businessDays ? getBusinessDaysCount(startDate, endDate, weekendPredicate) : Math.max(1, Math.round((endDate.getTime() - startDate.getTime()) / (24 * 60 * 60 * 1e3)) + 1);
+var RESOURCE_TYPE_OPTIONS = ["\u041B\u044E\u0434\u0438", "\u041E\u0431\u043E\u0440\u0443\u0434\u043E\u0432\u0430\u043D\u0438\u0435", "\u041C\u0430\u0442\u0435\u0440\u0438\u0430\u043B\u044B", "\u0414\u0440\u0443\u0433\u043E\u0435"];
+var RESOURCE_SCOPE_OPTIONS = ["Shared", "Project"];
+var RESOURCE_SCOPE_LABELS = {
+  Shared: "\u041E\u0431\u0449\u0438\u0439",
+  Project: "\u041F\u0440\u043E\u0435\u043A\u0442"
+};
+var RESOURCE_TYPE_CLASS_NAMES = {
+  \u041B\u044E\u0434\u0438: "People",
+  \u041E\u0431\u043E\u0440\u0443\u0434\u043E\u0432\u0430\u043D\u0438\u0435: "Equipment",
+  \u041C\u0430\u0442\u0435\u0440\u0438\u0430\u043B\u044B: "Materials",
+  \u0414\u0440\u0443\u0433\u043E\u0435: "Other"
+};
+var ResourceTypeIcon = ({ type }) => {
+  if (type === "\u041B\u044E\u0434\u0438") {
+    return /* @__PURE__ */ jsxs12("svg", { className: "gantt-resourceTimeline-resourceTypeIcon gantt-resourceTimeline-resourceTypeIconPeople", width: "16", height: "16", viewBox: "0 0 24 24", "aria-hidden": "true", children: [
+      /* @__PURE__ */ jsx15("path", { d: "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" }),
+      /* @__PURE__ */ jsx15("circle", { cx: "9", cy: "7", r: "4" }),
+      /* @__PURE__ */ jsx15("path", { d: "M22 21v-2a4 4 0 0 0-3-3.87" }),
+      /* @__PURE__ */ jsx15("path", { d: "M16 3.13a4 4 0 0 1 0 7.75" })
+    ] });
+  }
+  if (type === "\u041E\u0431\u043E\u0440\u0443\u0434\u043E\u0432\u0430\u043D\u0438\u0435") {
+    return /* @__PURE__ */ jsxs12("svg", { className: "gantt-resourceTimeline-resourceTypeIcon gantt-resourceTimeline-resourceTypeIconEquipment", width: "16", height: "16", viewBox: "0 0 24 24", "aria-hidden": "true", children: [
+      /* @__PURE__ */ jsx15("path", { d: "m15 12-9.373 9.373a1 1 0 0 1-3.001-3L12 9" }),
+      /* @__PURE__ */ jsx15("path", { d: "m18 15 4-4" }),
+      /* @__PURE__ */ jsx15("path", { d: "m21.5 11.5-1.914-1.914A2 2 0 0 1 19 8.172v-.344a2 2 0 0 0-.586-1.414l-1.657-1.657A6 6 0 0 0 12.516 3H9l1.243 1.243A6 6 0 0 1 12 8.485V10l2 2h1.172a2 2 0 0 1 1.414.586L18.5 14.5" })
+    ] });
+  }
+  if (type === "\u041C\u0430\u0442\u0435\u0440\u0438\u0430\u043B\u044B") {
+    return /* @__PURE__ */ jsxs12("svg", { className: "gantt-resourceTimeline-resourceTypeIcon gantt-resourceTimeline-resourceTypeIconMaterials", width: "16", height: "16", viewBox: "0 0 24 24", "aria-hidden": "true", children: [
+      /* @__PURE__ */ jsx15("path", { d: "M10 22v-8" }),
+      /* @__PURE__ */ jsx15("path", { d: "M2.336 8.89 10 14l11.715-7.029" }),
+      /* @__PURE__ */ jsx15("path", { d: "M22 14a2 2 0 0 1-.971 1.715l-10 6a2 2 0 0 1-2.138-.05l-6-4A2 2 0 0 1 2 16v-6a2 2 0 0 1 .971-1.715l10-6a2 2 0 0 1 2.138.05l6 4A2 2 0 0 1 22 8z" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs12("svg", { className: "gantt-resourceTimeline-resourceTypeIcon gantt-resourceTimeline-resourceTypeIconOther", width: "16", height: "16", viewBox: "0 0 24 24", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx15("circle", { cx: "12", cy: "12", r: "9" }),
+    /* @__PURE__ */ jsx15("path", { d: "M12 8v4" }),
+    /* @__PURE__ */ jsx15("path", { d: "M12 16h.01" })
+  ] });
+};
 var ResourceHeader = ({
   resource,
   resourceId,
+  rowIndex,
   conflictCount,
+  workedDays,
+  assignmentCount,
   height,
   paddingBottom,
-  menuCommands
+  menuCommands,
+  onResourceChange,
+  onConflictBadgeClick
 }) => {
   const [menuOpen, setMenuOpen] = useState8(false);
+  const [typeMenuOpen, setTypeMenuOpen] = useState8(false);
+  const [scopeMenuOpen, setScopeMenuOpen] = useState8(false);
+  const [draftName, setDraftName] = useState8(resource.name);
   const visibleCommands = useMemo9(
     () => menuCommands.filter((command) => command.isVisible?.(resource) ?? true),
     [menuCommands, resource]
   );
   const hasMenu = visibleCommands.length > 0;
+  const type = resource.type ?? "\u0414\u0440\u0443\u0433\u043E\u0435";
+  const scope = resource.scope ?? "Project";
+  const scopeLabel = RESOURCE_SCOPE_LABELS[scope] ?? scope;
+  useEffect8(() => {
+    setDraftName(resource.name);
+  }, [resource.name]);
+  const applyResourcePatch = useCallback7((patch) => {
+    onResourceChange?.({ ...resource, ...patch });
+  }, [onResourceChange, resource]);
+  const handleNameCommit = useCallback7(() => {
+    const nextName = draftName.trim();
+    if (!nextName) {
+      setDraftName(resource.name);
+      return;
+    }
+    if (nextName !== resource.name) {
+      applyResourcePatch({ name: nextName });
+    }
+  }, [applyResourcePatch, draftName, resource.name]);
+  const handleNameKeyDown = useCallback7((event) => {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      event.currentTarget.blur();
+    } else if (event.key === "Escape") {
+      setDraftName(resource.name);
+      event.currentTarget.blur();
+    }
+  }, [resource.name]);
   const handleCommandClick = (command, event) => {
     event.stopPropagation();
     if (command.closeOnSelect !== false) {
@@ -7751,44 +7828,154 @@ var ResourceHeader = ({
         paddingBottom: `${paddingBottom}px`
       },
       children: [
-        /* @__PURE__ */ jsx15("span", { className: "gantt-resourceTimeline-resourceName", children: resource.name }),
-        conflictCount > 0 && /* @__PURE__ */ jsx15(
-          "span",
-          {
-            className: "gantt-resourceTimeline-conflictBadge",
-            "aria-label": formatOverlapCount(conflictCount),
-            title: formatOverlapCount(conflictCount),
-            children: conflictCount
-          }
-        ),
-        hasMenu && /* @__PURE__ */ jsxs12(Popover, { open: menuOpen, onOpenChange: setMenuOpen, children: [
+        /* @__PURE__ */ jsx15("span", { className: "gantt-resourceTimeline-resourceNumber", children: rowIndex + 1 }),
+        /* @__PURE__ */ jsxs12("span", { className: "gantt-resourceTimeline-resourceName", children: [
+          /* @__PURE__ */ jsxs12(Popover, { open: typeMenuOpen, onOpenChange: setTypeMenuOpen, children: [
+            /* @__PURE__ */ jsx15(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx15(
+              "button",
+              {
+                type: "button",
+                className: `gantt-resourceTimeline-resourceTypeIconButton gantt-resourceTimeline-resourceTypeIconButton${RESOURCE_TYPE_CLASS_NAMES[type] ?? "Other"}`,
+                disabled: !onResourceChange,
+                "aria-label": `\u0422\u0438\u043F \u0440\u0435\u0441\u0443\u0440\u0441\u0430 ${resource.name}: ${type}`,
+                title: type,
+                onClick: (event) => {
+                  event.stopPropagation();
+                  setTypeMenuOpen((open) => !open);
+                },
+                children: /* @__PURE__ */ jsx15(ResourceTypeIcon, { type })
+              }
+            ) }),
+            /* @__PURE__ */ jsx15(PopoverContent, { className: "gantt-resourceTimeline-resourceOptionMenu", portal: true, align: "start", children: RESOURCE_TYPE_OPTIONS.map((option) => /* @__PURE__ */ jsxs12(
+              "button",
+              {
+                type: "button",
+                className: `gantt-resourceTimeline-resourceOption${type === option ? " gantt-resourceTimeline-resourceOptionActive" : ""}`,
+                onClick: (event) => {
+                  event.stopPropagation();
+                  setTypeMenuOpen(false);
+                  applyResourcePatch({ type: option });
+                },
+                children: [
+                  /* @__PURE__ */ jsx15("span", { className: "gantt-resourceTimeline-resourceOptionIcon", children: /* @__PURE__ */ jsx15(ResourceTypeIcon, { type: option }) }),
+                  option
+                ]
+              },
+              option
+            )) })
+          ] }),
+          /* @__PURE__ */ jsx15(
+            "textarea",
+            {
+              className: "gantt-resourceTimeline-resourceNameInput",
+              value: draftName,
+              disabled: !onResourceChange,
+              "aria-label": `\u041D\u0430\u0437\u0432\u0430\u043D\u0438\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u0430 ${resource.name}`,
+              rows: 2,
+              onChange: (event) => setDraftName(event.target.value),
+              onBlur: handleNameCommit,
+              onKeyDown: handleNameKeyDown,
+              onClick: (event) => event.stopPropagation()
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs12(Popover, { open: scopeMenuOpen, onOpenChange: setScopeMenuOpen, children: [
           /* @__PURE__ */ jsx15(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx15(
             "button",
             {
-              className: "gantt-resourceTimeline-resourceMenuButton",
               type: "button",
-              "aria-label": "\u0414\u0435\u0439\u0441\u0442\u0432\u0438\u044F \u0440\u0435\u0441\u0443\u0440\u0441\u0430",
+              className: `gantt-resourceTimeline-resourceScopeChip gantt-resourceTimeline-resourceScope${scope === "Shared" ? "Shared" : "Project"}`,
+              disabled: !onResourceChange,
+              "aria-label": `\u0414\u043E\u0441\u0442\u0443\u043F\u043D\u043E\u0441\u0442\u044C \u0440\u0435\u0441\u0443\u0440\u0441\u0430 ${resource.name}`,
               onClick: (event) => {
                 event.stopPropagation();
-                setMenuOpen((open) => !open);
+                setScopeMenuOpen((open) => !open);
               },
-              children: /* @__PURE__ */ jsx15("span", { "aria-hidden": "true", children: "\u22EE" })
+              children: /* @__PURE__ */ jsx15("span", { children: scopeLabel })
             }
           ) }),
-          /* @__PURE__ */ jsx15(PopoverContent, { className: "gantt-resourceTimeline-resourceMenu", portal: true, align: "end", children: visibleCommands.map((command) => /* @__PURE__ */ jsxs12(
+          /* @__PURE__ */ jsx15(PopoverContent, { className: "gantt-resourceTimeline-resourceOptionMenu", portal: true, align: "start", children: RESOURCE_SCOPE_OPTIONS.map((option) => /* @__PURE__ */ jsxs12(
             "button",
             {
               type: "button",
-              className: `gantt-resourceTimeline-resourceMenuItem${command.danger ? " gantt-resourceTimeline-resourceMenuItemDanger" : ""}`,
-              disabled: command.isDisabled?.(resource) ?? false,
-              onClick: (event) => handleCommandClick(command, event),
+              className: `gantt-resourceTimeline-resourceOption${scope === option ? " gantt-resourceTimeline-resourceOptionActive" : ""}`,
+              onClick: (event) => {
+                event.stopPropagation();
+                setScopeMenuOpen(false);
+                applyResourcePatch({ scope: option });
+              },
               children: [
-                command.icon,
-                command.label
+                /* @__PURE__ */ jsx15("span", { className: `gantt-resourceTimeline-resourceOptionScopeDot gantt-resourceTimeline-resourceScope${option}` }),
+                RESOURCE_SCOPE_LABELS[option] ?? option
               ]
             },
-            command.id
+            option
           )) })
+        ] }),
+        /* @__PURE__ */ jsxs12(
+          "span",
+          {
+            className: "gantt-resourceTimeline-resourceAssignments",
+            "aria-label": `\u041D\u0430\u0437\u043D\u0430\u0447\u0435\u043D\u0438\u044F \u0440\u0435\u0441\u0443\u0440\u0441\u0430 ${resource.name}: ${assignmentCount}, ${workedDays} \u0434\u043D.`,
+            children: [
+              /* @__PURE__ */ jsxs12("span", { className: "gantt-resourceTimeline-resourceWorkedDays", children: [
+                workedDays,
+                " \u0434\u043D."
+              ] }),
+              /* @__PURE__ */ jsxs12("span", { className: "gantt-resourceTimeline-resourceAssignmentCount", children: [
+                /* @__PURE__ */ jsxs12("svg", { className: "gantt-resourceTimeline-resourceAssignmentIcon", width: "14", height: "14", viewBox: "0 0 24 24", "aria-hidden": "true", children: [
+                  /* @__PURE__ */ jsx15("rect", { width: "15", height: "5", x: "4", y: "5", rx: "2" }),
+                  /* @__PURE__ */ jsx15("rect", { width: "10", height: "5", x: "4", y: "14", rx: "2" })
+                ] }),
+                /* @__PURE__ */ jsx15("span", { children: assignmentCount })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs12("span", { className: "gantt-resourceTimeline-resourceActions", children: [
+          conflictCount > 0 && /* @__PURE__ */ jsx15(
+            "button",
+            {
+              type: "button",
+              className: "gantt-resourceTimeline-conflictBadge",
+              "aria-label": formatOverlapCount(conflictCount),
+              title: formatOverlapCount(conflictCount),
+              onClick: (event) => {
+                event.stopPropagation();
+                onConflictBadgeClick?.(resourceId);
+              },
+              children: conflictCount
+            }
+          ),
+          hasMenu && /* @__PURE__ */ jsxs12(Popover, { open: menuOpen, onOpenChange: setMenuOpen, children: [
+            /* @__PURE__ */ jsx15(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx15(
+              "button",
+              {
+                className: "gantt-resourceTimeline-resourceMenuButton",
+                type: "button",
+                "aria-label": "\u0414\u0435\u0439\u0441\u0442\u0432\u0438\u044F \u0440\u0435\u0441\u0443\u0440\u0441\u0430",
+                onClick: (event) => {
+                  event.stopPropagation();
+                  setMenuOpen((open) => !open);
+                },
+                children: /* @__PURE__ */ jsx15("span", { "aria-hidden": "true", children: "\u22EE" })
+              }
+            ) }),
+            /* @__PURE__ */ jsx15(PopoverContent, { className: "gantt-resourceTimeline-resourceMenu", portal: true, align: "end", children: visibleCommands.map((command) => /* @__PURE__ */ jsxs12(
+              "button",
+              {
+                type: "button",
+                className: `gantt-resourceTimeline-resourceMenuItem${command.danger ? " gantt-resourceTimeline-resourceMenuItemDanger" : ""}`,
+                disabled: command.isDisabled?.(resource) ?? false,
+                onClick: (event) => handleCommandClick(command, event),
+                children: [
+                  command.icon,
+                  command.label
+                ]
+              },
+              command.id
+            )) })
+          ] })
         ] })
       ]
     }
@@ -7827,7 +8014,7 @@ var NewResourceRow = ({ height, onConfirm, onCancel }) => {
       handleConfirm();
     }
   };
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsxs12(
     "div",
     {
       className: "gantt-resourceTimeline-resourceHeader gantt-resourceTimeline-resourceHeaderNew",
@@ -7835,18 +8022,21 @@ var NewResourceRow = ({ height, onConfirm, onCancel }) => {
         height: `${height}px`,
         paddingBottom: `${DEFAULT_RESOURCE_ROW_GAP}px`
       },
-      children: /* @__PURE__ */ jsx15(
-        Input,
-        {
-          ref: inputRef,
-          value: nameValue,
-          onChange: (event) => setNameValue(event.target.value),
-          onKeyDown: handleKeyDown,
-          onBlur: handleBlur,
-          placeholder: "\u041D\u0430\u0437\u0432\u0430\u043D\u0438\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u0430",
-          className: "gantt-resourceTimeline-resourceInput"
-        }
-      )
+      children: [
+        /* @__PURE__ */ jsx15("span", { className: "gantt-resourceTimeline-resourceNumber", children: "+" }),
+        /* @__PURE__ */ jsx15(
+          Input,
+          {
+            ref: inputRef,
+            value: nameValue,
+            onChange: (event) => setNameValue(event.target.value),
+            onKeyDown: handleKeyDown,
+            onBlur: handleBlur,
+            placeholder: "\u041D\u0430\u0437\u0432\u0430\u043D\u0438\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u0430",
+            className: "gantt-resourceTimeline-resourceInput"
+          }
+        )
+      ]
     }
   );
 };
@@ -7867,7 +8057,10 @@ function ResourceTimelineChart({
   renderItem,
   getItemClassName,
   onResourceItemClick,
+  onResourceItemMenuClick,
+  activeResourceItemId,
   onResourceItemMove,
+  onResourceChange,
   onAddResource,
   enableAddResource = true,
   resourceMenuCommands = []
@@ -7875,7 +8068,10 @@ function ResourceTimelineChart({
   const scrollContainerRef = useRef8(null);
   const gridRef = useRef8(null);
   const panStateRef = useRef8(null);
+  const conflictNavigationIndexRef = useRef8(/* @__PURE__ */ new Map());
+  const conflictHighlightTimeoutRef = useRef8(null);
   const [isCreatingResource, setIsCreatingResource] = useState8(false);
+  const [activeConflictItemId, setActiveConflictItemId] = useState8(null);
   const validItems = useMemo9(() => collectValidItems(resources), [resources]);
   const dateRange = useMemo9(() => getMultiMonthDays(validItems), [validItems]);
   const monthStart = useMemo9(() => {
@@ -7887,6 +8083,26 @@ function ResourceTimelineChart({
     [customDays, isWeekend3]
   );
   const gridWidth = useMemo9(() => Math.round(dateRange.length * dayWidth), [dateRange.length, dayWidth]);
+  const effectiveRowHeaderWidth = Math.max(rowHeaderWidth, DEFAULT_ROW_HEADER_WIDTH);
+  const workedDaysByResourceId = useMemo9(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const resource of resources) {
+      const workedDays = resource.items.reduce((sum, item) => {
+        try {
+          const startDate = parseUTCDate(item.startDate);
+          const endDate = parseUTCDate(item.endDate);
+          if (!isValidDate(startDate) || !isValidDate(endDate)) {
+            return sum;
+          }
+          return sum + getDurationValue(startDate, endDate, businessDays, weekendPredicate);
+        } catch {
+          return sum;
+        }
+      }, 0);
+      map.set(resource.id, workedDays);
+    }
+    return map;
+  }, [businessDays, resources, weekendPredicate]);
   const layout = useMemo9(
     () => layoutResourceTimelineItems(resources, {
       monthStart,
@@ -7910,6 +8126,23 @@ function ResourceTimelineChart({
     }
     return map;
   }, [layout.items]);
+  const conflictItemsByResourceId = useMemo9(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const item of layout.items) {
+      if (item.conflictRanges.length === 0) {
+        continue;
+      }
+      const next = map.get(item.resourceId) ?? [];
+      next.push(item);
+      map.set(item.resourceId, next);
+    }
+    for (const items of map.values()) {
+      items.sort(
+        (left, right) => left.top - right.top || left.left - right.left || left.itemId.localeCompare(right.itemId)
+      );
+    }
+    return map;
+  }, [layout.items]);
   const canAddResource = enableAddResource && Boolean(onAddResource);
   const resourceAddRowHeight = laneHeight + DEFAULT_RESOURCE_ROW_GAP;
   const displayTotalHeight = layout.totalHeight + (canAddResource ? resourceAddRowHeight : 0);
@@ -7917,11 +8150,38 @@ function ResourceTimelineChart({
     onAddResource?.({
       id: crypto.randomUUID(),
       name,
+      type: "\u0414\u0440\u0443\u0433\u043E\u0435",
+      scope: "Project",
       items: []
     });
     setIsCreatingResource(false);
   }, [onAddResource]);
   const handleCancelNewResource = useCallback7(() => setIsCreatingResource(false), []);
+  const handleConflictBadgeClick = useCallback7((resourceId) => {
+    const conflictItems = conflictItemsByResourceId.get(resourceId) ?? [];
+    if (conflictItems.length === 0) {
+      return;
+    }
+    const currentIndex = conflictNavigationIndexRef.current.get(resourceId) ?? 0;
+    const target = conflictItems[currentIndex % conflictItems.length];
+    conflictNavigationIndexRef.current.set(resourceId, (currentIndex + 1) % conflictItems.length);
+    const container = scrollContainerRef.current;
+    if (container) {
+      container.scrollTo({
+        left: Math.max(0, Math.round(target.left - dayWidth * 2)),
+        top: Math.max(0, Math.round(target.top - laneHeight)),
+        behavior: "smooth"
+      });
+    }
+    setActiveConflictItemId(target.itemId);
+    if (conflictHighlightTimeoutRef.current) {
+      window.clearTimeout(conflictHighlightTimeoutRef.current);
+    }
+    conflictHighlightTimeoutRef.current = window.setTimeout(() => {
+      setActiveConflictItemId((current) => current === target.itemId ? null : current);
+      conflictHighlightTimeoutRef.current = null;
+    }, 1600);
+  }, [conflictItemsByResourceId, dayWidth, laneHeight]);
   const { preview, startDrag } = useResourceItemDrag({
     dayWidth,
     monthStart,
@@ -7990,6 +8250,13 @@ function ResourceTimelineChart({
       window.removeEventListener("mouseup", handlePanEnd);
     };
   }, [allowVerticalPan]);
+  useEffect8(() => {
+    return () => {
+      if (conflictHighlightTimeoutRef.current) {
+        window.clearTimeout(conflictHighlightTimeoutRef.current);
+      }
+    };
+  }, []);
   return /* @__PURE__ */ jsx15("div", { className: "gantt-container gantt-resourceTimeline", children: /* @__PURE__ */ jsx15(
     "div",
     {
@@ -8007,24 +8274,36 @@ function ResourceTimelineChart({
           "div",
           {
             className: "gantt-resourceTimeline-resourceColumn",
-            style: { width: `${rowHeaderWidth}px`, minWidth: `${rowHeaderWidth}px` },
+            style: { width: `${effectiveRowHeaderWidth}px`, minWidth: `${effectiveRowHeaderWidth}px` },
             children: [
-              /* @__PURE__ */ jsx15(
+              /* @__PURE__ */ jsxs12(
                 "div",
                 {
                   className: "gantt-resourceTimeline-corner",
-                  style: { height: `${headerHeight}px` }
+                  style: { height: `${headerHeight + 0.5}px` },
+                  children: [
+                    /* @__PURE__ */ jsx15("span", { className: "gantt-resourceTimeline-resourceHeaderCell gantt-resourceTimeline-resourceHeaderNumber", children: "#" }),
+                    /* @__PURE__ */ jsx15("span", { className: "gantt-resourceTimeline-resourceHeaderCell gantt-resourceTimeline-resourceHeaderName", children: "\u041D\u0430\u0437\u0432\u0430\u043D\u0438\u0435" }),
+                    /* @__PURE__ */ jsx15("span", { className: "gantt-resourceTimeline-resourceHeaderCell", "aria-label": "\u0414\u043E\u0441\u0442\u0443\u043F\u043D\u043E\u0441\u0442\u044C" }),
+                    /* @__PURE__ */ jsx15("span", { className: "gantt-resourceTimeline-resourceHeaderCell", children: "\u041D\u0430\u0437\u043D\u0430\u0447\u0435\u043D\u0438\u044F" }),
+                    /* @__PURE__ */ jsx15("span", { className: "gantt-resourceTimeline-resourceHeaderCell gantt-resourceTimeline-resourceHeaderActions", "aria-label": "\u0414\u0435\u0439\u0441\u0442\u0432\u0438\u044F" })
+                  ]
                 }
               ),
-              layout.rows.map((row) => /* @__PURE__ */ jsx15(
+              layout.rows.map((row, rowIndex) => /* @__PURE__ */ jsx15(
                 ResourceHeader,
                 {
                   resource: row.resource,
                   resourceId: row.resourceId,
+                  rowIndex,
                   conflictCount: row.conflictCount,
+                  workedDays: workedDaysByResourceId.get(row.resourceId) ?? 0,
+                  assignmentCount: row.resource.items.length,
                   height: row.resourceRowHeight + DEFAULT_RESOURCE_ROW_GAP,
                   paddingBottom: DEFAULT_RESOURCE_ROW_GAP,
-                  menuCommands: resourceMenuCommands
+                  menuCommands: resourceMenuCommands,
+                  onResourceChange,
+                  onConflictBadgeClick: handleConflictBadgeClick
                 },
                 row.resourceId
               )),
@@ -8109,9 +8388,14 @@ function ResourceTimelineChart({
                       (resourceItems) => resourceItems.map((layoutItem) => {
                         const customClassName = getItemClassName?.(layoutItem.item);
                         const isDraggingItem = preview?.itemId === layoutItem.itemId;
+                        const hasItemMenu = Boolean(onResourceItemMenuClick);
+                        const isActiveItem = activeResourceItemId === layoutItem.itemId;
                         const className = [
                           "gantt-resourceTimeline-item",
+                          hasItemMenu && "gantt-resourceTimeline-itemHasMenu",
+                          isActiveItem && "gantt-resourceTimeline-itemActive",
                           isDraggingItem && "gantt-resourceTimeline-itemDragging",
+                          activeConflictItemId === layoutItem.itemId && "gantt-resourceTimeline-itemConflictActive",
                           (readonly || layoutItem.item.locked) && "gantt-resourceTimeline-itemDisabled",
                           customClassName
                         ].filter(Boolean).join(" ");
@@ -8210,6 +8494,22 @@ function ResourceTimelineChart({
                                 },
                                 `conflict-overlay-${index}`
                               )),
+                              hasItemMenu && /* @__PURE__ */ jsx15(
+                                "button",
+                                {
+                                  type: "button",
+                                  className: "gantt-resourceTimeline-itemMenuButton",
+                                  "aria-label": "\u0414\u0435\u0439\u0441\u0442\u0432\u0438\u044F \u043D\u0430\u0437\u043D\u0430\u0447\u0435\u043D\u0438\u044F",
+                                  onMouseDown: (event) => {
+                                    event.stopPropagation();
+                                  },
+                                  onClick: (event) => {
+                                    event.stopPropagation();
+                                    onResourceItemMenuClick?.(layoutItem.item);
+                                  },
+                                  children: /* @__PURE__ */ jsx15("span", { "aria-hidden": "true", children: "\u22EE" })
+                                }
+                              ),
                               /* @__PURE__ */ jsx15("div", { className: "gantt-resourceTimeline-itemInner", children: renderItem ? renderItem(layoutItem.item, renderContext) : /* @__PURE__ */ jsxs12("div", { className: "gantt-resourceTimeline-defaultItemContent", children: [
                                 /* @__PURE__ */ jsxs12("div", { className: "gantt-resourceTimeline-defaultItemMain", children: [
                                   /* @__PURE__ */ jsx15(