refactor(react-flow): add existing nodes validate

Merge branch 'master' into VORKOUT-16
feat(nodes): add start node and create new node function
2025-08-07 13:02:52 +05:00 · 2025-08-06 12:20:28 +05:00 · 2025-08-06 12:19:55 +05:00 · 2025-08-05 21:37:07 +05:00 · 2025-07-22 10:59:41 +05:00 · 2025-07-22 08:08:15 +05:00
24 changed files with 1504 additions and 296 deletions
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "client",
-  "version": "0.0.3",
+  "version": "0.0.5",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "client",
-      "version": "0.0.3",
+      "version": "0.0.5",
      "dependencies": {
        "@ant-design/icons": "^5.6.1",
        "@testing-library/dom": "^10.4.0",
@@ -16,6 +16,7 @@
        "@types/jest": "^27.5.2",
        "@types/react": "^19.0.11",
        "@types/react-dom": "^19.0.4",
+        "@xyflow/react": "^12.8.1",
        "antd": "^5.24.7",
        "axios": "^1.9.0",
        "axios-retry": "^4.5.0",
@@ -1567,6 +1568,55 @@
        "@babel/types": "^7.20.7"
      }
    },
+    "node_modules/@types/d3-color": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
+      "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-drag": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-drag/-/d3-drag-3.0.7.tgz",
+      "integrity": "sha512-HE3jVKlzU9AaMazNufooRJ5ZpWmLIoc90A37WU2JMmeq28w1FQqCZswHZ3xR+SuxYftzHq6WU6KJHvqxKzTxxQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-selection": "*"
+      }
+    },
+    "node_modules/@types/d3-interpolate": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
+      "integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-color": "*"
+      }
+    },
+    "node_modules/@types/d3-selection": {
+      "version": "3.0.11",
+      "resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-3.0.11.tgz",
+      "integrity": "sha512-bhAXu23DJWsrI45xafYpkQ4NtcKMwWnAC/vKrd2l+nxMFuvOT3XMYTIj2opv8vq8AO5Yh7Qac/nSeP/3zjTK0w==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-transition": {
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/@types/d3-transition/-/d3-transition-3.0.9.tgz",
+      "integrity": "sha512-uZS5shfxzO3rGlu0cC3bjmMFKsXv+SmZZcgp0KD22ts4uGXp5EVYGzu/0YdwZeKmddhcAccYtREJKkPfXkZuCg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-selection": "*"
+      }
+    },
+    "node_modules/@types/d3-zoom": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/@types/d3-zoom/-/d3-zoom-3.0.8.tgz",
+      "integrity": "sha512-iqMC4/YlFCSlO8+2Ii1GGGliCAY4XdeG748w5vQUbevlbDu0zSjH/+jojorQVBK/se0j6DUFNPBGSqD3YWYnDw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-interpolate": "*",
+        "@types/d3-selection": "*"
+      }
+    },
    "node_modules/@types/estree": {
      "version": "1.0.8",
      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
@@ -1633,6 +1683,66 @@
        "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0-beta.0"
      }
    },
+    "node_modules/@xyflow/react": {
+      "version": "12.8.1",
+      "resolved": "https://registry.npmjs.org/@xyflow/react/-/react-12.8.1.tgz",
+      "integrity": "sha512-t5Rame4Gc/540VcOZd28yFe9Xd8lyjKUX+VTiyb1x4ykNXZH5zyDmsu+lj9je2O/jGBVb0pj1Vjcxrxyn+Xk2g==",
+      "license": "MIT",
+      "dependencies": {
+        "@xyflow/system": "0.0.65",
+        "classcat": "^5.0.3",
+        "zustand": "^4.4.0"
+      },
+      "peerDependencies": {
+        "react": ">=17",
+        "react-dom": ">=17"
+      }
+    },
+    "node_modules/@xyflow/react/node_modules/zustand": {
+      "version": "4.5.7",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.5.7.tgz",
+      "integrity": "sha512-CHOUy7mu3lbD6o6LJLfllpjkzhHXSBlX8B9+qPddUsIfeF5S/UZ5q0kmCsnRqT1UHFQZchNFDDzMbQsuesHWlw==",
+      "license": "MIT",
+      "dependencies": {
+        "use-sync-external-store": "^1.2.2"
+      },
+      "engines": {
+        "node": ">=12.7.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16.8",
+        "immer": ">=9.0.6",
+        "react": ">=16.8"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@xyflow/system": {
+      "version": "0.0.65",
+      "resolved": "https://registry.npmjs.org/@xyflow/system/-/system-0.0.65.tgz",
+      "integrity": "sha512-AliQPQeurQMoNlOdySnRoDQl9yDSA/1Lqi47Eo0m98lHcfrTdD9jK75H0tiGj+0qRC10SKNUXyMkT0KL0opg4g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-drag": "^3.0.7",
+        "@types/d3-interpolate": "^3.0.4",
+        "@types/d3-selection": "^3.0.10",
+        "@types/d3-transition": "^3.0.8",
+        "@types/d3-zoom": "^3.0.8",
+        "d3-drag": "^3.0.0",
+        "d3-interpolate": "^3.0.1",
+        "d3-selection": "^3.0.0",
+        "d3-zoom": "^3.0.0"
+      }
+    },
    "node_modules/ansi-regex": {
      "version": "5.0.1",
      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
@@ -2160,6 +2270,12 @@
        "node": ">= 0.10"
      }
    },
+    "node_modules/classcat": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/classcat/-/classcat-5.0.5.tgz",
+      "integrity": "sha512-JhZUT7JFcQy/EzW605k/ktHtncoo9vnyW/2GspNYwFlN1C/WmjuV/xtS04e9SOkL2sTdw0VAZ2UGCcQ9lR6p6w==",
+      "license": "MIT"
+    },
    "node_modules/classnames": {
      "version": "2.5.1",
      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
@@ -2340,6 +2456,111 @@
      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
      "license": "MIT"
    },
+    "node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-dispatch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
+      "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-drag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-3.0.0.tgz",
+      "integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-selection": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-selection": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
+      "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-transition": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-3.0.1.tgz",
+      "integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3",
+        "d3-dispatch": "1 - 3",
+        "d3-ease": "1 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-timer": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "d3-selection": "2 - 3"
+      }
+    },
+    "node_modules/d3-zoom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-3.0.0.tgz",
+      "integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "2 - 3",
+        "d3-transition": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
    "node_modules/dayjs": {
      "version": "1.11.13",
      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.13.tgz",
@@ -5107,6 +5328,15 @@
        "node": ">= 0.4"
      }
    },
+    "node_modules/use-sync-external-store": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.5.0.tgz",
+      "integrity": "sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
    "node_modules/util": {
      "version": "0.12.5",
      "resolved": "https://registry.npmjs.org/util/-/util-0.12.5.tgz",
--- a/client/package.json
+++ b/client/package.json
@@ -11,6 +11,7 @@
    "@types/jest": "^27.5.2",
    "@types/react": "^19.0.11",
    "@types/react-dom": "^19.0.4",
+    "@xyflow/react": "^12.8.1",
    "antd": "^5.24.7",
    "axios": "^1.9.0",
    "axios-retry": "^4.5.0",
--- a/client/public/icons/node/calculate.svg
+++ b/client/public/icons/node/calculate.svg
@@ -0,0 +1,10 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_381_806" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+<rect width="24" height="24" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_381_806)">
+<path d="M12 13.75H17V12.25H12V13.75ZM12 11.25H17V9.75H12V11.25ZM5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H19C19.55 3 20.0208 3.19583 20.4125 3.5875C20.8042 3.97917 21 4.45 21 5V19C21 19.55 20.8042 20.0208 20.4125 20.4125C20.0208 20.8042 19.55 21 19 21H5ZM5 19H19V5H5V19Z" fill="#606060"/>
+<path d="M9.75 14.0179H7.75V12.5179H9.75V14.0179Z" fill="#606060"/>
+<path d="M9.75 11.5179H7.75V10.0179H9.75V11.5179Z" fill="#606060"/>
+</g>
+</svg>
--- a/client/public/icons/node/home.svg
+++ b/client/public/icons/node/home.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="18" viewBox="0 0 16 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 16H5V10H11V16H14V7L8 2.5L2 7V16ZM0 18V6L8 0L16 6V18H9V12H7V18H0Z" fill="#606060"/>
+</svg>
--- a/client/public/icons/node/ifElse.svg
+++ b/client/public/icons/node/ifElse.svg
@@ -0,0 +1,8 @@
+<svg width="28" height="31" viewBox="0 0 28 31" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 28.6L1.4 30L3 28.425L4.575 30L6 28.6L4.4 27L6 25.425L4.575 24L3 25.6L1.4 24L0 25.425L1.575 27L0 28.6Z" fill="#606060"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13 0C14.1 0 15.0419 0.391472 15.8252 1.1748C16.6085 1.95814 17 2.9 17 4C17 5.1 16.6085 6.04186 15.8252 6.8252C15.0419 7.60853 14.1 8 13 8C11.9 8 10.9581 7.60853 10.1748 6.8252C9.39147 6.04186 9 5.1 9 4C9 2.9 9.39147 1.95814 10.1748 1.1748C10.9581 0.391471 11.9 0 13 0ZM13 2C12.45 2 11.9796 2.19622 11.5879 2.58789C11.1962 2.97956 11 3.45 11 4C11 4.53333 11.1962 5.00039 11.5879 5.40039C11.9795 5.80013 12.4502 6 13 6C13.5498 6 14.0205 5.80013 14.4121 5.40039C14.8038 5.00039 15 4.53333 15 4C15 3.45 14.8038 2.97956 14.4121 2.58789C14.0204 2.19622 13.55 2 13 2Z" fill="#606060"/>
+<path d="M11.8 9H13.8V14H11.8V9Z" fill="#606060"/>
+<path d="M20 27.55L22.825 30.375L27.775 25.425L26.35 24L22.825 27.55L21.4 26.125L20 27.55Z" fill="#606060"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.167 18.417L12.75 24.834L7.25005 19.334H4.00005L4 23H2L2.00005 17.5H7.25005L12.75 12L19.167 18.417ZM8.9229 18.417L12.75 22.2441L16.5772 18.417L12.75 14.5898L8.9229 18.417Z" fill="#606060"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.5 19.334L22 19.334V23H24V17.5L17.5 17.5V19.334Z" fill="#606060"/>
+</svg>
--- a/client/src/components/ContentDrawer.tsx
+++ b/client/src/components/ContentDrawer.tsx
@@ -1,175 +0,0 @@
-import { Drawer } from 'antd';
-import { useEffect, useState } from 'react';
-import { Avatar, Typography } from 'antd';
-import { useTranslation } from 'react-i18next';
-import { useUserSelector } from '@/store/userStore';
-
-interface ContentDrawerProps {
-  open: boolean;
-  closeDrawer: () => void;
-  children: React.ReactNode;
-  type: 'create' | 'edit';
-  login?: string;
-  name?: string;
-  email?: string | null;
-}
-
-export default function ContentDrawer({
-  open,
-  closeDrawer,
-  children,
-  type,
-  login,
-  name,
-  email,
-}: ContentDrawerProps) {
-  const user = useUserSelector();
-  const { t } = useTranslation();
-  const [width, setWidth] = useState<number | string>('30%');
-
-  const calculateWidths = () => {
-    const windowWidth = window.innerWidth;
-    const expanded = Math.max(windowWidth * 0.3, 300);
-    setWidth(expanded);
-  };
-
-  useEffect(() => {
-    calculateWidths();
-    window.addEventListener('resize', calculateWidths);
-    return () => window.removeEventListener('resize', calculateWidths);
-  }, []);
-  console.log(login, user?.login, login === user?.login);
-
-  const editDrawerTitle = (
-    <div
-      style={{
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        gap: 12,
-      }}
-    >
-      <div
-        onClick={closeDrawer}
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          height: '24px',
-          width: '24px',
-          cursor: 'pointer',
-        }}
-      >
-        <img
-          src="./icons/drawer/arrow_back.svg"
-          alt="close_drawer"
-          style={{ height: '16px', width: '16px' }}
-        />
-      </div>
-
-      <div style={{ display: 'flex', alignItems: 'center', gap: 12, flex: 1 }}>
-        <Avatar
-          src={
-            login ? `https://gamma.heado.ru/go/ava?name=${login}` : undefined
-          }
-          size={40}
-          style={{ flexShrink: 0 }}
-        />
-        <div>
-          <Typography.Text
-            strong
-            style={{ display: 'block', fontSize: '20px' }}
-          >
-            {name} {login === user?.login ? t('you') : ''}
-          </Typography.Text>
-          <Typography.Text type="secondary" style={{ fontSize: 14 }}>
-            {email}
-          </Typography.Text>
-        </div>
-      </div>
-
-      <div
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          height: '24px',
-          width: '24px',
-        }}
-      >
-        <img
-          src="./icons/drawer/delete.svg"
-          alt="delete"
-          style={{ height: '18px', width: '16px' }}
-        />
-      </div>
-    </div>
-  );
-
-  const createDrawerTitle = (
-    <div
-      style={{
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        gap: 12,
-      }}
-    >
-      <div
-        onClick={closeDrawer}
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          height: '24px',
-          width: '24px',
-          cursor: 'pointer',
-        }}
-      >
-        <img
-          src="./icons/drawer/arrow_back.svg"
-          alt="close_drawer"
-          style={{ height: '16px', width: '16px' }}
-        />
-      </div>
-
-      <div
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          gap: 12,
-          flex: 1,
-          fontSize: '20px',
-        }}
-      >
-        {t('newAccount')}
-      </div>
-
-      <div
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          height: '24px',
-          width: '24px',
-        }}
-        onClick={closeDrawer}
-      >
-        <img
-          src="./icons/drawer/delete.svg"
-          alt="delete"
-          style={{ height: '18px', width: '16px' }}
-        />
-      </div>
-    </div>
-  );
-
-  return (
-    <Drawer
-      title={type === 'create' ? createDrawerTitle : editDrawerTitle}
-      placement="right"
-      open={open}
-      width={width}
-      destroyOnHidden={true}
-      closable={false}
-    >
-      {children}
-    </Drawer>
-  );
-}
--- a/client/src/components/Header.tsx
+++ b/client/src/components/Header.tsx
@@ -2,8 +2,8 @@ import { useUserSelector } from '@/store/userStore';
 import { Avatar } from 'antd';
 import Title from 'antd/es/typography/Title';
 import { useState } from 'react';
-import ContentDrawer from './ContentDrawer';
-import UserEdit from './UserEdit';
+import ContentDrawer from './drawers/ContentDrawer';
+import UserEdit from './drawers/users/UserEdit';

 interface HeaderProps {
  title: string;
@@ -68,7 +68,7 @@ export default function Header({ title, additionalContent }: HeaderProps) {
        email={user?.email}
        open={openEdit}
        closeDrawer={closeEditDrawer}
-        type="edit"
+        type="userEdit"
      >
        {user?.id && <UserEdit closeDrawer={closeEditDrawer} userId={user?.id} />}
      </ContentDrawer>
--- a/client/src/components/ReactFlowDrawer.tsx
+++ b/client/src/components/ReactFlowDrawer.tsx
@@ -0,0 +1,281 @@
+import {
+  ReactFlow,
+  Background,
+  Controls,
+  useNodesState,
+  useEdgesState,
+  Node,
+  Edge,
+} from "@xyflow/react";
+import { useMemo, useState } from "react";
+import customEdgeStyle from "./edges/defaultEdgeStyle";
+import { Dropdown, DropdownProps } from "antd";
+import { useTranslation } from "react-i18next";
+import { edgeTitleGenerator } from "@/utils/edge";
+import IfElseNode from "./nodes/IfElseNode";
+import AppropriationNode from "./nodes/AppropriationNode";
+import StartNode from "./nodes/StartNode";
+
+const initialNodes: Node[] = [
+  {
+    id: "1",
+    type: "startNode",
+    position: { x: 100, y: 0 },
+    data: {},
+  },
+  {
+    id: "2",
+    type: "ifElse",
+    position: { x: 100, y: 200 },
+    data: { condition: "B=2" },
+  },
+  {
+    id: "3",
+    type: "appropriation",
+    position: { x: 100, y: 400 },
+    data: { value: "Выбрать {{account.email}}" },
+  },
+  {
+    id: "4",
+    type: "appropriation",
+    position: { x: 400, y: 400 },
+    data: { value: "Выбрать {{account.role}}" },
+  },
+];
+
+const initialEdges: Edge[] = [
+  // {
+  //   id: "e1-3",
+  //   source: "1",
+  //   sourceHandle: "1",
+  //   target: "3",
+  //   targetHandle: null,
+  //   label: "A1",
+  //   ...customEdgeStyle,
+  // },
+  // {
+  //   id: "e1-2",
+  //   source: "1",
+  //   sourceHandle: "2",
+  //   target: "2",
+  //   label: "B1",
+  //   ...customEdgeStyle,
+  // },
+];
+
+interface ReactFlowDrawerProps {
+  showDrawer: () => void;
+}
+
+export default function ReactFlowDrawer({ showDrawer }: ReactFlowDrawerProps) {
+  const { t } = useTranslation();
+
+  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+
+  const [menuVisible, setMenuVisible] = useState(false);
+  const [selectedHandleId, setSelectedHandleId] = useState<string | null>(null);
+  const [menuPosition, setMenuPosition] = useState({ x: 0, y: 0 });
+
+  const handleOpenChange: DropdownProps["onOpenChange"] = (nextOpen, info) => {
+    if (info.source === "trigger" || nextOpen) {
+      setMenuVisible(nextOpen);
+    }
+  };
+
+  const handleClick = (e: React.MouseEvent, node: Node) => {
+    e.stopPropagation();
+
+    const target = e.target as HTMLElement;
+    const handleElement = target.closest(".react-flow__handle") as HTMLElement;
+
+    if (!handleElement) return;
+
+    const handleId = handleElement.getAttribute("data-handleid");
+    if (!handleId) return;
+
+    const handlePos = handleElement.getAttribute("data-handlepos");
+    if (handlePos === "top") return;
+
+    setSelectedHandleId(`${node.id}-${handleId}`);
+
+    const flowWrapper = document.querySelector(".react-flow") as HTMLElement;
+    if (flowWrapper) {
+      const wrapperRect = flowWrapper.getBoundingClientRect();
+      const handleRect = handleElement.getBoundingClientRect();
+      setMenuPosition({
+        x: handleRect.right - wrapperRect.left,
+        y: handleRect.top - wrapperRect.top + 20,
+      });
+    }
+
+    setMenuVisible(true);
+  };
+
+  const handleMenuItemClick = (targetNodeId: string) => {
+    if (!selectedHandleId) return;
+
+    const [sourceNodeId, sourceHandleId] = selectedHandleId.split("-");
+
+    const label = edgeTitleGenerator(edges.length + 1);
+
+    const newEdge: Edge = {
+      id: `e${sourceNodeId}-${sourceHandleId}-${targetNodeId}:${label}`,
+      source: sourceNodeId,
+      sourceHandle: sourceHandleId,
+      target: targetNodeId,
+      label,
+      ...customEdgeStyle,
+    };
+
+    setEdges((eds) => [...eds, newEdge]);
+    setMenuVisible(false);
+    setSelectedHandleId(null);
+  };
+
+  const handleCreateNode = (type: string) => {
+    if (!selectedHandleId) return;
+    const [sourceNodeId, sourceHandleId] = selectedHandleId.split("-");
+    const sourceNode = nodes.find((n) => n.id === sourceNodeId);
+    const newId = (
+      Math.max(...nodes.map((n) => Number(n.id) || 0)) + 1
+    ).toString();
+    let newNode;
+    if (type === "ifElse") {
+      newNode = {
+        id: newId,
+        type: "ifElse",
+        position: {
+          x: (sourceNode?.position.x || 0) + 200,
+          y: (sourceNode?.position.y || 0) + 100,
+        },
+        data: { condition: "" },
+      };
+    } else if (type === "appropriation") {
+      newNode = {
+        id: newId,
+        type: "appropriation",
+        position: {
+          x: (sourceNode?.position.x || 0) + 200,
+          y: (sourceNode?.position.y || 0) + 100,
+        },
+        data: { value: "" },
+      };
+    }
+    if (newNode) {
+      setNodes((nds) => [...nds, newNode]);
+      const label = edgeTitleGenerator(edges.length + 1);
+      const newEdge = {
+        id: `e${sourceNodeId}-${sourceHandleId}-${newId}:${label}`,
+        source: sourceNodeId,
+        sourceHandle: sourceHandleId,
+        target: newId,
+        label,
+        ...customEdgeStyle,
+      };
+      setEdges((eds) => [...eds, newEdge]);
+      setMenuVisible(false);
+      setSelectedHandleId(null);
+    }
+  };
+
+  const newNodeTypes = [
+    { key: "ifElse", label: t("ifElseNode") },
+    {
+      key: "appropriation",
+      label: t("appropriationNode"),
+    },
+  ];
+
+  const existingNodes = nodes
+    .filter((node) => node.id !== selectedHandleId?.split("-")[0])
+    .filter((node) => {
+      if (!selectedHandleId || node.type === "startNode") return false;
+      const [sourceNodeId, sourceHandleId] = selectedHandleId.split("-");
+      return !edges.some(
+        (edge) =>
+          edge.source === sourceNodeId &&
+          edge.sourceHandle === sourceHandleId &&
+          edge.target === node.id
+      );
+    });
+
+  const menuItems = [
+    {
+      key: "connectToExisting",
+      label: t("connectToExisting"),
+      children: existingNodes.map((node) => ({
+        key: node.id,
+        label: t("connectTo", { nodeId: node.id }),
+        onClick: () => handleMenuItemClick(node.id),
+      })),
+    },
+    ...newNodeTypes.map((nt) => ({
+      key: `createNew-${nt.key}`,
+      label: nt.label,
+      onClick: () => handleCreateNode(nt.key),
+    })),
+  ];
+
+  const nodeTypes = useMemo(
+    () => ({
+      startNode: (props: any) => <StartNode {...props} edges={edges} />,
+      ifElse: (props: any) => <IfElseNode {...props} edges={edges} />,
+      appropriation: (props: any) => (
+        <AppropriationNode {...props} edges={edges} />
+      ),
+    }),
+    [edges]
+  );
+
+  return (
+    <ReactFlow
+      nodes={nodes}
+      edges={edges}
+      nodesDraggable={false}
+      elementsSelectable={false}
+      nodesConnectable={false}
+      onNodeClick={(event, node) => {
+        const target = event.target as HTMLElement;
+
+        if (!target.closest(".react-flow__handle")) {
+          console.log("node clicked");
+          showDrawer();
+        } else {
+          handleClick(event, node);
+        }
+      }}
+      nodeTypes={nodeTypes}
+      fitView
+      minZoom={0.5}
+      maxZoom={1.0}
+    >
+      <Background color="#F2F2F2" />
+      <Controls
+        position="bottom-center"
+        orientation="horizontal"
+        showInteractive={false}
+      />
+
+      {menuVisible && (
+        <div
+          style={{
+            position: "absolute",
+            left: `${menuPosition.x}px`,
+            top: `${menuPosition.y}px`,
+            zIndex: 9999,
+          }}
+        >
+          <Dropdown
+            menu={{ items: menuItems }}
+            open={menuVisible}
+            onOpenChange={handleOpenChange}
+            placement="bottom"
+          >
+            <div style={{ width: 1, height: 1 }} />
+          </Dropdown>
+        </div>
+      )}
+    </ReactFlow>
+  );
+}
--- a/client/src/components/drawers/ContentDrawer.tsx
+++ b/client/src/components/drawers/ContentDrawer.tsx
@@ -0,0 +1,245 @@
+import { Drawer } from "antd";
+import { useEffect, useState } from "react";
+import { Avatar, Typography } from "antd";
+import { useTranslation } from "react-i18next";
+import { useUserSelector } from "@/store/userStore";
+
+interface ContentDrawerProps {
+  open: boolean;
+  closeDrawer: () => void;
+  children: React.ReactNode;
+  type: "userCreate" | "userEdit" | "nodeEdit";
+  login?: string;
+  name?: string;
+  email?: string | null;
+}
+
+export default function ContentDrawer({
+  open,
+  closeDrawer,
+  children,
+  type,
+  login,
+  name,
+  email,
+}: ContentDrawerProps) {
+  const user = useUserSelector();
+  const { t } = useTranslation();
+  const [width, setWidth] = useState<number | string>("30%");
+
+  const calculateWidths = () => {
+    const windowWidth = window.innerWidth;
+    const expanded = Math.max(windowWidth * 0.3, 300);
+    setWidth(expanded);
+  };
+
+  useEffect(() => {
+    calculateWidths();
+    window.addEventListener("resize", calculateWidths);
+    return () => window.removeEventListener("resize", calculateWidths);
+  }, []);
+  console.log(login, user?.login, login === user?.login);
+
+  const userEditDrawerTitle = (
+    <div
+      style={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: 12,
+      }}
+    >
+      <div
+        onClick={closeDrawer}
+        style={{
+          display: "flex",
+          alignItems: "center",
+          height: "24px",
+          width: "24px",
+          cursor: "pointer",
+        }}
+      >
+        <img
+          src="./icons/drawer/arrow_back.svg"
+          alt="close_drawer"
+          style={{ height: "16px", width: "16px" }}
+        />
+      </div>
+
+      <div style={{ display: "flex", alignItems: "center", gap: 12, flex: 1 }}>
+        <Avatar
+          src={
+            login ? `https://gamma.heado.ru/go/ava?name=${login}` : undefined
+          }
+          size={40}
+          style={{ flexShrink: 0 }}
+        />
+        <div>
+          <Typography.Text
+            strong
+            style={{ display: "block", fontSize: "20px" }}
+          >
+            {name} {login === user?.login ? t("you") : ""}
+          </Typography.Text>
+          <Typography.Text type="secondary" style={{ fontSize: 14 }}>
+            {email}
+          </Typography.Text>
+        </div>
+      </div>
+
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          height: "24px",
+          width: "24px",
+        }}
+      >
+        <img
+          src="./icons/drawer/delete.svg"
+          alt="delete"
+          style={{ height: "18px", width: "16px" }}
+        />
+      </div>
+    </div>
+  );
+
+  const userCreateDrawerTitle = (
+    <div
+      style={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: 12,
+      }}
+    >
+      <div
+        onClick={closeDrawer}
+        style={{
+          display: "flex",
+          alignItems: "center",
+          height: "24px",
+          width: "24px",
+          cursor: "pointer",
+        }}
+      >
+        <img
+          src="./icons/drawer/arrow_back.svg"
+          alt="close_drawer"
+          style={{ height: "16px", width: "16px" }}
+        />
+      </div>
+
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          gap: 12,
+          flex: 1,
+          fontSize: "20px",
+        }}
+      >
+        {t("newAccount")}
+      </div>
+
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          height: "24px",
+          width: "24px",
+        }}
+        onClick={closeDrawer}
+      >
+        <img
+          src="./icons/drawer/delete.svg"
+          alt="delete"
+          style={{ height: "18px", width: "16px" }}
+        />
+      </div>
+    </div>
+  );
+
+  const nodeEditDrawerTitle = (
+    <div
+      style={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: 12,
+      }}
+    >
+      <div
+        onClick={closeDrawer}
+        style={{
+          display: "flex",
+          alignItems: "center",
+          height: "24px",
+          width: "24px",
+          cursor: "pointer",
+        }}
+      >
+        <img
+          src="./icons/drawer/arrow_back.svg"
+          alt="close_drawer"
+          style={{ height: "16px", width: "16px" }}
+        />
+      </div>
+
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          gap: 12,
+          flex: 1,
+          fontSize: "20px",
+        }}
+      >
+        Редактирование блока
+      </div>
+
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          height: "24px",
+          width: "24px",
+        }}
+        onClick={closeDrawer}
+      >
+        <img
+          src="./icons/drawer/delete.svg"
+          alt="delete"
+          style={{ height: "18px", width: "16px" }}
+        />
+      </div>
+    </div>
+  );
+
+  return (
+    <Drawer
+      // title={
+      //   type === "userCreate" ? userCreateDrawerTitle : userEditDrawerTitle
+      // }
+      title={(() => {
+        switch (type) {
+          case "userCreate":
+            return userCreateDrawerTitle;
+          case "userEdit":
+            return userEditDrawerTitle;
+          case "nodeEdit":
+            return nodeEditDrawerTitle;
+          default:
+            return null;
+        }
+      })()}
+      placement="right"
+      open={open}
+      width={width}
+      destroyOnHidden={true}
+      closable={false}
+    >
+      {children}
+    </Drawer>
+  );
+}
--- a/client/src/components/drawers/DrawerTitles.tsx
+++ b/client/src/components/drawers/DrawerTitles.tsx
@@ -0,0 +1,213 @@
+import { User } from "@/types/user";
+import { Avatar, Typography } from "antd";
+import { TFunction } from "i18next";
+
+interface DrawerTitleProps {
+  closeDrawer: () => void;
+  t: TFunction;
+}
+
+interface UserEditDrawerTitleProps extends DrawerTitleProps {
+  login?: string;
+  name?: string;
+  email?: string | null;
+  user: User | null;
+}
+
+interface UserCreateDrawerTitleProps extends DrawerTitleProps {}
+
+interface NodeEditDrawerTitleProps extends DrawerTitleProps {}
+
+const UserEditDrawerTitle = ({
+  closeDrawer,
+  login,
+  name,
+  email,
+  user,
+  t,
+}: UserEditDrawerTitleProps) => {
+  return (
+    <div
+      style={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: 12,
+      }}
+    >
+      <div
+        onClick={closeDrawer}
+        style={{
+          display: "flex",
+          alignItems: "center",
+          height: "24px",
+          width: "24px",
+          cursor: "pointer",
+        }}
+      >
+        <img
+          src="./icons/drawer/arrow_back.svg"
+          alt="close_drawer"
+          style={{ height: "16px", width: "16px" }}
+        />
+      </div>
+
+      <div style={{ display: "flex", alignItems: "center", gap: 12, flex: 1 }}>
+        <Avatar
+          src={
+            login ? `https://gamma.heado.ru/go/ava?name=${login}` : undefined
+          }
+          size={40}
+          style={{ flexShrink: 0 }}
+        />
+        <div>
+          <Typography.Text
+            strong
+            style={{ display: "block", fontSize: "20px" }}
+          >
+            {name} {login === user?.login ? t("you") : ""}
+          </Typography.Text>
+          <Typography.Text type="secondary" style={{ fontSize: 14 }}>
+            {email}
+          </Typography.Text>
+        </div>
+      </div>
+
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          height: "24px",
+          width: "24px",
+        }}
+      >
+        <img
+          src="./icons/drawer/delete.svg"
+          alt="delete"
+          style={{ height: "18px", width: "16px" }}
+        />
+      </div>
+    </div>
+  );
+};
+
+const UserCreateDrawerTitle = ({
+  closeDrawer,
+  t,
+}: UserCreateDrawerTitleProps) => {
+  return (
+    <div
+      style={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: 12,
+      }}
+    >
+      <div
+        onClick={closeDrawer}
+        style={{
+          display: "flex",
+          alignItems: "center",
+          height: "24px",
+          width: "24px",
+          cursor: "pointer",
+        }}
+      >
+        <img
+          src="./icons/drawer/arrow_back.svg"
+          alt="close_drawer"
+          style={{ height: "16px", width: "16px" }}
+        />
+      </div>
+
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          gap: "12px",
+          flex: 1,
+          fontSize: "20px",
+        }}
+      >
+        {t("newAccount")}
+      </div>
+
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          height: "24px",
+          width: "24px",
+        }}
+        onClick={closeDrawer}
+      >
+        <img
+          src="./icons/drawer/delete.svg"
+          alt="delete"
+          style={{ height: "18px", width: "16px" }}
+        />
+      </div>
+    </div>
+  );
+};
+
+const NodeEditDrawerTitle = ({ closeDrawer, t }: NodeEditDrawerTitleProps) => {
+  return (
+    <div
+      style={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: "12px",
+      }}
+    >
+      <div
+        onClick={closeDrawer}
+        style={{
+          display: "flex",
+          alignItems: "center",
+          height: "24px",
+          width: "24px",
+          cursor: "pointer",
+        }}
+      >
+        <img
+          src="./icons/drawer/arrow_back.svg"
+          alt="close_drawer"
+          style={{ height: "16px", width: "16px" }}
+        />
+      </div>
+
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          gap: "12px",
+          flex: 1,
+          fontSize: "20px",
+        }}
+      >
+        {t("editNode")}
+      </div>
+
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          height: "24px",
+          width: "24px",
+        }}
+        onClick={closeDrawer}
+      >
+        <img
+          src="./icons/drawer/delete.svg"
+          alt="delete"
+          style={{ height: "18px", width: "16px" }}
+        />
+      </div>
+    </div>
+  );
+};
+
+export { UserEditDrawerTitle, UserCreateDrawerTitle, NodeEditDrawerTitle };
--- a/client/src/components/drawers/users/UserCreate.tsx
+++ b/client/src/components/drawers/users/UserCreate.tsx
--- a/client/src/components/drawers/users/UserEdit.tsx
+++ b/client/src/components/drawers/users/UserEdit.tsx
--- a/client/src/components/edges/defaultEdgeStyle.tsx
+++ b/client/src/components/edges/defaultEdgeStyle.tsx
@@ -0,0 +1,17 @@
+import { MarkerType } from "@xyflow/react";
+
+const customEdgeStyle = {
+  markerEnd: {
+    type: MarkerType.Arrow,
+    width: 20,
+    height: 20,
+    color: "#BDBDBD",
+  },
+  style: {
+    strokeWidth: 2,
+    stroke: "#BDBDBD",
+  },
+  type: "step",
+};
+
+export default customEdgeStyle;
--- a/client/src/components/nodes/AppropriationNode.tsx
+++ b/client/src/components/nodes/AppropriationNode.tsx
@@ -0,0 +1,63 @@
+import { Handle, Node, NodeProps, Position, Edge } from "@xyflow/react";
+import { HANDLE_STYLE_CONNECTED } from "./defaultHandleStyle";
+import { useTranslation } from "react-i18next";
+
+type AppropriationNodeData = { value: string; edges?: Edge[] };
+
+export default function AppropriationNode({
+  data,
+  id,
+  edges = [],
+}: NodeProps<Node & AppropriationNodeData> & { edges?: Edge[] }) {
+  const { t } = useTranslation();
+
+  return (
+    <div
+      style={{
+        border: "0px solid",
+        borderRadius: 8,
+        backgroundColor: "white",
+        width: "248px",
+      }}
+    >
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          paddingLeft: "12px",
+          height: "48px",
+          fontWeight: "600px",
+          fontSize: "16px",
+          gap: "12px",
+        }}
+      >
+        <img
+          style={{ height: "24px", width: "24px" }}
+          src="/icons/node/calculate.svg"
+          alt="appropriation logo"
+        />
+        {t("appropriationNode")}
+      </div>
+      <div style={{ height: "1px", backgroundColor: "#E2E2E2" }}></div>
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          padding: "12px",
+          fontSize: "14px",
+          minHeight: "48px",
+        }}
+      >
+        {data.value as string}
+      </div>
+      <Handle
+        style={{
+          ...HANDLE_STYLE_CONNECTED,
+        }}
+        type="target"
+        position={Position.Top}
+        id="input"
+      />
+    </div>
+  );
+}
--- a/client/src/components/nodes/IfElseNode.tsx
+++ b/client/src/components/nodes/IfElseNode.tsx
@@ -0,0 +1,119 @@
+import { Handle, NodeProps, Position, Node, Edge } from "@xyflow/react";
+import {
+  HANDLE_STYLE_CONNECTED,
+  HANDLE_STYLE_CONNECTED_V,
+  HANDLE_STYLE_DISCONNECTED,
+  HANDLE_STYLE_DISCONNECTED_V,
+} from "./defaultHandleStyle";
+import { useTranslation } from "react-i18next";
+import { useState } from "react";
+
+interface IfElseNodeProps extends Node {
+  condition: string;
+  edges?: Edge[];
+}
+
+export default function IfElseNode({
+  id,
+  data,
+  edges = [],
+}: NodeProps<IfElseNodeProps> & { edges?: Edge[] }) {
+  const { t } = useTranslation();
+
+  const isHandle1Connected = edges.some(
+    (e: Edge) => e.source === id && e.sourceHandle === "1"
+  );
+  const isHandle2Connected = edges.some(
+    (e: Edge) => e.source === id && e.sourceHandle === "2"
+  );
+  return (
+    <>
+      <div
+        style={{
+          border: "0px solid",
+          borderRadius: 8,
+          backgroundColor: "white",
+          width: "248px",
+          minHeight: "144px",
+          position: "relative",
+        }}
+      >
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            paddingLeft: "12px",
+            height: "48px",
+            fontWeight: "600px",
+            fontSize: "16px",
+            gap: "12px",
+          }}
+        >
+          <img
+            style={{ height: "24px", width: "24px" }}
+            src="/icons/node/ifElse.svg"
+            alt="if else logo"
+          />
+          {t("ifElseNode")}
+        </div>
+        <div style={{ height: "1px", backgroundColor: "#E2E2E2" }}></div>
+
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            padding: "12px",
+            fontSize: "14px",
+            minHeight: "48px",
+            position: "relative",
+          }}
+        >
+          {t("conditionIf", { condition: data.condition })}
+          <Handle
+            type="source"
+            position={Position.Right}
+            id="1"
+            style={{
+              ...(isHandle1Connected
+                ? { ...HANDLE_STYLE_CONNECTED_V }
+                : { ...HANDLE_STYLE_DISCONNECTED_V }),
+              position: "absolute",
+              top: "50%",
+              transform: "translateY(-50%)",
+            }}
+          />
+        </div>
+        <div style={{ height: "1px", backgroundColor: "#E2E2E2" }}></div>
+
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            paddingLeft: "12px",
+            fontSize: "14px",
+            height: "48px",
+          }}
+        >
+          {t("conditionElse")}
+        </div>
+
+        <Handle
+          type="target"
+          position={Position.Top}
+          id="input"
+          style={{ ...HANDLE_STYLE_CONNECTED }}
+        />
+        <Handle
+          type="source"
+          position={Position.Bottom}
+          id="2"
+          style={
+            isHandle2Connected
+              ? { ...HANDLE_STYLE_CONNECTED }
+              : { ...HANDLE_STYLE_DISCONNECTED }
+          }
+        />
+      </div>
+    </>
+  );
+}
--- a/client/src/components/nodes/StartNode.tsx
+++ b/client/src/components/nodes/StartNode.tsx
@@ -0,0 +1,83 @@
+import { Edge, Handle, Node, NodeProps, Position } from "@xyflow/react";
+import { useTranslation } from "react-i18next";
+import {
+  HANDLE_STYLE_CONNECTED,
+  HANDLE_STYLE_DISCONNECTED,
+} from "./defaultHandleStyle";
+import { useState } from "react";
+
+interface StartNodeProps extends Node {
+  edges?: Edge[];
+}
+
+export default function StartNode({
+  id,
+  edges = [],
+}: NodeProps<StartNodeProps> & { edges?: Edge[] }) {
+  const { t } = useTranslation();
+  const isHandleConnected = edges.some(
+    (e: Edge) => e.source === id && e.sourceHandle === "1"
+  );
+  return (
+    <div
+      style={{
+        border: "0px solid",
+        borderRadius: 8,
+        backgroundColor: "white",
+        width: "248px",
+      }}
+    >
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          paddingLeft: "12px",
+          height: "40px",
+          fontWeight: "600px",
+          fontSize: "16px",
+          gap: "12px",
+          backgroundColor: "#D4E0BD",
+          borderRadius: "8px 8px 0 0",
+        }}
+      >
+        <div
+          style={{
+            height: "24px",
+            width: "24px",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+          }}
+        >
+          <img
+            style={{ height: "16px", width: "18px" }}
+            src="/icons/node/home.svg"
+            alt="start logo"
+          />
+        </div>
+        {t("startNode")}
+      </div>
+      <div style={{ height: "1px", backgroundColor: "#E2E2E2" }}></div>
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          padding: "12px",
+          fontSize: "14px",
+        }}
+      >
+        {t("startNodeDescription")}
+      </div>
+      <Handle
+        type="source"
+        position={Position.Bottom}
+        id="1"
+        style={
+          isHandleConnected
+            ? { ...HANDLE_STYLE_CONNECTED }
+            : { ...HANDLE_STYLE_DISCONNECTED }
+        }
+      />
+    </div>
+  );
+}
--- a/client/src/components/nodes/defaultHandleStyle.ts
+++ b/client/src/components/nodes/defaultHandleStyle.ts
@@ -0,0 +1,34 @@
+// horizontal
+const HANDLE_STYLE_CONNECTED = {
+  width: 8,
+  height: 8,
+  backgroundColor: "#BDBDBD",
+};
+
+// horizontal
+const HANDLE_STYLE_DISCONNECTED = {
+  width: 20,
+  height: 20,
+  backgroundColor: "#C7D95A",
+  borderColor: "#606060",
+  borderWidth: 2,
+};
+
+// vertical
+const HANDLE_STYLE_CONNECTED_V = {
+  ...HANDLE_STYLE_CONNECTED,
+  right: "-4px",
+};
+
+// vertical
+const HANDLE_STYLE_DISCONNECTED_V = {
+  ...HANDLE_STYLE_DISCONNECTED,
+  right: "-10px",
+};
+
+export {
+  HANDLE_STYLE_CONNECTED,
+  HANDLE_STYLE_DISCONNECTED,
+  HANDLE_STYLE_CONNECTED_V,
+  HANDLE_STYLE_DISCONNECTED_V,
+};
--- a/client/src/config/i18n.ts
+++ b/client/src/config/i18n.ts
@@ -1,99 +1,119 @@
-import i18n from 'i18next';
-import { initReactI18next } from 'react-i18next';
-import LanguageDetector from 'i18next-browser-languagedetector';
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+import LanguageDetector from "i18next-browser-languagedetector";

 i18n
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
-    fallbackLng: 'en',
-    supportedLngs: ['en', 'ru'],
+    fallbackLng: "en",
+    supportedLngs: ["en", "ru"],
    interpolation: { escapeValue: false },
    resources: {
      en: {
        translation: {
-          accounts: 'Accounts',
-          processDiagrams: 'Process diagrams',
-          runningProcesses: 'Running processes',
-          settings: 'Settings',
-          eventsList: 'Events list',
-          configuration: 'Configuration',
-          selectPhoto: 'Select photo',
-          name: 'Name',
-          login: 'Login',
-          password: 'Password',
-          email: 'Email',
-          tenant: 'Tenant',
-          role: 'Role',
-          status: 'Status',
-          nameMessage: 'Enter name',
-          loginMessage: 'Enter login',
-          passwordMessage: 'Enter password',
-          emailMessage: 'Enter email',
-          emailErrorMessage: 'Incorrect email',
-          tenantMessage: 'Enter tenant',
-          roleMessage: 'Choose role',
-          statusMessage: 'Choose status',
-          addAccount: 'Add account',
-          save: 'Save changes',
-          newAccount: 'New account',
-          ACTIVE: 'Active',
-          DISABLED: 'Disabled',
-          BLOCKED: 'Blocked',
-          DELETED: 'Deleted',
-          OWNER: 'Owner',
-          ADMIN: 'Admin',
-          EDITOR: 'Editor',
-          VIEWER: 'Viewer',
-          nameLogin: 'Name, login',
-          createdAt: 'Created',
-          saving: 'Saving...',
-          createdAccountMessage: 'User successfully created!',
-          editAccountMessage: 'User successfully updated!',
-          you: '(You)',
+          accounts: "Accounts",
+          processDiagrams: "Process diagrams",
+          runningProcesses: "Running processes",
+          settings: "Settings",
+          eventsList: "Events list",
+          configuration: "Configuration",
+          selectPhoto: "Select photo",
+          name: "Name",
+          login: "Login",
+          password: "Password",
+          email: "Email",
+          tenant: "Tenant",
+          role: "Role",
+          status: "Status",
+          nameMessage: "Enter name",
+          loginMessage: "Enter login",
+          passwordMessage: "Enter password",
+          emailMessage: "Enter email",
+          emailErrorMessage: "Incorrect email",
+          tenantMessage: "Enter tenant",
+          roleMessage: "Choose role",
+          statusMessage: "Choose status",
+          addAccount: "Add account",
+          save: "Save changes",
+          newAccount: "New account",
+          ACTIVE: "Active",
+          DISABLED: "Disabled",
+          BLOCKED: "Blocked",
+          DELETED: "Deleted",
+          OWNER: "Owner",
+          ADMIN: "Admin",
+          EDITOR: "Editor",
+          VIEWER: "Viewer",
+          nameLogin: "Name, login",
+          createdAt: "Created",
+          saving: "Saving...",
+          createdAccountMessage: "User successfully created!",
+          editAccountMessage: "User successfully updated!",
+          you: "(You)",
+          // nodes
+          startNode: "Start",
+          startNodeDescription: "Start",
+          connectToExisting: "Connect to existing",
+          editNode: "Editing a block",
+          connectTo: "Connect to {{nodeId}}",
+          ifElseNode: "IF - ELSE",
+          conditionIf: "If {{condition}}, then",
+          conditionElse: "Else",
+          appropriationNode: "Appropriation",
        },
      },
      ru: {
        translation: {
-          accounts: 'Учетные записи',
-          processDiagrams: 'Схемы процессов',
-          runningProcesses: 'Запущенные процессы',
-          settings: 'Настройки',
-          eventsList: 'Справочкин событий',
-          configuration: 'Конфигурация',
-          selectPhoto: 'Выбрать фото',
-          name: 'Имя',
-          login: 'Логин',
-          password: 'Пароль',
-          email: 'Имейл',
-          tenant: 'Привязка',
-          role: 'Роль',
-          status: 'Статус',
-          nameMessage: 'Введите имя',
-          loginMessage: 'Введите логин',
-          passwordMessage: 'Введите пароль',
-          emailMessage: 'Введите имейл',
-          emailErrorMessage: 'Некорректный имейл',
-          tenantMessage: 'Введите привязку',
-          roleMessage: 'Выберите роль',
-          statusMessage: 'Выберите статус',
-          addAccount: 'Добавить аккаунт',
-          save: 'Сохранить изменения',
-          newAccount: 'Новая учетная запись',
-          ACTIVE: 'Активен',
-          DISABLED: 'Выключен',
-          BLOCKED: 'Заблокирован',
-          DELETED: 'Удален',
-          OWNER: 'Владелец',
-          ADMIN: 'Админ',
-          EDITOR: 'Редактор',
-          VIEWER: 'Наблюдатель',
-          nameLogin: 'Имя, Логин',
-          createdAt: 'Создано',
-          saving: 'Сохранение...',
-          createdAccountMessage: 'Пользователь успешно создан!',
-          editAccountMessage: 'Пользователь успешно обновлен!',
-          you: '(Вы)',
+          accounts: "Учетные записи",
+          processDiagrams: "Схемы процессов",
+          runningProcesses: "Запущенные процессы",
+          settings: "Настройки",
+          eventsList: "Справочкин событий",
+          configuration: "Конфигурация",
+          selectPhoto: "Выбрать фото",
+          name: "Имя",
+          login: "Логин",
+          password: "Пароль",
+          email: "Имейл",
+          tenant: "Привязка",
+          role: "Роль",
+          status: "Статус",
+          nameMessage: "Введите имя",
+          loginMessage: "Введите логин",
+          passwordMessage: "Введите пароль",
+          emailMessage: "Введите имейл",
+          emailErrorMessage: "Некорректный имейл",
+          tenantMessage: "Введите привязку",
+          roleMessage: "Выберите роль",
+          statusMessage: "Выберите статус",
+          addAccount: "Добавить аккаунт",
+          save: "Сохранить изменения",
+          newAccount: "Новая учетная запись",
+          ACTIVE: "Активен",
+          DISABLED: "Выключен",
+          BLOCKED: "Заблокирован",
+          DELETED: "Удален",
+          OWNER: "Владелец",
+          ADMIN: "Админ",
+          EDITOR: "Редактор",
+          VIEWER: "Наблюдатель",
+          nameLogin: "Имя, Логин",
+          createdAt: "Создано",
+          saving: "Сохранение...",
+          createdAccountMessage: "Пользователь успешно создан!",
+          editAccountMessage: "Пользователь успешно обновлен!",
+          you: "(Вы)",
+          // nodes
+          startNode: "Запуск",
+          startNodeDescription: "Включение",
+          connectToExisting: "Подключить к существующей",
+          editNode: "Редактирование блока",
+          connectTo: `Подключить к {{nodeId}}`,
+          ifElseNode: "ЕСЛИ - ТО",
+          conditionIf: "Если {{condition}}, то",
+          conditionElse: "Иначе",
+          appropriationNode: "Присвоение",
        },
      },
    },
--- a/client/src/main.tsx
+++ b/client/src/main.tsx
@@ -1,11 +1,12 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import '@/index.css';
-import App from '@/App';
-import AppWrapper from '@/config/AppWrapper';
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "@/index.css";
+import App from "@/App";
+import AppWrapper from "@/config/AppWrapper";
+import "@xyflow/react/dist/style.css";

 const root = ReactDOM.createRoot(
-  document.getElementById('root') as HTMLElement
+  document.getElementById("root") as HTMLElement
 );

 root.render(
--- a/client/src/pages/AccountsPage.tsx
+++ b/client/src/pages/AccountsPage.tsx
@@ -2,12 +2,12 @@ import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { AccountStatus, AllUser, AllUserResponse } from "@/types/user";
 import Header from "@/components/Header";
-import ContentDrawer from "@/components/ContentDrawer";
-import UserCreate from "@/components/UserCreate";
+import ContentDrawer from "@/components/drawers/ContentDrawer";
+import UserCreate from "@/components/drawers/users/UserCreate";
 import { Avatar, Table } from "antd";
 import { TableProps } from "antd/lib";
 import { UserService } from "@/services/userService";
-import UserEdit from "@/components/UserEdit";
+import UserEdit from "@/components/drawers/users/UserEdit";
 import { useSearchParams } from "react-router-dom";

 export default function AccountsPage() {
@@ -201,7 +201,7 @@ export default function AccountsPage() {
      <ContentDrawer
        open={openCreate}
        closeDrawer={closeCreateDrawer}
-        type="create"
+        type="userCreate"
      >
        <UserCreate getUsers={getUsers} closeDrawer={closeCreateDrawer} />
      </ContentDrawer>
@@ -211,7 +211,7 @@ export default function AccountsPage() {
        email={activeAccount?.email}
        open={openEdit}
        closeDrawer={closeEditDrawer}
-        type="edit"
+        type="userEdit"
      >
        <UserEdit userId={activeAccount?.id} closeDrawer={closeEditDrawer} />
      </ContentDrawer>
--- a/client/src/pages/MainLayout.tsx
+++ b/client/src/pages/MainLayout.tsx
@@ -1,22 +1,22 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import React, { useEffect, useState } from 'react';
-import { Layout } from 'antd';
-import Sider from 'antd/es/layout/Sider';
-import { Route, Routes, useLocation, useNavigate } from 'react-router-dom';
-import SiderMenu from '@/components/SiderMenu';
-import ProcessDiagramPage from './ProcessDiagramPage';
-import RunningProcessesPage from './RunningProcessesPage';
-import AccountsPage from './AccountsPage';
-import EventsListPage from './EventsListPage';
-import ConfigurationPage from './ConfigurationPage';
+import React, { useEffect, useState } from "react";
+import { Layout } from "antd";
+import Sider from "antd/es/layout/Sider";
+import { Route, Routes, useLocation, useNavigate } from "react-router-dom";
+import SiderMenu from "@/components/SiderMenu";
+import ProcessDiagramPage from "./ProcessDiagramPage";
+import AccountsPage from "./AccountsPage";
+import ConfigurationPage from "./ConfigurationPage";
+import EventsListPage from "./EventsListPage";
+import RunningProcessesPage from "./RunningProcessesPage";

 export default function MainLayout() {
  const navigate = useNavigate();
  const location = useLocation();
  const [collapsed, setCollapsed] = useState(false);
-  const [selectedKey, setSelectedKey] = useState('1');
+  const [selectedKey, setSelectedKey] = useState("1");

-  const [width, setWidth] = useState<number | string>('15%');
+  const [width, setWidth] = useState<number | string>("15%");
  const [collapsedWidth, setCollapsedWidth] = useState(50);

  const calculateWidths = () => {
@@ -29,24 +29,24 @@ export default function MainLayout() {

  useEffect(() => {
    calculateWidths();
-    window.addEventListener('resize', calculateWidths);
-    return () => window.removeEventListener('resize', calculateWidths);
+    window.addEventListener("resize", calculateWidths);
+    return () => window.removeEventListener("resize", calculateWidths);
  }, []);

  useEffect(() => {
-    if (location.pathname === '/') {
-      navigate('/process-diagram');
+    if (location.pathname === "/") {
+      navigate("/process-diagram");
    }
    setSelectedKey(location.pathname);
  }, [location.pathname]);

  function hangleMenuClick(e: any) {
    const key = e.key;
-    if (key === 'toggle') {
+    if (key === "toggle") {
      setCollapsed(!collapsed);
      return;
    }
-    if (key === 'divider') {
+    if (key === "divider") {
      return;
    }

@@ -55,7 +55,7 @@ export default function MainLayout() {
  }

  return (
-    <Layout style={{ minHeight: '100vh' }}>
+    <Layout style={{ minHeight: "100vh" }}>
      <Sider
        className="sider"
        collapsible
--- a/client/src/pages/ProcessDiagramPage.tsx
+++ b/client/src/pages/ProcessDiagramPage.tsx
@@ -1,11 +1,33 @@
-import Header from '@/components/Header';
-import { useTranslation } from 'react-i18next';
+import Header from "@/components/Header";
+import { useTranslation } from "react-i18next";
+
+import ReactFlowDrawer from "@/components/ReactFlowDrawer";
+import { useState } from "react";
+import ContentDrawer from "@/components/drawers/ContentDrawer";

 export default function ProcessDiagramPage() {
  const { t } = useTranslation();
+
+  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+
+  const showDrawer = () => setIsDrawerOpen(true);
+  const closeDrawer = () => {
+    setIsDrawerOpen(false);
+  };
+
  return (
    <>
-      <Header title={t('processDiagrams')} />
+      <Header title={t("processDiagrams")} />
+      <div style={{ width: "100%", height: "100%" }}>
+        <ReactFlowDrawer showDrawer={showDrawer} />
+      </div>
+
+      <ContentDrawer
+        open={isDrawerOpen}
+        closeDrawer={closeDrawer}
+        children={undefined}
+        type={"nodeEdit"}
+      ></ContentDrawer>
    </>
  );
 }
--- a/client/src/store/nodeStore.ts
+++ b/client/src/store/nodeStore.ts
@@ -0,0 +1,25 @@
+import { Edge, Node } from "@xyflow/react";
+import { create } from "zustand";
+import { devtools } from "zustand/middleware";
+
+type NodeStoreState = {
+  node: Node;
+  edge: Edge;
+  loading: boolean;
+};
+
+type NodeStoreActions = {
+  addNode: (node: Node) => void;
+  addEdge: (edge: Edge) => void;
+  removeNode: (nodeId: string) => void;
+  removeEdge: (edgeId: string) => void;
+};
+
+type NodeStore = NodeStoreState & NodeStoreActions;
+
+export const useNodeStore = create<NodeStore>()(
+  devtools((set) => ({
+    nodes: [],
+    edges: [],
+  }))
+);
--- a/client/src/utils/edge.ts
+++ b/client/src/utils/edge.ts
@@ -0,0 +1,8 @@
+function edgeTitleGenerator(counter: number) {
+  const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+  const num = Math.ceil(counter / chars.length);
+  const letterIndex = (counter - 1) % chars.length;
+  return `${chars[letterIndex]}${num}`;
+}
+
+export { edgeTitleGenerator };
Author	SHA1	Message	Date
Vladislav Syrochkin	6db2821781	refactor(react-flow): add existing nodes validate	2025-08-07 13:02:52 +05:00
Vladislav Syrochkin	3f87970653	Merge branch 'master' into VORKOUT-16	2025-08-06 12:20:28 +05:00
Vladislav Syrochkin	ee4051f523	feat(nodes): add start node and create new node function	2025-08-06 12:19:55 +05:00
ivan.dev	cf6e09d8c1	Merge pull request 'feat: CRUD ProcessSchema' (#16 ) from VORKOUT-17 into master Reviewed-on: #16 Reviewed-by: cyrussmeat <dr.cyrill@gmail.com> Reviewed-by: Vladislav Syrochkin <vsyroc@gmail.com>	2025-08-05 21:37:07 +05:00
vsyroc	65ed6b9561	feat(client): add filter on exist edges	2025-07-22 10:59:41 +05:00
Vladislav Syrochkin	b503bc0bef	feat(client): init store for nodes	2025-07-22 08:08:15 +05:00
Vladislav Syrochkin	5cdb6e460f	feat(client): add React flow drawer to processDiagramPage	2025-07-22 08:07:52 +05:00
Vladislav Syrochkin	5966b7d6f1	feat(client): move components	2025-07-22 08:05:20 +05:00
Vladislav Syrochkin	8b0659fc89	feat(client): add node translations	2025-07-22 08:04:48 +05:00
vsyroc	51344ef218	feat(client): add new translation	2025-07-10 18:52:44 +05:00
vsyroc	51171377e2	feat(client): add edge name generator	2025-07-10 18:52:11 +05:00
vsyroc	943f4ded2d	feat(client): add appropriation node and node edit drawer	2025-07-09 16:17:49 +05:00
vsyroc	443293d420	feat(client): add base styles for edges and handles	2025-07-07 23:41:29 +05:00
Vladislav Syrochkin	91c8efe13f	feat(client): add react-flow css and base if else node	2025-07-04 20:57:35 +05:00
Vladislav Syrochkin	e10430310f	feat(client): add xyflow/react	2025-07-03 14:49:43 +05:00