fix 2

frontend/src/app/providers/layout/navigation/navigation.tsx

@@ -42,14 +42,31 @@ export const Navigation: React.FC<NavigationProps> = ({
   const currentTheme = getCurrentTheme();
 
   const navItems = [
-    { path: "/templates", label: "Шаблоны", icon: FaCode },
-    { path: "/add-agents", label: "Деплой", icon: FaRocket },
-    { path: "/registration", label: "Регистрация", icon: FaKey },
-    { path: "/logs", label: "Логи", icon: FaFileAlt },
+    { path: "/templates", label: "Шаблоны", icon: FaCode, requireView: true },
+    {
+      path: "/add-agents",
+      label: "Деплой",
+      icon: FaRocket,
+      requireManageAgent: true,
+    },
+    {
+      path: "/registration",
+      label: "Регистрация",
+      icon: FaKey,
+      requireManageAgent: true,
+    },
+    { path: "/logs", label: "Логи", icon: FaFileAlt, requireView: true },
   ];
 
   const isActive = (path: string) => location.pathname === path;
 
+  // Filter nav items based on user permissions
+  const filteredNavItems = navItems.filter((item) => {
+    if (item.requireView && !user?.permission_view) return false;
+    if (item.requireManageAgent && !user?.permission_manage_agent) return false;
+    return true;
+  });
+
   useEffect(() => {
     const handleClickOutside = (e: MouseEvent) => {
       if (
@@ -77,42 +94,37 @@ export const Navigation: React.FC<NavigationProps> = ({
 
   const renderNavItems = (showLabels: boolean, iconSize: number) => (
     <div className="flex items-center gap-1 whitespace-nowrap">
-      {navItems
-        .filter((item) => {
-          if ((item as any).adminOnly && !user?.permission_admin) return false;
-          return true;
-        })
-        .map((item) => {
-          const Icon = item.icon;
-          const active = isActive(item.path);
-          return (
-            <button
-              key={item.path}
-              onClick={() => navigate(item.path)}
-              className="flex items-center gap-1.5 px-3 py-2 rounded-lg font-medium transition-all flex-shrink-0"
-              style={{
-                backgroundColor: active ? "var(--accent)" : "transparent",
-                color: active ? "var(--accent-text)" : "var(--text-secondary)",
-              }}
-              onMouseEnter={(e) => {
-                if (!active) {
-                  e.currentTarget.style.backgroundColor = "var(--bg-secondary)";
-                  e.currentTarget.style.color = "var(--text-primary)";
-                }
-              }}
-              onMouseLeave={(e) => {
-                if (!active) {
-                  e.currentTarget.style.backgroundColor = "transparent";
-                  e.currentTarget.style.color = "var(--text-secondary)";
-                }
-              }}
-              title={item.label}
-            >
-              <Icon size={iconSize} />
-              {showLabels && <span className="text-xs">{item.label}</span>}
-            </button>
-          );
-        })}
+      {filteredNavItems.map((item) => {
+        const Icon = item.icon;
+        const active = isActive(item.path);
+        return (
+          <button
+            key={item.path}
+            onClick={() => navigate(item.path)}
+            className="flex items-center gap-1.5 px-3 py-2 rounded-lg font-medium transition-all flex-shrink-0"
+            style={{
+              backgroundColor: active ? "var(--accent)" : "transparent",
+              color: active ? "var(--accent-text)" : "var(--text-secondary)",
+            }}
+            onMouseEnter={(e) => {
+              if (!active) {
+                e.currentTarget.style.backgroundColor = "var(--bg-secondary)";
+                e.currentTarget.style.color = "var(--text-primary)";
+              }
+            }}
+            onMouseLeave={(e) => {
+              if (!active) {
+                e.currentTarget.style.backgroundColor = "transparent";
+                e.currentTarget.style.color = "var(--text-secondary)";
+              }
+            }}
+            title={item.label}
+          >
+            <Icon size={iconSize} />
+            {showLabels && <span className="text-xs">{item.label}</span>}
+          </button>
+        );
+      })}
     </div>
   );
 
@@ -375,14 +387,31 @@ export const BottomNav: React.FC = () => {
   const { user } = useAuthStore();
 
   const navItems = [
-    { path: "/templates", label: "Шаблоны", icon: FaCode },
-    { path: "/add-agents", label: "Деплой", icon: FaRocket },
-    { path: "/registration", label: "Регистрация", icon: FaKey },
-    { path: "/logs", label: "Логи", icon: FaFileAlt },
+    { path: "/templates", label: "Шаблоны", icon: FaCode, requireView: true },
+    {
+      path: "/add-agents",
+      label: "Деплой",
+      icon: FaRocket,
+      requireManageAgent: true,
+    },
+    {
+      path: "/registration",
+      label: "Регистрация",
+      icon: FaKey,
+      requireManageAgent: true,
+    },
+    { path: "/logs", label: "Логи", icon: FaFileAlt, requireView: true },
   ];
 
   const isActive = (path: string) => location.pathname === path;
 
+  // Filter nav items based on user permissions
+  const filteredNavItems = navItems.filter((item) => {
+    if (item.requireView && !user?.permission_view) return false;
+    if (item.requireManageAgent && !user?.permission_manage_agent) return false;
+    return true;
+  });
+
   return (
     <div
       className="flex-shrink-0 border-t"
@@ -392,32 +421,24 @@ export const BottomNav: React.FC = () => {
       }}
     >
       <div className="flex items-center justify-around px-2 py-2">
-        {navItems
-          .filter((item) => {
-            if ((item as any).adminOnly && !user?.permission_admin)
-              return false;
-            return true;
-          })
-          .map((item) => {
-            const Icon = item.icon;
-            const active = isActive(item.path);
-            return (
-              <button
-                key={item.path}
-                onClick={() => navigate(item.path)}
-                className="flex items-center justify-center p-3 rounded-lg transition-all"
-                style={{
-                  backgroundColor: active ? "var(--accent)" : "transparent",
-                  color: active
-                    ? "var(--accent-text)"
-                    : "var(--text-secondary)",
-                }}
-                title={item.label}
-              >
-                <Icon size={20} />
-              </button>
-            );
-          })}
+        {filteredNavItems.map((item) => {
+          const Icon = item.icon;
+          const active = isActive(item.path);
+          return (
+            <button
+              key={item.path}
+              onClick={() => navigate(item.path)}
+              className="flex items-center justify-center p-3 rounded-lg transition-all"
+              style={{
+                backgroundColor: active ? "var(--accent)" : "transparent",
+                color: active ? "var(--accent-text)" : "var(--text-secondary)",
+              }}
+              title={item.label}
+            >
+              <Icon size={20} />
+            </button>
+          );
+        })}
       </div>
     </div>
   );

frontend/src/app/providers/routing/helper/protected.route.tsx

@@ -1,12 +1,42 @@
-import { useAuthStore } from "@/modules/auth/store/useAuthStore";
 import { Navigate } from "react-router-dom";
+import { useAuthStore } from "@/modules/auth/store/useAuthStore";
 
-export const ProtectedRoute = ({ children }: { children: React.ReactNode }) => {
-  const { isAuthenticated } = useAuthStore();
+interface ProtectedRouteProps {
+  children: React.ReactNode;
+  requireView?: boolean;
+  requireManageAgent?: boolean;
+  requireAdmin?: boolean;
+  fallbackPath?: string;
+}
 
-  // if (!isAuthenticated) {
-  //   return <Navigate to="/auth" replace />;
-  // }
+export const ProtectedRoute: React.FC<ProtectedRouteProps> = ({
+  children,
+  requireView = false,
+  requireManageAgent = false,
+  requireAdmin = false,
+  fallbackPath = "/",
+}) => {
+  const { user, isAuthenticated } = useAuthStore();
+
+  if (!isAuthenticated && user?.token) {
+    // User is authenticated based on token
+  }
+
+  if (!user) {
+    return <Navigate to="/auth" replace />;
+  }
+
+  if (requireView && !user.permission_view) {
+    return <Navigate to={fallbackPath} replace />;
+  }
+
+  if (requireManageAgent && !user.permission_manage_agent) {
+    return <Navigate to={fallbackPath} replace />;
+  }
+
+  if (requireAdmin && !user.permission_admin) {
+    return <Navigate to={fallbackPath} replace />;
+  }
 
   return <>{children}</>;
 };

frontend/src/app/providers/routing/routing.tsx

@@ -15,6 +15,7 @@ import { LogsPage } from "@/pages/logs.page";
 import { GraphsPage } from "@/pages/graphs.page";
 import { DashboardPage } from "@/pages/dashboard.page";
 import { AgentDashboardPage } from "@/pages/agent-dashboard.page";
+import { ProtectedRoute } from "./helper/protected.route";
 
 export const mockGraphData: GraphData = {
   nodes: [
@@ -122,18 +123,82 @@ export const Routing = () => {
         <Route path="/register" element={<RegisterPage />} />
 
         <Route element={<DefaultLayout />}>
-          <Route path="/" element={<TemplatesPage />} />
-          <Route path="/add-agents" element={<AddAgentsPage />} />
-          <Route path="/registration" element={<RegistrationTokenPage />} />
-          <Route path="/logs" element={<LogsPage />} />
-          <Route path="/admin" element={<AdminPage />} />
-          <Route path="/IDE" element={<IDEPage />} />
-          <Route path="/templates" element={<TemplatesPage />} />
-          <Route path="/graphs" element={<GraphsPage />} />
-          {/* <Route path="/dashboard" element={<DashboardPage />} /> */}
+          {/* Routes requiring 'view' permission */}
+          <Route
+            path="/"
+            element={
+              <ProtectedRoute requireView>
+                <TemplatesPage />
+              </ProtectedRoute>
+            }
+          />
+          <Route
+            path="/logs"
+            element={
+              <ProtectedRoute requireView>
+                <LogsPage />
+              </ProtectedRoute>
+            }
+          />
+          <Route
+            path="/graphs"
+            element={
+              <ProtectedRoute requireView>
+                <GraphsPage />
+              </ProtectedRoute>
+            }
+          />
           <Route
             path="/dashboard/:agentLabel"
-            element={<AgentDashboardPage />}
+            element={
+              <ProtectedRoute requireView>
+                <AgentDashboardPage />
+              </ProtectedRoute>
+            }
+          />
+
+          {/* Routes requiring 'manage_agent' permission */}
+          <Route
+            path="/add-agents"
+            element={
+              <ProtectedRoute requireManageAgent>
+                <AddAgentsPage />
+              </ProtectedRoute>
+            }
+          />
+          <Route
+            path="/registration"
+            element={
+              <ProtectedRoute requireManageAgent>
+                <RegistrationTokenPage />
+              </ProtectedRoute>
+            }
+          />
+          <Route
+            path="/templates"
+            element={
+              <ProtectedRoute requireView>
+                <TemplatesPage />
+              </ProtectedRoute>
+            }
+          />
+          <Route
+            path="/IDE"
+            element={
+              <ProtectedRoute requireView>
+                <IDEPage />
+              </ProtectedRoute>
+            }
+          />
+
+          {/* Admin route requiring 'admin' permission */}
+          <Route
+            path="/admin"
+            element={
+              <ProtectedRoute requireAdmin>
+                <AdminPage />
+              </ProtectedRoute>
+            }
           />
         </Route>
 

frontend/src/pages/templates.page.tsx

@@ -8,6 +8,7 @@ import { RunScriptModal } from "../modules/ide/components/RunScriptModal";
 import { AddInterpreterModal } from "../modules/ide/components/AddInterpreterModal";
 import type { FileNode } from "../modules/ide";
 import { scriptsApi } from "../modules/ide/api/scripts.api";
+import { useAuthStore } from "@/modules/auth/store/useAuthStore";
 
 const convertTreeToFileNode = (data: any[]): FileNode => {
   const convertItem = (item: any): FileNode => {
@@ -43,6 +44,8 @@ const convertTreeToFileNode = (data: any[]): FileNode => {
 
 export const TemplatesPage = () => {
   const navigate = useNavigate();
+  const { user } = useAuthStore();
+  const canManageAgent = user?.permission_manage_agent;
   const [files, setFiles] = useState<FileNode | null>(null);
   const [loading, setLoading] = useState(true);
   const [runModal, setRunModal] = useState<{
@@ -127,33 +130,35 @@ export const TemplatesPage = () => {
           Add Interpreter
         </button>
 
-        {/* Open in Editor button */}
-        <button
-          onClick={() => navigate("/ide")}
-          style={{
-            display: "flex",
-            alignItems: "center",
-            gap: "8px",
-            padding: "6px 16px",
-            backgroundColor: "#0e639c",
-            border: "none",
-            borderRadius: "4px",
-            color: "#ffffff",
-            cursor: "pointer",
-            fontSize: "12px",
-            fontWeight: 500,
-            transition: "all 0.15s",
-          }}
-          onMouseEnter={(e) => {
-            e.currentTarget.style.backgroundColor = "#1177bb";
-          }}
-          onMouseLeave={(e) => {
-            e.currentTarget.style.backgroundColor = "#0e639c";
-          }}
-        >
-          <FiEdit3 size={14} />
-          Open Editor
-        </button>
+        {/* Open in Editor button — только с правом manage_agent */}
+        {canManageAgent && (
+          <button
+            onClick={() => navigate("/ide")}
+            style={{
+              display: "flex",
+              alignItems: "center",
+              gap: "8px",
+              padding: "6px 16px",
+              backgroundColor: "#0e639c",
+              border: "none",
+              borderRadius: "4px",
+              color: "#ffffff",
+              cursor: "pointer",
+              fontSize: "12px",
+              fontWeight: 500,
+              transition: "all 0.15s",
+            }}
+            onMouseEnter={(e) => {
+              e.currentTarget.style.backgroundColor = "#1177bb";
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.backgroundColor = "#0e639c";
+            }}
+          >
+            <FiEdit3 size={14} />
+            Open Editor
+          </button>
+        )}
       </div>
 
       {/* File Picker (terminal встроен внутрь) */}