{suggestedSkills.map((skill) => (
-
+
))}
@@ -764,7 +764,7 @@ export default function ProfilePage() {
{action.action_display || action.action}
diff --git a/frontend/src/app/users/[id]/page.tsx b/frontend/src/app/users/[id]/page.tsx
index ca87d762..e859b471 100644
--- a/frontend/src/app/users/[id]/page.tsx
+++ b/frontend/src/app/users/[id]/page.tsx
@@ -1,34 +1,106 @@
"use client";
import Link from "next/link";
-import { useParams } from "next/navigation";
+import Image from "next/image";
+import { useEffect, useMemo, useState } from "react";
+import { useParams, useRouter } from "next/navigation";
import {
- Award,
Building2,
- Calendar,
+ CalendarDays,
Check,
- Clock,
Copy,
Mail,
MessageCircle,
Pencil,
Phone,
+ Plus,
} from "lucide-react";
+
import { AppShell } from "../../../components/AppShell";
import EditUserProfileModal from "@/components/users/EditUserProfileModal";
import EmployeeActionModal from "@/components/users/EmployeeActionModal";
import EmployeeActionsTimeline from "@/components/users/EmployeeActionsTimeline";
import { useUser } from "@/contexts/UserContext";
import { useUserDetailPage } from "@/hooks/useUserDetailPage";
+import { apiClient } from "@/lib/api";
+import { resolveMediaUrl } from "@/lib/url";
import {
formatBirthday,
formatPhoneForLink,
- getEmployeeActionBadgeClass,
getWorkDuration,
} from "@/lib/users/userDetailUtils";
+function formatDate(value?: string): string {
+ if (!value) return "—";
+ const date = new Date(value);
+ if (Number.isNaN(date.getTime())) return value;
+ return date.toLocaleDateString("ru-RU", {
+ day: "2-digit",
+ month: "2-digit",
+ year: "numeric",
+ });
+}
+
+function formatDateTime(value?: string): string {
+ if (!value) return "—";
+ const date = new Date(value);
+ if (Number.isNaN(date.getTime())) return value;
+ return date.toLocaleString("ru-RU", {
+ day: "2-digit",
+ month: "2-digit",
+ year: "numeric",
+ hour: "2-digit",
+ minute: "2-digit",
+ });
+}
+
+function normalizeTelegram(value: string) {
+ const trimmed = value.trim();
+ if (!trimmed) return "";
+ if (/^https?:\/\//i.test(trimmed)) return trimmed;
+ return `https://t.me/${trimmed.replace(/^@/, "")}`;
+}
+
+function normalizeWhatsApp(value: string) {
+ const trimmed = value.trim();
+ if (!trimmed) return "";
+ if (/^https?:\/\//i.test(trimmed)) return trimmed;
+ const digits = trimmed.replace(/[^\d]/g, "");
+ return digits ? `https://wa.me/${digits}` : "";
+}
+
+function getActionTone(action?: string) {
+ switch (action) {
+ case "on_leave":
+ case "on_maternity":
+ return "app-feedback-warning";
+ case "dismissed":
+ return "app-feedback-danger";
+ case "transferred":
+ return "app-selected";
+ default:
+ return "app-feedback-success";
+ }
+}
+
+function SectionTitle({
+ title,
+ action,
+}: {
+ title: string;
+ action?: React.ReactNode;
+}) {
+ return (
+ (null);
+
+ useEffect(() => {
+ setPersonSkills(person?.skills || []);
+ }, [person?.skills]);
+
+ useEffect(() => {
+ let mounted = true;
+
+ async function loadSkills() {
+ try {
+ setSkillsLoading(true);
+ const response = (await apiClient.getSkills()) as Array<{
+ id: number;
+ name: string;
+ description?: string;
+ }>;
+ if (!mounted) return;
+ setAvailableSkills(response);
+ } catch (error: any) {
+ if (!mounted) return;
+ setSkillsError(
+ String(error?.message || "Не удалось загрузить список навыков"),
+ );
+ } finally {
+ if (mounted) {
+ setSkillsLoading(false);
+ }
+ }
+ }
+
+ void loadSkills();
+
+ return () => {
+ mounted = false;
+ };
+ }, []);
+
+ const normalizedSkillName = skillName.trim().toLowerCase();
+ const selectedSkillIds = useMemo(
+ () => new Set(personSkills.map((skill) => skill.id)),
+ [personSkills],
+ );
+ const suggestedSkills = useMemo(
+ () =>
+ availableSkills
+ .filter((skill) => !selectedSkillIds.has(skill.id))
+ .filter((skill) =>
+ normalizedSkillName
+ ? skill.name.toLowerCase().includes(normalizedSkillName)
+ : true,
+ )
+ .slice(0, 10),
+ [availableSkills, normalizedSkillName, selectedSkillIds],
+ );
+
+ const contactRows = useMemo(
+ () =>
+ person
+ ? [
+ person.email
+ ? {
+ key: "email",
+ label: "Почта",
+ value: person.email,
+ href: `mailto:${person.email}`,
+ icon:
+
+ );
+ }
+
return (
-
+
+ );
+}
+
export default function UserDetailPage() {
const params = useParams<{ id: string }>();
+ const router = useRouter();
const { user: currentUser } = useUser();
const userId = Number(params?.id);
@@ -69,272 +141,549 @@ export default function UserDetailPage() {
sortedActions,
} = useUserDetailPage(userId, currentUser);
+ useEffect(() => {
+ if (currentUser?.id && userId && currentUser.id === userId) {
+ router.replace("/profile");
+ }
+ }, [currentUser?.id, router, userId]);
+
+ const primaryDepartment = useMemo(
+ () => person?.departments?.[0] || null,
+ [person?.departments],
+ );
+ const [availableSkills, setAvailableSkills] = useState<
+ Array<{ id: number; name: string; description?: string }>
+ >([]);
+ const [personSkills, setPersonSkills] = useState<
+ Array<{ id: number; name: string; description?: string }>
+ >([]);
+ const [skillName, setSkillName] = useState("");
+ const [skillsLoading, setSkillsLoading] = useState(false);
+ const [skillsSaving, setSkillsSaving] = useState(false);
+ const [skillsError, setSkillsError] = useState{title}
+ {action} +
+
+ Перенаправляем в профиль...
+
-
- ← К списку сотрудников
-
+
+
+
+
) : error ? (
-
+
) : person ? (
<>
-
-
+
+ ← К списку сотрудников
+
+
{loading ? (
-
-
-
+ Загрузка...
-Загрузка сотрудника...
+
-
+ {error}
-{error}
+
-
- {avatarUrl && !avatarFailed ? (
- // eslint-disable-next-line @next/next/no-img-element
- 
setAvatarFailed(true)}
- />
- ) : (
- {initials}
- )}
+
+
+
+
+ Профиль сотрудника
+ {latestAction ? ( + + {latestAction.action_display || latestAction.action} + + ) : null} +
+
+
-
+ {avatarUrl && !avatarFailed ? (
+ setAvatarFailed(true)}
+ unoptimized
+ />
+ ) : (
+
+
+
+ {initials}
+
+ )}
+
+
+
+
+ {currentUser && currentUser.id !== person.id ? (
+
+
+
+ + {fullName} +
+
+
+ {person.position?.name || "Должность не указана"}
+
+ {primaryDepartment ? (
+
+ {primaryDepartment.name}
+
+ ) : null}
+
+
+ {canManageActions ? (
+
+ ) : null}
+ {canEdit ? (
+
+ ) : null}
+
+
+
+ {person.phone_number ? (
+
+
+ ) : null}
+
-
-
- {fullName}
- {canEdit && ( - +
+
+ {contactRows.length ? (
+ contactRows.map((contact, index) => (
+
-
+ {index > 0 ? (
+
+ ) : null}
+
+ ))
+ ) : (
+
+
+ {contact.icon}
+
+
+
+
+
+ + {contact.label} +
+ {contact.href ? ( + + {contact.value} + + ) : ( ++ {contact.value} +
+ )} ++ Контакты не указаны +
)}
-
- {person.departments && person.departments.length > 0 && (
- {person.position?.name || "—"}
- {latestAction && ( - - {latestAction.action_display || latestAction.action} - - )} - {canManageActions && ( - - )} -{person.departments[0].name}
- )} - - {currentUser && currentUser.id !== person.id && ( -
-
-
- {person.phone_number && (
-
-
- )}
-
-
Контакты
-
- {person.email && (
-
+
-
- )}
+
-
-
-
+
+
+
+ {person.departments?.length ? (
+
+
-
-
-
- )}
+ ) : null}
-
+
- {person.phone_number && (
-
+ setSkillName(event.target.value)}
+ placeholder="Добавить навык"
+ className="app-input w-full rounded-xl px-4 py-3 text-sm"
+ disabled={skillsSaving}
+ />
+
+
+
+
-
-
-
- )}
+ {skillsError ? (
+ {skillsError}
+ ) : null} - {person.telegram && ( -
-
-
-
- {person.skills && person.skills.length > 0 ? (
-
+
+
+
+ {personSkills.length ? (
+
-
-
+ {personSkills.map((skill) => (
+
+ {skill.name}
+
+ ))}
- )}
-
- {person.whatsapp && (
-
- )}
-
- {person.wechat && (
-
-
- )}
-
- {!person.email && !person.phone_number && !person.telegram && !person.whatsapp && !person.wechat && (
- Нет контактов
+ ) : ( +Навыки не указаны
)}
-
- {person.skills && person.skills.length > 0 ? (
-
- {person.skills.map((skill) => (
-
+
+ ) : null}
+
+ {skillsLoading ? (
+ + Доступные навыки +
+
+ {suggestedSkills.map((skill) => (
+
+ ))}
+
+ + Загружаем навыки... +
+ ) : null} +
+
+
+
+
+
+
+ + В компании +
++ {getWorkDuration(person.date_joined) || "—"} +
+
+
+ + Дата найма +
++ {formatDate(person.date_joined)} +
+
+
+
+
+ + День рождения +
++ {formatBirthday(person.birth_date) || "—"} +
+
+
+ + Последний вход +
++ {formatDateTime(person.last_login)} +
+
+
-
- )}
-
-
- {person.departments && person.departments.length > 0 && (
-
+ {person.departments.map((department) => (
+
- {skill.name}
-
+
- ) : (
-
+
+
))}
+
+ {department.is_head ? (
+
+ Руководитель
+
+ ) : null}
+ + {department.name} +
+ {department.role_name ? ( ++ {department.role_name} +
+ ) : null} +Навыки не указаны
- )} - - - {(person.date_joined || person.birth_date) && ( -Информация
-
- {person.date_joined && (
- <>
-
-
-
-
-
- В компании
-{getWorkDuration(person.date_joined)}
-
-
-
- )}
-
- {person.birth_date && (
-
-
- Дата найма
-- {new Date(person.date_joined).toLocaleDateString("ru-RU")} -
-
-
- )}
-
-
- День рождения
-{formatBirthday(person.birth_date)}
-
-
-
- {person.departments.map((department) => (
-
-
-
- {department.is_head && (
-
- Руководитель
-
- )}
-
- ))}
{department.name}
- {department.role_name && ( -{department.role_name}
- )} -
-
-
+
+
+
-
+
-
- {sortedActions.length} {sortedActions.length === 1 ? "событие" : sortedActions.length < 5 ? "события" : "событий"}
+
+ Кадровые события
+
+
+ {sortedActions.length}{" "}
+ {sortedActions.length === 1
+ ? "событие"
+ : sortedActions.length < 5
+ ? "события"
+ : "событий"}
- {canManageActions && (
+ {canManageActions ? (
- )}
+ ) : null}
{sortedActions.map((action) => {
const isCurrent = latestActionId === action.id;
const deleteKey = `delete-${action.id}`;
+ const tone = getEmployeeActionBadgeClass(action.action);
+ const lineColor = getEmployeeActionBorderColor(action.action);
return (
-
-
-
-
-
-
+
+
+ {isCurrent ? (
+
+ ) : null}
+ ) =>
request(`/api/v1/employees/${id}/`, { method: 'PATCH', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data) }),
uploadEmployeeAvatar: (id: number | string, file: File) => {
+
);
-}
\ No newline at end of file
+}
diff --git a/frontend/src/lib/api/employees.ts b/frontend/src/lib/api/employees.ts
index ac337476..82c0cd70 100644
--- a/frontend/src/lib/api/employees.ts
+++ b/frontend/src/lib/api/employees.ts
@@ -24,6 +24,14 @@ export function createEmployeesApi(request: RequestFn) {
return request(`/api/v1/employees/${qs ? '?' + qs : ''}`);
},
getEmployee: (id: number | string) => request(`/api/v1/employees/${id}/`),
+ addEmployeeSkill: (
+ id: number | string,
+ data: { skill_id?: number; name?: string },
+ ) =>
+ request(`/api/v1/employees/${id}/add_skill/`, {
+ method: 'POST',
+ body: JSON.stringify(data),
+ }),
updateEmployee: (id: number | string, data: Record
+
@@ -117,4 +146,4 @@ export default function EmployeeActionsTimeline({
+
-
+
{action.action_display || action.action}
- {isCurrent && (
- текущий
- )}
+ {isCurrent ? (
+
+ текущий
+
+ ) : null}
- {action.comment && (
- {action.comment}
- )} + {action.comment ? ( ++ {action.comment} +
+ ) : null}
-