snapshot of https://github.com/makeplane/plane.git @ d868349a55de79979eb8b98701bf1702c67ad634 (2026-09-15)

apps/web/core/components/modules/gantt-chart/blocks.tsx

@@ -0,0 +1,90 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import Link from "next/link";
+import { useParams } from "next/navigation";
+// ui
+import { MODULE_STATUS } from "@plane/constants";
+import { ModuleStatusIcon } from "@plane/propel/icons";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+// components
+import { SIDEBAR_WIDTH } from "@/components/gantt-chart/constants";
+import { getBlockViewDetails } from "@/components/issues/issue-layouts/utils";
+// constants
+// hooks
+import { useModule } from "@/hooks/store/use-module";
+import { useAppRouter } from "@/hooks/use-app-router";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+
+type Props = {
+  moduleId: string;
+};
+
+export const ModuleGanttBlock = observer(function ModuleGanttBlock(props: Props) {
+  const { moduleId } = props;
+  // router
+  const router = useAppRouter();
+  const { workspaceSlug } = useParams();
+  // store hooks
+  const { getModuleById } = useModule();
+  // derived values
+  const moduleDetails = getModuleById(moduleId);
+  // hooks
+  const { isMobile } = usePlatformOS();
+
+  const { message, blockStyle } = getBlockViewDetails(
+    moduleDetails,
+    MODULE_STATUS.find((s) => s.value === moduleDetails?.status)?.color ?? ""
+  );
+
+  return (
+    <Tooltip
+      label={moduleDetails?.name ? `${moduleDetails.name}: ${message ?? ""}` : (message ?? "")}
+      layout="stacked"
+      align="start"
+      disabled={isMobile}
+    >
+      <div
+        className="relative flex h-full w-full cursor-pointer items-center rounded-sm"
+        style={blockStyle}
+        onClick={() =>
+          router.push(
+            `/${workspaceSlug?.toString()}/projects/${moduleDetails?.project_id}/modules/${moduleDetails?.id}`
+          )
+        }
+      >
+        <div className="absolute top-0 left-0 h-full w-full bg-surface-1/50" />
+        <div
+          className="sticky w-auto truncate overflow-hidden px-2.5 py-1 text-13 text-primary"
+          style={{ left: `${SIDEBAR_WIDTH}px` }}
+        >
+          {moduleDetails?.name}
+        </div>
+      </div>
+    </Tooltip>
+  );
+});
+
+export const ModuleGanttSidebarBlock = observer(function ModuleGanttSidebarBlock(props: Props) {
+  const { moduleId } = props;
+  const { workspaceSlug } = useParams();
+  // store hooks
+  const { getModuleById } = useModule();
+  // derived values
+  const moduleDetails = getModuleById(moduleId);
+
+  return (
+    <Link
+      className="relative flex h-full w-full items-center gap-2"
+      href={`/${workspaceSlug?.toString()}/projects/${moduleDetails?.project_id}/modules/${moduleDetails?.id}`}
+      draggable={false}
+    >
+      <ModuleStatusIcon status={moduleDetails?.status ?? "backlog"} height="16px" width="16px" />
+      <h6 className="flex-grow truncate text-13 font-medium">{moduleDetails?.name}</h6>
+    </Link>
+  );
+});

apps/web/core/components/modules/gantt-chart/index.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./blocks";
+export * from "./modules-list-layout";

apps/web/core/components/modules/gantt-chart/modules-list-layout.tsx

@@ -0,0 +1,77 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// PLane
+import { GANTT_TIMELINE_TYPE } from "@plane/types";
+import type { IBlockUpdateData, IBlockUpdateDependencyData, IModule } from "@plane/types";
+// components
+import { GanttChartRoot, ModuleGanttSidebar } from "@/components/gantt-chart";
+import { TimeLineTypeContext } from "@/components/gantt-chart/contexts";
+import { ModuleGanttBlock } from "@/components/modules";
+// hooks
+import { useModule } from "@/hooks/store/use-module";
+import { useModuleFilter } from "@/hooks/store/use-module-filter";
+import { useProject } from "@/hooks/store/use-project";
+
+export const ModulesListGanttChartView = observer(function ModulesListGanttChartView() {
+  // router
+  const { workspaceSlug, projectId } = useParams();
+  // store
+  const { currentProjectDetails } = useProject();
+  const { getFilteredModuleIds, updateModuleDetails } = useModule();
+  const { currentProjectDisplayFilters: displayFilters } = useModuleFilter();
+
+  // derived values
+  const filteredModuleIds = projectId ? getFilteredModuleIds(projectId.toString()) : undefined;
+
+  const handleModuleUpdate = async (module: IModule, data: IBlockUpdateData) => {
+    if (!workspaceSlug || !module) return;
+
+    const payload: any = { ...data };
+    if (data.sort_order) payload.sort_order = data.sort_order.newSortOrder;
+
+    await updateModuleDetails(workspaceSlug.toString(), module.project_id, module.id, payload);
+  };
+
+  const updateBlockDates = async (blockUpdates: IBlockUpdateDependencyData[]) => {
+    const blockUpdate = blockUpdates[0];
+
+    if (!blockUpdate) return;
+
+    const payload: Partial<IModule> = {};
+
+    if (blockUpdate.start_date) payload.start_date = blockUpdate.start_date;
+    if (blockUpdate.target_date) payload.target_date = blockUpdate.target_date;
+
+    await updateModuleDetails(workspaceSlug.toString(), projectId.toString(), blockUpdate.id, payload);
+  };
+
+  const isAllowed = currentProjectDetails?.member_role === 20 || currentProjectDetails?.member_role === 15;
+
+  if (!filteredModuleIds) return null;
+
+  return (
+    <TimeLineTypeContext.Provider value={GANTT_TIMELINE_TYPE.MODULE}>
+      <GanttChartRoot
+        title="Modules"
+        loaderTitle="Modules"
+        blockIds={filteredModuleIds}
+        sidebarToRender={(props) => <ModuleGanttSidebar {...props} />}
+        blockUpdateHandler={(block, payload) => handleModuleUpdate(block, payload)}
+        blockToRender={(data: IModule) => <ModuleGanttBlock moduleId={data.id} />}
+        enableBlockLeftResize={isAllowed}
+        enableBlockRightResize={isAllowed}
+        enableBlockMove={isAllowed}
+        enableReorder={isAllowed && displayFilters?.order_by === "sort_order"}
+        enableAddBlock={isAllowed}
+        updateBlockDates={updateBlockDates}
+        showAllBlocks
+      />
+    </TimeLineTypeContext.Provider>
+  );
+});