vk-typescript-cli 1.0.0

package/src/templates/react/Diagram.jsx

@@ -0,0 +1,192 @@
+import * as React from 'react';
+import {
+  DiagramComponent,
+  Inject,
+  DiagramConstraints,
+  UndoRedo,
+  Snapping,
+  ConnectorBridging
+} from '@syncfusion/ej2-react-diagrams';
+
+function createNode(
+  id,
+  offsetX,
+  offsetY,
+  height,
+  width,
+  content,
+  marginX = 0,
+  marginY = 0
+) {
+  let ports = [];
+
+  if (id === 'node5' || id === 'node6') {
+    ports = [{ id: 'port1', offset: { x: 0.9, y: 0 } }];
+  }
+
+  if (id === 'node13' || id === 'node15') {
+    ports = [{ id: 'port2', offset: { x: 1, y: 0.5 } }];
+  }
+
+  if (id === 'node3') {
+    ports = [
+      { id: 'port3', offset: { x: 0.25, y: 1 } },
+      { id: 'port4', offset: { x: 0.5, y: 1 } },
+      { id: 'port5', offset: { x: 0.75, y: 1 } }
+    ];
+  }
+
+  if (id === 'node7') {
+    ports = [
+      { id: 'port1', offset: { x: 0, y: 0.5 } },
+      { id: 'port2', offset: { x: 1, y: 0.5 } }
+    ];
+  }
+
+  if (id === 'node8') {
+    ports = [
+      { id: 'port3', offset: { x: 0.25, y: 1 } },
+      { id: 'port5', offset: { x: 0.75, y: 1 } }
+    ];
+  }
+
+  return {
+    id,
+    offsetX,
+    offsetY,
+    margin: { left: marginX, top: marginY },
+    width,
+    height,
+    style: { fill: 'white', strokeColor: '#2546BB', strokeWidth: 1 },
+    shape: { type: 'Basic', shape: 'Rectangle', cornerRadius: 4 },
+    annotations: [
+      {
+        content,
+        style: { color: '#343434' },
+        horizontalAlignment: 'Center'
+      }
+    ],
+    ports
+  };
+}
+
+function createNodes() {
+  return [
+    createNode('node1', 300, 300, 60, 100, 'HTTP Traffic'),
+    createNode('node2', 500, 300, 60, 100, 'Ingestion service', 50, 30),
+    createNode('node3', 650, 300, 60, 100, 'Workflow service', 200, 30),
+    createNode('node4', 500, 415, 60, 100, 'Package service', 50, 150),
+    createNode('node5', 650, 415, 60, 150, 'Drone Scheduler service', 175, 150),
+    createNode('node6', 800, 415, 60, 100, 'Delivery service', 350, 150),
+    createNode('node7', 580, 130, 60, 90, 'Azure Service Bus'),
+    createNode('node8', 815, 130, 60, 100, 'Managed Identities'),
+    createNode('node9', 1000, 130, 60, 100, 'Azure Key Vault'),
+    createNode('node10', 500, 550, 60, 100, 'Azure Cosmos DB for MongoDB API'),
+    createNode('node11', 650, 550, 60, 100, 'Azure Cosmos DB'),
+    createNode('node12', 800, 550, 60, 100, 'Azure Cache for Redis'),
+    createNode('node13', 1040, 255, 60, 100, 'Azure Application Insights'),
+    createNode('node14', 1140, 350, 60, 100, 'Azure Monitor'),
+    createNode('node15', 1040, 445, 60, 100, 'Azure Log Analytics workspace'),
+    {
+      id: 'container',
+      width: 520,
+      height: 300,
+      offsetX: 660,
+      offsetY: 350,
+      shape: {
+        type: 'Container',
+        header: {
+          annotation: {
+            content: 'Azure Container Apps Environment',
+            style: { fontSize: 18, bold: true, fill: 'transparent', strokeColor: 'transparent' }
+          },
+          height: 40,
+          style: { fontSize: 18, bold: true, fill: 'transparent', strokeColor: 'transparent' }
+        },
+        children: ['node2', 'node3', 'node4', 'node5', 'node6']
+      },
+      style: { fill: '#E9EEFF', strokeColor: '#2546BB', strokeWidth: 1 }
+    }
+  ];
+}
+
+function createConnector(
+  id,
+  sourceID,
+  targetID,
+  sourcePortID = '',
+  targetPortID = '',
+  sourceDecorator = undefined
+) {
+  return {
+    id,
+    type: 'Orthogonal',
+    sourceID,
+    targetID,
+    sourcePortID,
+    targetPortID,
+    style: { strokeColor: '#5E5E5E', strokeWidth: 1 },
+    sourceDecorator,
+    targetDecorator: {
+      style: {
+        fill: '#5E5E5E',
+        strokeColor: '#5E5E5E',
+        strokeWidth: 1
+      }
+    }
+  };
+}
+
+function createConnectors() {
+  const filledSourceDecorator = {
+    style: { fill: '#5E5E5E', strokeColor: '#5E5E5E', strokeWidth: 1 }
+  };
+
+  return [
+    createConnector('connector1', 'node1', 'node2'),
+    createConnector('connector2', 'node4', 'node10'),
+    createConnector('connector3', 'node5', 'node11'),
+    createConnector('connector4', 'node6', 'node12'),
+    createConnector('connector5', 'node8', 'node9'),
+    createConnector('connector6', 'container', 'node13'),
+    createConnector('connector7', 'container', 'node15'),
+    createConnector('connector8', 'node3', 'node4', 'port3'),
+    createConnector('connector9', 'node3', 'node5', 'port4'),
+    createConnector('connector10', 'node3', 'node6', 'port5'),
+    createConnector('connector11', 'node2', 'node7', '', 'port1'),
+    createConnector('connector12', 'node7', 'node3', 'port2'),
+    createConnector('connector13', 'node13', 'node14', 'port2'),
+    createConnector('connector14', 'node15', 'node14', 'port2'),
+    createConnector('connector16', 'node8', 'node5', 'port3', 'port1', filledSourceDecorator),
+    createConnector('connector17', 'node8', 'node6', 'port5', 'port1', filledSourceDecorator)
+  ];
+}
+
+export default function Diagram() {
+  let diagramInstance;
+  const nodes = React.useMemo(() => createNodes(), []);
+  const connectors = React.useMemo(() => createConnectors(), []);
+
+
+  return (
+    <div className="diagram-control-pane" style={{ padding: "30px", margin: "0 auto" }}>
+      <DiagramComponent
+        id="diagram"
+        ref={(diagram) => {
+          if (diagram) {
+            diagramInstance = diagram;
+          }
+        }}
+        width="100%"
+        height="700px"
+        nodes={nodes}
+        connectors={connectors}
+        constraints={DiagramConstraints.Default | DiagramConstraints.Bridging}
+        rulerSettings={{ showRulers: true, dynamicGrid: true }}
+        created={() => diagramInstance.fitToPage()}
+      >
+        <Inject services={[UndoRedo, Snapping, ConnectorBridging]} />
+      </DiagramComponent>
+    </div>
+  );
+}

package/src/templates/react/Diagram.tsx

@@ -0,0 +1,195 @@
+import * as React from 'react';
+import {
+  DiagramComponent,
+  Inject,
+  DiagramConstraints,
+  UndoRedo,
+  Snapping,
+  ConnectorBridging,
+  type NodeModel,
+  type ConnectorModel,
+  type PointPortModel
+} from '@syncfusion/ej2-react-diagrams';
+
+function createNode(
+  id: string,
+  offsetX: number,
+  offsetY: number,
+  height: number,
+  width: number,
+  content: string,
+  marginX = 0,
+  marginY = 0
+): NodeModel {
+  let ports: PointPortModel[] = [];
+
+  if (id === 'node5' || id === 'node6') {
+    ports = [{ id: 'port1', offset: { x: 0.9, y: 0 } }];
+  }
+
+  if (id === 'node13' || id === 'node15') {
+    ports = [{ id: 'port2', offset: { x: 1, y: 0.5 } }];
+  }
+
+  if (id === 'node3') {
+    ports = [
+      { id: 'port3', offset: { x: 0.25, y: 1 } },
+      { id: 'port4', offset: { x: 0.5, y: 1 } },
+      { id: 'port5', offset: { x: 0.75, y: 1 } }
+    ];
+  }
+
+  if (id === 'node7') {
+    ports = [
+      { id: 'port1', offset: { x: 0, y: 0.5 } },
+      { id: 'port2', offset: { x: 1, y: 0.5 } }
+    ];
+  }
+
+  if (id === 'node8') {
+    ports = [
+      { id: 'port3', offset: { x: 0.25, y: 1 } },
+      { id: 'port5', offset: { x: 0.75, y: 1 } }
+    ];
+  }
+
+  return {
+    id,
+    offsetX,
+    offsetY,
+    margin: { left: marginX, top: marginY },
+    width,
+    height,
+    style: { fill: 'white', strokeColor: '#2546BB', strokeWidth: 1 },
+    shape: { type: 'Basic', shape: 'Rectangle', cornerRadius: 4 },
+    annotations: [
+      {
+        content,
+        style: { color: '#343434' },
+        horizontalAlignment: 'Center'
+      }
+    ],
+    ports
+  } as NodeModel;
+}
+
+function createNodes(): NodeModel[] {
+  return [
+    createNode('node1', 300, 300, 60, 100, 'HTTP Traffic'),
+    createNode('node2', 500, 300, 60, 100, 'Ingestion service', 50, 30),
+    createNode('node3', 650, 300, 60, 100, 'Workflow service', 200, 30),
+    createNode('node4', 500, 415, 60, 100, 'Package service', 50, 150),
+    createNode('node5', 650, 415, 60, 150, 'Drone Scheduler service', 175, 150),
+    createNode('node6', 800, 415, 60, 100, 'Delivery service', 350, 150),
+    createNode('node7', 580, 130, 60, 90, 'Azure Service Bus'),
+    createNode('node8', 815, 130, 60, 100, 'Managed Identities'),
+    createNode('node9', 1000, 130, 60, 100, 'Azure Key Vault'),
+    createNode('node10', 500, 550, 60, 100, 'Azure Cosmos DB for MongoDB API'),
+    createNode('node11', 650, 550, 60, 100, 'Azure Cosmos DB'),
+    createNode('node12', 800, 550, 60, 100, 'Azure Cache for Redis'),
+    createNode('node13', 1040, 255, 60, 100, 'Azure Application Insights'),
+    createNode('node14', 1140, 350, 60, 100, 'Azure Monitor'),
+    createNode('node15', 1040, 445, 60, 100, 'Azure Log Analytics workspace'),
+    {
+      id: 'container',
+      width: 520,
+      height: 300,
+      offsetX: 660,
+      offsetY: 350,
+      shape: {
+        type: 'Container',
+        header: {
+          annotation: {
+            content: 'Azure Container Apps Environment',
+            style: { fontSize: 18, bold: true, fill: 'transparent', strokeColor: 'transparent' }
+          },
+          height: 40,
+          style: { fontSize: 18, bold: true, fill: 'transparent', strokeColor: 'transparent' }
+        },
+        children: ['node2', 'node3', 'node4', 'node5', 'node6']
+      },
+      style: { fill: '#E9EEFF', strokeColor: '#2546BB', strokeWidth: 1 }
+    } as NodeModel
+  ];
+}
+
+function createConnector(
+  id: string,
+  sourceID: string,
+  targetID: string,
+  sourcePortID = '',
+  targetPortID = '',
+  sourceDecorator: any = undefined
+): ConnectorModel {
+  return {
+    id,
+    type: 'Orthogonal',
+    sourceID,
+    targetID,
+    sourcePortID,
+    targetPortID,
+    style: { strokeColor: '#5E5E5E', strokeWidth: 1 },
+    sourceDecorator,
+    targetDecorator: {
+      style: {
+        fill: '#5E5E5E',
+        strokeColor: '#5E5E5E',
+        strokeWidth: 1
+      }
+    }
+  } as ConnectorModel;
+}
+
+function createConnectors(): ConnectorModel[] {
+  const filledSourceDecorator = {
+    style: { fill: '#5E5E5E', strokeColor: '#5E5E5E', strokeWidth: 1 }
+  };
+
+  return [
+    createConnector('connector1', 'node1', 'node2'),
+    createConnector('connector2', 'node4', 'node10'),
+    createConnector('connector3', 'node5', 'node11'),
+    createConnector('connector4', 'node6', 'node12'),
+    createConnector('connector5', 'node8', 'node9'),
+    createConnector('connector6', 'container', 'node13'),
+    createConnector('connector7', 'container', 'node15'),
+    createConnector('connector8', 'node3', 'node4', 'port3'),
+    createConnector('connector9', 'node3', 'node5', 'port4'),
+    createConnector('connector10', 'node3', 'node6', 'port5'),
+    createConnector('connector11', 'node2', 'node7', '', 'port1'),
+    createConnector('connector12', 'node7', 'node3', 'port2'),
+    createConnector('connector13', 'node13', 'node14', 'port2'),
+    createConnector('connector14', 'node15', 'node14', 'port2'),
+    createConnector('connector16', 'node8', 'node5', 'port3', 'port1', filledSourceDecorator),
+    createConnector('connector17', 'node8', 'node6', 'port5', 'port1', filledSourceDecorator)
+  ];
+}
+
+export default function Diagram() {
+  let diagramInstance: DiagramComponent;
+  const nodes = React.useMemo(() => createNodes(), []);
+  const connectors = React.useMemo(() => createConnectors(), []);
+
+
+  return (
+    <div className="diagram-control-pane" style={{ padding: "30px", margin: "0 auto" }}>
+      <DiagramComponent
+        id="diagram"
+        ref={(diagram: DiagramComponent) => {
+          if (diagram) {
+            diagramInstance = diagram;
+          }
+        }}
+        width="100%"
+        height="700px"
+        nodes={nodes}
+        connectors={connectors}
+        constraints={DiagramConstraints.Default | DiagramConstraints.Bridging}
+        rulerSettings={{ showRulers: true, dynamicGrid: true }}
+        created={() => diagramInstance.fitToPage()}
+      >
+        <Inject services={[UndoRedo, Snapping, ConnectorBridging]} />
+      </DiagramComponent>
+    </div>
+  );
+}

package/src/templates/react/FileManager.jsx

@@ -0,0 +1,13 @@
+import { FileManagerComponent, Inject, NavigationPane, DetailsView, Toolbar } from '@syncfusion/ej2-react-filemanager';
+
+export default function FileManager () {
+    let hostUrl = "https://physical-service.syncfusion.com/";
+
+    return (
+        <div className="control-section" style={{ padding: '80px', margin: '0 auto' }}>
+            <FileManagerComponent id="overview_file" ajaxSettings = {{url: hostUrl + "api/FileManager/FileOperations", getImageUrl: hostUrl + "api/FileManager/GetImage", uploadUrl: hostUrl + 'api/FileManager/Upload', downloadUrl: hostUrl + 'api/FileManager/Download'}} toolbarSettings={{items: ['NewFolder', 'SortBy', 'Cut', 'Copy', 'Paste', 'Delete', 'Refresh', 'Download', 'Rename', 'Selection', 'View', 'Details']}} contextMenuSettings={{file: [ 'Cut', 'Copy', '|', 'Delete', 'Download', 'Rename', '|', 'Details'], layout: ['SortBy', 'View', 'Refresh', '|', 'Paste', '|', 'NewFolder', '|', 'Details', '|', 'SelectAll'], visible: true }} view={"Details"}>
+                <Inject services={[ NavigationPane, DetailsView, Toolbar]} />
+            </FileManagerComponent>
+        </div>
+    );
+}

package/src/templates/react/FileManager.tsx

@@ -0,0 +1,13 @@
+import { FileManagerComponent, Inject, NavigationPane, DetailsView, Toolbar } from '@syncfusion/ej2-react-filemanager';
+
+export default function FileManager () {
+    let hostUrl: string = "https://physical-service.syncfusion.com/";
+
+    return (
+        <div className="control-section" style={{ padding: '80px', margin: '0 auto' }}>
+            <FileManagerComponent id="overview_file" ajaxSettings = {{url: hostUrl + "api/FileManager/FileOperations", getImageUrl: hostUrl + "api/FileManager/GetImage", uploadUrl: hostUrl + 'api/FileManager/Upload', downloadUrl: hostUrl + 'api/FileManager/Download'}} toolbarSettings={{items: ['NewFolder', 'SortBy', 'Cut', 'Copy', 'Paste', 'Delete', 'Refresh', 'Download', 'Rename', 'Selection', 'View', 'Details']}} contextMenuSettings={{file: [ 'Cut', 'Copy', '|', 'Delete', 'Download', 'Rename', '|', 'Details'], layout: ['SortBy', 'View', 'Refresh', '|', 'Paste', '|', 'NewFolder', '|', 'Details', '|', 'SelectAll'], visible: true }} view={"Details"}>
+                <Inject services={[ NavigationPane, DetailsView, Toolbar]} />
+            </FileManagerComponent>
+        </div>
+    );
+}

package/src/templates/react/Gantt.jsx

@@ -0,0 +1,89 @@
+import { GanttComponent, Inject, Selection, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-gantt';
+
+const taskData = [
+    { TaskID: 1, TaskName: "Product concept", StartDate: new Date("04/02/2025"), EndDate: new Date("04/08/2025") },
+    { TaskID: 2, TaskName: "Define the product usage", StartDate: new Date("04/02/2025"), EndDate: new Date("04/08/2025"), Duration: 1, Progress: 30, ParentId: 1, BaselineStartDate: new Date("04/02/2025"), BaselineEndDate: new Date("04/02/2025") },
+    { TaskID: 3, TaskName: "Define the target audience", StartDate: new Date("04/02/2025"), EndDate: new Date("04/04/2025"), Duration: 2, Progress: 40, ParentId: 1 },
+    { TaskID: 4, TaskName: "Prepare product sketch and notes", StartDate: new Date("04/05/2025"), Duration: 2, Progress: 30, ParentId: 1, Predecessor: "2" },
+    { TaskID: 5, TaskName: "Concept approval", StartDate: new Date("04/08/2025"), EndDate: new Date("04/08/2025"), Duration: 0, ParentId: 1, Predecessor: "3,4", Indicators: [{ date: new Date("04/07/2025"), name: "Design Phase", tooltip: "Design phase completed", iconClass: "okIcon e-icons" }] },
+    { TaskID: 6, TaskName: "Market research", StartDate: new Date("04/09/2025"), EndDate: new Date("04/18/2025"), Progress: 30, BaselineStartDate: new Date("04/09/2025"), BaselineEndDate: new Date("04/09/2025") },
+    { TaskID: 7, TaskName: "Demand analysis", Progress: 40, ParentId: 6 },
+    { TaskID: 8, TaskName: "Customer strength", StartDate: new Date("04/09/2025"), EndDate: new Date("04/12/2025"), Duration: 4, Progress: 30, ParentId: 7, Predecessor: "5", BaselineStartDate: new Date("04/12/2025"), BaselineEndDate: new Date("04/13/2025") },
+    { TaskID: 9, TaskName: "Market opportunity analysis", StartDate: new Date("04/09/2025"), EndDate: new Date("04/12/2025"), Duration: 4, ParentId: 7, Predecessor: "5" },
+    { TaskID: 10, TaskName: "Competitor analysis", StartDate: new Date("04/15/2025"), EndDate: new Date("04/18/2025"), Duration: 4, Progress: 30, ParentId: 6, Predecessor: "7,8" },
+    { TaskID: 11, TaskName: "Product strength analysis", StartDate: new Date("04/15/2025"), EndDate: new Date("04/18/2025"), Duration: 4, Progress: 40, ParentId: 6, Predecessor: "9" },
+    { TaskID: 12, TaskName: "Research completed", StartDate: new Date("04/18/2025"), EndDate: new Date("04/18/2025"), Duration: 0, Progress: 30, ParentId: 6, Predecessor: "10", Indicators: [{ date: new Date("04/20/2025"), name: "Research completed", tooltip: "Research completed", iconClass: "description e-icons" }] },
+    { TaskID: 13, TaskName: "Product design and development", StartDate: new Date("04/19/2025"), EndDate: new Date("05/16/2025") },
+    { TaskID: 14, TaskName: "Functionality design", StartDate: new Date("04/19/2025"), EndDate: new Date("04/23/2025"), Duration: 4, Progress: 30, ParentId: 13, Predecessor: "12" },
+    { TaskID: 15, TaskName: "Quality design", StartDate: new Date("04/19/2025"), EndDate: new Date("04/23/2025"), Duration: 3, Progress: 40, ParentId: 13, Predecessor: "12" },
+    { TaskID: 16, TaskName: "Define reliability", StartDate: new Date("04/24/2025"), EndDate: new Date("04/25/2025"), Duration: 4, Progress: 30, ParentId: 13, Predecessor: "15" },
+    { TaskID: 17, TaskName: "Identifying raw materials", StartDate: new Date("04/24/2025"), EndDate: new Date("04/25/2025"), Duration: 2, ParentId: 13, Predecessor: "15" },
+    { TaskID: 18, TaskName: "Define cost plan", StartDate: new Date("04/26/2025"), EndDate: new Date("04/29/2025"), Progress: 30, ParentId: 13, Predecessor: "17" },
+    { TaskID: 19, TaskName: "Estimate manufacturing cost", StartDate: new Date("04/26/2025"), EndDate: new Date("04/29/2025"), Duration: 3, Progress: 40, ParentId: 18, Predecessor: "17" },
+    { TaskID: 20, TaskName: "Estimate selling cost", StartDate: new Date("04/26/2025"), EndDate: new Date("04/29/2025"), Duration: 3, Progress: 30, ParentId: 18, Predecessor: "17" },
+    { TaskID: 21, TaskName: "Development of final design", StartDate: new Date("04/30/2025"), EndDate: new Date("05/08/2025"), ParentId: 13 },
+    { TaskID: 22, TaskName: "Develop dimensions and design", StartDate: new Date("04/30/2025"), EndDate: new Date("05/01/2025"), Duration: 4, Progress: 30, ParentId: 21, Predecessor: "19,20" },
+    { TaskID: 23, TaskName: "Develop designs to meet industry", StartDate: new Date("05/02/2025"), EndDate: new Date("05/03/2025"), Duration: 3, Progress: 40, ParentId: 21, Predecessor: "22" },
+    { TaskID: 24, TaskName: "Include all the details", StartDate: new Date("05/06/2025"), EndDate: new Date("05/08/2025"), Duration: 4, Progress: 30, ParentId: 21, Predecessor: "23" },
+    { TaskID: 25, TaskName: "CAD - Computer Aided Design", StartDate: new Date("05/09/2025"), EndDate: new Date("05/13/2025"), Duration: 3, Predecessor: "24" },
+    { TaskID: 26, TaskName: "CAM - Computer Aided Manufacturing", StartDate: new Date("05/14/2025"), EndDate: new Date("05/16/2025"), Duration: 4, Progress: 30, Predecessor: "25" },
+    { TaskID: 27, TaskName: "Finalize the design", StartDate: new Date("04/16/2025"), EndDate: new Date("04/16/2025"), Duration: 0, Progress: 40, Predecessor: "26" },
+    { TaskID: 28, TaskName: "Prototype testing", StartDate: new Date("05/17/2025"), EndDate: new Date("05/22/2025"), Duration: 4, Progress: 30, Predecessor: "27" },
+    { TaskID: 29, TaskName: "Include feedback", StartDate: new Date("05/17/2025"), EndDate: new Date("05/22/2025"), Duration: 4, Predecessor: "28ss", Indicators: [{ date: new Date("05/30/2025"), name: "Production phase", tooltip: "Production phase completed", iconClass: "okIcon e-icons" }] },
+    { TaskID: 30, TaskName: "Manufacturing", StartDate: new Date("05/23/2025"), EndDate: new Date("05/29/2025"), Duration: 5, Progress: 30, Predecessor: "28,29" },
+    { TaskID: 31, TaskName: "Assembling material into finished goods", StartDate: new Date("05/30/2025"), EndDate: new Date("06/05/2025"), Duration: 5, Progress: 40, Predecessor: "30" },
+    { TaskID: 32, TaskName: "Final product development", StartDate: new Date("06/06/2025"), EndDate: new Date("06/13/2025"), Progress: 30 },
+    { TaskID: 33, TaskName: "Important improvement", StartDate: new Date("06/06/2025"), EndDate: new Date("06/10/2025"), Duration: 3, ParentId: 32, Predecessor: "31" },
+    { TaskID: 34, TaskName: "Customer testing and feedback", StartDate: new Date("06/11/2025"), EndDate: new Date("06/13/2025"), Duration: 4, Progress: 30, ParentId: 32, Predecessor: "33" },
+    { TaskID: 35, TaskName: "Final product development", StartDate: new Date("06/14/2025"), EndDate: new Date("06/19/2025"), Progress: 40 },
+    { TaskID: 36, TaskName: "Important improvement", StartDate: new Date("06/14/2025"), EndDate: new Date("06/19/2025"), Duration: 4, Progress: 30, ParentId: 35, Predecessor: "34" },
+    { TaskID: 37, TaskName: "Address any unforeseen issues", StartDate: new Date("06/14/2025"), EndDate: new Date("06/19/2025"), Duration: 4, Progress: 30, Predecessor: "36ss", ParentId: 35, Indicators: [{ date: new Date("06/30/2025"), name: "Sales and marketing", tooltip: "Sales and marketing", iconClass: "description e-icons" }] },
+    { TaskID: 38, TaskName: "Finalize the product", StartDate: new Date("06/20/2025"), EndDate: new Date("07/01/2025"), Progress: 40 },
+    { TaskID: 39, TaskName: "Branding the product", StartDate: new Date("06/20/2025"), EndDate: new Date("06/25/2025"), Duration: 4, Progress: 30, ParentId: 38, Predecessor: "37" },
+    { TaskID: 40, TaskName: "Marketing and presales", StartDate: new Date("06/26/2025"), EndDate: new Date("07/01/2025"), Duration: 4, ParentId: 38, Predecessor: "39" }
+];
+
+export default function Gantt() {
+  let ganttInstance;
+  const taskFields = {
+    id: 'TaskID',
+    name: 'TaskName',
+    startDate: 'StartDate',
+    endDate: 'EndDate',
+    duration: 'Duration',
+    progress: 'Progress',
+    dependency: 'Predecessor',
+    parentID: 'ParentId'
+  };
+  const labelSettings = {
+    leftLabel: 'TaskName'
+  };
+  const splitterSettings = {
+    columnIndex: 2
+  };
+  const projectStartDate = new Date('03/26/2025');
+  const projectEndDate = new Date('07/20/2025');
+  const onCreated = () => {
+    if (document.querySelector('.e-bigger')) {
+      ganttInstance.rowHeight = 48;
+      ganttInstance.taskbarHeight = 28;
+    }
+  }
+  return (
+    <div className='control-pane' style={{ padding: '50px', margin: '0 auto'}}>
+        <GanttComponent id='Default' ref={(gantt) => { ganttInstance = gantt} } dataSource={taskData} treeColumnIndex={1}
+          taskFields={taskFields} splitterSettings={splitterSettings} labelSettings={labelSettings} height='650px' taskbarHeight={25} rowHeight={46}
+          projectStartDate={projectStartDate} projectEndDate={projectEndDate} created={onCreated}>
+          <ColumnsDirective>
+            <ColumnDirective field='TaskID' width='80' ></ColumnDirective>
+            <ColumnDirective field='TaskName' headerText='Job Name' width='250' clipMode='EllipsisWithTooltip'></ColumnDirective>
+            <ColumnDirective field='StartDate'></ColumnDirective>
+            <ColumnDirective field='Duration'></ColumnDirective>
+            <ColumnDirective field='Progress'></ColumnDirective>
+            <ColumnDirective field='Predecessor'></ColumnDirective>
+          </ColumnsDirective>
+          <Inject services={[Selection]} />
+        </GanttComponent>
+    </div>
+  )
+}

package/src/templates/react/Gantt.tsx

@@ -0,0 +1,89 @@
+import { GanttComponent, Inject, Selection, ColumnsDirective, ColumnDirective, type TaskFieldsModel, type LabelSettingsModel, type SplitterSettingsModel } from '@syncfusion/ej2-react-gantt';
+
+const taskData = [
+    { TaskID: 1, TaskName: "Product concept", StartDate: new Date("04/02/2025"), EndDate: new Date("04/08/2025") },
+    { TaskID: 2, TaskName: "Define the product usage", StartDate: new Date("04/02/2025"), EndDate: new Date("04/08/2025"), Duration: 1, Progress: 30, ParentId: 1, BaselineStartDate: new Date("04/02/2025"), BaselineEndDate: new Date("04/02/2025") },
+    { TaskID: 3, TaskName: "Define the target audience", StartDate: new Date("04/02/2025"), EndDate: new Date("04/04/2025"), Duration: 2, Progress: 40, ParentId: 1 },
+    { TaskID: 4, TaskName: "Prepare product sketch and notes", StartDate: new Date("04/05/2025"), Duration: 2, Progress: 30, ParentId: 1, Predecessor: "2" },
+    { TaskID: 5, TaskName: "Concept approval", StartDate: new Date("04/08/2025"), EndDate: new Date("04/08/2025"), Duration: 0, ParentId: 1, Predecessor: "3,4", Indicators: [{ date: new Date("04/07/2025"), name: "Design Phase", tooltip: "Design phase completed", iconClass: "okIcon e-icons" }] },
+    { TaskID: 6, TaskName: "Market research", StartDate: new Date("04/09/2025"), EndDate: new Date("04/18/2025"), Progress: 30, BaselineStartDate: new Date("04/09/2025"), BaselineEndDate: new Date("04/09/2025") },
+    { TaskID: 7, TaskName: "Demand analysis", Progress: 40, ParentId: 6 },
+    { TaskID: 8, TaskName: "Customer strength", StartDate: new Date("04/09/2025"), EndDate: new Date("04/12/2025"), Duration: 4, Progress: 30, ParentId: 7, Predecessor: "5", BaselineStartDate: new Date("04/12/2025"), BaselineEndDate: new Date("04/13/2025") },
+    { TaskID: 9, TaskName: "Market opportunity analysis", StartDate: new Date("04/09/2025"), EndDate: new Date("04/12/2025"), Duration: 4, ParentId: 7, Predecessor: "5" },
+    { TaskID: 10, TaskName: "Competitor analysis", StartDate: new Date("04/15/2025"), EndDate: new Date("04/18/2025"), Duration: 4, Progress: 30, ParentId: 6, Predecessor: "7,8" },
+    { TaskID: 11, TaskName: "Product strength analysis", StartDate: new Date("04/15/2025"), EndDate: new Date("04/18/2025"), Duration: 4, Progress: 40, ParentId: 6, Predecessor: "9" },
+    { TaskID: 12, TaskName: "Research completed", StartDate: new Date("04/18/2025"), EndDate: new Date("04/18/2025"), Duration: 0, Progress: 30, ParentId: 6, Predecessor: "10", Indicators: [{ date: new Date("04/20/2025"), name: "Research completed", tooltip: "Research completed", iconClass: "description e-icons" }] },
+    { TaskID: 13, TaskName: "Product design and development", StartDate: new Date("04/19/2025"), EndDate: new Date("05/16/2025") },
+    { TaskID: 14, TaskName: "Functionality design", StartDate: new Date("04/19/2025"), EndDate: new Date("04/23/2025"), Duration: 4, Progress: 30, ParentId: 13, Predecessor: "12" },
+    { TaskID: 15, TaskName: "Quality design", StartDate: new Date("04/19/2025"), EndDate: new Date("04/23/2025"), Duration: 3, Progress: 40, ParentId: 13, Predecessor: "12" },
+    { TaskID: 16, TaskName: "Define reliability", StartDate: new Date("04/24/2025"), EndDate: new Date("04/25/2025"), Duration: 4, Progress: 30, ParentId: 13, Predecessor: "15" },
+    { TaskID: 17, TaskName: "Identifying raw materials", StartDate: new Date("04/24/2025"), EndDate: new Date("04/25/2025"), Duration: 2, ParentId: 13, Predecessor: "15" },
+    { TaskID: 18, TaskName: "Define cost plan", StartDate: new Date("04/26/2025"), EndDate: new Date("04/29/2025"), Progress: 30, ParentId: 13, Predecessor: "17" },
+    { TaskID: 19, TaskName: "Estimate manufacturing cost", StartDate: new Date("04/26/2025"), EndDate: new Date("04/29/2025"), Duration: 3, Progress: 40, ParentId: 18, Predecessor: "17" },
+    { TaskID: 20, TaskName: "Estimate selling cost", StartDate: new Date("04/26/2025"), EndDate: new Date("04/29/2025"), Duration: 3, Progress: 30, ParentId: 18, Predecessor: "17" },
+    { TaskID: 21, TaskName: "Development of final design", StartDate: new Date("04/30/2025"), EndDate: new Date("05/08/2025"), ParentId: 13 },
+    { TaskID: 22, TaskName: "Develop dimensions and design", StartDate: new Date("04/30/2025"), EndDate: new Date("05/01/2025"), Duration: 4, Progress: 30, ParentId: 21, Predecessor: "19,20" },
+    { TaskID: 23, TaskName: "Develop designs to meet industry", StartDate: new Date("05/02/2025"), EndDate: new Date("05/03/2025"), Duration: 3, Progress: 40, ParentId: 21, Predecessor: "22" },
+    { TaskID: 24, TaskName: "Include all the details", StartDate: new Date("05/06/2025"), EndDate: new Date("05/08/2025"), Duration: 4, Progress: 30, ParentId: 21, Predecessor: "23" },
+    { TaskID: 25, TaskName: "CAD - Computer Aided Design", StartDate: new Date("05/09/2025"), EndDate: new Date("05/13/2025"), Duration: 3, Predecessor: "24" },
+    { TaskID: 26, TaskName: "CAM - Computer Aided Manufacturing", StartDate: new Date("05/14/2025"), EndDate: new Date("05/16/2025"), Duration: 4, Progress: 30, Predecessor: "25" },
+    { TaskID: 27, TaskName: "Finalize the design", StartDate: new Date("04/16/2025"), EndDate: new Date("04/16/2025"), Duration: 0, Progress: 40, Predecessor: "26" },
+    { TaskID: 28, TaskName: "Prototype testing", StartDate: new Date("05/17/2025"), EndDate: new Date("05/22/2025"), Duration: 4, Progress: 30, Predecessor: "27" },
+    { TaskID: 29, TaskName: "Include feedback", StartDate: new Date("05/17/2025"), EndDate: new Date("05/22/2025"), Duration: 4, Predecessor: "28ss", Indicators: [{ date: new Date("05/30/2025"), name: "Production phase", tooltip: "Production phase completed", iconClass: "okIcon e-icons" }] },
+    { TaskID: 30, TaskName: "Manufacturing", StartDate: new Date("05/23/2025"), EndDate: new Date("05/29/2025"), Duration: 5, Progress: 30, Predecessor: "28,29" },
+    { TaskID: 31, TaskName: "Assembling material into finished goods", StartDate: new Date("05/30/2025"), EndDate: new Date("06/05/2025"), Duration: 5, Progress: 40, Predecessor: "30" },
+    { TaskID: 32, TaskName: "Final product development", StartDate: new Date("06/06/2025"), EndDate: new Date("06/13/2025"), Progress: 30 },
+    { TaskID: 33, TaskName: "Important improvement", StartDate: new Date("06/06/2025"), EndDate: new Date("06/10/2025"), Duration: 3, ParentId: 32, Predecessor: "31" },
+    { TaskID: 34, TaskName: "Customer testing and feedback", StartDate: new Date("06/11/2025"), EndDate: new Date("06/13/2025"), Duration: 4, Progress: 30, ParentId: 32, Predecessor: "33" },
+    { TaskID: 35, TaskName: "Final product development", StartDate: new Date("06/14/2025"), EndDate: new Date("06/19/2025"), Progress: 40 },
+    { TaskID: 36, TaskName: "Important improvement", StartDate: new Date("06/14/2025"), EndDate: new Date("06/19/2025"), Duration: 4, Progress: 30, ParentId: 35, Predecessor: "34" },
+    { TaskID: 37, TaskName: "Address any unforeseen issues", StartDate: new Date("06/14/2025"), EndDate: new Date("06/19/2025"), Duration: 4, Progress: 30, Predecessor: "36ss", ParentId: 35, Indicators: [{ date: new Date("06/30/2025"), name: "Sales and marketing", tooltip: "Sales and marketing", iconClass: "description e-icons" }] },
+    { TaskID: 38, TaskName: "Finalize the product", StartDate: new Date("06/20/2025"), EndDate: new Date("07/01/2025"), Progress: 40 },
+    { TaskID: 39, TaskName: "Branding the product", StartDate: new Date("06/20/2025"), EndDate: new Date("06/25/2025"), Duration: 4, Progress: 30, ParentId: 38, Predecessor: "37" },
+    { TaskID: 40, TaskName: "Marketing and presales", StartDate: new Date("06/26/2025"), EndDate: new Date("07/01/2025"), Duration: 4, ParentId: 38, Predecessor: "39" }
+];
+
+export default function Gantt() {
+  let ganttInstance: GanttComponent;
+  const taskFields: TaskFieldsModel = {
+    id: 'TaskID',
+    name: 'TaskName',
+    startDate: 'StartDate',
+    endDate: 'EndDate',
+    duration: 'Duration',
+    progress: 'Progress',
+    dependency: 'Predecessor',
+    parentID: 'ParentId'
+  };
+  const labelSettings: LabelSettingsModel = {
+    leftLabel: 'TaskName'
+  };
+  const splitterSettings: SplitterSettingsModel = {
+    columnIndex: 2
+  };
+  const projectStartDate: Date = new Date('03/26/2025');
+  const projectEndDate: Date = new Date('07/20/2025');
+  const onCreated = (): void => {
+    if (document.querySelector('.e-bigger')) {
+      ganttInstance.rowHeight = 48;
+      ganttInstance.taskbarHeight = 28;
+    }
+  }
+  return (
+    <div className='control-pane' style={{ padding: '50px', margin: '0 auto'}}>
+        <GanttComponent id='Default' ref={(gantt: GanttComponent) => { ganttInstance = gantt} } dataSource={taskData} treeColumnIndex={1}
+          taskFields={taskFields} splitterSettings={splitterSettings} labelSettings={labelSettings} height='650px' taskbarHeight={25} rowHeight={46}
+          projectStartDate={projectStartDate} projectEndDate={projectEndDate} created={onCreated}>
+          <ColumnsDirective>
+            <ColumnDirective field='TaskID' width='80' ></ColumnDirective>
+            <ColumnDirective field='TaskName' headerText='Job Name' width='250' clipMode='EllipsisWithTooltip'></ColumnDirective>
+            <ColumnDirective field='StartDate'></ColumnDirective>
+            <ColumnDirective field='Duration'></ColumnDirective>
+            <ColumnDirective field='Progress'></ColumnDirective>
+            <ColumnDirective field='Predecessor'></ColumnDirective>
+          </ColumnsDirective>
+          <Inject services={[Selection]} />
+        </GanttComponent>
+    </div>
+  )
+}