front new

web/package.json

@@ -9,10 +9,18 @@
     "preview": "rsbuild preview"
   },
   "dependencies": {
-    "raisa-ui": "^1.0.0",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@mui/material": "^9.0.1",
+    "@mui/x-tree-view": "^9.1.0",
+    "axios": "^1.16.1",
+    "date-fns": "^4.1.0",
+    "material-react-table": "^3.2.1",
     "react": "^18.3.1",
+    "react-daisyui": "^5.0.5",
     "react-dom": "^18.3.1",
-    "react-daisyui": "^5.0.5"
+    "react-router-dom": "^7.15.1",
+    "react-toastify": "^11.1.0"
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.4",
@@ -20,8 +28,8 @@
     "@rsbuild/plugin-react": "^1.1.0",
     "@types/react": "^18.3.1",
     "@types/react-dom": "^18.3.1",
-    "typescript": "^5.7.3",
     "daisyui": "^4.12.10",
-    "tailwindcss": "^3.4.13"
+    "tailwindcss": "^3.4.13",
+    "typescript": "^5.7.3"
   }
 }

web/public/images/AddColumn.svg

@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.0603 2.45912L13.0603 17.5497L13.0603 18.8228L6.93989 18.8228L6.93989 17.5497L6.93989 2.45912L6.93989 1.18603L13.0603 1.18603L13.0603 2.45912ZM11.7881 2.45912L11.7881 17.5497L8.21209 17.5497L8.21209 2.45912L11.7881 2.45912Z" fill="#60A9FF"/>
+<path d="M16.6363 3.64075C16.6363 3.38385 16.499 3.10257 16.1808 2.86393C15.8625 2.6253 15.3932 2.45912 14.8483 2.45912L13.0603 2.45912L13.0603 1.18603L14.8483 1.18603C15.6419 1.18603 16.3854 1.42657 16.9444 1.84566C17.5035 2.26512 17.9094 2.89348 17.9094 3.64075L17.9094 16.368C17.9094 17.1153 17.5035 17.7437 16.9444 18.1631C16.3854 18.5823 15.6419 18.8228 14.8483 18.8228L13.0603 18.8228L13.0603 17.5497L14.8483 17.5497C15.3932 17.5497 15.8625 17.3835 16.1808 17.1448C16.499 16.9062 16.6363 16.6249 16.6363 16.368L16.6363 3.64075Z" fill="#4A5565"/>
+<path d="M5.1519 2.45912C4.60695 2.45912 4.13768 2.6253 3.81934 2.86394C3.50117 3.10257 3.3639 3.38385 3.3639 3.64076L3.3639 16.368C3.3639 16.6249 3.50118 16.9062 3.81934 17.1448C4.13768 17.3835 4.60695 17.5497 5.1519 17.5497L6.93989 17.5497L6.93989 18.8228L5.1519 18.8228C4.35825 18.8228 3.61486 18.5823 3.05584 18.1631C2.4966 17.7437 2.09082 17.1153 2.09082 16.368L2.09082 3.64076C2.09082 2.89348 2.4966 2.26512 3.05584 1.84566C3.61486 1.42657 4.35825 1.18603 5.1519 1.18603L6.93989 1.18603L6.93989 2.45912L5.1519 2.45912Z" fill="#4A5565"/>
+</svg>

web/public/images/AddLayer.svg

@@ -0,0 +1,5 @@
+<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 10.5409V17.5409C0 19.0321 1.20903 20.2411 2.7002 20.2411H12.7002C14.1914 20.2411 15.4004 19.0321 15.4004 17.5409V16.2411H14V17.5409C14 18.2589 13.4182 18.8407 12.7002 18.8407H2.7002C1.98223 18.8407 1.40039 18.2589 1.40039 17.5409V10.5409C1.40039 9.82292 1.98223 9.24109 2.7002 9.24109H4V7.8407H2.7002C1.20903 7.8407 0 9.04972 0 10.5409Z" fill="#323031"/>
+<path d="M10.9999 0.700195C10.9999 0.313596 11.3135 4.09655e-08 11.7001 0C12.0867 5.14389e-07 12.4003 0.313596 12.4003 0.700195V8.00977L14.205 6.20508C14.4783 5.93171 14.9218 5.93171 15.1952 6.20508C15.4686 6.47845 15.4686 6.92195 15.1952 7.19531L12.1952 10.1953C11.9218 10.4687 11.4783 10.4687 11.205 10.1953L8.20503 7.19531C7.93166 6.92195 7.93166 6.47845 8.20503 6.20508C8.4784 5.93171 8.9219 5.93171 9.19526 6.20508L10.9999 8.00977V0.700195Z" fill="#60A9FF"/>
+<path d="M4 7.8407V6.54126C4 5.05009 5.20903 3.84106 6.7002 3.84106H7.7002C8.08679 3.84106 8.40039 4.15466 8.40039 4.54126C8.40039 4.92786 8.08679 5.24146 7.7002 5.24146H6.7002C5.98223 5.24146 5.40039 5.82329 5.40039 6.54126V13.5412C5.40039 14.2592 5.98223 14.841 6.7002 14.841H16.7002C17.4182 14.841 18 14.2592 18 13.5412V6.54126C18 5.82329 17.4182 5.24146 16.7002 5.24146H15.7002C15.3136 5.24146 15 4.92786 15 4.54126C15 4.15466 15.3136 3.84106 15.7002 3.84106H16.7002C18.1914 3.84106 19.4004 5.05009 19.4004 6.54126V13.5412C19.4004 15.0324 18.1914 16.2414 16.7002 16.2414L15.4004 16.2411H14L6.7002 16.2414C5.20903 16.2414 4 15.0324 4 13.5412V9.24109V7.8407Z" fill="#60A9FF"/>
+</svg>

web/public/images/AddLine.svg

@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.1073 13.0603H2.01673H0.743652V6.93989H2.01673H17.1073H18.3804V13.0603H17.1073ZM17.1073 11.7881H2.01673V8.21209H17.1073V11.7881Z" fill="#60A9FF"/>
+<path d="M15.9257 16.6363C16.1826 16.6363 16.4638 16.499 16.7025 16.1808C16.9411 15.8625 17.1073 15.3932 17.1073 14.8483V13.0603H18.3804V14.8483C18.3804 15.6419 18.1398 16.3854 17.7207 16.9444C17.3013 17.5035 16.6729 17.9094 15.9257 17.9094H3.19838C2.45109 17.9094 1.82271 17.5035 1.40328 16.9444C0.984144 16.3854 0.743652 15.6419 0.743652 14.8483V13.0603H2.01673V14.8483C2.01673 15.3932 2.18288 15.8625 2.42156 16.1808C2.66018 16.499 2.94151 16.6363 3.19838 16.6363H15.9257Z" fill="#4A5565"/>
+<path d="M17.1073 5.1519C17.1073 4.60695 16.9411 4.13768 16.7025 3.81934C16.4638 3.50117 16.1826 3.3639 15.9257 3.3639H3.19838C2.94151 3.3639 2.66018 3.50117 2.42156 3.81934C2.18288 4.13768 2.01673 4.60695 2.01673 5.1519V6.93989H0.743652V5.1519C0.743652 4.35825 0.984144 3.61486 1.40328 3.05584C1.82271 2.4966 2.45109 2.09082 3.19838 2.09082H15.9257C16.6729 2.09082 17.3013 2.4966 17.7207 3.05584C18.1398 3.61486 18.3804 4.35825 18.3804 5.1519V6.93989H17.1073V5.1519Z" fill="#4A5565"/>
+</svg>

web/public/images/AdminPanel.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M4.86784 10.6667C4.86784 10.1881 4.47995 9.80021 4.0013 9.80021C3.52266 9.80021 3.13477 10.1881 3.13477 10.6667C3.13477 11.1454 3.52266 11.5333 4.0013 11.5333C4.47995 11.5333 4.86784 11.1454 4.86784 10.6667ZM8.86784 5.33341C8.86784 4.85477 8.47995 4.46688 8.0013 4.46688C7.52266 4.46688 7.13477 4.85477 7.13477 5.33341C7.13477 5.81206 7.52266 6.19995 8.0013 6.19995C8.47995 6.19995 8.86784 5.81206 8.86784 5.33341ZM12.8678 10.6667C12.8678 10.1881 12.4799 9.80021 12.0013 9.80021C11.5227 9.80021 11.1348 10.1881 11.1348 10.6667C11.1348 11.1454 11.5227 11.5333 12.0013 11.5333C12.4799 11.5333 12.8678 11.1454 12.8678 10.6667ZM5.80143 10.6667C5.80143 11.4992 5.23559 12.1973 4.4681 12.4031V13.3334C4.4681 13.5911 4.25904 13.8002 4.0013 13.8002C3.74357 13.8002 3.53451 13.5911 3.53451 13.3334V12.4031C2.76702 12.1973 2.20117 11.4992 2.20117 10.6667C2.20117 9.83425 2.76693 9.13553 3.53451 8.92977V2.66675C3.53451 2.40902 3.74357 2.19995 4.0013 2.19995C4.25904 2.19995 4.4681 2.40902 4.4681 2.66675V8.92977C5.23567 9.13553 5.80143 9.83425 5.80143 10.6667ZM13.8014 10.6667C13.8014 11.4992 13.2356 12.1973 12.4681 12.4031V13.3334C12.4681 13.5911 12.259 13.8002 12.0013 13.8002C11.7436 13.8002 11.5345 13.5911 11.5345 13.3334V12.4031C10.767 12.1973 10.2012 11.4992 10.2012 10.6667C10.2012 9.83425 10.7669 9.13553 11.5345 8.92977V2.66675C11.5345 2.40902 11.7436 2.19995 12.0013 2.19995C12.259 2.19995 12.4681 2.40902 12.4681 2.66675V8.92977C13.2357 9.13553 13.8014 9.83425 13.8014 10.6667ZM9.80143 5.33341C9.80143 6.16585 9.23559 6.86393 8.4681 7.06974V13.3334C8.4681 13.5911 8.25904 13.8002 8.0013 13.8002C7.74357 13.8002 7.53451 13.5911 7.53451 13.3334V7.06974C6.76702 6.86393 6.20117 6.16585 6.20117 5.33341C6.20117 4.50092 6.76693 3.8022 7.53451 3.59644V2.66675C7.53451 2.40902 7.74357 2.19995 8.0013 2.19995C8.25904 2.19995 8.4681 2.40902 8.4681 2.66675V3.59644C9.23567 3.8022 9.80143 4.50092 9.80143 5.33341Z" fill="#99A1AF" />
+</svg>

web/public/images/Back.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.000000" height="16.000000" fill="none">
+	<rect id="Icon" width="16.000000" height="16.000000" x="0.000000" y="0.000000" />
+	<path id="Vector (Stroke)" d="M7.55812 3.18283C7.80211 2.93901 8.19755 2.93911 8.4416 3.18283C8.68568 3.42691 8.68568 3.82316 8.4416 4.06724L5.13381 7.37507L12.3747 7.37507C12.7199 7.37507 13 7.6552 13 8.00038C12.9998 8.34542 12.7198 8.62478 12.3747 8.62478L5.13381 8.62478L8.4416 11.9335C8.68568 12.1776 8.68568 12.5729 8.4416 12.817C8.19751 13.0609 7.80215 13.061 7.55812 12.817L3.18283 8.44167C2.93911 8.19762 2.93901 7.80217 3.18283 7.55818L7.55812 3.18283Z" fill="rgb(73.6525,85.0542,101.01)" fill-rule="nonzero" />
+</svg>

web/public/images/Ban.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.3008 8.99999C20.3008 8.21092 20.219 7.44163 20.0654 6.69921C20.044 6.69932 20.0225 6.70019 20.001 6.70019C16.9689 6.70019 14.1845 5.63555 12.001 3.8623C9.81741 5.63552 7.03304 6.70019 4.00098 6.70019C3.97915 6.70019 3.95735 6.69932 3.93555 6.69921C3.78204 7.44158 3.70117 8.21099 3.70117 8.99999C3.70117 14.2011 7.21626 18.5801 12.001 19.8945C16.7857 18.5801 20.3008 14.2011 20.3008 8.99999ZM12.0107 14.2998C12.3973 14.2998 12.7109 14.6134 12.7109 15C12.7109 15.3866 12.3973 15.7002 12.0107 15.7002H12.001C11.6144 15.7002 11.3008 15.3866 11.3008 15C11.3008 14.6134 11.6144 14.2998 12.001 14.2998H12.0107ZM11.3008 11V8.99999C11.3008 8.6134 11.6144 8.2998 12.001 8.2998C12.3876 8.2998 12.7012 8.6134 12.7012 8.99999V11C12.7012 11.3866 12.3876 11.7002 12.001 11.7002C11.6144 11.7002 11.3008 11.3866 11.3008 11ZM21.7012 8.99999C21.7012 14.9185 17.6531 19.8899 12.1758 21.2998C12.0613 21.3293 11.9406 21.3293 11.8262 21.2998C6.34889 19.8899 2.30078 14.9185 2.30078 8.99999C2.30078 7.89873 2.44095 6.829 2.70508 5.80858L2.74609 5.69335C2.86341 5.43607 3.12848 5.27041 3.41895 5.28515C3.61166 5.29491 3.80571 5.2998 4.00098 5.2998C6.89553 5.2998 9.53454 4.21254 11.5342 2.42284L11.6396 2.34472C11.8983 2.18863 12.2352 2.21471 12.4678 2.42284C14.4674 4.21258 17.1064 5.2998 20.001 5.2998C20.1962 5.2998 20.3903 5.29491 20.583 5.28515C20.9148 5.26832 21.2135 5.48701 21.2969 5.80858C21.561 6.82896 21.7012 7.89877 21.7012 8.99999Z" fill="#323031"/>
+</svg>

web/public/images/Calendar.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.000000" height="16.000000" fill="none">
+	<rect id="Icon" width="16.000000" height="16.000000" x="0.000000" y="0.000000" />
+	<path id="Vector (Stroke)" d="M11.9996 7.45469L4.00044 7.45469L4.00044 12.3637C4.00044 12.6648 4.22391 12.9092 4.49993 12.9094L11.5001 12.9094C11.7761 12.9092 11.9996 12.6648 11.9996 12.3637L11.9996 7.45469ZM9.49993 4.72775L9.49993 4.18204L6.50007 4.18204L6.50007 4.72775C6.49994 5.02886 6.2759 5.27265 5.99985 5.27265C5.72381 5.27265 5.49977 5.02886 5.49963 4.72775L5.49963 4.18204L4.49993 4.18204C4.22391 4.18218 4.00044 4.42659 4.00044 4.72775L4.00044 6.36407L11.9996 6.36407L11.9996 4.72775C11.9996 4.42659 11.7761 4.18218 11.5001 4.18204L10.5004 4.18204L10.5004 4.72775C10.5002 5.02886 10.2762 5.27265 10.0001 5.27265C9.7241 5.27265 9.50006 5.02886 9.49993 4.72775ZM13 12.3637C13 13.2673 12.3283 13.9999 11.5001 14L4.49993 14C3.67165 13.9999 3 13.2673 3 12.3637L3 4.72775C3 3.82412 3.67165 3.09156 4.49993 3.09142L5.49963 3.09142L5.49963 2.54571C5.49963 2.24447 5.72372 2 5.99985 2C6.27598 2 6.50007 2.24447 6.50007 2.54571L6.50007 3.09142L9.49993 3.09142L9.49993 2.54571C9.49993 2.24447 9.72402 2 10.0001 2C10.2763 2 10.5004 2.24447 10.5004 2.54571L10.5004 3.09142L11.5001 3.09142C12.3283 3.09156 13 3.82412 13 4.72775L13 12.3637Z" fill="rgb(153.002,161.006,174.732)" fill-rule="nonzero" />
+</svg>

web/public/images/CalendarIcon.svg

@@ -0,0 +1,3 @@
+<svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.80013 5.33333C10.0579 5.33333 10.2669 5.5424 10.2669 5.80013C10.2669 6.05786 10.0579 6.26693 9.80013 6.26693H3.13346C2.87573 6.26693 2.66667 6.05786 2.66667 5.80013C2.66667 5.5424 2.87573 5.33333 3.13346 5.33333H9.80013ZM8.66667 3.13346V2.26693H4.26693V3.13346C4.26693 3.3912 4.05786 3.60026 3.80013 3.60026C3.5424 3.60026 3.33333 3.3912 3.33333 3.13346V2.26693H1.80013C1.32148 2.26693 0.933594 2.65482 0.933594 3.13346V11.1335C0.933594 11.6121 1.32148 12 1.80013 12H11.1335C11.6121 12 12 11.6121 12 11.1335V3.13346C12 2.65482 11.6121 2.26693 11.1335 2.26693H9.60026V3.13346C9.60026 3.3912 9.3912 3.60026 9.13346 3.60026C8.87573 3.60026 8.66667 3.3912 8.66667 3.13346ZM12.9336 11.1335C12.9336 12.1276 12.1276 12.9336 11.1335 12.9336H1.80013C0.806018 12.9336 0 12.1276 0 11.1335V3.13346C0 2.13935 0.806018 1.33333 1.80013 1.33333H3.33333V0.466797C3.33333 0.209064 3.5424 0 3.80013 0C4.05786 0 4.26693 0.209064 4.26693 0.466797V1.33333H8.66667V0.466797C8.66667 0.209064 8.87573 0 9.13346 0C9.3912 0 9.60026 0.209064 9.60026 0.466797V1.33333H11.1335C12.1276 1.33333 12.9336 2.13935 12.9336 3.13346V11.1335Z" fill="#4A5565"/>
+</svg>

web/public/images/Cancel.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 4L4 12" stroke="#4A5565" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4 4L12 12" stroke="#4A5565" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

web/public/images/Column.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20.000000" height="20.000000" fill="none">
+	<rect id="2" width="20.000000" height="20.000000" x="0.000000" y="0.000000" />
+	<path id="Vector (Stroke)" d="M15.5288 4.58774C15.5288 4.03262 15.0558 3.58275 14.4721 3.58275L12.6024 3.58275L12.6024 16.4172L14.4721 16.4172C15.0558 16.4172 15.5288 15.9674 15.5288 15.4123L15.5288 4.58774ZM8.53743 16.4172L11.4639 16.4172L11.4639 3.58275L8.53743 3.58275L8.53743 16.4172ZM4.47249 15.4123C4.47249 15.9674 4.94551 16.4172 5.52921 16.4172L7.39893 16.4172L7.39893 3.58275L5.52921 3.58275C4.94551 3.58275 4.47249 4.03262 4.47249 4.58774L4.47249 15.4123ZM16.6673 15.4123C16.6673 16.5652 15.6844 17.5 14.4721 17.5L5.52921 17.5C4.31691 17.5 3.33398 16.5652 3.33398 15.4123L3.33398 4.58774C3.33398 3.4348 4.31691 2.5 5.52921 2.5L14.4721 2.5C15.6844 2.5 16.6673 3.4348 16.6673 4.58774L16.6673 15.4123Z" fill="rgb(73.6525,85.0542,101.01)" fill-rule="nonzero" />
+</svg>

web/public/images/DateType.svg

@@ -0,0 +1,6 @@
+<svg width="23" height="18" viewBox="0 0 23 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.047 0.296757C2.25648 -0.368344 3.77685 0.124827 4.3648 1.37366L5.11247 2.96353L5.4417 2.63536L7.83553 0.240469C8.13294 -0.0567337 8.61522 -0.0567414 8.91243 0.240469C9.17248 0.500596 9.20501 0.901988 9.01014 1.19736L8.91243 1.31737L5.96422 4.26558L5.80173 4.42701L5.89944 4.63517L7.08148 7.14582C7.3233 7.65936 7.98378 7.80754 8.42177 7.44638L8.97722 6.98864C9.3015 6.72119 9.78125 6.76732 10.0488 7.09166C10.3162 7.41586 10.27 7.89565 9.94579 8.16326L9.39141 8.62099C8.18688 9.61469 6.36886 9.20649 5.70402 7.79367L4.65792 5.57189L1.29976 8.93005C1.00253 9.22718 0.520202 9.2273 0.222856 8.93005C-0.0743219 8.63287 -0.074249 8.15056 0.222856 7.85314L3.96866 4.10734L2.98733 2.02257C2.77355 1.56839 2.22079 1.38873 1.78086 1.63067L1.12877 1.98964C0.760407 2.19229 0.297008 2.05746 0.09435 1.68909C-0.107991 1.32062 0.0266413 0.858313 0.394906 0.655725L1.047 0.296757Z" fill="#4A5565"/>
+<path d="M11.9012 1.87167C14.4982 1.87167 16.7693 3.27144 17.9996 5.35945H14.808C14.4334 5.35945 14.1295 5.66331 14.1295 6.0379C14.1295 6.41249 14.4334 6.71634 14.808 6.71634L19.6526 6.71634C20.0272 6.71634 20.3311 6.41248 20.3311 6.0379V1.19322C20.3311 0.818634 20.0272 0.51478 19.6526 0.51478C19.278 0.51478 18.9742 0.818634 18.9742 1.19322V4.35835C17.4717 2.04584 14.866 0.51478 11.9012 0.514781C11.9012 0.514781 10.9899 0.444098 10.9899 1.18453C10.9899 1.92495 11.9012 1.87167 11.9012 1.87167Z" fill="#60A9FF"/>
+<path d="M11.813 15.2948C9.21597 15.2948 6.94485 13.895 5.71461 11.807L8.90623 11.807C9.28082 11.807 9.58467 11.5032 9.58467 11.1286C9.58467 10.754 9.28082 10.4501 8.90623 10.4501H4.06156C3.68697 10.4501 3.38312 10.754 3.38312 11.1286L3.38311 15.9733C3.38311 16.3478 3.68697 16.6517 4.06156 16.6517C4.43615 16.6517 4.74 16.3478 4.74 15.9733L4.74 12.8081C6.24253 15.1206 8.84818 16.6517 11.813 16.6517C11.813 16.6517 12.7242 16.7224 12.7242 15.982C12.7242 15.2415 11.813 15.2948 11.813 15.2948Z" fill="#60A9FF"/>
+<path d="M16.961 17.4004C16.6826 17.4004 16.4782 17.3395 16.3477 17.2177C16.2259 17.0872 16.165 16.9001 16.165 16.6565C16.165 16.5086 16.2041 16.3651 16.2824 16.2259C16.3607 16.0867 16.4738 15.9388 16.6217 15.7822L19.2448 12.9894C19.645 12.5718 19.9321 12.1933 20.1062 11.854C20.2802 11.506 20.3672 11.158 20.3672 10.81C20.3672 10.375 20.228 10.0444 19.9495 9.81817C19.6798 9.59196 19.284 9.47886 18.762 9.47886C18.4662 9.47886 18.1704 9.52236 17.8746 9.60937C17.5787 9.68767 17.2786 9.82687 16.9741 10.027C16.8175 10.1314 16.6696 10.1749 16.5304 10.1575C16.3999 10.1401 16.2824 10.0835 16.178 9.98782C16.0823 9.89212 16.0171 9.77467 15.9823 9.63547C15.9475 9.49626 15.9518 9.35706 15.9953 9.21786C16.0475 9.06995 16.1519 8.9438 16.3085 8.8394C16.6826 8.58709 17.1002 8.39569 17.5613 8.26519C18.0312 8.13468 18.501 8.06943 18.9708 8.06943C19.632 8.06943 20.1888 8.16948 20.6412 8.36959C21.0936 8.56969 21.4373 8.86115 21.6722 9.24396C21.9071 9.62677 22.0245 10.0922 22.0245 10.6403C22.0245 11.0057 21.9636 11.3625 21.8418 11.7105C21.7287 12.0585 21.5504 12.4108 21.3068 12.7675C21.0719 13.1242 20.763 13.5027 20.3802 13.9029L18.3524 16.0171H21.7635C21.9984 16.0171 22.1768 16.0736 22.2986 16.1867C22.4204 16.2998 22.4813 16.4695 22.4813 16.6957C22.4813 16.9219 22.4204 17.0959 22.2986 17.2177C22.1768 17.3395 21.9984 17.4004 21.7635 17.4004H16.961Z" fill="#4A5565"/>
+</svg>

web/public/images/DeleteLayer.svg

@@ -0,0 +1,5 @@
+<svg width="20" height="22" viewBox="0 0 20 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 11.6V18.6C0 20.0911 1.20903 21.3002 2.7002 21.3002H12.7002C14.1914 21.3002 15.4004 20.0911 15.4004 18.6V17.3002H14V18.6C14 19.3179 13.4182 19.8998 12.7002 19.8998H2.7002C1.98223 19.8998 1.40039 19.3179 1.40039 18.6V11.6C1.40039 10.882 1.98223 10.3002 2.7002 10.3002H4V8.89978H2.7002C1.20903 8.89978 0 10.1088 0 11.6Z" fill="#4A5565"/>
+<path d="M10.9994 9.70015C10.9994 10.0867 11.3131 10.4003 11.6996 10.4003C12.0862 10.4003 12.3998 10.0867 12.3998 9.70015V2.39057L14.2045 4.19526C14.478 4.46863 14.9214 4.46863 15.1947 4.19526C15.4682 3.9219 15.4682 3.47839 15.1947 3.20503L12.1947 0.205025C11.9214 -0.0683418 11.478 -0.0683418 11.2045 0.205025L8.20454 3.20503C7.93117 3.47839 7.93117 3.9219 8.20454 4.19526C8.47791 4.46863 8.92141 4.46863 9.19477 4.19526L10.9994 2.39057V9.70015Z" fill="#FF5F57"/>
+<path d="M4 8.89978L3.99951 7.59997C3.99951 6.1088 5.20854 4.89978 6.69971 4.89978H7.69971C8.08631 4.89978 8.3999 5.21337 8.3999 5.59997C8.3999 5.98657 8.08631 6.30017 7.69971 6.30017H6.69971C5.98174 6.30017 5.3999 6.882 5.3999 7.59997V14.6C5.3999 15.3179 5.98174 15.8998 6.69971 15.8998H16.6997C17.4177 15.8998 17.9995 15.3179 17.9995 14.6V7.59997C17.9995 6.882 17.4177 6.30017 16.6997 6.30017H15.6997C15.3131 6.30017 14.9995 5.98657 14.9995 5.59997C14.9995 5.21337 15.3131 4.89978 15.6997 4.89978H16.6997C18.1909 4.89978 19.3999 6.1088 19.3999 7.59997V14.6C19.3999 16.0911 18.1909 17.3001 16.6997 17.3001L15.4004 17.3002H14L6.69971 17.3001C5.20854 17.3001 3.99951 16.0911 3.99951 14.6L4 10.3002V8.89978Z" fill="#FF5F57"/>
+</svg>

web/public/images/Down.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.000000" height="16.000000" opacity="0.5" fill="none">
+	<rect id="Icon" width="16.000000" height="16.000000" x="0.000000" y="0.000000" />
+	<path id="Vector" d="M4 6L8 10L12 6" fill-rule="nonzero" stroke="rgb(73.6525,85.0542,101.01)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.33333337" />
+</svg>

web/public/images/Edit.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.62108 0.578686C9.39407 -0.19289 10.6473 -0.192901 11.4203 0.578686C12.1932 1.35027 12.1932 2.60123 11.4203 3.37281L2.9043 11.8734C2.8231 11.9544 2.71288 12 2.59804 12H0.433108C0.193976 12 0 11.8064 0 11.5677V9.36325C0 9.24868 0.0457346 9.13858 0.126852 9.05754L8.62108 0.578686ZM0.866216 9.54172V11.136H2.41803L9.57368 3.99326L7.9989 2.42134L0.866216 9.54172ZM10.8078 1.19009C10.373 0.756075 9.6684 0.756086 9.23359 1.19009L8.61141 1.80994L10.1862 3.38186L10.8078 2.76141C11.2425 2.32739 11.2425 1.62411 10.8078 1.19009Z" fill="#4A5565"/>
+</svg>

web/public/images/EmptyList.svg

@@ -0,0 +1,67 @@
+<svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <circle cx="60" cy="60" r="60" fill="url(#paint0_linear_664_9087)" />
+    <path
+        d="M31.8984 33.4521C31.8984 27.3699 36.8351 21.2877 43.2908 21.2877H65.3162C70.3496 21.2877 74.4301 25.3723 74.4301 30.411V72.9863C74.4301 78.025 70.3496 82.1096 65.3162 82.1096H41.0124C35.9789 82.1096 31.8984 78.025 31.8984 72.9863V33.4521Z"
+        fill="#C9E88B" fill-opacity="0.8" />
+    <path
+        d="M37.2148 34.9726C37.2148 29.9339 41.2953 25.8493 46.3288 25.8493H70.6326C75.666 25.8493 79.7465 29.934 79.7465 34.9726V77.5479C79.7465 82.5866 75.666 86.6712 70.6326 86.6712H46.3288C41.2953 86.6712 37.2148 82.5866 37.2148 77.5479V34.9726Z"
+        fill="white" />
+    <path
+        d="M78.0375 34.9726C78.0375 30.8787 74.7221 27.5599 70.6324 27.5599H46.3286C42.2389 27.5599 38.9236 30.8787 38.9236 34.9726V77.5479C38.9236 81.6418 42.2389 84.9606 46.3286 84.9606H70.6324C74.7221 84.9606 78.0375 81.6418 78.0375 77.5479V34.9726ZM81.4552 77.5479C81.4552 83.5313 76.6097 88.3818 70.6324 88.3818H46.3286C40.3514 88.3818 35.5059 83.5313 35.5059 77.5479V34.9726C35.5059 28.9892 40.3514 24.1387 46.3286 24.1387H70.6324C76.6097 24.1387 81.4552 28.9892 81.4552 34.9726V77.5479Z"
+        fill="url(#paint1_linear_664_9087)" />
+    <path
+        d="M56.7726 34.9726C57.5066 34.9726 58.1017 35.5683 58.1017 36.3031C58.1017 37.0379 57.5066 37.6336 56.7726 37.6336H46.1397C45.4056 37.6336 44.8105 37.0379 44.8105 36.3031C44.8105 35.5683 45.4056 34.9726 46.1397 34.9726H56.7726Z"
+        fill="#1B8340" />
+    <path
+        d="M70.8045 43.3356C71.5489 43.3356 72.1523 43.9313 72.1523 44.6661C72.1523 45.4009 71.5489 45.9966 70.8045 45.9966H46.1584C45.414 45.9966 44.8105 45.4009 44.8105 44.6661C44.8105 43.9313 45.414 43.3356 46.1584 43.3356H70.8045Z"
+        fill="#FECA0A" />
+    <path
+        d="M70.8045 49.7979C71.5489 49.7979 72.1523 50.3936 72.1523 51.1284C72.1523 51.8632 71.5489 52.4589 70.8045 52.4589H46.1584C45.414 52.4589 44.8105 51.8632 44.8105 51.1284C44.8105 50.3936 45.414 49.7979 46.1584 49.7979H70.8045Z"
+        fill="#FECA0A" />
+    <path
+        d="M70.8045 56.2603C71.5489 56.2603 72.1523 56.856 72.1523 57.5908C72.1523 58.3256 71.5489 58.9212 70.8045 58.9212H46.1584C45.414 58.9212 44.8105 58.3256 44.8105 57.5908C44.8105 56.856 45.414 56.2603 46.1584 56.2603H70.8045Z"
+        fill="#FECA0A" />
+    <path
+        d="M70.8045 62.7226C71.5489 62.7226 72.1523 63.3183 72.1523 64.0531C72.1523 64.7879 71.5489 65.3836 70.8045 65.3836H46.1584C45.414 65.3836 44.8105 64.7879 44.8105 64.0531C44.8105 63.3183 45.414 62.7226 46.1584 62.7226H70.8045Z"
+        fill="#FECA0A" />
+    <path
+        d="M94.6128 87.0529C95.5206 88.2078 95.3215 89.8808 94.1678 90.7896C93.0142 91.6984 91.3429 91.499 90.4349 90.3442L83.1477 81.0749C82.2398 79.9201 82.439 78.2471 83.5927 77.3382C84.7464 76.4294 86.4177 76.6288 87.3256 77.7837L94.6128 87.0529Z"
+        fill="#88B531" />
+    <foreignObject x="56.3965" y="48.0994" width="39.459" height="39.4894">
+        <div xmlns="http://www.w3.org/1999/xhtml"
+            style="backdrop-filter:blur(2.5px);clip-path:url(#bgblur_0_664_9087_clip_path);height:100%;width:100%"></div>
+    </foreignObject>
+    <path data-figma-bg-blur-radius="5"
+        d="M87.7014 58.7258C92.7321 65.1248 91.6282 74.3946 85.2357 79.4305C78.8433 84.4664 69.583 83.3614 64.5523 76.9624C59.5216 70.5634 60.6255 61.2936 67.0179 56.2577C73.4103 51.2218 82.6706 52.3268 87.7014 58.7258Z"
+        fill="#A6CE39" fill-opacity="0.1" />
+    <foreignObject x="57.3984" y="49.0993" width="37.459" height="37.4898">
+        <div xmlns="http://www.w3.org/1999/xhtml"
+            style="backdrop-filter:blur(2px);clip-path:url(#bgblur_1_664_9087_clip_path);height:100%;width:100%"></div>
+    </foreignObject>
+    <path data-figma-bg-blur-radius="4"
+        d="M85.9111 60.1367C81.6586 54.7276 73.8309 53.7932 68.4273 58.0498C63.0237 62.3067 62.0905 70.143 66.343 75.5521C70.5956 80.9611 78.4234 81.8948 83.8269 77.638L85.236 79.4303L84.9343 79.6624C78.6564 84.3552 69.7907 83.2973 64.7909 77.2587L64.5525 76.9627C59.5218 70.5637 60.6257 61.2934 67.0182 56.2575L67.3194 56.0259C73.6985 51.2573 82.7494 52.427 87.7016 58.7261L87.9329 59.0276C92.6966 65.4132 91.5284 74.473 85.236 79.4303L83.8269 77.638C89.2302 73.3811 90.1633 65.5457 85.9111 60.1367Z"
+        fill="#4F8E3C" />
+    <path
+        d="M76.9805 69.2493C76.8472 69.7797 76.4221 70.226 75.8757 70.226L75.509 70.226C74.9524 70.226 74.4896 69.7684 74.5681 69.2168C74.594 69.0345 74.6271 68.8661 74.6672 68.7116C74.7732 68.2974 74.9498 67.922 75.1971 67.5855C75.4515 67.2489 75.787 66.893 76.2039 66.5176C76.5289 66.2329 76.8221 65.9643 77.0835 65.7119C77.3449 65.453 77.5533 65.1812 77.7087 64.8964C77.8642 64.6052 77.9419 64.2719 77.9419 63.8965C77.9419 63.4888 77.8677 63.1425 77.7193 62.8578C77.571 62.573 77.352 62.3562 77.0623 62.2074C76.7797 62.0585 76.4264 61.9841 76.0025 61.9841C75.6493 61.9841 75.3172 62.0488 75.0064 62.1782C74.6955 62.3012 74.4447 62.4954 74.2539 62.7607C74.2299 62.7934 74.2072 62.8273 74.186 62.8627C73.9079 63.325 73.5188 63.7897 72.9796 63.7897L72.4096 63.7897C71.8508 63.7897 71.3818 63.3233 71.5275 62.7833C71.633 62.3925 71.8 62.042 72.0284 61.7317C72.4382 61.1751 72.9893 60.7577 73.6817 60.4794C74.374 60.2011 75.1477 60.0619 76.0025 60.0619C76.9492 60.0619 77.7582 60.2108 78.4294 60.5085C79.1006 60.7997 79.6128 61.2269 79.966 61.7899C80.3263 62.3465 80.5065 63.0196 80.5065 63.8091C80.5065 64.3787 80.3829 64.8964 80.1356 65.3624C79.8883 65.8219 79.5668 66.2523 79.1712 66.6535C78.7756 67.0483 78.3481 67.4431 77.8889 67.8379C77.4933 68.1679 77.2248 68.5271 77.0835 68.9154C77.0439 69.0224 77.0096 69.1337 76.9805 69.2493ZM74.2857 73.2548C74.2857 72.9053 74.4164 72.6109 74.6778 72.3714C74.9392 72.1255 75.296 72.0025 75.7482 72.0025C76.2003 72.0025 76.5571 72.1255 76.8185 72.3714C77.0799 72.6109 77.2107 72.9053 77.2107 73.2548C77.2107 73.6043 77.0799 73.902 76.8185 74.1479C76.5571 74.3874 76.2003 74.5071 75.7482 74.5071C75.296 74.5071 74.9392 74.3874 74.6778 74.1479C74.4164 73.902 74.2857 73.6043 74.2857 73.2548Z"
+        fill="#DC2626" />
+    <defs>
+        <clipPath id="bgblur_0_664_9087_clip_path" transform="translate(-56.3965 -48.0994)">
+            <path
+                d="M87.7014 58.7258C92.7321 65.1248 91.6282 74.3946 85.2357 79.4305C78.8433 84.4664 69.583 83.3614 64.5523 76.9624C59.5216 70.5634 60.6255 61.2936 67.0179 56.2577C73.4103 51.2218 82.6706 52.3268 87.7014 58.7258Z" />
+        </clipPath>
+        <clipPath id="bgblur_1_664_9087_clip_path" transform="translate(-57.3984 -49.0993)">
+            <path
+                d="M85.9111 60.1367C81.6586 54.7276 73.8309 53.7932 68.4273 58.0498C63.0237 62.3067 62.0905 70.143 66.343 75.5521C70.5956 80.9611 78.4234 81.8948 83.8269 77.638L85.236 79.4303L84.9343 79.6624C78.6564 84.3552 69.7907 83.2973 64.7909 77.2587L64.5525 76.9627C59.5218 70.5637 60.6257 61.2934 67.0182 56.2575L67.3194 56.0259C73.6985 51.2573 82.7494 52.427 87.7016 58.7261L87.9329 59.0276C92.6966 65.4132 91.5284 74.473 85.236 79.4303L83.8269 77.638C89.2302 73.3811 90.1633 65.5457 85.9111 60.1367Z" />
+        </clipPath>
+        <linearGradient id="paint0_linear_664_9087" x1="60" y1="0" x2="60" y2="120"
+            gradientUnits="userSpaceOnUse">
+            <stop offset="0.3" stop-color="#F2F9E9" />
+            <stop offset="1" stop-color="white" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient id="paint1_linear_664_9087" x1="48.6071" y1="36.8733" x2="75.9907"
+            y2="83.6056" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#6EA844" />
+            <stop offset="1" stop-color="#FAE365" />
+        </linearGradient>
+    </defs>
+</svg>

web/public/images/Eye.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 3.64453C13.4796 3.64457 15.8567 5.29381 17.2354 6.6709L17.5039 6.94824C18.7966 8.32958 19.3839 9.62709 19.418 9.70508C19.4593 9.79831 19.4805 9.89899 19.4805 10.001C19.4804 10.1017 19.4583 10.2007 19.418 10.293L19.4189 10.2939C19.3831 10.3782 18.7169 11.8486 17.2354 13.3301C15.8566 14.7072 13.4795 16.3554 10 16.3555C6.73797 16.3555 4.44509 14.9067 3.03516 13.5908L2.76465 13.3301C1.28492 11.8504 0.618401 10.3801 0.582031 10.2979C0.540486 10.2044 0.519559 10.1032 0.519531 10.001C0.519531 9.89879 0.540554 9.79749 0.582031 9.7041C0.635364 9.58081 1.30424 8.1313 2.76465 6.6709L3.03516 6.41016C4.44504 5.09423 6.73786 3.64453 10 3.64453ZM10 5.10547C7.61905 5.10547 5.54432 5.97001 3.82129 7.68164C3.13073 8.36748 2.54251 9.14842 2.07227 10C2.54265 10.8518 3.1308 11.6331 3.82129 12.3193C5.54434 14.0302 7.61904 14.8945 10 14.8945C14.8796 14.8945 17.3115 11.1266 17.9277 10.001C17.4574 9.14912 16.8694 8.36768 16.1787 7.68164C14.4557 5.97003 12.3809 5.1055 10 5.10547ZM10.1914 6.14941C11.1439 6.19785 12.0471 6.59784 12.7246 7.27539C13.4473 7.99812 13.8541 8.97792 13.8555 10L13.8447 10.2852C13.7956 10.9473 13.5767 11.5878 13.2061 12.1426C12.7824 12.7765 12.18 13.2707 11.4756 13.5625C10.7711 13.8543 9.9959 13.9299 9.24805 13.7812C8.50013 13.6325 7.81266 13.2658 7.27344 12.7266C6.7342 12.1873 6.36655 11.4999 6.21777 10.752C6.06909 10.0041 6.14571 9.22885 6.4375 8.52441C6.72931 7.81993 7.22343 7.21761 7.85742 6.79395C8.4915 6.37027 9.23741 6.14453 10 6.14453L10.1914 6.14941ZM10.916 7.78809C10.4787 7.60695 9.99748 7.55911 9.5332 7.65137C9.06879 7.74374 8.64148 7.97183 8.30664 8.30664C7.9718 8.64148 7.74375 9.06876 7.65137 9.5332C7.55908 9.9975 7.60696 10.4787 7.78809 10.916C7.9693 11.3535 8.27619 11.7281 8.66992 11.9912C9.06358 12.2541 9.5266 12.3945 10 12.3945C10.635 12.3945 11.2444 12.1423 11.6934 11.6934C12.1423 11.2444 12.3945 10.635 12.3945 10C12.3945 9.52646 12.2533 9.06366 11.9902 8.66992C11.7272 8.27624 11.3535 7.96928 10.916 7.78809Z" fill="#4A5565"/>
+</svg>

web/public/images/Formula.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 121.83 122.88" style="enable-background:new 0 0 121.83 122.88" xml:space="preserve"><g><path d="M27.61,34.37l-4.07,4.6l0.4,1.74h10.48c-2.14,12.38-3.74,23.54-6.81,40.74c-3.67,21.94-5.78,27.33-7.03,29.3 c-1.1,1.95-2.68,2.96-4.82,2.96c-2.35,0-6.6-1.86-8.88-3.97c-0.82-0.56-1.79-0.42-2.82,0.26C2,111.74,0,114.42,0,116.82 c-0.12,3.24,4.21,6.06,8.34,6.06c3.64,0,9-2.28,14.64-7.64c7.71-7.31,13.48-17.34,18.3-39.02c3.1-13.84,4.56-22.84,6.74-35.5 l13.02-1.18l2.82-5.17H49.2C52.99,10.53,55.95,7,59.59,7c2.42,0,5.24,1.86,8.48,5.52c0.96,1.32,2.4,1.18,3.5,0.28 c1.85-1.1,4.13-3.92,4.28-6.48C75.96,3.5,72.6,0,66.82,0C61.58,0,53.55,3.5,46.8,10.38c-5.92,6.27-9.02,14.1-11.16,23.99H27.61 L27.61,34.37z M69.27,50.33c4.04-5.38,6.46-7.17,7.71-7.17c1.29,0,2.32,1.27,4.53,8.41l3.78,12.19 c-7.31,11.18-12.66,17.41-15.91,17.41c-1.08,0-2.17-0.34-2.94-1.1c-0.76-0.76-1.6-1.39-2.42-1.39c-2.68,0-6,3.25-6.06,7.28 c-0.06,4.11,2.82,7.05,6.6,7.05c6.49,0,11.98-6.37,22.58-23.26l3.1,10.45c2.66,8.98,5.78,12.81,9.68,12.81 c4.82,0,11.3-4.11,18.37-15.22l-2.96-3.38c-4.25,5.12-7.07,7.52-8.74,7.52c-1.86,0-3.49-2.84-5.64-9.82l-4.53-14.73 c2.68-3.95,5.32-7.27,7.64-9.92c2.76-3.15,4.89-4.49,6.34-4.49c1.22,0,2.28,0.52,2.94,1.25c0.87,0.96,1.39,1.41,2.42,1.41 c2.33,0,5.93-2.96,6.06-6.88c0.12-3.64-2.14-6.74-6.06-6.74c-5.92,0-11.14,5.1-21.19,20.04l-2.07-6.41 c-2.9-9-4.82-13.63-8.86-13.63c-4.7,0-11.16,5.78-17.48,14.94L69.27,50.33L69.27,50.33z"/></g></svg>

web/public/images/FormulaGreen.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="14.000000" height="14.000000" fill="none">
+	<rect id="math_formula_filled_icon_201327 1" width="14.000000" height="14.000000" x="0.000000" y="0.000000" />
+	<path id="Vector" d="M4.71908 3.03231C4.78574 1.53361 6.50335 0.721861 7.70353 1.62183L7.82772 1.71468C7.93462 1.79486 7.99094 1.91749 7.99094 2.04165C7.99094 2.12702 7.96431 2.21312 7.90918 2.28662C7.77382 2.46693 7.51816 2.50335 7.33781 2.36808L7.21362 2.27523C6.53854 1.76896 5.57232 2.22574 5.53483 3.06877L5.48983 4.07536L5.48185 4.25822L6.99943 4.25822C7.22495 4.25822 7.40786 4.44116 7.40788 4.66667C7.40785 4.89216 7.22494 5.07511 6.99943 5.07511L5.44539 5.07511L5.20898 10.4049C5.13941 11.9682 3.29228 12.757 2.11458 11.7265L2.06388 11.682C1.97173 11.6013 1.92463 11.4884 1.92463 11.3749C1.92463 11.2795 1.95792 11.1836 2.02572 11.1061C2.17421 10.9365 2.43198 10.9191 2.60164 11.0674L2.65234 11.1118C3.31482 11.6915 4.35357 11.2478 4.39266 10.3684L4.62793 5.07511L3.49943 5.07511C3.27394 5.07511 3.09101 4.89215 3.09098 4.66667C3.091 4.44116 3.27393 4.25823 3.49943 4.25822L4.66439 4.25822L4.71908 3.03231ZM8.01969 1.65487C8.04541 1.68386 8.06785 1.71499 8.08691 1.74772C8.07744 1.73146 8.06671 1.71585 8.05558 1.70044L8.01969 1.65487ZM8.01115 2.43758C7.99137 2.45903 7.96956 2.47783 7.94735 2.49569C7.97047 2.47709 7.99295 2.45722 8.01343 2.43473L8.01115 2.43758ZM7.7924 6.40698C8.08548 6.41154 8.3718 6.50497 8.61157 6.67358C8.45163 6.5611 8.27081 6.48256 8.08122 6.44116C7.98645 6.42048 7.88956 6.40903 7.79183 6.40755L7.7924 6.40698ZM7.15267 6.74137C7.80142 6.38462 8.61693 6.64915 8.93229 7.31901L9.33333 8.17179L9.50993 7.99577L10.7939 6.71118C10.9535 6.55177 11.2122 6.55176 11.3716 6.71118C11.4513 6.79093 11.4912 6.89544 11.4912 6.99993C11.4912 7.07825 11.4688 7.15657 11.424 7.22445L11.3716 7.28882L9.7902 8.8702L9.70304 8.95679L9.75545 9.06844L10.3895 10.4151C10.5192 10.6906 10.8735 10.7701 11.1084 10.5763L11.4063 10.3308C11.5803 10.1874 11.8376 10.2121 11.9811 10.3861C12.0438 10.4621 12.0744 10.5541 12.0744 10.6455C12.0744 10.7632 12.0237 10.8801 11.9259 10.9609L11.6285 11.2064C10.9824 11.7394 10.0072 11.5204 9.65063 10.7626L9.08952 9.57088L7.28825 11.3722C7.12882 11.5315 6.8701 11.5316 6.71061 11.3722C6.63092 11.2925 6.59107 11.1879 6.59107 11.0834C6.59107 10.9789 6.63093 10.8743 6.71061 10.7945L8.71981 8.78532L8.19344 7.66707C8.07877 7.42346 7.78228 7.32709 7.54631 7.45687L7.19653 7.64941C6.99895 7.75811 6.75039 7.68579 6.64168 7.4882C6.60744 7.42585 6.59119 7.35848 6.59119 7.29206C6.59119 7.14796 6.66769 7.0083 6.8029 6.93392L7.15267 6.74137ZM11.6422 6.83366C11.6581 6.88751 11.666 6.9432 11.666 6.9989C11.666 7.0179 11.6651 7.0369 11.6632 7.05583C11.665 7.03725 11.6659 7.01861 11.6659 6.99997C11.6659 6.98135 11.665 6.96273 11.6632 6.94417C11.6615 6.92565 11.6588 6.90723 11.6553 6.88892C11.6517 6.87054 11.6475 6.85169 11.6422 6.83366ZM6.62345 6.84562C6.6186 6.8497 6.61391 6.85394 6.60921 6.85815C6.6132 6.85457 6.61707 6.85082 6.62118 6.84733L6.62345 6.84562ZM8.83431 6.8667C8.86831 6.90291 8.90049 6.94119 8.93083 6.98139L8.83431 6.8667ZM9.00977 7.09684C8.98501 7.05683 8.9587 7.01831 8.93083 6.98139L8.93115 6.98177C8.95905 7.01848 8.9851 7.05697 9.00977 7.09684ZM5.37134 10.5655C5.36877 10.5878 5.36576 10.6098 5.36238 10.6317C5.36552 10.6113 5.36833 10.5908 5.37077 10.5701L5.37134 10.5655ZM1.9414 10.943C1.95388 10.9314 1.96674 10.9203 1.98014 10.9102L1.9414 10.943ZM1.91406 10.97C1.9211 10.9627 1.92781 10.9552 1.93514 10.9483L1.9414 10.943C1.9321 10.9517 1.92301 10.9607 1.91406 10.97ZM2.81982 11.0229C2.87349 11.0635 2.92967 11.0965 2.9873 11.1226C2.96813 11.1139 2.94857 11.1044 2.92977 11.0942C2.89219 11.0737 2.8555 11.0499 2.81982 11.0229ZM11.5977 11.4451C11.4861 11.5169 11.3679 11.5707 11.2468 11.6086C11.3696 11.5701 11.4893 11.515 11.6023 11.4417L11.5977 11.4451Z" fill="rgb(37,129,65)" fill-rule="evenodd" />
+</svg>

web/public/images/FormulaSettingPanel.svg

@@ -0,0 +1,3 @@
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.8333 2.25016C10.8333 1.65185 10.3485 1.16699 9.75016 1.16699C9.15185 1.16699 8.66699 1.65185 8.66699 2.25016V3.0835C8.66699 3.8659 8.03257 4.50033 7.25016 4.50033H4.75016C4.61209 4.50033 4.50033 4.61209 4.50033 4.75016V7.25016C4.50033 8.03257 3.8659 8.66699 3.0835 8.66699H2.25016C1.65185 8.66699 1.16699 9.15185 1.16699 9.75016C1.16699 10.3485 1.65185 10.8333 2.25016 10.8333H3.0835C3.8659 10.8333 4.50033 11.4678 4.50033 12.2502V14.7502C4.50033 14.8882 4.61209 15 4.75016 15H7.25016C7.38823 15 7.5 14.8882 7.5 14.7502V13.9168C7.5 12.6742 8.50752 11.6667 9.75016 11.6667C10.9928 11.6667 12.0003 12.6742 12.0003 13.9168V14.7502C12.0003 14.8882 12.1121 15 12.2502 15H14.7502C14.8882 15 15 14.8882 15 14.7502V12.2502C15 12.1121 14.8882 12.0003 14.7502 12.0003H13.9168C12.6742 12.0003 11.6667 10.9928 11.6667 9.75016C11.6667 8.50752 12.6742 7.5 13.9168 7.5H14.7502C14.8882 7.5 15 7.38823 15 7.25016V4.75016C15 4.61209 14.8882 4.50033 14.7502 4.50033H12.2502C11.4678 4.50033 10.8333 3.8659 10.8333 3.0835V2.25016ZM12.0003 3.0835C12.0003 3.22157 12.1121 3.33333 12.2502 3.33333H14.7502C15.5326 3.33333 16.167 3.96776 16.167 4.75016V7.25016C16.167 8.03257 15.5326 8.66699 14.7502 8.66699H13.9168C13.3185 8.66699 12.8337 9.15185 12.8337 9.75016C12.8337 10.3485 13.3185 10.8333 13.9168 10.8333H14.7502C15.5326 10.8333 16.167 11.4678 16.167 12.2502V14.7502C16.167 15.5326 15.5326 16.167 14.7502 16.167H12.2502C11.4678 16.167 10.8333 15.5326 10.8333 14.7502V13.9168C10.8333 13.3185 10.3485 12.8337 9.75016 12.8337C9.15185 12.8337 8.66699 13.3185 8.66699 13.9168V14.7502C8.66699 15.5326 8.03257 16.167 7.25016 16.167H4.75016C3.96776 16.167 3.33333 15.5326 3.33333 14.7502V12.2502C3.33333 12.1121 3.22157 12.0003 3.0835 12.0003H2.25016C1.00752 12.0003 0 10.9928 0 9.75016C0 8.50752 1.00752 7.5 2.25016 7.5H3.0835C3.22157 7.5 3.33333 7.38823 3.33333 7.25016V4.75016C3.33333 3.96776 3.96776 3.33333 4.75016 3.33333H7.25016C7.38823 3.33333 7.5 3.22157 7.5 3.0835V2.25016C7.5 1.00752 8.50752 0 9.75016 0C10.9928 0 12.0003 1.00752 12.0003 2.25016V3.0835Z" fill="#4A5565"/>
+</svg>

web/public/images/Gear.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20.000000" height="20.000000" fill="none">
+	<rect id="cog" width="20.000000" height="20.000000" x="0.000000" y="0.000000" />
+	<path id="Icon" d="M8.03631 3.46022C8.53592 1.40226 11.4625 1.40226 11.9621 3.46022C12.0985 4.02176 12.7422 4.28826 13.2357 3.98757C15.0441 2.88579 17.1133 4.95502 16.0116 6.76344C15.7109 7.25694 15.9774 7.90064 16.5389 8.03704C18.5969 8.53665 18.5969 11.4632 16.5389 11.9628C15.9774 12.0992 15.7109 12.7429 16.0116 13.2364C17.1133 15.0448 15.0441 17.1141 13.2357 16.0123C12.7422 15.7116 12.0985 15.9781 11.9621 16.5396C11.4625 18.5976 8.53592 18.5976 8.03631 16.5396C7.89991 15.9781 7.25621 15.7116 6.76271 16.0123C4.95429 17.1141 2.88506 15.0449 3.98683 13.2364C4.28753 12.7429 4.02103 12.0992 3.45949 11.9628C1.40153 11.4632 1.40152 8.53665 3.45949 8.03704C4.02103 7.90064 4.28753 7.25694 3.98683 6.76344C2.88506 4.95502 4.95429 2.88579 6.76271 3.98757C7.25621 4.28826 7.89991 4.02176 8.03631 3.46022ZM10.8285 3.73529C10.6174 2.86593 9.38101 2.86593 9.16994 3.73529C8.8472 5.06471 7.32387 5.69549 6.15562 4.98366C5.39175 4.51849 4.51776 5.39248 4.98293 6.15635C5.69476 7.3246 5.06397 8.84793 3.73455 9.17067C2.8652 9.38175 2.8652 10.6181 3.73455 10.8292C5.06397 11.1519 5.69476 12.6753 4.98293 13.8435C4.51776 14.6074 5.39174 15.4814 6.15562 15.0162C7.32387 14.3044 8.8472 14.9352 9.16994 16.2646C9.38101 17.1339 10.6174 17.1339 10.8285 16.2646C11.1512 14.9352 12.6745 14.3044 13.8428 15.0162C14.6067 15.4814 15.4807 14.6074 15.0155 13.8435C14.3036 12.6753 14.9344 11.1519 16.2639 10.8292C17.1332 10.6181 17.1332 9.38175 16.2639 9.17067C14.9344 8.84793 14.3036 7.3246 15.0155 6.15635C15.4806 5.39248 14.6067 4.51849 13.8428 4.98366C12.6745 5.69549 11.1512 5.06471 10.8285 3.73529ZM11.9157 9.99994C11.9157 8.94139 11.0577 8.08343 9.9992 8.08343C8.94066 8.08343 8.0827 8.94139 8.0827 9.99994C8.0827 11.0585 8.94066 11.9164 9.9992 11.9164C11.0577 11.9164 11.9157 11.0585 11.9157 9.99994ZM13.0827 9.99994C13.0827 11.7028 11.7021 13.0834 9.9992 13.0834C8.29632 13.0834 6.91571 11.7028 6.91571 9.99994C6.91571 8.29706 8.29632 6.91644 9.9992 6.91644C11.7021 6.91644 13.0827 8.29706 13.0827 9.99994Z" fill="rgb(73.6525,85.0542,101.01)" fill-rule="nonzero" />
+</svg>

web/public/images/Help.svg

@@ -0,0 +1,6 @@
+<svg viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12.000000" height="12.000000" fill="none">
+	<rect id="Icon" width="12.000000" height="12.000000" x="0.000000" y="0.000000" />
+	<path id="Vector" d="M6 11C3.23858 11 1 8.76142 1 6C1 3.23858 3.23858 1 6 1C8.76142 1 11 3.23858 11 6C11 8.76142 8.76142 11 6 11Z" stroke="rgb(73.6525,85.0542,101.01)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" />
+	<path id="Vector" d="M2 0L0 0" stroke="rgb(73.6525,85.0542,101.01)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" transform="matrix(0,1,-1,0,6,6)" />
+	<path id="Vector" d="M6 4L6.005 4" stroke="rgb(73.6525,85.0542,101.01)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" />
+</svg>

web/public/images/IconHide.svg

@@ -0,0 +1,3 @@
+<svg width="19" height="16" viewBox="0 0 19 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.20475 1.63483e-05C3.37257 0.00126309 3.53421 0.0649131 3.65723 0.179053L3.66374 0.184749L3.66943 0.19126L16.1702 13.938C16.2902 14.0698 16.3528 14.2442 16.3444 14.4222C16.336 14.6002 16.2572 14.7677 16.1255 14.8877C15.9936 15.0077 15.8194 15.0702 15.6413 15.0619C15.4632 15.0535 15.2958 14.9748 15.1758 14.843L13.4774 12.9753C12.1995 13.5349 10.8183 13.8202 9.4222 13.8119L9.42057 13.8127C6.17843 13.8122 3.89977 12.3723 2.49756 11.0637L2.22819 10.8041C0.752419 9.32827 0.0899779 7.86184 0.0577799 7.78892C0.0199458 7.70333 0 7.60988 0 7.51629C2.73635e-05 7.4224 0.0196795 7.32948 0.0577799 7.24367C0.117984 7.10683 1.32711 4.45139 4.13981 2.70428L2.67497 1.0897L2.66846 1.08319L2.66276 1.07505C2.56207 0.940899 2.51479 0.774064 2.53092 0.607113C2.54714 0.440037 2.62594 0.284897 2.75065 0.172542C2.87526 0.0603624 3.03709 -0.00115221 3.20475 1.63483e-05ZM5.06022 3.71828C2.96894 4.94103 1.80921 6.80999 1.42659 7.51467C1.90218 8.38297 2.49968 9.17915 3.20231 9.87713C4.93608 11.5985 7.02553 12.4683 9.4222 12.4683C10.4781 12.4745 11.5258 12.2857 12.513 11.9157L11.438 10.7324C10.7113 11.1867 9.85073 11.3832 8.99577 11.2858C8.08128 11.1815 7.2354 10.7486 6.61621 10.0676C5.99701 9.38649 5.64606 8.50334 5.62907 7.58302C5.61323 6.7224 5.89045 5.88387 6.41195 5.20347L5.06022 3.71828ZM9.74284 1.22316C13.0276 1.32051 15.2866 2.90058 16.6154 4.22772L16.6162 4.22853C18.0699 5.68233 18.7347 7.12484 18.7858 7.24286C18.8241 7.32882 18.8444 7.4222 18.8444 7.51629C18.8444 7.61046 18.8241 7.70371 18.7858 7.78973C18.7483 7.87399 17.9559 9.62824 16.1686 11.2272L16.1678 11.2264C16.1032 11.2861 16.0282 11.3334 15.9456 11.3639C15.8617 11.395 15.7722 11.4094 15.6828 11.4055C15.5934 11.4015 15.5057 11.3795 15.4248 11.3412C15.3439 11.3028 15.2713 11.2484 15.2116 11.1817C15.1521 11.1151 15.1064 11.0374 15.0773 10.953C15.0482 10.8683 15.0363 10.7778 15.0423 10.6885C15.0484 10.5993 15.0722 10.5121 15.1123 10.4321C15.1517 10.3538 15.2056 10.2837 15.2718 10.2263L15.599 9.91945C16.3199 9.21252 16.931 8.40153 17.4162 7.51467C17.0023 6.75971 16.497 6.05915 15.9098 5.43052L15.6421 5.15464C13.9083 3.43309 11.8189 2.56271 9.4222 2.56268C8.91804 2.56208 8.41412 2.60276 7.91667 2.68475L7.91585 2.68394C7.82979 2.69944 7.74179 2.69901 7.65625 2.68068C7.56891 2.66197 7.48621 2.62594 7.41292 2.57489C7.33967 2.52384 7.2768 2.45906 7.229 2.38364C7.1813 2.30835 7.14952 2.22412 7.1346 2.13625C7.11973 2.04826 7.12244 1.95784 7.14274 1.87095C7.16309 1.78401 7.2002 1.70154 7.2526 1.62925C7.30503 1.55694 7.37159 1.49578 7.44792 1.4494C7.50515 1.41462 7.56715 1.38848 7.63184 1.37209L7.69775 1.35907C8.26769 1.26465 8.84449 1.21733 9.4222 1.21828L9.74284 1.22316ZM7.33968 6.22642C7.08263 6.64209 6.95372 7.1268 6.97428 7.61883C6.99832 8.19298 7.22342 8.74056 7.60986 9.16587C7.99636 9.59119 8.52008 9.86758 9.08936 9.94631C9.57697 10.0137 10.0713 9.93119 10.5094 9.71519L7.33968 6.22642ZM9.63216 3.88999C9.7796 3.7898 9.9608 3.75241 10.1359 3.78582C10.9422 3.94248 11.6774 4.35561 12.2298 4.9634C12.7821 5.57107 13.123 6.34092 13.2023 7.15822C13.2105 7.24611 13.2015 7.33594 13.1755 7.42026C13.1494 7.50444 13.1072 7.58274 13.0509 7.65057C12.9946 7.71849 12.9248 7.7746 12.8467 7.81577C12.7686 7.85692 12.6831 7.88249 12.5952 7.89064L12.5863 7.89146H12.5334C12.3656 7.89204 12.2035 7.8301 12.0793 7.7173C11.955 7.60446 11.8775 7.449 11.862 7.28192L11.8351 7.08579C11.7536 6.63209 11.5456 6.20896 11.2337 5.8659C10.9217 5.52269 10.5198 5.27561 10.0757 5.15138L9.88363 5.10581C9.70868 5.07232 9.55406 4.97076 9.45394 4.82342C9.35381 4.676 9.31636 4.49473 9.34977 4.31968C9.3832 4.14466 9.4848 3.99016 9.63216 3.88999Z" fill="#4A5565"/>
+</svg>

web/public/images/Layer.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20.000000" height="20.000000" fill="none" customFrame="#000000">
+	<rect id="iteration" width="20.000000" height="20.000000" x="0.000000" y="0.000000" />
+	<path id="Vector (Stroke)" d="M2 15.8335L2 7.5C2.00005 7.22391 2.22389 7 2.5 7C2.77611 7 2.99995 7.22391 3 7.5L3 15.8335C3.00004 16.4777 3.52227 16.9999 4.1665 17L12.5 17C12.7761 17 13 17.2239 13 17.5C13 17.7761 12.7761 18 12.5 18L4.1665 18C2.96998 17.9999 2.00004 17.03 2 15.8335ZM4.5 13.3335L4.5 5C4.50006 4.7239 4.72389 4.5 5 4.5C5.27611 4.5 5.49995 4.72391 5.5 5L5.5 13.3335C5.50004 13.9777 6.02227 14.4999 6.66651 14.5L15 14.5C15.2761 14.5 15.5 14.7239 15.5 15C15.5 15.2761 15.2761 15.5 15 15.5L6.66651 15.5C5.46998 15.4999 4.50004 14.53 4.5 13.3335ZM17 4.1665C16.9999 3.5223 16.4777 3.00009 15.8335 3L9.16651 3C8.5223 3.00009 8.00009 3.5223 8 4.1665L8 10.8335C8.00009 11.4777 8.5223 11.9999 9.16651 12L15.8335 12C16.4777 11.9999 16.9999 11.4777 17 10.8335L17 4.1665ZM18 10.8335C17.9999 12.03 17.03 12.9999 15.8335 13L9.16651 13C7.97002 12.9999 7.00009 12.03 7 10.8335L7 4.1665C7.00009 2.97002 7.97002 2.00009 9.16651 2L15.8335 2C17.03 2.00009 17.9999 2.97002 18 4.1665L18 10.8335Z" fill="rgb(73.6525,85.0542,101.01)" fill-rule="nonzero" />
+</svg>

web/public/images/Merge.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20.000000" height="20.000000" fill="none">
+	<rect id="Component 1" width="20.000000" height="20.000000" x="0.000000" y="0.000000" />
+	<path id="Vector" d="M7.16452 8.77166C7.37374 8.56245 7.37374 8.22326 7.16452 8.01405C6.95531 7.80484 6.61612 7.80484 6.40691 8.01405L4.79977 9.6212C4.59055 9.8304 4.59055 10.1696 4.79977 10.3789L6.40691 11.986C6.61612 12.1951 6.95531 12.1951 7.16452 11.986C7.37374 11.7767 7.37374 11.4375 7.16452 11.2283L6.4719 10.5357L13.5281 10.5357L12.8354 11.2283C12.6263 11.4375 12.6263 11.7767 12.8354 11.986C13.0447 12.1951 13.3839 12.1951 13.5931 11.986L15.2003 10.3789C15.4094 10.1696 15.4094 9.8304 15.2003 9.6212L13.5931 8.01405C13.3839 7.80484 13.0447 7.80484 12.8354 8.01405C12.6263 8.22326 12.6263 8.56245 12.8354 8.77166L13.5281 9.46428L6.4719 9.46428L7.16452 8.77166ZM5.71429 2.5C3.93909 2.5 2.5 3.93909 2.5 5.71429L2.5 14.2857C2.5 16.061 3.93909 17.5 5.71429 17.5L14.2857 17.5C16.061 17.5 17.5 16.061 17.5 14.2857L17.5 5.71429C17.5 3.93909 16.061 2.5 14.2857 2.5L5.71429 2.5ZM3.57143 5.71429L10 5.71429L16.4286 5.71429L16.4286 14.2857L3.57143 14.2857L3.57143 5.71429ZM14.2857 16.4286L5.71429 16.4286C4.53082 16.4286 3.57143 15.4692 3.57143 14.2857L16.4286 14.2857C16.4286 15.4692 15.4692 16.4286 14.2857 16.4286ZM16.4286 5.71429L10 5.71429L3.57143 5.71429C3.57143 4.53082 4.53082 3.57143 5.71429 3.57143L14.2857 3.57143C15.4692 3.57143 16.4286 4.53082 16.4286 5.71429Z" fill="rgb(73.6525,85.0542,101.01)" fill-rule="nonzero" />
+</svg>

web/public/images/MergeLayer.svg

@@ -0,0 +1,4 @@
+<svg width="20" height="18" viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18 12.0664H10.4004V16H16.7002C16.9827 16 17.2922 15.849 17.5547 15.499C17.8172 15.1488 18 14.6326 18 14.0332V12.0664ZM1.40039 14.0332C1.40039 14.6326 1.58315 15.1488 1.8457 15.499C2.10818 15.849 2.41764 16 2.7002 16H9V12.0664H1.40039V14.0332ZM19.4004 14.0332C19.4004 14.9062 19.1358 15.724 18.6748 16.3389C18.2134 16.954 17.5222 17.4004 16.7002 17.4004H2.7002C1.87818 17.4004 1.18696 16.954 0.725586 16.3389C0.264541 15.724 0 14.9062 0 14.0332V12.0664V5.33398V3.36719C0 2.49417 0.264541 1.67644 0.725586 1.06152C1.18696 0.446354 1.87818 0 2.7002 0H16.7002C17.5222 0 18.2134 0.446354 18.6748 1.06152C19.1358 1.67644 19.4004 2.49417 19.4004 3.36719V5.33398V12.0664V14.0332ZM18 6.7334V10.667H1.40039V6.7334H18ZM2.7002 1.40039C2.41764 1.40039 2.10818 1.55139 1.8457 1.90137C1.58315 2.25155 1.40039 2.76774 1.40039 3.36719V5.33398H9V1.40039H2.7002ZM17.5547 1.90137C17.8172 2.25155 18 2.76774 18 3.36719V5.33398H10.4004V1.40039H16.7002C16.9827 1.40039 17.2922 1.55139 17.5547 1.90137Z" fill="#4A5565"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18 12.0664H10.4004H9H1.40039H0V5.33398H1.40039H9H10.4004H18H19.4004V12.0664H18ZM18 6.7334V10.667H1.40039V6.7334H18Z" fill="#60A9FF"/>
+</svg>

web/public/images/Minus.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.000000" height="16.000000" fill="none">
+	<rect id="Icon" width="16.000000" height="16.000000" x="0.000000" y="0.000000" />
+	<path id="Vector" d="M3.33398 8L12.6673 8" stroke="rgb(73.6525,85.0542,101.01)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.33333337" />
+</svg>

web/public/images/Palette.svg

@@ -0,0 +1,16 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.000000" height="16.000000" fill="none">
+	<rect id="Icon" width="16.000000" height="16.000000" x="0.000000" y="0.000000" />
+	<path id="Vector" d="M3.28661 12.7142C2.03636 11.464 1.33398 9.76827 1.33398 8.00016C1.33398 6.23205 2.03636 4.53636 3.28661 3.28612C4.53685 2.03587 6.23254 1.3335 8.00065 1.3335C9.76876 1.3335 11.4645 1.96564 12.7147 3.09086C13.9649 4.21607 14.6673 5.7422 14.6673 7.3335C14.6673 8.21755 14.3161 9.0654 13.691 9.69052C13.0659 10.3156 12.218 10.6668 11.334 10.6668L9.83398 10.6668C9.61732 10.6668 9.40494 10.7272 9.22063 10.8411C9.03633 10.955 8.88738 11.118 8.79049 11.3117C8.69359 11.5055 8.65257 11.7225 8.67203 11.9383C8.69149 12.1541 8.77065 12.3602 8.90065 12.5335L9.10065 12.8002C9.23065 12.9735 9.30981 13.1796 9.32927 13.3954C9.34873 13.6112 9.30771 13.8281 9.21082 14.0219C9.11392 14.2157 8.96498 14.3787 8.78067 14.4926C8.59636 14.6065 8.38398 14.6668 8.16732 14.6668L8.00065 14.6668C6.23254 14.6668 4.53685 13.9644 3.28661 12.7142ZM9.00065 4.66683C8.81656 4.66683 8.66732 4.51759 8.66732 4.3335C8.66732 4.1494 8.81656 4.00016 9.00065 4.00016C9.18475 4.00016 9.33398 4.1494 9.33398 4.3335C9.33398 4.51759 9.18475 4.66683 9.00065 4.66683ZM11.6673 7.3335C11.4832 7.3335 11.334 7.18426 11.334 7.00016C11.334 6.81607 11.4832 6.66683 11.6673 6.66683C11.8514 6.66683 12.0007 6.81607 12.0007 7.00016C12.0007 7.18426 11.8514 7.3335 11.6673 7.3335ZM4.33398 8.66683C4.14989 8.66683 4.00065 8.51759 4.00065 8.3335C4.00065 8.1494 4.14989 8.00016 4.33398 8.00016C4.51808 8.00016 4.66732 8.1494 4.66732 8.3335C4.66732 8.51759 4.51808 8.66683 4.33398 8.66683ZM5.66732 5.3335C5.48322 5.3335 5.33398 5.18426 5.33398 5.00016C5.33398 4.81607 5.48322 4.66683 5.66732 4.66683C5.85141 4.66683 6.00065 4.81607 6.00065 5.00016C6.00065 5.18426 5.85141 5.3335 5.66732 5.3335Z" fill-rule="evenodd" stroke="rgb(73.6525,85.0542,101.01)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.33333337" />
+	<path id="Vector" d="M9.00065 4.66683C9.18475 4.66683 9.33398 4.51759 9.33398 4.3335C9.33398 4.1494 9.18475 4.00016 9.00065 4.00016C8.81656 4.00016 8.66732 4.1494 8.66732 4.3335C8.66732 4.51759 8.81656 4.66683 9.00065 4.66683Z" fill-rule="nonzero" stroke="rgb(73.6525,85.0542,101.01)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.33333337" />
+	<path id="Vector" d="M9.00065 4.66683C9.18475 4.66683 9.33398 4.51759 9.33398 4.3335C9.33398 4.1494 9.18475 4.00016 9.00065 4.00016C8.81656 4.00016 8.66732 4.1494 8.66732 4.3335C8.66732 4.51759 8.81656 4.66683 9.00065 4.66683Z" fill="rgb(73.6525,85.0542,101.01)" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.33333337" />
+	<path id="Vector" d="M3.28661 12.7142C2.03636 11.464 1.33398 9.76827 1.33398 8.00016C1.33398 6.23205 2.03636 4.53636 3.28661 3.28612C4.53685 2.03587 6.23254 1.3335 8.00065 1.3335C9.76876 1.3335 11.4645 1.96564 12.7147 3.09086C13.9649 4.21607 14.6673 5.7422 14.6673 7.3335C14.6673 8.21755 14.3161 9.0654 13.691 9.69052C13.0659 10.3156 12.218 10.6668 11.334 10.6668L9.83398 10.6668C9.61732 10.6668 9.40494 10.7272 9.22063 10.8411C9.03633 10.955 8.88738 11.118 8.79049 11.3117C8.69359 11.5055 8.65257 11.7225 8.67203 11.9383C8.69149 12.1541 8.77065 12.3602 8.90065 12.5335L9.10065 12.8002C9.23065 12.9735 9.30981 13.1796 9.32927 13.3954C9.34873 13.6112 9.30771 13.8281 9.21082 14.0219C9.11392 14.2157 8.96498 14.3787 8.78067 14.4926C8.59636 14.6065 8.38398 14.6668 8.16732 14.6668L8.00065 14.6668C6.23254 14.6668 4.53685 13.9644 3.28661 12.7142ZM9.00065 4.66683C8.81656 4.66683 8.66732 4.51759 8.66732 4.3335C8.66732 4.1494 8.81656 4.00016 9.00065 4.00016C9.18475 4.00016 9.33398 4.1494 9.33398 4.3335C9.33398 4.51759 9.18475 4.66683 9.00065 4.66683ZM11.6673 7.3335C11.4832 7.3335 11.334 7.18426 11.334 7.00016C11.334 6.81607 11.4832 6.66683 11.6673 6.66683C11.8514 6.66683 12.0007 6.81607 12.0007 7.00016C12.0007 7.18426 11.8514 7.3335 11.6673 7.3335ZM4.33398 8.66683C4.14989 8.66683 4.00065 8.51759 4.00065 8.3335C4.00065 8.1494 4.14989 8.00016 4.33398 8.00016C4.51808 8.00016 4.66732 8.1494 4.66732 8.3335C4.66732 8.51759 4.51808 8.66683 4.33398 8.66683ZM5.66732 5.3335C5.48322 5.3335 5.33398 5.18426 5.33398 5.00016C5.33398 4.81607 5.48322 4.66683 5.66732 4.66683C5.85141 4.66683 6.00065 4.81607 6.00065 5.00016C6.00065 5.18426 5.85141 5.3335 5.66732 5.3335Z" fill-rule="nonzero" stroke="rgb(73.6525,85.0542,101.01)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.33333337" />
+	<path id="Vector" d="M11.6673 7.3335C11.8514 7.3335 12.0007 7.18426 12.0007 7.00016C12.0007 6.81607 11.8514 6.66683 11.6673 6.66683C11.4832 6.66683 11.334 6.81607 11.334 7.00016C11.334 7.18426 11.4832 7.3335 11.6673 7.3335Z" fill-rule="nonzero" stroke="rgb(73.6525,85.0542,101.01)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.33333337" />
+	<path id="Vector" d="M11.6673 7.3335C11.8514 7.3335 12.0007 7.18426 12.0007 7.00016C12.0007 6.81607 11.8514 6.66683 11.6673 6.66683C11.4832 6.66683 11.334 6.81607 11.334 7.00016C11.334 7.18426 11.4832 7.3335 11.6673 7.3335Z" fill="rgb(73.6525,85.0542,101.01)" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.33333337" />
+	<path id="Vector" d="M3.28661 12.7142C2.03636 11.464 1.33398 9.76827 1.33398 8.00016C1.33398 6.23205 2.03636 4.53636 3.28661 3.28612C4.53685 2.03587 6.23254 1.3335 8.00065 1.3335C9.76876 1.3335 11.4645 1.96564 12.7147 3.09086C13.9649 4.21607 14.6673 5.7422 14.6673 7.3335C14.6673 8.21755 14.3161 9.0654 13.691 9.69052C13.0659 10.3156 12.218 10.6668 11.334 10.6668L9.83398 10.6668C9.61732 10.6668 9.40494 10.7272 9.22063 10.8411C9.03633 10.955 8.88738 11.118 8.79049 11.3117C8.69359 11.5055 8.65257 11.7225 8.67203 11.9383C8.69149 12.1541 8.77065 12.3602 8.90065 12.5335L9.10065 12.8002C9.23065 12.9735 9.30981 13.1796 9.32927 13.3954C9.34873 13.6112 9.30771 13.8281 9.21082 14.0219C9.11392 14.2157 8.96498 14.3787 8.78067 14.4926C8.59636 14.6065 8.38398 14.6668 8.16732 14.6668L8.00065 14.6668C6.23254 14.6668 4.53685 13.9644 3.28661 12.7142ZM9.00065 4.66683C8.81656 4.66683 8.66732 4.51759 8.66732 4.3335C8.66732 4.1494 8.81656 4.00016 9.00065 4.00016C9.18475 4.00016 9.33398 4.1494 9.33398 4.3335C9.33398 4.51759 9.18475 4.66683 9.00065 4.66683ZM11.6673 7.3335C11.4832 7.3335 11.334 7.18426 11.334 7.00016C11.334 6.81607 11.4832 6.66683 11.6673 6.66683C11.8514 6.66683 12.0007 6.81607 12.0007 7.00016C12.0007 7.18426 11.8514 7.3335 11.6673 7.3335ZM4.33398 8.66683C4.14989 8.66683 4.00065 8.51759 4.00065 8.3335C4.00065 8.1494 4.14989 8.00016 4.33398 8.00016C4.51808 8.00016 4.66732 8.1494 4.66732 8.3335C4.66732 8.51759 4.51808 8.66683 4.33398 8.66683ZM5.66732 5.3335C5.48322 5.3335 5.33398 5.18426 5.33398 5.00016C5.33398 4.81607 5.48322 4.66683 5.66732 4.66683C5.85141 4.66683 6.00065 4.81607 6.00065 5.00016C6.00065 5.18426 5.85141 5.3335 5.66732 5.3335Z" fill-rule="nonzero" stroke="rgb(73.6525,85.0542,101.01)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.33333337" />
+	<path id="Vector" d="M4.33398 8.66683C4.51808 8.66683 4.66732 8.51759 4.66732 8.3335C4.66732 8.1494 4.51808 8.00016 4.33398 8.00016C4.14989 8.00016 4.00065 8.1494 4.00065 8.3335C4.00065 8.51759 4.14989 8.66683 4.33398 8.66683Z" fill-rule="nonzero" stroke="rgb(73.6525,85.0542,101.01)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.33333337" />
+	<path id="Vector" d="M4.33398 8.66683C4.51808 8.66683 4.66732 8.51759 4.66732 8.3335C4.66732 8.1494 4.51808 8.00016 4.33398 8.00016C4.14989 8.00016 4.00065 8.1494 4.00065 8.3335C4.00065 8.51759 4.14989 8.66683 4.33398 8.66683Z" fill="rgb(73.6525,85.0542,101.01)" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.33333337" />
+	<path id="Vector" d="M3.28661 12.7142C2.03636 11.464 1.33398 9.76827 1.33398 8.00016C1.33398 6.23205 2.03636 4.53636 3.28661 3.28612C4.53685 2.03587 6.23254 1.3335 8.00065 1.3335C9.76876 1.3335 11.4645 1.96564 12.7147 3.09086C13.9649 4.21607 14.6673 5.7422 14.6673 7.3335C14.6673 8.21755 14.3161 9.0654 13.691 9.69052C13.0659 10.3156 12.218 10.6668 11.334 10.6668L9.83398 10.6668C9.61732 10.6668 9.40494 10.7272 9.22063 10.8411C9.03633 10.955 8.88738 11.118 8.79049 11.3117C8.69359 11.5055 8.65257 11.7225 8.67203 11.9383C8.69149 12.1541 8.77065 12.3602 8.90065 12.5335L9.10065 12.8002C9.23065 12.9735 9.30981 13.1796 9.32927 13.3954C9.34873 13.6112 9.30771 13.8281 9.21082 14.0219C9.11392 14.2157 8.96498 14.3787 8.78067 14.4926C8.59636 14.6065 8.38398 14.6668 8.16732 14.6668L8.00065 14.6668C6.23254 14.6668 4.53685 13.9644 3.28661 12.7142ZM9.00065 4.66683C8.81656 4.66683 8.66732 4.51759 8.66732 4.3335C8.66732 4.1494 8.81656 4.00016 9.00065 4.00016C9.18475 4.00016 9.33398 4.1494 9.33398 4.3335C9.33398 4.51759 9.18475 4.66683 9.00065 4.66683ZM11.6673 7.3335C11.4832 7.3335 11.334 7.18426 11.334 7.00016C11.334 6.81607 11.4832 6.66683 11.6673 6.66683C11.8514 6.66683 12.0007 6.81607 12.0007 7.00016C12.0007 7.18426 11.8514 7.3335 11.6673 7.3335ZM4.33398 8.66683C4.14989 8.66683 4.00065 8.51759 4.00065 8.3335C4.00065 8.1494 4.14989 8.00016 4.33398 8.00016C4.51808 8.00016 4.66732 8.1494 4.66732 8.3335C4.66732 8.51759 4.51808 8.66683 4.33398 8.66683ZM5.66732 5.3335C5.48322 5.3335 5.33398 5.18426 5.33398 5.00016C5.33398 4.81607 5.48322 4.66683 5.66732 4.66683C5.85141 4.66683 6.00065 4.81607 6.00065 5.00016C6.00065 5.18426 5.85141 5.3335 5.66732 5.3335Z" fill-rule="nonzero" stroke="rgb(73.6525,85.0542,101.01)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.33333337" />
+	<path id="Vector" d="M5.66732 5.3335C5.85141 5.3335 6.00065 5.18426 6.00065 5.00016C6.00065 4.81607 5.85141 4.66683 5.66732 4.66683C5.48322 4.66683 5.33398 4.81607 5.33398 5.00016C5.33398 5.18426 5.48322 5.3335 5.66732 5.3335Z" fill-rule="nonzero" stroke="rgb(73.6525,85.0542,101.01)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.33333337" />
+	<path id="Vector" d="M5.66732 5.3335C5.85141 5.3335 6.00065 5.18426 6.00065 5.00016C6.00065 4.81607 5.85141 4.66683 5.66732 4.66683C5.48322 4.66683 5.33398 4.81607 5.33398 5.00016C5.33398 5.18426 5.48322 5.3335 5.66732 5.3335Z" fill="rgb(73.6525,85.0542,101.01)" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.33333337" />
+	<path id="Vector" d="M3.28661 12.7142C2.03636 11.464 1.33398 9.76827 1.33398 8.00016C1.33398 6.23205 2.03636 4.53636 3.28661 3.28612C4.53685 2.03587 6.23254 1.3335 8.00065 1.3335C9.76876 1.3335 11.4645 1.96564 12.7147 3.09086C13.9649 4.21607 14.6673 5.7422 14.6673 7.3335C14.6673 8.21755 14.3161 9.0654 13.691 9.69052C13.0659 10.3156 12.218 10.6668 11.334 10.6668L9.83398 10.6668C9.61732 10.6668 9.40494 10.7272 9.22063 10.8411C9.03633 10.955 8.88738 11.118 8.79049 11.3117C8.69359 11.5055 8.65257 11.7225 8.67203 11.9383C8.69149 12.1541 8.77065 12.3602 8.90065 12.5335L9.10065 12.8002C9.23065 12.9735 9.30981 13.1796 9.32927 13.3954C9.34873 13.6112 9.30771 13.8281 9.21082 14.0219C9.11392 14.2157 8.96498 14.3787 8.78067 14.4926C8.59636 14.6065 8.38398 14.6668 8.16732 14.6668L8.00065 14.6668C6.23254 14.6668 4.53685 13.9644 3.28661 12.7142ZM9.00065 4.66683C8.81656 4.66683 8.66732 4.51759 8.66732 4.3335C8.66732 4.1494 8.81656 4.00016 9.00065 4.00016C9.18475 4.00016 9.33398 4.1494 9.33398 4.3335C9.33398 4.51759 9.18475 4.66683 9.00065 4.66683ZM11.6673 7.3335C11.4832 7.3335 11.334 7.18426 11.334 7.00016C11.334 6.81607 11.4832 6.66683 11.6673 6.66683C11.8514 6.66683 12.0007 6.81607 12.0007 7.00016C12.0007 7.18426 11.8514 7.3335 11.6673 7.3335ZM4.33398 8.66683C4.14989 8.66683 4.00065 8.51759 4.00065 8.3335C4.00065 8.1494 4.14989 8.00016 4.33398 8.00016C4.51808 8.00016 4.66732 8.1494 4.66732 8.3335C4.66732 8.51759 4.51808 8.66683 4.33398 8.66683ZM5.66732 5.3335C5.48322 5.3335 5.33398 5.18426 5.33398 5.00016C5.33398 4.81607 5.48322 4.66683 5.66732 4.66683C5.85141 4.66683 6.00065 4.81607 6.00065 5.00016C6.00065 5.18426 5.85141 5.3335 5.66732 5.3335Z" fill-rule="nonzero" stroke="rgb(73.6525,85.0542,101.01)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.33333337" />
+</svg>

web/public/images/Pin.svg

@@ -0,0 +1,4 @@
+<svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.18182 9.69728V6.12128V4.84908H9.45491H16.3636H17.6367V12.7575C17.6367 13.5511 17.3962 14.2945 16.9771 14.8535C16.5576 15.4127 15.9293 15.8185 15.182 15.8185H8.18182V14.5455V10.9695V9.69728ZM9.45491 10.9695H16.3636V12.7575C16.3636 13.3024 16.1975 13.7716 15.9588 14.09C15.7202 14.4082 15.4389 14.5455 15.182 14.5455H9.45491V10.9695ZM16.3636 9.69728H9.45491V6.12128H16.3636V9.69728Z" fill="#4A5565"/>
+<path d="M8.18182 9.69728L1.27308 9.69727V6.12127L8.18182 6.12128V4.84908L1.27308 4.84907V3.06108C1.27308 2.51613 1.43923 2.04686 1.67791 1.72852C1.91653 1.41035 2.19785 1.27308 2.45473 1.27308H8.18182V4.84908H9.45491V1.27308H15.182C15.4389 1.27308 15.7202 1.41035 15.9588 1.72852C16.1975 2.04686 16.3636 2.51613 16.3636 3.06108V4.84908H17.6367V3.06108C17.6367 2.26743 17.3962 1.52404 16.9771 0.965018C16.5576 0.405776 15.9293 0 15.182 0H2.45473C1.70744 0 1.07905 0.405776 0.659624 0.965018C0.240492 1.52404 0 2.26743 0 3.06108V12.7575C0 13.5511 0.240492 14.2945 0.659624 14.8535C1.07905 15.4127 1.70744 15.8185 2.45473 15.8185L8.18182 15.8185V14.5455L2.45473 14.5455C2.19785 14.5455 1.91653 14.4082 1.67791 14.09C1.43923 13.7716 1.27308 13.3024 1.27308 12.7575V10.9695L8.18182 10.9695V9.69728Z" fill="#60A9FF"/>
+</svg>

web/public/images/Pinned.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20.000000" height="20.000000" fill="none">
+	<rect id="thumbtack" width="20.000000" height="20.000000" x="0.000000" y="0.000000" />
+	<path id="shape (Stroke)" d="M9.50523 17.9688L9.50523 14.0731L5.24314 14.0731C4.40572 14.0729 3.80816 13.201 4.05694 12.3424C4.50845 10.7843 5.58153 9.57271 6.92845 8.98108L7.42371 2.5625L5.87706 2.5625C5.60381 2.5625 5.38229 2.32465 5.38229 2.03125C5.38229 1.73785 5.60381 1.5 5.87706 1.5L14.1229 1.5C14.3962 1.5 14.6177 1.73785 14.6177 2.03125C14.6177 2.32465 14.3962 2.5625 14.1229 2.5625L12.5773 2.5625L13.0851 8.98679C14.4257 9.58054 15.493 10.7894 15.9431 12.3424C16.1918 13.201 15.5944 14.0731 14.7569 14.0731L10.4948 14.0731L10.4948 17.9688C10.4948 18.2622 10.2733 18.5 10 18.5C9.72678 18.5 9.50523 18.2621 9.50523 17.9688ZM8.81284 9.64566C7.06531 9.64569 5.52117 10.8667 5.00203 12.6583C4.95146 12.833 5.0728 13.0104 5.24314 13.0106L14.7569 13.0106C14.9272 13.0106 15.049 12.833 14.9984 12.6583C14.4793 10.8666 12.9347 9.64566 11.1872 9.64566L8.81284 9.64566ZM7.94602 8.66513C8.22868 8.61159 8.51841 8.58317 8.81284 8.58316L11.1872 8.58316C11.4861 8.58316 11.7803 8.61257 12.067 8.66773L11.5843 2.5625L8.41663 2.5625L7.94602 8.66513Z" fill="rgb(73.6525,85.0542,101.01)" fill-rule="nonzero" />
+</svg>

web/public/images/Plus.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.000000" height="16.000000" fill="none">
+	<rect id="Icon" width="16.000000" height="16.000000" x="0.000000" y="0.000000" />
+	<path id="Vector" d="M3.33398 8L12.6673 8" stroke="rgb(73.6525,85.0542,101.01)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.33333337" />
+	<path id="Vector" d="M0 0L9.33333 0" stroke="rgb(73.6525,85.0542,101.01)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.33333337" transform="matrix(0,1,-1,0,8,3.33325)" />
+</svg>

web/public/images/ProjectSetting.svg

@@ -0,0 +1,5 @@
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M4.4805 6.14716C6.01005 4.61761 8.48968 4.61761 10.0192 6.14716C10.247 6.37497 10.247 6.74455 10.0192 6.97236C9.79141 7.19991 9.42176 7.20008 9.19404 6.97236C8.1201 5.89842 6.37964 5.89842 5.30569 6.97236L1.97236 10.3057C0.898419 11.3796 0.898419 13.1201 1.97236 14.194C3.0463 15.268 4.78676 15.268 5.86071 14.194L6.77868 13.2761C7.0064 13.0483 7.37604 13.0485 7.60387 13.2761C7.83168 13.5039 7.83168 13.8735 7.60387 14.1013L6.6859 15.0192C5.15635 16.5488 2.67672 16.5488 1.14716 15.0192C-0.382388 13.4897 -0.382388 11.0101 1.14716 9.4805L4.4805 6.14716ZM9.4805 1.14716C11.0101 -0.382388 13.4897 -0.382388 15.0192 1.14716C16.5488 2.67672 16.5488 5.15635 15.0192 6.6859L11.6859 10.0192C10.1563 11.5488 7.67672 11.5488 6.14716 10.0192C5.91936 9.79143 5.91936 9.42185 6.14716 9.19404C6.37499 8.96649 6.74464 8.96632 6.97236 9.19404C8.0463 10.268 9.78677 10.268 10.8607 9.19404L14.194 5.86071C15.268 4.78676 15.268 3.0463 14.194 1.97236C13.1201 0.898419 11.3796 0.898419 10.3057 1.97236L9.38935 2.8887C9.16163 3.11642 8.79198 3.11626 8.56416 2.8887C8.33635 2.6609 8.33635 2.29131 8.56416 2.06351L9.4805 1.14716Z"
+        fill="#4A5565" />
+</svg>

web/public/images/QuestionMark.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.000000" height="16.000000" fill="none">
+	<rect id="question-mark-circle" width="16.000000" height="16.000000" x="0.000000" y="0.000000" />
+	<path id="Icon" d="M13.5332 8C13.5332 4.94402 11.056 2.4668 8 2.4668C4.94402 2.4668 2.4668 4.94402 2.4668 8C2.4668 11.056 4.94402 13.5332 8 13.5332C11.056 13.5332 13.5332 11.056 13.5332 8ZM8.00651 10.8665C8.26424 10.8665 8.47331 11.0756 8.47331 11.3333C8.47331 11.5911 8.26424 11.8001 8.00651 11.8001L8 11.8001C7.74227 11.8001 7.5332 11.5911 7.5332 11.3333C7.5332 11.0756 7.74227 10.8665 8 10.8665L8.00651 10.8665ZM7.5332 9.33333C7.5332 8.6899 8.04818 8.24688 8.57487 8.14583C9.60788 7.94767 10.1999 7.287 10.1999 6.66667C10.1999 6.2942 9.99964 5.92128 9.60547 5.62565C9.21116 5.32999 8.64507 5.13346 8 5.13346C6.96489 5.13348 6.17573 5.63016 5.90755 6.19922C5.79767 6.43224 5.51953 6.53163 5.28646 6.42188C5.05332 6.312 4.95328 6.03392 5.06315 5.80078C5.52722 4.81644 6.71311 4.19988 8 4.19987C8.82745 4.19987 9.59457 4.45092 10.1654 4.87891C10.7363 5.30713 11.1335 5.93456 11.1335 6.66667C11.1335 7.91225 10.0219 8.81864 8.75065 9.0625C8.55421 9.10022 8.4668 9.2404 8.4668 9.33333C8.4668 9.59107 8.25773 9.80013 8 9.80013C7.74228 9.80011 7.5332 9.59105 7.5332 9.33333ZM14.4668 8C14.4668 11.5714 11.5714 14.4668 8 14.4668C4.42856 14.4668 1.5332 11.5714 1.5332 8C1.5332 4.42856 4.42856 1.5332 8 1.5332C11.5714 1.5332 14.4668 4.42856 14.4668 8Z" fill="rgb(153.002,161.006,174.732)" fill-rule="nonzero" />
+</svg>

web/public/images/RemoveColumn.svg

@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.0603 2.39003L13.0603 17.4806L13.0603 18.7537L6.9399 18.7537L6.9399 17.4806L6.9399 2.39003L6.9399 1.11693L13.0603 1.11693L13.0603 2.39003ZM11.7881 2.39003L11.7881 17.4806L8.2121 17.4806L8.2121 2.39003L11.7881 2.39003Z" fill="#FF5F57"/>
+<path d="M16.6363 3.57166C16.6363 3.31475 16.499 3.03348 16.1808 2.79484C15.8625 2.55621 15.3932 2.39003 14.8483 2.39003L13.0603 2.39003L13.0603 1.11693L14.8483 1.11693C15.6419 1.11693 16.3854 1.35748 16.9444 1.77657C17.5036 2.19602 17.9094 2.82439 17.9094 3.57166L17.9094 16.2989C17.9094 17.0462 17.5036 17.6746 16.9444 18.094C16.3854 18.5132 15.6419 18.7537 14.8483 18.7537L13.0603 18.7537L13.0603 17.4806L14.8483 17.4806C15.3932 17.4806 15.8625 17.3144 16.1808 17.0758C16.499 16.8371 16.6363 16.5558 16.6363 16.2989L16.6363 3.57166Z" fill="#4A5565"/>
+<path d="M5.1519 2.39003C4.60695 2.39003 4.13768 2.55621 3.81934 2.79484C3.50118 3.03348 3.3639 3.31475 3.3639 3.57166L3.3639 16.2989C3.3639 16.5558 3.50118 16.8371 3.81934 17.0758C4.13768 17.3144 4.60695 17.4806 5.1519 17.4806L6.9399 17.4806L6.9399 18.7537L5.1519 18.7537C4.35825 18.7537 3.61486 18.5132 3.05584 18.094C2.4966 17.6746 2.09082 17.0462 2.09082 16.2989L2.09082 3.57166C2.09082 2.82439 2.4966 2.19602 3.05584 1.77657C3.61486 1.35748 4.35825 1.11693 5.1519 1.11693L6.9399 1.11693L6.9399 2.39003L5.1519 2.39003Z" fill="#4A5565"/>
+</svg>

web/public/images/RemoveLine.svg

@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.1273 13.0603H2.03675H0.763672V6.9399H2.03675H17.1273H18.4004V13.0603H17.1273ZM17.1273 11.7881H2.03675V8.2121H17.1273V11.7881Z" fill="#FF5F57"/>
+<path d="M15.9457 16.6363C16.2026 16.6363 16.4839 16.499 16.7225 16.1808C16.9611 15.8625 17.1273 15.3932 17.1273 14.8483V13.0603H18.4004V14.8483C18.4004 15.6419 18.1599 16.3854 17.7408 16.9444C17.3213 17.5036 16.6929 17.9094 15.9457 17.9094H3.2184C2.47111 17.9094 1.84273 17.5036 1.4233 16.9444C1.00416 16.3854 0.763672 15.6419 0.763672 14.8483V13.0603H2.03675V14.8483C2.03675 15.3932 2.2029 15.8625 2.44158 16.1808C2.6802 16.499 2.96153 16.6363 3.2184 16.6363H15.9457Z" fill="#4A5565"/>
+<path d="M17.1273 5.1519C17.1273 4.60695 16.9611 4.13768 16.7225 3.81934C16.4839 3.50117 16.2026 3.3639 15.9457 3.3639H3.2184C2.96153 3.3639 2.6802 3.50117 2.44158 3.81934C2.2029 4.13768 2.03675 4.60695 2.03675 5.1519V6.9399H0.763672V5.1519C0.763672 4.35825 1.00416 3.61486 1.4233 3.05584C1.84273 2.4966 2.47111 2.09082 3.2184 2.09082H15.9457C16.6929 2.09082 17.3213 2.4966 17.7408 3.05584C18.1599 3.61486 18.4004 4.35825 18.4004 5.1519V6.9399H17.1273V5.1519Z" fill="#4A5565"/>
+</svg>

web/public/images/Right.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24.000000" height="24.000000" fill="none">
+	<rect id="chevron-right" width="24.000000" height="24.000000" x="0.000000" y="0.000000" />
+	<path id="Icon" d="M14.205 0.205025C14.4784 -0.0683417 14.9219 -0.0683417 15.1953 0.205025C15.4686 0.478392 15.4686 0.921893 15.1953 1.19526L8.19526 8.19526C7.92189 8.46863 7.47839 8.46863 7.20503 8.19526L0.205025 1.19526C-0.0683417 0.921893 -0.0683417 0.478392 0.205025 0.205025C0.478392 -0.0683417 0.921893 -0.0683417 1.19526 0.205025L7.70014 6.70991L14.205 0.205025Z" fill="rgb(153.002,161.006,174.732)" fill-rule="nonzero" transform="matrix(-4.37114e-08,-1,1,-4.37114e-08,8.2998,19.7002)" />
+</svg>

web/public/images/Row.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20.000000" height="20.000000" fill="none">
+	<rect id="3" width="20.000000" height="20.000000" x="0.000000" y="0.000000" />
+	<path id="Vector" d="M5.00016 15.5835C3.75752 15.5835 2.75 14.576 2.75 13.3333L2.75 6.66667C2.75 5.42403 3.75752 4.4165 5.00016 4.4165L15.0002 4.4165C16.2428 4.4165 17.2503 5.42403 17.2503 6.66667L17.2503 13.3333C17.2503 14.576 16.2428 15.5835 15.0002 15.5835L5.00016 15.5835ZM15.0002 14.4165C15.5985 14.4165 16.0833 13.9316 16.0833 13.3333L16.0833 10.5835L3.91699 10.5835L3.91699 13.3333C3.91699 13.9316 4.40185 14.4165 5.00016 14.4165L15.0002 14.4165ZM3.91699 9.4165L3.91699 6.66667C3.91699 6.06836 4.40185 5.5835 5.00016 5.5835L15.0002 5.5835C15.5985 5.5835 16.0833 6.06836 16.0833 6.66667L16.0833 9.4165L3.91699 9.4165Z" fill="rgb(73.6525,85.0542,101.01)" fill-rule="evenodd" />
+</svg>

web/public/images/Save.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.1333 2C10.485 2.00501 10.8205 2.14878 11.0667 2.4L13.6 4.93333C13.8512 5.17951 13.995 5.51497 14 5.86667V12.6667C14 13.0203 13.8595 13.3594 13.6095 13.6095C13.3594 13.8595 13.0203 14 12.6667 14H3.33333C2.97971 14 2.64057 13.8595 2.39052 13.6095C2.14048 13.3594 2 13.0203 2 12.6667V3.33333C2 2.97971 2.14048 2.64057 2.39052 2.39052C2.64057 2.14048 2.97971 2 3.33333 2H10.1333Z" stroke="#1F1F1F" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11.3327 14.0001V9.33341C11.3327 9.1566 11.2624 8.98703 11.1374 8.86201C11.0124 8.73699 10.8428 8.66675 10.666 8.66675H5.33268C5.15587 8.66675 4.9863 8.73699 4.86128 8.86201C4.73625 8.98703 4.66602 9.1566 4.66602 9.33341V14.0001" stroke="#1F1F1F" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4.66602 2V4.66667C4.66602 4.84348 4.73625 5.01305 4.86128 5.13807C4.9863 5.2631 5.15587 5.33333 5.33268 5.33333H9.99935" stroke="#1F1F1F" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

web/public/images/Search.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.000000" height="16.000000" fill="none">
+	<rect id="Icon" width="16.000000" height="16.000000" x="0.000000" y="0.000000" />
+	<path id="Vector" d="M14.0008 14L11.1074 11.1067" fill-rule="nonzero" stroke="rgb(153.002,161.006,174.732)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.66666663" />
+	<path id="Vector" d="M7.33333 12.6667C4.38781 12.6667 2 10.2789 2 7.33333C2 4.38781 4.38781 2 7.33333 2C10.2789 2 12.6667 4.38781 12.6667 7.33333C12.6667 10.2789 10.2789 12.6667 7.33333 12.6667Z" stroke="rgb(153.002,161.006,174.732)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.66666663" />
+</svg>

web/public/images/Split.svg

@@ -0,0 +1,6 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20.000000" height="20.000000" fill="none">
+	<rect id="Component 1" width="20.000000" height="20.000000" x="0.000000" y="0.000000" />
+	<path id="Vector" d="M14.3647 8.77166C14.574 8.56245 14.574 8.22326 14.3647 8.01405C14.1555 7.80484 13.8164 7.80484 13.6071 8.01405L12 9.6212C11.7908 9.8304 11.7908 10.1696 12 10.3789L13.6071 11.986C13.8164 12.1951 14.1555 12.1951 14.3647 11.986C14.574 11.7767 14.574 11.4375 14.3647 11.2283L13.6721 10.5357L17.5 10.5357L17.5 9.46428L13.6721 9.46428L14.3647 8.77166ZM5.71429 2.5C3.93909 2.5 2.5 3.93909 2.5 5.71429L2.5 14.2857C2.5 16.061 3.93909 17.5 5.71429 17.5L14.2857 17.5C16.061 17.5 17.5 16.061 17.5 14.2857L17.5 5.71429C17.5 3.93909 16.061 2.5 14.2857 2.5L5.71429 2.5ZM3.57143 5.71429L10 5.71429L16.4286 5.71429L16.4286 14.2857L3.57143 14.2857L3.57143 5.71429ZM14.2857 16.4286L5.71429 16.4286C4.53082 16.4286 3.57143 15.4692 3.57143 14.2857L16.4286 14.2857C16.4286 15.4692 15.4692 16.4286 14.2857 16.4286ZM16.4286 5.71429L10 5.71429L3.57143 5.71429C3.57143 4.53082 4.53082 3.57143 5.71429 3.57143L14.2857 3.57143C15.4692 3.57143 16.4286 4.53082 16.4286 5.71429Z" fill="rgb(73.6525,85.0542,101.01)" fill-rule="nonzero" />
+	<path id="Vector" d="M11.8647 6.27166C12.074 6.06245 12.074 5.72326 11.8647 5.51405C11.6555 5.30484 11.3164 5.30484 11.1071 5.51405L9.5 7.1212C9.29078 7.3304 9.29078 7.66961 9.5 7.87886L11.1071 9.486C11.3164 9.69514 11.6555 9.69514 11.8647 9.486C12.074 9.27675 12.074 8.93754 11.8647 8.72829L11.1721 8.03571L15 8.03571L15 6.96429L11.1721 6.96429L11.8647 6.27166ZM3.21429 0C1.43909 0 0 1.43909 0 3.21429L0 11.7857C0 13.561 1.43909 15 3.21429 15L11.7857 15C13.561 15 15 13.561 15 11.7857L15 3.21429C15 1.43909 13.561 0 11.7857 0L3.21429 0ZM1.07143 3.21429L7.5 3.21429L13.9286 3.21429L13.9286 11.7857L1.07143 11.7857L1.07143 3.21429ZM11.7857 13.9286L3.21429 13.9286C2.03082 13.9286 1.07143 12.9692 1.07143 11.7857L13.9286 11.7857C13.9286 12.9692 12.9692 13.9286 11.7857 13.9286ZM13.9286 3.21429L7.5 3.21429L1.07143 3.21429C1.07143 2.03082 2.03082 1.07143 3.21429 1.07143L11.7857 1.07143C12.9692 1.07143 13.9286 2.03082 13.9286 3.21429Z" fill="rgb(73.6525,85.0542,101.01)" fill-rule="nonzero" transform="matrix(-1,0,0,1,17.5,2.5)" />
+	<path id="Vector 1 (Stroke)" d="M10.5 3.5L10.5 16.5L9.5 16.5L9.5 3.5L10.5 3.5Z" fill="rgb(73.6525,85.0542,101.01)" fill-rule="nonzero" />
+</svg>

web/public/images/SplitLayer.svg

@@ -0,0 +1,4 @@
+<svg width="20" height="18" viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18 12.0664H1.40039H0V5.33398H1.40039H18H19.4004V12.0664H18ZM18 10.667H10.4004V6.7334H18V10.667ZM9 10.667H1.40039V6.7334H9V10.667Z" fill="#60A9FF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.6748 16.3389C19.1358 15.724 19.4004 14.9062 19.4004 14.0332V12.0664H18V14.0332C18 14.6326 17.8172 15.1488 17.5547 15.499C17.2922 15.849 16.9828 16 16.7002 16H2.7002C2.41764 16 2.10818 15.849 1.8457 15.499C1.58315 15.1488 1.40039 14.6326 1.40039 14.0332V12.0664H0V14.0332C0 14.9062 0.264541 15.724 0.725586 16.3389C1.18696 16.954 1.87818 17.4004 2.7002 17.4004H16.7002C17.5222 17.4004 18.2134 16.954 18.6748 16.3389ZM19.4004 5.33398V3.36719C19.4004 2.49417 19.1358 1.67644 18.6748 1.06152C18.2134 0.446354 17.5222 0 16.7002 0H2.7002C1.87818 0 1.18696 0.446354 0.725586 1.06152C0.264541 1.67644 0 2.49417 0 3.36719V5.33398H1.40039V3.36719C1.40039 2.76774 1.58315 2.25155 1.8457 1.90137C2.10818 1.55139 2.41764 1.40039 2.7002 1.40039H16.7002C16.9828 1.40039 17.2922 1.55139 17.5547 1.90137C17.8172 2.25155 18 2.76774 18 3.36719V5.33398H19.4004Z" fill="#4A5565"/>
+</svg>

web/public/images/Stage.svg

@@ -0,0 +1,3 @@
+<svg width="13" height="17" viewBox="0 0 13 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.6667 3.91683C11.6667 3.31852 11.1818 2.83366 10.5835 2.83366H9.42139C9.16418 3.79312 8.29078 4.50033 7.25016 4.50033H5.5835C4.54288 4.50033 3.66948 3.79312 3.41227 2.83366H2.25016C1.65185 2.83366 1.16699 3.31852 1.16699 3.91683V13.9168C1.16699 14.5151 1.65185 15 2.25016 15H10.5835C11.1818 15 11.6667 14.5151 11.6667 13.9168V3.91683ZM3.92497 10.8333C4.24713 10.8333 4.50846 11.0947 4.50846 11.4168C4.50846 11.739 4.24713 12.0003 3.92497 12.0003H3.91683C3.59466 12.0003 3.33333 11.739 3.33333 11.4168C3.33333 11.0947 3.59466 10.8333 3.91683 10.8333H3.92497ZM8.91683 10.8333C9.239 10.8333 9.50033 11.0947 9.50033 11.4168C9.50033 11.739 9.239 12.0003 8.91683 12.0003H6.41683C6.09466 12.0003 5.83333 11.739 5.83333 11.4168C5.83333 11.0947 6.09466 10.8333 6.41683 10.8333H8.91683ZM3.92497 7.5C4.24713 7.5 4.50846 7.76133 4.50846 8.0835C4.50846 8.40566 4.24713 8.66699 3.92497 8.66699H3.91683C3.59466 8.66699 3.33333 8.40566 3.33333 8.0835C3.33333 7.76133 3.59466 7.5 3.91683 7.5H3.92497ZM8.91683 7.5C9.239 7.5 9.50033 7.76133 9.50033 8.0835C9.50033 8.40566 9.239 8.66699 8.91683 8.66699H6.41683C6.09466 8.66699 5.83333 8.40566 5.83333 8.0835C5.83333 7.76133 6.09466 7.5 6.41683 7.5H8.91683ZM5.5835 1.16699C4.98519 1.16699 4.50033 1.65185 4.50033 2.25016C4.50033 2.84847 4.98519 3.33333 5.5835 3.33333H7.25016C7.84847 3.33333 8.33333 2.84847 8.33333 2.25016C8.33333 1.65185 7.84847 1.16699 7.25016 1.16699H5.5835ZM12.8337 13.9168C12.8337 15.1595 11.8261 16.167 10.5835 16.167H2.25016C1.00752 16.167 0 15.1595 0 13.9168V3.91683C0 2.67419 1.00752 1.66667 2.25016 1.66667H3.41227C3.66948 0.7072 4.54288 0 5.5835 0H7.25016C8.29078 0 9.16418 0.7072 9.42139 1.66667H10.5835C11.8261 1.66667 12.8337 2.67419 12.8337 3.91683V13.9168Z" fill="#4A5565"/>
+</svg>

web/public/images/Table.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.000000" height="16.000000" fill="none">
+	<rect id="table" width="16.000000" height="16.000000" x="0.000000" y="0.000000" />
+	<path id="Icon" d="M13.5332 10.244L8.4668 10.244L8.4668 12.8664L12.6667 12.8664C12.855 12.8664 13.0613 12.7657 13.2363 12.5324C13.4114 12.2989 13.5332 11.9548 13.5332 11.5552L13.5332 10.244ZM8.4668 9.31104L13.5332 9.31104L13.5332 6.68864L8.4668 6.68864L8.4668 9.31104ZM2.4668 9.31104L7.5332 9.31104L7.5332 6.68864L2.4668 6.68864L2.4668 9.31104ZM2.4668 11.5552C2.4668 11.9548 2.58863 12.2989 2.76367 12.5324C2.93866 12.7657 3.14496 12.8664 3.33333 12.8664L7.5332 12.8664L7.5332 10.244L2.4668 10.244L2.4668 11.5552ZM13.5332 4.4445C13.5332 4.04487 13.4114 3.70074 13.2363 3.46729C13.0613 3.23397 12.855 3.1333 12.6667 3.1333L3.33333 3.1333C3.14496 3.1333 2.93866 3.23397 2.76367 3.46729C2.58863 3.70074 2.4668 4.04487 2.4668 4.4445L2.4668 5.7557L13.5332 5.7557L13.5332 4.4445ZM14.4668 11.5552C14.4668 12.1372 14.2904 12.6823 13.9831 13.0923C13.6755 13.5024 13.2147 13.8 12.6667 13.8L3.33333 13.8C2.78532 13.8 2.32451 13.5024 2.01693 13.0923C1.70956 12.6823 1.5332 12.1372 1.5332 11.5552L1.5332 4.4445C1.5332 3.86249 1.70956 3.31733 2.01693 2.90739C2.32451 2.49728 2.78532 2.19971 3.33333 2.19971L12.6667 2.19971C13.2147 2.19971 13.6755 2.49728 13.9831 2.90739C14.2904 3.31733 14.4668 3.86249 14.4668 4.4445L14.4668 11.5552Z" fill="rgb(153.002,161.006,174.732)" fill-rule="nonzero" />
+</svg>

web/public/images/Tasks.svg

@@ -0,0 +1,3 @@
+<svg width="11" height="13" viewBox="0 0 11 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M9.33333 3.13346C9.33333 2.65482 8.94544 2.26693 8.4668 2.26693H7.53711C7.33135 3.0345 6.63263 3.60026 5.80013 3.60026H4.4668C3.6343 3.60026 2.93558 3.0345 2.72982 2.26693H1.80013C1.32148 2.26693 0.933594 2.65482 0.933594 3.13346V11.1335C0.933594 11.6121 1.32148 12 1.80013 12H8.4668C8.94544 12 9.33333 11.6121 9.33333 11.1335V3.13346ZM3.13997 8.66667C3.39771 8.66667 3.60677 8.87573 3.60677 9.13346C3.60677 9.3912 3.39771 9.60026 3.13997 9.60026H3.13346C2.87573 9.60026 2.66667 9.3912 2.66667 9.13346C2.66667 8.87573 2.87573 8.66667 3.13346 8.66667H3.13997ZM7.13346 8.66667C7.3912 8.66667 7.60026 8.87573 7.60026 9.13346C7.60026 9.3912 7.3912 9.60026 7.13346 9.60026H5.13346C4.87573 9.60026 4.66667 9.3912 4.66667 9.13346C4.66667 8.87573 4.87573 8.66667 5.13346 8.66667H7.13346ZM3.13997 6C3.39771 6 3.60677 6.20906 3.60677 6.4668C3.60677 6.72453 3.39771 6.93359 3.13997 6.93359H3.13346C2.87573 6.93359 2.66667 6.72453 2.66667 6.4668C2.66667 6.20906 2.87573 6 3.13346 6H3.13997ZM7.13346 6C7.3912 6 7.60026 6.20906 7.60026 6.4668C7.60026 6.72453 7.3912 6.93359 7.13346 6.93359H5.13346C4.87573 6.93359 4.66667 6.72453 4.66667 6.4668C4.66667 6.20906 4.87573 6 5.13346 6H7.13346ZM4.4668 0.933594C3.98815 0.933594 3.60026 1.32148 3.60026 1.80013C3.60026 2.27878 3.98815 2.66667 4.4668 2.66667H5.80013C6.27878 2.66667 6.66667 2.27878 6.66667 1.80013C6.66667 1.32148 6.27878 0.933594 5.80013 0.933594H4.4668ZM10.2669 11.1335C10.2669 12.1276 9.46091 12.9336 8.4668 12.9336H1.80013C0.806018 12.9336 0 12.1276 0 11.1335V3.13346C0 2.13935 0.806018 1.33333 1.80013 1.33333H2.72982C2.93558 0.56576 3.6343 0 4.4668 0H5.80013C6.63263 0 7.33135 0.56576 7.53711 1.33333H8.4668C9.46091 1.33333 10.2669 2.13935 10.2669 3.13346V11.1335Z" fill="#99A1AF" />
+</svg>

web/public/images/Trash.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20.000000" height="20.000000" fill="none">
+	<rect id="Icon" width="20.000000" height="20.000000" x="0.000000" y="0.000000" />
+	<path id="Vector (Stroke)" d="M14.0409 6.04928L5.95909 6.04928L5.95909 15.4391C5.95909 15.6688 6.04492 15.8793 6.18212 16.0262C6.31763 16.1711 6.48887 16.2408 6.65335 16.2409L13.3466 16.2409C13.5111 16.2408 13.6824 16.1711 13.8179 16.0262C13.9551 15.8793 14.0409 15.6688 14.0409 15.4391L14.0409 6.04928ZM8.18485 13.4352L8.18485 8.85493C8.18485 8.5071 8.47302 8.22536 8.82879 8.22536C9.18455 8.22536 9.47273 8.5071 9.47273 8.85493L9.47273 13.4352C9.47273 13.783 9.18455 14.0648 8.82879 14.0648C8.47302 14.0648 8.18485 13.783 8.18485 13.4352ZM10.5273 13.4352L10.5273 8.85493C10.5273 8.5071 10.8154 8.22536 11.1712 8.22536C11.527 8.22536 11.8152 8.5071 11.8152 8.85493L11.8152 13.4352C11.8152 13.783 11.527 14.0648 11.1712 14.0648C10.8154 14.0648 10.5273 13.783 10.5273 13.4352ZM11.6985 4.27464C11.6985 4.13798 11.6429 4.00673 11.5441 3.91009C11.4699 3.83753 11.3756 3.78895 11.2742 3.7692L11.1712 3.75913L8.82879 3.75913C8.68901 3.75913 8.55476 3.81346 8.45592 3.91009C8.35708 4.00673 8.30151 4.13798 8.30151 4.27464L8.30151 4.79014L11.6985 4.79014L11.6985 4.27464ZM12.9864 4.79014L15.8561 4.79014C16.2118 4.79014 16.5 5.07189 16.5 5.41971C16.5 5.76753 16.2118 6.04928 15.8561 6.04928L15.3288 6.04928L15.3288 15.4391C15.3288 15.9684 15.1329 16.4861 14.7683 16.876C14.402 17.2678 13.8919 17.4999 13.3466 17.5L6.65335 17.5C6.10806 17.4999 5.59803 17.2678 5.23166 16.876C4.86705 16.4861 4.67121 15.9684 4.67121 15.4391L4.67121 6.04928L4.14394 6.04928C3.78817 6.04928 3.5 5.76753 3.5 5.41971C3.5 5.07189 3.78817 4.79014 4.14394 4.79014L7.01364 4.79014L7.01364 4.27464C7.01364 3.80392 7.20504 3.35283 7.54549 3.01998C7.88594 2.68713 8.34732 2.5 8.82879 2.5L11.1712 2.5C11.6527 2.5 12.1141 2.68713 12.4545 3.01998C12.795 3.35283 12.9864 3.80392 12.9864 4.27464L12.9864 4.79014Z" fill="rgb(73.6525,85.0542,101.01)" fill-rule="nonzero" />
+</svg>

web/public/images/User.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.000000" height="16.000000" fill="none">
+	<rect id="Icon" width="16.000000" height="16.000000" x="0.000000" y="0.000000" />
+	<path id="Vector" d="M12.3333 14L12.3333 12.6667C12.3333 11.9594 12.0524 11.2811 11.5523 10.781C11.0522 10.281 10.3739 10 9.66667 10L5.66667 10C4.95942 10 4.28115 10.281 3.78105 10.781C3.28095 11.2811 3 11.9594 3 12.6667L3 14M7.66667 7.33333C6.19391 7.33333 5 6.13943 5 4.66667C5 3.19391 6.19391 2 7.66667 2C9.13943 2 10.3333 3.19391 10.3333 4.66667C10.3333 6.13943 9.13943 7.33333 7.66667 7.33333Z" fill-rule="evenodd" stroke="rgb(153.002,161.006,174.732)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.33333337" />
+</svg>

web/public/images/logo.svg

@@ -0,0 +1,15 @@
+<svg viewBox="0 0 112.016 32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="112.015625" height="32.000000" fill="none" customFrame="#000000">
+	<rect id="Container" width="112.014572" height="31.999907" x="0.000000" y="0.000000" />
+	<g id="Group 1">
+		<path id="Vector" d="M34.6122 0.0891113L21.9805 0.0891113L21.9805 32.0002L34.6122 32.0002L34.6122 0.0891113Z" fill="rgb(37,129,65)" fill-rule="nonzero" />
+		<path id="Vector" d="M18.7 0.0891113L9.34961 0.0891113L9.34961 32.0002L18.7 32.0002L18.7 0.0891113Z" fill="rgb(164,204,58)" fill-rule="nonzero" />
+		<path id="Vector" d="M6.31514 0.0891113L0 0.0891113L0 32.0002L6.31514 32.0002L6.31514 0.0891113Z" fill="rgb(255,201,5)" fill-rule="nonzero" />
+		<path id="Vector" d="M38.7214 1.92135L39.0113 1.92135C38.9819 2.11794 38.8843 2.29763 38.7359 2.42844C38.5919 2.55205 38.4081 2.61783 38.2194 2.61329C38.0911 2.61841 37.9635 2.59549 37.8449 2.54606C37.7263 2.49666 37.6197 2.42194 37.5325 2.32703C37.3658 2.1264 37.2737 1.87335 37.272 1.61151C37.2701 1.34964 37.359 1.09537 37.5228 0.892444C37.6096 0.7991 37.7151 0.725879 37.8326 0.677854C37.9502 0.62983 38.0766 0.608185 38.2032 0.614345C38.3974 0.609707 38.5876 0.673289 38.7407 0.794293C38.8159 0.855604 38.878 0.931482 38.9236 1.01746C38.9693 1.10341 38.9976 1.19774 39.0065 1.29483L38.7214 1.29483C38.6994 1.18025 38.6366 1.0778 38.5448 1.00695C38.4477 0.932593 38.3283 0.893941 38.2063 0.897348C38.121 0.893048 38.0357 0.908991 37.9575 0.943947C37.8794 0.978878 37.8103 1.03183 37.756 1.09855C37.6439 1.2426 37.5864 1.4225 37.5941 1.60564C37.5861 1.79134 37.6434 1.97387 37.756 2.12092C37.8108 2.18882 37.8804 2.24296 37.9594 2.279C38.0384 2.31507 38.1247 2.33208 38.2111 2.32867C38.3329 2.33316 38.4525 2.29374 38.5479 2.21742C38.6376 2.14333 38.6956 2.03736 38.7101 1.92135M36.8538 1.61383C36.8492 1.79233 36.8802 1.96996 36.9449 2.13609C37.0099 2.30219 37.1073 2.45337 37.2312 2.58058C37.4786 2.8288 37.813 2.96814 38.1619 2.96814C38.5105 2.96814 38.8449 2.8288 39.0923 2.58058C39.3331 2.3178 39.4672 1.97283 39.4672 1.61465C39.4672 1.25647 39.3331 0.911479 39.0923 0.648696C38.8454 0.40106 38.5115 0.262107 38.1633 0.262107C37.8154 0.262107 37.4815 0.40106 37.2346 0.648696C37.1092 0.774797 37.0109 0.925491 36.9454 1.09148C36.8799 1.25746 36.8488 1.43524 36.8538 1.61383ZM38.1657 3.24962C37.9538 3.25394 37.7429 3.21551 37.5458 3.13659C37.3486 3.05766 37.1691 2.93982 37.0174 2.78995C36.8604 2.6403 36.7359 2.45905 36.6521 2.25791C36.5685 2.05675 36.5274 1.84014 36.5315 1.62199C36.5274 1.40557 36.5687 1.19069 36.6523 0.991416C36.7362 0.792118 36.8606 0.612919 37.0174 0.465487C37.3271 0.166709 37.7391 0 38.1674 0C38.5958 0 39.0077 0.166709 39.3174 0.465487C39.4684 0.617485 39.5883 0.798086 39.6702 0.996973C39.7518 1.19586 39.7941 1.4091 39.7941 1.62446C39.7941 1.83982 39.7518 2.05306 39.6702 2.25194C39.5883 2.45083 39.4684 2.63143 39.3174 2.78343C39.166 2.93473 38.986 3.05389 38.7883 3.13395C38.5905 3.21401 38.3788 3.25334 38.1657 3.24962Z" fill="rgb(37,129,65)" fill-rule="nonzero" />
+	</g>
+	<g id="Group 2">
+		<path id="Vector" d="M55.2896 11.2379L55.2896 15.3342L57.9835 15.3342C59.8177 15.3342 60.7977 14.8143 60.7977 13.2658C60.7977 11.7022 59.8249 11.2379 58.0064 11.2379L55.2896 11.2379ZM51.7949 8.26001L58.7168 8.26001C60.52 8.26001 61.9517 8.69654 63.0115 9.5696C64.0717 10.4427 64.6013 11.4895 64.6013 13.2206C64.6013 14.9215 64.0747 16.1453 63.0233 17.0175C61.9718 17.8898 60.4064 18.3271 58.7089 18.3271L55.2896 18.3271L55.2896 23.7718L51.7949 23.7718L51.7949 8.26001Z" fill="rgb(30.649,30.649,30.649)" fill-rule="nonzero" />
+		<path id="Vector" d="M80.7016 17.9211C80.5216 19.9554 79.7743 20.8744 78.5429 22.0737C77.3114 23.2729 75.8097 24 73.6603 24C71.3302 24 69.4552 23.4762 68.0352 21.9197C66.6151 20.3633 65.8418 18.3036 65.8418 15.7377C65.8418 13.309 66.5593 11.7692 67.9951 10.1596C69.4308 8.55003 71.4057 8 73.7963 8C75.7051 8 77.1755 8.61035 78.4721 9.70247C79.7688 10.7946 80.4792 12.3121 80.6143 13.9971L77.2902 13.9971C77.1103 13.1018 76.7079 12.3439 76.0839 11.8502C75.4599 11.3565 74.6749 10.8557 73.7263 10.8557C72.7487 10.8557 71.9257 11.133 71.2572 11.6875C70.6252 12.1966 70.157 12.8835 69.9118 13.6614C69.621 14.5242 69.5683 15.1218 69.5683 16.0139C69.5683 17.5147 69.8253 18.5084 70.59 19.5061C71.3546 20.5038 72.3849 20.9975 73.6784 20.9975C75.4293 20.9975 76.99 19.8466 77.2273 17.9251L80.7016 17.9211Z" fill="rgb(30.649,30.649,30.649)" fill-rule="nonzero" />
+		<path id="Vector" d="M96.2352 8.26001L92.2658 15.573L96.7822 23.7433L92.8168 23.7433L89.5695 17.6112L88.9283 17.5946L85.6536 23.7433L81.7031 23.7433L86.2414 15.573L82.2045 8.26001L86.1825 8.26001L89.1169 13.8008L89.4344 13.8008L92.3578 8.26001L96.2352 8.26001Z" fill="rgb(30.649,30.649,30.649)" fill-rule="nonzero" />
+		<path id="Vector" d="M108.242 18.4923C108.242 17.6192 107.42 16.6772 106.089 16.6772L102.558 16.6772L102.558 20.6456L106.112 20.6456C107.596 20.6456 108.242 19.5464 108.242 18.4908M102.558 14.0651L106.312 14.0651C108.01 14.0651 109.386 14.1842 110.437 15.0572C111.489 15.9303 112.015 16.8367 112.015 18.5367C112.015 20.267 111.485 21.5684 110.426 22.4409C109.366 23.3134 107.934 23.747 106.131 23.7417L99 23.7417L99 8.25928L110.905 8.25928L110.905 11.238L102.558 11.238L102.558 14.0651Z" fill="rgb(30.649,30.649,30.649)" fill-rule="nonzero" />
+	</g>
+</svg>

web/public/images/unPinned.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20.000000" height="20.000000" fill="none">
+	<rect id="thumbtack-1" width="20.000000" height="20.000000" x="0.000000" y="0.000000" />
+	<path id="Vector" d="M17.8462 8.34566C18.0512 8.55085 18.0513 8.88353 17.8462 9.08866C17.6411 9.29379 17.3084 9.29371 17.1032 9.08866L15.9434 7.92881L11.837 12.8155C12.4224 14.2343 12.376 15.8752 11.6303 17.2944C11.2166 18.0816 10.1582 18.2422 9.52943 17.6133L6.32956 14.4134L3.60544 17.1376C3.40027 17.3427 3.06762 17.3428 2.86245 17.1376C2.65741 16.9324 2.65733 16.5997 2.86245 16.3946L5.58657 13.6704L2.38656 10.4703C1.75772 9.84147 1.91859 8.78343 2.70581 8.36975C4.12515 7.62397 5.76611 7.5776 7.18488 8.16314L12.0714 4.05673L10.9116 2.89688C10.7064 2.69171 10.7064 2.35905 10.9116 2.15388C11.1167 1.94871 11.4494 1.94871 11.6545 2.15388L17.8462 8.34566ZM8.17587 8.70267L12.8173 4.80263L15.1971 7.18255L11.2975 11.8244C11.119 11.5667 10.9157 11.3222 10.6882 11.0947L8.90544 9.31192C8.67794 9.08442 8.43356 8.88115 8.17587 8.70267ZM6.70598 13.3038C6.70436 13.3022 6.70273 13.3005 6.70108 13.2989C6.69947 13.2973 6.69786 13.2957 6.69624 13.2941L3.12954 9.72732C3.00154 9.59931 3.03423 9.38378 3.19448 9.29958C4.83715 8.43648 6.85034 8.74278 8.16245 10.0549L9.94518 11.8377C11.2572 13.1498 11.5632 15.1627 10.7001 16.8054C10.6159 16.9656 10.4004 16.9983 10.2724 16.8703L6.70598 13.3038Z" fill="rgb(73.6525,85.0542,101.01)" fill-rule="evenodd" />
+</svg>

web/public/images/x.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20.000000" height="20.000000" fill="none">
+	<rect id="x" width="20.000000" height="20.000000" x="0.000000" y="0.000000" />
+	<path id="Icon" d="M14.5869 4.58736C14.8147 4.35955 15.1843 4.35955 15.4121 4.58736C15.6399 4.81516 15.6399 5.18475 15.4121 5.41255L10.8247 9.99996L15.4121 14.5874C15.6399 14.8152 15.6399 15.1847 15.4121 15.4126C15.1843 15.6404 14.8147 15.6404 14.5869 15.4126L9.99947 10.8252L5.41207 15.4126C5.18426 15.6404 4.81468 15.6404 4.58687 15.4126C4.35906 15.1847 4.35906 14.8152 4.58687 14.5874L9.17427 9.99996L4.58687 5.41255C4.35906 5.18475 4.35906 4.81516 4.58687 4.58736C4.81468 4.35955 5.18426 4.35955 5.41207 4.58736L9.99947 9.17476L14.5869 4.58736Z" fill="rgb(73.6525,85.0542,101.01)" fill-rule="nonzero" />
+</svg>

web/src/App.css

@@ -0,0 +1,29 @@
+* {
+  box-sizing: border-box;
+}
+:root {
+  --font-family: "Inter", sans-serif;
+  --second-family: "Segoe UI", sans-serif;
+  --third-family: "Noto Sans", sans-serif;
+}
+
+body {
+  margin: 0;
+  font-family:
+    -apple-system,
+    Segoe UI,
+    Roboto,
+    Arial,
+    sans-serif;
+  color: #2d3748;
+}
+
+html {
+  font-size: 16px;
+}
+
+@media (max-width: 1920px) {
+  html {
+    font-size: .83vw;
+  }
+}

web/src/App.jsx

@@ -0,0 +1,34 @@
+import { useEffect } from 'react';
+import { AppRoutes } from './app/Routes';
+import './App.css';
+import { isTestMode } from './conf/config';
+
+const BaseTag = () => {
+  useEffect(() => {
+    if (isTestMode) {
+      const baseTag = document.createElement('base');
+      baseTag.href = process.env.REACT_APP_BASE_URL || window.location.origin;
+      document.head.prepend(baseTag);
+
+      return () => {
+        const existingBase = document.querySelector('base');
+        if (existingBase) {
+          existingBase.remove();
+        }
+      };
+    }
+  }, []);
+
+  return null;
+};
+
+function App() {
+  return (
+    <div className="App">
+      <BaseTag />
+      <AppRoutes />
+    </div>
+  );
+}
+
+export default App;

web/src/App.tsx

@@ -1,40 +0,0 @@
-import { useEffect, useState } from 'react';
-import { Config } from './conf/config';
-import { Card } from 'react-daisyui';
-
-const App = () => {
-	const [apiResponse, setApiResponse] = useState<{
-		date_with_time: string,
-    	text: string
-	}|null>(null);
-
-	// Загрузка данных с сервера
-	useEffect(() => {
-
-		fetch(`${Config.API_URL}/api`, {
-			headers: {
-				'Accept': 'application/json',
-				'Content-Type': 'application/json'
-			},
-			method: 'GET'
-		})
-			.then(async (response) => {
-				setApiResponse(await response.json())
-			})
-			.catch((error) => {
-				console.log('Ошибка при получении данных с api:', error);
-				alert("Ошибка при получении данных с api");
-			})
-	}, []);
-
-	return (
-		<div className='flex items-center justify-center absolute inset-0'>
-			<Card className="flex flex-col gap-2 border-[2px] items-center justify-center border-primary rounded-md p-6" style={{ width: '50vw', height: '200px' }}>
-				<h1>Шаблон приложения Fast API</h1>
-				<p>Время: {(apiResponse?.date_with_time) ? new Date(apiResponse?.date_with_time).toISOString() : "Нет данных по времени"}, Текст: {apiResponse?.text}</p>
-			</Card>
-		</div>
-	);
-};
-
-export default App;

web/src/api/audit-logs.js

@@ -0,0 +1,7 @@
+import api from './client';
+
+export const AuditLogsApi = {
+  getAll(params) {
+    return api.get(`/audit-logs`, { params }).then((r) => r.data);
+  },
+};

web/src/api/auth.js

@@ -0,0 +1,36 @@
+import api from './client';
+
+export const AuthApi = {
+  async login(username, password) {
+    const { data } = await api.post('/auth/login', { username, password });
+    localStorage.setItem('access_token', data.access_token);
+    localStorage.setItem('refresh_token', data.refresh_token);
+    try {
+      window.dispatchEvent(
+        new CustomEvent('auth:changed', { detail: { loggedIn: true } }),
+      );
+    } catch (error) {
+      console.error('Ошибка входа', error);
+    }
+    return data;
+  },
+  async refresh() {
+    const refresh_token = localStorage.getItem('refresh_token');
+    if (!refresh_token) return null;
+    const { data } = await api.post('/auth/refresh', { refresh_token });
+    localStorage.setItem('access_token', data.access_token);
+    localStorage.setItem('refresh_token', data.refresh_token);
+    return data;
+  },
+  logout() {
+    localStorage.removeItem('access_token');
+    localStorage.removeItem('refresh_token');
+    try {
+      window.dispatchEvent(
+        new CustomEvent('auth:changed', { detail: { loggedIn: false } }),
+      );
+    } catch (error) {
+      console.error('Ошибка при выходе', error);
+    }
+  },
+};

web/src/api/client.js

@@ -0,0 +1,21 @@
+import axios from 'axios';
+import { Config } from '../conf/config';
+
+// Базовый клиент для API с автоматическим проставлением Bearer токена
+const api = axios.create({
+  baseURL: `${Config.API_URL}/api/v1`,
+  headers: {
+    Accept: 'application/json',
+    'Content-Type': 'application/json',
+  },
+});
+
+api.interceptors.request.use((config) => {
+  const token = localStorage.getItem('access_token');
+  if (token) {
+    config.headers.Authorization = `Bearer ${token}`;
+  }
+  return config;
+});
+
+export default api;

web/src/api/client_form.js

@@ -0,0 +1,22 @@
+import axios from 'axios';
+import { Config } from '../conf/config';
+
+// Базовый клиент для API с автоматическим проставлением Bearer токена
+
+const api_form = axios.create({
+  baseURL: `${Config.API_URL}/api/v1`,
+  headers: {
+    Accept: 'application/json',
+    'Content-Type': 'multipart/form-data',
+  },
+});
+
+api_form.interceptors.request.use((config) => {
+  const token = localStorage.getItem('access_token');
+  if (token) {
+    config.headers.Authorization = `Bearer ${token}`;
+  }
+  return config;
+});
+
+export default api_form;

web/src/api/dict-vsp.js

@@ -0,0 +1,19 @@
+import api from './client';
+
+export const DictVspApi = {
+  get(params) {
+    return api.get(`/dict/info`, { params }).then((r) => r.data);
+  },
+  create(payload) {
+    return api.post(`/dict/info`, payload).then((r) => r.data);
+  },
+  update(dict_vsp_id, payload) {
+    return api.put(`/dict/info/${dict_vsp_id}`, payload).then((r) => r.data);
+  },
+  delete(dict_vsp_id) {
+    return api.delete(`/dict/info/${dict_vsp_id}`).then((r) => r.data);
+  },
+  export(payload) {
+    return api.post(`/dict/info/export`, payload);
+  },
+};

web/src/api/form_sheet.js

@@ -0,0 +1,10 @@
+import api from './client';
+
+export const FormsSheetApi = {
+  get(form, sheetName) {
+    return api
+      .get(`/form/${4}/sheet/${sheetName}`)
+    //   .get(`/forms/${form}/sheet/${sheetName}`)
+      .then((r) => r.data);
+  },
+};

web/src/api/forms.js

@@ -0,0 +1,46 @@
+import api from './client';
+
+export const FormsApi = {
+  createForm(payload) {
+    return api.put('/forms/', payload).then((r) => r.data);
+  },
+  updateForm(formId, payload) {
+    return api.patch(`/forms/${formId}`, payload).then((r) => r.data);
+  },
+  createFormFromOther(payload) {
+    return api.put(`/forms/create-by-form`, payload).then((r) => r.data);
+  },
+  getForm(formId) {
+    return api
+      .get('/forms/', {
+        params: { form_id: formId },
+      })
+      .then((r) => r.data);
+  },
+  formsList() {
+    return api.get('/forms/all').then((r) => r.data.result);
+  },
+  formTablesList(formId, isTemplate) {
+    return api
+      .get(`/forms/${formId}/tables`, {
+        params: { is_template: isTemplate },
+      })
+      .then((r) => r.data);
+  },
+
+  getProjects(formId) {
+    return api.get(`/forms/${formId}/projects`).then((r) => r.data);
+  },
+
+  createProjects(formId, projectData) {
+    return api
+      .put(`/forms/${formId}/projects`, projectData)
+      .then((r) => r.data);
+  },
+
+  createProjectTable(formId, projectId, payload) {
+    return api
+      .put(`/forms/${formId}/projects/${projectId}/create-table`, payload)
+      .then((r) => r.data);
+  },
+};

web/src/api/ssp.js

@@ -0,0 +1,37 @@
+import api from './client';
+
+export const SspApi = {
+  get(sspId) {
+    return api.get(`/ssp/${sspId}`).then((r) => r.data);
+  },
+  getAll(params = {}) {
+    return api.get(`/ssp/`, { params }).then((r) => r.data);
+  },
+  getCountUsers() {
+    return api.get(`/ssp/count-users/`).then((r) => r.data);
+  },
+  getUsersById(sspId) {
+    return api.get(`/ssp/get-users/${sspId}`).then((r) => r.data);
+  },
+  update(sspId, ssp) {
+    return api.patch(`/ssp/${sspId}`, ssp).then((r) => r.data);
+  },
+  create(ssp) {
+    return api.put(`/ssp/`, ssp).then((r) => r.data);
+  },
+  getManySsp(userId) {
+    return api
+      .get(`/users/dfip-many-ssp/`, { params: { user_id: userId } })
+      .then((r) => r.data);
+  },
+  putManySsps(userId, payload) {
+    return api
+      .put(`/users/dfip-many-ssp/?user_id=${userId}`, payload)
+      .then((r) => r.data);
+  },
+  deleteManySsps(userId, payload) {
+    return api
+      .delete(`/users/dfip-many-ssp/?user_id=${userId}`, { data: payload })
+      .then((r) => r.data);
+  },
+};

web/src/api/stages.js

@@ -0,0 +1,83 @@
+import api from './client';
+
+export const StagesApi = {
+  createStage(formId, payload) {
+    return api.put(`/forms/${formId}/stages`, [payload]).then((r) => r.data);
+  },
+  updateStage(formId, stage) {
+    return api
+      .patch(`/forms/${formId}/stages/${stage.id}`, stage)
+      .then((r) => r.data);
+  },
+  deleteStage(formId, stage) {
+    return api
+      .delete(`/forms/${formId}/stages/${stage.id}`)
+      .then((r) => r.data);
+  },
+  getStages(formId) {
+    return api.get(`/forms/${formId}/stages`).then((r) => r.data);
+  },
+  createStageAccessHeader(tableId, stageId, payload) {
+    return api
+      .post(
+        `/table-data/templates/templates/${tableId}/stages/${stageId}/access_headers/`,
+        payload,
+      )
+      .then((r) => r.data);
+  },
+  createStageAccessCell(tableId, stageId, payload) {
+    return api
+      .post(
+        `/table-data/templates/templates/${tableId}/stages/${stageId}/access_cells/`,
+        payload,
+      )
+      .then((r) => r.data);
+  },
+  updateStageAccessHeader(tableId, stageId, payload) {
+    return api
+      .put(
+        `/table-data/templates/templates/${tableId}/stages/${stageId}/access_headers/${payload.id}/`,
+        payload,
+      )
+      .then((r) => r.data);
+  },
+  updateStageAccessCell(tableId, stageId, payload) {
+    return api
+      .put(
+        `/table-data/templates/templates/${tableId}/stages/${stageId}/access_cells/${payload.id}/`,
+        payload,
+      )
+      .then((r) => r.data);
+  },
+  deleteStageAccessHeader(tableId, stageId, accessHeaderId) {
+    return api
+      .delete(
+        `/table-data/templates/templates/${tableId}/stages/${stageId}/access_headers/${accessHeaderId}/`,
+      )
+      .then((r) => r.data);
+  },
+  getStageAccessHeader(template_id, stage_id) {
+    return api
+      .get(
+        `/table-data/templates/templates/${template_id}/stages/${stage_id}/access_headers/`,
+      )
+      .then((r) => r.data);
+  },
+  getStageAccessCell(template_id, stage_id) {
+    return api
+      .get(
+        `/table-data/templates/templates/${template_id}/stages/${stage_id}/access_cells/`,
+      )
+      .then((r) => r.data);
+  },
+  deleteStageAccessCell(tableId, stageId, accessCellId) {
+    return api
+      .delete(
+        `/table-data/templates/templates/${tableId}/stages/${stageId}/access_cells/${accessCellId}/`,
+      )
+      .then((r) => r.data);
+  },
+  getStagesForTask(taskId) {
+    return api.get(`/tasks/${taskId}/stages`).then((r) => r.data);
+  },
+};

web/src/api/tables.js

@@ -0,0 +1,111 @@
+import api from './client';
+import api_form from './client_form';
+
+export const TablesApi = {
+  create(payload) {
+    return api.post('/table-data/', payload).then((r) => r.data);
+  },
+  get(tableId) {
+    return api.get(`/table-data/${tableId}`).then((r) => r.data);
+  },
+  createTemp(payload) {
+    return api
+      .post('/table-data/templates/templates', payload)
+      .then((r) => r.data);
+  },
+  listByTask(taskId) {
+    return api
+      .get('/table-data/', { params: { task_id: taskId } })
+      .then((r) => r.data);
+  },
+  uploadExcel(tableId, form) {
+    return api_form
+      .post(`/table-data/upload-excel/${tableId}`, form)
+      .then((r) => r.data);
+  },
+  getTableSchema(tableId) {
+    return api.get(`/table-data/${tableId}`).then((r) => r.data);
+  },
+  getTemplateInfo(tableId) {
+    return api
+      .get(`/table-data/templates/templates/${tableId}`)
+      .then((r) => r.data);
+  },
+  updateTemplateInfo(tableId, table) {
+    return api
+      .put(`/table-data/templates/templates/${tableId}`, table)
+      .then((r) => r.data);
+  },
+  getTemplateSchema(params) {
+    return api
+      .get(`/table-data/${params.table_id}/chunk`, { params })
+      .then((r) => r.data);
+  },
+  bulkUpdate(tableId, payload) {
+    return api
+      .post(`/table-data/bulk-update/${tableId}`, payload)
+      .then((r) => r.data);
+  },
+  bulkUpdateTemp(tableId, payload) {
+    return api
+      .put(`/table-data/temp-cells/bulk-update`, payload)
+      .then((r) => r.data);
+  },
+  createColumn(tableId, payload) {
+    return api
+      .post(
+        `/table-data/templates/templates/${tableId}/headers?template_id=${tableId}`,
+        { template_id: tableId, ...payload },
+      )
+      .then((r) => r.data);
+  },
+  createHeaders(tableId, payload) {
+    return api
+      .post(`table-data/templates/templates/${tableId}/headers/list`, payload)
+      .then((r) => r.data);
+  },
+  insertRow(tableId, row) {
+    return api
+      .post(`/table-data/templates/templates/${tableId}/rows/${row}`)
+      .then((r) => r.data);
+  },
+  insertTableRow(tableId, row) {
+    return api
+      .post(`/table-data/test/test/${tableId}/rows/${row}`)
+      .then((r) => r.data);
+  },
+  deleteRow(tableId, row) {
+    return api
+      .delete(`/table-data/templates/templates/${tableId}/rows/${row}`)
+      .then((r) => r.data);
+  },
+  deleteCol(header_id) {
+    return api
+      .delete(`/table-data/templates/headers/${header_id}`)
+      .then((r) => r.data);
+  },
+  updateCol(body) {
+    return api.put(`/table-data/templates/headers/`, body).then((r) => r.data);
+  },
+  getHeader(tableId) {
+    return api.get(`/table-data/${tableId}/headers`).then((r) => r.data);
+  },
+  countFormulas(tableId, payload) {
+    return api
+      .post(`/table-data/formulas/count/${tableId}/`, payload)
+      .then((r) => r.data);
+  },
+  countFormulasList(tableId, payload) {
+    return api
+      .post(`/table-data/formulas/count/${tableId}/list`, payload)
+      .then((r) => r.data);
+  },
+  getTableInfo(tableId) {
+    return api.get(`table-data/${tableId}/metadata`).then((r) => r.data);
+  },
+  exportTable(taskId, tableId) {
+    return api.get(`export/task/${taskId}/sheet/${tableId}`, {
+      responseType: 'blob',
+    });
+  },
+};

web/src/api/tasks.js

@@ -0,0 +1,40 @@
+import api from './client';
+
+export const TasksApi = {
+  list(params = {}) {
+    return api.get('/tasks/', { params }).then((r) => r.data.result);
+  },
+  getTask(taskId) {
+    return api.get(`/tasks/${taskId}`).then((r) => r.data);
+  },
+  getTaskStages(taskId) {
+    return api.get(`/tasks/${taskId}/stages`).then((r) => r.data);
+  },
+  create(payload) {
+    return api.put('/tasks/', payload).then((r) => r.data);
+  },
+  editTask(taskId, payload = {}) {
+    return api.patch(`/tasks/${taskId}`, payload).then((r) => r.data);
+  },
+  editTaskStages(taskId, stageId, payload = {}) {
+    return api
+      .patch(`/tasks/${taskId}/stages/${stageId}`, payload)
+      .then((r) => r.data);
+  },
+  getProjects(taskId) {
+    return api.get(`/tasks/${taskId}/projects`).then((r) => r.data);
+  },
+  createProjectTable(taskId, payload) {
+    return api.post(`/tasks/${taskId}/projects`, payload).then((r) => r.data);
+  },
+  exportTask(taskId) {
+    return api.get(`export/task/${taskId}`, {
+      responseType: 'blob',
+    });
+  },
+  exportTasks(payload) {
+    return api.post(`export/bulk`, payload, {
+      responseType: 'blob',
+    });
+  },
+};

web/src/api/users.js

@@ -0,0 +1,25 @@
+import api from './client';
+
+export const UsersApi = {
+  me() {
+    return api.get('/users/me').then((r) => r.data);
+  },
+  getById(userId) {
+    return api.get(`/users/${userId}`).then((r) => r.data);
+  },
+  getAll() {
+    return api.get('/users/').then((r) => r.data);
+  },
+  update(idUser, data) {
+    return api.patch(`/users/${idUser}`, data).then((r) => r.data);
+  },
+  getAllRoles() {
+    return api.get(`/users/roles/`).then((r) => r.data);
+  },
+  add(payload) {
+    return api.put(`/users/`, payload).then((r) => r.data);
+  },
+  delete(userId) {
+    return api.delete(`/users/${userId}`).then((r) => r.data);
+  },
+};

web/src/api/utils/token.js

@@ -0,0 +1,56 @@
+export const saveAuthTokens = (data) => {
+  const { access_token, refresh_token, expires_in } = data;
+
+  // TODO: раскомментировать, когда поправят expires_in на бэке
+  // const expiresAt = Date.now() + expires_in * 1000
+
+  localStorage.setItem('access_token', access_token);
+  localStorage.setItem('refresh_token', refresh_token);
+  // localStorage.setItem('expires_at', expiresAt.toString())
+};
+
+export const getAuthToken = () => {
+  const access_token = localStorage.getItem('access_token');
+
+  return access_token;
+};
+
+export const isTokenExpired = () => {
+  try {
+    const token = getAuthToken();
+    if (!token) {
+      return true;
+    }
+
+    // TODO: с бэка сейчас приходит expired_in: null. Если поправят, то это логика будет не нужна. Пока что оставляю так
+    const base64 = token.split('.')[1].replace(/-/g, '+').replace(/_/g, '/');
+    const jsonPayload = decodeURIComponent(
+      atob(base64)
+        .split('')
+        .map((c) => '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2))
+        .join(''),
+    );
+
+    const payload = JSON.parse(jsonPayload);
+    const now = Math.floor(Date.now() / 1000);
+
+    // для проверки времени жизни токена
+    const expirationDate = new Date(payload.exp * 1000);
+    console.log('Токен истекает:', expirationDate.toLocaleString('ru-RU'));
+
+    return payload.exp < now;
+  } catch (err) {
+    console.error('Ошибка при разборе токена:', err.message);
+    return true;
+  }
+};
+
+export const clearAuthTokens = () => {
+  localStorage.removeItem('access_token');
+  localStorage.removeItem('refresh_token');
+};
+
+// TODO: отсутствует функционал обновления токена. добавить логику когда сделают на бэке. пока просто очистка LS
+export const updateToken = () => {
+  clearAuthTokens();
+};

web/src/api/ws.js

@@ -0,0 +1,327 @@
+import { Config } from '../conf/config';
+
+export function openTaskSocket(taskId, onMessage) {
+  try {
+    const base = Config.API_URL || window.location.origin;
+    const wsBase = base.replace(/^http/i, 'ws');
+    const url = `${wsBase}/ws/tasks/${taskId}`;
+    const ws = new WebSocket(url);
+    ws.onmessage = (evt) => {
+      try {
+        onMessage && onMessage(JSON.parse(evt.data));
+      } catch (error) {
+        console.error('Ошибка подключения', error);
+      }
+    };
+    return ws;
+  } catch (error) {
+    console.error(error);
+    return null;
+  }
+}
+
+export const connectToTable = (tableId, userId, options = {}) => {
+  const { onError, onClose } = options;
+
+  const baseURL = Config.API_URL.replace('http://', 'ws://').replace(
+    'https://',
+    'wss://',
+  );
+  const wsURL = `${baseURL}/api/v1/ws/${tableId}?user_id=${userId}`;
+
+  const ws = new WebSocket(wsURL);
+
+  const eventHandlers = {
+    cell_edit_start: [],
+    cell_edit_end: [],
+    cell_updated: [],
+    row_added: [],
+    row_deleted: [],
+    formula_updated: [],
+    formula_manual: [],
+    formula_recalculate: [],
+  };
+
+  ws.onerror = (error) => {
+    console.error('Ошибка WebSocket:', error);
+    if (onError) {
+      onError(error);
+    }
+  };
+
+  ws.onclose = (event) => {
+    console.log(
+      `Отключено от таблицы ${tableId}. Код: ${event.code}, причина: ${event.reason}`,
+    );
+    if (onClose) {
+      onClose(event);
+    }
+  };
+
+  ws.onmessage = (event) => {
+    const raw = event.data;
+    let message;
+
+    try {
+      message = JSON.parse(raw);
+    } catch (_err) {
+      try {
+        let fixed = raw
+          .replace(/'/g, '"')
+          .replace(/\bNone\b/g, 'null')
+          .replace(/\bTrue\b/g, 'true')
+          .replace(/\bFalse\b/g, 'false');
+
+        if (fixed.includes('BasicFormulaDependancy')) {
+          fixed = fixed.replace(
+            /"dependancies"\s*:\s*\[\[[\s\S]*?\]\]/,
+            '"dependancies":[[]]',
+          );
+        }
+
+        message = JSON.parse(fixed);
+      } catch (error) {
+        console.error('Ошибка парсинга сообщения WebSocket:', error, raw);
+        return;
+      }
+    }
+
+    const { event: eventName, data, error, result } = message;
+    if (eventHandlers[eventName]) {
+      const base = data || {};
+      const payload = {
+        ...base,
+        ...(result !== undefined ? { result } : {}),
+        ...(error !== undefined ? { error } : {}),
+      };
+      eventHandlers[eventName].forEach((handler) => handler(payload));
+    }
+  };
+
+  return {
+    ws,
+    disconnect: () => {
+      ws.close();
+    },
+
+    // Начало редактирования ячейки
+    startEditCell: (cellKey) => {
+      if (ws.readyState === WebSocket.OPEN) {
+        const message = JSON.stringify({
+          event: 'cell_edit_start',
+          data: {
+            cell_key: cellKey,
+            user_id: userId,
+          },
+        });
+        ws.send(message);
+      }
+    },
+
+    // Завершение редактирования ячейки
+    endEditCell: (cellKey) => {
+      if (ws.readyState === WebSocket.OPEN) {
+        const message = JSON.stringify({
+          event: 'cell_edit_end',
+          data: {
+            cell_key: cellKey,
+            user_id: userId,
+          },
+        });
+        ws.send(message);
+      }
+    },
+
+    // Подписка на событие начала редактирования ячейки другим пользователем
+    onCellEditStart: (callback) => {
+      eventHandlers.cell_edit_start.push(callback);
+    },
+    offCellEditStart: (callback) => {
+      eventHandlers.cell_edit_start = eventHandlers.cell_edit_start.filter(
+        (cb) => cb !== callback,
+      );
+    },
+
+    // Подписка на событие завершения редактирования ячейки другим пользователем
+    onCellEditEnd: (callback) => {
+      eventHandlers.cell_edit_end.push(callback);
+    },
+    offCellEditEnd: (callback) => {
+      eventHandlers.cell_edit_end = eventHandlers.cell_edit_end.filter(
+        (cb) => cb !== callback,
+      );
+    },
+
+    // Обновление значения ячейки (отправка нового значения другим пользователям)
+    updateCellValue: (cellKey, newValue, cellType, cellColor) => {
+      const [columnId, rowId] = cellKey.split('_');
+      if (ws.readyState === WebSocket.OPEN) {
+        const message = JSON.stringify({
+          event: 'cell_updated',
+          data: {
+            row: Number(rowId) + 1,
+            header_id: Number(columnId),
+            cell_key: cellKey,
+            color: cellColor,
+            value: newValue,
+            type: cellType,
+          },
+        });
+        ws.send(message);
+      }
+    },
+
+    // Подписка на событие обновления значения ячейки другим пользователем
+    onCellValueUpdated: (callback) => {
+      eventHandlers.cell_updated.push(callback);
+    },
+    offCellValueUpdated: (callback) => {
+      eventHandlers.cell_updated = eventHandlers.cell_updated.filter(
+        (cb) => cb !== callback,
+      );
+    },
+
+    // Добавление строки (отправка события другим пользователям)
+    addRow: (rowIndex) => {
+      if (ws.readyState === WebSocket.OPEN) {
+        const message = JSON.stringify({
+          event: 'row_added',
+          data: {
+            row_index: rowIndex,
+            user_id: userId,
+          },
+        });
+        ws.send(message);
+      }
+    },
+
+    // Подписка на событие добавления строки другим пользователем
+    onRowAdded: (callback) => {
+      eventHandlers.row_added.push(callback);
+    },
+    offRowAdded: (callback) => {
+      eventHandlers.row_added = eventHandlers.row_added.filter(
+        (cb) => cb !== callback,
+      );
+    },
+
+    // Удаление строки (отправка события другим пользователям)
+    deleteRow: (rowIndex) => {
+      if (ws.readyState === WebSocket.OPEN) {
+        const message = JSON.stringify({
+          event: 'row_deleted',
+          data: {
+            row_index: rowIndex,
+            user_id: userId,
+          },
+        });
+        ws.send(message);
+      }
+    },
+
+    // Подписка на событие удаления строки другим пользователем
+    onRowDeleted: (callback) => {
+      eventHandlers.row_deleted.push(callback);
+    },
+    offRowDeleted: (callback) => {
+      eventHandlers.row_deleted = eventHandlers.row_deleted.filter(
+        (cb) => cb !== callback,
+      );
+    },
+
+    // Обновление цвета ячейки
+    updateCellColor: (cellKey, color, cellType, cellValue) => {
+      const [columnId, rowId] = cellKey.split('_');
+      if (ws.readyState === WebSocket.OPEN) {
+        const message = JSON.stringify({
+          event: 'cell_updated',
+          data: {
+            row: Number(rowId) + 1,
+            header_id: Number(columnId),
+            cell_key: cellKey,
+            color,
+            type: cellType,
+            value: cellValue,
+          },
+        });
+        ws.send(message);
+      }
+    },
+
+    // Добавление/обновление формулы (отправка события другим пользователям)
+    updateFormula: (cellKey, type, value, formula) => {
+      const [columnId, rowId] = cellKey.split('_');
+      if (ws.readyState === WebSocket.OPEN) {
+        const message = JSON.stringify({
+          event: 'formula_updated',
+          data: {
+            cell_key: cellKey,
+            row: Number(rowId),
+            header_id: Number(columnId),
+            type,
+            value,
+            formula,
+            user_id: userId,
+          },
+        });
+        ws.send(message);
+      }
+    },
+
+    // Подписка на событие добавления/обновления формулы другим пользователем
+    onFormulaUpdated: (callback) => {
+      eventHandlers.formula_updated.push(callback);
+    },
+    offFormulaUpdated: (callback) => {
+      eventHandlers.formula_updated = eventHandlers.formula_updated.filter(
+        (cb) => cb !== callback,
+      );
+    },
+
+    // Ручное добавление формулы (отправка события другим пользователям)
+    formulaManual: (formulaDatas) => {
+      if (ws.readyState === WebSocket.OPEN) {
+        const message = JSON.stringify({
+          event: 'formula_manual',
+          data: {
+            formula_datas: formulaDatas,
+          },
+        });
+        ws.send(message);
+      }
+    },
+
+    // Подписка на результат ручного добавления формулы
+    onFormulaManual: (callback) => {
+      eventHandlers.formula_manual.push(callback);
+    },
+    offFormulaManual: (callback) => {
+      eventHandlers.formula_manual = eventHandlers.formula_manual.filter(
+        (cb) => cb !== callback,
+      );
+    },
+
+    // Пересчёт формул (отправка события другим пользователям / на бэкенд)
+    formulaRecalculate: (formulaDatas, cells) => {
+      if (ws.readyState === WebSocket.OPEN) {
+        const message = JSON.stringify({
+          event: 'formula_recalculate',
+          data: {
+            formula_datas: formulaDatas,
+            cells,
+          },
+        });
+        ws.send(message);
+      }
+    },
+
+    // Подписка на результат пересчёта формул
+    onFormulaRecalculate: (callback) => {
+      eventHandlers.formula_recalculate.push(callback);
+    },
+    offFormulaRecalculate: (callback) => {
+      eventHandlers.formula_recalculate =
+        eventHandlers.formula_recalculate.filter((cb) => cb !== callback);
+    },
+  };
+};

web/src/app/Routes.jsx

@@ -0,0 +1,58 @@
+import { Navigate, Outlet, Route, Routes } from 'react-router-dom';
+import { useAuth } from './context/AuthProvider';
+import { Layout } from './layout/Layout';
+import TasksPage from '../pages/TasksPage';
+import FormsPage from '../pages/FormsPage';
+import TaskPage from '../pages/TaskPage/TaskPage';
+import FormPage from '../pages/FormPage';
+import TablePage from '../pages/TablePage';
+import TableTempPage from '../pages/TableTempPage/TableTempPage';
+import LoginPage from '../pages/LoginPage';
+import UsersPage from '../pages/AdminPanel/UsersPage/UsersPage';
+import SspsPage from '../pages/AdminPanel/SppsPage/SppsPage';
+import DictVspPage from '../pages/DictVspPage/DictVspPage.jsx';
+import DictsNavigatorPage from '../pages/DictsNavigatorPage/DictsNavigatorPage.jsx';
+import AuditLogsPage from '../pages/AdminPanel/AuditLogsPage/AuditLogsPage.jsx';
+import { CircularProgress } from '@mui/material';
+import NewTablePage from '../pages/NewTablePage.jsx';
+import TablesTest from '../pages/TablesTest.jsx';
+import NewFormTablePage from '../pages/NewFormTablePage.jsx'
+
+export const PrivateRoute = () => {
+  const { isAuthenticated, loading } = useAuth();
+
+  if (loading) {
+    <CircularProgress />;
+  }
+
+  // return isAuthenticated ? <Outlet /> : <Navigate to="/login" replace />;
+  return  <Outlet />;
+};
+
+export const AppRoutes = () => {
+  return (
+    <Routes>
+      <Route path="/login" element={<LoginPage />} />
+
+      <Route element={<Layout />}>
+        <Route element={<PrivateRoute />}>
+          <Route path="/" element={<TasksPage />} />
+          <Route path="/tasks" element={<TasksPage />} />
+          <Route path="/forms" element={<FormsPage />} />
+          <Route path="/task/:taskId" element={<TaskPage />} />
+          <Route path="/form/:formId" element={<FormPage />} />
+          <Route path="/table/:tableId" element={<TablePage />} />
+          <Route path="/table-temp/:tableId" element={<TableTempPage />} />
+          <Route path="/admin_panel/users" element={<UsersPage />} />
+          <Route path="/admin_panel/ssps" element={<SspsPage />} />
+          <Route path="/admin_panel/audit-log" element={<AuditLogsPage />} />
+          <Route path="/dicts/dict-vsp" element={<DictVspPage />} />
+          <Route path="/dicts-navigator" element={<DictsNavigatorPage />} />
+          <Route path="/new-table" element={<NewTablePage />} />
+          <Route path="/tables-new" element={<TablesTest />} />
+          <Route path="/tables/:form/:sheetName" element={<NewFormTablePage />} />
+        </Route>
+      </Route>
+    </Routes>
+  );
+};

web/src/app/context/AuthProvider.jsx

@@ -0,0 +1,135 @@
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useState,
+  useCallback,
+} from 'react';
+import {
+  getAuthToken,
+  saveAuthTokens,
+  isTokenExpired,
+} from '../../api/utils/token';
+import { UsersApi } from '../../api/users';
+import { AuthApi } from '../../api/auth';
+import { CircularProgress } from '@mui/material';
+
+const AuthContext = createContext(null);
+
+export const AuthProvider = ({ children }) => {
+  const [loading, setLoading] = useState(true);
+  const [user, setUser] = useState(null);
+  const [isAuthenticated, setIsAuthenticated] = useState(() => {
+    const token = getAuthToken();
+    return !!token && !isTokenExpired();
+  });
+
+  const loadUser = useCallback(async () => {
+    if (!isAuthenticated) {
+      setUser(null);
+      return;
+    }
+
+    try {
+      const userData = await UsersApi.me();
+      setUser(userData);
+    } catch (error) {
+      console.error('Ошибка загрузки пользователя:', error);
+      if (error.response?.status === 401) {
+        setIsAuthenticated(false);
+        setUser(null);
+      } else {
+        setUser(null);
+      }
+    }
+  }, [isAuthenticated]);
+
+  const login = async (username, password) => {
+    setLoading(true);
+    try {
+      const data = await AuthApi.login(username, password);
+      saveAuthTokens(data);
+      setIsAuthenticated(true);
+
+      try {
+        const userData = await UsersApi.me();
+        setUser(userData);
+      } catch (userError) {
+        console.error('Ошибка загрузки пользователя:', userError);
+        setUser(null);
+      }
+    } catch (error) {
+      setIsAuthenticated(false);
+      setUser(null);
+      console.error('Ошибка авторизации:', error);
+
+      throw new Error(
+        error?.response?.data?.detail || 'Неверный логин или пароль',
+        { cause: error },
+      );
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const logout = async () => {
+    try {
+      AuthApi.logout();
+      setIsAuthenticated(false);
+      setUser(null);
+    } catch (error) {
+      console.error('Ошибка выхода:', error);
+    }
+  };
+
+  useEffect(() => {
+    setLoading(false);
+  }, []);
+
+  useEffect(() => {
+    loadUser();
+  }, [loadUser]);
+
+  useEffect(() => {
+    const handleAuthChange = (_event) => {
+      const token = getAuthToken();
+      const newIsAuthenticated = !!token && !isTokenExpired();
+      setIsAuthenticated(newIsAuthenticated);
+    };
+
+    const handleAuthExpired = () => {
+      setIsAuthenticated(false);
+      setUser(null);
+    };
+
+    window.addEventListener('auth:changed', handleAuthChange);
+    window.addEventListener('auth:expired', handleAuthExpired);
+
+    return () => {
+      window.removeEventListener('auth:changed', handleAuthChange);
+      window.removeEventListener('auth:expired', handleAuthExpired);
+    };
+  }, []);
+
+  return (
+    <AuthContext.Provider
+      value={{ isAuthenticated, user, login, logout, loadUser }}
+    >
+      {loading ? (
+        <div className="flex items-center justify-center min-h-screen">
+          <CircularProgress />
+        </div>
+      ) : (
+        children
+      )}
+    </AuthContext.Provider>
+  );
+};
+
+export const useAuth = () => {
+  const context = useContext(AuthContext);
+  if (!context) {
+    throw new Error('useAuth must be used within an AuthProvider');
+  }
+  return context;
+};

web/src/app/layout/Layout.jsx

@@ -0,0 +1,21 @@
+import { Outlet } from 'react-router';
+import { HeaderMenu } from '../../components/HeaderMenu/HeaderMenu';
+
+export const Layout = () => {
+  return (
+    <div
+      className="flex flex-col h-screen overflow-hidden"
+      style={{
+        height: '100vh',
+      }}
+    >
+      <HeaderMenu />
+      <main
+        className="flex-1 flex flex-col"
+        style={{ height: ' calc(100vh - 3.75rem)' }}
+      >
+        <Outlet />
+      </main>
+    </div>
+  );
+};

web/src/app/theme/theme.js

@@ -0,0 +1,228 @@
+import { createTheme } from '@mui/material/styles';
+
+let theme = createTheme({
+  palette: {
+    primary: {
+      main: '#258141',
+      divider: 'rgba(0,0,0,.1)',
+    },
+    error: {
+      main: '#813a25ff',
+      divider: 'rgba(0,0,0,.1)',
+    },
+    warning: {
+      main: '#F7B485',
+      divider: 'rgba(0,0,0,.1)',
+      color: '#441306',
+    },
+  },
+  components: {
+    MuiButton: {
+      styleOverrides: {
+        root: {
+          borderRadius: '.5rem',
+          textTransform: 'none',
+          height: '2rem',
+          padding: '0.38rem 0.75rem',
+        },
+        startIcon: {
+          marginRight: '0.45rem',
+        },
+      },
+      variants: [
+        {
+          props: { variant: 'grey' },
+          style: {
+            backgroundColor: '#F3F3F5',
+            color: '#4A5565',
+            '&:hover': {
+              backgroundColor: '#E5E5E7',
+            },
+          },
+        },
+        {
+          props: { variant: 'outlined', color: 'default' },
+          style: {
+            borderColor: 'rgba(0, 0, 0, 0.1)',
+            color: 'var(--GreyDark, rgba(74, 85, 101, 1))',
+            '&:hover': {
+              borderColor: 'rgba(0, 0, 0, 0.2)',
+              backgroundColor: 'rgba(0, 0, 0, 0.04)',
+            },
+          },
+        },
+        {
+          props: { variant: 'contained', color: 'warning' },
+          style: {
+            backgroundColor: 'rgb(255, 242, 228)',
+            color: 'rgb(183, 59, 11)',
+            boxShadow: 'none',
+            border: '1px solid transparent',
+            '&:hover': {
+              boxShadow: 'none',
+              border: '1px solid rgb(183, 59, 11)',
+            },
+          },
+        },
+      ],
+    },
+    MuiFormLabel: {
+      styleOverrides: {
+        root: {
+          marginBottom: '0.4rem',
+          color: '#4A5565',
+          '&.Mui-focused': {
+            color: '#4A5565',
+          },
+          '& .MuiFormLabel-asterisk': {
+            color: '#c24e21',
+          },
+        },
+      },
+    },
+    MuiOutlinedInput: {
+      styleOverrides: {
+        root: {
+          borderRadius: '8px',
+          '& fieldset': {
+            border: '1px solid rgba(0,0,0,0.1)',
+          },
+          '&:hover fieldset': {
+            borderColor: 'rgba(0,0,0,0.1)',
+          },
+          '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
+            borderWidth: '1px',
+          },
+        },
+      },
+    },
+    MuiAutocomplete: {
+      styleOverrides: {
+        popper: {
+          zIndex: 60,
+        },
+      },
+    },
+    MuiIconButton: {
+      variants: [
+        {
+          props: { color: 'grey' },
+          style: {
+            backgroundColor: 'var(--GreyLight, rgba(243, 243, 245, 1))',
+            '&:hover': {
+              backgroundColor: 'var(--GreyLight, rgba(243, 243, 245, 1))',
+            },
+          },
+        },
+        {
+          props: { shape: 'rounded' },
+          style: {
+            borderRadius: '0.5rem',
+          },
+        },
+        {
+          props: { variant: 'outlined' },
+          style: {
+            border: '1px solid rgba(0, 0, 0, 0.1)',
+            borderRadius: '0.5rem',
+            gap: '0.375rem',
+          },
+        },
+        {
+          props: { variant: 'outlined', 'data-active': true },
+          style: {
+            border: '0.06rem solid var(--Primary, rgba(37, 129, 65, 1))',
+            background: 'var(--PrimaryLight, rgba(237, 248, 240, 1))',
+          },
+        },
+      ],
+    },
+    MuiMenu: {
+      styleOverrides: {
+        paper: {
+          border: '0.06rem solid rgba(233, 233, 233, 1)',
+          borderRadius: '0.75rem',
+          boxShadow: '0rem 0.25rem 15rem 0rem rgba(0, 0, 0, 0.1)',
+          paddingTop: 0,
+          paddingBottom: 0,
+        },
+        list: {
+          paddingTop: 0,
+          paddingBottom: 0,
+        },
+      },
+    },
+    MuiTypography: {
+      variants: [
+        {
+          props: { variant: 'grey' },
+          style: {
+            color: 'var(--Grey, rgba(74, 85, 101, 1))',
+            fontSize: '0.88rem',
+          },
+        },
+      ],
+    },
+    MuiTooltip: {
+      defaultProps: {
+        slotProps: {
+          popper: {
+            modifiers: [
+              {
+                name: 'offset',
+                options: {
+                  offset: [0, -8],
+                },
+              },
+            ],
+          },
+        },
+      },
+      styleOverrides: {
+        tooltip: {
+          backgroundColor: '#FFFFFF',
+          border: '1px solid #212121',
+          color: '#212121',
+          '& .MuiTooltip-arrow': {
+            color: '#FFFFFF',
+            '&::before': {
+              border: '1px solid #212121',
+            },
+          },
+        },
+      },
+    },
+  },
+  zIndex: {
+    modal: 30,
+    table: 29,
+    tooltip: 40,
+  },
+
+  adminTable: {
+    fontSize: '0.75rem',
+    MuiTableRow: {
+      styleOverrides: {
+        root: {
+          height: '2.75rem',
+          '& .MuiTableCell-root': {
+            padding: '0px 8px',
+            height: '2.75rem',
+          },
+        },
+      },
+    },
+    MuiTableCell: {
+      styleOverrides: {
+        root: {
+          padding: '0px 8px',
+          height: '2.75rem',
+        },
+      },
+    },
+  },
+});
+
+theme = createTheme(theme);
+
+export default theme;

web/src/components/AdminPanel/SwitchUserSsp.jsx

@@ -0,0 +1,15 @@
+import { Switch, Buttons, StyledNavLink } from '../styles/StyledForSwitch';
+
+export function SwitchUserSsp() {
+  return (
+    <Switch>
+      <Buttons>
+        <StyledNavLink to="/admin_panel/users">Пользователи</StyledNavLink>
+        <StyledNavLink to="/admin_panel/ssps">
+          ССП/Региональные филиалы
+        </StyledNavLink>
+        <StyledNavLink to="/admin_panel/audit-log">Журнал аудита</StyledNavLink>
+      </Buttons>
+    </Switch>
+  );
+}

web/src/components/HeaderMenu/HeaderMenu.jsx

@@ -0,0 +1,201 @@
+import { useNavigate } from 'react-router-dom';
+import { useAuth } from '../../app/context/AuthProvider';
+import { useCallback, useState, useRef, useEffect } from 'react';
+import styled from '@emotion/styled';
+import { isTestMode } from '../../conf/config';
+
+export function HeaderMenu() {
+  const { user, logout } = useAuth();
+  const navigate = useNavigate();
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const menuRef = useRef(null);
+
+  const handleLogout = useCallback(async () => {
+    await logout();
+    navigate('/login');
+    setIsMenuOpen(false);
+  }, [logout, navigate]);
+
+  const getInitials = useCallback(() => {
+    if (user) {
+      const names = user.username.split(' ');
+      return names
+        .map((name) => name[0])
+        .join('')
+        .toUpperCase();
+    }
+  }, [user]);
+
+  const toggleMenu = useCallback(() => {
+    setIsMenuOpen((prev) => !prev);
+  }, []);
+
+  // Закрытие меню при клике вне его области
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (menuRef.current && !menuRef.current.contains(event.target)) {
+        setIsMenuOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+
+  return (
+    <HeaderMenuTag>
+      <Logo />
+      <TableInfo id="TableInfo" />
+      <UserInfo ref={menuRef}>
+        <UserAvatar>
+          <UserInitials>{user ? getInitials() : ''}</UserInitials>
+        </UserAvatar>
+        <UserNameAndRole>
+          <div className="username">{user?.full_name}</div>
+          <div className="role">{user?.role}</div>
+        </UserNameAndRole>
+
+        {/* на стенде прода не показываем кнопку выхода */}
+        {isTestMode && <DownButton onClick={toggleMenu} isOpen={isMenuOpen} />}
+        {(isTestMode && isMenuOpen) && (
+          <DropdownMenu>
+            <LogoutButton onClick={handleLogout}>Выйти</LogoutButton>
+          </DropdownMenu>
+        )}
+      </UserInfo>
+    </HeaderMenuTag>
+  );
+}
+
+const HeaderMenuTag = styled.div`
+  height: 3.75rem;
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+  padding: 0.75rem 1.5rem 0.75rem 1.5rem;
+  width: 100%;
+  box-sizing: border-box;
+  border-bottom: 0.0625rem solid var(--Stroke, rgba(0, 0, 0, 0.1));
+  background: rgba(255, 255, 255, 1);
+  position: relative;
+`;
+
+const Logo = styled.div`
+  width: 7rem;
+  height: 2rem;
+  display: flex;
+  align-items: center;
+  background-image: url('images/logo.svg');
+  background-repeat: no-repeat;
+  background-size: contain;
+  z-index: 1;
+`;
+
+const TableInfo = styled.div`
+  display: flex;
+  padding-left: 1.5rem;
+  flex: 1;
+  height: 100%;
+`;
+
+const UserInfo = styled.div`
+  width: 12.23rem;
+  height: 2.25rem;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 0.75rem;
+  position: relative;
+`;
+
+const UserAvatar = styled.div`
+  width: 2rem;
+  height: 2rem;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  border-radius: 33554400rem;
+  background: var(--PrimaryLight, rgba(237, 248, 240, 1));
+`;
+
+const UserInitials = styled.div`
+  color: var(--Primary, rgba(37, 129, 65, 1));
+  font-family: Arial;
+  font-size: 0.88rem;
+  font-weight: 400;
+  line-height: 1.25rem;
+  letter-spacing: 0rem;
+  text-align: left;
+`;
+
+const UserNameAndRole = styled.div`
+  display: flex;
+  flex-direction: column;
+  .username {
+    color: var(--Black, rgba(31, 31, 31, 1));
+    font-size: 0.88rem;
+    font-weight: 400;
+    line-height: 1.25rem;
+    letter-spacing: 0rem;
+    text-align: left;
+  }
+  .role {
+    color: var(--GreyDark, rgba(74, 85, 101, 1));
+    font-size: 0.75rem;
+    font-weight: 400;
+    line-height: 1rem;
+    letter-spacing: 0rem;
+    text-align: left;
+  }
+`;
+
+const DownButton = styled.button`
+  background-image: url('images/Down.svg');
+  width: 1rem;
+  height: 1rem;
+  background-repeat: no-repeat;
+  background-size: cover;
+  border: none;
+  cursor: pointer;
+  transition: transform 0.2s ease;
+  transform: ${(props) => (props.$isOpen ? 'rotate(180deg)' : 'rotate(0deg)')};
+
+  &:hover {
+    opacity: 0.7;
+  }
+`;
+
+const DropdownMenu = styled.div`
+  position: absolute;
+  top: 100%;
+  right: 0;
+  margin-top: 0.5rem;
+  background: rgba(255, 255, 255, 1);
+  border: 0.0625rem solid var(--Stroke, rgba(0, 0, 0, 0.1));
+  border-radius: 0.5rem;
+  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
+  z-index: 1000;
+  min-width: 8rem;
+  overflow: hidden;
+`;
+
+const LogoutButton = styled.button`
+  width: 100%;
+  padding: 0.75rem 1rem;
+  border: none;
+  background: transparent;
+  color: var(--Black, rgba(31, 31, 31, 1));
+  font-size: 0.88rem;
+  font-weight: 400;
+  text-align: left;
+  cursor: pointer;
+
+  &:hover {
+    background: var(--PrimaryLight, #f8eded);
+    color: var(--Primary, #812525);
+  }
+`;

web/src/components/HeaderMenu/HeaderSwitch.jsx

@@ -0,0 +1,119 @@
+import { createPortal } from 'react-dom';
+import { useLocation } from 'react-router-dom';
+import { NavLink } from 'react-router-dom';
+import styled from '@emotion/styled';
+import { TasksSvg, AdminPanelSvg, DictSvg } from '../common/icons/icons';
+import { useAuth } from '../../app/context/AuthProvider';
+import { ROLES_NAME_ID } from '../../constants';
+
+const Switch = styled.div`
+  margin-left: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  height: 2rem;
+`;
+
+const Buttons = styled.div`
+  width: max-content;
+  height: 1rem;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: 1rem;
+`;
+
+const StyledNavLink = styled(NavLink)`
+  display: flex;
+  gap: 0.625rem;
+  align-items: center;
+  border-radius: 0.5rem;
+  padding: 0rem 0.75rem;
+  cursor: pointer;
+  height: 2rem;
+
+  .img {
+    svg {
+      width: 1rem;
+      height: 1rem;
+    }
+  }
+
+  &.active {
+    background-color: #f9fafb;
+    span {
+      color: #258141;
+    }
+  }
+`;
+
+export function HeaderSwitch() {
+  const { user } = useAuth();
+  const location = useLocation();
+  const formsTasksPaths = ['/tasks', '/forms'];
+  const adminPathsPrefix = '/admin_panel';
+  const dictPaths = '/dicts-navigator';
+
+  if (!user) return;
+
+  const portalContent = (
+    <Switch>
+      <Buttons>
+        <StyledNavLink
+          to="/tasks"
+          className={
+            formsTasksPaths.includes(location.pathname) ? 'active' : ''
+          }
+        >
+          <div className="img">
+            <TasksSvg
+              fill={
+                formsTasksPaths.includes(location.pathname)
+                  ? '#258141'
+                  : '#99A1AF'
+              }
+            ></TasksSvg>
+          </div>
+          <span>Задачи и формы</span>
+        </StyledNavLink>
+        {user.role_id === ROLES_NAME_ID.admin && (
+          <StyledNavLink
+            to="/admin_panel/users"
+            className={
+              location.pathname.startsWith(adminPathsPrefix) ? 'active' : ''
+            }
+          >
+            <div className="img">
+              <AdminPanelSvg
+                fill={
+                  location.pathname.startsWith(adminPathsPrefix)
+                    ? '#258141'
+                    : '#99A1AF'
+                }
+              />
+            </div>
+            <span>Администрирование</span>
+          </StyledNavLink>
+        )}
+        <StyledNavLink
+          to="/dicts-navigator"
+          className={location.pathname.startsWith(dictPaths) ? 'active' : ''}
+        >
+          <div className="img">
+            <DictSvg
+              fill={
+                location.pathname.startsWith(dictPaths) ? '#258141' : '#99A1AF'
+              }
+            />
+          </div>
+          <span>Справочники</span>
+        </StyledNavLink>
+      </Buttons>
+    </Switch>
+  );
+  const targetElement = document.getElementById('TableInfo');
+  if (targetElement) {
+    return createPortal(portalContent, targetElement);
+  }
+}

web/src/components/RealtimeTable/Cell/Cell/Cell.jsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import { useMemo } from 'react';
+import styled from '@emotion/styled';
+
+const ContainerForText = styled.span`
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  overflow: hidden;
+  white-space: pre-wrap;
+`;
+
+// Функция для подсветки текста
+const highlightText = (text, searchQuery) => {
+  if (!searchQuery || !text) return text;
+
+  // Экранируем спецсимволы в поисковом запросе
+  const escapedQuery = searchQuery.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  const regex = new RegExp(`(${escapedQuery})`, 'gi');
+
+  const parts = text.split(regex);
+
+  return parts.map((part, index) =>
+    regex.test(part) ? (
+      <mark
+        key={index}
+        style={{
+          backgroundColor: '#ffeb3b',
+          color: '#000',
+          fontWeight: 'bold',
+          padding: '0 2px',
+          borderRadius: '2px',
+        }}
+      >
+        {part}
+      </mark>
+    ) : (
+      part
+    ),
+  );
+};
+
+const Cell = React.memo(({ cell, onClick, globalFilter, color }) => {
+  const cellValue = cell.getValue();
+  const textValue = String(cellValue || '');
+
+  // Подсвечиваем текст с учетом поискового запроса
+  const highlightedContent = useMemo(() => {
+    return highlightText(textValue, globalFilter);
+  }, [textValue, globalFilter]);
+
+  return (
+    <div
+      className="cell"
+      style={{
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        boxSizing: 'border-box',
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        border: '2px solid transparent',
+        padding: '8px',
+        backgroundColor: color,
+      }}
+      onClick={onClick}
+    >
+      <ContainerForText>{highlightedContent}</ContainerForText>
+    </div>
+  );
+});
+
+export default Cell;

web/src/components/RealtimeTable/Cell/Cell/TooltipBox.jsx

@@ -0,0 +1,250 @@
+import { useState, useRef, useEffect } from 'react';
+import { Box, Chip, Divider, styled, alpha, Stack } from '@mui/material';
+
+import { StageInfoForTooltip } from '../../../Stages/StageInfoForTooltip';
+
+const TooltipContainer = styled(Box, {
+  shouldForwardProp: (prop) => prop !== 'left' && prop !== 'translateY',
+})(({ theme, left, translateY }) => ({
+  position: 'absolute',
+  left: `${left}px`,
+  transform: `translateY(${translateY}px)`,
+  top: '3rem',
+  border: `1px solid ${theme.palette.divider}`,
+  borderRadius: '1rem',
+  padding: '1.25rem',
+  width: '22rem',
+  boxShadow: theme.shadows[2],
+  zIndex: theme.zIndex.tooltip,
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '1rem',
+  background: 'white',
+  alignContent: 'center',
+}));
+
+const SectionTitle = styled(Box)(({ theme }) => ({
+  color: theme.palette.text.primary,
+  fontWeight: 600,
+  fontSize: '0.813rem',
+  lineHeight: 1.2,
+}));
+
+const TypeChip = styled(Chip, {
+  shouldForwardProp: (prop) => prop !== 'chipType',
+})(({ theme, chipType }) => {
+  const typeColors = {
+    formula: {
+      bg: alpha(theme.palette.primary.main, 0.1),
+      color: theme.palette.primary.main,
+      border: alpha(theme.palette.primary.main, 0.3),
+    },
+    number: {
+      bg: alpha(theme.palette.success.main, 0.1),
+      color: theme.palette.success.main,
+      border: alpha(theme.palette.success.main, 0.3),
+    },
+    string: {
+      bg: alpha(theme.palette.warning.main, 0.1),
+      color: theme.palette.warning.dark,
+      border: alpha(theme.palette.warning.main, 0.3),
+    },
+    numeric: {
+      bg: alpha(theme.palette.success.main, 0.1),
+      color: theme.palette.success.main,
+      border: alpha(theme.palette.success.main, 0.3),
+    },
+    text: {
+      bg: alpha(theme.palette.warning.main, 0.1),
+      color: theme.palette.warning.dark,
+      border: alpha(theme.palette.warning.main, 0.3),
+    },
+    default: {
+      bg: theme.palette.grey[100],
+      color: theme.palette.grey[700],
+      border: theme.palette.divider,
+    },
+  };
+
+  const colors = typeColors[chipType] || typeColors.default;
+
+  return {
+    backgroundColor: colors.bg,
+    color: colors.color,
+    border: `1px solid ${colors.border}`,
+    borderRadius: theme.shape.borderRadius,
+    height: '1.5rem',
+    fontSize: '0.688rem',
+    fontWeight: 500,
+    '& .MuiChip-label': {
+      paddingLeft: theme.spacing(0.5),
+      paddingRight: theme.spacing(0.5),
+      paddingTop: 0,
+      paddingBottom: 0,
+    },
+  };
+});
+
+const StatusChip = styled(Chip, {
+  shouldForwardProp: (prop) => prop !== 'danger' || prop !== 'warning',
+})(({ theme, danger, warning }) => ({
+  backgroundColor: danger
+    ? alpha(theme.palette.error.main, 0.1)
+    : warning
+      ? alpha(theme.palette.warning.main, 0.1)
+      : alpha(theme.palette.success.main, 0.1),
+  color: danger
+    ? theme.palette.error.main
+    : warning
+      ? theme.palette.warning.color
+      : theme.palette.success.main,
+  border: `1px solid ${
+    danger
+      ? alpha(theme.palette.error.main, 0.3)
+      : warning
+        ? alpha(theme.palette.warning.main, 0.3)
+        : alpha(theme.palette.success.main, 0.3)
+  }`,
+  borderRadius: theme.shape.borderRadius,
+  height: '1.5rem',
+  fontSize: '0.688rem',
+  fontWeight: 500,
+  width: 'max-content',
+  '& .MuiChip-label': {
+    paddingLeft: theme.spacing(0.5),
+    paddingRight: theme.spacing(0.5),
+    paddingTop: 0,
+    paddingBottom: 0,
+  },
+}));
+
+export const TooltipBox = ({
+  left,
+  translateY,
+  formula,
+  type = 'string',
+  stageData = [],
+  blocked = false,
+  editor = null,
+}) => {
+  const [flipPosition, setFlipPosition] = useState(false);
+  const [width, setWidth] = useState(false);
+  const tooltipRef = useRef(null);
+
+  useEffect(() => {
+    const checkIfNeedsFlip = () => {
+      if (!tooltipRef.current) return;
+
+      const tooltipRect = tooltipRef.current.getBoundingClientRect();
+      const actualWidth = tooltipRef.current.clientWidth;
+      const viewportWidth = window.innerWidth;
+
+      // Если тултип выходит за правый край экрана
+      if (tooltipRect.right > viewportWidth - 10) {
+        // 10px отступ
+        setFlipPosition(true);
+        setWidth(actualWidth);
+      } else {
+        setFlipPosition(false);
+      }
+    };
+
+    // Проверяем после отрисовки
+    setTimeout(checkIfNeedsFlip, 0);
+    window.addEventListener('resize', checkIfNeedsFlip);
+
+    return () => {
+      window.removeEventListener('resize', checkIfNeedsFlip);
+    };
+  }, [left, translateY]);
+
+  const getTypeDisplayName = (type) => {
+    const typeMap = {
+      formula: 'Формула',
+      numeric: 'Число',
+      text: 'Текст',
+    };
+    return typeMap[type] || 'Другое';
+  };
+
+  const isBlocked = blocked;
+
+  return (
+    <TooltipContainer
+      left={left}
+      translateY={translateY}
+      ref={tooltipRef}
+      sx={{
+        ...(flipPosition && {
+          left: left - width + 110,
+        }),
+      }}
+    >
+      <Box display="flex" flexDirection="column" gap="0.375rem">
+        <SectionTitle>Свойства ячейки</SectionTitle>
+        <Stack direction="row" spacing={0.5} flexWrap="wrap" useFlexGap>
+          <TypeChip
+            label={getTypeDisplayName(type)}
+            chipType={type}
+            size="small"
+          />
+          <StatusChip
+            label={isBlocked ? 'Заблокирована' : 'Редактируемая'}
+            danger={isBlocked}
+            size="small"
+          />
+        </Stack>
+        {editor && (
+          <StatusChip
+            label={'Редактируется другим пользователем'}
+            warning={true}
+            size="small"
+          />
+        )}
+      </Box>
+
+      {/* Формула */}
+      {formula && (
+        <>
+          <Divider sx={{ marginTop: '0 !important' }} />
+          <Stack
+            spacing={0.75}
+            flexDirection={'row'}
+            flexWrap="wrap"
+            gap={'.5rem'}
+            margin="0 !important"
+          >
+            <Box
+              component="span"
+              sx={{
+                fontWeight: '400',
+                fontSize: '0.88rem',
+                lineHeight: '143%',
+                color: '#4a5565',
+              }}
+            >
+              Формула&nbsp;&nbsp;–
+            </Box>
+            <Box
+              component="span"
+              sx={{
+                fontWeight: '400',
+                fontSize: '0.88rem',
+                lineHeight: '143%',
+                margin: '0 !important',
+              }}
+            >
+              {formula}
+            </Box>
+          </Stack>
+        </>
+      )}
+
+      {stageData.length > 0 && (
+        <>
+          <StageInfoForTooltip stageData={stageData} />
+        </>
+      )}
+    </TooltipContainer>
+  );
+};

web/src/components/RealtimeTable/Cell/EditCell/EditCell.jsx

@@ -0,0 +1,82 @@
+import { useEffect, useRef, useLayoutEffect, useState } from 'react';
+
+const EditCell = ({ refCell, onChange, disabled, value }) => {
+  const [curValue, setCurValue] = useState(value);
+  const trFrag = refCell.current.offsetParent.offsetParent;
+  const tdFrag = refCell.current.offsetParent;
+  const left = tdFrag.offsetLeft;
+  const width = refCell.current.offsetParent.offsetWidth;
+
+  const translateY = 'translateY(' + trFrag.offsetTop + 'px)';
+
+  function useAutoResize(value) {
+    const ref = useRef(null);
+
+    useLayoutEffect(() => {
+      const el = ref.current;
+      if (!el) return;
+
+      el.style.height = 'auto';
+      el.style.minHeight = '3rem';
+      el.style.height = el.scrollHeight + 'px';
+      el.style.maxHeight = '180px';
+    }, [value]);
+
+    return ref;
+  }
+
+  const ref = useAutoResize(value);
+
+  useEffect(() => {
+    if (ref.current && !disabled) {
+      ref.current.focus();
+      ref.current.setSelectionRange(
+        ref.current.value.length,
+        ref.current.value.length,
+      );
+    }
+  }, [disabled, ref]);
+
+  const handleChange = () => {
+    onChange?.(curValue);
+  };
+
+  const handleChangeValue = (event) => {
+    const input = event.target.value;
+    setCurValue(input);
+  };
+
+  return (
+    <tr>
+      <td>
+        <div
+          key="blockForEdit"
+          style={{
+            position: 'absolute',
+            left: left,
+            zIndex: 12,
+            width: width,
+            transform: translateY,
+            top: 0,
+          }}
+        >
+          <textarea
+            ref={ref}
+            disabled={disabled}
+            style={{
+              width: '100%',
+              height: 'auto',
+              fieldSizing: 'content',
+              fontSize: 'inherit',
+            }}
+            onChange={handleChangeValue}
+            value={curValue}
+            onBlur={handleChange}
+          />
+        </div>
+      </td>
+    </tr>
+  );
+};
+
+export default EditCell;

web/src/components/RealtimeTable/RealtimeTable.jsx

@@ -0,0 +1,208 @@
+import React, { useState, useMemo, useRef, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import {
+  useMaterialReactTable,
+  MaterialReactTable,
+} from 'material-react-table';
+
+import useRealtimeData from './useRealtimeData';
+import { getTableColumns } from './tableColumns';
+import { Cell, EditCell } from './index';
+import { TableHead } from './TableHead/TableHead';
+import SettingsPanel from './SettingPanel/SettingPanel';
+
+import { useColumnSettings } from './hooks/useColumnSettings';
+import { useTableScale } from './hooks/useTableScale';
+import { useHeaderPortal } from './hooks/useHeaderPortal';
+import {
+  BASE_TABLE_CONFIG,
+  getTableHeadCellStyles,
+  getTablePaperStyles,
+} from './constants/tableConfig';
+
+const RealtimeTable = ({ form, sheetName }) => {
+  const { data, setData } = useRealtimeData(form, sheetName);
+  const [globalFilter, setGlobalFilter] = useState('');
+  const [showColumnFilters, setShowColumnFilters] = useState(false);
+  const [selectedColumn, setSelectedColumn] = useState();
+
+  const columnVirtualizerInstanceRef = useRef(null);
+
+  const {
+    columnSizing,
+    columnPinning,
+    columnVisibility,
+    setColumnSizing,
+    setColumnPinning,
+    handlePinColumn,
+    handleUnpinColumn,
+    handleSetColumnWidth,
+    handleToggleColumnVisibility,
+  } = useColumnSettings();
+
+  const { sizeMult, setSizeMult, tableScaleStyle, tableWrapperStyle } =
+    useTableScale();
+  const { headerPortalRef, containerRef } = useHeaderPortal();
+
+  const [columnsConfig, setColumnsConfig] = useState(null);
+
+  useEffect(() => {
+    const loadConfig = async () => {
+      try {
+        const { config } = await import(`./constants/${form}/${sheetName}.js`);
+
+        // Make sure config.configData has the expected structure
+        setColumnsConfig(config.config);
+      } catch (error) {
+        console.error(`Failed to load data for ${form}/${sheetName}:`, error);
+        setColumnsConfig({ columns: [], colors: {} });
+      }
+    };
+
+    loadConfig();
+  }, [form, sheetName]);
+
+  const columns = useMemo(() => {
+    if (!columnsConfig || !columnsConfig.columns) return [];
+    try {
+      return getTableColumns({ Cell, EditCell, columnsConfig });
+    } catch (error) {
+      console.error('Error creating columns:', error);
+      return [];
+    }
+  }, [columnsConfig]);
+
+  // Обработчик сохранения ячейки
+  const handleSaveCell = async (cell, value) => {
+    const updatedData = [...data];
+    updatedData[cell.row.index][cell.column.id] = value;
+    setData(updatedData);
+  };
+
+  // Конфигурация таблицы
+  const tableConfig = useMemo(
+    () => ({
+      ...BASE_TABLE_CONFIG,
+      columns,
+      data,
+      // data: [],
+      columnVirtualizerInstanceRef,
+      enableRowVirtualization: true,
+      onColumnSizingChange: setColumnSizing,
+      onColumnPinningChange: setColumnPinning,
+      onGlobalFilterChange: setGlobalFilter,
+      state: {
+        columnSizing,
+        columnPinning,
+        columnVisibility,
+        globalFilter,
+        showColumnFilters,
+      },
+      initialState: {
+        // expanded: true,
+      },
+      muiTableHeadCellProps: ({ column }) => ({
+        sx: {
+          width: column.getSize(),
+          minWidth: column.getSize(),
+          maxWidth: column.getSize(),
+          boxSizing: 'border-box',
+        },
+      }),
+      muiTableBodyCellProps: getTableHeadCellStyles,
+      muiTableHeadProps: {
+        sx: {
+          display: 'table-header-group',
+          height: '1px',
+          minHeight: '1px',
+          maxHeight: '1px',
+          opacity: 0,
+          pointerEvents: 'none',
+          backgroundColor: 'transparent',
+          '& th': {
+            height: '1px',
+            minHeight: '1px',
+            maxHeight: '1px',
+          },
+        },
+      },
+      muiTablePaperProps: getTablePaperStyles(),
+      muiTableContainerProps: {
+        ref: containerRef,
+        sx: {
+          overflowX: 'auto',
+          overflowY: 'auto',
+          position: 'relative',
+          contain: 'layout',
+          minHeight: '100%',
+          '& .MuiTable-root': { position: 'relative' },
+        },
+      },
+      muiTableHeadCellFilterTextFieldProps: {
+        placeholder: 'Поиск...',
+        size: 'small',
+      },
+    }),
+    [
+      columns,
+      data,
+      setColumnSizing,
+      setColumnPinning,
+      columnSizing,
+      columnPinning,
+      columnVisibility,
+      globalFilter,
+      showColumnFilters,
+      containerRef,
+    ],
+  );
+
+  const table = useMaterialReactTable(tableConfig);
+
+  return (
+    <>
+      <SettingsPanel
+        selectedColumn={selectedColumn}
+        table={table}
+        onPinColumn={handlePinColumn}
+        onUnpinColumn={handleUnpinColumn}
+        onToggleColumnVisibility={handleToggleColumnVisibility}
+        columnVisibility={columnVisibility}
+        onChangeSizeMult={setSizeMult}
+        onGlobalFilterChange={setGlobalFilter}
+        sizeMult={sizeMult}
+        onChangeShowColumnFilters={setShowColumnFilters}
+      />
+
+      <div style={tableWrapperStyle}>
+        <div style={tableScaleStyle}>
+          <div
+            style={{
+              position: 'relative',
+              width: '100%',
+              flex: 1,
+              minHeight: 0,
+              height: '100%',
+            }}
+          >
+            <MaterialReactTable table={table} />
+
+            {headerPortalRef.current &&
+              createPortal(
+                <TableHead
+                  table={table}
+                  style={{ zIndex: (theme) => theme.zIndex.modal - 1 }}
+                  onHeaderSelect={setSelectedColumn}
+                  selectHeader={selectedColumn}
+                  onChangeWidth={handleSetColumnWidth}
+                />,
+                headerPortalRef.current,
+              )}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default React.memo(RealtimeTable);

web/src/components/RealtimeTable/SettingPanel/CollapsibleTree.jsx

@@ -0,0 +1,254 @@
+import { useState, useMemo, useEffect } from 'react';
+import {
+  Box,
+  Checkbox,
+  Typography,
+  TextField,
+  Popover,
+  InputAdornment,
+} from '@mui/material';
+import { ExpandMore, ChevronRight, ArrowDropDown } from '@mui/icons-material';
+import { SimpleTreeView, TreeItem } from '@mui/x-tree-view';
+import {
+  CheckBoxOutlineBlank,
+  CheckBox,
+  IndeterminateCheckBox,
+} from '@mui/icons-material';
+
+const CollapsibleTree = ({
+  columnTree,
+  placeholder = 'Скрыть столбцы',
+  selectedIds = [],
+  onSelectNode: onHideColumns,
+}) => {
+  const [expandedItems, setExpandedItems] = useState([]);
+  const [anchorEl, setAnchorEl] = useState(null);
+  const [selectedNodes, setSelectedNodes] = useState([]);
+
+  useEffect(() => {
+    setSelectedNodes(selectedIds);
+  }, [selectedIds]);
+
+  const handleExpandedItemsChange = (event, itemIds) => {
+    setExpandedItems(itemIds);
+  };
+
+  const handleSelectAll = (isSelected) => {
+    for (const col of columnTree) {
+      onHideColumns?.(col, !isSelected);
+    }
+  };
+
+  const getChildrenIds = (node) => {
+    const getLeafColumn = (col) => {
+      if (col.columns.length == 0) return [col];
+      if (col.columns.length > 0 && col.columns[0].columns.length == 0) {
+        return col.columns;
+      }
+      return col.columns.flatMap((childCol) => getLeafColumn(childCol));
+    };
+    return getLeafColumn(node).map((c) => c.id);
+  };
+
+  const isNodeChecked = (node) => {
+    const childrenIds = getChildrenIds(node);
+    const selectedChildren = childrenIds.filter((id) =>
+      selectedNodes.includes(id),
+    );
+
+    if (selectedChildren.length === 0) return false;
+    if (selectedChildren.length === childrenIds.length) return true;
+    return 'indeterminate';
+  };
+
+  const handleNodeCheck = (node, isSelected) => {
+    onHideColumns?.(node, !isSelected);
+  };
+
+  const getId = (column) => {
+    const getFullColumnPath = (column) => {
+      const ancestors = [];
+      let current = column;
+
+      while (current) {
+        ancestors.unshift(current.id);
+        current = current.parent;
+      }
+
+      return ancestors;
+    };
+    return getFullColumnPath(column).join('_');
+  };
+
+  const renderTree = (nodes) => {
+    if (!nodes || nodes.length === 0) return null;
+
+    return nodes.map((node) => {
+      const checkStatus = isNodeChecked(node);
+
+      return (
+        <TreeItem
+          key={node.id}
+          itemId={String(getId(node))}
+          label={
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+              <Checkbox
+                onClick={(e) => e.stopPropagation()}
+                checked={checkStatus === true}
+                indeterminate={checkStatus === 'indeterminate'}
+                onChange={() =>
+                  handleNodeCheck(
+                    node,
+                    checkStatus === 'indeterminate' ? true : !checkStatus,
+                  )
+                }
+                icon={<CheckBoxOutlineBlank />}
+                checkedIcon={<CheckBox />}
+                indeterminateIcon={<IndeterminateCheckBox />}
+              />
+              <Typography variant="body2">
+                {node.columnDef?.header || node.name || 'Без названия'}
+              </Typography>
+            </Box>
+          }
+        >
+          {node.columns && node.columns.length > 0 && renderTree(node.columns)}
+        </TreeItem>
+      );
+    });
+  };
+
+  const treeElements = useMemo(() => {
+    return columnTree ? renderTree(columnTree) : null;
+  }, [columnTree, selectedNodes]);
+
+  const handleOpen = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const selectedCount = selectedNodes.length;
+
+  const isAllSelected = () => {
+    if (!columnTree) return false;
+    let isSelect = true;
+    for (const col of columnTree) {
+      const isChecked = isNodeChecked(col);
+      isSelect = isChecked === 'indeterminate' ? false : isChecked && isSelect;
+    }
+    return isSelect;
+  };
+
+  const open = Boolean(anchorEl);
+  const id = open ? 'tree-popover' : undefined;
+
+  const getDisplayValue = () => {
+    if (selectedCount === 0) {
+      return '';
+    }
+    return `Скрыто столбцов: ${selectedCount}`;
+  };
+
+  return (
+    <>
+      <Box
+        sx={{
+          position: 'relative',
+          width: '25rem',
+        }}
+      >
+        <TextField
+          fullWidth
+          placeholder={placeholder}
+          value={getDisplayValue()}
+          onClick={handleOpen}
+          slotProps={{
+            input: {
+              readOnly: true,
+              endAdornment: (
+                <InputAdornment position="end">
+                  <ArrowDropDown
+                    sx={{
+                      transform: open ? 'rotate(180deg)' : 'none',
+                      transition: 'transform 0.2s',
+                    }}
+                  />
+                </InputAdornment>
+              ),
+            },
+          }}
+          sx={{
+            cursor: 'pointer',
+            height: '2.5rem',
+            padding: 0,
+            '& .MuiInputBase-root': {
+              cursor: 'pointer',
+              height: '2.5rem',
+            },
+            '& input': {
+              cursor: 'pointer',
+            },
+          }}
+        />
+      </Box>
+
+      <Popover
+        id={id}
+        open={open}
+        anchorEl={anchorEl}
+        onClose={handleClose}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'left',
+        }}
+        transformOrigin={{
+          vertical: 'top',
+          horizontal: 'left',
+        }}
+        PaperProps={{
+          sx: {
+            width: anchorEl ? anchorEl.clientWidth : 300,
+            maxHeight: 400,
+            mt: 1,
+            overflow: 'hidden',
+          },
+        }}
+      >
+        <Box sx={{ p: 1, borderBottom: '1px solid #e0e0e0' }}>
+          <Checkbox
+            checked={isAllSelected()}
+            indeterminate={selectedCount > 0 && !isAllSelected()}
+            onChange={(e) => handleSelectAll(e.target.checked)}
+            icon={<CheckBoxOutlineBlank />}
+            checkedIcon={<CheckBox />}
+            indeterminateIcon={<IndeterminateCheckBox />}
+          />
+          <Typography variant="body2" component="span" sx={{ ml: 1 }}>
+            Выбрать все
+          </Typography>
+        </Box>
+
+        <SimpleTreeView
+          expandedItems={expandedItems}
+          onExpandedItemsChange={handleExpandedItemsChange}
+          slots={{
+            collapseIcon: ExpandMore,
+            expandIcon: ChevronRight,
+          }}
+          sx={{
+            maxHeight: 350,
+            overflow: 'auto',
+            p: 1,
+          }}
+        >
+          {treeElements}
+        </SimpleTreeView>
+      </Popover>
+    </>
+  );
+};
+
+export default CollapsibleTree; 

web/src/components/RealtimeTable/SettingPanel/ColorPicker/ColorPalette.jsx

@@ -0,0 +1,63 @@
+import { Cancel } from '../../../common/icons/icons';
+import {
+  CloseButton,
+  ColorOption,
+  ColorsGrid,
+  PaletteContainer,
+  PaletteHeader,
+  PaletteTitle,
+} from './ColorPalette.style';
+
+const ColorPalette = ({ selectedColor, onColorSelect, onClose }) => {
+  const colors = [
+    '#FFFFFF',
+    '#C2D59A',
+    '#EAF0DD',
+    '#D7E3BC',
+    '#F9BE8E',
+    '#FDE9D8',
+    '#FBD4B4',
+    '#FFFF66',
+    '#FFFFCC',
+    '#FFFF99',
+    '#933634',
+    '#E5B7B6',
+    '#D89493',
+    '#95B4D6',
+    '#DAE5F1',
+    '#B7CCE4',
+    '#538DD4',
+    '#8DB3E2',
+    '#C5D8F0',
+  ];
+
+  return (
+    <PaletteContainer>
+      <PaletteHeader>
+        <PaletteTitle>Выберите цвет</PaletteTitle>
+        <CloseButton onClick={onClose} title="Закрыть">
+          ×
+        </CloseButton>
+      </PaletteHeader>
+
+      <ColorsGrid>
+        {colors.map((color, index) => (
+          <ColorOption
+            key={index}
+            color={color}
+            isWhite={color === '#FFFFFF'}
+            isSelected={color === selectedColor}
+            onClick={() => onColorSelect(color === '#FFFFFF' ? null : color)}
+            title={color === '#FFFFFF' ? 'Удалить заливку' : color}
+          >
+            {color === '#FFFFFF' && (
+              <Cancel style={{ pointerEvents: 'none', opacity: 0.4 }} />
+            )}
+          </ColorOption>
+        ))}
+      </ColorsGrid>
+    </PaletteContainer>
+  );
+};
+
+export default ColorPalette;

web/src/components/RealtimeTable/SettingPanel/ColorPicker/ColorPalette.style.jsx

@@ -0,0 +1,92 @@
+import styled from '@emotion/styled';
+
+export const PaletteContainer = styled.div`
+  position: absolute;
+  top: 100%;
+  left: 0;
+  margin-top: 8px;
+  padding: 16px;
+  background: white;
+  border: 1px solid #ddd;
+  border-radius: 12px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
+  z-index: 1000;
+  min-width: 220px;
+  animation: fadeIn 0.2s ease;
+
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+      transform: translateY(-10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+`;
+
+export const PaletteHeader = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #eee;
+`;
+
+export const PaletteTitle = styled.span`
+  font-size: 14px;
+  font-weight: 600;
+  color: #333;
+`;
+
+export const CloseButton = styled.button`
+  background: none;
+  border: none;
+  font-size: 18px;
+  cursor: pointer;
+  color: #999;
+  padding: 0;
+  width: 24px;
+  height: 24px;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease;
+
+  &:hover {
+    background-color: #f5f5f5;
+    color: #666;
+  }
+`;
+
+export const ColorsGrid = styled.div`
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 8px;
+  margin-bottom: 12px;
+`;
+
+export const ColorOption = styled.div`
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  border: 2px solid
+    ${(props) =>
+      props.isSelected ? '#333' : props.isWhite ? '#ddd' : 'transparent'};
+  background-color: ${(props) => props.color};
+  box-shadow: ${(props) =>
+    props.isSelected ? '0 0 0 2px white, 0 0 0 4px #333' : 'none'};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &:hover {
+    transform: scale(1.1);
+    border-color: #333;
+  }
+`;

web/src/components/RealtimeTable/SettingPanel/ColorPicker/ColorPickerButton.jsx

@@ -0,0 +1,92 @@
+import { useState } from 'react';
+import { Box, Tooltip } from '@mui/material';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import { Palette } from '../../../common/icons/icons';
+import ColorPalette from './ColorPalette';
+
+export const ColorPickerButton = ({
+  onColorApply,
+  defaultColor = '#C2D59A',
+}) => {
+  const [isPaletteOpen, setIsPaletteOpen] = useState(false);
+  const [color, setColor] = useState(defaultColor);
+
+  const handleColorSelect = (selectedColor) => {
+    setColor(selectedColor);
+    setIsPaletteOpen(false);
+  };
+
+  const handleApplyColor = () => {
+    if (onColorApply) {
+      onColorApply(color);
+    }
+  };
+
+  return (
+    <div style={{ position: 'relative', height: '100%' }}>
+      <Tooltip title="Изменить цвет">
+        <Box
+          sx={{
+            display: 'inline-flex',
+            border: '1px solid rgba(0, 0, 0, 0.1)',
+            borderRadius: '0.5rem',
+            overflow: 'hidden',
+            alignItems: 'stretch',
+            height: '100%',
+          }}
+        >
+          <Box
+            onClick={handleApplyColor}
+            sx={{
+              width: '2.6rem',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              cursor: 'pointer',
+              backgroundColor: 'white',
+              '&:hover': {
+                backgroundColor: 'rgba(0, 0, 0, 0.04)',
+              },
+            }}
+          >
+            <Palette />
+          </Box>
+          <Box
+            onClick={() => {
+              setIsPaletteOpen(true);
+            }}
+            sx={{
+              flex: 1,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              cursor: 'pointer',
+              backgroundColor:
+                color === '#FFFFFF' || color === '#ffffff' || color === null
+                  ? 'white'
+                  : color || '#C2D59A',
+              borderLeft: '1px solid rgba(0, 0, 0, 0.1)',
+              padding: '0.5rem',
+              width: '1.4rem',
+              boxSizing: 'border-box',
+              '&:hover': {
+                opacity: 0.9,
+              },
+            }}
+          >
+            <KeyboardArrowDownIcon
+              sx={{ color: '#4A5565', fontSize: '1.25rem' }}
+            />
+          </Box>
+        </Box>
+      </Tooltip>
+
+      {isPaletteOpen && (
+        <ColorPalette
+          onColorSelect={handleColorSelect}
+          onClose={() => setIsPaletteOpen(false)}
+        />
+      )}
+    </div>
+  );
+};

web/src/components/RealtimeTable/SettingPanel/GroupByObject/GroupByObject.jsx

@@ -0,0 +1,13 @@
+import { Stack } from '@mui/material';
+import { GroupByObjectTitle } from './GroupByObject.style';
+
+export const GroupByObject = ({ title, children }) => {
+  return (
+    <>
+      <GroupByObjectTitle>{title}</GroupByObjectTitle>
+      <Stack direction="row" sx={{ gap: '.75rem' }}>
+        {children}
+      </Stack>
+    </>
+  );
+};

web/src/components/RealtimeTable/SettingPanel/GroupByObject/GroupByObject.style.jsx

@@ -0,0 +1,10 @@
+import styled from '@emotion/styled';
+
+export const GroupByObjectTitle = styled.span`
+  color: var(--GreyDark, rgba(74, 85, 101, 1));
+  font-size: 0.81rem;
+  font-weight: 400;
+  line-height: 1.25rem;
+  letter-spacing: 0rem;
+  text-align: left;
+`;

web/src/components/RealtimeTable/SettingPanel/SettingPanel.jsx

@@ -0,0 +1,161 @@
+import { useEffect, useState } from 'react';
+import { toast } from 'react-toastify';
+import { Panel } from './SettingPanel.style';
+import { Divider, IconButton, Stack, Tooltip } from '@mui/material';
+
+import { GroupByObject } from './GroupByObject/GroupByObject';
+import { ColorPickerButton } from './ColorPicker/ColorPickerButton';
+import {
+  AddLine,
+  FormulaSettingPanel,
+  Minus,
+  Pin,
+  Plus,
+  RemoveLine,
+  Search,
+} from '../../common/icons/icons';
+import CollapsibleTree from './CollapsibleTree';
+import ZoomSlider from './ZoomSlider';
+import SearchComponent from '../../common/SearchComponent';
+
+const SettingPanel = ({
+  selectedColumn,
+  table,
+  onPinColumn,
+  onUnpinColumn,
+  onToggleColumnVisibility,
+  columnVisibility,
+  onChangeSizeMult,
+  onGlobalFilterChange,
+  sizeMult,
+  onChangeShowColumnFilters,
+}) => {
+  const [isPinned, setIsPinned] = useState(false);
+  const [columnTree, setColumnTree] = useState();
+  const [selectedColumnIds, setSelectedColumnIds] = useState();
+  const [showColumnFilters, setShowColumnFilters] = useState(false);
+
+  useEffect(() => {
+    if (!table) return;
+    setColumnTree(table.getAllColumns());
+    setShowColumnFilters(table.getState().showColumnFilters);
+  }, [table]);
+
+  useEffect(() => {
+    if (!selectedColumn) return;
+    const pinningColumn = table.getState().columnPinning.left;
+    const isPinned = pinningColumn.includes(selectedColumn.id);
+    setIsPinned(isPinned);
+  }, [selectedColumn, table]);
+
+  useEffect(() => {
+    setSelectedColumnIds(
+      Object.keys(columnVisibility).filter((key) => !columnVisibility[key]),
+    );
+  }, [columnVisibility]);
+
+  const { addRow, addColorForCells, addFormulaForCells, deleteFormula } = {};
+
+  const handleChangeShowColumnFilters = () => {
+    const show = table.getState().showColumnFilters;
+    setShowColumnFilters(!show);
+    onChangeShowColumnFilters(!show);
+  };
+
+  const handleClickAddFormula = () => {};
+
+  const handleClickDeleteFormula = () => {};
+
+  return (
+    <>
+      <Panel>
+        <Stack direction="row" sx={{gap:'1.25rem'}}>
+          <GroupByObject title="Отображение">
+            <ColorPickerButton onColorApply={addColorForCells} />
+
+            <Tooltip title="Закрепить область">
+              <IconButton
+                variant="outlined"
+                data-active={isPinned}
+                onClick={() =>
+                  isPinned
+                    ? onUnpinColumn?.(selectedColumn.id)
+                    : onPinColumn?.(selectedColumn.id)
+                }
+              >
+                <Pin />
+              </IconButton>
+            </Tooltip>
+          </GroupByObject>
+
+          <Divider orientation="vertical" flexItem />
+
+          <GroupByObject title="Строки">
+            <Tooltip title="Добавить строку">
+              <IconButton onClick={addRow} variant="outlined">
+                <Plus />
+                <AddLine />
+              </IconButton>
+            </Tooltip>
+
+            <Tooltip title="Удалить строку">
+              <IconButton variant="outlined">
+                <Minus />
+                <RemoveLine />
+              </IconButton>
+            </Tooltip>
+          </GroupByObject>
+
+          <Divider orientation="vertical" flexItem />
+
+          <GroupByObject title="Формулы">
+            <Tooltip title="Добавить формулу">
+              <IconButton onClick={handleClickAddFormula} variant="outlined">
+                <FormulaSettingPanel />
+              </IconButton>
+            </Tooltip>
+
+            <Tooltip title="Удалить формулу">
+              <IconButton onClick={handleClickDeleteFormula} variant="outlined">
+                <Minus />
+                <FormulaSettingPanel />
+              </IconButton>
+            </Tooltip>
+          </GroupByObject>
+          <Divider orientation="vertical" flexItem />
+          <GroupByObject title="Столбцы">
+            {columnTree ? (
+              <CollapsibleTree
+                columnTree={columnTree}
+                onSelectNode={onToggleColumnVisibility}
+                selectedIds={selectedColumnIds}
+              />
+            ) : (
+              ''
+            )}
+          </GroupByObject>
+          <Divider orientation="vertical" flexItem />
+          <ZoomSlider onChange={onChangeSizeMult} curScale={sizeMult} />
+          <Divider orientation="vertical" flexItem />
+          <GroupByObject title="Поиск">
+            <SearchComponent onChange={onGlobalFilterChange} height="2.5rem" />
+            <Tooltip title="Поиск по колонкам">
+              <IconButton
+                variant="outlined"
+                color="success"
+                data-active={showColumnFilters}
+                onClick={handleChangeShowColumnFilters}
+              >
+                <Search />
+              </IconButton>
+            </Tooltip>
+          </GroupByObject>
+
+          <Divider orientation="vertical" flexItem />
+        </Stack>
+      </Panel>
+    </>
+  );
+};
+
+export default SettingPanel;

web/src/components/RealtimeTable/SettingPanel/SettingPanel.style.jsx

@@ -0,0 +1,134 @@
+import styled from '@emotion/styled';
+import { IconButton } from '@mui/material';
+
+export const Panel = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding: 0.75rem 1.5rem 0.75rem 1.5rem;
+  border-bottom: 0.0625rem solid var(--Stroke, rgba(0, 0, 0, 0.1));
+  background: var(--White, rgba(255, 255, 255, 1));
+  align-items: center; /* Изменено с 'end' на 'center' для вертикального выравнивания */
+
+  div {
+    margin: 0 !important;
+  }
+`;
+
+export const SettingButton = styled.button`
+  position: relative;
+  padding: 0.5rem;
+  box-sizing: border-box;
+  border: 0.0625rem solid var(--Stroke, rgba(0, 0, 0, 0.1));
+  border-radius: 0.5rem;
+  background: var(--White, rgba(255, 255, 255, 1));
+  display: flex;
+  gap: 0.375rem;
+  align-items: center;
+  height: 2.5rem; /* Фиксированная высота */
+  min-height: 2.5rem;
+
+  div {
+    background-repeat: no-repeat;
+    background-size: cover;
+  }
+
+  &.active {
+    border: 0.0625rem solid var(--Primary, rgba(37, 129, 65, 1));
+    background: var(--PrimaryLight, rgba(237, 248, 240, 1));
+  }
+`;
+
+export const DraftBadge = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.25rem 0.75rem;
+  height: 2.5rem; /* Изменено с 1.5rem на 2.5rem для единой высоты */
+  min-height: 2.5rem;
+  background-color: #fff3cd;
+  border: 0.0625rem solid #ffeaa7;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  transition: all 0.2s;
+  box-sizing: border-box;
+
+  span {
+    color: #856404;
+    font-size: 0.75rem;
+    font-weight: 500;
+    line-height: 1rem;
+  }
+
+  &:hover {
+    background-color: #ffeaa7;
+    border-color: #fdcb6e;
+  }
+`;
+
+export const ForToggle = styled.div`
+  display: flex;
+  gap: 0.5rem;
+  align-items: center; /* Добавлено для вертикального выравнивания */
+  height: 2.5rem; /* Фиксированная высота */
+
+  span {
+    color: var(--GreyDark, rgba(74, 85, 101, 1));
+    font-size: 0.875rem; /* 14px = 0.875rem */
+    font-weight: 400;
+    line-height: 1.25rem;
+    letter-spacing: 0rem;
+    text-align: left;
+  }
+`;
+
+export const ToggleContainer = styled.div`
+  width: 2.25rem;
+  height: 1.25rem;
+  background-color: ${(props) => (props.isOn ? '#4CAF50' : '#f0f0f0')};
+  border: 0.0625rem solid ${(props) => (props.isOn ? '#4CAF50' : '#d0d0d0')};
+  border-radius: 0.625rem;
+  position: relative;
+  cursor: pointer;
+  transition: background-color 0.3s;
+`;
+
+export const ToggleButton = styled.div`
+  width: 0.875rem;
+  height: 0.875rem;
+  background-color: white;
+  border-radius: 50%;
+  position: absolute;
+  top: 50%;
+  left: 0.1875rem;
+  transform: ${(props) =>
+    props.isOn ? 'translateX(1rem) translateY(-50%)' : 'translateY(-50%)'};
+  transition: transform 0.3s;
+  box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.2);
+`;
+
+export const IconButtonStyled = styled(IconButton)`
+  height: 2.5rem; /* Фиксированная высота */
+  width: 2.5rem; /* Фиксированная ширина для квадратных кнопок */
+  min-height: 2.5rem;
+  min-width: 2.5rem;
+
+  &:disabled {
+    background-color: #e0e0e0;
+    color: #9e9e9e;
+    cursor: not-allowed;
+
+    &:hover {
+      background-color: #e0e0e0;
+    }
+  }
+`;
+
+// Дополнительный компонент для обертки GroupByObject, если нужно
+export const GroupByObjectWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  height: 2.5rem;
+  min-height: 2.5rem;
+`;

web/src/components/RealtimeTable/SettingPanel/ZoomSlider.jsx

@@ -0,0 +1,32 @@
+import React, { useState } from 'react';
+import { Box, Slider } from '@mui/material';
+
+const ZoomSlider = ({ onChange, width = 200, curScale }) => {
+  const [scale, setScale] = useState(curScale);
+
+  const handleChange = (event, newValue) => {
+    setScale(newValue);
+    if (onChange) onChange(newValue);
+  };
+
+  return (
+    <Box sx={{ width, display: 'flex', alignItems: 'center', gap: 2 }}>
+      <Slider
+        value={scale}
+        onChange={handleChange}
+        min={0.5}
+        max={2}
+        step={0.01}
+        valueLabelDisplay="auto"
+        valueLabelFormat={(value) => `${Math.round(value * 100)}%`}
+        marks={[
+          { value: 0.5, label: '50%' },
+          { value: 1, label: '100%' },
+          { value: 2, label: '200%' },
+        ]}
+      />
+    </Box>
+  );
+};
+
+export default ZoomSlider;

web/src/components/RealtimeTable/TableHead/Buttons/ColumnClipButton.jsx

@@ -0,0 +1,44 @@
+const ColumnClipButton = ({ onClick, label = 'Прикрепить файл' }) => {
+  return (
+    <button
+      onClick={onClick}
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: '8px',
+        padding: '10px 16px',
+        border: '1px solid #ddd',
+        borderRadius: '6px',
+        background: 'white',
+        cursor: 'pointer',
+        fontSize: '14px',
+        fontWeight: '500',
+        transition: 'all 0.2s ease',
+      }}
+      onMouseEnter={(e) => {
+        e.target.style.background = '#f5f5f5';
+        e.target.style.borderColor = '#007bff';
+      }}
+      onMouseLeave={(e) => {
+        e.target.style.background = 'white';
+        e.target.style.borderColor = '#ddd';
+      }}
+    >
+      {/* Иконка колонки */}
+      <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
+        <rect x="2" y="4" width="3" height="12" rx="1" />
+        <rect x="8" y="2" width="3" height="16" rx="1" />
+        <rect x="14" y="6" width="3" height="10" rx="1" />
+      </svg>
+
+      {/* Иконка скрепки */}
+      <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+        <path d="M10.5 5.5L8.5 7.5L7.5 6.5L9.5 4.5C9.9 4.1 10.6 4.1 11 4.5C11.4 4.9 11.4 5.6 11 6L7 10C6.6 10.4 6.3 10.4 6 10C5.7 9.6 5.7 9.3 6 9L9 6L8 5L5 8C4.3 8.7 4.3 9.9 5 10.6C5.7 11.3 6.9 11.3 7.6 10.6L11.6 6.6C12.5 5.7 12.5 4.3 11.6 3.4C10.7 2.5 9.3 2.5 8.4 3.4L5.4 6.4L4.3 5.3L7.3 2.3C8.7 0.9 10.9 0.9 12.3 2.3C13.7 3.7 13.7 5.9 12.3 7.3L8.3 11.3C6.9 12.7 4.7 12.7 3.3 11.3C1.9 9.9 1.9 7.7 3.3 6.3L6.3 3.3L5.2 2.2L2.2 5.2C0.4 7 0.4 9.9 2.2 11.7C4 13.5 6.9 13.5 8.7 11.7L12.7 7.7C14.1 6.3 14.1 4.1 12.7 2.7C11.3 1.3 9.1 1.3 7.7 2.7L4.7 5.7L5.8 6.8L8.8 3.8C9.8 2.8 11.2 2.8 12.2 3.8C13.2 4.8 13.2 6.2 12.2 7.2L8.2 11.2C7.2 12.2 5.8 12.2 4.8 11.2C3.8 10.2 3.8 8.8 4.8 7.8L7.8 4.8L6.7 3.7L3.7 6.7C2.3 8.1 2.3 10.3 3.7 11.7C5.1 13.1 7.3 13.1 8.7 11.7L12.7 7.7C13.5 6.9 13.5 5.5 12.7 4.7C11.9 3.9 10.5 3.9 9.7 4.7L6.7 7.7L7.8 8.8L10.8 5.8C11.2 5.4 11.2 4.8 10.8 4.4C10.4 4 9.8 4 9.4 4.4L6.4 7.4L5.3 6.3L8.3 3.3C9.3 2.3 10.7 2.3 11.7 3.3C12.7 4.3 12.7 5.7 11.7 6.7L7.7 10.7C6.7 11.7 5.3 11.7 4.3 10.7C3.3 9.7 3.3 8.3 4.3 7.3L7.3 4.3L6.2 3.2L3.2 6.2C1.8 7.6 1.8 9.8 3.2 11.2C4.6 12.6 6.8 12.6 8.2 11.2L12.2 7.2C13.2 6.2 13.2 4.8 12.2 3.8C11.2 2.8 9.8 2.8 8.8 3.8L5.8 6.8L6.9 7.9L9.9 4.9C10.7 4.1 10.7 2.9 9.9 2.1C9.1 1.3 7.9 1.3 7.1 2.1L4.1 5.1L3 4L6 1C7.4 -0.4 9.6 -0.4 11 1C12.4 2.4 12.4 4.6 11 6L7 10C6.2 10.8 5 10.8 4.2 10C3.4 9.2 3.4 8 4.2 7.2L7.2 4.2L6.1 3.1L3.1 6.1C1.3 7.9 1.3 10.8 3.1 12.6C4.9 14.4 7.8 14.4 9.6 12.6L13.6 8.6C14.8 7.4 14.8 5.4 13.6 4.2C12.4 3 10.4 3 9.2 4.2L6.2 7.2L7.3 8.3L10.3 5.3C10.7 4.9 10.7 4.3 10.3 3.9C9.9 3.5 9.3 3.5 8.9 3.9L5.9 6.9L4.8 5.8L7.8 2.8C8.8 1.8 10.2 1.8 11.2 2.8C12.2 3.8 12.2 5.2 11.2 6.2L7.2 10.2C6.2 11.2 4.8 11.2 3.8 10.2C2.8 9.2 2.8 7.8 3.8 6.8L6.8 3.8L5.7 2.7L2.7 5.7C1.3 7.1 1.3 9.3 2.7 10.7C4.1 12.1 6.3 12.1 7.7 10.7L11.7 6.7C12.5 5.9 12.5 4.7 11.7 3.9C10.9 3.1 9.7 3.1 8.9 3.9L5.9 6.9L4.8 5.8L7.8 2.8C9 1.6 10.8 1.6 12 2.8C13.2 4 13.2 5.8 12 7L8 11C7.2 11.8 6 11.8 5.2 11C4.4 10.2 4.4 9 5.2 8.2L8.2 5.2L7.1 4.1L4.1 7.1C2.5 8.7 2.5 11.3 4.1 12.9C5.7 14.5 8.3 14.5 9.9 12.9L13.9 8.9C15.1 7.7 15.1 5.7 13.9 4.5C12.7 3.3 10.7 3.3 9.5 4.5L6.5 7.5L7.6 8.6L10.6 5.6C11 5.2 11 4.6 10.6 4.2C10.2 3.8 9.6 3.8 9.2 4.2L6.2 7.2L5.1 6.1L8.1 3.1C9.1 2.1 10.5 2.1 11.5 3.1C12.5 4.1 12.5 5.5 11.5 6.5L7.5 10.5C6.5 11.5 5.1 11.5 4.1 10.5C3.1 9.5 3.1 8.1 4.1 7.1L7.1 4.1L6 3L3 6C1.6 7.4 1.6 9.6 3 11C4.4 12.4 6.6 12.4 8 11L12 7C12.8 6.2 12.8 5 12 4.2C11.2 3.4 10 3.4 9.2 4.2L6.2 7.2L7.3 8.3L10.3 5.3C10.7 4.9 10.7 4.3 10.3 3.9C9.9 3.5 9.3 3.5 8.9 3.9L5.9 6.9L4.8 5.8L7.8 2.8C8.8 1.8 10.2 1.8 11.2 2.8C12.2 3.8 12.2 5.2 11.2 6.2L7.2 10.2C6.2 11.2 4.8 11.2 3.8 10.2C2.8 9.2 2.8 7.8 3.8 6.8L6.8 3.8L5.7 2.7L2.7 5.7C1.3 7.1 1.3 9.3 2.7 10.7C4.1 12.1 6.3 12.1 7.7 10.7L11.7 6.7C12.5 5.9 12.5 4.7 11.7 3.9C10.9 3.1 9.7 3.1 8.9 3.9L5.9 6.9L4.8 5.8L7.8 2.8C9 1.6 10.8 1.6 12 2.8C13.2 4 13.2 5.8 12 7L8 11C7.2 11.8 6 11.8 5.2 11C4.4 10.2 4.4 9 5.2 8.2L8.2 5.2L7.1 4.1L4.1 7.1C2.5 8.7 2.5 11.3 4.1 12.9C5.7 14.5 8.3 14.5 9.9 12.9L13.9 8.9C15.1 7.7 15.1 5.7 13.9 4.5C12.7 3.3 10.7 3.3 9.5 4.5L6.5 7.5L7.6 8.6L10.5 5.5Z" />
+      </svg>
+
+      {label}
+    </button>
+  );
+};
+
+export default ColumnClipButton;

web/src/components/RealtimeTable/TableHead/ColumnResizer.jsx

@@ -0,0 +1,61 @@
+import React, { useState, useRef, useEffect, useCallback } from 'react';
+
+const ColumnResizer = ({ reportDragDeltaX }) => {
+  const [isDragging, setIsDragging] = useState(false);
+  const lastXRef = useRef(0);
+
+  const handleMouseDown = (e) => {
+    if (e.button !== 0) return;
+    e.preventDefault();
+    setIsDragging(true);
+    lastXRef.current = e.clientX;
+  };
+
+  const handleMouseMove = useCallback(
+    (e) => {
+      if (!isDragging) return;
+
+      const deltaX = e.clientX - lastXRef.current;
+
+      if (deltaX !== 0) {
+        reportDragDeltaX?.(deltaX);
+        lastXRef.current = e.clientX;
+      }
+    },
+    [isDragging, reportDragDeltaX],
+  );
+
+  const handleMouseUp = useCallback(() => {
+    setIsDragging(false);
+  }, []);
+
+  useEffect(() => {
+    if (isDragging) {
+      window.addEventListener('mousemove', handleMouseMove);
+      window.addEventListener('mouseup', handleMouseUp);
+    }
+
+    return () => {
+      window.removeEventListener('mousemove', handleMouseMove);
+      window.removeEventListener('mouseup', handleMouseUp);
+    };
+  }, [isDragging, handleMouseMove, handleMouseUp]);
+
+  return (
+    <div
+      onMouseDown={handleMouseDown}
+      style={{
+        position: 'absolute',
+        right: 0,
+        top: 0,
+        width: '4px',
+        height: '100%',
+        backgroundColor: 'transparent',
+        cursor: 'col-resize',
+        userSelect: 'none',
+      }}
+    />
+  );
+};
+
+export default ColumnResizer;

web/src/components/RealtimeTable/TableHead/TableHead.jsx

@@ -0,0 +1,374 @@
+import React from 'react';
+import ColumnResizer from './ColumnResizer';
+
+const getSortedColumns = (table) => {
+  const allLeafColumns = table.getAllLeafColumns();
+  const pinnedColumns = table.getState().columnPinning.left || [];
+
+  return [...allLeafColumns].sort((a, b) => {
+    const aIsPinned = pinnedColumns.includes(a.id);
+    const bIsPinned = pinnedColumns.includes(b.id);
+
+    if (aIsPinned && bIsPinned) {
+      return pinnedColumns.indexOf(a.id) - pinnedColumns.indexOf(b.id);
+    }
+    if (aIsPinned) return -1;
+    if (bIsPinned) return 1;
+    return 0;
+  });
+};
+
+const calculateLeftOffset = (table, columnOrHeader) => {
+  const columnId =
+    columnOrHeader.id.match(/data\..*$/)?.[0] || columnOrHeader.id;
+  const pinnedColumns = table.getState().columnPinning.left || [];
+  const currentPinnedIndex = pinnedColumns.indexOf(columnId);
+
+  let leftOffset = 0;
+
+  if (currentPinnedIndex > 0) {
+    for (let i = 0; i < currentPinnedIndex; i++) {
+      const prevColumn = table.getColumn(pinnedColumns[i]);
+      if (prevColumn) {
+        leftOffset += prevColumn.getSize();
+      }
+    }
+  }
+
+  return leftOffset;
+};
+
+const isColumnPin = (table, header) => {
+  const pinningColumn = table.getState().columnPinning.left;
+  //в header.id содержаться колонки по типу depth_idColParent_idChild, а в pinningColumn только idCol, которые закреплены
+  //header.id.split('_').at(-1) - получение самой нижней колонки
+  const columnId = header.id.match(/data\..*$/)?.[0] || header.id;
+  const isPinned = pinningColumn.includes(columnId);
+  return isPinned;
+};
+const ColumnNumbersRow = ({ table }) => {
+  const sortedColumns = getSortedColumns(table);
+  const tableState = table.getState();
+  const filteredColumns = sortedColumns.filter(
+    (col) =>
+      !(col.id in tableState.columnVisibility) ||
+      (col.id in tableState.columnVisibility &&
+        tableState.columnVisibility[col.id]),
+  );
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        position: 'sticky',
+        top: 0,
+        zIndex: (theme) => theme.zIndex.table + 1,
+        backgroundColor: 'white',
+      }}
+    >
+      {filteredColumns.map((column) => (
+        <ColumnNumberCell
+          key={`col-number-${column.id}`}
+          column={column}
+          table={table}
+        />
+      ))}
+    </div>
+  );
+};
+
+const ColumnNumberCell = ({ column, table }) => {
+  const isPinned = isColumnPin(table, column);
+  const allLeafColumns = table.getAllLeafColumns();
+  const originalIndex = allLeafColumns.findIndex((col) => col.id === column.id);
+  const leftOffset = calculateLeftOffset(table, column);
+  return (
+    <div
+      key={`col-number-${column.id}`}
+      style={{
+        width: column.getSize(),
+        minWidth: column.getSize(),
+        maxWidth: column.getSize(),
+        padding: '2px 6px',
+        textAlign: 'center',
+        backgroundColor: isPinned ? '#f5f5f5' : '#F3F4F6',
+        boxSizing: 'border-box',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        height: '1.5rem',
+        border: '.063rem solid rgba(209, 213, 220, 1)',
+        borderBottom: 'none',
+        position: isPinned ? 'sticky' : 'relative',
+        left: isPinned ? leftOffset : 'auto',
+        zIndex: isPinned ? 20 : 'auto',
+      }}
+    >
+      {originalIndex}
+    </div>
+  );
+};
+
+const HeaderCell = ({ header, table, onClick, hightlight, onChangeWidth }) => {
+  const column = header.column;
+  const isPinned = isColumnPin(table, header);
+  const leftOffset = calculateLeftOffset(table, header);
+
+  const backgroundColor = hightlight ? '#cbccce' : 'rgba(243, 244, 246, 1)';
+
+  const handleChangeWidth = (deltaWidth) => {
+    const size = header.getSize();
+    onChangeWidth(header, size + deltaWidth);
+  };
+
+  // Вычисляем отступ для текста внутри ячейки
+  // Если колонка закреплена, текст должен быть привязан к левому краю ячейки
+  // Если колонка не закреплена, текст должен начинаться после всех закрепленных колонок
+  const getTextLeftOffset = () => {
+    if (isPinned) {
+      // Для закрепленных колонок текст остается на месте
+      return '0';
+    }
+    // Для незакрепленных колонок текст должен начинаться после всех закрепленных
+    // Получаем общую ширину всех закрепленных колонок
+    const pinnedColumns = table.getState().columnPinning.left || [];
+    let totalPinnedWidth = 0;
+    for (const pinnedId of pinnedColumns) {
+      const pinnedCol = table.getColumn(pinnedId);
+      if (pinnedCol) {
+        totalPinnedWidth += pinnedCol.getSize();
+      }
+    }
+    return `${totalPinnedWidth}px`;
+  };
+
+  return (
+    <div
+      style={{
+        position: isPinned ? 'sticky' : 'relative',
+        left: isPinned ? leftOffset : 'auto',
+        zIndex: isPinned ? 21 : 'auto',
+      }}
+    >
+      <div style={{ position: 'relative' }}>
+        <div
+          key={header.id}
+          onClick={() => onClick(header)}
+          style={{
+            width: header.getSize() + 'px',
+            minWidth: header.getSize() + 'px',
+            maxWidth: header.getSize() + 'px',
+            position: 'relative',
+            padding: '4px 6px',
+            textAlign: 'center',
+            fontWeight: 600,
+            fontSize: '12px',
+            backgroundColor: backgroundColor,
+            color: '#424242',
+            boxSizing: 'border-box',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            height: '3rem',
+            border: '.063rem solid rgba(209, 213, 220, 1)',
+          }}
+        >
+          <div
+            style={{
+              textAlign: 'center',
+              position: 'sticky',
+              left: getTextLeftOffset(),
+              paddingRight: '0.5rem',
+              paddingLeft: '0.5rem',
+              backgroundColor: backgroundColor,
+            }}
+          >
+            {header.isPlaceholder ? null : column.columnDef.header}
+          </div>
+          <ColumnResizer reportDragDeltaX={handleChangeWidth} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const FilterRow = ({ table }) => {
+  const sortedColumns = getSortedColumns(table);
+  const tableState = table.getState();
+
+  const filteredColumns = sortedColumns.filter(
+    (col) =>
+      !(col.id in tableState.columnVisibility) ||
+      (col.id in tableState.columnVisibility &&
+        tableState.columnVisibility[col.id]),
+  );
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        position: 'sticky',
+        top: '1.5rem', // После строки с номерами колонок
+        zIndex: 20,
+        backgroundColor: 'white',
+      }}
+    >
+      {filteredColumns.map((column) => (
+        <FilterCell key={`filter-${column.id}`} column={column} table={table} />
+      ))}
+    </div>
+  );
+};
+
+// Компонент ячейки фильтра
+const FilterCell = ({ column, table }) => {
+  const isPinned = isColumnPin(table, column);
+  const leftOffset = calculateLeftOffset(table, column);
+
+  // Определяем тип фильтра на основе колонки
+  const filterVariant = column.columnDef.filterVariant || 'text';
+
+  // Для select фильтра
+  const selectOptions = column.columnDef.filterSelectOptions || [];
+
+  const handleFilterChange = (value) => {
+    column.setFilterValue(value);
+  };
+
+  // Рендер разных типов фильтров
+  const renderFilterInput = () => {
+    switch (filterVariant) {
+      case 'select':
+        return (
+          <select
+            value={column.getFilterValue() ?? ''}
+            onChange={(e) => handleFilterChange(e.target.value)}
+            style={{
+              width: '100%',
+              padding: '4px 6px',
+              fontSize: '11px',
+              border: '1px solid #ddd',
+              borderRadius: '4px',
+              backgroundColor: 'white',
+            }}
+          >
+            <option value="">Все</option>
+            {selectOptions.map((option) => (
+              <option key={option} value={option}>
+                {option}
+              </option>
+            ))}
+          </select>
+        );
+
+      case 'range': {
+        // Для диапазона можно реализовать два поля
+        const [min, max] = column.getFilterValue() || ['', ''];
+        return (
+          <div style={{ display: 'flex', gap: '4px' }}>
+            <input
+              type="number"
+              placeholder="От"
+              value={min}
+              onChange={(e) => column.setFilterValue([e.target.value, max])}
+              style={{ width: '50%', padding: '4px', fontSize: '11px' }}
+            />
+            <input
+              type="number"
+              placeholder="До"
+              value={max}
+              onChange={(e) => column.setFilterValue([min, e.target.value])}
+              style={{ width: '50%', padding: '4px', fontSize: '11px' }}
+            />
+          </div>
+        );
+      }
+
+      default: // 'text'
+        return (
+          <input
+            type="text"
+            value={column.getFilterValue() ?? ''}
+            onChange={(e) => handleFilterChange(e.target.value)}
+            placeholder="Поиск..."
+            style={{
+              width: '100%',
+              padding: '4px 6px',
+              fontSize: '11px',
+              border: '1px solid #ddd',
+              borderRadius: '4px',
+              boxSizing: 'border-box',
+            }}
+          />
+        );
+    }
+  };
+
+  return (
+    <div
+      style={{
+        width: column.getSize(),
+        minWidth: column.getSize(),
+        maxWidth: column.getSize(),
+        padding: '4px 6px',
+        backgroundColor: isPinned ? '#f5f5f5' : 'white',
+        boxSizing: 'border-box',
+        height: '2.5rem',
+        border: '.063rem solid rgba(209, 213, 220, 1)',
+        borderTop: 'none',
+        position: isPinned ? 'sticky' : 'relative',
+        left: isPinned ? leftOffset : 'auto',
+        zIndex: isPinned ? 19 : 'auto',
+      }}
+    >
+      {renderFilterInput()}
+    </div>
+  );
+};
+
+export const TableHead = ({
+  table,
+  onHeaderSelect,
+  selectHeader,
+  onChangeWidth,
+}) => {
+  const handleHeaderClick = (header) => {
+    onHeaderSelect(header);
+  };
+
+  return (
+    <>
+      <div
+        style={{
+          zIndex: (theme) => theme.zIndex.table,
+          position: 'relative',
+          width: 'max-content',
+        }}
+      >
+        {/* Строка с номерами колонок */}
+        <ColumnNumbersRow table={table} />
+
+        {table.getState().showColumnFilters && <FilterRow table={table} />}
+
+        {/* Существующие строки заголовков */}
+        {table.getHeaderGroups().map((headerGroup) => (
+          <div key={headerGroup.id} style={{ display: 'flex' }}>
+            {headerGroup.headers.map((header) => (
+              <React.Fragment key={header.id}>
+                <HeaderCell
+                  header={header}
+                  hightlight={
+                    selectHeader ? header.id == selectHeader.id : false
+                  }
+                  table={table}
+                  onClick={handleHeaderClick}
+                  onChangeWidth={onChangeWidth}
+                />
+              </React.Fragment>
+            ))}
+          </div>
+        ))}
+      </div>
+    </>
+  );
+};

web/src/components/RealtimeTable/TableHead/Tooltip/ColumnTooltipBox.jsx

@@ -0,0 +1,287 @@
+import { useState, useRef, useEffect } from 'react';
+import {
+  Box,
+  Chip,
+  Divider,
+  styled,
+  alpha,
+  Stack,
+  Popover,
+} from '@mui/material';
+// import { QuestionMarkSvg } from '../../../../common/icons/icons';
+
+import { useSharedTableState } from '../../TableContext';
+import { StageInfoForTooltip } from '../../../../Stages/StageInfoForTooltip';
+
+const ContentContainer = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '1rem',
+  background: 'white',
+  borderRadius: '1rem',
+  padding: '1.25rem',
+  width: '30rem',
+  maxWidth: '90vw',
+}));
+
+const SectionTitle = styled(Box)(({ theme }) => ({
+  color: theme.palette.text.primary,
+  fontWeight: 600,
+  fontSize: '0.813rem',
+  lineHeight: 1.2,
+}));
+
+const StatusChip = styled(Chip, {
+  shouldForwardProp: (prop) => prop !== 'isCurrent' && prop !== 'isAdminOnly',
+})(({ theme, isAdminOnly }) => ({
+  backgroundColor: isAdminOnly
+    ? alpha(theme.palette.warning.main, 0.1)
+    : alpha(theme.palette.info.main, 0.1),
+  color: isAdminOnly ? theme.palette.warning.main : theme.palette.info.main,
+  border: `1px solid ${
+    isAdminOnly
+      ? alpha(theme.palette.warning.main, 0.3)
+      : alpha(theme.palette.info.main, 0.3)
+  }`,
+  borderRadius: '0.5rem',
+  height: '1.5rem',
+  fontSize: '0.688rem',
+  fontWeight: 500,
+  '& .MuiChip-label': {
+    paddingLeft: theme.spacing(0.5),
+    paddingRight: theme.spacing(0.5),
+    paddingTop: 0,
+    paddingBottom: 0,
+  },
+}));
+
+const LetterChip = styled(Chip)(({ theme }) => ({
+  borderRadius: '0.5rem',
+  height: '1.5rem',
+  fontSize: '0.688rem',
+  fontWeight: 500,
+  background: 'white',
+  border: `1px solid rgba(0, 0, 0, 0.1)`,
+  '& .MuiChip-label': {
+    paddingLeft: theme.spacing(0.5),
+    paddingRight: theme.spacing(0.5),
+    paddingTop: 0,
+    paddingBottom: 0,
+  },
+}));
+
+export const ColumnTooltipBox = ({
+  anchorEl,
+  open,
+  onClose,
+  colId,
+  colData,
+  stageData = [],
+}) => {
+  const [placement, setPlacement] = useState('bottom');
+  const containerRef = useRef(null);
+
+  const { getTextSelectionHeaders } = useSharedTableState();
+  const [textCol, setTextCol] = useState();
+
+  useEffect(() => {
+    const updatePlacement = () => {
+      if (!anchorEl || !open) return;
+
+      const anchorRect = anchorEl.getBoundingClientRect();
+      const tooltipWidth = 400; // Примерная ширина тултипа (25rem ≈ 400px)
+      const tooltipHeight = 400; // Примерная высота
+      const viewportWidth = window.innerWidth;
+      const viewportHeight = window.innerHeight;
+
+      // Проверяем, хватает ли места снизу по центру
+      const spaceBottom = viewportHeight - anchorRect.bottom;
+      const spaceTop = anchorRect.top;
+
+      // Центрирование: anchorRect.left + anchorRect.width/2 - tooltipWidth/2
+      const centeredLeft =
+        anchorRect.left + anchorRect.width / 2 - tooltipWidth / 2;
+      const centeredRight = centeredLeft + tooltipWidth;
+
+      // Проверяем, помещается ли по центру
+      const fitsCentered = centeredLeft >= 0 && centeredRight <= viewportWidth;
+
+      // Проверяем, хватает ли места снизу
+      const enoughSpaceBelow = spaceBottom >= tooltipHeight + 10;
+      const enoughSpaceAbove = spaceTop >= tooltipHeight + 10;
+
+      if (enoughSpaceBelow && fitsCentered) {
+        // Если есть место снизу и помещается по центру
+        setPlacement('bottom');
+      } else if (enoughSpaceAbove && fitsCentered) {
+        // Если места снизу нет, но есть сверху и помещается по центру
+        setPlacement('top');
+      } else {
+        // Если не помещается по центру, проверяем право и лево
+        const spaceRight = viewportWidth - anchorRect.right;
+        const spaceLeft = anchorRect.left;
+
+        if (spaceRight >= tooltipWidth && spaceBottom >= tooltipHeight) {
+          // Если справа есть место и снизу есть место
+          setPlacement('right-start');
+        } else if (spaceLeft >= tooltipWidth && spaceBottom >= tooltipHeight) {
+          // Если слева есть место и снизу есть место
+          setPlacement('left-start');
+        } else if (spaceRight >= tooltipWidth && spaceTop >= tooltipHeight) {
+          // Если справа есть место и сверху есть место
+          setPlacement('right-end');
+        } else if (spaceLeft >= tooltipWidth && spaceTop >= tooltipHeight) {
+          // Если слева есть место и сверху есть место
+          setPlacement('left-end');
+        } else {
+          // Если ничего не подходит, используем auto
+          setPlacement('bottom');
+        }
+      }
+    };
+
+    if (open) {
+      setTimeout(updatePlacement, 0);
+      window.addEventListener('resize', updatePlacement);
+      window.addEventListener('scroll', updatePlacement, true);
+    }
+
+    return () => {
+      window.removeEventListener('resize', updatePlacement);
+      window.removeEventListener('scroll', updatePlacement, true);
+    };
+  }, [anchorEl, open]);
+
+  useEffect(() => {
+    if (colId) {
+      setTextCol(getTextSelectionHeaders([colId]));
+    }
+  }, [colId]);
+
+  // Определяем anchorOrigin и transformOrigin в зависимости от placement
+  const getPopoverOrigins = () => {
+    switch (placement) {
+      case 'bottom':
+        return {
+          anchorOrigin: { vertical: 'bottom', horizontal: 'center' },
+          transformOrigin: { vertical: 'top', horizontal: 'center' },
+        };
+      case 'top':
+        return {
+          anchorOrigin: { vertical: 'top', horizontal: 'center' },
+          transformOrigin: { vertical: 'bottom', horizontal: 'center' },
+        };
+      case 'right-start':
+        return {
+          anchorOrigin: { vertical: 'top', horizontal: 'right' },
+          transformOrigin: { vertical: 'top', horizontal: 'left' },
+        };
+      case 'right-end':
+        return {
+          anchorOrigin: { vertical: 'bottom', horizontal: 'right' },
+          transformOrigin: { vertical: 'bottom', horizontal: 'left' },
+        };
+      case 'left-start':
+        return {
+          anchorOrigin: { vertical: 'top', horizontal: 'left' },
+          transformOrigin: { vertical: 'top', horizontal: 'right' },
+        };
+      case 'left-end':
+        return {
+          anchorOrigin: { vertical: 'bottom', horizontal: 'left' },
+          transformOrigin: { vertical: 'bottom', horizontal: 'right' },
+        };
+      default:
+        return {
+          anchorOrigin: { vertical: 'bottom', horizontal: 'center' },
+          transformOrigin: { vertical: 'top', horizontal: 'center' },
+        };
+    }
+  };
+
+  const origins = getPopoverOrigins();
+
+  return (
+    <Popover
+      open={open}
+      anchorEl={anchorEl}
+      onClose={onClose}
+      anchorOrigin={origins.anchorOrigin}
+      transformOrigin={origins.transformOrigin}
+      sx={{
+        pointerEvents: 'none',
+        '& .MuiPopover-paper': {
+          margin: '0.5rem',
+          overflow: 'visible',
+          borderRadius: '1rem',
+          boxShadow: '0px 4px 20px rgba(0, 0, 0, 0.15)',
+          border: '1px solid',
+          borderColor: 'divider',
+        },
+      }}
+      disableRestoreFocus
+      disableScrollLock
+      onMouseEnter={(e) => e.stopPropagation()}
+      onMouseLeave={onClose}
+    >
+      <Box
+        ref={containerRef}
+        sx={{
+          pointerEvents: 'auto',
+        }}
+        onMouseEnter={(e) => e.stopPropagation()}
+        onMouseLeave={onClose}
+      >
+        <ContentContainer>
+          {/* Заголовок и статус */}
+          <Box display="flex" flexDirection="column" gap="0.375rem">
+            <SectionTitle variant="subtitle2" fontSize={'1rem !important'}>
+              Настройки столбца
+            </SectionTitle>
+            <Stack
+              direction="row"
+              spacing={'0.5rem'}
+              flexWrap="wrap"
+              useFlexGap
+              paddingTop={'.5rem'}
+            >
+              <LetterChip label={textCol} />
+              {colData.is_admin_only && (
+                <StatusChip
+                  label="Только для админов"
+                  isAdminOnly={colData.is_admin_only}
+                  size="small"
+                />
+              )}
+            </Stack>
+          </Box>
+          {/* Информация об этапах */}
+          {stageData.length > 0 && (
+            <StageInfoForTooltip stageData={stageData} />
+          )}
+          <Divider sx={{ marginTop: '0 !important' }} />
+          <Box
+            sx={{
+              display: 'flex',
+              gap: '.5rem',
+            }}
+          >
+            {/* <QuestionMarkSvg size="1rem" /> */}
+
+            <Box
+              sx={{
+                fontWeight: '400',
+                fontSize: '0.75rem',
+                lineHeight: '143%',
+                color: '#808192',
+              }}
+            >
+              Для редактирования и сбрасывания используйте настройки в меню
+              инструментов
+            </Box>
+          </Box>
+        </ContentContainer>
+      </Box>
+    </Popover>
+  );
+};

web/src/components/RealtimeTable/TableHead/Tooltip/Tooltip.jsx

@@ -0,0 +1,74 @@
+import { useState } from 'react';
+import styled from '@emotion/styled';
+import { SettingSvg } from '../../../../common/icons/icons';
+import { Box } from '@mui/material';
+// import { ColumnTooltipBox } from './ColumnTooltipBox';
+// import { useStageManager } from '../../../StagesAccess/StagesAccessManager';
+// import { useSharedTableState } from '../../TableContext';
+
+const TooltipContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  position: absolute;
+  top: 0;
+  right: 0;
+  border-radius: 0.5rem 0 0.5rem 0.5rem;
+  width: 0.75rem;
+  height: 0.75rem;
+  box-shadow:
+    2px 2px 2px 0 rgba(88, 114, 76, 0.1),
+    0 0 0 1px rgba(127, 191, 123, 0.25);
+  background: #258141;
+  opacity: ${(props) => (props.mouseEnter ? 1 : 0.2)};
+`;
+
+export const Tooltip = ({ colId }) => {
+  const [anchorEl, setAnchorEl] = useState(null);
+  // const { getStageAccessByColId } = useStageManager();
+  // const { tableState, headerManagerRef } = useSharedTableState();
+
+  // const stageData = getStageAccessByColId(colId);
+
+  const handleMouseLeave = () => {
+    setAnchorEl(null);
+  };
+
+  const handleClick = (e) => {
+    setAnchorEl((prev) => (prev === null ? e.currentTarget : null));
+  };
+
+  const open = Boolean(anchorEl);
+
+  return (
+    <Box
+      sx={{
+        width: '2rem',
+        height: '1rem',
+        position: 'absolute',
+        top: '0',
+        right: '0',
+        display: 'flex',
+        alignItems: 'flex-start',
+        justifyContent: 'flex-end',
+      }}
+      onMouseLeave={handleMouseLeave}
+      onClick={handleClick}
+    >
+      {/* <TooltipContainer mouseEnter={open}>
+        <SettingSvg size=".5rem" />
+      </TooltipContainer> */}
+
+      {/* <ColumnTooltipBox
+        key={colId}
+        anchorEl={anchorEl}
+        open={open}
+        onClose={handleMouseLeave}
+        colId={colId}
+        // stageData={stageData}
+        colData={headerManagerRef.current.getHeader(colId)}
+      /> */}
+    </Box>
+  );
+};

web/src/components/RealtimeTable/constants/FORM_2/AHR_limit.js

@@ -0,0 +1,259 @@
+
+                            import {
+                                greenColumn,
+                                whiteColumn,
+                                orangeColumn,
+                                yellowColumn,
+                                redColumn,
+                                blueColumn,
+                                } from '../columnColors';
+                              export const config = {
+  "config":{
+    "colors":{
+      "n_pp_n_pp":{
+        "color_type":whiteColumn,
+        "accessorKey":"n_pp_n_pp"
+      },
+      "id_stati_gruppy_nomenklatury_id_stati_gruppy_nomenklatury":{
+        "color_type":whiteColumn,
+        "accessorKey":"id_stati_gruppy_nomenklatury_id_stati_gruppy_nomenklatury"
+      },
+      "naimenovanie_statey_raskhodov_naimenovanie_statey_raskhodov":{
+        "color_type":whiteColumn,
+        "accessorKey":"naimenovanie_statey_raskhodov_naimenovanie_statey_raskhodov"
+      },
+      "normiruemaya_edinitsa_normiruemaya_edinitsa":{
+        "color_type":whiteColumn,
+        "accessorKey":"normiruemaya_edinitsa_normiruemaya_edinitsa"
+      },
+      "limit_v_rubs_uchetom_nds_limit_v_rubs_uchetom_nds":{
+        "color_type":whiteColumn,
+        "accessorKey":"limit_v_rubs_uchetom_nds_limit_v_rubs_uchetom_nds"
+      },
+      "limit_v_rubbez_ucheta_nds_limit_v_rubbez_ucheta_nds":{
+        "color_type":whiteColumn,
+        "accessorKey":"limit_v_rubbez_ucheta_nds_limit_v_rubbez_ucheta_nds"
+      },
+      "i_kvartal_2026_g_kolichestvov_sht":{
+        "color_type":whiteColumn,
+        "accessorKey":"i_kvartal_2026_g_kolichestvov_sht"
+      },
+      "i_kvartal_2026_g_raskhody_v_smetu_v_rublyakh":{
+        "color_type":whiteColumn,
+        "accessorKey":"i_kvartal_2026_g_raskhody_v_smetu_v_rublyakh"
+      },
+      "ii_kvartal_2026_g_kolichestvov_sht":{
+        "color_type":whiteColumn,
+        "accessorKey":"ii_kvartal_2026_g_kolichestvov_sht"
+      },
+      "ii_kvartal_2026_g_raskhody_v_smetu_v_rublyakh":{
+        "color_type":whiteColumn,
+        "accessorKey":"ii_kvartal_2026_g_raskhody_v_smetu_v_rublyakh"
+      },
+      "iii_kvartal_2026_g_kolichestvov_sht":{
+        "color_type":whiteColumn,
+        "accessorKey":"iii_kvartal_2026_g_kolichestvov_sht"
+      },
+      "iii_kvartal_2026_g_raskhody_v_smetu_v_rublyakh":{
+        "color_type":whiteColumn,
+        "accessorKey":"iii_kvartal_2026_g_raskhody_v_smetu_v_rublyakh"
+      },
+      "iv_kvartal_2026_g_kolichestvov_sht":{
+        "color_type":whiteColumn,
+        "accessorKey":"iv_kvartal_2026_g_kolichestvov_sht"
+      },
+      "iv_kvartal_2026_g_raskhody_v_smetu_v_rublyakh":{
+        "color_type":whiteColumn,
+        "accessorKey":"iv_kvartal_2026_g_raskhody_v_smetu_v_rublyakh"
+      }
+    },
+    "columns":[
+      {
+        "header":"N п\\/п",
+        "accessorKey":"n_pp",
+        "columns":[
+          {
+            "header":"N п\\/п",
+            "accessorKey":"n_pp_n_pp",
+            "exampleValue":"1",
+            "size":150,
+            "filterFn":"contains"
+          }
+        ]
+      },
+      {
+        "header":"ID статьи \\/ группы номенклатуры",
+        "accessorKey":"id_stati_gruppy_nomenklatury",
+        "columns":[
+          {
+            "header":"ID статьи \\/ группы номенклатуры",
+            "accessorKey":"id_stati_gruppy_nomenklatury_id_stati_gruppy_nomenklatury",
+            "size":150,
+            "filterFn":"contains"
+          }
+        ]
+      },
+      {
+        "header":"Наименование статей расходов",
+        "accessorKey":"naimenovanie_statey_raskhodov",
+        "columns":[
+          {
+            "header":"Наименование статей расходов",
+            "accessorKey":"naimenovanie_statey_raskhodov_naimenovanie_statey_raskhodov",
+            "exampleValue":"Телефонные, почтовые, телеграфные расходы и др. услуги связи",
+            "size":150,
+            "filterFn":"contains"
+          }
+        ]
+      },
+      {
+        "header":"Нормируемая единица",
+        "accessorKey":"normiruemaya_edinitsa",
+        "columns":[
+          {
+            "header":"Нормируемая единица",
+            "accessorKey":"normiruemaya_edinitsa_normiruemaya_edinitsa",
+            "size":150,
+            "filterFn":"contains"
+          }
+        ]
+      },
+      {
+        "header":"Лимит, в руб.\\n(с учетом НДС)",
+        "accessorKey":"limit_v_rubs_uchetom_nds",
+        "columns":[
+          {
+            "header":"Лимит, в руб.\\n(с учетом НДС)",
+            "accessorKey":"limit_v_rubs_uchetom_nds_limit_v_rubs_uchetom_nds",
+            "size":150,
+            "filterFn":"contains"
+          }
+        ]
+      },
+      {
+        "header":"Лимит, в руб.\\n(без учета НДС)",
+        "accessorKey":"limit_v_rubbez_ucheta_nds",
+        "columns":[
+          {
+            "header":"Лимит, в руб.\\n(без учета НДС)",
+            "accessorKey":"limit_v_rubbez_ucheta_nds_limit_v_rubbez_ucheta_nds",
+            "size":150,
+            "filterFn":"contains"
+          }
+        ]
+      },
+      {
+        "header":"I квартал 2026 г.",
+        "accessorKey":"i_kvartal_2026_g",
+        "columns":[
+          {
+            "header":"Количество,\\nв шт.",
+            "accessorKey":"i_kvartal_2026_g_kolichestvov_sht",
+            "size":150,
+            "filterFn":"contains",
+            "muiTableHeadCellProps":{
+              "sx":{
+                "backgroundColor":"#A5A5A5"
+              }
+            }
+          },
+          {
+            "header":"Расходы в смету, \\nв рублях",
+            "accessorKey":"i_kvartal_2026_g_raskhody_v_smetu_v_rublyakh",
+            "size":150,
+            "filterFn":"contains",
+            "muiTableHeadCellProps":{
+              "sx":{
+                "backgroundColor":"#A5A5A5"
+              }
+            }
+          }
+        ]
+      },
+      {
+        "header":"II квартал 2026 г.",
+        "accessorKey":"ii_kvartal_2026_g",
+        "columns":[
+          {
+            "header":"Количество,\\nв шт.",
+            "accessorKey":"ii_kvartal_2026_g_kolichestvov_sht",
+            "size":150,
+            "filterFn":"contains",
+            "muiTableHeadCellProps":{
+              "sx":{
+                "backgroundColor":"#A5A5A5"
+              }
+            }
+          },
+          {
+            "header":"Расходы в смету, \\nв рублях",
+            "accessorKey":"ii_kvartal_2026_g_raskhody_v_smetu_v_rublyakh",
+            "size":150,
+            "filterFn":"contains",
+            "muiTableHeadCellProps":{
+              "sx":{
+                "backgroundColor":"#A5A5A5"
+              }
+            }
+          }
+        ]
+      },
+      {
+        "header":"III квартал 2026 г.",
+        "accessorKey":"iii_kvartal_2026_g",
+        "columns":[
+          {
+            "header":"Количество,\\nв шт.",
+            "accessorKey":"iii_kvartal_2026_g_kolichestvov_sht",
+            "size":150,
+            "filterFn":"contains",
+            "muiTableHeadCellProps":{
+              "sx":{
+                "backgroundColor":"#A5A5A5"
+              }
+            }
+          },
+          {
+            "header":"Расходы в смету, \\nв рублях",
+            "accessorKey":"iii_kvartal_2026_g_raskhody_v_smetu_v_rublyakh",
+            "size":150,
+            "filterFn":"contains",
+            "muiTableHeadCellProps":{
+              "sx":{
+                "backgroundColor":"#A5A5A5"
+              }
+            }
+          }
+        ]
+      },
+      {
+        "header":"IV квартал 2026 г.",
+        "accessorKey":"iv_kvartal_2026_g",
+        "columns":[
+          {
+            "header":"Количество,\\nв шт.",
+            "accessorKey":"iv_kvartal_2026_g_kolichestvov_sht",
+            "size":150,
+            "filterFn":"contains",
+            "muiTableHeadCellProps":{
+              "sx":{
+                "backgroundColor":"#A5A5A5"
+              }
+            }
+          },
+          {
+            "header":"Расходы в смету, \\nв рублях",
+            "accessorKey":"iv_kvartal_2026_g_raskhody_v_smetu_v_rublyakh",
+            "size":150,
+            "filterFn":"contains",
+            "muiTableHeadCellProps":{
+              "sx":{
+                "backgroundColor":"#A5A5A5"
+              }
+            }
+          }
+        ]
+      }
+    ]
+  }
+}

web/src/components/RealtimeTable/constants/FORM_2/AHR_rent.js

@@ -0,0 +1,735 @@
+
+                            import {
+                                greenColumn,
+                                whiteColumn,
+                                orangeColumn,
+                                yellowColumn,
+                                redColumn,
+                                blueColumn,
+                                } from '../columnColors';
+                              export const config = {
+  "config":{
+    "colors":{
+      "pp_pp_pp_pp":{
+        "color_type":whiteColumn,
+        "accessorKey":"pp_pp_pp_pp"
+      },
+      "adres_arenduemogo_pomescheniya_adres_arenduemogo_pomescheniya_adres_arenduemogo_pomescheniya_zapolnyaetsya_avto_iz_tabl_info_v_zavisimosti_ot_vybrannogo_obekta":{
+        "color_type":whiteColumn,
+        "accessorKey":"adres_arenduemogo_pomescheniya_adres_arenduemogo_pomescheniya_adres_arenduemogo_pomescheniya_zapolnyaetsya_avto_iz_tabl_info_v_zavisimosti_ot_vybrannogo_obekta"
+      },
+      "obekt_obekt_obekt_neobkhodimo_vybrat_iz_spiska":{
+        "color_type":whiteColumn,
+        "accessorKey":"obekt_obekt_obekt_neobkhodimo_vybrat_iz_spiska"
+      },
+      "arenduemaya_ploschad_arenduemaya_ploschad_arenduemaya_ploschad_v_kvm":{
+        "color_type":whiteColumn,
+        "accessorKey":"arenduemaya_ploschad_arenduemaya_ploschad_arenduemaya_ploschad_v_kvm"
+      },
+      "srok_okonchaniya_dogovora_srok_okonchaniya_dogovora_srok_okonchaniya_dogovora_v_formate_mesyatsgod":{
+        "color_type":whiteColumn,
+        "accessorKey":"srok_okonchaniya_dogovora_srok_okonchaniya_dogovora_srok_okonchaniya_dogovora_v_formate_mesyatsgod"
+      },
+      "nomer_dogovora_nomer_dogovora_nomer_dogovora":{
+        "color_type":whiteColumn,
+        "accessorKey":"nomer_dogovora_nomer_dogovora_nomer_dogovora"
+      },
+      "planiruemaya_summa_raskhodov_na_2026_god_i_kvartal_i_kvartal":{
+        "color_type":whiteColumn,
+        "accessorKey":"planiruemaya_summa_raskhodov_na_2026_god_i_kvartal_i_kvartal"
+      },
+      "planiruemaya_summa_raskhodov_na_2026_god_ii_kvartal_ii_kvartal":{
+        "color_type":whiteColumn,
+        "accessorKey":"planiruemaya_summa_raskhodov_na_2026_god_ii_kvartal_ii_kvartal"
+      },
+      "planiruemaya_summa_raskhodov_na_2026_god_iii_kvartal_iii_kvartal":{
+        "color_type":whiteColumn,
+        "accessorKey":"planiruemaya_summa_raskhodov_na_2026_god_iii_kvartal_iii_kvartal"
+      },
+      "planiruemaya_summa_raskhodov_na_2026_god_iv_kvartal_iv_kvartal":{
+        "color_type":whiteColumn,
+        "accessorKey":"planiruemaya_summa_raskhodov_na_2026_god_iv_kvartal_iv_kvartal"
+      },
+      "kommentariy_kommentariy_kommentariy_kommentariy":{
+        "color_type":whiteColumn,
+        "accessorKey":"kommentariy_kommentariy_kommentariy_kommentariy"
+      },
+      "fakticheskie_raskhody_za_i_kv_2026_goda_yanvar_yanvar_v_tys_rubley":{
+        "color_type":whiteColumn,
+        "accessorKey":"fakticheskie_raskhody_za_i_kv_2026_goda_yanvar_yanvar_v_tys_rubley"
+      },
+      "fakticheskie_raskhody_za_i_kv_2026_goda_fevral_fevral_v_tys_rubley":{
+        "color_type":whiteColumn,
+        "accessorKey":"fakticheskie_raskhody_za_i_kv_2026_goda_fevral_fevral_v_tys_rubley"
+      },
+      "fakticheskie_raskhody_za_i_kv_2026_goda_mart_mart_v_tys_rubley":{
+        "color_type":whiteColumn,
+        "accessorKey":"fakticheskie_raskhody_za_i_kv_2026_goda_mart_mart_v_tys_rubley"
+      },
+      "fakticheskie_raskhody_za_i_kv_2026_goda_itog_i_kv_itog_i_kv_v_tys_rubley":{
+        "color_type":whiteColumn,
+        "accessorKey":"fakticheskie_raskhody_za_i_kv_2026_goda_itog_i_kv_itog_i_kv_v_tys_rubley"
+      },
+      "fakticheskie_raskhody_za_ii_kv_2026_goda_aprel_aprel_v_tys_rubley":{
+        "color_type":whiteColumn,
+        "accessorKey":"fakticheskie_raskhody_za_ii_kv_2026_goda_aprel_aprel_v_tys_rubley"
+      },
+      "fakticheskie_raskhody_za_ii_kv_2026_goda_may_may_v_tys_rubley":{
+        "color_type":whiteColumn,
+        "accessorKey":"fakticheskie_raskhody_za_ii_kv_2026_goda_may_may_v_tys_rubley"
+      },
+      "fakticheskie_raskhody_za_ii_kv_2026_goda_iyun_iyun_v_tys_rubley":{
+        "color_type":whiteColumn,
+        "accessorKey":"fakticheskie_raskhody_za_ii_kv_2026_goda_iyun_iyun_v_tys_rubley"
+      },
+      "fakticheskie_raskhody_za_ii_kv_2026_goda_itog_ii_kv_itog_ii_kv_v_tys_rubley":{
+        "color_type":whiteColumn,
+        "accessorKey":"fakticheskie_raskhody_za_ii_kv_2026_goda_itog_ii_kv_itog_ii_kv_v_tys_rubley"
+      },
+      "fakticheskie_raskhody_za_iii_kv_2026_goda_iyul_iyul_v_tys_rubley":{
+        "color_type":whiteColumn,
+        "accessorKey":"fakticheskie_raskhody_za_iii_kv_2026_goda_iyul_iyul_v_tys_rubley"
+      },
+      "fakticheskie_raskhody_za_iii_kv_2026_goda_avgust_avgust_v_tys_rubley":{
+        "color_type":whiteColumn,
+        "accessorKey":"fakticheskie_raskhody_za_iii_kv_2026_goda_avgust_avgust_v_tys_rubley"
+      },
+      "fakticheskie_raskhody_za_iii_kv_2026_goda_sentyabr_sentyabr_v_tys_rubley":{
+        "color_type":whiteColumn,
+        "accessorKey":"fakticheskie_raskhody_za_iii_kv_2026_goda_sentyabr_sentyabr_v_tys_rubley"
+      },
+      "fakticheskie_raskhody_za_iii_kv_2026_goda_itog_iii_kv_itog_iii_kv_v_tys_rubley":{
+        "color_type":whiteColumn,
+        "accessorKey":"fakticheskie_raskhody_za_iii_kv_2026_goda_itog_iii_kv_itog_iii_kv_v_tys_rubley"
+      },
+      "fakticheskie_raskhody_za_iv_kv_2026_goda_oktyabr_oktyabr_v_tys_rubley":{
+        "color_type":whiteColumn,
+        "accessorKey":"fakticheskie_raskhody_za_iv_kv_2026_goda_oktyabr_oktyabr_v_tys_rubley"
+      },
+      "fakticheskie_raskhody_za_iv_kv_2026_goda_noyabr_noyabr_v_tys_rubley":{
+        "color_type":whiteColumn,
+        "accessorKey":"fakticheskie_raskhody_za_iv_kv_2026_goda_noyabr_noyabr_v_tys_rubley"
+      },
+      "fakticheskie_raskhody_za_iv_kv_2026_goda_dekabr_dekabr_v_tys_rubley":{
+        "color_type":whiteColumn,
+        "accessorKey":"fakticheskie_raskhody_za_iv_kv_2026_goda_dekabr_dekabr_v_tys_rubley"
+      },
+      "fakticheskie_raskhody_za_iv_kv_2026_goda_spod_spod_v_tys_rubley":{
+        "color_type":whiteColumn,
+        "accessorKey":"fakticheskie_raskhody_za_iv_kv_2026_goda_spod_spod_v_tys_rubley"
+      },
+      "fakticheskie_raskhody_za_iv_kv_2026_goda_itog_iv_kv_itog_iv_kv_v_tys_rubley":{
+        "color_type":whiteColumn,
+        "accessorKey":"fakticheskie_raskhody_za_iv_kv_2026_goda_itog_iv_kv_itog_iv_kv_v_tys_rubley"
+      }
+    },
+    "columns":[
+      {
+        "header":"№ п\\/п",
+        "accessorKey":"pp",
+        "columns":[
+          {
+            "header":"№ п\\/п",
+            "accessorKey":"pp_pp",
+            "columns":[
+              {
+                "header":"№ п\\/п",
+                "accessorKey":"pp_pp_pp",
+                "columns":[
+                  {
+                    "header":"№ п\\/п",
+                    "accessorKey":"pp_pp_pp_pp",
+                    "size":150,
+                    "filterFn":"contains"
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "header":"Адрес арендуемого помещения *",
+        "accessorKey":"adres_arenduemogo_pomescheniya",
+        "columns":[
+          {
+            "header":"Адрес арендуемого помещения *",
+            "accessorKey":"adres_arenduemogo_pomescheniya_adres_arenduemogo_pomescheniya",
+            "columns":[
+              {
+                "header":"Адрес арендуемого помещения *",
+                "accessorKey":"adres_arenduemogo_pomescheniya_adres_arenduemogo_pomescheniya_adres_arenduemogo_pomescheniya",
+                "columns":[
+                  {
+                    "header":"(заполняется авто из табл. \\"INFO\\" в зависимости от выбранного объекта)",
+                    "accessorKey":"adres_arenduemogo_pomescheniya_adres_arenduemogo_pomescheniya_adres_arenduemogo_pomescheniya_zapolnyaetsya_avto_iz_tabl_info_v_zavisimosti_ot_vybrannogo_obekta",
+                    "size":150,
+                    "filterFn":"contains",
+                    "muiTableHeadCellProps":{
+                      "sx":{
+                        "backgroundColor":"#D8D8D8"
+                      }
+                    }
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "header":"Объект **",
+        "accessorKey":"obekt",
+        "columns":[
+          {
+            "header":"Объект **",
+            "accessorKey":"obekt_obekt",
+            "columns":[
+              {
+                "header":"Объект **",
+                "accessorKey":"obekt_obekt_obekt",
+                "columns":[
+                  {
+                    "header":"(необходимо выбрать из списка)",
+                    "accessorKey":"obekt_obekt_obekt_neobkhodimo_vybrat_iz_spiska",
+                    "size":150,
+                    "filterFn":"contains",
+                    "muiTableHeadCellProps":{
+                      "sx":{
+                        "backgroundColor":"#D8D8D8"
+                      }
+                    }
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "header":"Арендуемая площадь",
+        "accessorKey":"arenduemaya_ploschad",
+        "columns":[
+          {
+            "header":"Арендуемая площадь",
+            "accessorKey":"arenduemaya_ploschad_arenduemaya_ploschad",
+            "columns":[
+              {
+                "header":"Арендуемая площадь",
+                "accessorKey":"arenduemaya_ploschad_arenduemaya_ploschad_arenduemaya_ploschad",
+                "columns":[
+                  {
+                    "header":"в кв.м.",
+                    "accessorKey":"arenduemaya_ploschad_arenduemaya_ploschad_arenduemaya_ploschad_v_kvm",
+                    "size":150,
+                    "filterFn":"contains",
+                    "muiTableHeadCellProps":{
+                      "sx":{
+                        "backgroundColor":"#D8D8D8"
+                      }
+                    }
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "header":"Срок окончания договора",
+        "accessorKey":"srok_okonchaniya_dogovora",
+        "columns":[
+          {
+            "header":"Срок окончания договора",
+            "accessorKey":"srok_okonchaniya_dogovora_srok_okonchaniya_dogovora",
+            "columns":[
+              {
+                "header":"Срок окончания договора",
+                "accessorKey":"srok_okonchaniya_dogovora_srok_okonchaniya_dogovora_srok_okonchaniya_dogovora",
+                "columns":[
+                  {
+                    "header":"в формате \\"месяц.год\\"",
+                    "accessorKey":"srok_okonchaniya_dogovora_srok_okonchaniya_dogovora_srok_okonchaniya_dogovora_v_formate_mesyatsgod",
+                    "size":150,
+                    "filterFn":"contains",
+                    "muiTableHeadCellProps":{
+                      "sx":{
+                        "backgroundColor":"#D8D8D8"
+                      }
+                    }
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "header":" ",
+        "columns":[
+          {
+            "header":"Номер договора",
+            "accessorKey":"nomer_dogovora",
+            "columns":[
+              {
+                "header":"Номер договора",
+                "accessorKey":"nomer_dogovora_nomer_dogovora",
+                "columns":[
+                  {
+                    "header":"Номер договора",
+                    "accessorKey":"nomer_dogovora_nomer_dogovora_nomer_dogovora",
+                    "size":150,
+                    "filterFn":"contains"
+                  }
+                ]
+              }
+            ]
+          }
+        ],
+        "muiTableHeadCellProps":{
+          "sx":{
+            "backgroundColor":"#f5f5f5"
+          }
+        }
+      },
+      {
+        "header":" ",
+        "columns":[
+          {
+            "header":"Планируемая сумма расходов на 2026 год",
+            "accessorKey":"planiruemaya_summa_raskhodov_na_2026_god",
+            "columns":[
+              {
+                "header":"I квартал",
+                "accessorKey":"planiruemaya_summa_raskhodov_na_2026_god_i_kvartal",
+                "columns":[
+                  {
+                    "header":"I квартал",
+                    "accessorKey":"planiruemaya_summa_raskhodov_na_2026_god_i_kvartal_i_kvartal",
+                    "size":150,
+                    "filterFn":"contains"
+                  }
+                ]
+              },
+              {
+                "header":"II квартал",
+                "accessorKey":"planiruemaya_summa_raskhodov_na_2026_god_ii_kvartal",
+                "columns":[
+                  {
+                    "header":"II квартал",
+                    "accessorKey":"planiruemaya_summa_raskhodov_na_2026_god_ii_kvartal_ii_kvartal",
+                    "size":150,
+                    "filterFn":"contains"
+                  }
+                ]
+              },
+              {
+                "header":"III квартал",
+                "accessorKey":"planiruemaya_summa_raskhodov_na_2026_god_iii_kvartal",
+                "columns":[
+                  {
+                    "header":"III квартал",
+                    "accessorKey":"planiruemaya_summa_raskhodov_na_2026_god_iii_kvartal_iii_kvartal",
+                    "size":150,
+                    "filterFn":"contains"
+                  }
+                ]
+              },
+              {
+                "header":"IV квартал",
+                "accessorKey":"planiruemaya_summa_raskhodov_na_2026_god_iv_kvartal",
+                "columns":[
+                  {
+                    "header":"IV квартал",
+                    "accessorKey":"planiruemaya_summa_raskhodov_na_2026_god_iv_kvartal_iv_kvartal",
+                    "size":150,
+                    "filterFn":"contains"
+                  }
+                ]
+              }
+            ]
+          }
+        ],
+        "muiTableHeadCellProps":{
+          "sx":{
+            "backgroundColor":"#f5f5f5"
+          }
+        }
+      },
+      {
+        "header":"Комментарий",
+        "accessorKey":"kommentariy",
+        "columns":[
+          {
+            "header":"Комментарий",
+            "accessorKey":"kommentariy_kommentariy",
+            "columns":[
+              {
+                "header":"Комментарий",
+                "accessorKey":"kommentariy_kommentariy_kommentariy",
+                "columns":[
+                  {
+                    "header":"Комментарий",
+                    "accessorKey":"kommentariy_kommentariy_kommentariy_kommentariy",
+                    "size":150,
+                    "filterFn":"contains"
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "header":"Фактические расходы за I кв 2026 года",
+        "accessorKey":"fakticheskie_raskhody_za_i_kv_2026_goda",
+        "columns":[
+          {
+            "header":"январь",
+            "accessorKey":"fakticheskie_raskhody_za_i_kv_2026_goda_yanvar",
+            "columns":[
+              {
+                "header":"январь",
+                "accessorKey":"fakticheskie_raskhody_za_i_kv_2026_goda_yanvar_yanvar",
+                "columns":[
+                  {
+                    "header":"в тыс. рублей",
+                    "accessorKey":"fakticheskie_raskhody_za_i_kv_2026_goda_yanvar_yanvar_v_tys_rubley",
+                    "size":150,
+                    "filterFn":"contains",
+                    "muiTableHeadCellProps":{
+                      "sx":{
+                        "backgroundColor":"#D8D8D8"
+                      }
+                    }
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            "header":"февраль",
+            "accessorKey":"fakticheskie_raskhody_za_i_kv_2026_goda_fevral",
+            "columns":[
+              {
+                "header":"февраль",
+                "accessorKey":"fakticheskie_raskhody_za_i_kv_2026_goda_fevral_fevral",
+                "columns":[
+                  {
+                    "header":"в тыс. рублей",
+                    "accessorKey":"fakticheskie_raskhody_za_i_kv_2026_goda_fevral_fevral_v_tys_rubley",
+                    "size":150,
+                    "filterFn":"contains"
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            "header":"март",
+            "accessorKey":"fakticheskie_raskhody_za_i_kv_2026_goda_mart",
+            "columns":[
+              {
+                "header":"март",
+                "accessorKey":"fakticheskie_raskhody_za_i_kv_2026_goda_mart_mart",
+                "columns":[
+                  {
+                    "header":"в тыс. рублей",
+                    "accessorKey":"fakticheskie_raskhody_za_i_kv_2026_goda_mart_mart_v_tys_rubley",
+                    "size":150,
+                    "filterFn":"contains"
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            "header":"Итог I кв",
+            "accessorKey":"fakticheskie_raskhody_za_i_kv_2026_goda_itog_i_kv",
+            "columns":[
+              {
+                "header":"Итог I кв",
+                "accessorKey":"fakticheskie_raskhody_za_i_kv_2026_goda_itog_i_kv_itog_i_kv",
+                "columns":[
+                  {
+                    "header":"в тыс. рублей",
+                    "accessorKey":"fakticheskie_raskhody_za_i_kv_2026_goda_itog_i_kv_itog_i_kv_v_tys_rubley",
+                    "size":150,
+                    "filterFn":"contains"
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "header":"Фактические расходы за II кв 2026 года",
+        "accessorKey":"fakticheskie_raskhody_za_ii_kv_2026_goda",
+        "columns":[
+          {
+            "header":"апрель",
+            "accessorKey":"fakticheskie_raskhody_za_ii_kv_2026_goda_aprel",
+            "columns":[
+              {
+                "header":"апрель",
+                "accessorKey":"fakticheskie_raskhody_za_ii_kv_2026_goda_aprel_aprel",
+                "columns":[
+                  {
+                    "header":"в тыс. рублей",
+                    "accessorKey":"fakticheskie_raskhody_za_ii_kv_2026_goda_aprel_aprel_v_tys_rubley",
+                    "size":150,
+                    "filterFn":"contains",
+                    "muiTableHeadCellProps":{
+                      "sx":{
+                        "backgroundColor":"#D8D8D8"
+                      }
+                    }
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            "header":"май",
+            "accessorKey":"fakticheskie_raskhody_za_ii_kv_2026_goda_may",
+            "columns":[
+              {
+                "header":"май",
+                "accessorKey":"fakticheskie_raskhody_za_ii_kv_2026_goda_may_may",
+                "columns":[
+                  {
+                    "header":"в тыс. рублей",
+                    "accessorKey":"fakticheskie_raskhody_za_ii_kv_2026_goda_may_may_v_tys_rubley",
+                    "size":150,
+                    "filterFn":"contains"
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            "header":"июнь",
+            "accessorKey":"fakticheskie_raskhody_za_ii_kv_2026_goda_iyun",
+            "columns":[
+              {
+                "header":"июнь",
+                "accessorKey":"fakticheskie_raskhody_za_ii_kv_2026_goda_iyun_iyun",
+                "columns":[
+                  {
+                    "header":"в тыс. рублей",
+                    "accessorKey":"fakticheskie_raskhody_za_ii_kv_2026_goda_iyun_iyun_v_tys_rubley",
+                    "size":150,
+                    "filterFn":"contains"
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            "header":"Итог II кв",
+            "accessorKey":"fakticheskie_raskhody_za_ii_kv_2026_goda_itog_ii_kv",
+            "columns":[
+              {
+                "header":"Итог II кв",
+                "accessorKey":"fakticheskie_raskhody_za_ii_kv_2026_goda_itog_ii_kv_itog_ii_kv",
+                "columns":[
+                  {
+                    "header":"в тыс. рублей",
+                    "accessorKey":"fakticheskie_raskhody_za_ii_kv_2026_goda_itog_ii_kv_itog_ii_kv_v_tys_rubley",
+                    "size":150,
+                    "filterFn":"contains"
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "header":"Фактические расходы за III кв 2026 года",
+        "accessorKey":"fakticheskie_raskhody_za_iii_kv_2026_goda",
+        "columns":[
+          {
+            "header":"июль",
+            "accessorKey":"fakticheskie_raskhody_za_iii_kv_2026_goda_iyul",
+            "columns":[
+              {
+                "header":"июль",
+                "accessorKey":"fakticheskie_raskhody_za_iii_kv_2026_goda_iyul_iyul",
+                "columns":[
+                  {
+                    "header":"в тыс. рублей",
+                    "accessorKey":"fakticheskie_raskhody_za_iii_kv_2026_goda_iyul_iyul_v_tys_rubley",
+                    "size":150,
+                    "filterFn":"contains",
+                    "muiTableHeadCellProps":{
+                      "sx":{
+                        "backgroundColor":"#D8D8D8"
+                      }
+                    }
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            "header":"август",
+            "accessorKey":"fakticheskie_raskhody_za_iii_kv_2026_goda_avgust",
+            "columns":[
+              {
+                "header":"август",
+                "accessorKey":"fakticheskie_raskhody_za_iii_kv_2026_goda_avgust_avgust",
+                "columns":[
+                  {
+                    "header":"в тыс. рублей",
+                    "accessorKey":"fakticheskie_raskhody_za_iii_kv_2026_goda_avgust_avgust_v_tys_rubley",
+                    "size":150,
+                    "filterFn":"contains"
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            "header":"сентябрь",
+            "accessorKey":"fakticheskie_raskhody_za_iii_kv_2026_goda_sentyabr",
+            "columns":[
+              {
+                "header":"сентябрь",
+                "accessorKey":"fakticheskie_raskhody_za_iii_kv_2026_goda_sentyabr_sentyabr",
+                "columns":[
+                  {
+                    "header":"в тыс. рублей",
+                    "accessorKey":"fakticheskie_raskhody_za_iii_kv_2026_goda_sentyabr_sentyabr_v_tys_rubley",
+                    "size":150,
+                    "filterFn":"contains"
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            "header":"Итог III кв",
+            "accessorKey":"fakticheskie_raskhody_za_iii_kv_2026_goda_itog_iii_kv",
+            "columns":[
+              {
+                "header":"Итог III кв",
+                "accessorKey":"fakticheskie_raskhody_za_iii_kv_2026_goda_itog_iii_kv_itog_iii_kv",
+                "columns":[
+                  {
+                    "header":"в тыс. рублей",
+                    "accessorKey":"fakticheskie_raskhody_za_iii_kv_2026_goda_itog_iii_kv_itog_iii_kv_v_tys_rubley",
+                    "size":150,
+                    "filterFn":"contains"
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "header":"Фактические расходы за IV кв 2026 года",
+        "accessorKey":"fakticheskie_raskhody_za_iv_kv_2026_goda",
+        "columns":[
+          {
+            "header":"октябрь",
+            "accessorKey":"fakticheskie_raskhody_za_iv_kv_2026_goda_oktyabr",
+            "columns":[
+              {
+                "header":"октябрь",
+                "accessorKey":"fakticheskie_raskhody_za_iv_kv_2026_goda_oktyabr_oktyabr",
+                "columns":[
+                  {
+                    "header":"в тыс. рублей",
+                    "accessorKey":"fakticheskie_raskhody_za_iv_kv_2026_goda_oktyabr_oktyabr_v_tys_rubley",
+                    "size":150,
+                    "filterFn":"contains",
+                    "muiTableHeadCellProps":{
+                      "sx":{
+                        "backgroundColor":"#D8D8D8"
+                      }
+                    }
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            "header":"ноябрь",
+            "accessorKey":"fakticheskie_raskhody_za_iv_kv_2026_goda_noyabr",
+            "columns":[
+              {
+                "header":"ноябрь",
+                "accessorKey":"fakticheskie_raskhody_za_iv_kv_2026_goda_noyabr_noyabr",
+                "columns":[
+                  {
+                    "header":"в тыс. рублей",
+                    "accessorKey":"fakticheskie_raskhody_za_iv_kv_2026_goda_noyabr_noyabr_v_tys_rubley",
+                    "size":150,
+                    "filterFn":"contains"
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            "header":"декабрь",
+            "accessorKey":"fakticheskie_raskhody_za_iv_kv_2026_goda_dekabr",
+            "columns":[
+              {
+                "header":"декабрь",
+                "accessorKey":"fakticheskie_raskhody_za_iv_kv_2026_goda_dekabr_dekabr",
+                "columns":[
+                  {
+                    "header":"в тыс. рублей",
+                    "accessorKey":"fakticheskie_raskhody_za_iv_kv_2026_goda_dekabr_dekabr_v_tys_rubley",
+                    "size":150,
+                    "filterFn":"contains"
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            "header":"СПОД",
+            "accessorKey":"fakticheskie_raskhody_za_iv_kv_2026_goda_spod",
+            "columns":[
+              {
+                "header":"СПОД",
+                "accessorKey":"fakticheskie_raskhody_za_iv_kv_2026_goda_spod_spod",
+                "columns":[
+                  {
+                    "header":"в тыс. рублей",
+                    "accessorKey":"fakticheskie_raskhody_za_iv_kv_2026_goda_spod_spod_v_tys_rubley",
+                    "size":150,
+                    "filterFn":"contains"
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            "header":"Итог IV кв",
+            "accessorKey":"fakticheskie_raskhody_za_iv_kv_2026_goda_itog_iv_kv",
+            "columns":[
+              {
+                "header":"Итог IV кв",
+                "accessorKey":"fakticheskie_raskhody_za_iv_kv_2026_goda_itog_iv_kv_itog_iv_kv",
+                "columns":[
+                  {
+                    "header":"в тыс. рублей",
+                    "accessorKey":"fakticheskie_raskhody_za_iv_kv_2026_goda_itog_iv_kv_itog_iv_kv_v_tys_rubley",
+                    "size":150,
+                    "filterFn":"contains"
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  }
+}

web/src/components/RealtimeTable/constants/FORM_2/AHR_security.js

@@ -0,0 +1,702 @@
+
+                            import {
+                                greenColumn,
+                                whiteColumn,
+                                orangeColumn,
+                                yellowColumn,
+                                redColumn,
+                                blueColumn,
+                                } from '../columnColors';
+                              export const config = {
+  "config":{
+    "colors":{
+      "pp_pp_pp_pp":{
+        "color_type":whiteColumn,
+        "accessorKey":"pp_pp_pp_pp"
+      },
+      "adres_okhranyaemogo_obekta_adres_okhranyaemogo_obekta_adres_okhranyaemogo_obekta_zapolnyaetsya_avto_iz_tabl_info_v_zavisimosti_ot_vybrannogo_obekta":{
+        "color_type":whiteColumn,
+        "accessorKey":"adres_okhranyaemogo_obekta_adres_okhranyaemogo_obekta_adres_okhranyaemogo_obekta_zapolnyaetsya_avto_iz_tabl_info_v_zavisimosti_ot_vybrannogo_obekta"
+      },
+      "obekt_obekt_obekt_neobkhodimo_vybrat_iz_spiska":{
+        "color_type":whiteColumn,
+        "accessorKey":"obekt_obekt_obekt_neobkhodimo_vybrat_iz_spiska"
+      },
+      "nomer_dogovora_nomer_dogovora_nomer_dogovora":{
+        "color_type":whiteColumn,
+        "accessorKey":"nomer_dogovora_nomer_dogovora_nomer_dogovora"
+      },
+      "srok_okonchaniya_dogovora_srok_okonchaniya_dogovora_srok_okonchaniya_dogovora_v_formate_mesyatsgod":{
+        "color_type":whiteColumn,
+        "accessorKey":"srok_okonchaniya_dogovora_srok_okonchaniya_dogovora_srok_okonchaniya_dogovora_v_formate_mesyatsgod"
+      },
+      "planiruemaya_summa_raskhodov_na_2026_god_i_kvartal_i_kvartal":{
+        "color_type":whiteColumn,
+        "accessorKey":"planiruemaya_summa_raskhodov_na_2026_god_i_kvartal_i_kvartal"
+      },
+      "planiruemaya_summa_raskhodov_na_2026_god_ii_kvartal_ii_kvartal":{
+        "color_type":whiteColumn,
+        "accessorKey":"planiruemaya_summa_raskhodov_na_2026_god_ii_kvartal_ii_kvartal"
+      },
+      "planiruemaya_summa_raskhodov_na_2026_god_iii_kvartal_iii_kvartal":{
+        "color_type":whiteColumn,
+        "accessorKey":"planiruemaya_summa_raskhodov_na_2026_god_iii_kvartal_iii_kvartal"
+      },
+      "planiruemaya_summa_raskhodov_na_2026_god_iv_kvartal_iv_kvartal":{
+        "color_type":whiteColumn,
+        "accessorKey":"planiruemaya_summa_raskhodov_na_2026_god_iv_kvartal_iv_kvartal"
+      },
+      "kommentariy_kommentariy_kommentariy_kommentariy":{
+        "color_type":whiteColumn,
+        "accessorKey":"kommentariy_kommentariy_kommentariy_kommentariy"
+      },
+      "fakticheskie_raskhody_za_i_kv_2026_goda_yanvar_yanvar_v_tys_rubley":{
+        "color_type":whiteColumn,
+        "accessorKey":"fakticheskie_raskhody_za_i_kv_2026_goda_yanvar_yanvar_v_tys_rubley"
+      },
+      "fakticheskie_raskhody_za_i_kv_2026_goda_fevral_fevral_v_tys_rubley":{
+        "color_type":whiteColumn,
+        "accessorKey":"fakticheskie_raskhody_za_i_kv_2026_goda_fevral_fevral_v_tys_rubley"
+      },
+      "fakticheskie_raskhody_za_i_kv_2026_goda_mart_mart_v_tys_rubley":{
+        "color_type":whiteColumn,
+        "accessorKey":"fakticheskie_raskhody_za_i_kv_2026_goda_mart_mart_v_tys_rubley"
+      },
+      "fakticheskie_raskhody_za_i_kv_2026_goda_itog_i_kv_itog_i_kv_v_tys_rubley":{
+        "color_type":whiteColumn,
+        "accessorKey":"fakticheskie_raskhody_za_i_kv_2026_goda_itog_i_kv_itog_i_kv_v_tys_rubley"
+      },
+      "fakticheskie_raskhody_za_ii_kv_2026_goda_aprel_aprel_v_tys_rubley":{
+        "color_type":whiteColumn,
+        "accessorKey":"fakticheskie_raskhody_za_ii_kv_2026_goda_aprel_aprel_v_tys_rubley"
+      },
+      "fakticheskie_raskhody_za_ii_kv_2026_goda_may_may_v_tys_rubley":{
+        "color_type":whiteColumn,
+        "accessorKey":"fakticheskie_raskhody_za_ii_kv_2026_goda_may_may_v_tys_rubley"
+      },
+      "fakticheskie_raskhody_za_ii_kv_2026_goda_iyun_iyun_v_tys_rubley":{
+        "color_type":whiteColumn,
+        "accessorKey":"fakticheskie_raskhody_za_ii_kv_2026_goda_iyun_iyun_v_tys_rubley"
+      },
+      "fakticheskie_raskhody_za_ii_kv_2026_goda_itog_ii_kv_itog_ii_kv_v_tys_rubley":{
+        "color_type":whiteColumn,
+        "accessorKey":"fakticheskie_raskhody_za_ii_kv_2026_goda_itog_ii_kv_itog_ii_kv_v_tys_rubley"
+      },
+      "fakticheskie_raskhody_za_iii_kv_2026_goda_iyul_iyul_v_tys_rubley":{
+        "color_type":whiteColumn,
+        "accessorKey":"fakticheskie_raskhody_za_iii_kv_2026_goda_iyul_iyul_v_tys_rubley"
+      },
+      "fakticheskie_raskhody_za_iii_kv_2026_goda_avgust_avgust_v_tys_rubley":{
+        "color_type":whiteColumn,
+        "accessorKey":"fakticheskie_raskhody_za_iii_kv_2026_goda_avgust_avgust_v_tys_rubley"
+      },
+      "fakticheskie_raskhody_za_iii_kv_2026_goda_sentyabr_sentyabr_v_tys_rubley":{
+        "color_type":whiteColumn,
+        "accessorKey":"fakticheskie_raskhody_za_iii_kv_2026_goda_sentyabr_sentyabr_v_tys_rubley"
+      },
+      "fakticheskie_raskhody_za_iii_kv_2026_goda_itog_iii_kv_itog_iii_kv_v_tys_rubley":{
+        "color_type":whiteColumn,
+        "accessorKey":"fakticheskie_raskhody_za_iii_kv_2026_goda_itog_iii_kv_itog_iii_kv_v_tys_rubley"
+      },
+      "fakticheskie_raskhody_za_iv_kv_2026_goda_oktyabr_oktyabr_v_tys_rubley":{
+        "color_type":whiteColumn,
+        "accessorKey":"fakticheskie_raskhody_za_iv_kv_2026_goda_oktyabr_oktyabr_v_tys_rubley"
+      },
+      "fakticheskie_raskhody_za_iv_kv_2026_goda_noyabr_noyabr_v_tys_rubley":{
+        "color_type":whiteColumn,
+        "accessorKey":"fakticheskie_raskhody_za_iv_kv_2026_goda_noyabr_noyabr_v_tys_rubley"
+      },
+      "fakticheskie_raskhody_za_iv_kv_2026_goda_dekabr_dekabr_v_tys_rubley":{
+        "color_type":whiteColumn,
+        "accessorKey":"fakticheskie_raskhody_za_iv_kv_2026_goda_dekabr_dekabr_v_tys_rubley"
+      },
+      "fakticheskie_raskhody_za_iv_kv_2026_goda_spod_spod_v_tys_rubley":{
+        "color_type":whiteColumn,
+        "accessorKey":"fakticheskie_raskhody_za_iv_kv_2026_goda_spod_spod_v_tys_rubley"
+      },
+      "fakticheskie_raskhody_za_iv_kv_2026_goda_itog_iv_kv_itog_iv_kv_v_tys_rubley":{
+        "color_type":whiteColumn,
+        "accessorKey":"fakticheskie_raskhody_za_iv_kv_2026_goda_itog_iv_kv_itog_iv_kv_v_tys_rubley"
+      }
+    },
+    "columns":[
+      {
+        "header":"№ п\\/п",
+        "accessorKey":"pp",
+        "columns":[
+          {
+            "header":"№ п\\/п",
+            "accessorKey":"pp_pp",
+            "columns":[
+              {
+                "header":"№ п\\/п",
+                "accessorKey":"pp_pp_pp",
+                "columns":[
+                  {
+                    "header":"№ п\\/п",
+                    "accessorKey":"pp_pp_pp_pp",
+                    "size":150,
+                    "filterFn":"contains"
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "header":"Адрес охраняемого объекта *",
+        "accessorKey":"adres_okhranyaemogo_obekta",
+        "columns":[
+          {
+            "header":"Адрес охраняемого объекта *",
+            "accessorKey":"adres_okhranyaemogo_obekta_adres_okhranyaemogo_obekta",
+            "columns":[
+              {
+                "header":"Адрес охраняемого объекта *",
+                "accessorKey":"adres_okhranyaemogo_obekta_adres_okhranyaemogo_obekta_adres_okhranyaemogo_obekta",
+                "columns":[
+                  {
+                    "header":"(заполняется авто из табл. \\"INFO\\" в зависимости от выбранного объекта)",
+                    "accessorKey":"adres_okhranyaemogo_obekta_adres_okhranyaemogo_obekta_adres_okhranyaemogo_obekta_zapolnyaetsya_avto_iz_tabl_info_v_zavisimosti_ot_vybrannogo_obekta",
+                    "size":150,
+                    "filterFn":"contains",
+                    "muiTableHeadCellProps":{
+                      "sx":{
+                        "backgroundColor":"#D8D8D8"
+                      }
+                    }
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "header":"Объект **",
+        "accessorKey":"obekt",
+        "columns":[
+          {
+            "header":"Объект **",
+            "accessorKey":"obekt_obekt",
+            "columns":[
+              {
+                "header":"Объект **",
+                "accessorKey":"obekt_obekt_obekt",
+                "columns":[
+                  {
+                    "header":"(необходимо выбрать из списка)",
+                    "accessorKey":"obekt_obekt_obekt_neobkhodimo_vybrat_iz_spiska",
+                    "size":150,
+                    "filterFn":"contains",
+                    "muiTableHeadCellProps":{
+                      "sx":{
+                        "backgroundColor":"#D8D8D8"
+                      }
+                    }
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "header":" ",
+        "columns":[
+          {
+            "header":"Номер договора",
+            "accessorKey":"nomer_dogovora",
+            "columns":[
+              {
+                "header":"Номер договора",
+                "accessorKey":"nomer_dogovora_nomer_dogovora",
+                "columns":[
+                  {
+                    "header":"Номер договора",
+                    "accessorKey":"nomer_dogovora_nomer_dogovora_nomer_dogovora",
+                    "size":150,
+                    "filterFn":"contains"
+                  }
+                ]
+              }
+            ]
+          }
+        ],
+        "muiTableHeadCellProps":{
+          "sx":{
+            "backgroundColor":"#f5f5f5"
+          }
+        }
+      },
+      {
+        "header":"Срок окончания договора",
+        "accessorKey":"srok_okonchaniya_dogovora",
+        "columns":[
+          {
+            "header":"Срок окончания договора",
+            "accessorKey":"srok_okonchaniya_dogovora_srok_okonchaniya_dogovora",
+            "columns":[
+              {
+                "header":"Срок окончания договора",
+                "accessorKey":"srok_okonchaniya_dogovora_srok_okonchaniya_dogovora_srok_okonchaniya_dogovora",
+                "columns":[
+                  {
+                    "header":"в формате \\"месяц.год\\"",
+                    "accessorKey":"srok_okonchaniya_dogovora_srok_okonchaniya_dogovora_srok_okonchaniya_dogovora_v_formate_mesyatsgod",
+                    "size":150,
+                    "filterFn":"contains",
+                    "muiTableHeadCellProps":{
+                      "sx":{
+                        "backgroundColor":"#D8D8D8"
+                      }
+                    }
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "header":" ",
+        "columns":[
+          {
+            "header":"Планируемая сумма расходов на 2026 год",
+            "accessorKey":"planiruemaya_summa_raskhodov_na_2026_god",
+            "columns":[
+              {
+                "header":"I квартал",
+                "accessorKey":"planiruemaya_summa_raskhodov_na_2026_god_i_kvartal",
+                "columns":[
+                  {
+                    "header":"I квартал",
+                    "accessorKey":"planiruemaya_summa_raskhodov_na_2026_god_i_kvartal_i_kvartal",
+                    "size":150,
+                    "filterFn":"contains"
+                  }
+                ]
+              },
+              {
+                "header":"II квартал",
+                "accessorKey":"planiruemaya_summa_raskhodov_na_2026_god_ii_kvartal",
+                "columns":[
+                  {
+                    "header":"II квартал",
+                    "accessorKey":"planiruemaya_summa_raskhodov_na_2026_god_ii_kvartal_ii_kvartal",
+                    "size":150,
+                    "filterFn":"contains"
+                  }
+                ]
+              },
+              {
+                "header":"III квартал",
+                "accessorKey":"planiruemaya_summa_raskhodov_na_2026_god_iii_kvartal",
+                "columns":[
+                  {
+                    "header":"III квартал",
+                    "accessorKey":"planiruemaya_summa_raskhodov_na_2026_god_iii_kvartal_iii_kvartal",
+                    "size":150,
+                    "filterFn":"contains"
+                  }
+                ]
+              },
+              {
+                "header":"IV квартал",
+                "accessorKey":"planiruemaya_summa_raskhodov_na_2026_god_iv_kvartal",
+                "columns":[
+                  {
+                    "header":"IV квартал",
+                    "accessorKey":"planiruemaya_summa_raskhodov_na_2026_god_iv_kvartal_iv_kvartal",
+                    "size":150,
+                    "filterFn":"contains"
+                  }
+                ]
+              }
+            ]
+          }
+        ],
+        "muiTableHeadCellProps":{
+          "sx":{
+            "backgroundColor":"#f5f5f5"
+          }
+        }
+      },
+      {
+        "header":"Комментарий",
+        "accessorKey":"kommentariy",
+        "columns":[
+          {
+            "header":"Комментарий",
+            "accessorKey":"kommentariy_kommentariy",
+            "columns":[
+              {
+                "header":"Комментарий",
+                "accessorKey":"kommentariy_kommentariy_kommentariy",
+                "columns":[
+                  {
+                    "header":"Комментарий",
+                    "accessorKey":"kommentariy_kommentariy_kommentariy_kommentariy",
+                    "size":150,
+                    "filterFn":"contains"
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "header":"Фактические расходы за I кв 2026 года",
+        "accessorKey":"fakticheskie_raskhody_za_i_kv_2026_goda",
+        "columns":[
+          {
+            "header":"январь",
+            "accessorKey":"fakticheskie_raskhody_za_i_kv_2026_goda_yanvar",
+            "columns":[
+              {
+                "header":"январь",
+                "accessorKey":"fakticheskie_raskhody_za_i_kv_2026_goda_yanvar_yanvar",
+                "columns":[
+                  {
+                    "header":"в тыс. рублей",
+                    "accessorKey":"fakticheskie_raskhody_za_i_kv_2026_goda_yanvar_yanvar_v_tys_rubley",
+                    "size":150,
+                    "filterFn":"contains",
+                    "muiTableHeadCellProps":{
+                      "sx":{
+                        "backgroundColor":"#D8D8D8"
+                      }
+                    }
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            "header":"февраль",
+            "accessorKey":"fakticheskie_raskhody_za_i_kv_2026_goda_fevral",
+            "columns":[
+              {
+                "header":"февраль",
+                "accessorKey":"fakticheskie_raskhody_za_i_kv_2026_goda_fevral_fevral",
+                "columns":[
+                  {
+                    "header":"в тыс. рублей",
+                    "accessorKey":"fakticheskie_raskhody_za_i_kv_2026_goda_fevral_fevral_v_tys_rubley",
+                    "size":150,
+                    "filterFn":"contains"
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            "header":"март",
+            "accessorKey":"fakticheskie_raskhody_za_i_kv_2026_goda_mart",
+            "columns":[
+              {
+                "header":"март",
+                "accessorKey":"fakticheskie_raskhody_za_i_kv_2026_goda_mart_mart",
+                "columns":[
+                  {
+                    "header":"в тыс. рублей",
+                    "accessorKey":"fakticheskie_raskhody_za_i_kv_2026_goda_mart_mart_v_tys_rubley",
+                    "size":150,
+                    "filterFn":"contains"
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            "header":"Итог I кв",
+            "accessorKey":"fakticheskie_raskhody_za_i_kv_2026_goda_itog_i_kv",
+            "columns":[
+              {
+                "header":"Итог I кв",
+                "accessorKey":"fakticheskie_raskhody_za_i_kv_2026_goda_itog_i_kv_itog_i_kv",
+                "columns":[
+                  {
+                    "header":"в тыс. рублей",
+                    "accessorKey":"fakticheskie_raskhody_za_i_kv_2026_goda_itog_i_kv_itog_i_kv_v_tys_rubley",
+                    "size":150,
+                    "filterFn":"contains"
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "header":"Фактические расходы за II кв 2026 года",
+        "accessorKey":"fakticheskie_raskhody_za_ii_kv_2026_goda",
+        "columns":[
+          {
+            "header":"апрель",
+            "accessorKey":"fakticheskie_raskhody_za_ii_kv_2026_goda_aprel",
+            "columns":[
+              {
+                "header":"апрель",
+                "accessorKey":"fakticheskie_raskhody_za_ii_kv_2026_goda_aprel_aprel",
+                "columns":[
+                  {
+                    "header":"в тыс. рублей",
+                    "accessorKey":"fakticheskie_raskhody_za_ii_kv_2026_goda_aprel_aprel_v_tys_rubley",
+                    "size":150,
+                    "filterFn":"contains",
+                    "muiTableHeadCellProps":{
+                      "sx":{
+                        "backgroundColor":"#D8D8D8"
+                      }
+                    }
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            "header":"май",
+            "accessorKey":"fakticheskie_raskhody_za_ii_kv_2026_goda_may",
+            "columns":[
+              {
+                "header":"май",
+                "accessorKey":"fakticheskie_raskhody_za_ii_kv_2026_goda_may_may",
+                "columns":[
+                  {
+                    "header":"в тыс. рублей",
+                    "accessorKey":"fakticheskie_raskhody_za_ii_kv_2026_goda_may_may_v_tys_rubley",
+                    "size":150,
+                    "filterFn":"contains"
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            "header":"июнь",
+            "accessorKey":"fakticheskie_raskhody_za_ii_kv_2026_goda_iyun",
+            "columns":[
+              {
+                "header":"июнь",
+                "accessorKey":"fakticheskie_raskhody_za_ii_kv_2026_goda_iyun_iyun",
+                "columns":[
+                  {
+                    "header":"в тыс. рублей",
+                    "accessorKey":"fakticheskie_raskhody_za_ii_kv_2026_goda_iyun_iyun_v_tys_rubley",
+                    "size":150,
+                    "filterFn":"contains"
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            "header":"Итог II кв",
+            "accessorKey":"fakticheskie_raskhody_za_ii_kv_2026_goda_itog_ii_kv",
+            "columns":[
+              {
+                "header":"Итог II кв",
+                "accessorKey":"fakticheskie_raskhody_za_ii_kv_2026_goda_itog_ii_kv_itog_ii_kv",
+                "columns":[
+                  {
+                    "header":"в тыс. рублей",
+                    "accessorKey":"fakticheskie_raskhody_za_ii_kv_2026_goda_itog_ii_kv_itog_ii_kv_v_tys_rubley",
+                    "size":150,
+                    "filterFn":"contains"
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "header":"Фактические расходы за III кв 2026 года",
+        "accessorKey":"fakticheskie_raskhody_za_iii_kv_2026_goda",
+        "columns":[
+          {
+            "header":"июль",
+            "accessorKey":"fakticheskie_raskhody_za_iii_kv_2026_goda_iyul",
+            "columns":[
+              {
+                "header":"июль",
+                "accessorKey":"fakticheskie_raskhody_za_iii_kv_2026_goda_iyul_iyul",
+                "columns":[
+                  {
+                    "header":"в тыс. рублей",
+                    "accessorKey":"fakticheskie_raskhody_za_iii_kv_2026_goda_iyul_iyul_v_tys_rubley",
+                    "size":150,
+                    "filterFn":"contains",
+                    "muiTableHeadCellProps":{
+                      "sx":{
+                        "backgroundColor":"#D8D8D8"
+                      }
+                    }
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            "header":"август",
+            "accessorKey":"fakticheskie_raskhody_za_iii_kv_2026_goda_avgust",
+            "columns":[
+              {
+                "header":"август",
+                "accessorKey":"fakticheskie_raskhody_za_iii_kv_2026_goda_avgust_avgust",
+                "columns":[
+                  {
+                    "header":"в тыс. рублей",
+                    "accessorKey":"fakticheskie_raskhody_za_iii_kv_2026_goda_avgust_avgust_v_tys_rubley",
+                    "size":150,
+                    "filterFn":"contains"
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            "header":"сентябрь",
+            "accessorKey":"fakticheskie_raskhody_za_iii_kv_2026_goda_sentyabr",
+            "columns":[
+              {
+                "header":"сентябрь",
+                "accessorKey":"fakticheskie_raskhody_za_iii_kv_2026_goda_sentyabr_sentyabr",
+                "columns":[
+                  {
+                    "header":"в тыс. рублей",
+                    "accessorKey":"fakticheskie_raskhody_za_iii_kv_2026_goda_sentyabr_sentyabr_v_tys_rubley",
+                    "size":150,
+                    "filterFn":"contains"
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            "header":"Итог III кв",
+            "accessorKey":"fakticheskie_raskhody_za_iii_kv_2026_goda_itog_iii_kv",
+            "columns":[
+              {
+                "header":"Итог III кв",
+                "accessorKey":"fakticheskie_raskhody_za_iii_kv_2026_goda_itog_iii_kv_itog_iii_kv",
+                "columns":[
+                  {
+                    "header":"в тыс. рублей",
+                    "accessorKey":"fakticheskie_raskhody_za_iii_kv_2026_goda_itog_iii_kv_itog_iii_kv_v_tys_rubley",
+                    "size":150,
+                    "filterFn":"contains"
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "header":"Фактические расходы за IV кв 2026 года",
+        "accessorKey":"fakticheskie_raskhody_za_iv_kv_2026_goda",
+        "columns":[
+          {
+            "header":"октябрь",
+            "accessorKey":"fakticheskie_raskhody_za_iv_kv_2026_goda_oktyabr",
+            "columns":[
+              {
+                "header":"октябрь",
+                "accessorKey":"fakticheskie_raskhody_za_iv_kv_2026_goda_oktyabr_oktyabr",
+                "columns":[
+                  {
+                    "header":"в тыс. рублей",
+                    "accessorKey":"fakticheskie_raskhody_za_iv_kv_2026_goda_oktyabr_oktyabr_v_tys_rubley",
+                    "size":150,
+                    "filterFn":"contains",
+                    "muiTableHeadCellProps":{
+                      "sx":{
+                        "backgroundColor":"#D8D8D8"
+                      }
+                    }
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            "header":"ноябрь",
+            "accessorKey":"fakticheskie_raskhody_za_iv_kv_2026_goda_noyabr",
+            "columns":[
+              {
+                "header":"ноябрь",
+                "accessorKey":"fakticheskie_raskhody_za_iv_kv_2026_goda_noyabr_noyabr",
+                "columns":[
+                  {
+                    "header":"в тыс. рублей",
+                    "accessorKey":"fakticheskie_raskhody_za_iv_kv_2026_goda_noyabr_noyabr_v_tys_rubley",
+                    "size":150,
+                    "filterFn":"contains"
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            "header":"декабрь",
+            "accessorKey":"fakticheskie_raskhody_za_iv_kv_2026_goda_dekabr",
+            "columns":[
+              {
+                "header":"декабрь",
+                "accessorKey":"fakticheskie_raskhody_za_iv_kv_2026_goda_dekabr_dekabr",
+                "columns":[
+                  {
+                    "header":"в тыс. рублей",
+                    "accessorKey":"fakticheskie_raskhody_za_iv_kv_2026_goda_dekabr_dekabr_v_tys_rubley",
+                    "size":150,
+                    "filterFn":"contains"
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            "header":"СПОД",
+            "accessorKey":"fakticheskie_raskhody_za_iv_kv_2026_goda_spod",
+            "columns":[
+              {
+                "header":"СПОД",
+                "accessorKey":"fakticheskie_raskhody_za_iv_kv_2026_goda_spod_spod",
+                "columns":[
+                  {
+                    "header":"в тыс. рублей",
+                    "accessorKey":"fakticheskie_raskhody_za_iv_kv_2026_goda_spod_spod_v_tys_rubley",
+                    "size":150,
+                    "filterFn":"contains"
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            "header":"Итог IV кв",
+            "accessorKey":"fakticheskie_raskhody_za_iv_kv_2026_goda_itog_iv_kv",
+            "columns":[
+              {
+                "header":"Итог IV кв",
+                "accessorKey":"fakticheskie_raskhody_za_iv_kv_2026_goda_itog_iv_kv_itog_iv_kv",
+                "columns":[
+                  {
+                    "header":"в тыс. рублей",
+                    "accessorKey":"fakticheskie_raskhody_za_iv_kv_2026_goda_itog_iv_kv_itog_iv_kv_v_tys_rubley",
+                    "size":150,
+                    "filterFn":"contains"
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  }
+}

web/src/components/RealtimeTable/constants/FORM_2/AHR_utilities.js

@@ -0,0 +1,702 @@
+
+                            import {
+                                greenColumn,
+                                whiteColumn,
+                                orangeColumn,
+                                yellowColumn,
+                                redColumn,
+                                blueColumn,
+                                } from '../columnColors';
+                              export const config = {
+  "config":{
+    "colors":{
+      "pp_pp_pp_pp":{
+        "color_type":whiteColumn,
+        "accessorKey":"pp_pp_pp_pp"
+      },
+      "adres_obekta_adres_obekta_adres_obekta_zapolnyaetsya_avto_iz_tabl_info_v_zavisimosti_ot_vybrannogo_obekta":{
+        "color_type":whiteColumn,
+        "accessorKey":"adres_obekta_adres_obekta_adres_obekta_zapolnyaetsya_avto_iz_tabl_info_v_zavisimosti_ot_vybrannogo_obekta"
+      },
+      "obekt_obekt_obekt_neobkhodimo_vybrat_iz_spiska":{
+        "color_type":whiteColumn,
+        "accessorKey":"obekt_obekt_obekt_neobkhodimo_vybrat_iz_spiska"
+      },
+      "nomer_dogovora_nomer_dogovora_nomer_dogovora":{
+        "color_type":whiteColumn,
+        "accessorKey":"nomer_dogovora_nomer_dogovora_nomer_dogovora"
+      },
+      "srok_okonchaniya_dogovora_srok_okonchaniya_dogovora_srok_okonchaniya_dogovora_v_formate_mesyatsgod":{
+        "color_type":whiteColumn,
+        "accessorKey":"srok_okonchaniya_dogovora_srok_okonchaniya_dogovora_srok_okonchaniya_dogovora_v_formate_mesyatsgod"
+      },
+      "planiruemaya_summa_raskhodov_na_2026_god_i_kvartal_i_kvartal":{
+        "color_type":whiteColumn,
+        "accessorKey":"planiruemaya_summa_raskhodov_na_2026_god_i_kvartal_i_kvartal"
+      },
+      "planiruemaya_summa_raskhodov_na_2026_god_ii_kvartal_ii_kvartal":{
+        "color_type":whiteColumn,
+        "accessorKey":"planiruemaya_summa_raskhodov_na_2026_god_ii_kvartal_ii_kvartal"
+      },
+      "planiruemaya_summa_raskhodov_na_2026_god_iii_kvartal_iii_kvartal":{
+        "color_type":whiteColumn,
+        "accessorKey":"planiruemaya_summa_raskhodov_na_2026_god_iii_kvartal_iii_kvartal"
+      },
+      "planiruemaya_summa_raskhodov_na_2026_god_iv_kvartal_iv_kvartal":{
+        "color_type":whiteColumn,
+        "accessorKey":"planiruemaya_summa_raskhodov_na_2026_god_iv_kvartal_iv_kvartal"
+      },
+      "kommentariy_kommentariy_kommentariy_kommentariy":{
+        "color_type":whiteColumn,
+        "accessorKey":"kommentariy_kommentariy_kommentariy_kommentariy"
+      },
+      "fakticheskie_raskhody_za_i_kv_2026_goda_yanvar_yanvar_v_tys_rubley":{
+        "color_type":whiteColumn,
+        "accessorKey":"fakticheskie_raskhody_za_i_kv_2026_goda_yanvar_yanvar_v_tys_rubley"
+      },
+      "fakticheskie_raskhody_za_i_kv_2026_goda_fevral_fevral_v_tys_rubley":{
+        "color_type":whiteColumn,
+        "accessorKey":"fakticheskie_raskhody_za_i_kv_2026_goda_fevral_fevral_v_tys_rubley"
+      },
+      "fakticheskie_raskhody_za_i_kv_2026_goda_mart_mart_v_tys_rubley":{
+        "color_type":whiteColumn,
+        "accessorKey":"fakticheskie_raskhody_za_i_kv_2026_goda_mart_mart_v_tys_rubley"
+      },
+      "fakticheskie_raskhody_za_i_kv_2026_goda_itog_i_kv_itog_i_kv_v_tys_rubley":{
+        "color_type":whiteColumn,
+        "accessorKey":"fakticheskie_raskhody_za_i_kv_2026_goda_itog_i_kv_itog_i_kv_v_tys_rubley"
+      },
+      "fakticheskie_raskhody_za_ii_kv_2026_goda_aprel_aprel_v_tys_rubley":{
+        "color_type":whiteColumn,
+        "accessorKey":"fakticheskie_raskhody_za_ii_kv_2026_goda_aprel_aprel_v_tys_rubley"
+      },
+      "fakticheskie_raskhody_za_ii_kv_2026_goda_may_may_v_tys_rubley":{
+        "color_type":whiteColumn,
+        "accessorKey":"fakticheskie_raskhody_za_ii_kv_2026_goda_may_may_v_tys_rubley"
+      },
+      "fakticheskie_raskhody_za_ii_kv_2026_goda_iyun_iyun_v_tys_rubley":{
+        "color_type":whiteColumn,
+        "accessorKey":"fakticheskie_raskhody_za_ii_kv_2026_goda_iyun_iyun_v_tys_rubley"
+      },
+      "fakticheskie_raskhody_za_ii_kv_2026_goda_itog_ii_kv_itog_ii_kv_v_tys_rubley":{
+        "color_type":whiteColumn,
+        "accessorKey":"fakticheskie_raskhody_za_ii_kv_2026_goda_itog_ii_kv_itog_ii_kv_v_tys_rubley"
+      },
+      "fakticheskie_raskhody_za_iii_kv_2026_goda_iyul_iyul_v_tys_rubley":{
+        "color_type":whiteColumn,
+        "accessorKey":"fakticheskie_raskhody_za_iii_kv_2026_goda_iyul_iyul_v_tys_rubley"
+      },
+      "fakticheskie_raskhody_za_iii_kv_2026_goda_avgust_avgust_v_tys_rubley":{
+        "color_type":whiteColumn,
+        "accessorKey":"fakticheskie_raskhody_za_iii_kv_2026_goda_avgust_avgust_v_tys_rubley"
+      },
+      "fakticheskie_raskhody_za_iii_kv_2026_goda_sentyabr_sentyabr_v_tys_rubley":{
+        "color_type":whiteColumn,
+        "accessorKey":"fakticheskie_raskhody_za_iii_kv_2026_goda_sentyabr_sentyabr_v_tys_rubley"
+      },
+      "fakticheskie_raskhody_za_iii_kv_2026_goda_itog_iii_kv_itog_iii_kv_v_tys_rubley":{
+        "color_type":whiteColumn,
+        "accessorKey":"fakticheskie_raskhody_za_iii_kv_2026_goda_itog_iii_kv_itog_iii_kv_v_tys_rubley"
+      },
+      "fakticheskie_raskhody_za_iv_kv_2026_goda_oktyabr_oktyabr_v_tys_rubley":{
+        "color_type":whiteColumn,
+        "accessorKey":"fakticheskie_raskhody_za_iv_kv_2026_goda_oktyabr_oktyabr_v_tys_rubley"
+      },
+      "fakticheskie_raskhody_za_iv_kv_2026_goda_noyabr_noyabr_v_tys_rubley":{
+        "color_type":whiteColumn,
+        "accessorKey":"fakticheskie_raskhody_za_iv_kv_2026_goda_noyabr_noyabr_v_tys_rubley"
+      },
+      "fakticheskie_raskhody_za_iv_kv_2026_goda_dekabr_dekabr_v_tys_rubley":{
+        "color_type":whiteColumn,
+        "accessorKey":"fakticheskie_raskhody_za_iv_kv_2026_goda_dekabr_dekabr_v_tys_rubley"
+      },
+      "fakticheskie_raskhody_za_iv_kv_2026_goda_spod_spod_v_tys_rubley":{
+        "color_type":whiteColumn,
+        "accessorKey":"fakticheskie_raskhody_za_iv_kv_2026_goda_spod_spod_v_tys_rubley"
+      },
+      "fakticheskie_raskhody_za_iv_kv_2026_goda_itog_iv_kv_itog_iv_kv_v_tys_rubley":{
+        "color_type":whiteColumn,
+        "accessorKey":"fakticheskie_raskhody_za_iv_kv_2026_goda_itog_iv_kv_itog_iv_kv_v_tys_rubley"
+      }
+    },
+    "columns":[
+      {
+        "header":"№ п\\/п",
+        "accessorKey":"pp",
+        "columns":[
+          {
+            "header":"№ п\\/п",
+            "accessorKey":"pp_pp",
+            "columns":[
+              {
+                "header":"№ п\\/п",
+                "accessorKey":"pp_pp_pp",
+                "columns":[
+                  {
+                    "header":"№ п\\/п",
+                    "accessorKey":"pp_pp_pp_pp",
+                    "size":150,
+                    "filterFn":"contains"
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "header":"Адрес объекта *",
+        "accessorKey":"adres_obekta",
+        "columns":[
+          {
+            "header":"Адрес объекта *",
+            "accessorKey":"adres_obekta_adres_obekta",
+            "columns":[
+              {
+                "header":"Адрес объекта *",
+                "accessorKey":"adres_obekta_adres_obekta_adres_obekta",
+                "columns":[
+                  {
+                    "header":"(заполняется авто из табл. \\"INFO\\" в зависимости от выбранного объекта)",
+                    "accessorKey":"adres_obekta_adres_obekta_adres_obekta_zapolnyaetsya_avto_iz_tabl_info_v_zavisimosti_ot_vybrannogo_obekta",
+                    "size":150,
+                    "filterFn":"contains",
+                    "muiTableHeadCellProps":{
+                      "sx":{
+                        "backgroundColor":"#D8D8D8"
+                      }
+                    }
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "header":"Объект **",
+        "accessorKey":"obekt",
+        "columns":[
+          {
+            "header":"Объект **",
+            "accessorKey":"obekt_obekt",
+            "columns":[
+              {
+                "header":"Объект **",
+                "accessorKey":"obekt_obekt_obekt",
+                "columns":[
+                  {
+                    "header":"(необходимо выбрать из списка)",
+                    "accessorKey":"obekt_obekt_obekt_neobkhodimo_vybrat_iz_spiska",
+                    "size":150,
+                    "filterFn":"contains",
+                    "muiTableHeadCellProps":{
+                      "sx":{
+                        "backgroundColor":"#D8D8D8"
+                      }
+                    }
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "header":" ",
+        "columns":[
+          {
+            "header":"Номер договора",
+            "accessorKey":"nomer_dogovora",
+            "columns":[
+              {
+                "header":"Номер договора",
+                "accessorKey":"nomer_dogovora_nomer_dogovora",
+                "columns":[
+                  {
+                    "header":"Номер договора",
+                    "accessorKey":"nomer_dogovora_nomer_dogovora_nomer_dogovora",
+                    "size":150,
+                    "filterFn":"contains"
+                  }
+                ]
+              }
+            ]
+          }
+        ],
+        "muiTableHeadCellProps":{
+          "sx":{
+            "backgroundColor":"#f5f5f5"
+          }
+        }
+      },
+      {
+        "header":"Срок окончания договора",
+        "accessorKey":"srok_okonchaniya_dogovora",
+        "columns":[
+          {
+            "header":"Срок окончания договора",
+            "accessorKey":"srok_okonchaniya_dogovora_srok_okonchaniya_dogovora",
+            "columns":[
+              {
+                "header":"Срок окончания договора",
+                "accessorKey":"srok_okonchaniya_dogovora_srok_okonchaniya_dogovora_srok_okonchaniya_dogovora",
+                "columns":[
+                  {
+                    "header":"в формате \\"месяц.год\\"",
+                    "accessorKey":"srok_okonchaniya_dogovora_srok_okonchaniya_dogovora_srok_okonchaniya_dogovora_v_formate_mesyatsgod",
+                    "size":150,
+                    "filterFn":"contains",
+                    "muiTableHeadCellProps":{
+                      "sx":{
+                        "backgroundColor":"#D8D8D8"
+                      }
+                    }
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "header":" ",
+        "columns":[
+          {
+            "header":"Планируемая сумма расходов на 2026 год",
+            "accessorKey":"planiruemaya_summa_raskhodov_na_2026_god",
+            "columns":[
+              {
+                "header":"I квартал",
+                "accessorKey":"planiruemaya_summa_raskhodov_na_2026_god_i_kvartal",
+                "columns":[
+                  {
+                    "header":"I квартал",
+                    "accessorKey":"planiruemaya_summa_raskhodov_na_2026_god_i_kvartal_i_kvartal",
+                    "size":150,
+                    "filterFn":"contains"
+                  }
+                ]
+              },
+              {
+                "header":"II квартал",
+                "accessorKey":"planiruemaya_summa_raskhodov_na_2026_god_ii_kvartal",
+                "columns":[
+                  {
+                    "header":"II квартал",
+                    "accessorKey":"planiruemaya_summa_raskhodov_na_2026_god_ii_kvartal_ii_kvartal",
+                    "size":150,
+                    "filterFn":"contains"
+                  }
+                ]
+              },
+              {
+                "header":"III квартал",
+                "accessorKey":"planiruemaya_summa_raskhodov_na_2026_god_iii_kvartal",
+                "columns":[
+                  {
+                    "header":"III квартал",
+                    "accessorKey":"planiruemaya_summa_raskhodov_na_2026_god_iii_kvartal_iii_kvartal",
+                    "size":150,
+                    "filterFn":"contains"
+                  }
+                ]
+              },
+              {
+                "header":"IV квартал",
+                "accessorKey":"planiruemaya_summa_raskhodov_na_2026_god_iv_kvartal",
+                "columns":[
+                  {
+                    "header":"IV квартал",
+                    "accessorKey":"planiruemaya_summa_raskhodov_na_2026_god_iv_kvartal_iv_kvartal",
+                    "size":150,
+                    "filterFn":"contains"
+                  }
+                ]
+              }
+            ]
+          }
+        ],
+        "muiTableHeadCellProps":{
+          "sx":{
+            "backgroundColor":"#f5f5f5"
+          }
+        }
+      },
+      {
+        "header":"Комментарий",
+        "accessorKey":"kommentariy",
+        "columns":[
+          {
+            "header":"Комментарий",
+            "accessorKey":"kommentariy_kommentariy",
+            "columns":[
+              {
+                "header":"Комментарий",
+                "accessorKey":"kommentariy_kommentariy_kommentariy",
+                "columns":[
+                  {
+                    "header":"Комментарий",
+                    "accessorKey":"kommentariy_kommentariy_kommentariy_kommentariy",
+                    "size":150,
+                    "filterFn":"contains"
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "header":"Фактические расходы за I кв 2026 года",
+        "accessorKey":"fakticheskie_raskhody_za_i_kv_2026_goda",
+        "columns":[
+          {
+            "header":"январь",
+            "accessorKey":"fakticheskie_raskhody_za_i_kv_2026_goda_yanvar",
+            "columns":[
+              {
+                "header":"январь",
+                "accessorKey":"fakticheskie_raskhody_za_i_kv_2026_goda_yanvar_yanvar",
+                "columns":[
+                  {
+                    "header":"в тыс. рублей",
+                    "accessorKey":"fakticheskie_raskhody_za_i_kv_2026_goda_yanvar_yanvar_v_tys_rubley",
+                    "size":150,
+                    "filterFn":"contains",
+                    "muiTableHeadCellProps":{
+                      "sx":{
+                        "backgroundColor":"#D8D8D8"
+                      }
+                    }
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            "header":"февраль",
+            "accessorKey":"fakticheskie_raskhody_za_i_kv_2026_goda_fevral",
+            "columns":[
+              {
+                "header":"февраль",
+                "accessorKey":"fakticheskie_raskhody_za_i_kv_2026_goda_fevral_fevral",
+                "columns":[
+                  {
+                    "header":"в тыс. рублей",
+                    "accessorKey":"fakticheskie_raskhody_za_i_kv_2026_goda_fevral_fevral_v_tys_rubley",
+                    "size":150,
+                    "filterFn":"contains"
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            "header":"март",
+            "accessorKey":"fakticheskie_raskhody_za_i_kv_2026_goda_mart",
+            "columns":[
+              {
+                "header":"март",
+                "accessorKey":"fakticheskie_raskhody_za_i_kv_2026_goda_mart_mart",
+                "columns":[
+                  {
+                    "header":"в тыс. рублей",
+                    "accessorKey":"fakticheskie_raskhody_za_i_kv_2026_goda_mart_mart_v_tys_rubley",
+                    "size":150,
+                    "filterFn":"contains"
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            "header":"Итог I кв",
+            "accessorKey":"fakticheskie_raskhody_za_i_kv_2026_goda_itog_i_kv",
+            "columns":[
+              {
+                "header":"Итог I кв",
+                "accessorKey":"fakticheskie_raskhody_za_i_kv_2026_goda_itog_i_kv_itog_i_kv",
+                "columns":[
+                  {
+                    "header":"в тыс. рублей",
+                    "accessorKey":"fakticheskie_raskhody_za_i_kv_2026_goda_itog_i_kv_itog_i_kv_v_tys_rubley",
+                    "size":150,
+                    "filterFn":"contains"
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "header":"Фактические расходы за II кв 2026 года",
+        "accessorKey":"fakticheskie_raskhody_za_ii_kv_2026_goda",
+        "columns":[
+          {
+            "header":"апрель",
+            "accessorKey":"fakticheskie_raskhody_za_ii_kv_2026_goda_aprel",
+            "columns":[
+              {
+                "header":"апрель",
+                "accessorKey":"fakticheskie_raskhody_za_ii_kv_2026_goda_aprel_aprel",
+                "columns":[
+                  {
+                    "header":"в тыс. рублей",
+                    "accessorKey":"fakticheskie_raskhody_za_ii_kv_2026_goda_aprel_aprel_v_tys_rubley",
+                    "size":150,
+                    "filterFn":"contains",
+                    "muiTableHeadCellProps":{
+                      "sx":{
+                        "backgroundColor":"#D8D8D8"
+                      }
+                    }
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            "header":"май",
+            "accessorKey":"fakticheskie_raskhody_za_ii_kv_2026_goda_may",
+            "columns":[
+              {
+                "header":"май",
+                "accessorKey":"fakticheskie_raskhody_za_ii_kv_2026_goda_may_may",
+                "columns":[
+                  {
+                    "header":"в тыс. рублей",
+                    "accessorKey":"fakticheskie_raskhody_za_ii_kv_2026_goda_may_may_v_tys_rubley",
+                    "size":150,
+                    "filterFn":"contains"
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            "header":"июнь",
+            "accessorKey":"fakticheskie_raskhody_za_ii_kv_2026_goda_iyun",
+            "columns":[
+              {
+                "header":"июнь",
+                "accessorKey":"fakticheskie_raskhody_za_ii_kv_2026_goda_iyun_iyun",
+                "columns":[
+                  {
+                    "header":"в тыс. рублей",
+                    "accessorKey":"fakticheskie_raskhody_za_ii_kv_2026_goda_iyun_iyun_v_tys_rubley",
+                    "size":150,
+                    "filterFn":"contains"
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            "header":"Итог II кв",
+            "accessorKey":"fakticheskie_raskhody_za_ii_kv_2026_goda_itog_ii_kv",
+            "columns":[
+              {
+                "header":"Итог II кв",
+                "accessorKey":"fakticheskie_raskhody_za_ii_kv_2026_goda_itog_ii_kv_itog_ii_kv",
+                "columns":[
+                  {
+                    "header":"в тыс. рублей",
+                    "accessorKey":"fakticheskie_raskhody_za_ii_kv_2026_goda_itog_ii_kv_itog_ii_kv_v_tys_rubley",
+                    "size":150,
+                    "filterFn":"contains"
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "header":"Фактические расходы за III кв 2026 года",
+        "accessorKey":"fakticheskie_raskhody_za_iii_kv_2026_goda",
+        "columns":[
+          {
+            "header":"июль",
+            "accessorKey":"fakticheskie_raskhody_za_iii_kv_2026_goda_iyul",
+            "columns":[
+              {
+                "header":"июль",
+                "accessorKey":"fakticheskie_raskhody_za_iii_kv_2026_goda_iyul_iyul",
+                "columns":[
+                  {
+                    "header":"в тыс. рублей",
+                    "accessorKey":"fakticheskie_raskhody_za_iii_kv_2026_goda_iyul_iyul_v_tys_rubley",
+                    "size":150,
+                    "filterFn":"contains",
+                    "muiTableHeadCellProps":{
+                      "sx":{
+                        "backgroundColor":"#D8D8D8"
+                      }
+                    }
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            "header":"август",
+            "accessorKey":"fakticheskie_raskhody_za_iii_kv_2026_goda_avgust",
+            "columns":[
+              {
+                "header":"август",
+                "accessorKey":"fakticheskie_raskhody_za_iii_kv_2026_goda_avgust_avgust",
+                "columns":[
+                  {
+                    "header":"в тыс. рублей",
+                    "accessorKey":"fakticheskie_raskhody_za_iii_kv_2026_goda_avgust_avgust_v_tys_rubley",
+                    "size":150,
+                    "filterFn":"contains"
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            "header":"сентябрь",
+            "accessorKey":"fakticheskie_raskhody_za_iii_kv_2026_goda_sentyabr",
+            "columns":[
+              {
+                "header":"сентябрь",
+                "accessorKey":"fakticheskie_raskhody_za_iii_kv_2026_goda_sentyabr_sentyabr",
+                "columns":[
+                  {
+                    "header":"в тыс. рублей",
+                    "accessorKey":"fakticheskie_raskhody_za_iii_kv_2026_goda_sentyabr_sentyabr_v_tys_rubley",
+                    "size":150,
+                    "filterFn":"contains"
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            "header":"Итог III кв",
+            "accessorKey":"fakticheskie_raskhody_za_iii_kv_2026_goda_itog_iii_kv",
+            "columns":[
+              {
+                "header":"Итог III кв",
+                "accessorKey":"fakticheskie_raskhody_za_iii_kv_2026_goda_itog_iii_kv_itog_iii_kv",
+                "columns":[
+                  {
+                    "header":"в тыс. рублей",
+                    "accessorKey":"fakticheskie_raskhody_za_iii_kv_2026_goda_itog_iii_kv_itog_iii_kv_v_tys_rubley",
+                    "size":150,
+                    "filterFn":"contains"
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "header":"Фактические расходы за IV кв 2026 года",
+        "accessorKey":"fakticheskie_raskhody_za_iv_kv_2026_goda",
+        "columns":[
+          {
+            "header":"октябрь",
+            "accessorKey":"fakticheskie_raskhody_za_iv_kv_2026_goda_oktyabr",
+            "columns":[
+              {
+                "header":"октябрь",
+                "accessorKey":"fakticheskie_raskhody_za_iv_kv_2026_goda_oktyabr_oktyabr",
+                "columns":[
+                  {
+                    "header":"в тыс. рублей",
+                    "accessorKey":"fakticheskie_raskhody_za_iv_kv_2026_goda_oktyabr_oktyabr_v_tys_rubley",
+                    "size":150,
+                    "filterFn":"contains",
+                    "muiTableHeadCellProps":{
+                      "sx":{
+                        "backgroundColor":"#D8D8D8"
+                      }
+                    }
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            "header":"ноябрь",
+            "accessorKey":"fakticheskie_raskhody_za_iv_kv_2026_goda_noyabr",
+            "columns":[
+              {
+                "header":"ноябрь",
+                "accessorKey":"fakticheskie_raskhody_za_iv_kv_2026_goda_noyabr_noyabr",
+                "columns":[
+                  {
+                    "header":"в тыс. рублей",
+                    "accessorKey":"fakticheskie_raskhody_za_iv_kv_2026_goda_noyabr_noyabr_v_tys_rubley",
+                    "size":150,
+                    "filterFn":"contains"
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            "header":"декабрь",
+            "accessorKey":"fakticheskie_raskhody_za_iv_kv_2026_goda_dekabr",
+            "columns":[
+              {
+                "header":"декабрь",
+                "accessorKey":"fakticheskie_raskhody_za_iv_kv_2026_goda_dekabr_dekabr",
+                "columns":[
+                  {
+                    "header":"в тыс. рублей",
+                    "accessorKey":"fakticheskie_raskhody_za_iv_kv_2026_goda_dekabr_dekabr_v_tys_rubley",
+                    "size":150,
+                    "filterFn":"contains"
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            "header":"СПОД",
+            "accessorKey":"fakticheskie_raskhody_za_iv_kv_2026_goda_spod",
+            "columns":[
+              {
+                "header":"СПОД",
+                "accessorKey":"fakticheskie_raskhody_za_iv_kv_2026_goda_spod_spod",
+                "columns":[
+                  {
+                    "header":"в тыс. рублей",
+                    "accessorKey":"fakticheskie_raskhody_za_iv_kv_2026_goda_spod_spod_v_tys_rubley",
+                    "size":150,
+                    "filterFn":"contains"
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            "header":"Итог IV кв",
+            "accessorKey":"fakticheskie_raskhody_za_iv_kv_2026_goda_itog_iv_kv",
+            "columns":[
+              {
+                "header":"Итог IV кв",
+                "accessorKey":"fakticheskie_raskhody_za_iv_kv_2026_goda_itog_iv_kv_itog_iv_kv",
+                "columns":[
+                  {
+                    "header":"в тыс. рублей",
+                    "accessorKey":"fakticheskie_raskhody_za_iv_kv_2026_goda_itog_iv_kv_itog_iv_kv_v_tys_rubley",
+                    "size":150,
+                    "filterFn":"contains"
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  }
+}

web/src/components/RealtimeTable/constants/FORM_2/Estimate_2026.js

@@ -0,0 +1,463 @@
+
+                            import {
+                                greenColumn,
+                                whiteColumn,
+                                orangeColumn,
+                                yellowColumn,
+                                redColumn,
+                                blueColumn,
+                                } from '../columnColors';
+                              export const config = {
+  "config":{
+    "colors":{
+      "pp_pp_pp":{
+        "color_type":whiteColumn,
+        "accessorKey":"pp_pp_pp"
+      },
+      "perechen_raskhodov_i_zatrat_perechen_raskhodov_i_zatrat_perechen_raskhodov_i_zatrat":{
+        "color_type":whiteColumn,
+        "accessorKey":"perechen_raskhodov_i_zatrat_perechen_raskhodov_i_zatrat_perechen_raskhodov_i_zatrat"
+      },
+      "raskhody_planiruemye_rf_na_2026_god_i_kvartal_i_kvartal":{
+        "color_type":whiteColumn,
+        "accessorKey":"raskhody_planiruemye_rf_na_2026_god_i_kvartal_i_kvartal"
+      },
+      "raskhody_planiruemye_rf_na_2026_god_ii_kvartal_ii_kvartal":{
+        "color_type":whiteColumn,
+        "accessorKey":"raskhody_planiruemye_rf_na_2026_god_ii_kvartal_ii_kvartal"
+      },
+      "raskhody_planiruemye_rf_na_2026_god_iii_kvartal_iii_kvartal":{
+        "color_type":whiteColumn,
+        "accessorKey":"raskhody_planiruemye_rf_na_2026_god_iii_kvartal_iii_kvartal"
+      },
+      "raskhody_planiruemye_rf_na_2026_god_iv_kvartal_iv_kvartal":{
+        "color_type":whiteColumn,
+        "accessorKey":"raskhody_planiruemye_rf_na_2026_god_iv_kvartal_iv_kvartal"
+      },
+      "v_tys_rubley_raskhody_planiruemye_rf_na_2026_god_itogopodderzhka_itogopodderzhka":{
+        "color_type":whiteColumn,
+        "accessorKey":"v_tys_rubley_raskhody_planiruemye_rf_na_2026_god_itogopodderzhka_itogopodderzhka"
+      },
+      "v_tys_rubley_utverzhdennye_bazovye_raskhody_na_2026_god_itogopodderzhka_itogopodderzhka":{
+        "color_type":whiteColumn,
+        "accessorKey":"v_tys_rubley_utverzhdennye_bazovye_raskhody_na_2026_god_itogopodderzhka_itogopodderzhka"
+      },
+      "v_tys_rubley_fakticheskie_raskhody_za_2026_god_itogopodderzhka_itogopodderzhka":{
+        "color_type":whiteColumn,
+        "accessorKey":"v_tys_rubley_fakticheskie_raskhody_za_2026_god_itogopodderzhka_itogopodderzhka"
+      },
+      "v_tys_rubley_skorrektirovannaya_smeta_raskhodov_na_2026_god_iv_kvartal_iv_kvartal":{
+        "color_type":whiteColumn,
+        "accessorKey":"v_tys_rubley_skorrektirovannaya_smeta_raskhodov_na_2026_god_iv_kvartal_iv_kvartal"
+      },
+      "utverzhdennye_bazovye_raskhody_na_2026_god_i_kvartal_i_kvartal":{
+        "color_type":whiteColumn,
+        "accessorKey":"utverzhdennye_bazovye_raskhody_na_2026_god_i_kvartal_i_kvartal"
+      },
+      "utverzhdennye_bazovye_raskhody_na_2026_god_ii_kvartal_ii_kvartal":{
+        "color_type":whiteColumn,
+        "accessorKey":"utverzhdennye_bazovye_raskhody_na_2026_god_ii_kvartal_ii_kvartal"
+      },
+      "utverzhdennye_bazovye_raskhody_na_2026_god_iii_kvartal_iii_kvartal":{
+        "color_type":whiteColumn,
+        "accessorKey":"utverzhdennye_bazovye_raskhody_na_2026_god_iii_kvartal_iii_kvartal"
+      },
+      "utverzhdennye_bazovye_raskhody_na_2026_god_iv_kvartal_iv_kvartal":{
+        "color_type":whiteColumn,
+        "accessorKey":"utverzhdennye_bazovye_raskhody_na_2026_god_iv_kvartal_iv_kvartal"
+      },
+      "fakticheskie_raskhody_za_2026_god_i_kvartal_i_kvartal":{
+        "color_type":whiteColumn,
+        "accessorKey":"fakticheskie_raskhody_za_2026_god_i_kvartal_i_kvartal"
+      },
+      "fakticheskie_raskhody_za_2026_god_ii_kvartal_ii_kvartal":{
+        "color_type":whiteColumn,
+        "accessorKey":"fakticheskie_raskhody_za_2026_god_ii_kvartal_ii_kvartal"
+      },
+      "fakticheskie_raskhody_za_2026_god_iii_kvartal_iii_kvartal":{
+        "color_type":whiteColumn,
+        "accessorKey":"fakticheskie_raskhody_za_2026_god_iii_kvartal_iii_kvartal"
+      },
+      "fakticheskie_raskhody_za_2026_god_iv_kvartal_iv_kvartal":{
+        "color_type":whiteColumn,
+        "accessorKey":"fakticheskie_raskhody_za_2026_god_iv_kvartal_iv_kvartal"
+      },
+      "skorrektirovannaya_smeta_raskhodov_na_2026_god_ii_kvartal_ii_kvartal":{
+        "color_type":whiteColumn,
+        "accessorKey":"skorrektirovannaya_smeta_raskhodov_na_2026_god_ii_kvartal_ii_kvartal"
+      },
+      "skorrektirovannaya_smeta_raskhodov_na_2026_god_iii_kvartal_iii_kvartal":{
+        "color_type":whiteColumn,
+        "accessorKey":"skorrektirovannaya_smeta_raskhodov_na_2026_god_iii_kvartal_iii_kvartal"
+      }
+    },
+    "columns":[
+      {
+        "header":" ",
+        "columns":[
+          {
+            "header":"№ п\\/п",
+            "accessorKey":"pp",
+            "columns":[
+              {
+                "header":"№ п\\/п",
+                "accessorKey":"pp_pp",
+                "columns":[
+                  {
+                    "header":"№ п\\/п",
+                    "accessorKey":"pp_pp_pp",
+                    "size":150,
+                    "filterFn":"contains"
+                  }
+                ]
+              }
+            ]
+          }
+        ],
+        "muiTableHeadCellProps":{
+          "sx":{
+            "backgroundColor":"#f5f5f5"
+          }
+        }
+      },
+      {
+        "header":" ",
+        "columns":[
+          {
+            "header":"Перечень расходов и затрат",
+            "accessorKey":"perechen_raskhodov_i_zatrat",
+            "columns":[
+              {
+                "header":"Перечень расходов и затрат",
+                "accessorKey":"perechen_raskhodov_i_zatrat_perechen_raskhodov_i_zatrat",
+                "columns":[
+                  {
+                    "header":"Перечень расходов и затрат",
+                    "accessorKey":"perechen_raskhodov_i_zatrat_perechen_raskhodov_i_zatrat_perechen_raskhodov_i_zatrat",
+                    "size":150,
+                    "filterFn":"contains"
+                  }
+                ]
+              }
+            ]
+          }
+        ],
+        "muiTableHeadCellProps":{
+          "sx":{
+            "backgroundColor":"#f5f5f5"
+          }
+        }
+      },
+      {
+        "header":" ",
+        "columns":[
+          {
+            "header":"Расходы, планируемые РФ на 2026 год",
+            "accessorKey":"raskhody_planiruemye_rf_na_2026_god",
+            "columns":[
+              {
+                "header":"I квартал",
+                "accessorKey":"raskhody_planiruemye_rf_na_2026_god_i_kvartal",
+                "columns":[
+                  {
+                    "header":"I квартал",
+                    "accessorKey":"raskhody_planiruemye_rf_na_2026_god_i_kvartal_i_kvartal",
+                    "size":150,
+                    "filterFn":"contains"
+                  }
+                ]
+              },
+              {
+                "header":"II квартал",
+                "accessorKey":"raskhody_planiruemye_rf_na_2026_god_ii_kvartal",
+                "columns":[
+                  {
+                    "header":"II квартал",
+                    "accessorKey":"raskhody_planiruemye_rf_na_2026_god_ii_kvartal_ii_kvartal",
+                    "size":150,
+                    "filterFn":"contains"
+                  }
+                ]
+              },
+              {
+                "header":"III квартал",
+                "accessorKey":"raskhody_planiruemye_rf_na_2026_god_iii_kvartal",
+                "columns":[
+                  {
+                    "header":"III квартал",
+                    "accessorKey":"raskhody_planiruemye_rf_na_2026_god_iii_kvartal_iii_kvartal",
+                    "size":150,
+                    "filterFn":"contains"
+                  }
+                ]
+              },
+              {
+                "header":"IV квартал",
+                "accessorKey":"raskhody_planiruemye_rf_na_2026_god_iv_kvartal",
+                "columns":[
+                  {
+                    "header":"IV квартал",
+                    "accessorKey":"raskhody_planiruemye_rf_na_2026_god_iv_kvartal_iv_kvartal",
+                    "size":150,
+                    "filterFn":"contains"
+                  }
+                ]
+              }
+            ]
+          }
+        ],
+        "muiTableHeadCellProps":{
+          "sx":{
+            "backgroundColor":"#f5f5f5"
+          }
+        }
+      },
+      {
+        "header":"в тыс. рублей",
+        "accessorKey":"v_tys_rubley",
+        "columns":[
+          {
+            "header":"Расходы, планируемые РФ на 2026 год",
+            "accessorKey":"v_tys_rubley_raskhody_planiruemye_rf_na_2026_god",
+            "columns":[
+              {
+                "header":"ИТОГО\\nПоддержка",
+                "accessorKey":"v_tys_rubley_raskhody_planiruemye_rf_na_2026_god_itogopodderzhka",
+                "columns":[
+                  {
+                    "header":"ИТОГО\\nПоддержка",
+                    "accessorKey":"v_tys_rubley_raskhody_planiruemye_rf_na_2026_god_itogopodderzhka_itogopodderzhka",
+                    "size":150,
+                    "filterFn":"contains"
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            "header":"Утвержденные базовые расходы на 2026 год",
+            "accessorKey":"v_tys_rubley_utverzhdennye_bazovye_raskhody_na_2026_god",
+            "columns":[
+              {
+                "header":"ИТОГО\\nПоддержка",
+                "accessorKey":"v_tys_rubley_utverzhdennye_bazovye_raskhody_na_2026_god_itogopodderzhka",
+                "columns":[
+                  {
+                    "header":"ИТОГО\\nПоддержка",
+                    "accessorKey":"v_tys_rubley_utverzhdennye_bazovye_raskhody_na_2026_god_itogopodderzhka_itogopodderzhka",
+                    "size":150,
+                    "filterFn":"contains"
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            "header":"Фактические расходы за 2026 год",
+            "accessorKey":"v_tys_rubley_fakticheskie_raskhody_za_2026_god",
+            "columns":[
+              {
+                "header":"ИТОГО\\nПоддержка",
+                "accessorKey":"v_tys_rubley_fakticheskie_raskhody_za_2026_god_itogopodderzhka",
+                "columns":[
+                  {
+                    "header":"ИТОГО\\nПоддержка",
+                    "accessorKey":"v_tys_rubley_fakticheskie_raskhody_za_2026_god_itogopodderzhka_itogopodderzhka",
+                    "size":150,
+                    "filterFn":"contains"
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            "header":"Скорректированная смета расходов на 2026 год",
+            "accessorKey":"v_tys_rubley_skorrektirovannaya_smeta_raskhodov_na_2026_god",
+            "columns":[
+              {
+                "header":"IV квартал",
+                "accessorKey":"v_tys_rubley_skorrektirovannaya_smeta_raskhodov_na_2026_god_iv_kvartal",
+                "columns":[
+                  {
+                    "header":"IV квартал",
+                    "accessorKey":"v_tys_rubley_skorrektirovannaya_smeta_raskhodov_na_2026_god_iv_kvartal_iv_kvartal",
+                    "size":150,
+                    "filterFn":"contains"
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "header":" ",
+        "columns":[
+          {
+            "header":"Утвержденные базовые расходы на 2026 год",
+            "accessorKey":"utverzhdennye_bazovye_raskhody_na_2026_god",
+            "columns":[
+              {
+                "header":"I квартал",
+                "accessorKey":"utverzhdennye_bazovye_raskhody_na_2026_god_i_kvartal",
+                "columns":[
+                  {
+                    "header":"I квартал",
+                    "accessorKey":"utverzhdennye_bazovye_raskhody_na_2026_god_i_kvartal_i_kvartal",
+                    "size":150,
+                    "filterFn":"contains"
+                  }
+                ]
+              },
+              {
+                "header":"II квартал",
+                "accessorKey":"utverzhdennye_bazovye_raskhody_na_2026_god_ii_kvartal",
+                "columns":[
+                  {
+                    "header":"II квартал",
+                    "accessorKey":"utverzhdennye_bazovye_raskhody_na_2026_god_ii_kvartal_ii_kvartal",
+                    "size":150,
+                    "filterFn":"contains"
+                  }
+                ]
+              },
+              {
+                "header":"III квартал",
+                "accessorKey":"utverzhdennye_bazovye_raskhody_na_2026_god_iii_kvartal",
+                "columns":[
+                  {
+                    "header":"III квартал",
+                    "accessorKey":"utverzhdennye_bazovye_raskhody_na_2026_god_iii_kvartal_iii_kvartal",
+                    "size":150,
+                    "filterFn":"contains"
+                  }
+                ]
+              },
+              {
+                "header":"IV квартал",
+                "accessorKey":"utverzhdennye_bazovye_raskhody_na_2026_god_iv_kvartal",
+                "columns":[
+                  {
+                    "header":"IV квартал",
+                    "accessorKey":"utverzhdennye_bazovye_raskhody_na_2026_god_iv_kvartal_iv_kvartal",
+                    "size":150,
+                    "filterFn":"contains"
+                  }
+                ]
+              }
+            ]
+          }
+        ],
+        "muiTableHeadCellProps":{
+          "sx":{
+            "backgroundColor":"#f5f5f5"
+          }
+        }
+      },
+      {
+        "header":" ",
+        "columns":[
+          {
+            "header":"Фактические расходы за 2026 год",
+            "accessorKey":"fakticheskie_raskhody_za_2026_god",
+            "columns":[
+              {
+                "header":"I квартал",
+                "accessorKey":"fakticheskie_raskhody_za_2026_god_i_kvartal",
+                "columns":[
+                  {
+                    "header":"I квартал",
+                    "accessorKey":"fakticheskie_raskhody_za_2026_god_i_kvartal_i_kvartal",
+                    "size":150,
+                    "filterFn":"contains"
+                  }
+                ]
+              },
+              {
+                "header":"II квартал",
+                "accessorKey":"fakticheskie_raskhody_za_2026_god_ii_kvartal",
+                "columns":[
+                  {
+                    "header":"II квартал",
+                    "accessorKey":"fakticheskie_raskhody_za_2026_god_ii_kvartal_ii_kvartal",
+                    "size":150,
+                    "filterFn":"contains"
+                  }
+                ]
+              },
+              {
+                "header":"III квартал",
+                "accessorKey":"fakticheskie_raskhody_za_2026_god_iii_kvartal",
+                "columns":[
+                  {
+                    "header":"III квартал",
+                    "accessorKey":"fakticheskie_raskhody_za_2026_god_iii_kvartal_iii_kvartal",
+                    "size":150,
+                    "filterFn":"contains"
+                  }
+                ]
+              },
+              {
+                "header":"IV квартал",
+                "accessorKey":"fakticheskie_raskhody_za_2026_god_iv_kvartal",
+                "columns":[
+                  {
+                    "header":"IV квартал",
+                    "accessorKey":"fakticheskie_raskhody_za_2026_god_iv_kvartal_iv_kvartal",
+                    "size":150,
+                    "filterFn":"contains"
+                  }
+                ]
+              }
+            ]
+          }
+        ],
+        "muiTableHeadCellProps":{
+          "sx":{
+            "backgroundColor":"#f5f5f5"
+          }
+        }
+      },
+      {
+        "header":" ",
+        "columns":[
+          {
+            "header":"Скорректированная смета расходов на 2026 год",
+            "accessorKey":"skorrektirovannaya_smeta_raskhodov_na_2026_god",
+            "columns":[
+              {
+                "header":"II квартал",
+                "accessorKey":"skorrektirovannaya_smeta_raskhodov_na_2026_god_ii_kvartal",
+                "columns":[
+                  {
+                    "header":"II квартал",
+                    "accessorKey":"skorrektirovannaya_smeta_raskhodov_na_2026_god_ii_kvartal_ii_kvartal",
+                    "size":150,
+                    "filterFn":"contains"
+                  }
+                ]
+              },
+              {
+                "header":"III квартал",
+                "accessorKey":"skorrektirovannaya_smeta_raskhodov_na_2026_god_iii_kvartal",
+                "columns":[
+                  {
+                    "header":"III квартал",
+                    "accessorKey":"skorrektirovannaya_smeta_raskhodov_na_2026_god_iii_kvartal_iii_kvartal",
+                    "size":150,
+                    "filterFn":"contains"
+                  }
+                ]
+              }
+            ]
+          }
+        ],
+        "muiTableHeadCellProps":{
+          "sx":{
+            "backgroundColor":"#f5f5f5"
+          }
+        }
+      }
+    ]
+  }
+}