diff --git a/docs/guides/frontend/06-COMPONENT-INVENTORY.md b/docs/guides/frontend/06-COMPONENT-INVENTORY.md index da5823e0..5d2869f6 100644 --- a/docs/guides/frontend/06-COMPONENT-INVENTORY.md +++ b/docs/guides/frontend/06-COMPONENT-INVENTORY.md @@ -221,6 +221,25 @@ - action timeline - page-level profile controllers, которые держат loading/derived state/API orchestration вне page JSX +### Departments + +Файлы: + +- `departments/DepartmentPersonChip.tsx` +- `app/departments/[id]/page.tsx` +- `hooks/useDepartmentPage.ts` + +Использовать как референс для: + +- detail screen, который должен быть полноценным management workspace, а не бедной карточкой-описанием +- page-level controller для domain actions вокруг одного объекта: overview, members, head management, roles, permissions +- richer detail layout, где основной управленческий список сочетается с правой summary/actions колонкой +- member roster с role assignment и person-chip подачей вместо сырых строк участников + +С оговоркой: + +- `departments/[id]` должен оставаться привязанным к реальным backend-capabilities; не наращивать UI, если под него нет соответствующих endpoint/actions + ### Messages Файлы: diff --git a/docs/guides/frontend/09-FRONTEND-AUDIT-MAP.md b/docs/guides/frontend/09-FRONTEND-AUDIT-MAP.md index cb614112..f5776c46 100644 --- a/docs/guides/frontend/09-FRONTEND-AUDIT-MAP.md +++ b/docs/guides/frontend/09-FRONTEND-AUDIT-MAP.md @@ -34,7 +34,7 @@ | `users/directory` | `mixed` | `users/page.tsx` и `employees/page.tsx` уже живут в app-surface language, сценарии user/employee navigation выровнены и читаются как один cluster | список людей всё ещё проще и беднее по interaction density, чем основные рабочие модули, поэтому это не полноценный stylistic reference | считать baseline-pass завершённым и трогать дальше только при появлении richer directory requirements | | `home/feed` | `mixed` | сильный app-shell fit, хорошая operational density, уже много app primitives | page очень большой, комментарии и post-compose logic перегружены, встречаются legacy `rounded-md` fragments | использовать как reference по feed density, но разрезать modal/comments/post flows и дочистить geometry | | `notifications` | `mixed` | близок к operational app-style, фильтры и list hierarchy уже читаются системно | page-level logic пока монолитная, нет выделенного feature controller, есть место для уплотнения и симметрии с messages/requests | после people cluster сделать короткий structural pass без крупного редизайна | -| `departments` | `mixed` | page/detail screens небольшие и уже живут в app-shell language | не хватает единых richer patterns между list/detail, зона выглядит недоразвитой по сравнению с остальными модулями | low-cost pass после крупных зон: выровнять richness и reuse | +| `departments` | `mixed` | detail screen уже поднят до полноценного management workspace: overview, members, head management, roles, user-permissions; page-level controller вынесен в hook | список отделов всё ещё проще detail screen, а сам модуль ещё не проверен длинным visual-pass и живым backend-сценарием | считать `departments/[id]` baseline reference для object-management pages и затем при желании подтянуть list screen до той же richness | | `auth/legal` | `mixed` | изолированные flows уже отделены от app-shell, общая подача аккуратная | `rounded-[2rem]` и локальная hero-card геометрия образуют мини-систему отдельно от app shell | не смешивать с operational refactor; сделать отдельный compact pass по auth/legal geometry | | `documents/dashboard` | `legacy-heavy` | есть готовые data blocks | заметны старые rounded patterns и мелкие utility-решения | включить в documents refactor pass | @@ -50,7 +50,7 @@ 6. `messages` 7. `settings` 8. отдельный audit по `calendar` -9. `departments` +9. `departments` list-screen polishing 10. `auth/legal` Логика порядка: @@ -178,6 +178,7 @@ - у `settings` после controller extraction резать section-level UI и только затем geometry - у `departments` поднять богатство patterns до общего уровня app +- detail screen `departments/[id]` уже не считать пустой зоной; дальнейшие работы здесь должны быть про polishing, а не про изобретение management UI с нуля - у `auth/legal` выровнять isolated geometry отдельно от app-shell жанра ### Волна 7. Calendar special audit diff --git a/frontend/src/app/departments/[id]/page.tsx b/frontend/src/app/departments/[id]/page.tsx index 2fecf090..ed6c7f0b 100644 --- a/frontend/src/app/departments/[id]/page.tsx +++ b/frontend/src/app/departments/[id]/page.tsx @@ -1,48 +1,541 @@ "use client"; -import { useEffect, useState } from "react"; -import { useParams } from "next/navigation"; import Link from "next/link"; -import { AppShell } from "../../../components/AppShell"; -import { apiClient } from "@/lib/api"; -import type { Department } from "@/types/api"; -import { ArrowLeft, Building2, Users } from "lucide-react"; +import { useParams } from "next/navigation"; +import type { ReactNode } from "react"; +import { + ArrowLeft, + BriefcaseBusiness, + Building2, + Crown, + PencilLine, + Plus, + ShieldCheck, + Trash2, + UserPlus, + Users, +} from "lucide-react"; + +import { DepartmentPersonChip } from "@/components/departments/DepartmentPersonChip"; +import { SearchableSelectSingle } from "@/components/shared/SearchableSelect"; +import { AppShell } from "@/components/AppShell"; +import { Modal } from "@/components/ui/Modal"; +import { useDepartmentPage } from "@/hooks/useDepartmentPage"; +import type { + DepartmentMemberLink, + DepartmentPermissionChoice, + DepartmentRole, +} from "@/types/api"; + +function StatCard({ + label, + value, + icon, +}: { + label: string; + value: string; + icon: ReactNode; +}) { + return ( +
+
+ {icon} + {label} +
+

{value}

+
+ ); +} + +function PermissionBadge({ + active, + children, +}: { + active: boolean; + children: React.ReactNode; +}) { + return ( + + {children} + + ); +} + +function DepartmentMemberRow({ + canAssignRoles, + canChangeHead, + canManage, + currentHeadId, + currentUserId, + member, + pendingKey, + roleOptions, + onAssignRole, + onRemoveMember, + onSetHead, +}: { + canAssignRoles: boolean; + canChangeHead: boolean; + canManage: boolean; + currentHeadId?: number | null; + currentUserId?: number | null; + member: DepartmentMemberLink; + pendingKey: string | null; + roleOptions: Array<{ id: number; name: string }>; + onAssignRole: (employeeId: number, roleId: number | null) => Promise; + onRemoveMember: (employeeId: number) => Promise; + onSetHead: (employeeId: number) => Promise; +}) { + const isHead = currentHeadId === member.employee.id; + const isBusy = pendingKey === `member-remove-${member.employee.id}`; + const isRoleBusy = pendingKey === `member-role-${member.employee.id}`; + const subtitle = member.employee.position?.name || member.employee.email || null; + + return ( +
+
+
+ + +
+ {isHead ? ( + + + Руководитель + + ) : null} + {!member.is_active ? ( + + Неактивное участие + + ) : null} + {member.role && !canAssignRoles ? ( + + {member.role.name} + + ) : null} +
+
+ +
+ {canAssignRoles ? ( +
+ + +
+ ) : null} + +
+ {canChangeHead && !isHead ? ( + + ) : null} + {canManage && !isHead ? ( + + ) : null} +
+
+
+
+ ); +} + +function DepartmentRoleCard({ + canAssignRoles, + pendingKey, + role, + usageCount, + onDelete, + onEdit, +}: { + canAssignRoles: boolean; + pendingKey: string | null; + role: DepartmentRole; + usageCount: number; + onDelete: (role: DepartmentRole) => Promise; + onEdit: (role: DepartmentRole) => void; +}) { + const isDeleting = pendingKey === `role-delete-${role.id}`; + + return ( +
+
+
+
+

+ {role.name} +

+ + {usageCount} участников + +
+

+ {role.permissions_verbose.length + ? "Набор прав для участников отдела" + : "У роли пока нет назначенных прав"} +

+
+ + {canAssignRoles ? ( +
+ + +
+ ) : null} +
+ +
+ {role.permissions_verbose.length ? ( + role.permissions_verbose.map((permission) => ( + + {permission.name} + + )) + ) : ( + Права ещё не выбраны + )} +
+
+ ); +} + +function DepartmentEditorModal({ + draft, + isOpen, + loading, + onChange, + onClose, + onSave, +}: { + draft: { name: string; description: string }; + isOpen: boolean; + loading: boolean; + onChange: (patch: Partial<{ name: string; description: string }>) => void; + onClose: () => void; + onSave: () => Promise; +}) { + return ( + + + + + } + > +
+
+ + onChange({ name: event.target.value })} + className="app-input w-full rounded-lg px-3 py-2 text-sm" + placeholder="Например, Финансовый отдел" + /> +
+ +
+ +