gantt-lib 0.82.0 → 0.83.0

package/dist/index.mjs

@@ -7023,6 +7023,7 @@ var TaskList = ({
     [resolvedColumns]
   );
   const effectiveTaskListWidth = Math.max(taskListWidth, MIN_TASK_LIST_WIDTH, resolvedColumnWidthTotal);
+  const tableHeaderHeight = headerHeight + 1;
   return /* @__PURE__ */ jsx14(
     "div",
     {
@@ -7030,7 +7031,7 @@ var TaskList = ({
       className: `gantt-tl-overlay${show ? "" : " gantt-tl-hidden"}${hasRightShadow ? " gantt-tl-overlay-shadowed" : ""}`,
       style: { "--tasklist-width": `${effectiveTaskListWidth}px` },
       children: /* @__PURE__ */ jsxs11("div", { className: "gantt-tl-table", children: [
-        /* @__PURE__ */ jsx14("div", { className: "gantt-tl-header", style: { height: `${headerHeight + 0.5}px` }, children: resolvedColumns.map((col) => {
+        /* @__PURE__ */ jsx14("div", { className: "gantt-tl-header", style: { height: `${tableHeaderHeight}px` }, children: resolvedColumns.map((col) => {
           if (col.id === "dependencies") {
             return /* @__PURE__ */ jsxs11(
               "div",
@@ -7214,7 +7215,7 @@ var TaskList = ({
 };
 
 // src/components/ResourceTimelineChart/ResourceTimelineChart.tsx
-import { useCallback as useCallback7, useEffect as useEffect8, useMemo as useMemo9, useRef as useRef8, useState as useState8 } from "react";
+import React12, { useCallback as useCallback7, useEffect as useEffect8, useMemo as useMemo9, useRef as useRef8, useState as useState8 } from "react";
 
 // src/utils/resourceTimelineLayout.ts
 var isInvalidDate = (date) => Number.isNaN(date.getTime());
@@ -7634,6 +7635,7 @@ var DEFAULT_HEADER_HEIGHT = 40;
 var DEFAULT_LANE_HEIGHT = 40;
 var DEFAULT_ROW_HEADER_WIDTH = 420;
 var DEFAULT_RESOURCE_ROW_GAP = 8;
+var DEFAULT_RESOURCE_GROUP_HEIGHT = 28;
 var ITEM_OUTER_VERTICAL_INSET = 2;
 var ITEM_INNER_VERTICAL_INSET = 1;
 var ITEM_START_HORIZONTAL_INSET = 2;
@@ -7732,6 +7734,30 @@ var RESOURCE_TYPE_CLASS_NAMES = {
   \u041C\u0430\u0442\u0435\u0440\u0438\u0430\u043B\u044B: "Materials",
   \u0414\u0440\u0443\u0433\u043E\u0435: "Other"
 };
+var RESOURCE_TYPE_ORDER = {
+  \u041B\u044E\u0434\u0438: 0,
+  \u041E\u0431\u043E\u0440\u0443\u0434\u043E\u0432\u0430\u043D\u0438\u0435: 1,
+  \u041C\u0430\u0442\u0435\u0440\u0438\u0430\u043B\u044B: 2,
+  \u0414\u0440\u0443\u0433\u043E\u0435: 3
+};
+var RESOURCE_SCOPE_ORDER = {
+  Shared: 0,
+  Project: 1
+};
+var getResourceType = (resource) => resource.type ?? "\u0414\u0440\u0443\u0433\u043E\u0435";
+var getResourceScopeOrder = (resource) => RESOURCE_SCOPE_ORDER[resource.scope ?? "Project"] ?? 99;
+var orderResourcesByType = (resources) => {
+  return resources.map((resource, index) => ({ resource, index })).sort((left, right) => {
+    const leftType = getResourceType(left.resource);
+    const rightType = getResourceType(right.resource);
+    const typeDiff = (RESOURCE_TYPE_ORDER[leftType] ?? 99) - (RESOURCE_TYPE_ORDER[rightType] ?? 99);
+    if (typeDiff !== 0) {
+      return typeDiff;
+    }
+    const scopeDiff = getResourceScopeOrder(left.resource) - getResourceScopeOrder(right.resource);
+    return scopeDiff !== 0 ? scopeDiff : left.index - right.index;
+  }).map(({ resource }) => resource);
+};
 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: [
@@ -7772,12 +7798,16 @@ var ResourceHeader = ({
   paddingBottom,
   menuCommands,
   onResourceChange,
+  onResourceNameClick,
   onConflictBadgeClick
 }) => {
   const [menuOpen, setMenuOpen] = useState8(false);
   const [typeMenuOpen, setTypeMenuOpen] = useState8(false);
   const [scopeMenuOpen, setScopeMenuOpen] = useState8(false);
-  const [draftName, setDraftName] = useState8(resource.name);
+  const [editingName, setEditingName] = useState8(false);
+  const [nameValue, setNameValue] = useState8(resource.name);
+  const nameInputRef = useRef8(null);
+  const nameConfirmedRef = useRef8(false);
   const visibleCommands = useMemo9(
     () => menuCommands.filter((command) => command.isVisible?.(resource) ?? true),
     [menuCommands, resource]
@@ -7786,31 +7816,20 @@ var ResourceHeader = ({
   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 });
+  useEffect8(() => {
+    if (!editingName) {
+      setNameValue(resource.name);
     }
-  }, [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();
+  }, [editingName, resource.name]);
+  useEffect8(() => {
+    if (editingName && nameInputRef.current) {
+      nameInputRef.current.focus();
+      nameInputRef.current.select();
     }
-  }, [resource.name]);
+  }, [editingName]);
   const handleCommandClick = (command, event) => {
     event.stopPropagation();
     if (command.closeOnSelect !== false) {
@@ -7818,6 +7837,42 @@ var ResourceHeader = ({
     }
     command.onSelect(resource);
   };
+  const handleNameDoubleClick = useCallback7((event) => {
+    if (!onResourceChange) {
+      return;
+    }
+    event.stopPropagation();
+    nameConfirmedRef.current = false;
+    setNameValue(resource.name);
+    setEditingName(true);
+  }, [onResourceChange, resource.name]);
+  const handleNameSave = useCallback7(() => {
+    if (nameConfirmedRef.current) {
+      nameConfirmedRef.current = false;
+      return;
+    }
+    const nextName = nameValue.trim();
+    if (nextName && nextName !== resource.name) {
+      applyResourcePatch({ name: nextName });
+    }
+    setEditingName(false);
+  }, [applyResourcePatch, nameValue, resource.name]);
+  const handleNameCancel = useCallback7(() => {
+    setNameValue(resource.name);
+    setEditingName(false);
+  }, [resource.name]);
+  const handleNameKeyDown = useCallback7((event) => {
+    if (event.key === "Enter") {
+      nameConfirmedRef.current = true;
+      const nextName = nameValue.trim();
+      if (nextName && nextName !== resource.name) {
+        applyResourcePatch({ name: nextName });
+      }
+      setEditingName(false);
+    } else if (event.key === "Escape") {
+      handleNameCancel();
+    }
+  }, [applyResourcePatch, handleNameCancel, nameValue, resource.name]);
   return /* @__PURE__ */ jsxs12(
     "div",
     {
@@ -7864,18 +7919,31 @@ var ResourceHeader = ({
               option
             )) })
           ] }),
-          /* @__PURE__ */ jsx15(
-            "textarea",
+          editingName ? /* @__PURE__ */ jsx15(
+            Input,
             {
-              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,
+              ref: nameInputRef,
+              value: nameValue,
+              onChange: (event) => setNameValue(event.target.value),
+              onBlur: handleNameSave,
               onKeyDown: handleNameKeyDown,
-              onClick: (event) => event.stopPropagation()
+              onClick: (event) => event.stopPropagation(),
+              "aria-label": `\u041D\u043E\u0432\u043E\u0435 \u043D\u0430\u0437\u0432\u0430\u043D\u0438\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u0430 ${resource.name}`,
+              className: "gantt-tl-name-input gantt-resourceTimeline-resourceNameInput"
+            }
+          ) : /* @__PURE__ */ jsx15(
+            "button",
+            {
+              type: "button",
+              className: "gantt-resourceTimeline-resourceNameButton",
+              "aria-label": `\u041D\u0430\u0437\u0432\u0430\u043D\u0438\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u0430 ${resource.name}`,
+              title: resource.name,
+              onClick: (event) => {
+                event.stopPropagation();
+                onResourceNameClick?.(resourceId);
+              },
+              onDoubleClick: handleNameDoubleClick,
+              children: resource.name
             }
           )
         ] }),
@@ -7919,15 +7987,15 @@ var ResourceHeader = ({
             "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__ */ jsx15("span", { className: "gantt-resourceTimeline-resourceMetricValue", children: workedDays > 0 ? workedDays : "-" }),
+                /* @__PURE__ */ jsx15("span", { className: "gantt-resourceTimeline-resourceMetricLabel", children: workedDays > 0 ? "\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("span", { className: "gantt-resourceTimeline-resourceMetricValue", children: assignmentCount > 0 ? assignmentCount : "" }),
+                assignmentCount > 0 && /* @__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 })
+                ] })
               ] })
             ]
           }
@@ -8052,6 +8120,7 @@ function ResourceTimelineChart({
   customDays,
   isWeekend: isWeekend3,
   businessDays = true,
+  resourceGrouping = false,
   readonly,
   disableResourceReassignment,
   renderItem,
@@ -8069,9 +8138,12 @@ function ResourceTimelineChart({
   const gridRef = useRef8(null);
   const panStateRef = useRef8(null);
   const conflictNavigationIndexRef = useRef8(/* @__PURE__ */ new Map());
+  const resourceNavigationIndexRef = useRef8(/* @__PURE__ */ new Map());
   const conflictHighlightTimeoutRef = useRef8(null);
   const [isCreatingResource, setIsCreatingResource] = useState8(false);
+  const [creatingResourceGroupType, setCreatingResourceGroupType] = useState8(null);
   const [activeConflictItemId, setActiveConflictItemId] = useState8(null);
+  const [resourceColumnHasRightShadow, setResourceColumnHasRightShadow] = useState8(false);
   const validItems = useMemo9(() => collectValidItems(resources), [resources]);
   const dateRange = useMemo9(() => getMultiMonthDays(validItems), [validItems]);
   const monthStart = useMemo9(() => {
@@ -8084,6 +8156,10 @@ function ResourceTimelineChart({
   );
   const gridWidth = useMemo9(() => Math.round(dateRange.length * dayWidth), [dateRange.length, dayWidth]);
   const effectiveRowHeaderWidth = Math.max(rowHeaderWidth, DEFAULT_ROW_HEADER_WIDTH);
+  const orderedResources = useMemo9(
+    () => resourceGrouping === "type" ? orderResourcesByType(resources) : resources,
+    [resourceGrouping, resources]
+  );
   const workedDaysByResourceId = useMemo9(() => {
     const map = /* @__PURE__ */ new Map();
     for (const resource of resources) {
@@ -8104,14 +8180,87 @@ function ResourceTimelineChart({
     return map;
   }, [businessDays, resources, weekendPredicate]);
   const layout = useMemo9(
-    () => layoutResourceTimelineItems(resources, {
+    () => layoutResourceTimelineItems(orderedResources, {
       monthStart,
       dayWidth,
       laneHeight,
       rowGap: DEFAULT_RESOURCE_ROW_GAP
     }),
-    [resources, monthStart, dayWidth, laneHeight]
+    [orderedResources, monthStart, dayWidth, laneHeight]
   );
+  const canAddResource = enableAddResource && Boolean(onAddResource);
+  const resourceAddRowHeight = laneHeight + DEFAULT_RESOURCE_ROW_GAP;
+  const displayLayout = useMemo9(() => {
+    if (resourceGrouping !== "type") {
+      return {
+        rows: layout.rows,
+        items: layout.items,
+        groupHeaders: [],
+        groupAddRows: [],
+        totalHeight: layout.totalHeight
+      };
+    }
+    const countsByType = /* @__PURE__ */ new Map();
+    for (const row of layout.rows) {
+      const type = getResourceType(row.resource);
+      countsByType.set(type, (countsByType.get(type) ?? 0) + 1);
+    }
+    let offset = 0;
+    let previousType = null;
+    const rowTopOffsets = /* @__PURE__ */ new Map();
+    const groupHeaders = [];
+    const groupAddRows = [];
+    const rows = layout.rows.map((row) => {
+      const type = getResourceType(row.resource);
+      if (type !== previousType) {
+        if (previousType !== null && creatingResourceGroupType === previousType) {
+          groupAddRows.push({
+            key: previousType,
+            top: row.resourceRowTop + offset,
+            height: resourceAddRowHeight
+          });
+          offset += resourceAddRowHeight;
+        }
+        groupHeaders.push({
+          key: type,
+          label: type,
+          count: countsByType.get(type) ?? 0,
+          top: row.resourceRowTop + offset,
+          height: DEFAULT_RESOURCE_GROUP_HEIGHT
+        });
+        offset += DEFAULT_RESOURCE_GROUP_HEIGHT;
+        previousType = type;
+      }
+      rowTopOffsets.set(row.resourceId, offset);
+      return {
+        ...row,
+        resourceRowTop: row.resourceRowTop + offset
+      };
+    });
+    if (previousType !== null && creatingResourceGroupType === previousType) {
+      groupAddRows.push({
+        key: previousType,
+        top: layout.totalHeight + offset,
+        height: resourceAddRowHeight
+      });
+      offset += resourceAddRowHeight;
+    }
+    const items = layout.items.map((item) => {
+      const itemOffset = rowTopOffsets.get(item.resourceId) ?? 0;
+      return {
+        ...item,
+        resourceRowTop: item.resourceRowTop + itemOffset,
+        top: item.top + itemOffset
+      };
+    });
+    return {
+      rows,
+      items,
+      groupHeaders,
+      groupAddRows,
+      totalHeight: layout.totalHeight + offset
+    };
+  }, [creatingResourceGroupType, layout, resourceAddRowHeight, resourceGrouping]);
   const todayInRange = useMemo9(() => {
     const now = /* @__PURE__ */ new Date();
     const today = new Date(Date.UTC(now.getFullYear(), now.getMonth(), now.getDate()));
@@ -8119,16 +8268,16 @@ function ResourceTimelineChart({
   }, [dateRange]);
   const itemsByResourceId = useMemo9(() => {
     const map = /* @__PURE__ */ new Map();
-    for (const item of layout.items) {
+    for (const item of displayLayout.items) {
       const next = map.get(item.resourceId) ?? [];
       next.push(item);
       map.set(item.resourceId, next);
     }
     return map;
-  }, [layout.items]);
+  }, [displayLayout.items]);
   const conflictItemsByResourceId = useMemo9(() => {
     const map = /* @__PURE__ */ new Map();
-    for (const item of layout.items) {
+    for (const item of displayLayout.items) {
       if (item.conflictRanges.length === 0) {
         continue;
       }
@@ -8142,21 +8291,28 @@ function ResourceTimelineChart({
       );
     }
     return map;
-  }, [layout.items]);
-  const canAddResource = enableAddResource && Boolean(onAddResource);
-  const resourceAddRowHeight = laneHeight + DEFAULT_RESOURCE_ROW_GAP;
-  const displayTotalHeight = layout.totalHeight + (canAddResource ? resourceAddRowHeight : 0);
+  }, [displayLayout.items]);
+  const displayTotalHeight = displayLayout.totalHeight + (canAddResource ? resourceAddRowHeight : 0);
+  const timelineHeaderHeight = headerHeight + 1;
   const handleConfirmNewResource = useCallback7((name) => {
     onAddResource?.({
       id: crypto.randomUUID(),
       name,
-      type: "\u0414\u0440\u0443\u0433\u043E\u0435",
+      type: creatingResourceGroupType ?? "\u0414\u0440\u0443\u0433\u043E\u0435",
       scope: "Project",
       items: []
     });
     setIsCreatingResource(false);
-  }, [onAddResource]);
-  const handleCancelNewResource = useCallback7(() => setIsCreatingResource(false), []);
+    setCreatingResourceGroupType(null);
+  }, [creatingResourceGroupType, onAddResource]);
+  const handleStartAddResourceToGroup = useCallback7((type) => {
+    setIsCreatingResource(false);
+    setCreatingResourceGroupType(type);
+  }, []);
+  const handleCancelNewResource = useCallback7(() => {
+    setIsCreatingResource(false);
+    setCreatingResourceGroupType(null);
+  }, []);
   const handleConflictBadgeClick = useCallback7((resourceId) => {
     const conflictItems = conflictItemsByResourceId.get(resourceId) ?? [];
     if (conflictItems.length === 0) {
@@ -8182,10 +8338,31 @@ function ResourceTimelineChart({
       conflictHighlightTimeoutRef.current = null;
     }, 1600);
   }, [conflictItemsByResourceId, dayWidth, laneHeight]);
+  const handleResourceNameClick = useCallback7((resourceId) => {
+    const resourceItems = itemsByResourceId.get(resourceId) ?? [];
+    if (resourceItems.length === 0) {
+      return;
+    }
+    const orderedItems = [...resourceItems].sort(
+      (left, right) => left.left - right.left || left.top - right.top || left.itemId.localeCompare(right.itemId)
+    );
+    const currentIndex = resourceNavigationIndexRef.current.get(resourceId) ?? 0;
+    const targetItem = orderedItems[currentIndex % orderedItems.length];
+    resourceNavigationIndexRef.current.set(resourceId, (currentIndex + 1) % orderedItems.length);
+    const container = scrollContainerRef.current;
+    if (!container || !targetItem) {
+      return;
+    }
+    container.scrollTo({
+      left: Math.max(0, Math.round(targetItem.left - dayWidth * 2)),
+      top: Math.max(0, Math.round(targetItem.top - laneHeight)),
+      behavior: "smooth"
+    });
+  }, [dayWidth, itemsByResourceId, laneHeight]);
   const { preview, startDrag } = useResourceItemDrag({
     dayWidth,
     monthStart,
-    rows: layout.rows,
+    rows: displayLayout.rows,
     gridElementRef: gridRef,
     readonly,
     disableResourceReassignment,
@@ -8193,6 +8370,18 @@ function ResourceTimelineChart({
     weekendPredicate,
     onResourceItemMove
   });
+  useEffect8(() => {
+    const container = scrollContainerRef.current;
+    if (!container) return;
+    const updateShadow = () => {
+      setResourceColumnHasRightShadow(container.scrollLeft > 0);
+    };
+    updateShadow();
+    container.addEventListener("scroll", updateShadow, { passive: true });
+    return () => {
+      container.removeEventListener("scroll", updateShadow);
+    };
+  }, []);
   const handlePanStart = useCallback7((event) => {
     if (event.button !== 0) {
       return;
@@ -8250,6 +8439,16 @@ function ResourceTimelineChart({
       window.removeEventListener("mouseup", handlePanEnd);
     };
   }, [allowVerticalPan]);
+  useEffect8(() => {
+    const nextNavigation = /* @__PURE__ */ new Map();
+    for (const [resourceId, resourceItems] of itemsByResourceId.entries()) {
+      if (resourceItems.length === 0) {
+        continue;
+      }
+      nextNavigation.set(resourceId, (resourceNavigationIndexRef.current.get(resourceId) ?? 0) % resourceItems.length);
+    }
+    resourceNavigationIndexRef.current = nextNavigation;
+  }, [itemsByResourceId]);
   useEffect8(() => {
     return () => {
       if (conflictHighlightTimeoutRef.current) {
@@ -8273,14 +8472,14 @@ function ResourceTimelineChart({
         /* @__PURE__ */ jsxs12(
           "div",
           {
-            className: "gantt-resourceTimeline-resourceColumn",
+            className: `gantt-resourceTimeline-resourceColumn${resourceColumnHasRightShadow ? " gantt-resourceTimeline-resourceColumnShadowed" : ""}`,
             style: { width: `${effectiveRowHeaderWidth}px`, minWidth: `${effectiveRowHeaderWidth}px` },
             children: [
               /* @__PURE__ */ jsxs12(
                 "div",
                 {
                   className: "gantt-resourceTimeline-corner",
-                  style: { height: `${headerHeight + 0.5}px` },
+                  style: { height: `${timelineHeaderHeight}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" }),
@@ -8290,7 +8489,62 @@ function ResourceTimelineChart({
                   ]
                 }
               ),
-              layout.rows.map((row, rowIndex) => /* @__PURE__ */ jsx15(
+              displayLayout.groupHeaders.length > 0 ? displayLayout.groupHeaders.map((group) => /* @__PURE__ */ jsxs12(React12.Fragment, { children: [
+                /* @__PURE__ */ jsxs12(
+                  "div",
+                  {
+                    className: "gantt-resourceTimeline-resourceGroupHeader",
+                    style: { height: `${group.height}px` },
+                    children: [
+                      /* @__PURE__ */ jsx15("span", { className: "gantt-resourceTimeline-resourceGroupTitle", children: group.label }),
+                      /* @__PURE__ */ jsx15("span", { className: "gantt-resourceTimeline-resourceGroupCount", children: group.count }),
+                      canAddResource && /* @__PURE__ */ jsx15(
+                        "button",
+                        {
+                          type: "button",
+                          className: "gantt-resourceTimeline-resourceGroupAddButton",
+                          "aria-label": `\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0440\u0435\u0441\u0443\u0440\u0441 \u0432 \u0433\u0440\u0443\u043F\u043F\u0443 ${group.label}`,
+                          title: `\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0440\u0435\u0441\u0443\u0440\u0441 \u0432 \u0433\u0440\u0443\u043F\u043F\u0443 ${group.label}`,
+                          onClick: (event) => {
+                            event.stopPropagation();
+                            handleStartAddResourceToGroup(group.key);
+                          },
+                          children: "+"
+                        }
+                      )
+                    ]
+                  }
+                ),
+                displayLayout.rows.filter((row) => getResourceType(row.resource) === group.key).map((row) => {
+                  const rowIndex = displayLayout.rows.findIndex((candidate) => candidate.resourceId === row.resourceId);
+                  return /* @__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,
+                      onResourceChange,
+                      onResourceNameClick: handleResourceNameClick,
+                      onConflictBadgeClick: handleConflictBadgeClick
+                    },
+                    row.resourceId
+                  );
+                }),
+                displayLayout.groupAddRows.some((row) => row.key === group.key) && /* @__PURE__ */ jsx15(
+                  NewResourceRow,
+                  {
+                    height: resourceAddRowHeight,
+                    onConfirm: handleConfirmNewResource,
+                    onCancel: handleCancelNewResource
+                  }
+                )
+              ] }, group.key)) : displayLayout.rows.map((row, rowIndex) => /* @__PURE__ */ jsx15(
                 ResourceHeader,
                 {
                   resource: row.resource,
@@ -8303,6 +8557,7 @@ function ResourceTimelineChart({
                   paddingBottom: DEFAULT_RESOURCE_ROW_GAP,
                   menuCommands: resourceMenuCommands,
                   onResourceChange,
+                  onResourceNameClick: handleResourceNameClick,
                   onConflictBadgeClick: handleConflictBadgeClick
                 },
                 row.resourceId
@@ -8320,7 +8575,10 @@ function ResourceTimelineChart({
                   className: "gantt-resourceTimeline-addResourceButton",
                   type: "button",
                   style: { height: `${resourceAddRowHeight}px` },
-                  onClick: () => setIsCreatingResource(true),
+                  onClick: () => {
+                    setCreatingResourceGroupType(null);
+                    setIsCreatingResource(true);
+                  },
                   children: "+ \u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0440\u0435\u0441\u0443\u0440\u0441"
                 }
               ))
@@ -8333,16 +8591,23 @@ function ResourceTimelineChart({
             className: "gantt-resourceTimeline-chartSurface",
             style: { minWidth: `${gridWidth}px` },
             children: [
-              /* @__PURE__ */ jsx15("div", { className: "gantt-resourceTimeline-stickyHeader", style: { width: `${gridWidth}px` }, children: /* @__PURE__ */ jsx15(
-                TimeScaleHeader_default,
+              /* @__PURE__ */ jsx15(
+                "div",
                 {
-                  days: dateRange,
-                  dayWidth,
-                  headerHeight,
-                  viewMode,
-                  isCustomWeekend: weekendPredicate
+                  className: "gantt-resourceTimeline-stickyHeader",
+                  style: { width: `${gridWidth}px`, height: `${timelineHeaderHeight}px` },
+                  children: /* @__PURE__ */ jsx15(
+                    TimeScaleHeader_default,
+                    {
+                      days: dateRange,
+                      dayWidth,
+                      headerHeight,
+                      viewMode,
+                      isCustomWeekend: weekendPredicate
+                    }
+                  )
                 }
-              ) }),
+              ),
               /* @__PURE__ */ jsxs12(
                 "div",
                 {
@@ -8361,7 +8626,19 @@ function ResourceTimelineChart({
                       }
                     ),
                     todayInRange && /* @__PURE__ */ jsx15(TodayIndicator_default, { monthStart, dayWidth }),
-                    layout.rows.map((row) => /* @__PURE__ */ jsx15(
+                    displayLayout.groupHeaders.map((group) => /* @__PURE__ */ jsx15(
+                      "div",
+                      {
+                        className: "gantt-resourceTimeline-row gantt-resourceTimeline-groupRow",
+                        "data-resource-group": group.key,
+                        style: {
+                          top: `${group.top}px`,
+                          height: `${group.height}px`
+                        }
+                      },
+                      `group-row-${group.key}`
+                    )),
+                    displayLayout.rows.map((row) => /* @__PURE__ */ jsx15(
                       "div",
                       {
                         className: "gantt-resourceTimeline-row",
@@ -8379,11 +8656,23 @@ function ResourceTimelineChart({
                         className: "gantt-resourceTimeline-row gantt-resourceTimeline-rowNew",
                         "data-resource-add-row": "true",
                         style: {
-                          top: `${layout.totalHeight}px`,
+                          top: `${displayLayout.totalHeight}px`,
                           height: `${resourceAddRowHeight}px`
                         }
                       }
                     ),
+                    displayLayout.groupAddRows.map((row) => /* @__PURE__ */ jsx15(
+                      "div",
+                      {
+                        className: "gantt-resourceTimeline-row gantt-resourceTimeline-rowNew",
+                        "data-resource-group-add-row": row.key,
+                        style: {
+                          top: `${row.top}px`,
+                          height: `${row.height}px`
+                        }
+                      },
+                      `group-add-row-${row.key}`
+                    )),
                     Array.from(itemsByResourceId.values()).flatMap(
                       (resourceItems) => resourceItems.map((layoutItem) => {
                         const customClassName = getItemClassName?.(layoutItem.item);
@@ -8990,6 +9279,7 @@ function TaskGanttChartInner(props, ref) {
     () => visibleTasks.length * rowHeight,
     [visibleTasks.length, rowHeight]
   );
+  const timelineHeaderHeight = headerHeight + 1;
   const monthStart = useMemo10(() => {
     if (dateRange.length === 0) {
       return new Date(Date.UTC((/* @__PURE__ */ new Date()).getUTCFullYear(), (/* @__PURE__ */ new Date()).getUTCMonth(), 1));
@@ -9472,16 +9762,23 @@ function TaskGanttChartInner(props, ref) {
             className: showChart ? "gantt-chartSurface" : "gantt-chartSurface gantt-chart-hidden",
             style: { minWidth: `${gridWidth}px`, flex: 1, display: showChart ? void 0 : "none" },
             children: [
-              /* @__PURE__ */ jsx16("div", { className: "gantt-stickyHeader", style: { width: `${gridWidth}px` }, children: /* @__PURE__ */ jsx16(
-                TimeScaleHeader_default,
+              /* @__PURE__ */ jsx16(
+                "div",
                 {
-                  days: dateRange,
-                  dayWidth,
-                  headerHeight,
-                  viewMode,
-                  isCustomWeekend
+                  className: "gantt-stickyHeader",
+                  style: { width: `${gridWidth}px`, height: `${timelineHeaderHeight}px` },
+                  children: /* @__PURE__ */ jsx16(
+                    TimeScaleHeader_default,
+                    {
+                      days: dateRange,
+                      dayWidth,
+                      headerHeight,
+                      viewMode,
+                      isCustomWeekend
+                    }
+                  )
                 }
-              ) }),
+              ),
               /* @__PURE__ */ jsxs13(
                 "div",
                 {