feat: integrate Next.js frontend with Django backend

- Add complete Next.js 16 frontend with TypeScript and Tailwind CSS - Implement API proxy route for CORS-free backend communication - Create UserContext for global authentication state management - Add authentication flow with JWT tokens - Implement real data integration for posts and employees pages - Add dynamic user avatars (with fallback to initials) - Update API types to match backend Employee serializer - Remove all hardcoded mock data - Add route protection with automatic redirect to /login - Configure Docker orchestration for full-stack setup
2026-02-19 15:57:42 +03:00 · 2026-02-19 15:57:42 +03:00 · 814c12ceeb
commit 814c12ceeb
parent cb6d89dff2
24 changed files with 2329 additions and 112 deletions
--- a/DOCKER_ORCHESTRATION.md
+++ b/DOCKER_ORCHESTRATION.md
@ -285,5 +285,5 @@ docker-compose ps

 ---

-**Дата создания**: 19 февраля 2025  
+**Дата создания**: 19 февраля 2025
 **Версия**: 1.0
--- a/corp.front/.dockerignore
+++ b/corp.front/.dockerignore
@ -0,0 +1,35 @@
+# Dependencies
+node_modules
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Next.js
+.next/
+out/
+build
+dist
+
+# Environment
+.env*.local
+.env
+
+# Testing
+coverage
+
+# Misc
+.DS_Store
+*.pem
+
+# Debug
+*.log
+
+# IDE
+.vscode
+.idea
+*.swp
+*.swo
+*~
+
+# Vercel
+.vercel
--- a/corp.front/.env.example
+++ b/corp.front/.env.example
@ -0,0 +1,5 @@
+# Backend API URL
+NEXT_PUBLIC_API_URL=http://localhost:8000
+
+# WebSocket URL for real-time features
+NEXT_PUBLIC_WS_URL=ws://localhost:8000
--- a/corp.front/Dockerfile
+++ b/corp.front/Dockerfile
@ -0,0 +1,48 @@
+# Build stage
+FROM node:20-alpine AS builder
+
+WORKDIR /app
+
+# Copy package files
+COPY package.json package-lock.json* ./
+RUN npm ci
+
+# Copy source files
+COPY . .
+
+# Set environment variables for build
+ENV NEXT_TELEMETRY_DISABLED=1
+ENV NODE_ENV=production
+
+# Build the application
+RUN npm run build
+
+# Production stage
+FROM node:20-alpine AS runner
+
+WORKDIR /app
+
+ENV NODE_ENV=production
+ENV NEXT_TELEMETRY_DISABLED=1
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+# Copy necessary files from builder
+COPY --from=builder /app/public ./public
+COPY --from=builder /app/.next ./.next
+COPY --from=builder /app/node_modules ./node_modules
+COPY --from=builder /app/package.json ./package.json
+
+# Set correct permissions
+RUN chown -R nextjs:nodejs /app
+
+USER nextjs
+
+EXPOSE 3000
+
+ENV PORT=3000
+ENV HOSTNAME="0.0.0.0"
+
+# Start Next.js server
+CMD ["npm", "start"]
--- a/corp.front/INTEGRATION_GUIDE.md
+++ b/corp.front/INTEGRATION_GUIDE.md
@ -0,0 +1,410 @@
+# Frontend Integration Guide
+
+## Обзор
+
+Фронтенд corp.front полностью интегрирован с Django Backend через REST API. Используется Next.js 16 с TypeScript и Tailwind CSS.
+
+## Структура проекта
+
+```
+corp.front/
+├── src/
+│   ├── app/               # Next.js страницы
+│   │   ├── page.tsx       # Главная (Лента) ✅ Интегрирован
+│   │   ├── employees/     # Сотрудники ✅ Интегрирован
+│   │   ├── departments/   # Отделы
+│   │   ├── documents/     # Документы
+│   │   ├── messages/      # Сообщения
+│   │   ├── requests/      # Заявки
+│   │   ├── finances/      # Финансы
+│   │   └── login/         # Вход
+│   ├── lib/
+│   │   └── api.ts         # API клиент ✅
+│   ├── types/
+│   │   └── api.ts         # TypeScript типы ✅
+│   └── hooks/
+│       └── useApi.ts      # React хуки для API ✅
+```
+
+## API клиент
+
+### Базовая конфигурация
+
+API клиент автоматически:
+- Добавляет JWT токен к запросам
+- Обрабатывает ошибки авторизации
+- Сохраняет токены в localStorage
+- Перенаправляет на /login при 401
+
+### Использование
+
+```typescript
+import apiClient from '@/lib/api';
+
+// Авторизация
+const { access, refresh, user } = await apiClient.login({
+  username: 'user@example.com',
+  password: 'password'
+});
+
+// Получение данных
+const employees = await apiClient.getEmployees();
+const posts = await apiClient.getPosts();
+```
+
+## React хуки
+
+Используйте готовые хуки из `@/hooks/useApi`:
+
+```tsx
+import { useCurrentUser, useEmployees, usePosts } from '@/hooks/useApi';
+
+function MyComponent() {
+  const { user, loading, error } = useCurrentUser();
+  const { employees } = useEmployees({ search: 'John' });
+  const { posts } = usePosts({ page: 1 });
+
+  if (loading) return <div>Загрузка...</div>;
+  if (error) return <div>Ошибка: {error.message}</div>;
+
+  return <div>{/* UI */}</div>;
+}
+```
+
+### Доступные хуки
+
+- `useCurrentUser()` - текущий пользователь
+- `useEmployees(params?)` - список сотрудников
+- `useDepartments()` - список отделов
+- `usePosts(params?)` - посты ленты
+- `useDocuments(params?)` - документы
+- `useRequests(params?)` - заявки
+- `useChats()` - чаты
+- `useNotifications()` - уведомления
+
+## TypeScript типы
+
+Все типы данных определены в `@/types/api.ts`:
+
+```typescript
+import type { User, Post, Department, Document } from '@/types/api';
+```
+
+## Интегрированные страницы
+
+### ✅ Главная страница (Лента)
+
+**Файл**: `src/app/page.tsx`
+
+**Функции**:
+- Загрузка постов из API
+- Отображение автора, времени, контента
+- Лайки и комментарии
+- Теги постов
+
+**Используемые хуки**:
+- `usePosts()` - получение постов
+- `useCurrentUser()` - текущий пользователь
+
+### ✅ Сотрудники
+
+**Файл**: `src/app/employees/page.tsx`
+
+**Функции**:
+- Список всех сотрудников
+- Поиск по имени
+- Статус (онлайн/оффлайн)
+- Должность и отдел
+
+**Используемые хуки**:
+- `useEmployees({ search })` - поиск сотрудников
+- `useCurrentUser()` - текущий пользователь
+
+## Переменные окружения
+
+### Для локальной разработки
+
+`.env.local`:
+```env
+NEXT_PUBLIC_API_URL=http://localhost:8000
+NEXT_PUBLIC_WS_URL=ws://localhost:8000
+```
+
+### Для Docker
+
+`.env.local` (автоматически используется в docker-compose):
+```env
+NEXT_PUBLIC_API_URL=http://web:8000
+NEXT_PUBLIC_WS_URL=ws://web:8000
+```
+
+## Запуск
+
+### Локальная разработка
+
+```bash
+cd corp.front
+npm install
+npm run dev
+```
+
+Доступно на: http://localhost:3000
+
+### Docker
+
+```bash
+# Из корня проекта
+docker-compose up -d frontend
+```
+
+Доступно через nginx:  http://localhost
+
+## Интеграция новых страниц
+
+### Шаг 1: Создать страницу
+
+```tsx
+// src/app/mypage/page.tsx
+"use client";
+
+import { useMyData } from '@/hooks/useApi';
+
+export default function MyPage() {
+  const { data, loading, error } = useMyData();
+
+  if (loading) return <div>Загрузка...</div>;
+  if (error) return <div>Ошибка: {error.message}</div>;
+
+  return (
+    <div>
+      {data.map(item => (
+        <div key={item.id}>{item.name}</div>
+      ))}
+    </div>
+  );
+}
+```
+
+### Шаг 2: Добавить метод в API клиент
+
+```typescript
+// src/lib/api.ts
+class ApiClient {
+  // ... existing methods
+
+  async getMyData() {
+    return this.request('/mydata/');
+  }
+}
+```
+
+### Шаг 3: Создать хук (опционально)
+
+```typescript
+// src/hooks/useApi.ts
+export function useMyData() {
+  const [data, setData] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    async function fetchData() {
+      try {
+        const result = await apiClient.getMyData();
+        setData(result);
+      } catch (err) {
+        setError(err);
+      } finally {
+        setLoading(false);
+      }
+    }
+    fetchData();
+  }, []);
+
+  return { data, loading, error };
+}
+```
+
+## API Endpoints
+
+Полный список доступных эндпоинтов:
+
+### Auth
+- `POST /api/auth/token/` - Login
+- `POST /api/auth/token/refresh/` - Refresh token
+- `POST /api/v1/auth/register/` - Регистрация
+
+### Employees
+- `GET /api/v1/employees/` - Список сотрудников
+- `GET /api/v1/employees/{id}/` - Детали сотрудника
+- `GET /api/v1/employees/me/` - Текущий пользователь
+
+### Departments
+- `GET /api/v1/departments/` - Список отделов
+- `GET /api/v1/departments/{id}/` - Детали отдела
+
+### Feed
+- `GET /api/v1/posts/` - Посты ленты
+- `POST /api/v1/posts/` - Создать пост
+- `POST /api/v1/posts/{id}/like/` - Лайк поста
+- `GET /api/v1/comments/` - Комментарии
+- `POST /api/v1/comments/` - Создать комментарий
+
+### Documents
+- `GET /api/v1/documents/` - Документы
+- `GET /api/v1/documents/{id}/` - Детали документа
+
+### Requests
+- `GET /api/v1/requests/` - Заявки
+- `POST /api/v1/requests/` - Создать заявку
+- `GET /api/v1/requests/{id}/` - Детали заявки
+
+### Communications
+- `GET /api/v1/communications/chats/` - Чаты
+- `GET /api/v1/communications/messages/` - Сообщения
+- `POST /api/v1/communications/messages/` - Отправить сообщение
+
+### Calendar
+- `GET /api/v1/calendar/events/` - События календаря
+- `GET /api/v1/calendar/calendars/` - Календари
+
+### Notifications
+- `GET /api/v1/notifications/` - Уведомления
+- `POST /api/v1/notifications/{id}/mark_read/` - Отметить прочитанным
+- `POST /api/v1/notifications/mark_all_read/` - Отметить все прочитанными
+
+## Аутентификация
+
+### Вход
+
+```typescript
+import apiClient from '@/lib/api';
+
+async function handleLogin(username: string, password: string) {
+  try {
+    const { access, refresh, user } = await apiClient.login({
+      username,
+      password
+    });
+
+    // Токен автоматически сохранён
+    // Перенаправить пользователя
+    router.push('/');
+  } catch (error) {
+    console.error('Login failed:', error);
+  }
+}
+```
+
+### Выход
+
+```typescript
+import apiClient from '@/lib/api';
+
+function handleLogout() {
+  apiClient.clearToken();
+  router.push('/login');
+}
+```
+
+### Защищённые страницы
+
+```tsx
+"use client";
+
+import { useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import apiClient from '@/lib/api';
+
+export default function ProtectedPage() {
+  const router = useRouter();
+
+  useEffect(() => {
+    const token = apiClient.getToken();
+    if (!token) {
+      router.push('/login');
+    }
+  }, []);
+
+  return <div>Protected content</div>;
+}
+```
+
+## Обработка ошибок
+
+API клиент автоматически обрабатывает:
+
+- **401 Unauthorized**: Очищает токены и перенаправляет на `/login`
+- **Network errors**: Выбрасывает исключение с сообщением
+
+Пример обработки в компонентах:
+
+```tsx
+const { data, loading, error } = useMyData();
+
+if (loading) return <LoadingSpinner />;
+
+if (error) {
+  return (
+    <div className="error-message">
+      <h3>Ошибка загрузки данных</h3>
+      <p>{error.message}</p>
+      <button onClick={() => refetch()}>Попробовать снова</button>
+    </div>
+  );
+}
+```
+
+## WebSocket (для будущей реализации)
+
+Для real-time обновлений можно добавить WebSocket соединение:
+
+```typescript
+const WS_URL = process.env.NEXT_PUBLIC_WS_URL || 'ws://localhost:8000';
+
+const socket = new WebSocket(`${WS_URL}/ws/notifications/`);
+
+socket.onmessage = (event) => {
+  const data = JSON.parse(event.data);
+  // Обработать уведомление
+};
+```
+
+## Рекомендации
+
+1. **Всегда используйте хуки** для получения данных из API
+2. **Обрабатывайте loading и error** состояния в UI
+3. **Используйte TypeScript типы** для type-safety
+4. **Не сохраняйте чувствительные данные** в localStorage кроме токенов
+5. **Валидируйте данные** перед отправкой на сервер
+
+## Troubleshooting
+
+###CORS ошибки
+
+Убедитесь, что backend настроен с правильными CORS заголовками:
+
+```python
+# backend/eusrr_backend/settings.py
+CORS_ALLOWED_ORIGINS = [
+    "http://localhost:3000",
+    "http://localhost",
+]
+```
+
+### 401 Unauthorized
+
+- Проверьте, что токен действителен
+- Убедитесь, что backend запущен
+- Проверьте переменные окружения
+
+### Ошибка сети
+
+- Проверьте, что backend доступен
+- Проверьте URL в `NEXT_PUBLIC_API_URL`
+- Проверьте docker network, если используете docker-compose
+
+---
+
+**Дата создания**: 19 февраля 2026
+**Версия**: 1.0
--- a/corp.front/next.config.ts
+++ b/corp.front/next.config.ts
@ -0,0 +1,14 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  // Rewrites не нужны - в production используйте nginx (http://localhost)
+  // Для dev можно запустить backend локально на localhost:8000
+
+  // Environment variables
+  env: {
+    NEXT_PUBLIC_API_URL: process.env.NEXT_PUBLIC_API_URL,
+    NEXT_PUBLIC_WS_URL: process.env.NEXT_PUBLIC_WS_URL,
+  },
+};
+
+export default nextConfig;
--- a/corp.front/src/app/employees/page.tsx
+++ b/corp.front/src/app/employees/page.tsx
@ -0,0 +1,220 @@
+"use client";
+
+import { Bell, Building2, FileSignature, FileText, Home as HomeIcon, MessageSquare, Search, Users, Wallet } from "lucide-react";
+import Link from "next/link";
+import { usePathname, useRouter } from "next/navigation";
+import { useEmployees, useCurrentUser } from "@/hooks/useApi";
+import { useState, useEffect } from "react";
+import { apiClient } from "@/lib/api";
+
+const weekdays = ["Пн", "Вт", "Ср", "Чт", "Пт", "Сб", "Вс"];
+
+const calendarWeeks = [
+  ["", "", "", "", "1", "2", "3"],
+  ["4", "5", "6", "7", "8", "9", "10"],
+  ["11", "12", "13", "14", "15", "16", "17"],
+  ["18", "19", "20", "21", "22", "23", "24"],
+  ["25", "26", "27", "28", "", "", ""],
+];
+
+export default function EmployeesPage() {
+  const pathname = usePathname();
+  const router = useRouter();
+  const [searchQuery, setSearchQuery] = useState("");
+  const { employees, loading, error } = useEmployees({ search: searchQuery });
+  const { user } = useCurrentUser();
+
+  // Проверка авторизации
+  useEffect(() => {
+    const token = apiClient.getToken();
+    if (!token) {
+      router.push('/login');
+    }
+  }, [router]);
+
+  const sortedEmployees = employees.sort((a, b) =>
+    `${a.first_name} ${a.last_name}`.localeCompare(`${b.first_name} ${b.last_name}`, "ru")
+  );
+
+  const navLinkClass = (href: string) =>
+    `flex items-center gap-3 rounded-lg px-3 py-2 hover:bg-gray-50 ${pathname === href ? "bg-sky-50 text-sky-700 ring-1 ring-sky-100" : "text-gray-700"
+    }`;
+
+  const navIconClass = (href: string) => (pathname === href ? "text-sky-700" : "text-gray-400");
+
+  return (
+    <div className="min-h-screen bg-gradient-to-b from-sky-50 via-white to-white text-gray-900">
+      <header className="sticky top-0 z-30 border-b border-slate-100 bg-white/90 backdrop-blur">
+        <div className="mx-auto flex h-14 max-w-6xl items-center gap-4 px-4 sm:px-8">
+          <div className="flex items-center gap-2">
+            <img src="/logo.png" alt="Логотип" className="h-11 w-auto" />
+          </div>
+          <div className="hidden flex-1 items-center justify-center md:flex">
+            <div className="relative w-full max-w-xl">
+              <Search size={16} className="pointer-events-none absolute left-4 top-1/2 -translate-y-1/2 text-gray-400" />
+              <input
+                type="text"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="w-full rounded-full border border-gray-200 bg-gray-50 py-2.5 pl-11 pr-4 text-sm text-gray-800 transition focus:border-sky-500 focus:bg-white focus:outline-none focus:ring-2 focus:ring-sky-100"
+                placeholder="Поиск сотрудников..."
+              />
+            </div>
+          </div>
+          <div className="ml-auto flex items-center gap-1 sm:gap-2">
+            <button className="flex h-10 w-10 items-center justify-center rounded-full hover:bg-slate-100">
+              <Bell size={18} className="text-gray-600" />
+            </button>
+            <div className="ml-1 flex h-10 w-10 items-center justify-center rounded-full bg-sky-400 text-sm font-semibold text-white">КМ</div>
+          </div>
+        </div>
+      </header>
+
+      <div className="mx-auto flex min-h-screen max-w-6xl gap-6 px-4 py-8 sm:px-8">
+        <aside className="hidden w-64 flex-shrink-0 lg:block">
+          <div className="sticky top-8 space-y-4">
+            <div className="rounded-2xl bg-white p-5 shadow-sm ring-1 ring-gray-100">
+              <div className="mb-4 flex items-center gap-3">
+                <div className="flex h-10 w-10 items-center justify-center rounded-full bg-sky-400 text-sm font-semibold text-white">КМ</div>
+                <div>
+                  <p className="text-sm font-semibold text-gray-900">Константин Макаев</p>
+                  <p className="text-xs text-gray-500">Онлайн</p>
+                </div>
+              </div>
+              <div className="space-y-2 text-sm text-gray-700">
+                <Link href="/" className={navLinkClass("/")}>
+                  <HomeIcon size={18} className={pathname === "/" ? "text-sky-700" : "text-sky-600"} />
+                  Лента
+                </Link>
+                <Link href="/messages" className={navLinkClass("/messages")}>
+                  <MessageSquare size={18} className={navIconClass("/messages")} />
+                  Сообщения
+                </Link>
+                <Link href="/employees" className={navLinkClass("/employees")}>
+                  <Users size={18} className={navIconClass("/employees")} />
+                  Сотрудники
+                </Link>
+                <Link href="/departments" className={navLinkClass("/departments")}>
+                  <Building2 size={18} className={navIconClass("/departments")} />
+                  Отделы
+                </Link>
+                <Link href="/requests" className={navLinkClass("/requests")}>
+                  <FileSignature size={18} className={navIconClass("/requests")} />
+                  Заявления
+                </Link>
+                <Link href="/documents" className={navLinkClass("/documents")}>
+                  <FileText size={18} className={navIconClass("/documents")} />
+                  Документы
+                </Link>
+                <Link href="/finances" className={navLinkClass("/finances")}>
+                  <Wallet size={18} className={navIconClass("/finances")} />
+                  Финансы
+                </Link>
+              </div>
+            </div>
+          </div>
+        </aside>
+
+        <main className="flex-1 space-y-6">
+          <div className="flex flex-col gap-3 rounded-2xl bg-white p-5 shadow-sm ring-1 ring-gray-100">
+            <div className="flex items-center justify-between gap-3">
+              <div>
+                <p className="text-sm font-semibold text-sky-600">Команда</p>
+                <h1 className="text-2xl font-bold text-gray-900">Сотрудники</h1>
+              </div>
+              <div className="rounded-full bg-sky-50 px-4 py-2 text-xs font-medium text-sky-700 ring-1 ring-sky-100">Всего: {employees.length}</div>
+            </div>
+          </div>
+
+          <div className="space-y-3">
+            {loading && (
+              <div className="rounded-2xl bg-white p-10 text-center shadow-sm ring-1 ring-gray-100">
+                <p className="text-gray-500">Загрузка сотрудников...</p>
+              </div>
+            )}
+            {error && (
+              <div className="rounded-2xl bg-red-50 p-5 shadow-sm ring-1 ring-red-100">
+                <p className="text-red-600">Ошибка загрузки: {error.message}</p>
+              </div>
+            )}
+            {!loading && !error && employees.length === 0 && (
+              <div className="rounded-2xl bg-white p-10 text-center shadow-sm ring-1 ring-gray-100">
+                <p className="text-gray-500">Сотрудники не найдены</p>
+              </div>
+            )}
+            {!loading && sortedEmployees.map((employee) => {
+              const isOnline = employee.is_active;
+              const statusText = isOnline ? "Онлайн" : "Оффлайн";
+              const statusColor = isOnline ? "text-green-600" : "text-gray-500";
+              const dotColor = isOnline ? "bg-green-500" : "bg-gray-400";
+              const fullName = `${employee.first_name} ${employee.last_name}`;
+
+              return (
+                <article
+                  key={employee.id}
+                  className="flex items-center gap-4 rounded-2xl bg-white p-4 shadow-sm ring-1 ring-gray-100"
+                >
+                  <div className="flex h-12 w-12 items-center justify-center rounded-full bg-sky-400 text-sm font-semibold text-white">
+                    {employee.first_name[0]}{employee.last_name[0]}
+                  </div>
+                  <div className="flex-1">
+                    <p className="text-sm font-semibold text-gray-900">{fullName}</p>
+                    <p className="text-xs text-gray-500">{employee.position?.name || 'Не указана'}</p>
+                    <div className="mt-2 flex items-center gap-2 text-xs text-gray-500">
+                      <span className={`h-2 w-2 rounded-full ${dotColor}`} />
+                      <span className={statusColor}>{statusText}</span>
+                      {employee.department && (
+                        <>
+                          <span className="mx-1 text-gray-300">•</span>
+                          <span className="text-gray-500">{employee.department.name}</span>
+                        </>
+                      )}
+                    </div>
+                  </div>
+                </article>
+              );
+            })}
+          </div>
+        </main>
+
+        <aside className="hidden w-72 flex-shrink-0 space-y-4 lg:block">
+          <div className="sticky top-8 space-y-4">
+            <div className="rounded-2xl bg-white p-5 shadow-sm ring-1 ring-gray-100">
+              <div className="flex items-center justify-between text-sm font-semibold text-gray-900">
+                <span>Календарь</span>
+                <span className="text-xs font-normal text-gray-500">Февраль 2026</span>
+              </div>
+              <div className="mt-4 grid grid-cols-7 gap-1 text-center text-xs text-gray-500">
+                {weekdays.map((day) => (
+                  <div key={day} className="py-1 font-medium">
+                    {day}
+                  </div>
+                ))}
+              </div>
+              <div className="mt-1 grid grid-cols-7 gap-1 text-sm text-gray-800">
+                {calendarWeeks.map((week, wi) =>
+                  week.map((day, di) => {
+                    const isToday = day === "18";
+                    return (
+                      <div
+                        key={`${wi}-${di}`}
+                        className={`flex h-9 items-center justify-center rounded-full ${day
+                            ? isToday
+                              ? "bg-sky-100 text-sky-800 font-semibold ring-1 ring-sky-200"
+                              : "hover:bg-sky-50"
+                            : ""
+                          }`}
+                      >
+                        {day}
+                      </div>
+                    );
+                  })
+                )}
+              </div>
+            </div>
+          </div>
+        </aside>
+      </div>
+    </div>
+  );
+}
--- a/corp.front/src/app/login/page.tsx
+++ b/corp.front/src/app/login/page.tsx
@ -0,0 +1,111 @@
+'use client';
+
+import { useState, FormEvent } from 'react';
+import { useRouter } from 'next/navigation';
+import { apiClient } from '@/lib/api';
+
+export default function Login() {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+  const router = useRouter();
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+    setError('');
+    setLoading(true);
+
+    try {
+      const response = await apiClient.login({ email, password });
+      console.log('Успешная авторизация:', response.user);
+
+      // Перенаправляем на главную страницу
+      router.push('/');
+      router.refresh(); // Обновляем данные
+    } catch (err) {
+      console.error('Ошибка авторизации:', err);
+      setError('Неверный email или пароль');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-gradient-to-b from-sky-50 to-white text-gray-900">
+      <div className="mx-auto flex min-h-screen max-w-4xl flex-col justify-center px-6 py-12 sm:px-10">
+        <div className="mx-auto w-full max-w-xl rounded-2xl bg-white p-8 shadow-xl ring-1 ring-gray-100">
+          <h1 className="mb-2 text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl">
+            Войти в систему EUSRR
+          </h1>
+          <p className="mb-8 text-sm text-gray-600">
+            Используйте учетные данные LDAP для входа
+          </p>
+
+          <form onSubmit={handleSubmit} className="space-y-4">
+            {error && (
+              <div className="rounded-lg bg-red-50 border border-red-200 px-4 py-3 text-sm text-red-700">
+                {error}
+              </div>
+            )}
+
+            <div>
+              <label className="mb-2 block text-sm font-medium text-gray-700" htmlFor="email">
+                Email или телефон
+              </label>
+              <input
+                id="email"
+                name="email"
+                type="text"
+                autoComplete="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                className="w-full rounded-lg border border-gray-200 bg-gray-50 px-4 py-3 text-sm text-gray-900 transition focus:border-sky-500 focus:bg-white focus:outline-none focus:ring-2 focus:ring-sky-100"
+                placeholder="example@company.com или +79001234567"
+                required
+                disabled={loading}
+              />
+            </div>
+            <div>
+              <label className="mb-2 block text-sm font-medium text-gray-700" htmlFor="password">
+                Пароль
+              </label>
+              <input
+                id="password"
+                name="password"
+                type="password"
+                autoComplete="current-password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                className="w-full rounded-lg border border-gray-200 bg-gray-50 px-4 py-3 text-sm text-gray-900 transition focus:border-sky-500 focus:bg-white focus:outline-none focus:ring-2 focus:ring-sky-100"
+                placeholder="••••••••"
+                required
+                disabled={loading}
+              />
+            </div>
+            <button
+              type="submit"
+              disabled={loading}
+              className="flex w-full items-center justify-center rounded-lg bg-sky-400 px-4 py-3 text-sm font-semibold text-white shadow-sm transition hover:bg-sky-700 focus:outline-none focus:ring-2 focus:ring-sky-200 disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              {loading ? 'Вход...' : 'Войти'}
+            </button>
+          </form>
+
+          <div className="mt-4">
+            <a
+              href="/register"
+              className="flex w-full items-center justify-center rounded-lg border border-gray-200 px-4 py-3 text-sm font-semibold text-sky-700 transition hover:border-sky-200 hover:bg-sky-50 focus:outline-none focus:ring-2 focus:ring-sky-100"
+            >
+              Создать аккаунт
+            </a>
+          </div>
+
+          <p className="mt-6 text-center text-xs text-gray-500">
+            Для входа используйте корпоративные учетные данные
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/corp.front/src/app/page.tsx
+++ b/corp.front/src/app/page.tsx
@ -0,0 +1,257 @@
+"use client";
+
+import { Bell, Bookmark, Building2, FileSignature, FileText, Heart, HeartHandshake, Home as HomeIcon, MessageSquare, Search, Star, Users, Wallet } from "lucide-react";
+import Link from "next/link";
+import { usePathname, useRouter } from "next/navigation";
+import { usePosts, useCurrentUser } from "@/hooks/useApi";
+import { useEffect } from "react";
+import { apiClient } from "@/lib/api";
+
+function formatTimeAgo(dateString: string): string {
+  const date = new Date(dateString);
+  const now = new Date();
+  const diffInMs = now.getTime() - date.getTime();
+  const diffInMinutes = Math.floor(diffInMs / (1000 * 60));
+  const diffInHours = Math.floor(diffInMs / (1000 * 60 * 60));
+  const diffInDays = Math.floor(diffInMs / (1000 * 60 * 60 * 24));
+
+  if (diffInMinutes < 60) return `${diffInMinutes} минут назад`;
+  if (diffInHours < 24) return `${diffInHours} часов назад`;
+  return `${diffInDays} дней назад`;
+}
+
+const weekdays = ["Пн", "Вт", "Ср", "Чт", "Пт", "Сб", "Вс"];
+
+const calendarWeeks = [
+  ["", "", "", "", "1", "2", "3"],
+  ["4", "5", "6", "7", "8", "9", "10"],
+  ["11", "12", "13", "14", "15", "16", "17"],
+  ["18", "19", "20", "21", "22", "23", "24"],
+  ["25", "26", "27", "28", "", "", ""],
+];
+
+export default function Home() {
+  const pathname = usePathname();
+  const router = useRouter();
+  const { posts, loading, error } = usePosts();
+  const { user } = useCurrentUser();
+
+  // Проверка авторизации при загрузке
+  useEffect(() => {
+    const token = apiClient.getToken();
+    if (!token) {
+      router.push('/login');
+    }
+  }, [router]);
+
+  const navLinkClass = (href: string) =>
+    `flex items-center gap-3 rounded-lg px-3 py-2 hover:bg-gray-50 ${pathname === href ? "bg-sky-50 text-sky-700 ring-1 ring-sky-100" : "text-gray-700"
+    }`;
+
+  const navIconClass = (href: string) => (pathname === href ? "text-sky-700" : "text-gray-400");
+
+  return (
+    <div className="min-h-screen bg-gradient-to-b from-sky-50 via-white to-white text-gray-900">
+      <header className="sticky top-0 z-30 border-b border-slate-100 bg-white/90 backdrop-blur">
+        <div className="mx-auto flex h-14 max-w-6xl items-center gap-4 px-4 sm:px-8">
+          <div className="flex items-center gap-2">
+            <img
+              src="/logo.png"
+              alt="Логотип"
+              className="h-11 w-auto"
+            />
+
+          </div>
+          <div className="hidden flex-1 items-center justify-center md:flex">
+            <div className="relative w-full max-w-xl">
+              <Search size={16} className="pointer-events-none absolute left-4 top-1/2 -translate-y-1/2 text-gray-400" />
+              <input
+                type="text"
+                className="w-full rounded-full border border-gray-200 bg-gray-50 py-2.5 pl-11 pr-4 text-sm text-gray-800 transition focus:border-sky-500 focus:bg-white focus:outline-none focus:ring-2 focus:ring-sky-100"
+                placeholder="Поиск"
+              />
+            </div>
+          </div>
+
+          <div className="ml-auto flex items-center gap-1 sm:gap-2">
+            <button className="flex h-10 w-10 items-center justify-center rounded-full hover:bg-slate-100">
+              <Bell size={18} className="text-gray-600" />
+            </button>
+            <div className="ml-1 flex h-10 w-10 items-center justify-center rounded-full bg-sky-400 text-sm font-semibold text-white">
+              КМ
+            </div>
+          </div>
+        </div>
+      </header>
+
+      <div className="mx-auto flex min-h-screen max-w-6xl gap-6 px-4 py-8 sm:px-8">
+        <aside className="hidden w-64 flex-shrink-0 lg:block">
+          <div className="sticky top-8 space-y-4">
+            <div className="rounded-2xl bg-white p-5 shadow-sm ring-1 ring-gray-100">
+              <div className="mb-4 flex items-center gap-3">
+                <div className="flex h-11 w-11 items-center justify-center rounded-full bg-sky-400 text-sm font-semibold text-white">
+                  {user ? `${user.first_name[0]}${user.last_name[0]}` : 'ГК'}
+                </div>
+                <div>
+                  <p className="text-sm font-semibold text-gray-900">{user ? `${user.first_name} ${user.last_name}` : 'Гость'}</p>
+                  <p className="text-xs text-gray-500">{user?.is_active ? 'Онлайн' : 'Оффлайн'}</p>
+                </div>
+              </div>
+              <div className="space-y-2 text-sm text-gray-700">
+                <Link href="/" className={navLinkClass("/")}>
+                  <HomeIcon size={18} className={pathname === "/" ? "text-sky-700" : "text-sky-600"} />
+                  Лента
+                </Link>
+                <Link href="/messages" className={navLinkClass("/messages")}>
+                  <MessageSquare size={18} className={navIconClass("/messages")} />
+                  Сообщения
+                </Link>
+                <Link href="/employees" className={navLinkClass("/employees")}>
+                  <Users size={18} className={navIconClass("/employees")} />
+                  Сотрудники
+                </Link>
+                <Link href="/departments" className={navLinkClass("/departments")}>
+                  <Building2 size={18} className={navIconClass("/departments")} />
+                  Отделы
+                </Link>
+                <Link href="/requests" className={navLinkClass("/requests")}>
+                  <FileSignature size={18} className={navIconClass("/requests")} />
+                  Заявления
+                </Link>
+                <Link href="/documents" className={navLinkClass("/documents")}>
+                  <FileText size={18} className={navIconClass("/documents")} />
+                  Документы
+                </Link>
+                <Link href="/finances" className={navLinkClass("/finances")}>
+                  <Wallet size={18} className={navIconClass("/finances")} />
+                  Финансы
+                </Link>
+              </div>
+            </div>
+          </div>
+        </aside>
+
+        <main className="flex-1 space-y-6">
+          <div className="flex flex-col gap-3 rounded-2xl bg-white p-5 shadow-sm ring-1 ring-gray-100">
+            <div className="flex items-center gap-3">
+              <div className="flex h-11 w-13 items-center justify-center rounded-full bg-sky-400 text-sm font-semibold text-white">
+                КМ
+              </div>
+              <div className="relative w-full">
+                <Search size={16} className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
+                <input
+                  type="text"
+                  className="w-full rounded-full border border-gray-200 bg-gray-50 py-2.5 pl-10 pr-4 text-sm text-gray-800 transition focus:border-sky-500 focus:bg-white focus:outline-none focus:ring-2 focus:ring-sky-100"
+                  placeholder="Поиск по ленте"
+                />
+              </div>
+            </div>
+            <div className="flex flex-wrap gap-2 text-xs text-sky-700">
+              <span className="rounded-full bg-sky-50 px-3 py-1">Статья</span>
+              <span className="rounded-full bg-sky-50 px-3 py-1">Фото</span>
+              <span className="rounded-full bg-sky-50 px-3 py-1">Ссылка</span>
+              <span className="rounded-full bg-sky-50 px-3 py-1">Опрос</span>
+              <span className="rounded-full bg-sky-50 px-3 py-1">Событие</span>
+            </div>
+          </div>
+
+          <div className="space-y-4">
+            {loading && (
+              <div className="rounded-2xl bg-white p-10 text-center shadow-sm ring-1 ring-gray-100">
+                <p className="text-gray-500">Загрузка...</p>
+              </div>
+            )}
+            {error && (
+              <div className="rounded-2xl bg-red-50 p-5 shadow-sm ring-1 ring-red-100">
+                <p className="text-red-600">Ошибка загрузки: {error.message}</p>
+                <p className="mt-2 text-sm text-red-500">Проверьте подключение к серверу</p>
+              </div>
+            )}
+            {!loading && !error && posts.length === 0 && (
+              <div className="rounded-2xl bg-white p-10 text-center shadow-sm ring-1 ring-gray-100">
+                <p className="text-gray-500">Нет постов в ленте</p>
+              </div>
+            )}
+            {!loading && posts.map((post) => (
+              <article
+                key={post.id}
+                className="rounded-2xl bg-white p-5 shadow-sm ring-1 ring-gray-100"
+              >
+                <header className="mb-3 flex items-start justify-between">
+                  <div className="flex items-center gap-3">
+                    <div className="flex h-10 w-10 items-center justify-center rounded-full bg-sky-400 text-sm font-semibold text-white">
+                      {post.author.first_name[0]}{post.author.last_name[0]}
+                    </div>
+                    <div>
+                      <p className="text-sm font-semibold text-gray-900">{post.author.first_name} {post.author.last_name}</p>
+                      <p className="text-xs text-gray-500">{formatTimeAgo(post.created_at)}</p>
+                    </div>
+                  </div>
+                </header>
+                <p className="text-sm leading-6 text-gray-800 whitespace-pre-wrap">{post.content}</p>
+                {post.tags && post.tags.length > 0 && (
+                  <div className="mt-3 flex flex-wrap gap-2 text-xs text-sky-700">
+                    {post.tags.map((tag) => (
+                      <span key={tag} className="rounded-full bg-sky-50 px-3 py-1">
+                        #{tag}
+                      </span>
+                    ))}
+                  </div>
+                )}
+                <div className="mt-4 flex items-center gap-4 text-sm text-gray-600">
+                  <button className="flex items-center gap-2 rounded-lg px-3 py-2 hover:bg-gray-50">
+                    <Heart size={16} className={post.is_liked ? "text-red-500 fill-red-500" : "text-gray-400"} /> {post.likes_count}
+                  </button>
+                  <button className="flex items-center gap-2 rounded-lg px-3 py-2 hover:bg-gray-50">
+                    <MessageSquare size={16} className="text-gray-400" /> {post.comments_count}
+                  </button>
+                  <button className="flex items-center gap-2 rounded-lg px-3 py-2 hover:bg-gray-50">
+                    <Bookmark size={16} className="text-gray-400" />
+                  </button>
+                </div>
+              </article>
+            ))}
+          </div>
+        </main>
+
+        <aside className="hidden w-72 flex-shrink-0 space-y-4 lg:block">
+          <div className="sticky top-8 space-y-4">
+            <div className="rounded-2xl bg-white p-5 shadow-sm ring-1 ring-gray-100">
+              <div className="flex items-center justify-between text-sm font-semibold text-gray-900">
+                <span>Календарь</span>
+                <span className="text-xs font-normal text-gray-500">Февраль 2026</span>
+              </div>
+              <div className="mt-4 grid grid-cols-7 gap-1 text-center text-xs text-gray-500">
+                {weekdays.map((day) => (
+                  <div key={day} className="py-1 font-medium">
+                    {day}
+                  </div>
+                ))}
+              </div>
+              <div className="mt-1 grid grid-cols-7 gap-1 text-sm text-gray-800">
+                {calendarWeeks.map((week, wi) =>
+                  week.map((day, di) => {
+                    const isToday = day === "18";
+                    return (
+                      <div
+                        key={`${wi}-${di}`}
+                        className={`flex h-9 items-center justify-center rounded-full ${day
+                            ? isToday
+                              ? "bg-sky-100 text-sky-800 font-semibold ring-1 ring-sky-200"
+                              : "hover:bg-sky-50"
+                            : ""
+                          }`}
+                      >
+                        {day}
+                      </div>
+                    );
+                  })
+                )}
+              </div>
+            </div>
+          </div>
+        </aside>
+      </div>
+    </div>
+  );
+}
--- a/corp.front/src/app/register/page.tsx
+++ b/corp.front/src/app/register/page.tsx
@ -0,0 +1,262 @@
+'use client';
+
+import { useState, FormEvent } from 'react';
+import { useRouter } from 'next/navigation';
+import { apiClient } from '@/lib/api';
+import Link from "next/link";
+
+export default function Register() {
+  const [formData, setFormData] = useState({
+    first_name: '',
+    last_name: '',
+    middle_name: '',
+    email: '',
+    phone_number: '',
+    telegram: '',
+    password: '',
+    confirmPassword: '',
+  });
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+  const router = useRouter();
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setFormData({
+      ...formData,
+      [e.target.name]: e.target.value,
+    });
+  };
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+    setError('');
+
+    // Валидация
+    if (formData.password !== formData.confirmPassword) {
+      setError('Пароли не совпадают');
+      return;
+    }
+
+    if (!formData.email && !formData.phone_number && !formData.telegram) {
+      setError('Укажите хотя бы один способ связи: email, телефон или Telegram');
+      return;
+    }
+
+    setLoading(true);
+
+    try {
+      const registerData = {
+        email: formData.email,
+        phone_number: formData.phone_number,
+        password: formData.password,
+        first_name: formData.first_name,
+        last_name: formData.last_name,
+        middle_name: formData.middle_name || undefined,
+        telegram: formData.telegram || undefined,
+      };
+
+      await apiClient.register(registerData);
+
+      // После успешной регистрации авторизуемся
+      const loginData = {
+        email: formData.email,
+        phone_number: formData.phone_number,
+        password: formData.password
+      };
+      await apiClient.login(loginData);
+
+      router.push('/');
+    } catch (err: any) {
+      console.error('Ошибка регистрации:', err);
+      setError(err.message || 'Ошибка при регистрации. Проверьте введенные данные.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-gradient-to-b from-sky-50 to-white text-gray-900">
+      <div className="mx-auto flex min-h-screen max-w-4xl flex-col justify-center px-6 py-12 sm:px-10">
+        <div className="mx-auto w-full max-w-xl rounded-2xl bg-white p-8 shadow-xl ring-1 ring-gray-100">
+          <h1 className="mb-2 text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl">
+            Регистрация
+          </h1>
+          <p className="mb-8 text-sm text-gray-600">
+            Создайте новый аккаунт, указав имя и контактные данные.
+          </p>
+
+          <form onSubmit={handleSubmit} className="space-y-4">
+            {error && (
+              <div className="rounded-lg bg-red-50 border border-red-200 px-4 py-3 text-sm text-red-700">
+                {error}
+              </div>
+            )}
+
+            <div className="grid gap-4 sm:grid-cols-2">
+              <div>
+                <label className="mb-2 block text-sm font-medium text-gray-700" htmlFor="first_name">
+                  Имя *
+                </label>
+                <input
+                  id="first_name"
+                  name="first_name"
+                  type="text"
+                  value={formData.first_name}
+                  onChange={handleChange}
+                  className="w-full rounded-lg border border-gray-200 bg-gray-50 px-4 py-3 text-sm text-gray-900 transition focus:border-sky-500 focus:bg-white focus:outline-none focus:ring-2 focus:ring-sky-100"
+                  placeholder="Иван"
+                  required
+                  disabled={loading}
+                />
+              </div>
+              <div>
+                <label className="mb-2 block text-sm font-medium text-gray-700" htmlFor="last_name">
+                  Фамилия *
+                </label>
+                <input
+                  id="last_name"
+                  name="last_name"
+                  type="text"
+                  value={formData.last_name}
+                  onChange={handleChange}
+                  className="w-full rounded-lg border border-gray-200 bg-gray-50 px-4 py-3 text-sm text-gray-900 transition focus:border-sky-500 focus:bg-white focus:outline-none focus:ring-2 focus:ring-sky-100"
+                  placeholder="Иванов"
+                  required
+                  disabled={loading}
+                />
+              </div>
+            </div>
+
+            <div>
+              <label className="mb-2 block text-sm font-medium text-gray-700" htmlFor="middle_name">
+                Отчество
+              </label>
+              <input
+                id="middle_name"
+                name="middle_name"
+                type="text"
+                value={formData.middle_name}
+                onChange={handleChange}
+                className="w-full rounded-lg border border-gray-200 bg-gray-50 px-4 py-3 text-sm text-gray-900 transition focus:border-sky-500 focus:bg-white focus:outline-none focus:ring-2 focus:ring-sky-100"
+                placeholder="Иванович (необязательно)"
+                disabled={loading}
+              />
+            </div>
+
+            <div>
+              <label className="mb-2 block text-sm font-medium text-gray-700" htmlFor="email">
+                Email
+              </label>
+              <input
+                id="email"
+                name="email"
+                type="email"
+                value={formData.email}
+                onChange={handleChange}
+                autoComplete="email"
+                className="w-full rounded-lg border border-gray-200 bg-gray-50 px-4 py-3 text-sm text-gray-900 transition focus:border-sky-500 focus:bg-white focus:outline-none focus:ring-2 focus:ring-sky-100"
+                placeholder="example@mail.com"
+                disabled={loading}
+              />
+            </div>
+
+            <div>
+              <label className="mb-2 block text-sm font-medium text-gray-700" htmlFor="phone_number">
+                Телефон
+              </label>
+              <input
+                id="phone_number"
+                name="phone_number"
+                type="tel"
+                value={formData.phone_number}
+                onChange={handleChange}
+                className="w-full rounded-lg border border-gray-200 bg-gray-50 px-4 py-3 text-sm text-gray-900 transition focus:border-sky-500 focus:bg-white focus:outline-none focus:ring-2 focus:ring-sky-100"
+                placeholder="+79001234567"
+                disabled={loading}
+              />
+            </div>
+
+            <div>
+              <label className="mb-2 block text-sm font-medium text-gray-700" htmlFor="telegram">
+                Telegram (@username)
+              </label>
+              <input
+                id="telegram"
+                name="telegram"
+                type="text"
+                value={formData.telegram}
+                onChange={handleChange}
+                className="w-full rounded-lg border border-gray-200 bg-gray-50 px-4 py-3 text-sm text-gray-900 transition focus:border-sky-500 focus:bg-white focus:outline-none focus:ring-2 focus:ring-sky-100"
+                placeholder="@username"
+                disabled={loading}
+              />
+            </div>
+
+            <div className="grid gap-4 sm:grid-cols-2">
+              <div>
+                <label className="mb-2 block text-sm font-medium text-gray-700" htmlFor="password">
+                  Пароль *
+                </label>
+                <input
+                  id="password"
+                  name="password"
+                  type="password"
+                  value={formData.password}
+                  onChange={handleChange}
+                  autoComplete="new-password"
+                  className="w-full rounded-lg border border-gray-200 bg-gray-50 px-4 py-3 text-sm text-gray-900 transition focus:border-sky-500 focus:bg-white focus:outline-none focus:ring-2 focus:ring-sky-100"
+                  placeholder="••••••••"
+                  required
+                  disabled={loading}
+                />
+              </div>
+              <div>
+                <label className="mb-2 block text-sm font-medium text-gray-700" htmlFor="confirmPassword">
+                  Повторите пароль *
+                </label>
+                <input
+                  id="confirmPassword"
+                  name="confirmPassword"
+                  type="password"
+                  value={formData.confirmPassword}
+                  onChange={handleChange}
+                  autoComplete="new-password"
+                  className="w-full rounded-lg border border-gray-200 bg-gray-50 px-4 py-3 text-sm text-gray-900 transition focus:border-sky-500 focus:bg-white focus:outline-none focus:ring-2 focus:ring-sky-100"
+                  placeholder="••••••••"
+                  required
+                  disabled={loading}
+                />
+              </div>
+            </div>
+
+            <div className="text-sm text-gray-600 bg-sky-50 border border-sky-200 rounded-lg p-3">
+              <strong>Обязательные поля:</strong> Имя, Фамилия, Пароль<br />
+              <strong>Контакты:</strong> Укажите хотя бы один (Email, Телефон или Telegram)
+            </div>
+
+            <button
+              type="submit"
+              disabled={loading}
+              className="flex w-full items-center justify-center rounded-lg bg-sky-400 px-4 py-3 text-sm font-semibold text-white shadow-sm transition hover:bg-sky-700 focus:outline-none focus:ring-2 focus:ring-sky-200 disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              {loading ? 'Регистрация...' : 'Создать аккаунт'}
+            </button>
+          </form>
+
+          <div className="mt-4">
+            <Link
+              href="/login"
+              className="flex w-full items-center justify-center rounded-lg border border-gray-200 px-4 py-3 text-sm font-semibold text-sky-700 transition hover:border-sky-200 hover:bg-sky-50 focus:outline-none focus:ring-2 focus:ring-sky-100"
+            >
+              Уже есть аккаунт? Войти
+            </Link>
+          </div>
+
+          <p className="mt-6 text-center text-xs text-gray-500">
+            Регистрируясь, вы принимаете условия использования и подтверждаете ознакомление с политикой конфиденциальности.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/corp.front/src/hooks/useApi.ts
+++ b/corp.front/src/hooks/useApi.ts
@ -0,0 +1,218 @@
+"use client";
+
+import { useEffect, useState } from 'react';
+import apiClient from '@/lib/api';
+import type { User, Post, PaginatedResponse } from '@/types/api';
+
+export function useCurrentUser() {
+  const [user, setUser] = useState<User | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+
+  useEffect(() => {
+    async function fetchUser() {
+      try {
+        const data = await apiClient.getCurrentUser();
+        setUser(data);
+      } catch (err) {
+        setError(err as Error);
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    fetchUser();
+  }, []);
+
+  return { user, loading, error };
+}
+
+export function useEmployees(params?: { search?: string; department?: string }) {
+  const [employees, setEmployees] = useState<User[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+
+  useEffect(() => {
+    async function fetchEmployees() {
+      try {
+        setLoading(true);
+        const data = await apiClient.getEmployees(params);
+        setEmployees(data.results || data);
+      } catch (err) {
+        setError(err as Error);
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    fetchEmployees();
+  }, [params?.search, params?.department]);
+
+  return { employees, loading, error, refetch: () => { } };
+}
+
+export function useDepartments() {
+  const [departments, setDepartments] = useState<any[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+
+  useEffect(() => {
+    async function fetchDepartments() {
+      try {
+        const data = await apiClient.getDepartments();
+        setDepartments(data.results || data);
+      } catch (err) {
+        setError(err as Error);
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    fetchDepartments();
+  }, []);
+
+  return { departments, loading, error };
+}
+
+export function usePosts(params?: { page?: number; search?: string }) {
+  const [posts, setPosts] = useState<Post[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+  const [hasMore, setHasMore] = useState(false);
+
+  useEffect(() => {
+    async function fetchPosts() {
+      try {
+        setLoading(true);
+        const data: PaginatedResponse<Post> = await apiClient.getPosts(params);
+        setPosts(data.results);
+        setHasMore(!!data.next);
+      } catch (err) {
+        setError(err as Error);
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    fetchPosts();
+  }, [params?.page, params?.search]);
+
+  return { posts, loading, error, hasMore, refetch: () => { } };
+}
+
+export function useDocuments(params?: { search?: string; type?: string }) {
+  const [documents, setDocuments] = useState<any[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+
+  useEffect(() => {
+    async function fetchDocuments() {
+      try {
+        const data = await apiClient.getDocuments(params);
+        setDocuments(data.results || data);
+      } catch (err) {
+        setError(err as Error);
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    fetchDocuments();
+  }, [params?.search, params?.type]);
+
+  return { documents, loading, error };
+}
+
+export function useRequests(params?: { status?: string; type?: string }) {
+  const [requests, setRequests] = useState<any[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+
+  useEffect(() => {
+    async function fetchRequests() {
+      try {
+        const data = await apiClient.getRequests(params);
+        setRequests(data.results || data);
+      } catch (err) {
+        setError(err as Error);
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    fetchRequests();
+  }, [params?.status, params?.type]);
+
+  return { requests, loading, error };
+}
+
+export function useChats() {
+  const [chats, setChats] = useState<any[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+
+  useEffect(() => {
+    async function fetchChats() {
+      try {
+        const data = await apiClient.getChats();
+        setChats(data.results || data);
+      } catch (err) {
+        setError(err as Error);
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    fetchChats();
+  }, []);
+
+  return { chats, loading, error };
+}
+
+export function useNotifications() {
+  const [notifications, setNotifications] = useState<any[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+  const [unreadCount, setUnreadCount] = useState(0);
+
+  useEffect(() => {
+    async function fetchNotifications() {
+      try {
+        const data = await apiClient.getNotifications();
+        const notifs = data.results || data;
+        setNotifications(notifs);
+        setUnreadCount(notifs.filter((n: any) => !n.is_read).length);
+      } catch (err) {
+        setError(err as Error);
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    fetchNotifications();
+  }, []);
+
+  const markAsRead = async (id: number) => {
+    try {
+      await apiClient.markNotificationAsRead(id);
+      setNotifications(prev =>
+        prev.map(n => (n.id === id ? { ...n, is_read: true } : n))
+      );
+      setUnreadCount(prev => Math.max(0, prev - 1));
+    } catch (err) {
+      console.error('Failed to mark notification as read:', err);
+    }
+  };
+
+  const markAllAsRead = async () => {
+    try {
+      await apiClient.markAllNotificationsAsRead();
+      setNotifications(prev => prev.map(n => ({ ...n, is_read: true })));
+      setUnreadCount(0);
+    } catch (err) {
+      console.error('Failed to mark all notifications as read:', err);
+    }
+  };
+
+  return { notifications, loading, error, unreadCount, markAsRead, markAllAsRead };
+}
--- a/corp.front/src/types/api.ts
+++ b/corp.front/src/types/api.ts
@ -0,0 +1,164 @@
+// Common types
+export interface User {
+  id: number;
+  email: string;
+  phone_number?: string;
+  first_name: string;
+  last_name: string;
+  middle_name?: string;
+  position?: Position;
+  department?: Department;
+  avatar?: string;
+  is_active: boolean;
+  telegram?: string;
+}
+
+export interface Department {
+  id: number;
+  name: string;
+  description?: string;
+  parent?: number;
+  head?: User;
+  employees_count?: number;
+}
+
+export interface Position {
+  id: number;
+  name: string;
+  description?: string;
+}
+
+// Feed types
+export interface Post {
+  id: number;
+  author: User;
+  content: string;
+  tags?: string[];
+  created_at: string;
+  updated_at: string;
+  likes_count: number;
+  comments_count: number;
+  is_liked?: boolean;
+}
+
+export interface Comment {
+  id: number;
+  post: number;
+  author: User;
+  content: string;
+  created_at: string;
+  updated_at: string;
+}
+
+// Documents types
+export interface Document {
+  id: number;
+  title: string;
+  description?: string;
+  file?: string;
+  document_type: string;
+  created_by: User;
+  created_at: string;
+  updated_at: string;
+  tags?: string[];
+}
+
+// Requests types
+export interface Request {
+  id: number;
+  title: string;
+  description: string;
+  request_type: string;
+  status: 'pending' | 'approved' | 'rejected' | 'in_progress' | 'completed';
+  created_by: User;
+  assigned_to?: User;
+  created_at: string;
+  updated_at: string;
+}
+
+// Communications types
+export interface Chat {
+  id: number;
+  name?: string;
+  chat_type: 'direct' | 'group' | 'department';
+  participants: User[];
+  last_message?: Message;
+  unread_count?: number;
+  created_at: string;
+}
+
+export interface Message {
+  id: number;
+  chat: number;
+  sender: User;
+  content: string;
+  is_read: boolean;
+  created_at: string;
+}
+
+// Calendar types
+export interface CalendarEvent {
+  id: number;
+  title: string;
+  description?: string;
+  start_time: string;
+  end_time: string;
+  location?: string;
+  calendar: number;
+  participants?: User[];
+  created_by: User;
+}
+
+export interface Calendar {
+  id: number;
+  name: string;
+  description?: string;
+  color?: string;
+  is_public: boolean;
+  owner: User;
+}
+
+// Notifications types
+export interface Notification {
+  id: number;
+  title: string;
+  message: string;
+  notification_type: string;
+  is_read: boolean;
+  created_at: string;
+  link?: string;
+}
+
+// API Response types
+export interface PaginatedResponse<T> {
+  count: number;
+  next: string | null;
+  previous: string | null;
+  results: T[];
+}
+
+// Auth types
+export interface LoginCredentials {
+  email?: string;
+  phone?: string;
+  phone_number?: string;
+  password: string;
+}
+
+export interface LoginResponse {
+  access: string;
+  refresh: string;
+  user: User;
+}
+
+export interface RegisterData {
+  email: string;
+  phone_number: string;
+  password: string;
+  first_name: string;
+  last_name: string;
+  middle_name?: string;
+  telegram?: string;
+  whatsapp?: string;
+  wechat?: string;
+}
--- a/frontend/next.config.ts
+++ b/frontend/next.config.ts
@ -1,13 +1,15 @@
 import type { NextConfig } from "next";

 const nextConfig: NextConfig = {
-  // Rewrites не нужны - в production используйте nginx (http://localhost)
-  // Для dev можно запустить backend локально на localhost:8000
-  
+  // Отключаем автоматический редирект trailing slash
+  // Django требует слэш в конце URL, а Next.js по умолчанию его убирает
+  skipTrailingSlashRedirect: true,
+
  // Environment variables
  env: {
    NEXT_PUBLIC_API_URL: process.env.NEXT_PUBLIC_API_URL,
    NEXT_PUBLIC_WS_URL: process.env.NEXT_PUBLIC_WS_URL,
+    NEXT_PUBLIC_BACKEND_URL: process.env.NEXT_PUBLIC_BACKEND_URL,
  },
 };

--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@ -18,6 +18,7 @@
        "@types/node": "^20",
        "@types/react": "^19",
        "@types/react-dom": "^19",
+        "cross-env": "^10.1.0",
        "eslint": "^9",
        "eslint-config-next": "16.1.6",
        "tailwindcss": "^4",
@ -291,6 +292,13 @@
        "tslib": "^2.4.0"
      }
    },
+    "node_modules/@epic-web/invariant": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@epic-web/invariant/-/invariant-1.0.0.tgz",
+      "integrity": "sha512-lrTPqgvfFQtR/eY/qkIzp98OGdNJu0m5ji3q/nJI8v3SXkRKEnWiOxMmbvcSoAIzv/cGiuvRy57k4suKQSAdwA==",
+      "dev": true,
+      "license": "MIT"
+    },
    "node_modules/@eslint-community/eslint-utils": {
      "version": "4.9.1",
      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.9.1.tgz",
@ -2457,6 +2465,24 @@
      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
      "dev": true
    },
+    "node_modules/cross-env": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-10.1.0.tgz",
+      "integrity": "sha512-GsYosgnACZTADcmEyJctkJIoqAhHjttw7RsFrVoJNXbsWWqaq6Ym+7kZjq6mS45O0jij6vtiReppKQEtqWy6Dw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@epic-web/invariant": "^1.0.0",
+        "cross-spawn": "^7.0.6"
+      },
+      "bin": {
+        "cross-env": "dist/bin/cross-env.js",
+        "cross-env-shell": "dist/bin/cross-env-shell.js"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
    "node_modules/cross-spawn": {
      "version": "7.0.6",
      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
--- a/frontend/package.json
+++ b/frontend/package.json
@ -3,7 +3,8 @@
  "version": "0.1.0",
  "private": true,
  "scripts": {
-    "dev": "next dev",
+    "dev": "cross-env TURBOPACK=0 next dev",
+    "dev:turbo": "next dev --turbo",
    "build": "next build",
    "start": "next start",
    "lint": "eslint"
@ -19,6 +20,7 @@
    "@types/node": "^20",
    "@types/react": "^19",
    "@types/react-dom": "^19",
+    "cross-env": "^10.1.0",
    "eslint": "^9",
    "eslint-config-next": "16.1.6",
    "tailwindcss": "^4",
--- a/frontend/src/app/api/[...path]/route.ts
+++ b/frontend/src/app/api/[...path]/route.ts
@ -0,0 +1,86 @@
+// API Route для проксирования всех /api/* запросов на backend
+// Это позволяет избежать CORS при локальной разработке
+
+import { NextRequest, NextResponse } from 'next/server';
+
+const BACKEND_URL = process.env.NEXT_PUBLIC_BACKEND_URL || 'https://corp.robotail.pro';
+
+export async function GET(request: NextRequest) {
+    return proxyRequest(request, 'GET');
+}
+
+export async function POST(request: NextRequest) {
+    return proxyRequest(request, 'POST');
+}
+
+export async function PUT(request: NextRequest) {
+    return proxyRequest(request, 'PUT');
+}
+
+export async function PATCH(request: NextRequest) {
+    return proxyRequest(request, 'PATCH');
+}
+
+export async function DELETE(request: NextRequest) {
+    return proxyRequest(request, 'DELETE');
+}
+
+async function proxyRequest(request: NextRequest, method: string) {
+    try {
+        // Получаем путь из URL запроса
+        const url = new URL(request.url);
+        // Убираем /api из начала пути
+        const apiPath = url.pathname.replace(/^\/api\//, '');
+
+        // Формируем полный URL к backend
+        const backendUrl = `${BACKEND_URL}/api/${apiPath}`;
+
+        // Копируем query параметры
+        const searchParams = url.searchParams.toString();
+        const fullUrl = searchParams ? `${backendUrl}?${searchParams}` : backendUrl;
+
+        console.log(`[Proxy] ${method} ${fullUrl}`);
+
+        // Копируем заголовки из оригинального запроса
+        const headers = new Headers();
+        request.headers.forEach((value, key) => {
+            // Пропускаем заголовки, которые не нужно передавать
+            if (!['host', 'connection', 'content-length'].includes(key.toLowerCase())) {
+                headers.set(key, value);
+            }
+        });
+
+        // Получаем тело запроса если есть
+        const body = method !== 'GET' && method !== 'HEAD'
+            ? await request.text()
+            : undefined;
+
+        // Делаем запрос к backend
+        const response = await fetch(fullUrl, {
+            method,
+            headers,
+            body,
+        });
+
+        // Копируем заголовки из ответа backend
+        const responseHeaders = new Headers();
+        response.headers.forEach((value, key) => {
+            responseHeaders.set(key, value);
+        });
+
+        // Возвращаем ответ от backend
+        const responseBody = await response.text();
+
+        return new NextResponse(responseBody, {
+            status: response.status,
+            statusText: response.statusText,
+            headers: responseHeaders,
+        });
+    } catch (error: any) {
+        console.error('[Proxy Error]', error.message);
+        return NextResponse.json(
+            { error: 'Ошибка при обращении к backend', message: error.message },
+            { status: 502 }
+        );
+    }
+}
--- a/frontend/src/app/employees/page.tsx
+++ b/frontend/src/app/employees/page.tsx
@ -1,13 +1,60 @@
-import { AppShell, PageHeader } from "../../components/AppShell";
+"use client";
+
+import { AppShell, PageHeader } from "../../components/AppShell";
+import { apiClient } from "@/lib/api";
+import { useEffect, useState } from "react";
+import type { User } from "@/types/api";

-const employees = [
-  { id: 1, name: "Константин Макаев", role: "Руководитель проектов", status: "Онлайн", department: "ИТ" },
-  { id: 2, name: "Виктория Зацарина", role: "Дизайнер", status: "Недавно", department: "Маркетинг" },
-  { id: 3, name: "Алексей Пономарёв", role: "Разработчик", status: "Оффлайн", department: "ИТ" },
-  { id: 4, name: "Эдуард Иванов", role: "Директор", status: "Онлайн", department: "Финансы" },
-];
 export default function EmployeesPage() {
-  const sortedEmployees = [...employees].sort((a, b) => a.name.localeCompare(b.name, "ru"));
+  const [employees, setEmployees] = useState<User[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    async function loadEmployees() {
+      try {
+        const response = await apiClient.getEmployees();
+        setEmployees(response.results);
+      } catch (err: any) {
+        console.error('Ошибка загрузки сотрудников:', err);
+        setError('Не удалось загрузить список сотрудников');
+      } finally {
+        setLoading(false);
+      }
+    }
+    loadEmployees();
+  }, []);
+
+  if (loading) {
+    return (
+      <AppShell>
+        <PageHeader title="Сотрудники" eyebrow="Команда" />
+        <div className="flex items-center justify-center py-12">
+          <div className="text-center">
+            <div className="mb-4 inline-block h-8 w-8 animate-spin rounded-full border-4 border-sky-400 border-t-transparent"></div>
+            <p className="text-sm text-gray-500">Загрузка...</p>
+          </div>
+        </div>
+      </AppShell>
+    );
+  }
+
+  if (error) {
+    return (
+      <AppShell>
+        <PageHeader title="Сотрудники" eyebrow="Команда" />
+        <div className="rounded-2xl bg-red-50 p-6 text-center">
+          <p className="text-sm text-red-800">{error}</p>
+        </div>
+      </AppShell>
+    );
+  }
+
+  const sortedEmployees = [...employees].sort((a, b) => {
+    const nameA = `${a.last_name} ${a.first_name}`.trim();
+    const nameB = `${b.last_name} ${b.first_name}`.trim();
+    return nameA.localeCompare(nameB, "ru");
+  });

  return (
    <AppShell>
@ -15,27 +62,35 @@ export default function EmployeesPage() {

      <div className="space-y-3">
        {sortedEmployees.map((employee) => {
-          const isOnline = employee.status === "Онлайн";
-          const statusColor = isOnline ? "text-green-600" : employee.status === "Недавно" ? "text-amber-600" : "text-gray-500";
-          const dotColor = isOnline ? "bg-green-500" : employee.status === "Недавно" ? "bg-amber-500" : "bg-gray-400";
+          const fullName = `${employee.last_name} ${employee.first_name} ${employee.patronymic || ''}`.trim();
+          const initials = `${employee.last_name?.[0] || ''}${employee.first_name?.[0] || ''}`;
+          const position = employee.position?.name || 'Сотрудник';
+          const isOnline = employee.is_active;
+          const statusText = isOnline ? 'Активен' : 'Неактивен';
+          const dotColor = isOnline ? 'bg-green-500' : 'bg-gray-400';
+          const statusColor = isOnline ? 'text-green-600' : 'text-gray-500';

          return (
            <article key={employee.id} className="flex items-center gap-4 rounded-2xl bg-white p-4 shadow-sm ring-1 ring-gray-100">
-              <div className="flex h-12 w-12 items-center justify-center rounded-full bg-sky-400 text-sm font-semibold text-white">
-                {employee.name
-                  .split(" ")
-                  .slice(0, 2)
-                  .map((part) => part[0])
-                  .join("")}
+              <div className="flex h-12 w-12 items-center justify-center rounded-full bg-sky-400 text-sm font-semibold text-white overflow-hidden">
+                {employee.avatar ? (
+                  <img src={employee.avatar} alt={fullName} className="h-full w-full object-cover" />
+                ) : (
+                  initials
+                )}
              </div>
              <div className="flex-1">
-                <p className="text-sm font-semibold text-gray-900">{employee.name}</p>
-                <p className="text-xs text-gray-500">{employee.role}</p>
+                <p className="text-sm font-semibold text-gray-900">{fullName}</p>
+                <p className="text-xs text-gray-500">{position}</p>
                <div className="mt-2 flex items-center gap-2 text-xs text-gray-500">
                  <span className={`h-2 w-2 rounded-full ${dotColor}`} />
-                  <span className={statusColor}>{employee.status}</span>
-                  <span className="mx-1 text-gray-300">•</span>
-                  <span className="text-gray-500">{employee.department}</span>
+                  <span className={statusColor}>{statusText}</span>
+                  {employee.email && (
+                    <>
+                      <span className="mx-1 text-gray-300">•</span>
+                      <span className="text-gray-500">{employee.email}</span>
+                    </>
+                  )}
                </div>
              </div>
            </article>
--- a/frontend/src/app/layout.tsx
+++ b/frontend/src/app/layout.tsx
@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
+import { Providers } from "@/components/Providers";

 const geistSans = Geist({
  variable: "--font-geist-sans",
@ -23,11 +24,11 @@ export default function RootLayout({
  children: React.ReactNode;
 }>) {
  return (
-    <html lang="en">
+    <html lang="ru">
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
-        {children}
+        <Providers>{children}</Providers>
      </body>
    </html>
  );
--- a/frontend/src/app/login/page.tsx
+++ b/frontend/src/app/login/page.tsx
@ -1,6 +1,45 @@
+"use client";
+
 import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { apiClient } from "@/lib/api";
+import { useUser } from "@/contexts/UserContext";

 export default function Login() {
+  const router = useRouter();
+  const { refreshUser } = useUser();
+  const [login, setLogin] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError("");
+    setLoading(true);
+
+    try {
+      // Определяем email это или телефон
+      const credentials = login.includes("@")
+        ? { email: login, password }
+        : { phone: login, password };
+
+      await apiClient.login(credentials);
+
+      // Обновляем данные пользователя в контексте
+      await refreshUser();
+
+      // Перенаправляем на главную
+      router.push("/");
+    } catch (err: any) {
+      console.error("Ошибка авторизации:", err);
+      setError("Неверный логин или пароль");
+    } finally {
+      setLoading(false);
+    }
+  };
+
  return (
    <div className="min-h-screen bg-gradient-to-b from-sky-50 to-white text-gray-900">
      <div className="mx-auto flex min-h-screen max-w-4xl flex-col justify-center px-6 py-12 sm:px-10">
@ -12,7 +51,13 @@ export default function Login() {
            Используйте телефон или почту, чтобы продолжить.
          </p>

-          <form className="space-y-4">
+          {error && (
+            <div className="mb-4 rounded-lg bg-red-50 p-3 text-sm text-red-800">
+              {error}
+            </div>
+          )}
+
+          <form className="space-y-4" onSubmit={handleSubmit}>
            <div>
              <label className="mb-2 block text-sm font-medium text-gray-700" htmlFor="login">
                Телефон или почта
@ -22,6 +67,9 @@ export default function Login() {
                name="login"
                type="text"
                autoComplete="username"
+                value={login}
+                onChange={(e) => setLogin(e.target.value)}
+                required
                className="w-full rounded-lg border border-gray-200 bg-gray-50 px-4 py-3 text-sm text-gray-900 transition focus:border-sky-500 focus:bg-white focus:outline-none focus:ring-2 focus:ring-sky-100"
                placeholder="example@mail.com"
              />
@ -35,6 +83,9 @@ export default function Login() {
                name="password"
                type="password"
                autoComplete="current-password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                required
                className="w-full rounded-lg border border-gray-200 bg-gray-50 px-4 py-3 text-sm text-gray-900 transition focus:border-sky-500 focus:bg-white focus:outline-none focus:ring-2 focus:ring-sky-100"
                placeholder="••••••••"
              />
@ -53,9 +104,10 @@ export default function Login() {
            </div>
            <button
              type="submit"
-              className="flex w-full items-center justify-center rounded-lg bg-sky-400 px-4 py-3 text-sm font-semibold text-white shadow-sm transition hover:bg-sky-700 focus:outline-none focus:ring-2 focus:ring-sky-200"
+              disabled={loading}
+              className="flex w-full items-center justify-center rounded-lg bg-sky-400 px-4 py-3 text-sm font-semibold text-white shadow-sm transition hover:bg-sky-700 focus:outline-none focus:ring-2 focus:ring-sky-200 disabled:opacity-50 disabled:cursor-not-allowed"
            >
-              Войти
+              {loading ? "Вход..." : "Войти"}
            </button>
            <Link
              href="/register"
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@ -1,39 +1,70 @@
+"use client";
+
 import { Heart, MessageSquare, Search, Star } from "lucide-react";
 import { AppShell } from "../components/AppShell";
-
-const feedItems = [
-  {
-    id: 1,
-    author: "Алексей Пономарёв",
-    time: "2 часа назад",
-    text: "Обновил подборку треков для фокуса. Делюсь плейлистом, если тоже любите работать под легкий электро." ,
-    tags: ["Музыка", "Работа"],
-    actions: { likes: 42, comments: 8, saves: 5 },
-  },
-  {
-    id: 2,
-    author: "Виктория Зацарина",
-    time: "3 часа назад",
-    text: "Собрали командой фотографии с последней пробежки в парке. Город оживает, когда выходит солнце." ,
-    tags: ["Спорт", "Фото"],
-    actions: { likes: 65, comments: 12, saves: 7 },
-  },
-  {
-    id: 3,
-    author: "Unity C#",
-    time: "5 часов назад",
-    text: "Сегодня делимся лучшими гайдами по микроанимациям в интерфейсах. Собрали 7 примеров с кодом и видео." ,
-    tags: ["Дизайн", "Guides"],
-    actions: { likes: 88, comments: 16, saves: 21 },
-  },
-];
+import { apiClient } from "@/lib/api";
+import { useEffect, useState } from "react";
+import type { Post } from "@/types/api";
+import { useUser } from "@/contexts/UserContext";

 export default function Home() {
+  const { user } = useUser();
+  const [posts, setPosts] = useState<Post[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const userInitials = user
+    ? `${user.last_name?.[0] || ''}${user.first_name?.[0] || ''}`
+    : 'Г';
+
+  useEffect(() => {
+    async function loadPosts() {
+      try {
+        const response = await apiClient.getPosts();
+        setPosts(response.results);
+      } catch (err: any) {
+        console.error('Ошибка загрузки ленты:', err);
+        setError('Не удалось загрузить ленту');
+      } finally {
+        setLoading(false);
+      }
+    }
+    loadPosts();
+  }, []);
+
+  if (loading) {
+    return (
+      <AppShell>
+        <div className="flex items-center justify-center py-12">
+          <div className="text-center">
+            <div className="mb-4 inline-block h-8 w-8 animate-spin rounded-full border-4 border-sky-400 border-t-transparent"></div>
+            <p className="text-sm text-gray-500">Загрузка ленты...</p>
+          </div>
+        </div>
+      </AppShell>
+    );
+  }
+
+  if (error) {
+    return (
+      <AppShell>
+        <div className="rounded-2xl bg-red-50 p-6 text-center">
+          <p className="text-sm text-red-800">{error}</p>
+        </div>
+      </AppShell>
+    );
+  }
  return (
    <AppShell>
      <div className="flex flex-col gap-3 rounded-2xl bg-white p-5 shadow-sm ring-1 ring-gray-100">
        <div className="flex items-center gap-3">
-          <div className="flex h-11 w-11 items-center justify-center rounded-full bg-sky-400 text-sm font-semibold text-white">КМ</div>
+          <div className="flex h-11 w-11 items-center justify-center rounded-full bg-sky-400 text-sm font-semibold text-white overflow-hidden">
+            {user?.avatar ? (
+              <img src={user.avatar} alt={user ? `${user.last_name} ${user.first_name}`.trim() : 'Пользователь'} className="h-full w-full object-cover" />
+            ) : (
+              userInitials
+            )}
+          </div>
          <div className="relative w-full">
            <Search size={16} className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
            <input
@ -53,40 +84,65 @@ export default function Home() {
      </div>

      <div className="space-y-4">
-        {feedItems.map((item) => (
-          <article key={item.id} className="rounded-2xl bg-white p-5 shadow-sm ring-1 ring-gray-100">
-            <header className="mb-3 flex items-start justify-between">
-              <div className="flex items-center gap-3">
-                <div className="flex h-10 w-10 items-center justify-center rounded-full bg-sky-400 text-sm font-semibold text-white">
-                  {item.author[0]}
+        {posts.length === 0 ? (
+          <div className="rounded-2xl bg-gray-50 p-8 text-center">
+            <p className="text-sm text-gray-500">Пока нет постов в ленте</p>
+          </div>
+        ) : (
+          posts.map((post) => {
+            const authorName = post.author
+              ? `${post.author.last_name} ${post.author.first_name}`.trim()
+              : 'Аноним';
+            const authorInitials = post.author
+              ? `${post.author.last_name?.[0] || ''}${post.author.first_name?.[0] || ''}`
+              : 'А';
+
+            // Форматируем дату
+            const postDate = new Date(post.created_at);
+            const now = new Date();
+            const diffMs = now.getTime() - postDate.getTime();
+            const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
+            const timeAgo = diffHours < 1
+              ? 'только что'
+              : diffHours < 24
+                ? `${diffHours} ч. назад`
+                : `${Math.floor(diffHours / 24)} дн. назад`;
+
+            return (
+              <article key={post.id} className="rounded-2xl bg-white p-5 shadow-sm ring-1 ring-gray-100">
+                <header className="mb-3 flex items-start justify-between">
+                  <div className="flex items-center gap-3">
+                    <div className="flex h-10 w-10 items-center justify-center rounded-full bg-sky-400 text-sm font-semibold text-white overflow-hidden">
+                      {post.author?.avatar ? (
+                        <img src={post.author.avatar} alt={authorName} className="h-full w-full object-cover" />
+                      ) : (
+                        authorInitials
+                      )}
+                    </div>
+                    <div>
+                      <p className="text-sm font-semibold text-gray-900">{authorName}</p>
+                      <p className="text-xs text-gray-500">{timeAgo}</p>
+                    </div>
+                  </div>
+                </header>
+                <p className="text-sm leading-6 text-gray-800">{post.content}</p>
+                {post.image && (
+                  <div className="mt-3 overflow-hidden rounded-lg">
+                    <img src={post.image} alt="" className="w-full" />
+                  </div>
+                )}
+                <div className="mt-4 flex items-center gap-4 text-sm text-gray-600">
+                  <button className="flex items-center gap-2 rounded-lg px-3 py-2 hover:bg-gray-50">
+                    <Heart size={16} className="text-gray-400" /> {post.likes_count || 0}
+                  </button>
+                  <button className="flex items-center gap-2 rounded-lg px-3 py-2 hover:bg-gray-50">
+                    <MessageSquare size={16} className="text-gray-400" /> {post.comments_count || 0}
+                  </button>
                </div>
-                <div>
-                  <p className="text-sm font-semibold text-gray-900">{item.author}</p>
-                  <p className="text-xs text-gray-500">{item.time}</p>
-                </div>
-              </div>
-            </header>
-            <p className="text-sm leading-6 text-gray-800">{item.text}</p>
-            <div className="mt-3 flex flex-wrap gap-2 text-xs text-sky-700">
-              {item.tags.map((tag) => (
-                <span key={tag} className="rounded-full bg-sky-50 px-3 py-1">
-                  {tag}
-                </span>
-              ))}
-            </div>
-            <div className="mt-4 flex items-center gap-4 text-sm text-gray-600">
-              <button className="flex items-center gap-2 rounded-lg px-3 py-2 hover:bg-gray-50">
-                <Heart size={16} className="text-gray-400" /> {item.actions.likes}
-              </button>
-              <button className="flex items-center gap-2 rounded-lg px-3 py-2 hover:bg-gray-50">
-                <MessageSquare size={16} className="text-gray-400" /> {item.actions.comments}
-              </button>
-              <button className="flex items-center gap-2 rounded-lg px-3 py-2 hover:bg-gray-50">
-                <Star size={16} className="text-gray-400" /> {item.actions.saves}
-              </button>
-            </div>
-          </article>
-        ))}
+              </article>
+            );
+          })
+        )}
      </div>
    </AppShell>
  );
--- a/frontend/src/components/AppShell.tsx
+++ b/frontend/src/components/AppShell.tsx
@ -2,8 +2,9 @@

 import { Bell, Building2, FileSignature, FileText, Home as HomeIcon, MessageSquare, Search, Users, Wallet } from "lucide-react";
 import Link from "next/link";
-import { usePathname } from "next/navigation";
-import { ReactNode } from "react";
+import { usePathname, useRouter } from "next/navigation";
+import { ReactNode, useEffect } from "react";
+import { useUser } from "@/contexts/UserContext";

 type AppShellProps = {
  children: ReactNode;
@ -37,6 +38,15 @@ const calendarWeeks = [
 ];

 function Header() {
+  const { user, logout } = useUser();
+
+  const userInitials = user
+    ? `${user.last_name?.[0] || ''}${user.first_name?.[0] || ''}`
+    : 'Г';
+  const userName = user
+    ? `${user.last_name} ${user.first_name}`.trim()
+    : 'Гость';
+
  return (
    <header className="sticky top-0 z-30 border-b border-slate-100 bg-white/90 backdrop-blur">
      <div className="mx-auto flex h-14 max-w-6xl items-center gap-4 px-4 sm:px-8">
@ -57,7 +67,21 @@ function Header() {
          <button className="flex h-10 w-10 items-center justify-center rounded-full hover:bg-slate-100">
            <Bell size={18} className="text-gray-600" />
          </button>
-          <div className="ml-1 flex h-10 w-10 items-center justify-center rounded-full bg-sky-400 text-sm font-semibold text-white">КМ</div>
+          <div
+            className="ml-1 flex h-10 w-10 items-center justify-center rounded-full bg-sky-400 text-sm font-semibold text-white cursor-pointer hover:bg-sky-500 overflow-hidden"
+            title={userName}
+            onClick={() => {
+              if (confirm('Выйти из системы?')) {
+                logout();
+              }
+            }}
+          >
+            {user?.avatar ? (
+              <img src={user.avatar} alt={userName} className="h-full w-full object-cover" />
+            ) : (
+              userInitials
+            )}
+          </div>
        </div>
      </div>
    </header>
@ -66,10 +90,17 @@ function Header() {

 function LeftNav() {
  const pathname = usePathname();
+  const { user } = useUser();
+
+  const userInitials = user
+    ? `${user.last_name?.[0] || ''}${user.first_name?.[0] || ''}`
+    : 'Г';
+  const userName = user
+    ? `${user.last_name} ${user.first_name}`.trim()
+    : 'Гость';

  const navLinkClass = (href: string) =>
-    `flex items-center gap-3 rounded-lg px-3 py-2 hover:bg-gray-50 ${
-      pathname === href ? "bg-sky-50 text-sky-700 ring-1 ring-sky-100" : "text-gray-700"
+    `flex items-center gap-3 rounded-lg px-3 py-2 hover:bg-gray-50 ${pathname === href ? "bg-sky-50 text-sky-700 ring-1 ring-sky-100" : "text-gray-700"
    }`;

  const navIconClass = (href: string) => (pathname === href ? "text-sky-700" : "text-gray-400");
@ -79,10 +110,16 @@ function LeftNav() {
      <div className="sticky top-8 space-y-4">
        <div className="rounded-2xl bg-white p-5 shadow-sm ring-1 ring-gray-100">
          <div className="mb-4 flex items-center gap-3">
-            <div className="flex h-11 w-11 items-center justify-center rounded-full bg-sky-400 text-sm font-semibold text-white">КМ</div>
+            <div className="flex h-11 w-11 items-center justify-center rounded-full bg-sky-400 text-sm font-semibold text-white overflow-hidden">
+              {user?.avatar ? (
+                <img src={user.avatar} alt={userName} className="h-full w-full object-cover" />
+              ) : (
+                userInitials
+              )}
+            </div>
            <div>
-              <p className="text-sm font-semibold text-gray-900">Константин Макаев</p>
-              <p className="text-xs text-gray-500">Онлайн</p>
+              <p className="text-sm font-semibold text-gray-900">{userName}</p>
+              <p className="text-xs text-gray-500">{user?.is_active ? 'Онлайн' : 'Оффлайн'}</p>
            </div>
          </div>
          <div className="space-y-2 text-sm text-gray-700">
@ -122,13 +159,12 @@ function Calendar() {
                return (
                  <div
                    key={`${wi}-${di}`}
-                    className={`flex h-9 items-center justify-center rounded-full ${
-                      day
-                        ? isToday
-                          ? "bg-sky-100 text-sky-800 font-semibold ring-1 ring-sky-200"
-                          : "hover:bg-sky-50"
-                        : ""
-                    }`}
+                    className={`flex h-9 items-center justify-center rounded-full ${day
+                      ? isToday
+                        ? "bg-sky-100 text-sky-800 font-semibold ring-1 ring-sky-200"
+                        : "hover:bg-sky-50"
+                      : ""
+                      }`}
                  >
                    {day}
                  </div>
@ -160,6 +196,33 @@ export function PageHeader({ title, subtitle, badge, eyebrow = "Раздел" }:
 }

 export function AppShell({ children }: AppShellProps) {
+  const { user, loading } = useUser();
+  const router = useRouter();
+
+  useEffect(() => {
+    // Если загрузка завершена и пользователь не авторизован - редирект на логин
+    if (!loading && !user) {
+      router.push('/login');
+    }
+  }, [user, loading, router]);
+
+  // Показываем загрузку, пока проверяем авторизацию
+  if (loading) {
+    return (
+      <div className="min-h-screen bg-gradient-to-b from-sky-50 via-white to-white flex items-center justify-center">
+        <div className="text-center">
+          <div className="mb-4 inline-block h-12 w-12 animate-spin rounded-full border-4 border-sky-400 border-t-transparent"></div>
+          <p className="text-sm text-gray-500">Загрузка...</p>
+        </div>
+      </div>
+    );
+  }
+
+  // Если пользователь не авторизован, ничего не показываем (уже редиректим)
+  if (!user) {
+    return null;
+  }
+
  return (
    <div className="min-h-screen bg-gradient-to-b from-sky-50 via-white to-white text-gray-900">
      <Header />
--- a/frontend/src/components/Providers.tsx
+++ b/frontend/src/components/Providers.tsx
@ -0,0 +1,8 @@
+"use client";
+
+import { UserProvider } from "@/contexts/UserContext";
+import { ReactNode } from "react";
+
+export function Providers({ children }: { children: ReactNode }) {
+    return <UserProvider>{children}</UserProvider>;
+}
--- a/frontend/src/contexts/UserContext.tsx
+++ b/frontend/src/contexts/UserContext.tsx
@ -0,0 +1,86 @@
+"use client";
+
+import { createContext, useContext, useEffect, useState, ReactNode } from "react";
+import { apiClient } from "@/lib/api";
+import type { User } from "@/types/api";
+
+interface UserContextType {
+    user: User | null;
+    loading: boolean;
+    error: string | null;
+    refreshUser: () => Promise<void>;
+    logout: () => void;
+}
+
+const UserContext = createContext<UserContextType | undefined>(undefined);
+
+export function UserProvider({ children }: { children: ReactNode }) {
+    const [user, setUser] = useState<User | null>(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+
+    const loadUser = async () => {
+        try {
+            setLoading(true);
+            setError(null);
+
+            // Проверяем наличие токена
+            const token = typeof window !== 'undefined' ? localStorage.getItem('access_token') : null;
+            if (!token) {
+                setUser(null);
+                setLoading(false);
+                return;
+            }
+
+            // Загружаем данные пользователя
+            const userData = await apiClient.getCurrentUser();
+            setUser(userData);
+        } catch (err: any) {
+            console.error('Ошибка загрузки пользователя:', err);
+            setError(err.message);
+            setUser(null);
+
+            // Если ошибка 401 - токен невалиден, очищаем
+            if (err.message?.includes('401')) {
+                apiClient.clearToken();
+            }
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const refreshUser = async () => {
+        await loadUser();
+    };
+
+    const logout = () => {
+        apiClient.clearToken();
+        setUser(null);
+        if (typeof window !== 'undefined') {
+            window.location.href = '/login';
+        }
+    };
+
+    // Загружаем пользователя при монтировании
+    useEffect(() => {
+        loadUser();
+    }, []);
+
+    const value: UserContextType = {
+        user,
+        loading,
+        error,
+        refreshUser,
+        logout,
+    };
+
+    return <UserContext.Provider value={value}>{children}</UserContext.Provider>;
+}
+
+export function useUser() {
+    const context = useContext(UserContext);
+    if (context === undefined) {
+        throw new Error('useUser must be used within a UserProvider');
+    }
+    return context;
+}
--- a/frontend/src/types/api.ts
+++ b/frontend/src/types/api.ts
@ -1,16 +1,52 @@
 // Common types
+export interface Skill {
+  id: number;
+  name: string;
+  description?: string;
+}
+
+export interface EmployeeAction {
+  id: number;
+  employee: number;
+  action_type: string;
+  description?: string;
+  date: string;
+  created_at: string;
+}
+
+export interface EmployeeDepartment {
+  id: number;
+  name: string;
+  role_id?: number;
+  role_name?: string;
+  is_head: boolean;
+  via_assignment?: boolean;
+}
+
 export interface User {
  id: number;
  email: string;
  phone_number?: string;
  first_name: string;
  last_name: string;
-  middle_name?: string;
+  patronymic?: string; // отчество (было middle_name)
  position?: Position;
-  department?: Department;
+  departments?: EmployeeDepartment[]; // массив отделов с ролями (было department)
  avatar?: string;
  is_active: boolean;
  telegram?: string;
+  whatsapp?: string;
+  wechat?: string;
+  gender?: string;
+  birth_date?: string;
+  skills?: Skill[];
+  actions?: EmployeeAction[];
+  email_verified?: boolean;
+  created_at?: string;
+  updated_at?: string;
+  last_login?: string;
+  date_joined?: string;
+  auth?: Record<string, boolean>; // глобальные права пользователя
 }

 export interface Department {
@ -63,7 +99,7 @@ export interface Document {
  tags?: string[];
 }

-// Requests types  
+// Requests types
 export interface Request {
  id: number;
  title: string;
@ -157,7 +193,7 @@ export interface RegisterData {
  password: string;
  first_name: string;
  last_name: string;
-  middle_name?: string;
+  patronymic?: string; // было middle_name
  telegram?: string;
  whatsapp?: string;
  wechat?: string;