@evenicanpm/admin-integrate 1.1.0

package/src/components/header/header.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import { Box, Typography, AppBar, Toolbar, Stack } from "@mui/material";
+import { Theme, useTheme } from "@mui/material";
+
+interface Props {
+  title: string; // e.g. Executions
+  section: string; // e.g. e4Integrate
+}
+
+const IntegrateHeader: React.FC<Props> = (props: Props) => {
+  const theme = useTheme();
+  const styles = getStyles(theme);
+
+  return (
+    <Box sx={{ flexGrow: 1 }}>
+      <AppBar position="static" sx={styles.appbar} elevation={2}>
+        <Toolbar sx={styles.toolbar}>
+          <Stack>
+            <Typography variant="body1" color="info.main">
+              {props.section}
+            </Typography>
+            <Typography variant="h4">{props.title}</Typography>
+          </Stack>
+        </Toolbar>
+      </AppBar>
+    </Box>
+  );
+};
+
+const getStyles = (theme: Theme) => {
+  return {
+    appbar: {
+      color: "text.primary",
+    },
+    toolbar: {
+      backgroundColor: "white",
+      padding: theme.spacing(2, 0),
+    },
+  };
+};
+
+export default IntegrateHeader;

package/src/components/header/index.ts

@@ -0,0 +1,3 @@
+export { default as IntegrateHeader } from "./header";
+export { default as DashboardListHeader } from "./dashboard-list-header";
+export { default as ExecutionDetailsHeader } from "./execution-details-header";

package/src/components/icons/up-down.tsx

@@ -0,0 +1,21 @@
+import createSvgIcon from "@mui/material/utils/createSvgIcon";
+
+const UpDown = createSvgIcon(
+  <svg viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M8.64847 6.88354H3.35158C3.04454 6.88354 2.86173 7.2269 3.03517 7.4812L5.68362 11.3824C5.83596 11.6062 6.16526 11.6062 6.3176 11.3824L8.96605 7.4812C9.13714 7.2269 8.9555 6.88354 8.64847 6.88354Z"
+      fill="currentColor"
+    />
+    <path
+      d="M8.64852 6.76641C8.54188 6.76641 8.43524 6.76641 8.32743 6.76641C8.05204 6.76641 7.77782 6.76641 7.50243 6.76641C7.13329 6.76641 6.76532 6.76641 6.39618 6.76641C6.0036 6.76641 5.61102 6.76641 5.21845 6.76641C4.87274 6.76641 4.52821 6.76641 4.18251 6.76641C3.95517 6.76641 3.72783 6.76641 3.49931 6.76641C3.45361 6.76641 3.40673 6.76641 3.36103 6.76641C3.17705 6.76758 3.00478 6.85898 2.91455 7.02187C2.82197 7.18828 2.83251 7.39102 2.93916 7.54922C2.96728 7.59141 2.9954 7.63242 3.02353 7.67344C3.16064 7.87617 3.29892 8.07891 3.43603 8.28164C3.64111 8.58281 3.84618 8.88516 4.05009 9.18633C4.26923 9.50977 4.48954 9.8332 4.70868 10.1566C4.89384 10.4285 5.07782 10.7016 5.26298 10.9734C5.36259 11.1211 5.46337 11.2687 5.56298 11.4164C5.63798 11.5277 5.73642 11.6168 5.87001 11.6508C6.08446 11.7059 6.2954 11.6145 6.41962 11.4363C6.50282 11.3168 6.58368 11.1949 6.66571 11.0742C6.84032 10.8164 7.01493 10.5598 7.18954 10.302C7.40751 9.97969 7.62665 9.65859 7.84461 9.33633C8.05438 9.02812 8.26415 8.71875 8.47274 8.41055C8.62391 8.18789 8.77508 7.96406 8.92625 7.74141C9.02703 7.59375 9.14891 7.44961 9.14539 7.26094C9.14422 6.98672 8.91922 6.77109 8.64852 6.76641C8.49735 6.76406 8.49735 6.99844 8.64852 7.00078C8.85125 7.0043 8.98133 7.22109 8.88055 7.39687C8.8618 7.42969 8.83836 7.46133 8.81727 7.49297C8.70125 7.66289 8.58641 7.83398 8.47039 8.00391C8.06493 8.60156 7.65946 9.19922 7.25282 9.79687C6.93173 10.2703 6.61063 10.7437 6.28954 11.216C6.2661 11.2512 6.24266 11.2863 6.21805 11.3203C6.12313 11.4504 5.94149 11.4715 5.82548 11.3684C5.79149 11.3379 5.76806 11.2992 5.74227 11.2617C5.69774 11.1961 5.65321 11.1305 5.60868 11.0648C5.2454 10.5305 4.88212 9.99492 4.52001 9.46055C4.13915 8.89922 3.75712 8.33672 3.37626 7.77539C3.29775 7.65937 3.21806 7.54453 3.14072 7.42852C3.05634 7.30195 3.07392 7.14726 3.18642 7.0582C3.2497 7.00898 3.31298 7.00078 3.3915 7.00078C3.86025 7.00078 4.33017 7.00078 4.79892 7.00078C5.55009 7.00078 6.30126 7.00078 7.05243 7.00078C7.55985 7.00078 8.0661 7.00078 8.57352 7.00078C8.5993 7.00078 8.62391 7.00078 8.64969 7.00078C8.79852 7.00078 8.79969 6.76641 8.64852 6.76641ZM8.64852 5.11641H3.35165C3.04462 5.11641 2.86181 4.77305 3.03525 4.51875L5.68368 0.617578C5.83602 0.39375 6.16532 0.39375 6.31766 0.617578L8.9661 4.51875C9.13719 4.77305 8.95555 5.11641 8.64852 5.11641Z"
+      fill="currentColor"
+    />
+    <path
+      d="M8.64832 4.99922C8.28153 4.99922 7.91473 4.99922 7.54676 4.99922C6.80262 4.99922 6.05849 4.99922 5.31552 4.99922C4.73193 4.99922 4.14834 4.99922 3.56592 4.99922C3.50615 4.99922 3.44639 4.99922 3.38662 4.99922C3.30459 4.99922 3.23428 4.98515 3.17803 4.93476C3.07022 4.83633 3.05733 4.6957 3.1417 4.57031C3.16865 4.53047 3.19561 4.49062 3.22256 4.45195C3.55068 3.96914 3.87881 3.48633 4.20576 3.00234C4.60888 2.4082 5.01201 1.81524 5.41513 1.2211C5.52529 1.05821 5.63661 0.895317 5.74677 0.732426C5.77372 0.692583 5.7995 0.650395 5.83583 0.62227C5.95536 0.52852 6.12763 0.55313 6.21903 0.680864C6.30106 0.794536 6.37724 0.912895 6.45575 1.02891C6.62333 1.27618 6.79208 1.52461 6.95966 1.77188C7.37801 2.38828 7.79637 3.00469 8.21473 3.61992C8.37293 3.85312 8.53113 4.08515 8.68816 4.31836C8.7327 4.38281 8.77605 4.44844 8.82059 4.51289C8.8452 4.55039 8.87566 4.58789 8.89441 4.6289C8.96824 4.8 8.84051 4.9957 8.64832 4.99922C8.49715 5.00156 8.49715 5.23593 8.64832 5.23359C8.92371 5.2289 9.15926 5.00039 9.14871 4.71914C9.14519 4.60898 9.10301 4.51289 9.04324 4.425C8.93777 4.26914 8.8323 4.11445 8.72684 3.95859C8.53934 3.68203 8.35184 3.40547 8.16317 3.12891C7.94285 2.80547 7.72371 2.48086 7.5034 2.15742C7.30184 1.85977 7.10028 1.56211 6.89755 1.26563C6.76395 1.06875 6.62919 0.870707 6.49559 0.673833C6.47098 0.637505 6.44638 0.600005 6.42059 0.563677C6.29403 0.382036 6.06903 0.287115 5.85224 0.356255C5.65419 0.418364 5.56044 0.591802 5.45146 0.751176C5.30146 0.971488 5.15263 1.1918 5.00263 1.41328C4.79287 1.72266 4.5831 2.03203 4.37216 2.34141C4.1542 2.6625 3.93623 2.98242 3.71943 3.30352C3.54365 3.5625 3.3667 3.82266 3.19092 4.08164C3.10654 4.20586 3.021 4.3289 2.93779 4.45429C2.82998 4.61601 2.82178 4.82929 2.9249 4.99687C3.01983 5.15039 3.18389 5.23476 3.36318 5.23593C3.50615 5.23711 3.65029 5.23593 3.79326 5.23593C4.08974 5.23593 4.38623 5.23593 4.68271 5.23593C5.06357 5.23593 5.44325 5.23593 5.82411 5.23593C6.21317 5.23593 6.60223 5.23593 6.9913 5.23593C7.31942 5.23593 7.64872 5.23593 7.97684 5.23593C8.17371 5.23593 8.37059 5.23593 8.56746 5.23593C8.59441 5.23593 8.62137 5.23593 8.64832 5.23593C8.79832 5.23359 8.79949 4.99922 8.64832 4.99922Z"
+      fill="currentColor"
+    />
+  </svg>,
+  "UpDown",
+);
+
+export default UpDown;

package/src/components/integration-view/edges/default-edge.tsx

@@ -0,0 +1,23 @@
+import { BaseEdge, EdgeProps, getSmoothStepPath } from "@xyflow/react";
+
+export function DefaultEdge({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+}: EdgeProps): JSX.Element {
+  const [edgePath] = getSmoothStepPath({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    borderRadius: 0,
+  });
+
+  return (
+    <>
+      <BaseEdge id={id} path={edgePath} />
+    </>
+  );
+}

package/src/components/integration-view/elk-layout-options.ts

@@ -0,0 +1,39 @@
+import { LayoutOptions } from "elkjs";
+
+export const layoutOptions: LayoutOptions = {
+  "elk.algorithm": "layered",
+  "elk.direction": "DOWN",
+
+  // Arrange parent and child nodes in clear layers
+  "org.eclipse.elk.hierarchyHandling": "INCLUDE_CHILDREN",
+
+  // Center parent nodes among their children, children immediately below
+  "org.eclipse.elk.layered.contentAlignment": "H_CENTER,V_TOP",
+
+  // Reduce edge crossings
+  "org.eclipse.elk.layered.crossingMinimization.strategy": "LAYER_SWEEP",
+
+  // Minimize bends and keep edges as short as possible
+  "org.eclipse.elk.layered.nodePlacement.edgeRouting": "ORTHOGONAL",
+  "org.eclipse.elk.layered.nodePlacement.edgeAvoidance": "true",
+  "org.eclipse.elk.layered.nodePlacement.edgeNodeOverlapAvoided": "true",
+  "org.eclipse.elk.layered.nodePlacement.edgeStraightening": "true",
+
+  // Layout spacing options
+  "org.eclipse.elk.layered.spacing.nodeNodeBetweenLayers": "75",
+  "org.eclipse.elk.spacing.nodeNode": "80",
+  "org.eclipse.elk.spacing.portPort": "10",
+
+  // Add spacing between edges that do not share a connection point
+  "org.eclipse.elk.spacing.edgeEdge": "30",
+
+  // Node placement strategy for centered alignment
+  "org.eclipse.elk.layered.nodePlacement.strategy": "SIMPLE",
+
+  // Layering strategy to optimize horizontal alignment
+  "org.eclipse.elk.layered.layering.strategy": "NETWORK_SIMPLEX",
+
+  // Merge edges to have them originate from the same point
+  "org.eclipse.elk.layered.mergeEdges": "true",
+  "org.eclipse.elk.layered.considerModelOrder.strategy": "PREFER_NODES",
+};

package/src/components/integration-view/elk-types.ts

@@ -0,0 +1,19 @@
+import { ElkExtendedEdge, ElkNode } from "elkjs";
+import { extend } from "lodash";
+
+export interface ElkNodeWithFlow extends ElkNode {
+  type?: string;
+  data?: {
+    label: string;
+  };
+  position?: {
+    x: number;
+    y: number;
+  };
+  children?: ElkNodeWithFlow[];
+  extent?: string;
+}
+
+export interface ElkExtendedEdgeWithFlow extends ElkExtendedEdge {
+  type?: string;
+}

package/src/components/integration-view/flow-types.tsx

@@ -0,0 +1,16 @@
+import { DefaultEdge } from "./edges/default-edge";
+import { ConnectionNode } from "./nodes/connection-node";
+import { EntryNode } from "./nodes/entry-node";
+import { GroupNode } from "./nodes/group-node";
+import { TaskNode } from "./nodes/task-node";
+
+export const edgeTypes = {
+  "default-edge": DefaultEdge,
+};
+
+export const nodeTypes = {
+  "connection-node": ConnectionNode,
+  "entry-node": EntryNode,
+  "group-node": GroupNode,
+  "task-node": TaskNode, // Assuming you have a custom connection node
+};

package/src/components/integration-view/index.ts

@@ -0,0 +1 @@
+export { default as IntegrationView } from "./integration-view";

package/src/components/integration-view/integration-view.tsx

@@ -0,0 +1,159 @@
+"use client";
+
+import React, { useCallback, useLayoutEffect } from "react";
+import { Box, Typography, AppBar, Toolbar, Stack } from "@mui/material";
+import { Theme, useTheme } from "@mui/material";
+
+import ELK from "elkjs/lib/elk.bundled.js";
+
+import "@xyflow/react/dist/style.css";
+
+import {
+  Background,
+  ReactFlow,
+  ReactFlowProvider,
+  useEdgesState,
+  useNodesState,
+  useReactFlow,
+} from "@xyflow/react";
+
+import { nodeTypes, edgeTypes } from "./flow-types";
+
+import { layoutOptions as elkOptions } from "./elk-layout-options";
+
+import { initialNodes, initialEdges } from "./temp-data/initialElements";
+import { ElkNodeWithFlow } from "./elk-types";
+
+const elk = new ELK();
+
+const getLayoutedElements = (nodes: any, edges: any, options: any = {}) => {
+  const graph: ElkNodeWithFlow = {
+    id: "root",
+    children: nodes.map((node: any) => ({
+      ...node,
+      targetPosition: "top",
+      sourcePosition: "bottom",
+      // Hardcoded until width and height calculation is implemented
+      width: 150,
+      height: 50,
+    })),
+    edges: edges,
+  };
+
+  return elk
+    .layout(graph, { layoutOptions: options })
+    .then((layoutedGraph: any) => {
+      let nodeItems: any = [];
+
+      layoutedGraph.children.forEach((node: any) => {
+        nodeItems.push({
+          ...node,
+          // React Flow expects a position property on the node instead of `x`
+          // and `y` fields.
+          height: node.height,
+          position: { x: node.x, y: node.y },
+        });
+
+        if (node.children) {
+          node.children.forEach((node2: any) => {
+            nodeItems.push({
+              ...node2,
+              // React Flow expects a position property on the node instead of `x`
+              // and `y` fields.
+              targetPosition: "top",
+              sourcePosition: "bottom",
+              position: { x: node2.x, y: node2.y },
+              parentId: node.id,
+            });
+          });
+        }
+      });
+
+      layoutedGraph.edges.forEach((edge: any) => {
+        edge.source = edge.sources[0];
+        edge.target = edge.targets[0];
+      });
+
+      return {
+        nodes: nodeItems,
+        edges: layoutedGraph.edges,
+      };
+    })
+    .catch(console.error);
+};
+
+interface Props {
+  title?: string; // e.g. Executions
+  section?: string; // e.g. e4Integrate
+}
+
+const IntegrationView: React.FC<Props> = (props: Props) => {
+  const theme = useTheme();
+  const styles = getStyles(theme);
+
+  const [nodes, setNodes, onNodesChange] = useNodesState<any>([]);
+  const [edges, setEdges, onEdgesChange] = useEdgesState<any>([]);
+  const { fitView } = useReactFlow();
+
+  const onConnect = useCallback((params: any) => {}, []);
+  const onLayout = useCallback(
+    ({ useInitialNodes = false }: any) => {
+      const opts = { ...elkOptions };
+      const ns = useInitialNodes ? initialNodes : nodes;
+      const es = useInitialNodes ? initialEdges : edges;
+
+      getLayoutedElements(ns, es, opts).then(
+        ({ nodes: layoutedNodes, edges: layoutedEdges }: any) => {
+          setNodes(layoutedNodes);
+          setEdges(layoutedEdges);
+          fitView();
+        }
+      );
+    },
+    [nodes, edges]
+  );
+
+  // Calculate the initial layout on mount.
+  useLayoutEffect(() => {
+    onLayout({ useInitialNodes: true });
+  }, []);
+
+  return (
+    <Box sx={{ flexGrow: 1 }}>
+      <ReactFlowProvider>
+        <Box sx={{ width: "750px", height: "750px" }}>
+          <ReactFlow
+            nodes={nodes}
+            edges={edges}
+            nodeTypes={nodeTypes}
+            edgeTypes={edgeTypes}
+            onConnect={onConnect}
+            onNodesChange={onNodesChange}
+            onEdgesChange={onEdgesChange}
+            fitView
+          >
+            <Background />
+          </ReactFlow>
+        </Box>
+      </ReactFlowProvider>
+    </Box>
+  );
+};
+
+const getStyles = (theme: Theme) => {
+  return {
+    appbar: {
+      color: "#000",
+    },
+    toolbar: {
+      backgroundColor: "#fff",
+      padding: theme.spacing(2, 0),
+    },
+  };
+};
+
+export default () => (
+  <ReactFlowProvider>
+    <IntegrationView />
+  </ReactFlowProvider>
+);

package/src/components/integration-view/nodes/connection-node.tsx

@@ -0,0 +1,10 @@
+import { Handle, NodeProps, Position } from "@xyflow/react";
+
+export function ConnectionNode(props: NodeProps): JSX.Element {
+  return (
+    <div>
+      <Handle type="source" position={Position.Bottom} />
+      <Handle type="target" position={Position.Top} />
+    </div>
+  );
+}

package/src/components/integration-view/nodes/entry-node.tsx

@@ -0,0 +1,10 @@
+import { Handle, NodeProps, Position } from "@xyflow/react";
+
+export function EntryNode(props: NodeProps): JSX.Element {
+  return (
+    <div>
+      <Handle type="source" position={Position.Bottom} />
+      <Handle type="target" position={Position.Top} />
+    </div>
+  );
+}

package/src/components/integration-view/nodes/group-node.tsx

@@ -0,0 +1,10 @@
+import { Handle, NodeProps, Position } from "@xyflow/react";
+
+export function GroupNode(props: NodeProps): JSX.Element {
+  return (
+    <div>
+      <Handle type="source" position={Position.Bottom} />
+      <Handle type="target" position={Position.Top} />
+    </div>
+  );
+}

package/src/components/integration-view/nodes/task-node.tsx

@@ -0,0 +1,17 @@
+import { Handle, NodeProps, Position } from "@xyflow/react";
+
+export function TaskNode(props: NodeProps): JSX.Element {
+  return (
+    <div
+      className="task-node"
+      style={{
+        padding: "10px",
+        border: "1px solid #ddd",
+        borderRadius: "30px",
+      }}
+    >
+      <Handle type="source" position={Position.Bottom} />
+      <Handle type="target" position={Position.Top} />
+    </div>
+  );
+}

package/src/components/integration-view/temp-data/initialElements.ts

@@ -0,0 +1,238 @@
+import { ElkExtendedEdge } from "elkjs";
+import { ElkExtendedEdgeWithFlow, ElkNodeWithFlow } from "../elk-//types";
+
+const position = { x: 0, y: 0 };
+
+export const initialNodes: ElkNodeWithFlow[] = [
+  {
+    id: "1",
+    type: "task-node",
+    data: { label: "input" },
+    position,
+    layoutOptions: {
+      "org.eclipse.elk.priority": "1",
+    },
+  },
+
+  {
+    id: "2",
+    data: { label: "node 2" },
+    position,
+    //type: "custom-group",
+    children: [
+      {
+        id: "2gs",
+        data: { label: "Group 1" },
+        position,
+        width: 150,
+        height: 50,
+        //extent: "parent",
+      },
+
+      {
+        id: "2g1",
+        data: { label: "2g1" },
+        position,
+        width: 150,
+        height: 70,
+        extent: "parent",
+      },
+      {
+        id: "2g3",
+        data: { label: "2g3" },
+        position,
+        width: 150,
+        height: 20,
+        extent: "parent",
+      },
+      {
+        id: "2g4",
+        data: { label: "2g4" },
+        position,
+        width: 150,
+        height: 60,
+        extent: "parent",
+      },
+      {
+        id: "2g2",
+        data: { label: "2g2" },
+        position,
+        width: 150,
+        height: 80,
+        extent: "parent",
+      },
+    ],
+    layoutOptions: {
+      "org.eclipse.elk.priority": "2",
+    },
+  },
+
+  {
+    id: "3",
+    data: { label: "node 2" },
+    position,
+    //height: 400,
+    //width: 400,
+    //type: "custom-group",
+    children: [
+      {
+        id: "3gs",
+        data: { label: "Group 1" },
+        position,
+        width: 150,
+        height: 50,
+        extent: "parent",
+      },
+      {
+        id: "3g1",
+        data: { label: "2g1" },
+        position,
+        width: 150,
+        height: 50,
+        extent: "parent",
+      },
+      {
+        id: "3g1-b",
+        data: { label: "2g1" },
+        position,
+        width: 150,
+        height: 50,
+        extent: "parent",
+      },
+      {
+        id: "3gconnect",
+        data: { label: "2g1" },
+        position,
+        //type: "connection-node",
+        width: 1,
+        height: 1,
+        extent: "parent",
+      },
+      {
+        id: "3g2",
+        data: { label: "2g2" },
+        position,
+        width: 150,
+        height: 50,
+        extent: "parent",
+      },
+      {
+        id: "3g3",
+        data: { label: "2g3" },
+        position,
+        width: 150,
+        height: 50,
+        extent: "parent",
+      },
+      {
+        id: "3g4",
+        data: { label: "2g4" },
+        position,
+        width: 150,
+        height: 50,
+        extent: "parent",
+      },
+    ],
+    layoutOptions: {
+      "org.eclipse.elk.priority": "2",
+    },
+  },
+  {
+    id: "4",
+    data: { label: "node 2" },
+    position,
+    //height: 400,
+    //width: 400,
+    //type: "custom-group",
+    children: [
+      {
+        id: "4gs",
+        data: { label: "Group 1" },
+        position,
+        width: 150,
+        height: 50,
+        extent: "parent",
+      },
+      {
+        id: "4g1",
+        data: { label: "2g1" },
+        position,
+        width: 150,
+        height: 50,
+        extent: "parent",
+      },
+      {
+        id: "4g2",
+        data: { label: "2g2" },
+        position,
+        width: 150,
+        height: 50,
+        extent: "parent",
+      },
+      {
+        id: "4g3",
+        data: { label: "2g3" },
+        position,
+        width: 150,
+        height: 50,
+        extent: "parent",
+      },
+      {
+        id: "4g4",
+        data: { label: "2g4" },
+        position,
+        width: 150,
+        height: 50,
+        extent: "parent",
+      },
+    ],
+    layoutOptions: {
+      "org.eclipse.elk.priority": "2",
+    },
+  },
+];
+
+export const initialEdges: ElkExtendedEdgeWithFlow[] = [
+  { id: "e1-2", sources: ["1"], targets: ["2"], type: "default-edge" },
+  { id: "2gs-2g1", sources: ["2gs"], targets: ["2g1"], type: "default-edge" },
+  { id: "2gs-2g2", sources: ["2gs"], targets: ["2g2"], type: "default-edge" },
+  { id: "2gs-2g3", sources: ["2gs"], targets: ["2g3"], type: "default-edge" },
+  { id: "2g1-2g4", sources: ["2g1"], targets: ["2g4"], type: "default-edge" },
+  { id: "2g2-2g4", sources: ["2g2"], targets: ["2g4"], type: "default-edge" },
+  { id: "2g3-2g4", sources: ["2g3"], targets: ["2g4"], type: "default-edge" },
+  //{ id: "e1-3", sources: ["1"], targets: ["3"], type: "default-edge" },
+  { id: "3gs-3g1", sources: ["3gs"], targets: ["3g1"], type: "default-edge" },
+  { id: "3gs-3gb", sources: ["3gs"], targets: ["3g1-b"], type: "default-edge" },
+  {
+    id: "3g1-3gconnect",
+    sources: ["3g1"],
+    targets: ["3gconnect"],
+    type: "default-edge",
+  },
+  {
+    id: "3g1-b-3gconnect",
+    sources: ["3g1-b"],
+    targets: ["3gconnect"],
+    type: "default-edge",
+  },
+  {
+    id: "3g1-3g2",
+    sources: ["3gconnect"],
+    targets: ["3g2"],
+    type: "default-edge",
+  },
+  {
+    id: "3g1-3g3",
+    sources: ["3gconnect"],
+    targets: ["3g3"],
+    type: "default-edge",
+  },
+  {
+    id: "3g1-3g4",
+    sources: ["3gconnect"],
+    targets: ["3g4"],
+    type: "default-edge",
+  },
+  { id: "e1-3", sources: ["1"], targets: ["3"], type: "default-edge" },
+  { id: "e1-4", sources: ["1"], targets: ["4"], type: "default-edge" },
+];

package/src/components/integration-view/types.ts

@@ -0,0 +1,12 @@
+interface ElkOptions {}
+
+interface ElkPosition {}
+
+interface ElkItem {
+  id: string;
+  type: "input";
+  data: { label: string };
+  x: number;
+  y: number;
+  layoutOptions: ElkOptions;
+}

package/src/components/layouts/index.ts

@@ -0,0 +1,2 @@
+export { default as MainLayout } from "./main-layout";
+export { default as RootContainer } from "./root-container";

package/src/components/layouts/main-layout.tsx

@@ -0,0 +1,28 @@
+"use client";
+import { styled } from "@mui/material";
+
+import BodyWrapper from "@evenicanpm/admin-core/components/layouts/main-dashboard/dashboard-body-wrapper";
+import DashboardSidebar from "@evenicanpm/admin-core/components/layouts/main-dashboard/dashboard-sidebar/dashboard-sidebar";
+
+import { LayoutProvider } from "@evenicanpm/admin-core/components/layouts/main-dashboard/dashboard-layout-context";
+
+// STYLED COMPONENT
+const StyledContainer = styled("div")(({ theme }) => ({
+  margin: 0,
+  padding: 0,
+}));
+
+export default function MainLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <LayoutProvider>
+      <DashboardSidebar />
+      <BodyWrapper>
+        <StyledContainer>{children}</StyledContainer>
+      </BodyWrapper>
+    </LayoutProvider>
+  );
+}