feat: Улучшенный UI с компонентом AppShell

- Добавлен компонент AppShell с Header, Sidebar, Calendar
- Установлен lucide-react для современных иконок
- Обновлены все страницы: главная, login, employees, documents, etc
- Единый дизайн с PageHeader и переиспользуемыми элементами
- Улучшенная навигация с активными ссылками
- Responsive design с sticky элементами
- Градиентный фон и современные shadow/ring эффекты

frontend/package-lock.json

@@ -64,6 +64,7 @@
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.29.0.tgz",
       "integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.29.0",
         "@babel/generator": "^7.29.0",
@@ -1460,6 +1461,7 @@
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.14.tgz",
       "integrity": "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "csstype": "^3.2.2"
       }
@@ -1515,6 +1517,7 @@
       "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.56.0.tgz",
       "integrity": "sha512-IgSWvLobTDOjnaxAfDTIHaECbkNlAlKv2j5SjpB2v7QHKv1FIfjwMy8FsDbVfDX/KjmCmYICcw7uGaXLhtsLNg==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.56.0",
         "@typescript-eslint/types": "8.56.0",
@@ -1995,6 +1998,7 @@
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -2312,6 +2316,7 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.9.0",
         "caniuse-lite": "^1.0.30001759",
@@ -2841,6 +2846,7 @@
       "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.39.2.tgz",
       "integrity": "sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -3018,6 +3024,7 @@
       "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.32.0.tgz",
       "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@rtsao/scc": "^1.1.0",
         "array-includes": "^3.1.9",
@@ -4540,6 +4547,7 @@
       "version": "0.574.0",
       "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.574.0.tgz",
       "integrity": "sha512-dJ8xb5juiZVIbdSn3HTyHsjjIwUwZ4FNwV0RtYDScOyySOeie1oXZTymST6YPJ4Qwt3Po8g4quhYl4OxtACiuQ==",
+      "license": "ISC",
       "peerDependencies": {
         "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
@@ -5074,6 +5082,7 @@
       "version": "19.2.3",
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.3.tgz",
       "integrity": "sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA==",
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -5082,6 +5091,7 @@
       "version": "19.2.3",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.3.tgz",
       "integrity": "sha512-yELu4WmLPw5Mr/lmeEpox5rw3RETacE++JgHqQzd2dg+YbJuat3jH4ingc+WPZhxaoFzdv9y33G+F7Nl5O0GBg==",
+      "peer": true,
       "dependencies": {
         "scheduler": "^0.27.0"
       },
@@ -5727,6 +5737,7 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -5878,6 +5889,7 @@
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "dev": true,
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -6138,6 +6150,7 @@
       "resolved": "https://registry.npmjs.org/zod/-/zod-4.3.6.tgz",
       "integrity": "sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==",
       "dev": true,
+      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }

frontend/src/app/departments/page.tsx

@@ -1,10 +1,9 @@
+import { AppShell, PageHeader } from "../../components/AppShell";
+
 export default function DepartmentsPage() {
   return (
-    <div className="min-h-screen bg-gradient-to-b from-sky-50 via-white to-white text-gray-900">
-      <div className="mx-auto max-w-4xl px-4 py-10 sm:px-8">
-        <h1 className="text-2xl font-bold text-gray-900">Отделы</h1>
-        <p className="mt-2 text-sm text-gray-600">Раздел в разработке. Здесь будут списки отделов и контакты.</p>
-      </div>
-    </div>
+    <AppShell>
+      <PageHeader title="Отделы" subtitle="Здесь будут списки отделов и контакты." badge="В разработке" />
+    </AppShell>
   );
 }

frontend/src/app/documents/page.tsx

@@ -1,10 +1,9 @@
+import { AppShell, PageHeader } from "../../components/AppShell";
+
 export default function DocumentsPage() {
   return (
-    <div className="min-h-screen bg-gradient-to-b from-sky-50 via-white to-white text-gray-900">
-      <div className="mx-auto max-w-4xl px-4 py-10 sm:px-8">
-        <h1 className="text-2xl font-bold text-gray-900">Документы</h1>
-        <p className="mt-2 text-sm text-gray-600">Раздел в разработке. Здесь будут договоры, отчёты и файлы.</p>
-      </div>
-    </div>
+    <AppShell>
+      <PageHeader title="Документы" subtitle="Здесь будут договоры, отчёты и файлы." badge="В разработке" />
+    </AppShell>
   );
 }

frontend/src/app/employees/page.tsx

@@ -1,222 +1,47 @@
-"use client";
+import { AppShell, PageHeader } from "../../components/AppShell";
 
-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", "", "", ""],
+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 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");
+  const sortedEmployees = [...employees].sort((a, b) => a.name.localeCompare(b.name, "ru"));
 
   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>
+    <AppShell>
+      <PageHeader title="Сотрудники" eyebrow="Команда" badge={`Всего: ${employees.length}`} />
 
-      <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 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";
+
+          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>
+              <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>
+                <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>
                 </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>
+            </article>
+          );
+        })}
       </div>
-    </div>
+    </AppShell>
   );
 }

frontend/src/app/finances/page.tsx

@@ -1,10 +1,9 @@
+import { AppShell, PageHeader } from "../../components/AppShell";
+
 export default function FinancesPage() {
   return (
-    <div className="min-h-screen bg-gradient-to-b from-sky-50 via-white to-white text-gray-900">
-      <div className="mx-auto max-w-4xl px-4 py-10 sm:px-8">
-        <h1 className="text-2xl font-bold text-gray-900">Финансы</h1>
-        <p className="mt-2 text-sm text-gray-600">Раздел в разработке. Здесь появится аналитика и отчётность.</p>
-      </div>
-    </div>
+    <AppShell>
+      <PageHeader title="Финансы" subtitle="Здесь появится аналитика и отчётность." badge="В разработке" />
+    </AppShell>
   );
 }

frontend/src/app/login/page.tsx

@@ -1,69 +1,29 @@
-'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 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>
-            )}
-
+          <form className="space-y-4">
             <div>
-              <label className="mb-2 block text-sm font-medium text-gray-700" htmlFor="email">
-                Email или телефон
+              <label className="mb-2 block text-sm font-medium text-gray-700" htmlFor="login">
+                Телефон или почта
               </label>
               <input
-                id="email"
-                name="email"
+                id="login"
+                name="login"
                 type="text"
-                autoComplete="email"
-                value={email}
-                onChange={(e) => setEmail(e.target.value)}
+                autoComplete="username"
                 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}
+                placeholder="example@mail.com"
               />
             </div>
             <div>
@@ -75,34 +35,37 @@ export default function Login() {
                 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>
+            <div className="flex items-center justify-between text-sm text-gray-600">
+              <label className="inline-flex items-center gap-2">
+                <input
+                  type="checkbox"
+                  className="h-4 w-4 rounded border-gray-300 text-sky-600 focus:ring-sky-500"
+                />
+                Запомнить меня
+              </label>
+              <a className="font-medium text-sky-600 transition hover:text-sky-700" href="#">
+                Забыли пароль?
+              </a>
+            </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"
+              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"
             >
-              {loading ? 'Вход...' : 'Войти'}
+              Войти
             </button>
-          </form>
-
-          <div className="mt-4">
-            <a
+            <Link
               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>
-
+            </Link>
+          </form>
           <p className="mt-6 text-center text-xs text-gray-500">
-            Для входа используйте корпоративные учетные данные
+            Продолжая, вы соглашаетесь с условиями использования и подтверждаете ознакомление с политикой конфиденциальности.
           </p>
         </div>
       </div>

frontend/src/app/messages/page.tsx

@@ -1,10 +1,9 @@
+import { AppShell, PageHeader } from "../../components/AppShell";
+
 export default function MessagesPage() {
   return (
-    <div className="min-h-screen bg-gradient-to-b from-sky-50 via-white to-white text-gray-900">
-      <div className="mx-auto max-w-4xl px-4 py-10 sm:px-8">
-        <h1 className="text-2xl font-bold text-gray-900">Сообщения</h1>
-        <p className="mt-2 text-sm text-gray-600">Раздел в разработке. Здесь появятся чаты и диалоги.</p>
-      </div>
-    </div>
+    <AppShell>
+      <PageHeader title="Сообщения" subtitle="Здесь появятся чаты и диалоги." badge="В разработке" />
+    </AppShell>
   );
 }

frontend/src/app/page.tsx

@@ -1,259 +1,93 @@
-"use client";
+import { Heart, MessageSquare, Search, Star } from "lucide-react";
+import { AppShell } from "../components/AppShell";
 
-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", "", "", ""],
+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 },
+  },
 ];
 
 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"
+    <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="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 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 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>
+
+      <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]}
+                </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>
+        ))}
+      </div>
+    </AppShell>
   );
 }

frontend/src/app/register/page.tsx

@@ -1,79 +1,6 @@
-'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">
@@ -85,173 +12,95 @@ export default function Register() {
             Создайте новый аккаунт, указав имя и контактные данные.
           </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>
-            )}
-
+          <form className="space-y-4">
             <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 className="mb-2 block text-sm font-medium text-gray-700" htmlFor="firstName">
+                  Имя
                 </label>
                 <input
-                  id="first_name"
-                  name="first_name"
+                  id="firstName"
+                  name="firstName"
                   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 className="mb-2 block text-sm font-medium text-gray-700" htmlFor="lastName">
+                  Фамилия
                 </label>
                 <input
-                  id="last_name"
-                  name="last_name"
+                  id="lastName"
+                  name="lastName"
                   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 className="mb-2 block text-sm font-medium text-gray-700" htmlFor="login">
+                Телефон или почта
               </label>
               <input
-                id="middle_name"
-                name="middle_name"
+                id="login"
+                name="login"
                 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"
+                autoComplete="username"
                 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>
+            <label className="flex items-center gap-3 text-sm text-gray-700">
+              <input
+                type="checkbox"
+                className="h-4 w-4 rounded border-gray-300 text-sky-600 focus:ring-sky-500"
+              />
+              Я согласен с условиями использования
+            </label>
 
             <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"
+              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"
             >
-              {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>
-
+          </form>
           <p className="mt-6 text-center text-xs text-gray-500">
             Регистрируясь, вы принимаете условия использования и подтверждаете ознакомление с политикой конфиденциальности.
           </p>

frontend/src/app/requests/page.tsx

@@ -1,10 +1,9 @@
+import { AppShell, PageHeader } from "../../components/AppShell";
+
 export default function RequestsPage() {
   return (
-    <div className="min-h-screen bg-gradient-to-b from-sky-50 via-white to-white text-gray-900">
-      <div className="mx-auto max-w-4xl px-4 py-10 sm:px-8">
-        <h1 className="text-2xl font-bold text-gray-900">Заявления</h1>
-        <p className="mt-2 text-sm text-gray-600">Раздел в разработке. Здесь появятся заявки и согласования.</p>
-      </div>
-    </div>
+    <AppShell>
+      <PageHeader title="Заявления" subtitle="Здесь появятся заявки и согласования." badge="В разработке" />
+    </AppShell>
   );
 }

frontend/src/components/AppShell.tsx

@@ -0,0 +1,173 @@
+"use client";
+
+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";
+
+type AppShellProps = {
+  children: ReactNode;
+};
+
+type PageHeaderProps = {
+  title: string;
+  subtitle?: string;
+  badge?: string;
+  eyebrow?: string;
+};
+
+const navItems = [
+  { href: "/", label: "Лента", icon: HomeIcon },
+  { href: "/messages", label: "Сообщения", icon: MessageSquare },
+  { href: "/employees", label: "Сотрудники", icon: Users },
+  { href: "/departments", label: "Отделы", icon: Building2 },
+  { href: "/requests", label: "Заявления", icon: FileSignature },
+  { href: "/documents", label: "Документы", icon: FileText },
+  { href: "/finances", label: "Финансы", icon: Wallet },
+];
+
+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", "", "", ""],
+];
+
+function Header() {
+  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">
+        <Link href="/" className="flex items-center gap-2">
+          <img src="/logo.png" alt="Логотип" className="h-11 w-auto" />
+        </Link>
+        <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>
+  );
+}
+
+function LeftNav() {
+  const pathname = usePathname();
+
+  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 (
+    <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">КМ</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">
+            {navItems.map(({ href, label, icon: Icon }) => (
+              <Link key={href} href={href} className={navLinkClass(href)}>
+                <Icon size={18} className={navIconClass(href)} />
+                {label}
+              </Link>
+            ))}
+          </div>
+        </div>
+      </div>
+    </aside>
+  );
+}
+
+function Calendar() {
+  return (
+    <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>
+  );
+}
+
+export function PageHeader({ title, subtitle, badge, eyebrow = "Раздел" }: PageHeaderProps) {
+  return (
+    <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">{eyebrow}</p>
+          <h1 className="text-2xl font-bold text-gray-900">{title}</h1>
+        </div>
+        {badge ? (
+          <div className="rounded-full bg-sky-50 px-4 py-2 text-xs font-medium text-sky-700 ring-1 ring-sky-100">{badge}</div>
+        ) : null}
+      </div>
+      {subtitle ? <p className="text-sm text-gray-600">{subtitle}</p> : null}
+    </div>
+  );
+}
+
+export function AppShell({ children }: AppShellProps) {
+  return (
+    <div className="min-h-screen bg-gradient-to-b from-sky-50 via-white to-white text-gray-900">
+      <Header />
+      <div className="mx-auto flex min-h-screen max-w-6xl gap-6 px-4 py-8 sm:px-8">
+        <LeftNav />
+        <main className="flex-1 space-y-6">{children}</main>
+        <Calendar />
+      </div>
+    </div>
+  );
+}