chore: update deploy

.gitea/workflows/ci.yml

@@ -0,0 +1,25 @@
+name: CI
+
+on:
+  push:
+    branches-ignore:
+      - master
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: "25"
+
+      - name: Install deps
+        run: npm install
+
+      - name: Lint
+        run: npm run lint
+
+      - name: Build
+        run: npm run build

.gitea/workflows/deploy.yml

@@ -0,0 +1,41 @@
+name: Deploy
+
+on:
+  push:
+    branches: [master]
+
+env:
+  REGISTRY: gitea.d3m0k1d.ru
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup SSH
+        run: |
+          mkdir -p ~/.ssh
+          echo "${{ secrets.SSH_PRIVATE_KEY }}" > ~/.ssh/id_ed25519
+          chmod 600 ~/.ssh/id_rsa
+
+      - name: Install Ansible
+        run: |
+          apt update && apt install -y ansible
+          ansible-galaxy install -r infra/ansible/requirements.yml
+
+      - name: Login to registry
+        run: echo "${{ secrets.REGISTRY_PASSWORD }}" | docker login $REGISTRY -u "${{ secrets.REGISTRY_USER }}" --password-stdin
+
+      - name: Build and push
+        run: |
+          IMAGE=$REGISTRY/hellreign/frontend
+          docker build -f dockerfile -t $IMAGE:dev -t $IMAGE:latest .
+          docker push $IMAGE:dev
+          docker push $IMAGE:latest
+
+      - name: Deploy
+        run: |
+          echo "${{ secrets.ANSIBLE_VAULT_PASSWORD }}" > .vault_pass
+          ansible-playbook -i infra/ansible/inventory/hosts.yml infra/ansible/playbook.yml --vault-password-file .vault_pass
+          rm .vault_pass

docker-compose.yml

@@ -0,0 +1,7 @@
+services:
+  app:
+    build:
+      context: .
+      dockerfile: dockerfile
+    ports:
+      - "80:80"

dockerfile

@@ -0,0 +1,16 @@
+FROM node:25-alpine3.23 AS builder
+
+WORKDIR /app
+
+COPY package.json yarn.lock ./
+
+RUN yarn install --frozen-lockfile
+COPY . .
+RUN yarn build
+FROM nginx:alpine
+COPY --from=builder /app/dist /usr/share/nginx/html
+
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]

infra/ansible/ansible.cfg

@@ -0,0 +1,7 @@
+[defaults]
+inventory = inventory/hosts.yml
+host_key_checking = False
+remote_user = root
+private_key_file = ~/.ssh/id_rsa
+interpreter_python = /usr/bin/python3
+stdout_callback = yaml

infra/ansible/inventory/hosts.yml

@@ -0,0 +1,13 @@
+$ANSIBLE_VAULT;1.1;AES256
+63663666653739363337653532643363626133303030323462363762316364633838623636626636
+3163343137366530326139353638316466663037663935340a386362666236633237313939366639
+34626337346365663033386631366362366261366163646438646461376662666665363635396333
+3533626234383564390a663966376163366530643965306563363565326438313465383866343138
+66633432663430373339326365303033323133383365656231373736323234386435626431383639
+63396366333433343039343165633436633839666330646261633338666435353035656230313932
+33333630343535646338303539356532306632373433643536393537383463396330366634393962
+36356139616432336664613139623038373434643562353565353866303130323938383439396131
+30316139333733356462366464653964313264646632336566616536643438326433623363643465
+63343430373666356634323761363433666463366431343537613635363239636131643837353935
+64316633663334663536656137666330393034666661383165376365666633303764643439366461
+33386433643034643466

infra/ansible/playbook.yml

@@ -0,0 +1,47 @@
+---
+- name: Deploy Frontend
+  hosts: prod
+
+  pre_tasks:
+    - name: Install docker
+      ansible.builtin.include_role:
+        name: geerlingguy.docker
+
+    - name: Configure ufw
+      community.general.ufw:
+        rule: allow
+        port: "{{ item }}"
+      loop:
+        - "80"
+        - "443"
+        - "2222"
+
+    - name: Enable ufw
+      community.general.ufw:
+        state: enabled
+  tasks:
+    - name: Ensure directory
+      ansible.builtin.file:
+        path: /opt/aegisfront
+        state: directory
+
+    - name: Copy compose
+      ansible.builtin.copy:
+        src: "{{ playbook_dir }}/../docker-compose.yml"
+        dest: /opt/aegisfront/docker-compose.yml
+
+    - name: Pull image
+      ansible.builtin.shell:
+        cmd: docker compose pull
+        chdir: /opt/aegisfront
+      environment:
+        REGISTRY: gitea.d3m0k1d.ru
+        TAG: latest
+
+    - name: Start
+      ansible.builtin.shell:
+        cmd: docker compose up -d --remove-orphans
+        chdir: /opt/aegisfront
+      environment:
+        REGISTRY: gitea.d3m0k1d.ru
+        TAG: latest

infra/ansible/requirements.yml

@@ -0,0 +1,6 @@
+---
+roles:
+  - geerlingguy.docker
+
+collections:
+  - community.general

infra/docker-compose.yml

@@ -0,0 +1,5 @@
+services:
+  app:
+    image: ${REGISTRY}/hellreign/frontend:${TAG}
+    ports:
+      - "80:80"

nginx.conf

@@ -0,0 +1,31 @@
+server {
+    listen 80;
+    server_name localhost;
+
+    root /usr/share/nginx/html;
+    index index.html;
+
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+    location /api/ {
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection 'upgrade';
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+        proxy_cache_bypass $http_upgrade;
+    }
+
+
+    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2)$ {
+        expires 1y;
+        add_header Cache-Control "public, immutable";
+    }
+
+    # Gzip сжатие
+    gzip on;
+    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
+}

package.json

@@ -5,13 +5,14 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "tsc -b && vite build",
+    "build": "vite build",
     "lint": "eslint .",
     "preview": "vite preview"
   },
   "dependencies": {
     "@tailwindcss/vite": "^4.3.0",
     "axios": "^1.17.0",
+    "lucide-react": "^1.18.0",
     "react": "^19.2.6",
     "react-dom": "^19.2.6",
     "react-icons": "^5.6.0",

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

@@ -1,4 +1,5 @@
 import { Navigate } from "react-router-dom";
+import { authService } from "@/modules/auth/api/auth.service";
 
 interface ProtectedRouteProps {
   children: React.ReactNode;
@@ -7,9 +8,11 @@ interface ProtectedRouteProps {
 
 export const ProtectedRoute: React.FC<ProtectedRouteProps> = ({
   children,
-  fallbackPath = "/",
+  fallbackPath = "/auth",
 }) => {
-  if (false) {
+  const isAuthenticated = authService.isAuthenticated();
+
+  if (!isAuthenticated) {
     return <Navigate to={fallbackPath} replace />;
   }
 

src/app/providers/routing.tsx

@@ -1,8 +1,11 @@
 import { Suspense } from "react";
+import { Routes as ReactRoutes, Route } from "react-router-dom";
 import { HomePage } from "@/pages/home.page";
 import { SecondaryPage } from "@/pages/secondary.page";
+import { AuthPage } from "@/pages/AuthPage";
+import { CreateOrganizationPage } from "@/pages/CreateOrganizationPage";
+import { OrganizationPage } from "@/pages/OrganizationPage";
 import { ProtectedRoute } from "./helper/protected.route";
-import { Routes as ReactRoutes, Route } from "react-router-dom";
 
 export const Routing = () => {
   return (
@@ -14,18 +17,32 @@ export const Routing = () => {
       }
     >
       <ReactRoutes>
-        <Route path="/home" element={<HomePage />} />
+        <Route path="/" element={<HomePage />} />
-
+        <Route path="/auth" element={<AuthPage />} />
-        <Route>
+        <Route
-          <Route
+          path="/create-organization"
-            path="/secondary"
+          element={
-            element={
+            <ProtectedRoute>
-              <ProtectedRoute>
+              <CreateOrganizationPage />
-                <SecondaryPage />
+            </ProtectedRoute>
-              </ProtectedRoute>
+          }
-            }
+        />
-          />
+        <Route
-        </Route>
+          path="/organization"
+          element={
+            <ProtectedRoute>
+              <OrganizationPage />
+            </ProtectedRoute>
+          }
+        />
+        <Route
+          path="/secondary"
+          element={
+            <ProtectedRoute>
+              <SecondaryPage />
+            </ProtectedRoute>
+          }
+        />
       </ReactRoutes>
     </Suspense>
   );

src/modules/auth/api/auth.service.ts

@@ -0,0 +1,394 @@
+import type {
+  LoginCredentials,
+  RegisterData,
+  AuthResponse,
+  OrganizationCreateData,
+  OrganizationResponse,
+  OrganizationMember,
+} from "../types/auth.types";
+
+// Заглушка для хранения данных в localStorage
+const MOCK_USERS_KEY = "mock_users";
+const MOCK_ORGS_KEY = "mock_organizations";
+const MOCK_MEMBERS_KEY = "mock_members";
+
+const getMockUsers = () => {
+  const users = localStorage.getItem(MOCK_USERS_KEY);
+  if (!users) {
+    const defaultUsers = [
+      {
+        id: 1,
+        username: "admin",
+        email: "admin@example.com",
+        password: "admin123",
+        first_name: "Admin",
+        last_name: "User",
+      },
+    ];
+    localStorage.setItem(MOCK_USERS_KEY, JSON.stringify(defaultUsers));
+    return defaultUsers;
+  }
+  return JSON.parse(users);
+};
+
+const getMockOrganizations = () => {
+  const orgs = localStorage.getItem(MOCK_ORGS_KEY);
+  if (!orgs) {
+    return [];
+  }
+  return JSON.parse(orgs);
+};
+
+const getMockMembers = () => {
+  const members = localStorage.getItem(MOCK_MEMBERS_KEY);
+  if (!members) {
+    return [];
+  }
+  return JSON.parse(members);
+};
+
+export const authService = {
+  async login(credentials: LoginCredentials): Promise<AuthResponse> {
+    return new Promise((resolve, reject) => {
+      setTimeout(() => {
+        const users = getMockUsers();
+        const user = users.find(
+          (u: any) =>
+            u.username === credentials.username &&
+            u.password === credentials.password,
+        );
+
+        if (user) {
+          resolve({
+            access_token: `mock_token_${user.id}_${Date.now()}`,
+            token_type: "bearer",
+            user: {
+              id: user.id,
+              username: user.username,
+              email: user.email,
+              first_name: user.first_name,
+              last_name: user.last_name,
+            },
+          });
+        } else {
+          reject({
+            response: {
+              data: { message: "Неверное имя пользователя или пароль" },
+            },
+          });
+        }
+      }, 500);
+    });
+  },
+
+  async register(
+    data: Omit<RegisterData, "confirmPassword">,
+  ): Promise<AuthResponse> {
+    return new Promise((resolve, reject) => {
+      setTimeout(() => {
+        const users = getMockUsers();
+        const existingUser = users.find(
+          (u: any) => u.username === data.username,
+        );
+
+        if (existingUser) {
+          reject({
+            response: {
+              data: { message: "Пользователь с таким именем уже существует" },
+            },
+          });
+          return;
+        }
+
+        const existingEmail = users.find((u: any) => u.email === data.email);
+        if (existingEmail) {
+          reject({
+            response: {
+              data: { message: "Пользователь с таким email уже существует" },
+            },
+          });
+          return;
+        }
+
+        const newUser = {
+          id: users.length + 1,
+          username: data.username,
+          email: data.email,
+          password: data.password,
+          first_name: data.first_name,
+          last_name: data.last_name,
+        };
+
+        users.push(newUser);
+        localStorage.setItem(MOCK_USERS_KEY, JSON.stringify(users));
+
+        resolve({
+          access_token: `mock_token_${newUser.id}_${Date.now()}`,
+          token_type: "bearer",
+          user: {
+            id: newUser.id,
+            username: newUser.username,
+            email: newUser.email,
+            first_name: newUser.first_name,
+            last_name: newUser.last_name,
+          },
+        });
+      }, 500);
+    });
+  },
+
+  async createOrganization(
+    data: OrganizationCreateData,
+  ): Promise<OrganizationResponse> {
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        const orgs = getMockOrganizations();
+        const token = this.getToken();
+        const userId = token ? parseInt(token.split("_")[1]) : 1;
+
+        const newOrg = {
+          id: orgs.length + 1,
+          name: data.name,
+          logo_url: data.logo ? URL.createObjectURL(data.logo) : undefined,
+          created_at: new Date().toISOString(),
+          owner_id: userId,
+        };
+
+        orgs.push(newOrg);
+        localStorage.setItem(MOCK_ORGS_KEY, JSON.stringify(orgs));
+
+        // Добавляем владельца в члены организации
+        const members = getMockMembers();
+        const newMember = {
+          id: members.length + 1,
+          organization_id: newOrg.id,
+          user_id: userId,
+          username: "temp_username",
+          email: "temp_email",
+          first_name: "temp_first",
+          last_name: "temp_last",
+          role: "owner",
+          joined_at: new Date().toISOString(),
+        };
+
+        // Получаем данные пользователя
+        const users = getMockUsers();
+        const user = users.find((u: any) => u.id === userId);
+        if (user) {
+          newMember.username = user.username;
+          newMember.email = user.email;
+          newMember.first_name = user.first_name;
+          newMember.last_name = user.last_name;
+        }
+
+        members.push(newMember);
+        localStorage.setItem(MOCK_MEMBERS_KEY, JSON.stringify(members));
+
+        resolve(newOrg);
+      }, 500);
+    });
+  },
+
+  async getOrganizations(): Promise<OrganizationResponse[]> {
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        const orgs = getMockOrganizations();
+        resolve(orgs);
+      }, 300);
+    });
+  },
+
+  async getOrganizationMembers(
+    organizationId: number,
+  ): Promise<OrganizationMember[]> {
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        const members = getMockMembers();
+        const orgMembers = members.filter(
+          (m: any) => m.organization_id === organizationId,
+        );
+        resolve(orgMembers);
+      }, 300);
+    });
+  },
+
+  async updateMemberRole(
+    organizationId: number,
+    userId: number,
+    newRole: string,
+  ): Promise<void> {
+    return new Promise((resolve, reject) => {
+      setTimeout(() => {
+        const members = getMockMembers();
+        const memberIndex = members.findIndex(
+          (m: any) =>
+            m.organization_id === organizationId && m.user_id === userId,
+        );
+
+        if (memberIndex !== -1) {
+          members[memberIndex].role = newRole;
+          localStorage.setItem(MOCK_MEMBERS_KEY, JSON.stringify(members));
+          resolve();
+        } else {
+          reject({ response: { data: { message: "Участник не найден" } } });
+        }
+      }, 500);
+    });
+  },
+
+  async removeMember(organizationId: number, userId: number): Promise<void> {
+    return new Promise((resolve, reject) => {
+      setTimeout(() => {
+        const members = getMockMembers();
+        const filteredMembers = members.filter(
+          (m: any) =>
+            !(m.organization_id === organizationId && m.user_id === userId),
+        );
+
+        if (filteredMembers.length !== members.length) {
+          localStorage.setItem(
+            MOCK_MEMBERS_KEY,
+            JSON.stringify(filteredMembers),
+          );
+          resolve();
+        } else {
+          reject({ response: { data: { message: "Участник не найден" } } });
+        }
+      }, 500);
+    });
+  },
+
+  async addMember(
+    organizationId: number,
+    email: string,
+    role: string,
+  ): Promise<OrganizationMember> {
+    return new Promise((resolve, reject) => {
+      setTimeout(() => {
+        const users = getMockUsers();
+        const user = users.find((u: any) => u.email === email);
+
+        if (!user) {
+          reject({
+            response: {
+              data: { message: "Пользователь с таким email не найден" },
+            },
+          });
+          return;
+        }
+
+        const members = getMockMembers();
+        const existingMember = members.find(
+          (m: any) =>
+            m.organization_id === organizationId && m.user_id === user.id,
+        );
+
+        if (existingMember) {
+          reject({
+            response: {
+              data: {
+                message: "Пользователь уже является участником организации",
+              },
+            },
+          });
+          return;
+        }
+
+        const newMember = {
+          id: members.length + 1,
+          organization_id: organizationId,
+          user_id: user.id,
+          username: user.username,
+          email: user.email,
+          first_name: user.first_name,
+          last_name: user.last_name,
+          role: role,
+          joined_at: new Date().toISOString(),
+        };
+
+        members.push(newMember);
+        localStorage.setItem(MOCK_MEMBERS_KEY, JSON.stringify(members));
+
+        resolve(newMember);
+      }, 500);
+    });
+  },
+
+  async getCurrentUser(): Promise<AuthResponse["user"]> {
+    return new Promise((resolve, reject) => {
+      const token = this.getToken();
+      if (!token) {
+        reject({ response: { data: { message: "Не авторизован" } } });
+        return;
+      }
+
+      const userId = parseInt(token.split("_")[1]);
+      const users = getMockUsers();
+      const user = users.find((u: any) => u.id === userId);
+
+      if (user) {
+        resolve({
+          id: user.id,
+          username: user.username,
+          email: user.email,
+          first_name: user.first_name,
+          last_name: user.last_name,
+        });
+      } else {
+        reject({ response: { data: { message: "Пользователь не найден" } } });
+      }
+    });
+  },
+
+  logout(): void {
+    localStorage.removeItem("auth-storage");
+    localStorage.removeItem("organization-storage");
+  },
+
+  saveAuthData(token: string, user: AuthResponse["user"]): void {
+    const authStorage = {
+      state: {
+        token,
+        user,
+      },
+      version: 0,
+    };
+    localStorage.setItem("auth-storage", JSON.stringify(authStorage));
+  },
+
+  saveOrganization(organization: OrganizationResponse): void {
+    localStorage.setItem("organization-storage", JSON.stringify(organization));
+  },
+
+  getToken(): string | null {
+    const authStorage = localStorage.getItem("auth-storage");
+    if (!authStorage) return null;
+
+    try {
+      const parsed = JSON.parse(authStorage);
+      return parsed.state?.token || null;
+    } catch {
+      return null;
+    }
+  },
+
+  getCurrentOrganization(): OrganizationResponse | null {
+    const orgStorage = localStorage.getItem("organization-storage");
+    if (!orgStorage) return null;
+
+    try {
+      return JSON.parse(orgStorage);
+    } catch {
+      return null;
+    }
+  },
+
+  isAuthenticated(): boolean {
+    const token = this.getToken();
+    return !!token;
+  },
+
+  hasOrganization(): boolean {
+    return !!this.getCurrentOrganization();
+  },
+};

src/modules/auth/components/CreateOrganizationForm.tsx

@@ -0,0 +1,138 @@
+import React, { useState, useRef } from "react";
+import { useAuth } from "../hooks/useAuth";
+
+export const CreateOrganizationForm = () => {
+  const [organizationName, setOrganizationName] = useState("");
+  const [logo, setLogo] = useState<File | null>(null);
+  const [logoPreview, setLogoPreview] = useState<string>("");
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const { createOrganization, isLoading, error } = useAuth();
+
+  const handleLogoChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      setLogo(file);
+      const reader = new FileReader();
+      reader.onloadend = () => {
+        setLogoPreview(reader.result as string);
+      };
+      reader.readAsDataURL(file);
+    }
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (organizationName.trim()) {
+      await createOrganization({
+        name: organizationName,
+        logo: logo || undefined,
+      });
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-6">
+      <div className="flex justify-center">
+        <div className="relative">
+          <div
+            className="w-32 h-32 rounded-full border-2 border-dashed flex items-center justify-center cursor-pointer overflow-hidden transition-all hover:border-accent"
+            style={{
+              borderColor: "var(--border)",
+              backgroundColor: "var(--bg-secondary)",
+            }}
+            onClick={() => fileInputRef.current?.click()}
+          >
+            {logoPreview ? (
+              <img
+                src={logoPreview}
+                alt="Organization logo"
+                className="w-full h-full object-cover"
+              />
+            ) : (
+              <div className="text-center">
+                <svg
+                  className="w-10 h-10 mx-auto mb-1"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  style={{ color: "var(--text-muted)" }}
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
+                  />
+                </svg>
+                <span
+                  className="text-xs"
+                  style={{ color: "var(--text-muted)" }}
+                >
+                  Загрузить лого
+                </span>
+              </div>
+            )}
+          </div>
+          <input
+            ref={fileInputRef}
+            type="file"
+            accept="image/*"
+            onChange={handleLogoChange}
+            className="hidden"
+          />
+        </div>
+      </div>
+
+      <div>
+        <label
+          htmlFor="organizationName"
+          className="block text-sm font-medium mb-2"
+          style={{ color: "var(--text-secondary)" }}
+        >
+          Название организации
+        </label>
+        <input
+          id="organizationName"
+          type="text"
+          value={organizationName}
+          onChange={(e) => setOrganizationName(e.target.value)}
+          className="w-full px-4 py-2 rounded-lg border transition-all focus:outline-none focus:ring-2"
+          style={{
+            backgroundColor: "var(--input-bg)",
+            color: "var(--text-primary)",
+            borderColor: "var(--border)",
+            "--tw-ring-color": "var(--accent)",
+          }}
+          required
+          disabled={isLoading}
+          placeholder="Введите название организации"
+        />
+      </div>
+
+      {error && (
+        <div
+          className="p-3 rounded-lg text-sm"
+          style={{
+            backgroundColor: "var(--error-bg)",
+            borderColor: "var(--error-border)",
+            color: "var(--error-text)",
+          }}
+        >
+          {error}
+        </div>
+      )}
+
+      <button
+        type="submit"
+        disabled={isLoading}
+        className="w-full py-2 px-4 rounded-lg font-medium transition-all transform hover:scale-[1.02] active:scale-[0.98] disabled:opacity-50 disabled:cursor-not-allowed"
+        style={{
+          backgroundColor: "var(--button-primary)",
+          color: "var(--button-primary-text)",
+        }}
+      >
+        {isLoading ? "Создание..." : "Создать организацию"}
+      </button>
+    </form>
+  );
+};

src/modules/auth/components/LoginForm.tsx

@@ -0,0 +1,109 @@
+import React, { useState } from "react";
+import { useAuth } from "../hooks/useAuth";
+
+interface LoginFormProps {
+  onSwitchToRegister: () => void;
+}
+
+export const LoginForm: React.FC<LoginFormProps> = ({ onSwitchToRegister }) => {
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const { login, isLoading, error } = useAuth();
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    await login({ username, password });
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-6">
+      <div>
+        <label
+          htmlFor="username"
+          className="block text-sm font-medium mb-2"
+          style={{ color: "var(--text-secondary)" }}
+        >
+          Имя пользователя
+        </label>
+        <input
+          id="username"
+          type="text"
+          value={username}
+          onChange={(e) => setUsername(e.target.value)}
+          className="w-full px-4 py-2 rounded-lg border transition-all focus:outline-none focus:ring-2"
+          style={{
+            backgroundColor: "var(--input-bg)",
+            color: "var(--text-primary)",
+            borderColor: "var(--border)",
+            "--tw-ring-color": "var(--accent)",
+          }}
+          required
+          disabled={isLoading}
+          placeholder="Введите имя пользователя"
+        />
+      </div>
+
+      <div>
+        <label
+          htmlFor="password"
+          className="block text-sm font-medium mb-2"
+          style={{ color: "var(--text-secondary)" }}
+        >
+          Пароль
+        </label>
+        <input
+          id="password"
+          type="password"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+          className="w-full px-4 py-2 rounded-lg border transition-all focus:outline-none focus:ring-2"
+          style={{
+            backgroundColor: "var(--input-bg)",
+            color: "var(--text-primary)",
+            borderColor: "var(--border)",
+            "--tw-ring-color": "var(--accent)",
+          }}
+          required
+          disabled={isLoading}
+          placeholder="Введите пароль"
+        />
+      </div>
+
+      {error && (
+        <div
+          className="p-3 rounded-lg text-sm"
+          style={{
+            backgroundColor: "var(--error-bg)",
+            borderColor: "var(--error-border)",
+            color: "var(--error-text)",
+          }}
+        >
+          {error}
+        </div>
+      )}
+
+      <button
+        type="submit"
+        disabled={isLoading}
+        className="w-full py-2 px-4 rounded-lg font-medium transition-all transform hover:scale-[1.02] active:scale-[0.98] disabled:opacity-50 disabled:cursor-not-allowed"
+        style={{
+          backgroundColor: "var(--button-primary)",
+          color: "var(--button-primary-text)",
+        }}
+      >
+        {isLoading ? "Вход..." : "Войти"}
+      </button>
+
+      <div className="text-center">
+        <button
+          type="button"
+          onClick={onSwitchToRegister}
+          className="text-sm transition-colors hover:underline"
+          style={{ color: "var(--link)" }}
+        >
+          Нет аккаунта? Зарегистрироваться
+        </button>
+      </div>
+    </form>
+  );
+};

src/modules/auth/components/RegisterForm.tsx

@@ -0,0 +1,231 @@
+import React, { useState } from "react";
+import { useAuth } from "../hooks/useAuth";
+
+interface RegisterFormProps {
+  onSwitchToLogin: () => void;
+}
+
+export const RegisterForm: React.FC<RegisterFormProps> = ({
+  onSwitchToLogin,
+}) => {
+  const [formData, setFormData] = useState({
+    first_name: "",
+    last_name: "",
+    username: "",
+    email: "",
+    password: "",
+    confirmPassword: "",
+  });
+
+  const { register, isLoading, error } = useAuth();
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setFormData({
+      ...formData,
+      [e.target.id]: e.target.value,
+    });
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    await register(formData);
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4">
+      <div className="grid grid-cols-2 gap-4">
+        <div>
+          <label
+            htmlFor="first_name"
+            className="block text-sm font-medium mb-2"
+            style={{ color: "var(--text-secondary)" }}
+          >
+            Имя
+          </label>
+          <input
+            id="first_name"
+            type="text"
+            value={formData.first_name}
+            onChange={handleChange}
+            className="w-full px-4 py-2 rounded-lg border transition-all focus:outline-none focus:ring-2"
+            style={{
+              backgroundColor: "var(--input-bg)",
+              color: "var(--text-primary)",
+              borderColor: "var(--border)",
+              "--tw-ring-color": "var(--accent)",
+            }}
+            required
+            disabled={isLoading}
+            placeholder="Имя"
+          />
+        </div>
+
+        <div>
+          <label
+            htmlFor="last_name"
+            className="block text-sm font-medium mb-2"
+            style={{ color: "var(--text-secondary)" }}
+          >
+            Фамилия
+          </label>
+          <input
+            id="last_name"
+            type="text"
+            value={formData.last_name}
+            onChange={handleChange}
+            className="w-full px-4 py-2 rounded-lg border transition-all focus:outline-none focus:ring-2"
+            style={{
+              backgroundColor: "var(--input-bg)",
+              color: "var(--text-primary)",
+              borderColor: "var(--border)",
+              "--tw-ring-color": "var(--accent)",
+            }}
+            required
+            disabled={isLoading}
+            placeholder="Фамилия"
+          />
+        </div>
+      </div>
+
+      <div>
+        <label
+          htmlFor="username"
+          className="block text-sm font-medium mb-2"
+          style={{ color: "var(--text-secondary)" }}
+        >
+          Имя пользователя
+        </label>
+        <input
+          id="username"
+          type="text"
+          value={formData.username}
+          onChange={handleChange}
+          className="w-full px-4 py-2 rounded-lg border transition-all focus:outline-none focus:ring-2"
+          style={{
+            backgroundColor: "var(--input-bg)",
+            color: "var(--text-primary)",
+            borderColor: "var(--border)",
+            "--tw-ring-color": "var(--accent)",
+          }}
+          required
+          disabled={isLoading}
+          placeholder="username"
+        />
+      </div>
+
+      <div>
+        <label
+          htmlFor="email"
+          className="block text-sm font-medium mb-2"
+          style={{ color: "var(--text-secondary)" }}
+        >
+          Email
+        </label>
+        <input
+          id="email"
+          type="email"
+          value={formData.email}
+          onChange={handleChange}
+          className="w-full px-4 py-2 rounded-lg border transition-all focus:outline-none focus:ring-2"
+          style={{
+            backgroundColor: "var(--input-bg)",
+            color: "var(--text-primary)",
+            borderColor: "var(--border)",
+            "--tw-ring-color": "var(--accent)",
+          }}
+          required
+          disabled={isLoading}
+          placeholder="example@mail.com"
+        />
+      </div>
+
+      <div>
+        <label
+          htmlFor="password"
+          className="block text-sm font-medium mb-2"
+          style={{ color: "var(--text-secondary)" }}
+        >
+          Пароль
+        </label>
+        <input
+          id="password"
+          type="password"
+          value={formData.password}
+          onChange={handleChange}
+          className="w-full px-4 py-2 rounded-lg border transition-all focus:outline-none focus:ring-2"
+          style={{
+            backgroundColor: "var(--input-bg)",
+            color: "var(--text-primary)",
+            borderColor: "var(--border)",
+            "--tw-ring-color": "var(--accent)",
+          }}
+          required
+          disabled={isLoading}
+          placeholder="Введите пароль"
+        />
+      </div>
+
+      <div>
+        <label
+          htmlFor="confirmPassword"
+          className="block text-sm font-medium mb-2"
+          style={{ color: "var(--text-secondary)" }}
+        >
+          Подтверждение пароля
+        </label>
+        <input
+          id="confirmPassword"
+          type="password"
+          value={formData.confirmPassword}
+          onChange={handleChange}
+          className="w-full px-4 py-2 rounded-lg border transition-all focus:outline-none focus:ring-2"
+          style={{
+            backgroundColor: "var(--input-bg)",
+            color: "var(--text-primary)",
+            borderColor: "var(--border)",
+            "--tw-ring-color": "var(--accent)",
+          }}
+          required
+          disabled={isLoading}
+          placeholder="Повторите пароль"
+        />
+      </div>
+
+      {error && (
+        <div
+          className="p-3 rounded-lg text-sm"
+          style={{
+            backgroundColor: "var(--error-bg)",
+            borderColor: "var(--error-border)",
+            color: "var(--error-text)",
+          }}
+        >
+          {error}
+        </div>
+      )}
+
+      <button
+        type="submit"
+        disabled={isLoading}
+        className="w-full py-2 px-4 rounded-lg font-medium transition-all transform hover:scale-[1.02] active:scale-[0.98] disabled:opacity-50 disabled:cursor-not-allowed"
+        style={{
+          backgroundColor: "var(--button-primary)",
+          color: "var(--button-primary-text)",
+        }}
+      >
+        {isLoading ? "Регистрация..." : "Зарегистрироваться"}
+      </button>
+
+      <div className="text-center">
+        <button
+          type="button"
+          onClick={onSwitchToLogin}
+          className="text-sm transition-colors hover:underline"
+          style={{ color: "var(--link)" }}
+        >
+          Уже есть аккаунт? Войти
+        </button>
+      </div>
+    </form>
+  );
+};

src/modules/auth/hooks/useAuth.ts

@@ -0,0 +1,81 @@
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { authService } from "../api/auth.service";
+import { useApi } from "@/shared/api/hooks/use.api";
+import type {
+  LoginCredentials,
+  RegisterData,
+  OrganizationCreateData,
+} from "../types/auth.types";
+
+export const useAuth = () => {
+  const navigate = useNavigate();
+  const { isLoading, error, request } = useApi();
+  const [authError, setAuthError] = useState<string | null>(null);
+
+  const login = async (credentials: LoginCredentials) => {
+    setAuthError(null);
+    const result = await request(() => authService.login(credentials));
+
+    if (result) {
+      authService.saveAuthData(result.access_token, result.user);
+
+      const orgs = await request(() => authService.getOrganizations());
+      if (orgs && orgs.length > 0) {
+        authService.saveOrganization(orgs[0]);
+        navigate("/");
+      } else {
+        navigate("/create-organization");
+      }
+    } else if (error) {
+      setAuthError(error);
+    }
+  };
+
+  const register = async (data: RegisterData) => {
+    setAuthError(null);
+
+    if (data.password !== data.confirmPassword) {
+      setAuthError("Пароли не совпадают");
+      return;
+    }
+
+    const { confirmPassword, ...registerData } = data;
+    const result = await request(() => authService.register(registerData));
+
+    if (result) {
+      authService.saveAuthData(result.access_token, result.user);
+      navigate("/create-organization");
+    } else if (error) {
+      setAuthError(error);
+    }
+  };
+
+  const createOrganization = async (data: OrganizationCreateData) => {
+    setAuthError(null);
+    const result = await request(() => authService.createOrganization(data));
+
+    if (result) {
+      authService.saveOrganization(result);
+      navigate("/");
+    } else if (error) {
+      setAuthError(error);
+    }
+  };
+
+  const logout = () => {
+    authService.logout();
+    navigate("/");
+  };
+
+  return {
+    login,
+    register,
+    createOrganization,
+    logout,
+    isLoading,
+    error: authError,
+    isAuthenticated: authService.isAuthenticated(),
+    hasOrganization: authService.hasOrganization(),
+  };
+};

src/modules/auth/types/auth.types.ts

@@ -0,0 +1,49 @@
+export interface LoginCredentials {
+  username: string;
+  password: string;
+}
+
+export interface RegisterData {
+  username: string;
+  email: string;
+  password: string;
+  confirmPassword: string;
+  first_name: string;
+  last_name: string;
+}
+
+export interface AuthResponse {
+  access_token: string;
+  token_type: string;
+  user: {
+    id: number;
+    username: string;
+    email: string;
+    first_name: string;
+    last_name: string;
+  };
+}
+
+export interface OrganizationCreateData {
+  name: string;
+  logo?: File;
+}
+
+export interface OrganizationResponse {
+  id: number;
+  name: string;
+  logo_url?: string;
+  created_at: string;
+  owner_id: number;
+}
+
+export interface OrganizationMember {
+  id: number;
+  user_id: number;
+  username: string;
+  email: string;
+  first_name: string;
+  last_name: string;
+  role: "owner" | "admin" | "member";
+  joined_at: string;
+}

src/modules/organization/components/OrganizationMembers.tsx

@@ -0,0 +1,307 @@
+import React, { useState } from "react";
+import { useOrganization } from "../hooks/useOrganization";
+
+export const OrganizationMembers = () => {
+  const { members, isLoading, updateMemberRole, removeMember, addMember } =
+    useOrganization();
+  const [showAddModal, setShowAddModal] = useState(false);
+  const [newMemberEmail, setNewMemberEmail] = useState("");
+  const [newMemberRole, setNewMemberRole] = useState<"admin" | "member">(
+    "member",
+  );
+  const [actionLoading, setActionLoading] = useState<number | null>(null);
+
+  const handleRoleChange = async (userId: number, newRole: string) => {
+    setActionLoading(userId);
+    await updateMemberRole(userId, newRole);
+    setActionLoading(null);
+  };
+
+  const handleRemoveMember = async (userId: number, memberName: string) => {
+    if (
+      confirm(
+        `Вы уверены, что хотите удалить пользователя "${memberName}" из организации?`,
+      )
+    ) {
+      setActionLoading(userId);
+      await removeMember(userId);
+      setActionLoading(null);
+    }
+  };
+
+  const handleAddMember = async (e: React.FormEvent) => {
+    e.preventDefault();
+    const success = await addMember(newMemberEmail, newMemberRole);
+    if (success) {
+      setShowAddModal(false);
+      setNewMemberEmail("");
+      setNewMemberRole("member");
+    }
+  };
+
+  const getRoleLabel = (role: string) => {
+    switch (role) {
+      case "owner":
+        return "Владелец";
+      case "admin":
+        return "Администратор";
+      case "member":
+        return "Участник";
+      default:
+        return role;
+    }
+  };
+
+  const getRoleColor = (role: string) => {
+    switch (role) {
+      case "owner":
+        return "text-yellow-600 dark:text-yellow-400";
+      case "admin":
+        return "text-blue-600 dark:text-blue-400";
+      case "member":
+        return "text-green-600 dark:text-green-400";
+      default:
+        return "";
+    }
+  };
+
+  if (isLoading && members.length === 0) {
+    return (
+      <div className="flex justify-center py-12">
+        <div style={{ color: "var(--text-secondary)" }}>
+          Загрузка участников...
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <div className="flex justify-between items-center mb-6">
+        <h2
+          className="text-2xl font-bold"
+          style={{ color: "var(--text-primary)" }}
+        >
+          Участники организации
+        </h2>
+        <button
+          onClick={() => setShowAddModal(true)}
+          className="px-4 py-2 rounded-lg font-medium transition-all transform hover:scale-[1.02] active:scale-[0.98]"
+          style={{
+            backgroundColor: "var(--accent)",
+            color: "var(--button-primary-text)",
+          }}
+        >
+          + Добавить участника
+        </button>
+      </div>
+
+      <div className="overflow-x-auto">
+        <table className="w-full">
+          <thead>
+            <tr className="border-b" style={{ borderColor: "var(--border)" }}>
+              <th
+                className="text-left py-3 px-4"
+                style={{ color: "var(--text-secondary)" }}
+              >
+                Имя
+              </th>
+              <th
+                className="text-left py-3 px-4"
+                style={{ color: "var(--text-secondary)" }}
+              >
+                Email
+              </th>
+              <th
+                className="text-left py-3 px-4"
+                style={{ color: "var(--text-secondary)" }}
+              >
+                Роль
+              </th>
+              <th
+                className="text-left py-3 px-4"
+                style={{ color: "var(--text-secondary)" }}
+              >
+                Действия
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {members.map((member) => (
+              <tr
+                key={member.id}
+                className="border-b"
+                style={{ borderColor: "var(--border)" }}
+              >
+                <td
+                  className="py-3 px-4"
+                  style={{ color: "var(--text-primary)" }}
+                >
+                  {member.first_name} {member.last_name}
+                  <div
+                    className="text-xs"
+                    style={{ color: "var(--text-muted)" }}
+                  >
+                    @{member.username}
+                  </div>
+                </td>
+                <td
+                  className="py-3 px-4"
+                  style={{ color: "var(--text-primary)" }}
+                >
+                  {member.email}
+                </td>
+                <td className="py-3 px-4">
+                  {member.role === "owner" ? (
+                    <span
+                      className={`font-medium ${getRoleColor(member.role)}`}
+                    >
+                      {getRoleLabel(member.role)}
+                    </span>
+                  ) : (
+                    <select
+                      value={member.role}
+                      onChange={(e) =>
+                        handleRoleChange(member.user_id, e.target.value)
+                      }
+                      disabled={actionLoading === member.user_id}
+                      className="px-2 py-1 rounded border focus:outline-none focus:ring-2"
+                      style={{
+                        backgroundColor: "var(--input-bg)",
+                        color: "var(--text-primary)",
+                        borderColor: "var(--border)",
+                        "--tw-ring-color": "var(--accent)",
+                      }}
+                    >
+                      <option value="admin">{getRoleLabel("admin")}</option>
+                      <option value="member">{getRoleLabel("member")}</option>
+                    </select>
+                  )}
+                </td>
+                <td className="py-3 px-4">
+                  {member.role !== "owner" && (
+                    <button
+                      onClick={() =>
+                        handleRemoveMember(
+                          member.user_id,
+                          `${member.first_name} ${member.last_name}`,
+                        )
+                      }
+                      disabled={actionLoading === member.user_id}
+                      className="px-3 py-1 rounded text-sm transition-all hover:scale-105 disabled:opacity-50"
+                      style={{
+                        backgroundColor: "var(--button-danger)",
+                        color: "var(--button-danger-text)",
+                      }}
+                    >
+                      {actionLoading === member.user_id ? "..." : "Удалить"}
+                    </button>
+                  )}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      {members.length === 0 && !isLoading && (
+        <div
+          className="text-center py-12"
+          style={{ color: "var(--text-secondary)" }}
+        >
+          В организации пока нет участников
+        </div>
+      )}
+
+      {showAddModal && (
+        <div className="fixed inset-0 bg-[#00000055] bg-opacity-50 flex items-center justify-center z-50">
+          <div
+            className="rounded-2xl p-6 max-w-md w-full mx-4"
+            style={{
+              backgroundColor: "var(--card-bg)",
+              boxShadow: `0 20px 25px -5px var(--shadow-color)`,
+            }}
+          >
+            <h3
+              className="text-xl font-bold mb-4"
+              style={{ color: "var(--text-primary)" }}
+            >
+              Добавить участника
+            </h3>
+            <form onSubmit={handleAddMember}>
+              <div className="mb-4">
+                <label
+                  className="block text-sm font-medium mb-2"
+                  style={{ color: "var(--text-secondary)" }}
+                >
+                  Email пользователя
+                </label>
+                <input
+                  type="email"
+                  value={newMemberEmail}
+                  onChange={(e) => setNewMemberEmail(e.target.value)}
+                  className="w-full px-4 py-2 rounded-lg border focus:outline-none focus:ring-2"
+                  style={{
+                    backgroundColor: "var(--input-bg)",
+                    color: "var(--text-primary)",
+                    borderColor: "var(--border)",
+                    "--tw-ring-color": "var(--accent)",
+                  }}
+                  required
+                  placeholder="user@example.com"
+                />
+              </div>
+              <div className="mb-6">
+                <label
+                  className="block text-sm font-medium mb-2"
+                  style={{ color: "var(--text-secondary)" }}
+                >
+                  Роль
+                </label>
+                <select
+                  value={newMemberRole}
+                  onChange={(e) =>
+                    setNewMemberRole(e.target.value as "admin" | "member")
+                  }
+                  className="w-full px-4 py-2 rounded-lg border focus:outline-none focus:ring-2"
+                  style={{
+                    backgroundColor: "var(--input-bg)",
+                    color: "var(--text-primary)",
+                    borderColor: "var(--border)",
+                    "--tw-ring-color": "var(--accent)",
+                  }}
+                >
+                  <option value="admin">Администратор</option>
+                  <option value="member">Участник</option>
+                </select>
+              </div>
+              <div className="flex gap-3">
+                <button
+                  type="button"
+                  onClick={() => setShowAddModal(false)}
+                  className="flex-1 py-2 px-4 rounded-lg font-medium transition-all"
+                  style={{
+                    backgroundColor: "var(--bg-secondary)",
+                    color: "var(--text-secondary)",
+                  }}
+                >
+                  Отмена
+                </button>
+                <button
+                  type="submit"
+                  className="flex-1 py-2 px-4 rounded-lg font-medium transition-all transform hover:scale-[1.02]"
+                  style={{
+                    backgroundColor: "var(--accent)",
+                    color: "var(--button-primary-text)",
+                  }}
+                >
+                  Добавить
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};

src/modules/organization/hooks/useOrganization.ts

@@ -0,0 +1,82 @@
+import { useState, useEffect } from "react";
+import { authService } from "@/modules/auth/api/auth.service";
+import { useApi } from "@/shared/api/hooks/use.api";
+import type { OrganizationMember } from "@/modules/auth/types/auth.types";
+
+export const useOrganization = () => {
+  const { isLoading, error, request } = useApi();
+  const [members, setMembers] = useState<OrganizationMember[]>([]);
+  const [organization, setOrganization] = useState(
+    authService.getCurrentOrganization(),
+  );
+
+  const loadMembers = async () => {
+    if (organization) {
+      const result = await request(() =>
+        authService.getOrganizationMembers(organization.id),
+      );
+      if (result) {
+        setMembers(result);
+      }
+    }
+  };
+
+  useEffect(() => {
+    loadMembers();
+  }, [organization]);
+
+  const updateMemberRole = async (userId: number, newRole: string) => {
+    if (organization) {
+      const result = await request(() =>
+        authService.updateMemberRole(organization.id, userId, newRole),
+      );
+      if (result !== undefined) {
+        await loadMembers();
+        return true;
+      }
+    }
+    return false;
+  };
+
+  const removeMember = async (userId: number) => {
+    if (organization) {
+      const result = await request(() =>
+        authService.removeMember(organization.id, userId),
+      );
+      if (result !== undefined) {
+        await loadMembers();
+        return true;
+      }
+    }
+    return false;
+  };
+
+  const addMember = async (email: string, role: string) => {
+    if (organization) {
+      const result = await request(() =>
+        authService.addMember(organization.id, email, role),
+      );
+      if (result) {
+        await loadMembers();
+        return true;
+      }
+    }
+    return false;
+  };
+
+  const refreshOrganization = () => {
+    setOrganization(authService.getCurrentOrganization());
+  };
+
+  return {
+    members,
+    organization,
+    isLoading,
+    error,
+    updateMemberRole,
+    removeMember,
+    addMember,
+    refreshOrganization,
+    loadMembers,
+  };
+};

src/pages/AuthPage.tsx

@@ -0,0 +1,63 @@
+import React, { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { ThemeToggle } from "@/modules/theme-changer/ui/Theme.toggle";
+import { LoginForm } from "@/modules/auth/components/LoginForm";
+import { RegisterForm } from "@/modules/auth/components/RegisterForm";
+
+export const AuthPage = () => {
+  const [isLogin, setIsLogin] = useState(true);
+  const navigate = useNavigate();
+
+  return (
+    <div
+      className="min-h-screen flex items-center justify-center p-4 transition-theme"
+      style={{ backgroundColor: "var(--bg-primary)" }}
+    >
+      <div className="absolute top-4 right-4 flex gap-4">
+        <button
+          onClick={() => navigate("/")}
+          className="px-4 py-2 rounded-lg font-medium transition-all hover:scale-105"
+          style={{
+            backgroundColor: "var(--bg-secondary)",
+            color: "var(--text-primary)",
+            border: `1px solid var(--border)`,
+          }}
+        >
+          На главную
+        </button>
+        <ThemeToggle />
+      </div>
+
+      <div
+        className="w-full max-w-md rounded-2xl shadow-xl p-8 transition-theme"
+        style={{
+          backgroundColor: "var(--card-bg)",
+          boxShadow: `0 20px 25px -5px var(--shadow-color), 0 8px 10px -6px var(--shadow-color)`,
+        }}
+      >
+        <div className="text-center mb-8">
+          <h1
+            className="text-3xl font-bold mb-2 transition-theme"
+            style={{ color: "var(--text-primary)" }}
+          >
+            IPS Manager
+          </h1>
+          <p
+            className="text-sm transition-theme"
+            style={{ color: "var(--text-secondary)" }}
+          >
+            {isLogin
+              ? "Войдите в систему для управления IPS агентами"
+              : "Создайте аккаунт для начала работы"}
+          </p>
+        </div>
+
+        {isLogin ? (
+          <LoginForm onSwitchToRegister={() => setIsLogin(false)} />
+        ) : (
+          <RegisterForm onSwitchToLogin={() => setIsLogin(true)} />
+        )}
+      </div>
+    </div>
+  );
+};

src/pages/CreateOrganizationPage.tsx

@@ -0,0 +1,52 @@
+import { ThemeToggle } from "@/modules/theme-changer/ui/Theme.toggle";
+import { CreateOrganizationForm } from "@/modules/auth/components/CreateOrganizationForm";
+import { useAuth } from "@/modules/auth/hooks/useAuth";
+import { Navigate } from "react-router-dom";
+
+export const CreateOrganizationPage = () => {
+  const { isAuthenticated, hasOrganization } = useAuth();
+
+  if (!isAuthenticated) {
+    return <Navigate to="/" replace />;
+  }
+
+  if (hasOrganization) {
+    return <Navigate to="/home" replace />;
+  }
+
+  return (
+    <div
+      className="min-h-screen flex items-center justify-center p-4 transition-theme"
+      style={{ backgroundColor: "var(--bg-primary)" }}
+    >
+      <div className="absolute top-4 right-4">
+        <ThemeToggle />
+      </div>
+
+      <div
+        className="w-full max-w-md rounded-2xl shadow-xl p-8 transition-theme"
+        style={{
+          backgroundColor: "var(--card-bg)",
+          boxShadow: `0 20px 25px -5px var(--shadow-color), 0 8px 10px -6px var(--shadow-color)`,
+        }}
+      >
+        <div className="text-center mb-8">
+          <h1
+            className="text-2xl font-bold mb-2 transition-theme"
+            style={{ color: "var(--text-primary)" }}
+          >
+            Создание организации
+          </h1>
+          <p
+            className="text-sm transition-theme"
+            style={{ color: "var(--text-secondary)" }}
+          >
+            Создайте организацию для начала работы с IPS платформой
+          </p>
+        </div>
+
+        <CreateOrganizationForm />
+      </div>
+    </div>
+  );
+};

src/pages/OrganizationPage.tsx

@@ -0,0 +1,74 @@
+import React from "react";
+import { ThemeToggle } from "@/modules/theme-changer/ui/Theme.toggle";
+import { OrganizationMembers } from "@/modules/organization/components/OrganizationMembers";
+import { useAuth } from "@/modules/auth/hooks/useAuth";
+import { Navigate, useNavigate } from "react-router-dom";
+import { authService } from "@/modules/auth/api/auth.service";
+
+export const OrganizationPage = () => {
+  const { isAuthenticated, hasOrganization } = useAuth();
+  const navigate = useNavigate();
+  const organization = authService.getCurrentOrganization();
+
+  if (!isAuthenticated) {
+    return <Navigate to="/" replace />;
+  }
+
+  if (!hasOrganization) {
+    return <Navigate to="/create-organization" replace />;
+  }
+
+  return (
+    <div
+      className="min-h-screen transition-theme"
+      style={{ backgroundColor: "var(--bg-primary)" }}
+    >
+      <div className="absolute top-4 right-4">
+        <ThemeToggle />
+      </div>
+
+      <div className="container mx-auto px-4 py-8">
+        <div className="mb-8">
+          <button
+            onClick={() => navigate("/home")}
+            className="mb-4 inline-flex items-center gap-2 text-sm transition-colors hover:underline"
+            style={{ color: "var(--link)" }}
+          >
+            ← Назад
+          </button>
+
+          <div className="flex items-center gap-4">
+            {organization?.logo_url && (
+              <img
+                src={organization.logo_url}
+                alt={organization.name}
+                className="w-16 h-16 rounded-full object-cover"
+              />
+            )}
+            <div>
+              <h1
+                className="text-3xl font-bold"
+                style={{ color: "var(--text-primary)" }}
+              >
+                {organization?.name}
+              </h1>
+              <p className="text-sm" style={{ color: "var(--text-secondary)" }}>
+                Управление участниками организации
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <div
+          className="rounded-2xl p-6"
+          style={{
+            backgroundColor: "var(--card-bg)",
+            boxShadow: `0 4px 6px -1px var(--shadow-color)`,
+          }}
+        >
+          <OrganizationMembers />
+        </div>
+      </div>
+    </div>
+  );
+};

src/pages/home.page.tsx

@@ -1,13 +1,723 @@
 import { ThemeToggle } from "@/modules/theme-changer/ui/Theme.toggle";
+import { useNavigate } from "react-router-dom";
+import { useAuth } from "@/modules/auth/hooks/useAuth";
+import { authService } from "@/modules/auth/api/auth.service";
+import {
+  Shield,
+  Users,
+  Bot,
+  Activity,
+  LogOut,
+  ChevronRight,
+  Zap,
+  Lock,
+  Cloud,
+  TrendingUp,
+  Bell,
+  Server,
+  Sparkles,
+  AlertCircle,
+  CheckCircle,
+  Clock,
+  LogIn,
+  UserPlus,
+} from "lucide-react";
 
 export const HomePage = () => {
+  const navigate = useNavigate();
+  const { logout } = useAuth();
+  const isAuthenticated = authService.isAuthenticated();
+  const organization = authService.getCurrentOrganization();
+  const authStorage = localStorage.getItem("auth-storage");
+  const user = authStorage ? JSON.parse(authStorage).state?.user : null;
+
+  const stats = [
+    { label: "Активные агенты", value: "12", change: "+2", icon: Server },
+    { label: "Заблокировано IP", value: "1,284", change: "+128", icon: Shield },
+    { label: "Активных правил", value: "47", change: "+5", icon: Lock },
+    {
+      label: "Атак предотвращено",
+      value: "3,721",
+      change: "+342",
+      icon: TrendingUp,
+    },
+  ];
+
+  const recentActivities = [
+    {
+      id: 1,
+      type: "attack",
+      message: "Обнаружена brute-force атака с IP 192.168.1.45",
+      time: "2 минуты назад",
+      severity: "high",
+    },
+    {
+      id: 2,
+      type: "rule",
+      message: "Новое правило фильтрации добавлено администратором",
+      time: "15 минут назад",
+      severity: "info",
+    },
+    {
+      id: 3,
+      type: "agent",
+      message: "Агент на сервере web-01 успешно обновлен",
+      time: "1 час назад",
+      severity: "success",
+    },
+    {
+      id: 4,
+      type: "ai",
+      message: "AI предложил новые правила для обнаружения ботов",
+      time: "3 часа назад",
+      severity: "info",
+    },
+  ];
+
+  const features = [
+    {
+      title: "Централизованное управление",
+      description: "Управляйте всеми IPS агентами из единого интерфейса",
+      icon: Server,
+      color: "#6366f1",
+    },
+    {
+      title: "AI Аналитика",
+      description: "Искусственный интеллект помогает находить сложные атаки",
+      icon: Bot,
+      color: "#8b5cf6",
+    },
+    {
+      title: "Мгновенная блокировка",
+      description: "Автоматическая блокировка IP при обнаружении угроз",
+      icon: Zap,
+      color: "#f59e0b",
+    },
+    {
+      title: "Безопасность данных",
+      description: "LLM не получает доступ к чувствительным логам",
+      icon: Lock,
+      color: "#22c55e",
+    },
+  ];
+
+  const quickActions = isAuthenticated
+    ? [
+        {
+          name: "IPS Агенты",
+          icon: Server,
+          path: "/agents",
+          description: "Управление агентами",
+          color: "#6366f1",
+        },
+        {
+          name: "Правила",
+          icon: Shield,
+          path: "/rules",
+          description: "Правила фильтрации",
+          color: "#22c55e",
+        },
+        {
+          name: "AI Аналитика",
+          icon: Bot,
+          path: "/ai-analytics",
+          description: "Анализ логов",
+          color: "#8b5cf6",
+        },
+        {
+          name: "Команда",
+          icon: Users,
+          path: "/organization",
+          description: "Управление доступом",
+          color: "#f59e0b",
+        },
+      ]
+    : [];
+
+  const getSeverityStyles = (severity: string) => {
+    switch (severity) {
+      case "high":
+        return {
+          bg: "#ef444410",
+          border: "#ef4444",
+          icon: AlertCircle,
+          text: "#ef4444",
+        };
+      case "success":
+        return {
+          bg: "#22c55e10",
+          border: "#22c55e",
+          icon: CheckCircle,
+          text: "#22c55e",
+        };
+      default:
+        return {
+          bg: "#6366f110",
+          border: "#6366f1",
+          icon: Sparkles,
+          text: "#6366f1",
+        };
+    }
+  };
+
   return (
     <div
       style={{ backgroundColor: "var(--bg-primary)" }}
-      className="min-h-screen flex items-center justify-center p-4"
+      className="min-h-screen transition-theme"
     >
-      <ThemeToggle />
+      {/* Header */}
-      Домашняя
+      <header
+        className="sticky top-0 z-50 border-b transition-theme backdrop-blur-sm"
+        style={{
+          backgroundColor: "var(--bg-primary)",
+          borderColor: "var(--border)",
+        }}
+      >
+        <div className="container mx-auto px-6 py-4">
+          <div className="flex justify-between items-center">
+            {/* Logo */}
+            <div className="flex items-center gap-3">
+              <div
+                className="w-10 h-10 rounded-xl flex items-center justify-center"
+                style={{ backgroundColor: "var(--accent)" }}
+              >
+                <Shield className="w-6 h-6 text-white" />
+              </div>
+              <div>
+                <h1
+                  className="text-xl font-bold"
+                  style={{ color: "var(--text-primary)" }}
+                >
+                  IPS Manager
+                </h1>
+                {organization && (
+                  <p className="text-xs" style={{ color: "var(--text-muted)" }}>
+                    {organization.name}
+                  </p>
+                )}
+              </div>
+            </div>
+
+            {/* Right section */}
+            <div className="flex items-center gap-4">
+              {isAuthenticated ? (
+                <>
+                  <button
+                    className="relative p-2 rounded-lg transition-all hover:scale-105"
+                    style={{ backgroundColor: "var(--bg-secondary)" }}
+                  >
+                    <Bell
+                      className="w-5 h-5"
+                      style={{ color: "var(--text-secondary)" }}
+                    />
+                    <span
+                      className="absolute top-1 right-1 w-2 h-2 rounded-full"
+                      style={{ backgroundColor: "#ef4444" }}
+                    ></span>
+                  </button>
+                  <ThemeToggle />
+                  <div className="flex items-center gap-3">
+                    <div
+                      className="w-10 h-10 rounded-full flex items-center justify-center font-semibold text-white"
+                      style={{ backgroundColor: "var(--accent)" }}
+                    >
+                      {user?.first_name?.[0]}
+                      {user?.last_name?.[0]}
+                    </div>
+                    <div className="hidden md:block">
+                      <p
+                        className="text-sm font-medium"
+                        style={{ color: "var(--text-primary)" }}
+                      >
+                        {user?.first_name} {user?.last_name}
+                      </p>
+                      <p
+                        className="text-xs"
+                        style={{ color: "var(--text-muted)" }}
+                      >
+                        Администратор
+                      </p>
+                    </div>
+                  </div>
+                  <button
+                    onClick={logout}
+                    className="p-2 rounded-lg transition-all hover:scale-105"
+                    style={{ backgroundColor: "#ef4444" }}
+                  >
+                    <LogOut className="w-5 h-5 text-white" />
+                  </button>
+                </>
+              ) : (
+                <>
+                  <ThemeToggle />
+                  <button
+                    onClick={() => navigate("/auth")}
+                    className="px-4 py-2 rounded-lg font-medium transition-all flex items-center gap-2 hover:scale-105"
+                    style={{
+                      backgroundColor: "var(--bg-secondary)",
+                      color: "var(--text-primary)",
+                      border: `1px solid var(--border)`,
+                    }}
+                  >
+                    <LogIn className="w-4 h-4" />
+                    Войти
+                  </button>
+                  <button
+                    onClick={() => navigate("/auth")}
+                    className="px-4 py-2 rounded-lg font-medium transition-all flex items-center gap-2 hover:scale-105"
+                    style={{
+                      backgroundColor: "var(--accent)",
+                      color: "white",
+                    }}
+                  >
+                    <UserPlus className="w-4 h-4" />
+                    Регистрация
+                  </button>
+                </>
+              )}
+            </div>
+          </div>
+        </div>
+      </header>
+
+      <main className="container mx-auto px-6 py-8">
+        {/* Hero Section */}
+        <div
+          className="rounded-2xl p-8 mb-8 text-white relative overflow-hidden"
+          style={{
+            background: "linear-gradient(135deg, #6366f1 0%, #4f46e5 100%)",
+          }}
+        >
+          <div className="relative z-10">
+            <div className="flex justify-between items-start">
+              <div>
+                <h2 className="text-3xl font-bold mb-2">
+                  {isAuthenticated
+                    ? `Добро пожаловать, ${user?.first_name || "Администратор"}!`
+                    : "Добро пожаловать в IPS Manager"}
+                </h2>
+                <p className="text-white/80 text-lg">
+                  {isAuthenticated
+                    ? "Система IPS мониторинга и защиты"
+                    : "Современная платформа для централизованного управления IPS агентами"}
+                </p>
+                {!isAuthenticated && (
+                  <div className="flex gap-4 mt-6">
+                    <button
+                      onClick={() => navigate("/auth")}
+                      className="px-6 py-2 rounded-lg font-medium bg-white text-indigo-600 transition-all hover:scale-105 hover:shadow-lg"
+                    >
+                      Начать работу
+                    </button>
+                    <button className="px-6 py-2 rounded-lg font-medium border border-white/30 transition-all hover:bg-white/10">
+                      Узнать больше
+                    </button>
+                  </div>
+                )}
+                {isAuthenticated && (
+                  <div className="flex items-center gap-2 mt-4">
+                    <Zap className="w-5 h-5" />
+                    <span className="text-white/90">
+                      Все системы работают стабильно
+                    </span>
+                  </div>
+                )}
+              </div>
+              <div className="hidden lg:block opacity-20">
+                <Cloud className="w-32 h-32" />
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Stats Grid - только для авторизованных */}
+        {isAuthenticated && (
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+            {stats.map((stat, index) => {
+              const Icon = stat.icon;
+              return (
+                <div
+                  key={index}
+                  className="rounded-2xl p-6 transition-all hover:scale-105 hover:shadow-xl"
+                  style={{
+                    backgroundColor: "var(--card-bg)",
+                    boxShadow: `0 4px 6px -1px var(--shadow-color)`,
+                  }}
+                >
+                  <div className="flex justify-between items-start mb-4">
+                    <div
+                      className="w-12 h-12 rounded-xl flex items-center justify-center bg-opacity-20"
+                      style={{
+                        backgroundColor: `${index === 0 ? "#6366f1" : index === 1 ? "#ef4444" : index === 2 ? "#22c55e" : "#f59e0b"}20`,
+                      }}
+                    >
+                      <Icon
+                        className="w-6 h-6"
+                        style={{
+                          color:
+                            index === 0
+                              ? "#6366f1"
+                              : index === 1
+                                ? "#ef4444"
+                                : index === 2
+                                  ? "#22c55e"
+                                  : "#f59e0b",
+                        }}
+                      />
+                    </div>
+                    <span
+                      className="text-sm font-medium"
+                      style={{ color: "#22c55e" }}
+                    >
+                      {stat.change}
+                    </span>
+                  </div>
+                  <h3
+                    className="text-2xl font-bold mb-1"
+                    style={{ color: "var(--text-primary)" }}
+                  >
+                    {stat.value}
+                  </h3>
+                  <p
+                    className="text-sm"
+                    style={{ color: "var(--text-secondary)" }}
+                  >
+                    {stat.label}
+                  </p>
+                </div>
+              );
+            })}
+          </div>
+        )}
+
+        {/* Features Section - для всех */}
+        <div className="mb-8">
+          <div className="text-center mb-8">
+            <h2
+              className="text-2xl font-bold mb-2"
+              style={{ color: "var(--text-primary)" }}
+            >
+              Ключевые возможности
+            </h2>
+            <p className="text-sm" style={{ color: "var(--text-secondary)" }}>
+              Всё необходимое для защиты вашей инфраструктуры
+            </p>
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+            {features.map((feature, index) => {
+              const Icon = feature.icon;
+              return (
+                <div
+                  key={index}
+                  className="rounded-2xl p-6 transition-all hover:scale-105 hover:shadow-xl text-center"
+                  style={{
+                    backgroundColor: "var(--card-bg)",
+                    boxShadow: `0 4px 6px -1px var(--shadow-color)`,
+                  }}
+                >
+                  <div
+                    className="w-14 h-14 rounded-xl flex items-center justify-center mx-auto mb-4"
+                    style={{ backgroundColor: `${feature.color}20` }}
+                  >
+                    <Icon
+                      className="w-7 h-7"
+                      style={{ color: feature.color }}
+                    />
+                  </div>
+                  <h3
+                    className="font-bold mb-2"
+                    style={{ color: "var(--text-primary)" }}
+                  >
+                    {feature.title}
+                  </h3>
+                  <p
+                    className="text-sm"
+                    style={{ color: "var(--text-secondary)" }}
+                  >
+                    {feature.description}
+                  </p>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+
+        {isAuthenticated ? (
+          <>
+            <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+              {/* Quick Actions */}
+              <div className="lg:col-span-2">
+                <div
+                  className="rounded-2xl p-6"
+                  style={{
+                    backgroundColor: "var(--card-bg)",
+                    boxShadow: `0 4px 6px -1px var(--shadow-color)`,
+                  }}
+                >
+                  <h3
+                    className="text-xl font-bold mb-6"
+                    style={{ color: "var(--text-primary)" }}
+                  >
+                    Быстрый доступ
+                  </h3>
+                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                    {quickActions.map((action, index) => {
+                      const Icon = action.icon;
+                      return (
+                        <button
+                          key={index}
+                          onClick={() => navigate(action.path)}
+                          className="group p-4 rounded-xl text-left transition-all hover:scale-[1.02]"
+                          style={{
+                            backgroundColor: "var(--bg-secondary)",
+                            border: `1px solid var(--border)`,
+                          }}
+                        >
+                          <div className="flex items-start justify-between">
+                            <div
+                              className="w-10 h-10 rounded-lg flex items-center justify-center mb-3 transition-all group-hover:scale-110"
+                              style={{ backgroundColor: `${action.color}20` }}
+                            >
+                              <Icon
+                                className="w-5 h-5"
+                                style={{ color: action.color }}
+                              />
+                            </div>
+                            <ChevronRight
+                              className="w-5 h-5 opacity-0 group-hover:opacity-100 transition-all"
+                              style={{ color: "var(--text-muted)" }}
+                            />
+                          </div>
+                          <h4
+                            className="font-semibold mb-1"
+                            style={{ color: "var(--text-primary)" }}
+                          >
+                            {action.name}
+                          </h4>
+                          <p
+                            className="text-sm"
+                            style={{ color: "var(--text-secondary)" }}
+                          >
+                            {action.description}
+                          </p>
+                        </button>
+                      );
+                    })}
+                  </div>
+                </div>
+              </div>
+
+              {/* Recent Activity */}
+              <div
+                className="rounded-2xl p-6"
+                style={{
+                  backgroundColor: "var(--card-bg)",
+                  boxShadow: `0 4px 6px -1px var(--shadow-color)`,
+                }}
+              >
+                <div className="flex justify-between items-center mb-6">
+                  <h3
+                    className="text-xl font-bold"
+                    style={{ color: "var(--text-primary)" }}
+                  >
+                    Последние события
+                  </h3>
+                  <Activity
+                    className="w-5 h-5"
+                    style={{ color: "var(--text-muted)" }}
+                  />
+                </div>
+                <div className="space-y-4">
+                  {recentActivities.map((activity) => {
+                    const severityStyles = getSeverityStyles(activity.severity);
+                    const Icon = severityStyles.icon;
+                    return (
+                      <div
+                        key={activity.id}
+                        className="p-3 rounded-lg transition-all hover:scale-[1.01]"
+                        style={{
+                          backgroundColor: "var(--bg-secondary)",
+                        }}
+                      >
+                        <div className="flex gap-3">
+                          <div className="flex-shrink-0">
+                            <Icon
+                              className="w-4 h-4 mt-0.5"
+                              style={{ color: severityStyles.text }}
+                            />
+                          </div>
+                          <div className="flex-1 min-w-0">
+                            <p
+                              className="text-sm mb-1"
+                              style={{ color: "var(--text-primary)" }}
+                            >
+                              {activity.message}
+                            </p>
+                            <div className="flex items-center gap-2">
+                              <Clock
+                                className="w-3 h-3"
+                                style={{ color: "var(--text-muted)" }}
+                              />
+                              <p
+                                className="text-xs"
+                                style={{ color: "var(--text-muted)" }}
+                              >
+                                {activity.time}
+                              </p>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+                <button
+                  className="w-full mt-4 py-2 rounded-lg text-sm font-medium transition-all hover:scale-[1.02]"
+                  style={{
+                    backgroundColor: "var(--bg-secondary)",
+                    color: "var(--text-secondary)",
+                  }}
+                >
+                  Показать всю историю
+                </button>
+              </div>
+            </div>
+
+            {/* AI Insights */}
+            <div
+              className="rounded-2xl p-6 mt-8 transition-all hover:shadow-xl"
+              style={{
+                backgroundColor: "var(--card-bg)",
+                border: `1px solid var(--border)`,
+                boxShadow: `0 4px 6px -1px var(--shadow-color)`,
+              }}
+            >
+              <div className="flex flex-col sm:flex-row sm:justify-between sm:items-start gap-4 mb-6">
+                <div className="flex items-center gap-3">
+                  <div
+                    className="w-10 h-10 rounded-xl flex items-center justify-center"
+                    style={{ backgroundColor: "#8b5cf620" }}
+                  >
+                    <Bot className="w-5 h-5" style={{ color: "#8b5cf6" }} />
+                  </div>
+                  <div>
+                    <h3
+                      className="text-xl font-bold"
+                      style={{ color: "var(--text-primary)" }}
+                    >
+                      AI Аналитика
+                    </h3>
+                    <p
+                      className="text-sm"
+                      style={{ color: "var(--text-secondary)" }}
+                    >
+                      Новые предложения на основе анализа логов
+                    </p>
+                  </div>
+                </div>
+                <button
+                  className="px-4 py-2 rounded-lg text-sm font-medium transition-all flex items-center gap-2 hover:scale-[1.02] self-start"
+                  style={{
+                    backgroundColor: "#8b5cf6",
+                    color: "white",
+                  }}
+                >
+                  Подробнее
+                  <ChevronRight className="w-4 h-4" />
+                </button>
+              </div>
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div
+                  className="p-4 rounded-xl transition-all hover:scale-[1.02]"
+                  style={{ backgroundColor: "var(--bg-secondary)" }}
+                >
+                  <p
+                    className="text-sm font-medium mb-2"
+                    style={{ color: "var(--text-primary)" }}
+                  >
+                    🔍 Обнаружена аномалия
+                  </p>
+                  <p
+                    className="text-xs"
+                    style={{ color: "var(--text-secondary)" }}
+                  >
+                    Повышенная активность с IP-адресов из диапазона
+                    185.xxx.xx.xx
+                  </p>
+                </div>
+                <div
+                  className="p-4 rounded-xl transition-all hover:scale-[1.02]"
+                  style={{ backgroundColor: "var(--bg-secondary)" }}
+                >
+                  <p
+                    className="text-sm font-medium mb-2"
+                    style={{ color: "var(--text-primary)" }}
+                  >
+                    💡 Предложено правил
+                  </p>
+                  <p
+                    className="text-xs"
+                    style={{ color: "var(--text-secondary)" }}
+                  >
+                    AI предлагает 3 новых правила для блокировки бот-сканеров
+                  </p>
+                </div>
+                <div
+                  className="p-4 rounded-xl transition-all hover:scale-[1.02]"
+                  style={{ backgroundColor: "var(--bg-secondary)" }}
+                >
+                  <p
+                    className="text-sm font-medium mb-2"
+                    style={{ color: "var(--text-primary)" }}
+                  >
+                    ⚡ Оптимизация
+                  </p>
+                  <p
+                    className="text-xs"
+                    style={{ color: "var(--text-secondary)" }}
+                  >
+                    Рекомендуется обновить 5 существующих правил для повышения
+                    эффективности
+                  </p>
+                </div>
+              </div>
+            </div>
+          </>
+        ) : (
+          /* CTA Section для неавторизованных */
+          <div
+            className="rounded-2xl p-8 text-center"
+            style={{
+              backgroundColor: "var(--card-bg)",
+              boxShadow: `0 4px 6px -1px var(--shadow-color)`,
+            }}
+          >
+            <h3
+              className="text-2xl font-bold mb-2"
+              style={{ color: "var(--text-primary)" }}
+            >
+              Готовы начать?
+            </h3>
+            <p
+              className="text-sm mb-6"
+              style={{ color: "var(--text-secondary)" }}
+            >
+              Присоединяйтесь к IPS Manager и получите полный контроль над
+              безопасностью
+            </p>
+            <button
+              onClick={() => navigate("/auth")}
+              className="px-6 py-2 rounded-lg font-medium transition-all hover:scale-105"
+              style={{
+                backgroundColor: "var(--accent)",
+                color: "white",
+              }}
+            >
+              Начать работу
+            </button>
+          </div>
+        )}
+      </main>
     </div>
   );
 };

yarn.lock

@@ -1284,6 +1284,11 @@ lru-cache@^5.1.1:
   dependencies:
     yallist "^3.0.2"
 
+lucide-react@^1.18.0:
+  version "1.18.0"
+  resolved "https://registry.yarnpkg.com/lucide-react/-/lucide-react-1.18.0.tgz#d1b8754d9c427061261c6a6a0b7fa6ecda36c84f"
+  integrity sha512-LZDb7H/0YfM+RJncD0hDQRCAu+vSGODqpe35TuVI8EuXaRjkczbsx7p8dY4J87F/MUSj6bpYqeI8nw8qXaAdmA==
+
 magic-string@^0.30.21:
   version "0.30.21"
   resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.30.21.tgz#56763ec09a0fa8091df27879fd94d19078c00d91"