Все страницы
This commit is contained in:
parent
621d73257c
commit
378f039bb3
11
.vscode/tasks.json
vendored
11
.vscode/tasks.json
vendored
@ -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": []
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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 (
|
||||
<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>
|
||||
<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-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 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">
|
||||
{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>
|
||||
</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>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
262
src/app/page.tsx
262
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 (
|
||||
<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">
|
||||
КМ
|
||||
</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 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">
|
||||
{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>
|
||||
</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>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
173
src/components/AppShell.tsx
Normal file
173
src/components/AppShell.tsx
Normal file
@ -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>
|
||||
);
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user