747 lines
34 KiB
TypeScript
747 lines
34 KiB
TypeScript
|
import React, { useEffect, useState } from 'react';
|
|||
|
|
import { backendApi, PortalUserRow } from '../../services/apiClient';
|
|||
|
|
import { Employee } from '../../types';
|
|||
|
|
import { UserRole } from '../../types';
|
|||
|
|
import { District } from '../../types';
|
|||
|
|
import { UserPlus, Loader2, Pencil, Trash2, UsersRound, Shield, CheckSquare, Square, X, UserCog } from 'lucide-react';
|
|||
|
|
import { PermissionTemplateRow } from '../../services/apiClient';
|
|||
|
|
import {
|
|||
|
|
SECTION_LABELS,
|
|||
|
|
SECTION_SUBS,
|
|||
|
|
ALL_SECTION_KEYS,
|
|||
|
|
getPermissionLevel,
|
|||
|
|
permissionKey,
|
|||
|
|
PERMISSION_LEVEL_LABELS,
|
|||
|
|
type PermissionLevel,
|
|||
|
|
} from '../../constants/permissions';
|
|||
|
|
import { ROLE_NAMES } from '../../constants/roleAccess';
|
|||
|
|
|
|||
|
|
type CreateMode = 'select' | 'createNew';
|
|||
|
|
|
|||
|
|
export const UsersSection: React.FC = () => {
|
|||
|
|
const [portalUsers, setPortalUsers] = useState<PortalUserRow[]>([]);
|
|||
|
|
const [employees, setEmployees] = useState<Employee[]>([]);
|
|||
|
|
const [districts, setDistricts] = useState<District[]>([]);
|
|||
|
|
const [loading, setLoading] = useState(true);
|
|||
|
|
const [error, setError] = useState<string | null>(null);
|
|||
|
|
const [showCreateForm, setShowCreateForm] = useState(false);
|
|||
|
|
const [createMode, setCreateMode] = useState<CreateMode>('select');
|
|||
|
|
const [editingId, setEditingId] = useState<number | null>(null);
|
|||
|
|
const [formEmployeeId, setFormEmployeeId] = useState('');
|
|||
|
|
const [formLogin, setFormLogin] = useState('');
|
|||
|
|
const [formPassword, setFormPassword] = useState('');
|
|||
|
|
const [formEmail, setFormEmail] = useState('');
|
|||
|
|
const [formRole, setFormRole] = useState<UserRole>('ENGINEER');
|
|||
|
|
const [empName, setEmpName] = useState('');
|
|||
|
|
const [empPosition, setEmpPosition] = useState('');
|
|||
|
|
const [empPhone, setEmpPhone] = useState('');
|
|||
|
|
const [empSalary, setEmpSalary] = useState('');
|
|||
|
|
const [empDistrictId, setEmpDistrictId] = useState('');
|
|||
|
|
const [saving, setSaving] = useState(false);
|
|||
|
|
const [createError, setCreateError] = useState<string | null>(null);
|
|||
|
|
const [permissionsModalUserId, setPermissionsModalUserId] = useState<number | null>(null);
|
|||
|
|
const [permissionTemplates, setPermissionTemplates] = useState<PermissionTemplateRow[]>([]);
|
|||
|
|
const [userPermissions, setUserPermissions] = useState<string[]>([]);
|
|||
|
|
const [userScope, setUserScope] = useState<'all' | 'own_district'>('all');
|
|||
|
|
|
|||
|
|
const load = async () => {
|
|||
|
|
setLoading(true);
|
|||
|
|
setError(null);
|
|||
|
|
try {
|
|||
|
|
const [users, emps, dists, templates] = await Promise.all([
|
|||
|
|
backendApi.getPortalUsers(),
|
|||
|
|
backendApi.getEmployees(),
|
|||
|
|
backendApi.getDistricts(),
|
|||
|
|
backendApi.getPermissionTemplates(),
|
|||
|
|
]);
|
|||
|
|
setPortalUsers(users);
|
|||
|
|
setEmployees(emps);
|
|||
|
|
setDistricts(dists);
|
|||
|
|
setPermissionTemplates(templates);
|
|||
|
|
} catch (e: any) {
|
|||
|
|
setError(e?.message || 'Ошибка загрузки');
|
|||
|
|
} finally {
|
|||
|
|
setLoading(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
load();
|
|||
|
|
}, []);
|
|||
|
|
|
|||
|
|
const openPermissionsModal = (u: PortalUserRow) => {
|
|||
|
|
setPermissionsModalUserId(u.id);
|
|||
|
|
setUserPermissions(Array.isArray(u.permissions) ? u.permissions : []);
|
|||
|
|
setUserScope(u.scope === 'own_district' ? 'own_district' : 'all');
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const applyTemplateToUser = async (userId: number, t: PermissionTemplateRow) => {
|
|||
|
|
setSaving(true);
|
|||
|
|
try {
|
|||
|
|
await backendApi.updatePortalUser(userId, {
|
|||
|
|
permissions: (t.permissions?.length ?? 0) > 0 ? (t.permissions ?? []) : null,
|
|||
|
|
scope: t.scope || 'all',
|
|||
|
|
role: t.suggestedRole || undefined,
|
|||
|
|
});
|
|||
|
|
setUserPermissions(t.permissions ?? []);
|
|||
|
|
setUserScope(t.scope || 'all');
|
|||
|
|
await load();
|
|||
|
|
} catch (e: any) {
|
|||
|
|
alert(e?.message || 'Ошибка применения шаблона');
|
|||
|
|
} finally {
|
|||
|
|
setSaving(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const toggleUserSection = (section: string) => {
|
|||
|
|
setUserPermissions((prev) => {
|
|||
|
|
const hasSection = prev.includes(section);
|
|||
|
|
const subs = SECTION_SUBS[section];
|
|||
|
|
const subKeyPrefixes = subs
|
|||
|
|
? subs.flatMap((s) => {
|
|||
|
|
const base = `${section}_${s.id}`;
|
|||
|
|
return [base, `${base}:read`, `${base}:edit`, `${base}:own`];
|
|||
|
|
})
|
|||
|
|
: [];
|
|||
|
|
if (hasSection) {
|
|||
|
|
return prev.filter((p) => p !== section && !subKeyPrefixes.some((prefix) => p === prefix || p.startsWith(prefix + ':')));
|
|||
|
|
} else {
|
|||
|
|
return prev.filter((p) => p !== section && !subKeyPrefixes.some((prefix) => p === prefix || p.startsWith(prefix + ':'))).concat([section]);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const setUserSubLevel = (section: string, subId: string, level: PermissionLevel) => {
|
|||
|
|
setUserPermissions((prev) => {
|
|||
|
|
const base = `${section}_${subId}`;
|
|||
|
|
const toRemove = prev.filter(
|
|||
|
|
(p) => p === base || p === `${base}:read` || p === `${base}:edit` || p === `${base}:own`
|
|||
|
|
);
|
|||
|
|
const next = prev.filter((p) => !toRemove.includes(p));
|
|||
|
|
if (level !== 'none') {
|
|||
|
|
next.push(permissionKey(section, subId, level));
|
|||
|
|
}
|
|||
|
|
return next.filter((p) => p !== section);
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const hasUserSection = (section: string) => userPermissions.includes(section);
|
|||
|
|
const getUserSubLevel = (section: string, subId: string) => getPermissionLevel(userPermissions, section, subId);
|
|||
|
|
const hasUserSub = (section: string, subId: string) => getUserSubLevel(section, subId) !== 'none';
|
|||
|
|
|
|||
|
|
const saveUserPermissions = async () => {
|
|||
|
|
if (permissionsModalUserId == null) return;
|
|||
|
|
setSaving(true);
|
|||
|
|
try {
|
|||
|
|
await backendApi.updatePortalUser(permissionsModalUserId, {
|
|||
|
|
permissions: userPermissions.length > 0 ? userPermissions : null,
|
|||
|
|
scope: userScope,
|
|||
|
|
});
|
|||
|
|
setPermissionsModalUserId(null);
|
|||
|
|
await load();
|
|||
|
|
} catch (e: any) {
|
|||
|
|
alert(e?.message || 'Ошибка сохранения');
|
|||
|
|
} finally {
|
|||
|
|
setSaving(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const currentModalUser = permissionsModalUserId != null ? portalUsers.find((u) => u.id === permissionsModalUserId) : null;
|
|||
|
|
const templatesByPosition = permissionTemplates.filter((t) => t.forPosition && t.forPosition.trim());
|
|||
|
|
|
|||
|
|
const employeeIdsWithUser = new Set(portalUsers.map((u) => u.employeeId));
|
|||
|
|
const employeesWithoutUser = employees.filter((e) => !employeeIdsWithUser.has(e.id));
|
|||
|
|
|
|||
|
|
const handleCreate = async () => {
|
|||
|
|
if (!formEmployeeId || !formLogin.trim()) {
|
|||
|
|
setCreateError('Выберите сотрудника и укажите логин');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
setSaving(true);
|
|||
|
|
setCreateError(null);
|
|||
|
|
try {
|
|||
|
|
await backendApi.createPortalUser({
|
|||
|
|
employeeId: formEmployeeId,
|
|||
|
|
login: formLogin.trim(),
|
|||
|
|
password: formPassword.trim() || undefined,
|
|||
|
|
email: formEmail.trim() || undefined,
|
|||
|
|
role: formRole,
|
|||
|
|
});
|
|||
|
|
setShowCreateForm(false);
|
|||
|
|
setFormEmployeeId('');
|
|||
|
|
setFormLogin('');
|
|||
|
|
setFormPassword('');
|
|||
|
|
setFormEmail('');
|
|||
|
|
setFormRole('ENGINEER');
|
|||
|
|
await load();
|
|||
|
|
} catch (e: any) {
|
|||
|
|
setCreateError(e?.message || 'Ошибка создания');
|
|||
|
|
} finally {
|
|||
|
|
setSaving(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleCreateEmployeeAndUser = async () => {
|
|||
|
|
if (!empName.trim() || !empPosition.trim() || !empPhone.trim() || !empSalary.trim() || !formLogin.trim()) {
|
|||
|
|
setCreateError('Заполните ФИО, должность, телефон, зарплату и логин');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
const salaryNum = parseFloat(empSalary.replace(/\s/g, '').replace(',', '.'));
|
|||
|
|
if (isNaN(salaryNum) || salaryNum < 0) {
|
|||
|
|
setCreateError('Укажите корректную зарплату');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
setSaving(true);
|
|||
|
|
setCreateError(null);
|
|||
|
|
try {
|
|||
|
|
await backendApi.createEmployeeWithUser({
|
|||
|
|
name: empName.trim(),
|
|||
|
|
position: empPosition.trim(),
|
|||
|
|
phone: empPhone.trim(),
|
|||
|
|
status: 'active',
|
|||
|
|
salary: salaryNum,
|
|||
|
|
assignedDistrictId: empDistrictId.trim() || undefined,
|
|||
|
|
login: formLogin.trim(),
|
|||
|
|
email: formEmail.trim() || undefined,
|
|||
|
|
role: formRole,
|
|||
|
|
});
|
|||
|
|
setShowCreateForm(false);
|
|||
|
|
setCreateMode('select');
|
|||
|
|
setEmpName('');
|
|||
|
|
setEmpPosition('');
|
|||
|
|
setEmpPhone('');
|
|||
|
|
setEmpSalary('');
|
|||
|
|
setEmpDistrictId('');
|
|||
|
|
setFormEmployeeId('');
|
|||
|
|
setFormLogin('');
|
|||
|
|
setFormEmail('');
|
|||
|
|
setFormRole('ENGINEER');
|
|||
|
|
await load();
|
|||
|
|
} catch (e: any) {
|
|||
|
|
setCreateError(e?.message || 'Ошибка создания');
|
|||
|
|
} finally {
|
|||
|
|
setSaving(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleUpdate = async (id: number, updates: { login?: string; email?: string; role?: string }) => {
|
|||
|
|
setSaving(true);
|
|||
|
|
setCreateError(null);
|
|||
|
|
try {
|
|||
|
|
await backendApi.updatePortalUser(id, updates);
|
|||
|
|
setEditingId(null);
|
|||
|
|
await load();
|
|||
|
|
} catch (e: any) {
|
|||
|
|
setCreateError(e?.message || 'Ошибка сохранения');
|
|||
|
|
} finally {
|
|||
|
|
setSaving(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleDelete = async (id: number) => {
|
|||
|
|
if (!confirm('Удалить пользователя портала? Сотрудник останется в системе.')) return;
|
|||
|
|
setSaving(true);
|
|||
|
|
setCreateError(null);
|
|||
|
|
try {
|
|||
|
|
await backendApi.deletePortalUser(id);
|
|||
|
|
await load();
|
|||
|
|
} catch (e: any) {
|
|||
|
|
setCreateError(e?.message || 'Ошибка удаления');
|
|||
|
|
} finally {
|
|||
|
|
setSaving(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
if (loading) {
|
|||
|
|
return (
|
|||
|
|
<div className="flex items-center justify-center py-12">
|
|||
|
|
<Loader2 className="w-8 h-8 animate-spin text-primary-500" />
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="space-y-6">
|
|||
|
|
<div className="flex justify-between items-center">
|
|||
|
|
<h3 className="text-lg font-bold text-slate-800">Пользователи портала</h3>
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={() => {
|
|||
|
|
setShowCreateForm(true);
|
|||
|
|
setCreateError(null);
|
|||
|
|
setCreateMode(employeesWithoutUser.length === 0 ? 'createNew' : 'select');
|
|||
|
|
setFormEmployeeId(employeesWithoutUser[0]?.id || '');
|
|||
|
|
setFormLogin('');
|
|||
|
|
setFormPassword('');
|
|||
|
|
setFormEmail('');
|
|||
|
|
setFormRole('ENGINEER');
|
|||
|
|
setEmpName('');
|
|||
|
|
setEmpPosition('');
|
|||
|
|
setEmpPhone('');
|
|||
|
|
setEmpSalary('');
|
|||
|
|
setEmpDistrictId('');
|
|||
|
|
}}
|
|||
|
|
className="flex items-center gap-2 px-4 py-2 bg-primary-600 text-white text-sm font-bold rounded-xl hover:bg-primary-700"
|
|||
|
|
>
|
|||
|
|
<UserPlus className="w-4 h-4" /> Создать пользователя
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
<p className="text-sm text-slate-500">
|
|||
|
|
Пользователя можно создать только для сотрудника. Выберите существующего сотрудника или создайте нового — тогда сразу создастся и пользователь портала.
|
|||
|
|
</p>
|
|||
|
|
|
|||
|
|
{error && (
|
|||
|
|
<div className="rounded-xl border border-red-200 bg-red-50 p-4 text-red-700 text-sm">{error}</div>
|
|||
|
|
)}
|
|||
|
|
{createError && (
|
|||
|
|
<div className="rounded-xl border border-red-200 bg-red-50 p-4 text-red-700 text-sm">{createError}</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{showCreateForm && (
|
|||
|
|
<div className="rounded-xl border border-slate-200 bg-slate-50 p-6 space-y-4">
|
|||
|
|
<h4 className="font-bold text-slate-800">Новый пользователь</h4>
|
|||
|
|
<div className="flex gap-2 p-1 bg-slate-200/50 rounded-xl">
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={() => setCreateMode('select')}
|
|||
|
|
className={`flex-1 flex items-center justify-center gap-2 py-2 px-4 rounded-lg text-sm font-medium transition-colors ${createMode === 'select' ? 'bg-white text-primary-600 shadow' : 'text-slate-600 hover:text-slate-800'}`}
|
|||
|
|
>
|
|||
|
|
<UsersRound className="w-4 h-4" /> Выбрать сотрудника
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={() => setCreateMode('createNew')}
|
|||
|
|
className={`flex-1 flex items-center justify-center gap-2 py-2 px-4 rounded-lg text-sm font-medium transition-colors ${createMode === 'createNew' ? 'bg-white text-primary-600 shadow' : 'text-slate-600 hover:text-slate-800'}`}
|
|||
|
|
>
|
|||
|
|
<UserCog className="w-4 h-4" /> Создать сотрудника и пользователя
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{createMode === 'select' ? (
|
|||
|
|
employeesWithoutUser.length === 0 ? (
|
|||
|
|
<div className="flex items-center gap-3 p-4 bg-amber-50 border border-amber-200 rounded-lg text-amber-800 text-sm">
|
|||
|
|
<UsersRound className="w-5 h-5 flex-shrink-0" />
|
|||
|
|
<div>
|
|||
|
|
<p className="font-medium">Нет сотрудников без пользователя</p>
|
|||
|
|
<p className="mt-1">Переключитесь на вкладку <strong>«Создать сотрудника и пользователя»</strong> — так можно сразу добавить нового сотрудника и учётную запись портала.</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
) : (
|
|||
|
|
<>
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-xs font-bold text-slate-600 mb-1">Сотрудник</label>
|
|||
|
|
<select
|
|||
|
|
value={formEmployeeId}
|
|||
|
|
onChange={(e) => setFormEmployeeId(e.target.value)}
|
|||
|
|
className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
|
|||
|
|
>
|
|||
|
|
<option value="">— Выберите —</option>
|
|||
|
|
{employeesWithoutUser.map((e) => (
|
|||
|
|
<option key={e.id} value={e.id}>{e.name} ({e.position})</option>
|
|||
|
|
))}
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-xs font-bold text-slate-600 mb-1">Логин</label>
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
value={formLogin}
|
|||
|
|
onChange={(e) => setFormLogin(e.target.value)}
|
|||
|
|
placeholder="Уникальный логин"
|
|||
|
|
className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-xs font-bold text-slate-600 mb-1">Пароль (необязательно при создании)</label>
|
|||
|
|
<input
|
|||
|
|
type="password"
|
|||
|
|
value={formPassword}
|
|||
|
|
onChange={(e) => setFormPassword(e.target.value)}
|
|||
|
|
placeholder="Задайте пароль для входа"
|
|||
|
|
className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-xs font-bold text-slate-600 mb-1">Email (необязательно)</label>
|
|||
|
|
<input
|
|||
|
|
type="email"
|
|||
|
|
value={formEmail}
|
|||
|
|
onChange={(e) => setFormEmail(e.target.value)}
|
|||
|
|
placeholder="email@example.com"
|
|||
|
|
className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-xs font-bold text-slate-600 mb-1">Роль</label>
|
|||
|
|
<select
|
|||
|
|
value={formRole}
|
|||
|
|
onChange={(e) => setFormRole(e.target.value as UserRole)}
|
|||
|
|
className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
|
|||
|
|
>
|
|||
|
|
{(Object.keys(ROLE_NAMES) as UserRole[]).map((r) => (
|
|||
|
|
<option key={r} value={r}>{ROLE_NAMES[r]}</option>
|
|||
|
|
))}
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
<div className="flex gap-2">
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={handleCreate}
|
|||
|
|
disabled={saving || !formEmployeeId || !formLogin.trim()}
|
|||
|
|
className="px-4 py-2 bg-primary-600 text-white text-sm font-bold rounded-lg hover:bg-primary-700 disabled:opacity-50"
|
|||
|
|
>
|
|||
|
|
{saving ? <Loader2 className="w-4 h-4 animate-spin inline" /> : 'Создать'}
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={() => { setShowCreateForm(false); setCreateError(null); }}
|
|||
|
|
className="px-4 py-2 border border-slate-200 text-slate-700 text-sm font-medium rounded-lg hover:bg-slate-50"
|
|||
|
|
>
|
|||
|
|
Отмена
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</>
|
|||
|
|
)
|
|||
|
|
) : (
|
|||
|
|
<>
|
|||
|
|
<p className="text-xs text-slate-600 font-medium">Данные сотрудника</p>
|
|||
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-xs font-bold text-slate-600 mb-1">ФИО</label>
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
value={empName}
|
|||
|
|
onChange={(e) => setEmpName(e.target.value)}
|
|||
|
|
placeholder="Иванов Иван Иванович"
|
|||
|
|
className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-xs font-bold text-slate-600 mb-1">Должность</label>
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
value={empPosition}
|
|||
|
|
onChange={(e) => setEmpPosition(e.target.value)}
|
|||
|
|
placeholder="Мастер участка"
|
|||
|
|
className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-xs font-bold text-slate-600 mb-1">Телефон</label>
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
value={empPhone}
|
|||
|
|
onChange={(e) => setEmpPhone(e.target.value)}
|
|||
|
|
placeholder="+7 900 123-45-67"
|
|||
|
|
className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-xs font-bold text-slate-600 mb-1">Зарплата</label>
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
value={empSalary}
|
|||
|
|
onChange={(e) => setEmpSalary(e.target.value)}
|
|||
|
|
placeholder="50000"
|
|||
|
|
className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div className="sm:col-span-2">
|
|||
|
|
<label className="block text-xs font-bold text-slate-600 mb-1">Участок (необязательно)</label>
|
|||
|
|
<select
|
|||
|
|
value={empDistrictId}
|
|||
|
|
onChange={(e) => setEmpDistrictId(e.target.value)}
|
|||
|
|
className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
|
|||
|
|
>
|
|||
|
|
<option value="">— Не выбран —</option>
|
|||
|
|
{districts.map((d) => (
|
|||
|
|
<option key={d.id} value={d.id}>{d.name}</option>
|
|||
|
|
))}
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<p className="text-xs text-slate-600 font-medium pt-2">Данные пользователя портала</p>
|
|||
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-xs font-bold text-slate-600 mb-1">Логин</label>
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
value={formLogin}
|
|||
|
|
onChange={(e) => setFormLogin(e.target.value)}
|
|||
|
|
placeholder="Уникальный логин"
|
|||
|
|
className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-xs font-bold text-slate-600 mb-1">Email (необязательно)</label>
|
|||
|
|
<input
|
|||
|
|
type="email"
|
|||
|
|
value={formEmail}
|
|||
|
|
onChange={(e) => setFormEmail(e.target.value)}
|
|||
|
|
placeholder="email@example.com"
|
|||
|
|
className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-xs font-bold text-slate-600 mb-1">Роль</label>
|
|||
|
|
<select
|
|||
|
|
value={formRole}
|
|||
|
|
onChange={(e) => setFormRole(e.target.value as UserRole)}
|
|||
|
|
className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
|
|||
|
|
>
|
|||
|
|
{(Object.keys(ROLE_NAMES) as UserRole[]).map((r) => (
|
|||
|
|
<option key={r} value={r}>{ROLE_NAMES[r]}</option>
|
|||
|
|
))}
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div className="flex gap-2 pt-2">
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={handleCreateEmployeeAndUser}
|
|||
|
|
disabled={saving || !empName.trim() || !empPosition.trim() || !empPhone.trim() || !empSalary.trim() || !formLogin.trim()}
|
|||
|
|
className="px-4 py-2 bg-primary-600 text-white text-sm font-bold rounded-lg hover:bg-primary-700 disabled:opacity-50"
|
|||
|
|
>
|
|||
|
|
{saving ? <Loader2 className="w-4 h-4 animate-spin inline" /> : 'Создать сотрудника и пользователя'}
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={() => { setShowCreateForm(false); setCreateError(null); }}
|
|||
|
|
className="px-4 py-2 border border-slate-200 text-slate-700 text-sm font-medium rounded-lg hover:bg-slate-50"
|
|||
|
|
>
|
|||
|
|
Отмена
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
<div className="rounded-xl border border-slate-200 overflow-hidden">
|
|||
|
|
<div className="overflow-x-auto">
|
|||
|
|
<table className="w-full text-sm">
|
|||
|
|
<thead className="bg-slate-50 border-b border-slate-200">
|
|||
|
|
<tr>
|
|||
|
|
<th className="text-left py-3 px-4 font-bold text-slate-700">Сотрудник</th>
|
|||
|
|
<th className="text-left py-3 px-4 font-bold text-slate-700">Логин</th>
|
|||
|
|
<th className="text-left py-3 px-4 font-bold text-slate-700">Роль</th>
|
|||
|
|
<th className="text-right py-3 px-4 font-bold text-slate-700">Действия</th>
|
|||
|
|
</tr>
|
|||
|
|
</thead>
|
|||
|
|
<tbody>
|
|||
|
|
{portalUsers.length === 0 ? (
|
|||
|
|
<tr>
|
|||
|
|
<td colSpan={4} className="py-8 px-4 text-center text-slate-500">
|
|||
|
|
Нет пользователей портала. Создайте первого выше.
|
|||
|
|
</td>
|
|||
|
|
</tr>
|
|||
|
|
) : (
|
|||
|
|
portalUsers.map((u) => (
|
|||
|
|
<tr key={u.id} className="border-b border-slate-100 hover:bg-slate-50/50">
|
|||
|
|
<td className="py-3 px-4">
|
|||
|
|
<span className="font-medium text-slate-800">{u.employeeName}</span>
|
|||
|
|
<span className="block text-xs text-slate-500">{u.employeePosition}</span>
|
|||
|
|
</td>
|
|||
|
|
<td className="py-3 px-4">{editingId === u.id ? (
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
defaultValue={u.login}
|
|||
|
|
onBlur={(e) => {
|
|||
|
|
const v = e.target.value.trim();
|
|||
|
|
if (v && v !== u.login) handleUpdate(u.id, { login: v });
|
|||
|
|
}}
|
|||
|
|
onKeyDown={(e) => e.key === 'Enter' && (e.target as HTMLInputElement).blur()}
|
|||
|
|
className="w-full max-w-[140px] px-2 py-1 border border-slate-200 rounded text-sm"
|
|||
|
|
/>
|
|||
|
|
) : (
|
|||
|
|
u.login
|
|||
|
|
)}</td>
|
|||
|
|
<td className="py-3 px-4">
|
|||
|
|
{editingId === u.id ? (
|
|||
|
|
<select
|
|||
|
|
defaultValue={u.role}
|
|||
|
|
onChange={(e) => {
|
|||
|
|
const r = e.target.value as UserRole;
|
|||
|
|
if (r !== u.role) handleUpdate(u.id, { role: r });
|
|||
|
|
setEditingId(null);
|
|||
|
|
}}
|
|||
|
|
className="px-2 py-1 border border-slate-200 rounded text-sm"
|
|||
|
|
>
|
|||
|
|
{(Object.keys(ROLE_NAMES) as UserRole[]).map((r) => (
|
|||
|
|
<option key={r} value={r}>{ROLE_NAMES[r]}</option>
|
|||
|
|
))}
|
|||
|
|
</select>
|
|||
|
|
) : (
|
|||
|
|
ROLE_NAMES[u.role] || u.role
|
|||
|
|
)}
|
|||
|
|
</td>
|
|||
|
|
<td className="py-3 px-4 text-right">
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={() => openPermissionsModal(u)}
|
|||
|
|
className="p-2 text-slate-500 hover:text-primary-600"
|
|||
|
|
title="Настроить права"
|
|||
|
|
>
|
|||
|
|
<Shield className="w-4 h-4" />
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={() => setEditingId(editingId === u.id ? null : u.id)}
|
|||
|
|
className="p-2 text-slate-500 hover:text-primary-600"
|
|||
|
|
title="Изменить"
|
|||
|
|
>
|
|||
|
|
<Pencil className="w-4 h-4" />
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={() => handleDelete(u.id)}
|
|||
|
|
disabled={saving}
|
|||
|
|
className="p-2 text-slate-500 hover:text-red-600"
|
|||
|
|
title="Удалить"
|
|||
|
|
>
|
|||
|
|
<Trash2 className="w-4 h-4" />
|
|||
|
|
</button>
|
|||
|
|
</td>
|
|||
|
|
</tr>
|
|||
|
|
))
|
|||
|
|
)}
|
|||
|
|
</tbody>
|
|||
|
|
</table>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{permissionsModalUserId != null && (
|
|||
|
|
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-slate-900/80 backdrop-blur-md" onClick={() => setPermissionsModalUserId(null)}>
|
|||
|
|
<div className="bg-white rounded-2xl shadow-2xl w-full max-w-lg max-h-[90vh] overflow-y-auto p-6" onClick={(e) => e.stopPropagation()}>
|
|||
|
|
<div className="flex justify-between items-center mb-4">
|
|||
|
|
<h4 className="font-bold text-slate-800">Права доступа</h4>
|
|||
|
|
<button type="button" onClick={() => setPermissionsModalUserId(null)} className="p-2 hover:bg-slate-100 rounded-full">
|
|||
|
|
<X className="w-5 h-5 text-slate-500" />
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
<p className="text-sm text-slate-500 mb-4">Права задаются шаблоном или вручную. Роль можно подставить из шаблона. Пустой список — права по роли.</p>
|
|||
|
|
{templatesByPosition.length > 0 && currentModalUser && (
|
|||
|
|
<div className="mb-4">
|
|||
|
|
<label className="block text-xs font-bold text-slate-600 mb-2">Применить по должности</label>
|
|||
|
|
<select
|
|||
|
|
className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
|
|||
|
|
onChange={(e) => {
|
|||
|
|
const id = Number(e.target.value);
|
|||
|
|
const t = permissionTemplates.find((x) => x.id === id);
|
|||
|
|
if (t && permissionsModalUserId != null) applyTemplateToUser(permissionsModalUserId, t);
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<option value="">— Выберите шаблон по должности —</option>
|
|||
|
|
{templatesByPosition.map((t) => (
|
|||
|
|
<option key={t.id} value={t.id}>{t.forPosition} → {t.name}</option>
|
|||
|
|
))}
|
|||
|
|
</select>
|
|||
|
|
{currentModalUser && (
|
|||
|
|
<p className="text-xs text-slate-500 mt-1">Должность пользователя: {currentModalUser.employeePosition}</p>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
{permissionTemplates.length > 0 && (
|
|||
|
|
<div className="mb-4">
|
|||
|
|
<label className="block text-xs font-bold text-slate-600 mb-2">Применить шаблон</label>
|
|||
|
|
<select
|
|||
|
|
className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
|
|||
|
|
onChange={(e) => {
|
|||
|
|
const id = Number(e.target.value);
|
|||
|
|
const t = permissionTemplates.find((x) => x.id === id);
|
|||
|
|
if (t && permissionsModalUserId != null) applyTemplateToUser(permissionsModalUserId, t);
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<option value="">— Выберите шаблон —</option>
|
|||
|
|
{permissionTemplates.map((t) => (
|
|||
|
|
<option key={t.id} value={t.id}>{t.name}</option>
|
|||
|
|
))}
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
<div className="mb-4">
|
|||
|
|
<label className="block text-xs font-bold text-slate-600 mb-1">Обзор данных (дашборды)</label>
|
|||
|
|
<select
|
|||
|
|
value={userScope}
|
|||
|
|
onChange={(e) => setUserScope(e.target.value as 'all' | 'own_district')}
|
|||
|
|
className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
|
|||
|
|
>
|
|||
|
|
<option value="all">По всем участкам</option>
|
|||
|
|
<option value="own_district">Только свой участок</option>
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
<div className="mb-4">
|
|||
|
|
<label className="block text-xs font-bold text-slate-600 mb-2">Разделы и подразделы (вручную)</label>
|
|||
|
|
<div className="space-y-1 max-h-[280px] overflow-y-auto pr-2">
|
|||
|
|
{ALL_SECTION_KEYS.map((section) => {
|
|||
|
|
const subs = SECTION_SUBS[section];
|
|||
|
|
const sectionChecked = hasUserSection(section);
|
|||
|
|
return (
|
|||
|
|
<div key={section} className="rounded-lg border border-slate-200 bg-white overflow-hidden">
|
|||
|
|
<label className="flex items-center gap-2 cursor-pointer px-3 py-2 hover:bg-slate-50">
|
|||
|
|
<input
|
|||
|
|
type="checkbox"
|
|||
|
|
checked={sectionChecked}
|
|||
|
|
onChange={() => toggleUserSection(section)}
|
|||
|
|
className="sr-only"
|
|||
|
|
/>
|
|||
|
|
{sectionChecked ? (
|
|||
|
|
<CheckSquare className="w-4 h-4 text-primary-600 shrink-0" />
|
|||
|
|
) : (
|
|||
|
|
<Square className="w-4 h-4 text-slate-400 shrink-0" />
|
|||
|
|
)}
|
|||
|
|
<span className="text-sm font-medium text-slate-800">{SECTION_LABELS[section] || section}</span>
|
|||
|
|
{subs && subs.length > 0 && !sectionChecked && (
|
|||
|
|
<span className="text-xs text-slate-500">
|
|||
|
|
({subs.filter((s) => hasUserSub(section, s.id)).length} из {subs.length})
|
|||
|
|
</span>
|
|||
|
|
)}
|
|||
|
|
</label>
|
|||
|
|
{subs && subs.length > 0 && !sectionChecked && (
|
|||
|
|
<div className="pl-6 pr-3 pb-2 pt-0 space-y-2 border-t border-slate-100">
|
|||
|
|
{subs.map((sub) => (
|
|||
|
|
<div key={sub.id} className="flex items-center justify-between gap-2 py-1">
|
|||
|
|
<span className="text-xs text-slate-600">{sub.label}</span>
|
|||
|
|
<select
|
|||
|
|
value={getUserSubLevel(section, sub.id)}
|
|||
|
|
onChange={(e) => setUserSubLevel(section, sub.id, e.target.value as PermissionLevel)}
|
|||
|
|
className="text-xs border border-slate-200 rounded-lg px-2 py-1 bg-white min-w-[140px]"
|
|||
|
|
>
|
|||
|
|
<option value="none">Нет доступа</option>
|
|||
|
|
<option value="read">{PERMISSION_LEVEL_LABELS.read}</option>
|
|||
|
|
<option value="edit">{PERMISSION_LEVEL_LABELS.edit}</option>
|
|||
|
|
<option value="own">{PERMISSION_LEVEL_LABELS.own}</option>
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
})}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div className="flex gap-2">
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={saveUserPermissions}
|
|||
|
|
disabled={saving}
|
|||
|
|
className="px-4 py-2 bg-primary-600 text-white text-sm font-bold rounded-lg hover:bg-primary-700 disabled:opacity-50"
|
|||
|
|
>
|
|||
|
|
{saving ? <Loader2 className="w-4 h-4 animate-spin inline" /> : 'Сохранить'}
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={() => setPermissionsModalUserId(null)}
|
|||
|
|
className="px-4 py-2 border border-slate-200 text-slate-700 text-sm font-medium rounded-lg hover:bg-slate-50"
|
|||
|
|
>
|
|||
|
|
Отмена
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
};
|