From 378f039bb3bba728339dea7083d721454d7bae06 Mon Sep 17 00:00:00 2001 From: Konstantin Makaev Date: Thu, 19 Feb 2026 11:26:12 +0300 Subject: [PATCH] =?UTF-8?q?=D0=92=D1=81=D0=B5=20=D1=81=D1=82=D1=80=D0=B0?= =?UTF-8?q?=D0=BD=D0=B8=D1=86=D1=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .vscode/tasks.json | 11 ++ src/app/departments/page.tsx | 11 +- src/app/documents/page.tsx | 11 +- src/app/employees/page.tsx | 205 ++++----------------------- src/app/finances/page.tsx | 11 +- src/app/messages/page.tsx | 11 +- src/app/page.tsx | 262 ++++++++--------------------------- src/app/requests/page.tsx | 11 +- src/components/AppShell.tsx | 173 +++++++++++++++++++++++ 9 files changed, 296 insertions(+), 410 deletions(-) create mode 100644 src/components/AppShell.tsx diff --git a/.vscode/tasks.json b/.vscode/tasks.json index 570ce78..a143ae9 100644 --- a/.vscode/tasks.json +++ b/.vscode/tasks.json @@ -10,6 +10,17 @@ "set PATH=C:\\Users\\sa\\node-portable\\nodejs;%PATH% && npm run dev" ], "isBackground": true + }, + { + "label": "dev", + "type": "shell", + "command": "npm", + "args": [ + "run", + "dev" + ], + "isBackground": true, + "problemMatcher": [] } ] } \ No newline at end of file diff --git a/src/app/departments/page.tsx b/src/app/departments/page.tsx index eac2f5b..fe8d419 100644 --- a/src/app/departments/page.tsx +++ b/src/app/departments/page.tsx @@ -1,10 +1,9 @@ +import { AppShell, PageHeader } from "../../components/AppShell"; + export default function DepartmentsPage() { return ( -
-
-

Отделы

-

Раздел в разработке. Здесь будут списки отделов и контакты.

-
-
+ + + ); } diff --git a/src/app/documents/page.tsx b/src/app/documents/page.tsx index 47754e3..600c97b 100644 --- a/src/app/documents/page.tsx +++ b/src/app/documents/page.tsx @@ -1,10 +1,9 @@ +import { AppShell, PageHeader } from "../../components/AppShell"; + export default function DocumentsPage() { return ( -
-
-

Документы

-

Раздел в разработке. Здесь будут договоры, отчёты и файлы.

-
-
+ + + ); } diff --git a/src/app/employees/page.tsx b/src/app/employees/page.tsx index 609c6b9..c80975c 100644 --- a/src/app/employees/page.tsx +++ b/src/app/employees/page.tsx @@ -1,8 +1,4 @@ -"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 { AppShell, PageHeader } from "../../components/AppShell"; const employees = [ { id: 1, name: "Константин Макаев", role: "Руководитель проектов", status: "Онлайн", department: "ИТ" }, @@ -10,183 +6,42 @@ const employees = [ { id: 3, name: "Алексей Пономарёв", role: "Разработчик", status: "Оффлайн", department: "ИТ" }, { id: 4, name: "Эдуард Иванов", role: "Директор", status: "Онлайн", department: "Финансы" }, ]; - -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 sortedEmployees = [...employees].sort((a, b) => a.name.localeCompare(b.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 ( -
-
-
-
- Логотип -
-
-
- - -
-
-
- -
КМ
-
-
-
+ + -
- - -
-
-
-
-

Команда

-

Сотрудники

-
-
Всего: {employees.length}
-
-
- -
- {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 ( -
-
- {employee.name - .split(" ") - .slice(0, 2) - .map((part) => part[0]) - .join("")} -
-
-

{employee.name}

-

{employee.role}

-
- - {employee.status} - • - {employee.department} -
-
-
- ); - })} -
-
- - + + ); + })}
-
+ ); } diff --git a/src/app/finances/page.tsx b/src/app/finances/page.tsx index 82c2c71..3dfb42a 100644 --- a/src/app/finances/page.tsx +++ b/src/app/finances/page.tsx @@ -1,10 +1,9 @@ +import { AppShell, PageHeader } from "../../components/AppShell"; + export default function FinancesPage() { return ( -
-
-

Финансы

-

Раздел в разработке. Здесь появится аналитика и отчётность.

-
-
+ + + ); } diff --git a/src/app/messages/page.tsx b/src/app/messages/page.tsx index f932cb5..e601431 100644 --- a/src/app/messages/page.tsx +++ b/src/app/messages/page.tsx @@ -1,10 +1,9 @@ +import { AppShell, PageHeader } from "../../components/AppShell"; + export default function MessagesPage() { return ( -
-
-

Сообщения

-

Раздел в разработке. Здесь появятся чаты и диалоги.

-
-
+ + + ); } diff --git a/src/app/page.tsx b/src/app/page.tsx index 35c42b7..697972d 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,8 +1,5 @@ -"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 } from "next/navigation"; +import { Heart, MessageSquare, Search, Star } from "lucide-react"; +import { AppShell } from "../components/AppShell"; const feedItems = [ { @@ -31,211 +28,66 @@ const feedItems = [ }, ]; -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 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 ( -
-
-
-
- Логотип +
+
+
КМ
+
+ + - -
-
-
- - -
-
- -
- -
- КМ -
-
- -
- - -
-
-
-
- КМ -
-
- - -
-
-
- Статья - Фото - Ссылка - Опрос - Событие -
-
- -
- {feedItems.map((item) => ( -
-
-
-
- {item.author[0]} -
-
-

{item.author}

-

{item.time}

-
-
-
-

{item.text}

-
- {item.tags.map((tag) => ( - - {tag} - - ))} -
-
- - - -
-
- ))} -
-
- - +
+ Статья + Фото + Ссылка + Опрос + Событие +
-
+ +
+ {feedItems.map((item) => ( +
+
+
+
+ {item.author[0]} +
+
+

{item.author}

+

{item.time}

+
+
+
+

{item.text}

+
+ {item.tags.map((tag) => ( + + {tag} + + ))} +
+
+ + + +
+
+ ))} +
+ ); } diff --git a/src/app/requests/page.tsx b/src/app/requests/page.tsx index b9e1443..2399446 100644 --- a/src/app/requests/page.tsx +++ b/src/app/requests/page.tsx @@ -1,10 +1,9 @@ +import { AppShell, PageHeader } from "../../components/AppShell"; + export default function RequestsPage() { return ( -
-
-

Заявления

-

Раздел в разработке. Здесь появятся заявки и согласования.

-
-
+ + + ); } diff --git a/src/components/AppShell.tsx b/src/components/AppShell.tsx new file mode 100644 index 0000000..42b5e4b --- /dev/null +++ b/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 ( +
+
+ + Логотип + +
+
+ + +
+
+
+ +
КМ
+
+
+
+ ); +} + +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 ( + + ); +} + +function Calendar() { + return ( + + ); +} + +export function PageHeader({ title, subtitle, badge, eyebrow = "Раздел" }: PageHeaderProps) { + return ( +
+
+
+

{eyebrow}

+

{title}

+
+ {badge ? ( +
{badge}
+ ) : null} +
+ {subtitle ?

{subtitle}

: null} +
+ ); +} + +export function AppShell({ children }: AppShellProps) { + return ( +
+
+
+ +
{children}
+ +
+
+ ); +}