install workflow

Dashboard/package.json

@@ -18,6 +18,7 @@
         "react-icons": "^4.4.0",
         "react-router": "^6.3.0",
         "react-router-dom": "^6.3.0",
+        "reactflow": "^11.5.3",
         "stripe": "^11.0.0",
         "the-new-css-reset": "^1.7.3",
         "typescript": "^4.6.4",

Dashboard/src/Components/Workflow/Workflow.tsx

@@ -0,0 +1,46 @@
+import React, { FunctionComponent, useCallback } from 'react';
+import ReactFlow, {
+    MiniMap,
+    Controls,
+    Background,
+    useNodesState,
+    useEdgesState,
+    addEdge,
+} from 'reactflow';
+// 👇 you need to import the reactflow styles
+import 'reactflow/dist/style.css';
+
+const initialNodes = [
+    { id: '1', position: { x: 0, y: 0 }, data: { label: '1' } },
+    { id: '2', position: { x: 0, y: 100 }, data: { label: '2' } },
+];
+
+const initialEdges = [{ id: 'e1-2', source: '1', target: '2' }];
+
+export interface ComponentProps {
+    name: string;
+}
+
+
+const Workflow: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
+    const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
+    const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+
+    const onConnect = useCallback((params: any) => setEdges((eds) => addEdge(params, eds)), [setEdges]);
+
+    return (
+        <ReactFlow
+            nodes={nodes}
+            edges={edges}
+            onNodesChange={onNodesChange}
+            onEdgesChange={onEdgesChange}
+            onConnect={onConnect}
+        >
+            <MiniMap />
+            <Controls />
+            <Background />
+        </ReactFlow>
+    );
+}
+
+export default Workflow; 

Dashboard/src/Pages/Workflow/View/Index.tsx

@@ -7,6 +7,7 @@ import PageComponentProps from '../../PageComponentProps';
 import SideMenu from './SideMenu';
 import Navigation from 'CommonUI/src/Utils/Navigation';
 import ObjectID from 'Common/Types/ObjectID';
+import Workflow from '../../../Components/Workflow/Workflow';
 
 const Delete: FunctionComponent<PageComponentProps> = (
     _props: PageComponentProps
@@ -48,7 +49,10 @@ const Delete: FunctionComponent<PageComponentProps> = (
             ]}
             sideMenu={<SideMenu modelId={modelId} />}
         >
-            
+
+
+            <Workflow name="Workflow" />
+
         </Page>
     );
 };