Add hotel registration flow on login page and staff users management page
LoginPage: - Toggle between login and registration mode - 2-step registration: step 1 (hotel name + legal entity: type ООО/ИП/АО/ПАО/Другое, company name, INN, KPP hidden for ИП, legal address), step 2 (first/last name, email, phone, password with strength indicator, confirm) - Step indicator dots, validation with inline errors, success screen after submit - Left panel shows benefits list when in registration mode - «Зарегистрировать отель» / «Войти» toggle links UsersPage (/users): - Staff list table: avatar with custom color, name, role badge, position, contacts, last login, active status - Roles: hotel_manager, receptionist, housekeeper, accountant, security — each with label+color - Stats cards by role (clickable to filter) - Search by name/email/position + role filter buttons - UserModal: avatar color picker, name/email/phone, role selector (6 roles), position field with quick-pick suggestions per role, password field, active toggle - Delete confirmation dialog - Sidebar: «Сотрудники» link added to Управление section Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -25,6 +25,7 @@ import { RoomServicePage } from './pages/RoomServicePage'
|
||||
import { RentalPage } from './pages/RentalPage'
|
||||
import { RoomCategoriesPage } from './pages/RoomCategoriesPage'
|
||||
import { DocumentsPage } from './pages/DocumentsPage'
|
||||
import { UsersPage } from './pages/UsersPage'
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
@@ -59,6 +60,7 @@ export default function App() {
|
||||
<Route path="/rental" element={<RentalPage />} />
|
||||
<Route path="/room-categories" element={<RoomCategoriesPage />} />
|
||||
<Route path="/documents" element={<DocumentsPage />} />
|
||||
<Route path="/users" element={<UsersPage />} />
|
||||
</Route>
|
||||
|
||||
{/* Admin routes */}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { NavLink, useNavigate } from 'react-router-dom'
|
||||
import {
|
||||
CalendarDays, BookOpen, BedDouble, Globe, Settings,
|
||||
FileText, LayoutDashboard, Building2, Users, X, Hotel, Puzzle, CalendarRange, Map, LayoutGrid,
|
||||
FileText, LayoutDashboard, Building2, Users, X, Hotel, Puzzle, CalendarRange, Map, LayoutGrid, UserCog,
|
||||
} from 'lucide-react'
|
||||
import { useAuth } from '../../contexts/AuthContext'
|
||||
import { useModules } from '../../contexts/ModulesContext'
|
||||
@@ -156,7 +156,8 @@ export function Sidebar({ open, onClose }: SidebarProps) {
|
||||
<p className="px-3 pt-3 pb-1 text-xs font-semibold text-slate-400 uppercase tracking-wider">
|
||||
Управление
|
||||
</p>
|
||||
<NavItem to="/floor-map" icon={Map} label="План этажей" onClick={onClose} />
|
||||
<NavItem to="/users" icon={UserCog} label="Сотрудники" onClick={onClose} />
|
||||
<NavItem to="/floor-map" icon={Map} label="План этажей" onClick={onClose} />
|
||||
{isModuleActive('channel-manager') && (
|
||||
<NavItem
|
||||
to="/channels"
|
||||
|
||||
@@ -1,6 +1,9 @@
|
||||
import { useState } from 'react'
|
||||
import { Navigate, useNavigate } from 'react-router-dom'
|
||||
import { Hotel, Eye, EyeOff, Sun, Moon, AlertCircle } from 'lucide-react'
|
||||
import {
|
||||
Hotel, Eye, EyeOff, Sun, Moon, AlertCircle,
|
||||
Building2, ChevronRight, ChevronLeft, CheckCircle2, User,
|
||||
} from 'lucide-react'
|
||||
import { useAuth } from '../contexts/AuthContext'
|
||||
import { useTheme } from '../contexts/ThemeContext'
|
||||
import { cn } from '../lib/utils'
|
||||
@@ -11,21 +14,26 @@ const DEMO_EMAILS = [
|
||||
'admin@hotelsync.io',
|
||||
]
|
||||
|
||||
export function LoginPage() {
|
||||
const { user, login } = useAuth()
|
||||
const { theme, toggle } = useTheme()
|
||||
const navigate = useNavigate()
|
||||
type LegalType = 'ooo' | 'ip' | 'ao' | 'pao' | 'other'
|
||||
|
||||
const [email, setEmail] = useState('')
|
||||
const LEGAL_TYPES: { id: LegalType; label: string }[] = [
|
||||
{ id: 'ooo', label: 'ООО' },
|
||||
{ id: 'ip', label: 'ИП' },
|
||||
{ id: 'ao', label: 'АО' },
|
||||
{ id: 'pao', label: 'ПАО' },
|
||||
{ id: 'other', label: 'Другое'},
|
||||
]
|
||||
|
||||
// ── Login form ─────────────────────────────────────────────────────────────────
|
||||
function LoginForm({ onSwitch }: { onSwitch: () => void }) {
|
||||
const { login } = useAuth()
|
||||
const navigate = useNavigate()
|
||||
|
||||
const [email, setEmail] = useState('')
|
||||
const [password, setPassword] = useState('')
|
||||
const [showPass, setShowPass] = useState(false)
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [error, setError] = useState('')
|
||||
|
||||
if (user) {
|
||||
if (user.role === 'super_admin') return <Navigate to="/admin" replace />
|
||||
return <Navigate to="/calendar" replace />
|
||||
}
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [error, setError] = useState('')
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
@@ -33,14 +41,438 @@ export function LoginPage() {
|
||||
setLoading(true)
|
||||
const loggedIn = await login(email, password)
|
||||
setLoading(false)
|
||||
if (!loggedIn) {
|
||||
setError('Неверный email или пароль')
|
||||
return
|
||||
}
|
||||
if (!loggedIn) { setError('Неверный email или пароль'); return }
|
||||
if (loggedIn.role === 'super_admin') navigate('/admin')
|
||||
else navigate('/calendar')
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<h2 className="text-2xl font-bold text-slate-900 dark:text-slate-100 mb-1">
|
||||
Добро пожаловать
|
||||
</h2>
|
||||
<p className="text-slate-500 dark:text-slate-400 mb-8">
|
||||
Войдите в аккаунт для доступа к панели управления
|
||||
</p>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">Email</label>
|
||||
<input
|
||||
type="email" className="input" placeholder="email@example.com"
|
||||
value={email} onChange={e => setEmail(e.target.value)} required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">Пароль</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
type={showPass ? 'text' : 'password'} className="input pr-10"
|
||||
placeholder="••••••••" value={password}
|
||||
onChange={e => setPassword(e.target.value)} required
|
||||
/>
|
||||
<button type="button" onClick={() => setShowPass(v => !v)}
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600">
|
||||
{showPass ? <EyeOff size={16} /> : <Eye size={16} />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="flex items-center gap-2 p-3 rounded-lg bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-300 text-sm">
|
||||
<AlertCircle size={15} /> {error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<button type="submit" disabled={loading} className="btn-primary w-full justify-center py-2.5">
|
||||
{loading
|
||||
? <span className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
|
||||
: 'Войти'}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
{/* Demo hint */}
|
||||
<div className="mt-5 p-3 rounded-lg bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700">
|
||||
<p className="text-xs font-medium text-slate-500 dark:text-slate-400 mb-2">
|
||||
Демо-аккаунты (пароль: <code className="bg-slate-100 dark:bg-slate-700 px-1 rounded">demo</code>):
|
||||
</p>
|
||||
<div className="flex flex-col gap-1">
|
||||
{DEMO_EMAILS.map(e => (
|
||||
<button key={e} onClick={() => { setEmail(e); setPassword('demo'); setError('') }}
|
||||
className={cn(
|
||||
'text-left text-xs px-2 py-1 rounded transition-colors',
|
||||
email === e
|
||||
? 'text-brand-700 dark:text-brand-300 bg-brand-50 dark:bg-brand-900/30 font-medium'
|
||||
: 'text-slate-500 dark:text-slate-400 hover:text-brand-600 dark:hover:text-brand-400',
|
||||
)}
|
||||
>{e}</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="mt-6 text-center text-sm text-slate-500 dark:text-slate-400">
|
||||
Нет аккаунта?{' '}
|
||||
<button onClick={onSwitch} className="text-brand-600 dark:text-brand-400 font-medium hover:underline">
|
||||
Зарегистрировать отель
|
||||
</button>
|
||||
</p>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
// ── Register form ──────────────────────────────────────────────────────────────
|
||||
function RegisterForm({ onSwitch }: { onSwitch: () => void }) {
|
||||
const [step, setStep] = useState<1 | 2 | 'done'>(1)
|
||||
|
||||
// Step 1 — Hotel + Legal entity
|
||||
const [hotelName, setHotelName] = useState('')
|
||||
const [legalType, setLegalType] = useState<LegalType>('ooo')
|
||||
const [legalName, setLegalName] = useState('')
|
||||
const [inn, setInn] = useState('')
|
||||
const [kpp, setKpp] = useState('')
|
||||
const [address, setAddress] = useState('')
|
||||
|
||||
// Step 2 — Account
|
||||
const [firstName, setFirstName] = useState('')
|
||||
const [lastName, setLastName] = useState('')
|
||||
const [email, setEmail] = useState('')
|
||||
const [phone, setPhone] = useState('')
|
||||
const [password, setPassword] = useState('')
|
||||
const [confirm, setConfirm] = useState('')
|
||||
const [showPass, setShowPass] = useState(false)
|
||||
const [showConfirm, setShowConfirm] = useState(false)
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [errors, setErrors] = useState<Record<string, string>>({})
|
||||
|
||||
const isIp = legalType === 'ip'
|
||||
|
||||
const validateStep1 = () => {
|
||||
const e: Record<string, string> = {}
|
||||
if (!hotelName.trim()) e.hotelName = 'Введите название отеля'
|
||||
if (!legalName.trim()) e.legalName = 'Введите наименование юрлица'
|
||||
if (!inn.trim()) e.inn = 'Введите ИНН'
|
||||
else if (!/^\d{10,12}$/.test(inn.replace(/\s/g, '')))
|
||||
e.inn = 'ИНН — 10 цифр (юрлицо) или 12 (ИП)'
|
||||
if (!isIp && !kpp.trim()) e.kpp = 'Введите КПП'
|
||||
setErrors(e)
|
||||
return Object.keys(e).length === 0
|
||||
}
|
||||
|
||||
const validateStep2 = () => {
|
||||
const e: Record<string, string> = {}
|
||||
if (!firstName.trim()) e.firstName = 'Введите имя'
|
||||
if (!lastName.trim()) e.lastName = 'Введите фамилию'
|
||||
if (!email.trim()) e.email = 'Введите email'
|
||||
else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) e.email = 'Некорректный email'
|
||||
if (password.length < 8) e.password = 'Минимум 8 символов'
|
||||
if (password !== confirm) e.confirm = 'Пароли не совпадают'
|
||||
setErrors(e)
|
||||
return Object.keys(e).length === 0
|
||||
}
|
||||
|
||||
const nextStep = () => {
|
||||
if (validateStep1()) setStep(2)
|
||||
}
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
if (!validateStep2()) return
|
||||
setLoading(true)
|
||||
// Simulate API call
|
||||
await new Promise(r => setTimeout(r, 1200))
|
||||
setLoading(false)
|
||||
setStep('done')
|
||||
}
|
||||
|
||||
const Field = ({
|
||||
label, error, children, hint,
|
||||
}: { label: string; error?: string; children: React.ReactNode; hint?: string }) => (
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">{label}</label>
|
||||
{children}
|
||||
{hint && !error && <p className="mt-1 text-xs text-slate-400">{hint}</p>}
|
||||
{error && (
|
||||
<p className="mt-1 text-xs text-red-600 dark:text-red-400 flex items-center gap-1">
|
||||
<AlertCircle size={11} /> {error}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
|
||||
if (step === 'done') {
|
||||
return (
|
||||
<div className="text-center py-6">
|
||||
<div className="w-16 h-16 rounded-full bg-emerald-100 dark:bg-emerald-900/40 flex items-center justify-center mx-auto mb-5">
|
||||
<CheckCircle2 size={32} className="text-emerald-600 dark:text-emerald-400" />
|
||||
</div>
|
||||
<h2 className="text-2xl font-bold text-slate-900 dark:text-slate-100 mb-2">
|
||||
Заявка отправлена!
|
||||
</h2>
|
||||
<p className="text-slate-500 dark:text-slate-400 mb-2">
|
||||
Мы получили данные отеля <span className="font-semibold text-slate-700 dark:text-slate-300">{hotelName}</span>.
|
||||
</p>
|
||||
<p className="text-sm text-slate-500 dark:text-slate-400 mb-8">
|
||||
На адрес <span className="font-medium text-slate-700 dark:text-slate-300">{email}</span> отправлено
|
||||
письмо с подтверждением. После проверки данных менеджер HotelSync активирует аккаунт в течение одного рабочего дня.
|
||||
</p>
|
||||
<button onClick={onSwitch} className="btn-primary w-full justify-center py-2.5">
|
||||
Перейти к входу
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-slate-900 dark:text-slate-100">
|
||||
{step === 1 ? 'Регистрация отеля' : 'Данные аккаунта'}
|
||||
</h2>
|
||||
<p className="text-sm text-slate-500 dark:text-slate-400 mt-0.5">Шаг {step} из 2</p>
|
||||
</div>
|
||||
{/* Step indicator */}
|
||||
<div className="flex items-center gap-1.5">
|
||||
{[1, 2].map(s => (
|
||||
<div key={s} className={cn(
|
||||
'w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold transition-all',
|
||||
step === s
|
||||
? 'bg-brand-600 text-white'
|
||||
: s < step
|
||||
? 'bg-emerald-500 text-white'
|
||||
: 'bg-slate-200 dark:bg-slate-700 text-slate-500 dark:text-slate-400',
|
||||
)}>
|
||||
{s < step ? <CheckCircle2 size={14} /> : s}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ── Step 1: Hotel + Legal entity ── */}
|
||||
{step === 1 && (
|
||||
<div className="space-y-4">
|
||||
<Field label="Название отеля *" error={errors.hotelName}>
|
||||
<input
|
||||
type="text" className={cn('input', errors.hotelName && 'border-red-400 focus:ring-red-400')}
|
||||
placeholder="Grand Palace Hotel"
|
||||
value={hotelName} onChange={e => setHotelName(e.target.value)}
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<div className="pt-1 border-t border-slate-100 dark:border-slate-700">
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<Building2 size={14} className="text-slate-500" />
|
||||
<p className="text-sm font-semibold text-slate-700 dark:text-slate-300">Юридическое лицо</p>
|
||||
</div>
|
||||
|
||||
{/* Legal type selector */}
|
||||
<div className="mb-4">
|
||||
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">
|
||||
Организационно-правовая форма *
|
||||
</label>
|
||||
<div className="flex gap-1.5 flex-wrap">
|
||||
{LEGAL_TYPES.map(lt => (
|
||||
<button
|
||||
key={lt.id}
|
||||
type="button"
|
||||
onClick={() => setLegalType(lt.id)}
|
||||
className={cn(
|
||||
'px-3 py-1.5 rounded-lg text-sm font-medium border transition-colors',
|
||||
legalType === lt.id
|
||||
? 'bg-brand-600 border-brand-600 text-white'
|
||||
: 'bg-white dark:bg-slate-700 border-slate-200 dark:border-slate-600 text-slate-700 dark:text-slate-300 hover:border-brand-400',
|
||||
)}
|
||||
>
|
||||
{lt.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<Field
|
||||
label={isIp ? 'ФИО индивидуального предпринимателя *' : 'Полное наименование организации *'}
|
||||
error={errors.legalName}
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
className={cn('input', errors.legalName && 'border-red-400 focus:ring-red-400')}
|
||||
placeholder={isIp ? 'Иванов Иван Иванович' : 'Общество с ограниченной ответственностью «Название»'}
|
||||
value={legalName} onChange={e => setLegalName(e.target.value)}
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<div className={cn('grid gap-3', isIp ? 'grid-cols-1' : 'grid-cols-2')}>
|
||||
<Field
|
||||
label="ИНН *"
|
||||
error={errors.inn}
|
||||
hint={isIp ? '12 цифр' : '10 цифр'}
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
className={cn('input font-mono', errors.inn && 'border-red-400 focus:ring-red-400')}
|
||||
placeholder={isIp ? '123456789012' : '1234567890'}
|
||||
maxLength={isIp ? 12 : 10}
|
||||
value={inn} onChange={e => setInn(e.target.value.replace(/\D/g, ''))}
|
||||
/>
|
||||
</Field>
|
||||
{!isIp && (
|
||||
<Field label="КПП *" error={errors.kpp} hint="9 цифр">
|
||||
<input
|
||||
type="text"
|
||||
className={cn('input font-mono', errors.kpp && 'border-red-400 focus:ring-red-400')}
|
||||
placeholder="123456789"
|
||||
maxLength={9}
|
||||
value={kpp} onChange={e => setKpp(e.target.value.replace(/\D/g, ''))}
|
||||
/>
|
||||
</Field>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Field label="Юридический адрес" error={errors.address}>
|
||||
<input
|
||||
type="text" className="input"
|
||||
placeholder="г. Москва, ул. Примерная, д. 1"
|
||||
value={address} onChange={e => setAddress(e.target.value)}
|
||||
/>
|
||||
</Field>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button type="button" onClick={nextStep} className="btn-primary w-full justify-center py-2.5 mt-2">
|
||||
Далее
|
||||
<ChevronRight size={16} />
|
||||
</button>
|
||||
|
||||
<p className="text-center text-sm text-slate-500 dark:text-slate-400">
|
||||
Уже есть аккаунт?{' '}
|
||||
<button onClick={onSwitch} className="text-brand-600 dark:text-brand-400 font-medium hover:underline">
|
||||
Войти
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── Step 2: Account ── */}
|
||||
{step === 2 && (
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<Field label="Имя *" error={errors.firstName}>
|
||||
<input
|
||||
type="text"
|
||||
className={cn('input', errors.firstName && 'border-red-400 focus:ring-red-400')}
|
||||
placeholder="Иван"
|
||||
value={firstName} onChange={e => setFirstName(e.target.value)}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Фамилия *" error={errors.lastName}>
|
||||
<input
|
||||
type="text"
|
||||
className={cn('input', errors.lastName && 'border-red-400 focus:ring-red-400')}
|
||||
placeholder="Иванов"
|
||||
value={lastName} onChange={e => setLastName(e.target.value)}
|
||||
/>
|
||||
</Field>
|
||||
</div>
|
||||
|
||||
<Field label="Рабочий email *" error={errors.email}>
|
||||
<input
|
||||
type="email"
|
||||
className={cn('input', errors.email && 'border-red-400 focus:ring-red-400')}
|
||||
placeholder="director@myhotel.ru"
|
||||
value={email} onChange={e => setEmail(e.target.value)}
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Field label="Телефон" error={errors.phone}>
|
||||
<input
|
||||
type="tel" className="input"
|
||||
placeholder="+7 (999) 000-00-00"
|
||||
value={phone} onChange={e => setPhone(e.target.value)}
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Field label="Пароль *" error={errors.password} hint="Минимум 8 символов">
|
||||
<div className="relative">
|
||||
<input
|
||||
type={showPass ? 'text' : 'password'}
|
||||
className={cn('input pr-10', errors.password && 'border-red-400 focus:ring-red-400')}
|
||||
placeholder="••••••••"
|
||||
value={password} onChange={e => setPassword(e.target.value)}
|
||||
/>
|
||||
<button type="button" onClick={() => setShowPass(v => !v)}
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600">
|
||||
{showPass ? <EyeOff size={16} /> : <Eye size={16} />}
|
||||
</button>
|
||||
</div>
|
||||
{password && (
|
||||
<div className="mt-1.5 flex gap-1">
|
||||
{[
|
||||
password.length >= 8,
|
||||
/[A-Z]/.test(password),
|
||||
/[0-9]/.test(password),
|
||||
].map((ok, i) => (
|
||||
<div key={i} className={cn('h-1 flex-1 rounded-full transition-colors', ok ? 'bg-emerald-500' : 'bg-slate-200 dark:bg-slate-600')} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</Field>
|
||||
|
||||
<Field label="Подтверждение пароля *" error={errors.confirm}>
|
||||
<div className="relative">
|
||||
<input
|
||||
type={showConfirm ? 'text' : 'password'}
|
||||
className={cn('input pr-10', errors.confirm && 'border-red-400 focus:ring-red-400')}
|
||||
placeholder="••••••••"
|
||||
value={confirm} onChange={e => setConfirm(e.target.value)}
|
||||
/>
|
||||
<button type="button" onClick={() => setShowConfirm(v => !v)}
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600">
|
||||
{showConfirm ? <EyeOff size={16} /> : <Eye size={16} />}
|
||||
</button>
|
||||
</div>
|
||||
</Field>
|
||||
|
||||
<p className="text-xs text-slate-400 dark:text-slate-500">
|
||||
Нажимая «Создать аккаунт», вы соглашаетесь с{' '}
|
||||
<span className="text-brand-600 dark:text-brand-400 cursor-pointer hover:underline">условиями использования</span>{' '}
|
||||
и{' '}
|
||||
<span className="text-brand-600 dark:text-brand-400 cursor-pointer hover:underline">политикой конфиденциальности</span>
|
||||
</p>
|
||||
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => { setErrors({}); setStep(1) }}
|
||||
className="btn-secondary flex items-center gap-1.5"
|
||||
>
|
||||
<ChevronLeft size={16} />
|
||||
Назад
|
||||
</button>
|
||||
<button type="submit" disabled={loading} className="btn-primary flex-1 justify-center py-2.5">
|
||||
{loading
|
||||
? <span className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
|
||||
: <><User size={15} /> Создать аккаунт</>
|
||||
}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
// ── Page ───────────────────────────────────────────────────────────────────────
|
||||
export function LoginPage() {
|
||||
const { user } = useAuth()
|
||||
const { theme, toggle } = useTheme()
|
||||
const [mode, setMode] = useState<'login' | 'register'>('login')
|
||||
|
||||
if (user) {
|
||||
if (user.role === 'super_admin') return <Navigate to="/admin" replace />
|
||||
return <Navigate to="/calendar" replace />
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-brand-50 via-white to-slate-100 dark:from-slate-900 dark:via-slate-900 dark:to-brand-950 flex">
|
||||
{/* Left panel — branding */}
|
||||
@@ -63,8 +495,8 @@ export function LoginPage() {
|
||||
|
||||
<div className="mt-10 grid grid-cols-3 gap-6">
|
||||
{[
|
||||
{ value: '500+', label: 'Отелей' },
|
||||
{ value: '1M+', label: 'Бронирований' },
|
||||
{ value: '500+', label: 'Отелей' },
|
||||
{ value: '1M+', label: 'Бронирований' },
|
||||
{ value: '99.9%', label: 'Аптайм' },
|
||||
].map(s => (
|
||||
<div key={s.label}>
|
||||
@@ -73,14 +505,28 @@ export function LoginPage() {
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Registration benefits highlight */}
|
||||
{mode === 'register' && (
|
||||
<div className="mt-10 space-y-3">
|
||||
{[
|
||||
'Бесплатный период 14 дней без ввода карты',
|
||||
'Настройка за 15 минут — импорт из любой PMS',
|
||||
'Поддержка на русском языке 24/7',
|
||||
].map(b => (
|
||||
<div key={b} className="flex items-start gap-2.5">
|
||||
<CheckCircle2 size={16} className="text-brand-200 shrink-0 mt-0.5" />
|
||||
<p className="text-brand-100 text-sm">{b}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<p className="text-brand-200 text-sm">
|
||||
© 2026 HotelSync · SaaS PMS Platform
|
||||
</p>
|
||||
<p className="text-brand-200 text-sm">© 2026 HotelSync · SaaS PMS Platform</p>
|
||||
</div>
|
||||
|
||||
{/* Right panel — login form */}
|
||||
{/* Right panel */}
|
||||
<div className="flex-1 flex flex-col">
|
||||
<div className="flex justify-end p-4">
|
||||
<button onClick={toggle} className="btn-ghost p-2">
|
||||
@@ -88,7 +534,7 @@ export function LoginPage() {
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 flex items-center justify-center px-6">
|
||||
<div className="flex-1 flex items-center justify-center px-6 py-6 overflow-y-auto">
|
||||
<div className="w-full max-w-md">
|
||||
{/* Mobile logo */}
|
||||
<div className="lg:hidden flex items-center gap-2.5 mb-8">
|
||||
@@ -100,92 +546,10 @@ export function LoginPage() {
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h2 className="text-2xl font-bold text-slate-900 dark:text-slate-100 mb-1">
|
||||
Добро пожаловать
|
||||
</h2>
|
||||
<p className="text-slate-500 dark:text-slate-400 mb-8">
|
||||
Войдите в свой аккаунт для доступа к панели управления
|
||||
</p>
|
||||
|
||||
{/* Form */}
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">
|
||||
Email
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
className="input"
|
||||
placeholder="email@example.com"
|
||||
value={email}
|
||||
onChange={e => setEmail(e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">
|
||||
Пароль
|
||||
</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
type={showPass ? 'text' : 'password'}
|
||||
className="input pr-10"
|
||||
placeholder="••••••••"
|
||||
value={password}
|
||||
onChange={e => setPassword(e.target.value)}
|
||||
required
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPass(v => !v)}
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600"
|
||||
>
|
||||
{showPass ? <EyeOff size={16} /> : <Eye size={16} />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="flex items-center gap-2 p-3 rounded-lg bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-300 text-sm">
|
||||
<AlertCircle size={15} />
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="btn-primary w-full justify-center py-2.5"
|
||||
>
|
||||
{loading ? (
|
||||
<span className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
|
||||
) : 'Войти'}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
{/* Demo hint */}
|
||||
<div className="mt-6 p-3 rounded-lg bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700">
|
||||
<p className="text-xs font-medium text-slate-500 dark:text-slate-400 mb-2">
|
||||
Демо-аккаунты (пароль: <code className="bg-slate-100 dark:bg-slate-700 px-1 rounded">demo</code>):
|
||||
</p>
|
||||
<div className="flex flex-col gap-1">
|
||||
{DEMO_EMAILS.map(e => (
|
||||
<button
|
||||
key={e}
|
||||
onClick={() => { setEmail(e); setPassword('demo'); setError('') }}
|
||||
className={cn(
|
||||
'text-left text-xs px-2 py-1 rounded transition-colors',
|
||||
email === e
|
||||
? 'text-brand-700 dark:text-brand-300 bg-brand-50 dark:bg-brand-900/30 font-medium'
|
||||
: 'text-slate-500 dark:text-slate-400 hover:text-brand-600 dark:hover:text-brand-400',
|
||||
)}
|
||||
>
|
||||
{e}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
{mode === 'login'
|
||||
? <LoginForm onSwitch={() => setMode('register')} />
|
||||
: <RegisterForm onSwitch={() => setMode('login')} />
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
536
src/pages/UsersPage.tsx
Normal file
536
src/pages/UsersPage.tsx
Normal file
@@ -0,0 +1,536 @@
|
||||
import { useState } from 'react'
|
||||
import {
|
||||
Plus, Pencil, Trash2, Search, Shield, User as UserIcon,
|
||||
Sparkles, Mail, Phone, X as XIcon, Eye, EyeOff, CheckCircle2, AlertCircle,
|
||||
} from 'lucide-react'
|
||||
import { cn } from '../lib/utils'
|
||||
import { Modal } from '../components/ui/Modal'
|
||||
|
||||
// ── Types ──────────────────────────────────────────────────────────────────────
|
||||
|
||||
type StaffRole = 'hotel_manager' | 'housekeeper' | 'receptionist' | 'accountant' | 'security'
|
||||
|
||||
interface StaffUser {
|
||||
id: string
|
||||
firstName: string
|
||||
lastName: string
|
||||
email: string
|
||||
phone?: string
|
||||
role: StaffRole
|
||||
position: string // свободная должность, напр. "Старший администратор"
|
||||
isActive: boolean
|
||||
createdAt: string
|
||||
lastLogin?: string
|
||||
avatarColor: string
|
||||
}
|
||||
|
||||
// ── Constants ──────────────────────────────────────────────────────────────────
|
||||
|
||||
const ROLE_META: Record<StaffRole, { label: string; color: string; icon: React.ElementType }> = {
|
||||
hotel_manager: { label: 'Менеджер', color: 'bg-brand-100 text-brand-700 dark:bg-brand-900/30 dark:text-brand-300', icon: Shield },
|
||||
receptionist: { label: 'Ресепшн', color: 'bg-sky-100 text-sky-700 dark:bg-sky-900/30 dark:text-sky-300', icon: UserIcon },
|
||||
housekeeper: { label: 'Горничная', color: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300', icon: Sparkles },
|
||||
accountant: { label: 'Бухгалтер', color: 'bg-violet-100 text-violet-700 dark:bg-violet-900/30 dark:text-violet-300', icon: UserIcon },
|
||||
security: { label: 'Охрана', color: 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-300', icon: Shield },
|
||||
}
|
||||
|
||||
const AVATAR_COLORS = [
|
||||
'#4F46E5', '#059669', '#2563EB', '#7C3AED',
|
||||
'#DC2626', '#D97706', '#DB2777', '#0891B2',
|
||||
]
|
||||
|
||||
const DEFAULT_POSITIONS: Record<StaffRole, string[]> = {
|
||||
hotel_manager: ['Управляющий', 'Заместитель управляющего', 'Менеджер смены'],
|
||||
receptionist: ['Старший администратор', 'Администратор', 'Ночной администратор'],
|
||||
housekeeper: ['Старшая горничная', 'Горничная', 'Уборщик'],
|
||||
accountant: ['Главный бухгалтер', 'Бухгалтер', 'Финансовый менеджер'],
|
||||
security: ['Начальник охраны', 'Охранник', 'Контролёр доступа'],
|
||||
}
|
||||
|
||||
// ── Mock data ──────────────────────────────────────────────────────────────────
|
||||
|
||||
const MOCK_USERS: StaffUser[] = [
|
||||
{
|
||||
id: 'u1', firstName: 'Александр', lastName: 'Петров',
|
||||
email: 'manager@grand-palace.ru', phone: '+7 (999) 123-45-67',
|
||||
role: 'hotel_manager', position: 'Управляющий',
|
||||
isActive: true, createdAt: '2025-01-15', lastLogin: '2026-03-11',
|
||||
avatarColor: '#4F46E5',
|
||||
},
|
||||
{
|
||||
id: 'u2', firstName: 'Мария', lastName: 'Сидорова',
|
||||
email: 'reception@grand-palace.ru', phone: '+7 (999) 234-56-78',
|
||||
role: 'receptionist', position: 'Старший администратор',
|
||||
isActive: true, createdAt: '2025-03-01', lastLogin: '2026-03-10',
|
||||
avatarColor: '#059669',
|
||||
},
|
||||
{
|
||||
id: 'u3', firstName: 'Наталья', lastName: 'Козлова',
|
||||
email: 'cleaner@grand-palace.ru',
|
||||
role: 'housekeeper', position: 'Старшая горничная',
|
||||
isActive: true, createdAt: '2025-04-10', lastLogin: '2026-03-11',
|
||||
avatarColor: '#2563EB',
|
||||
},
|
||||
{
|
||||
id: 'u4', firstName: 'Дмитрий', lastName: 'Волков',
|
||||
email: 'night@grand-palace.ru', phone: '+7 (999) 345-67-89',
|
||||
role: 'receptionist', position: 'Ночной администратор',
|
||||
isActive: false, createdAt: '2025-06-20',
|
||||
avatarColor: '#7C3AED',
|
||||
},
|
||||
{
|
||||
id: 'u5', firstName: 'Елена', lastName: 'Морозова',
|
||||
email: 'accounting@grand-palace.ru',
|
||||
role: 'accountant', position: 'Главный бухгалтер',
|
||||
isActive: true, createdAt: '2025-02-01', lastLogin: '2026-03-09',
|
||||
avatarColor: '#D97706',
|
||||
},
|
||||
]
|
||||
|
||||
// ── User Modal ─────────────────────────────────────────────────────────────────
|
||||
|
||||
function UserModal({
|
||||
open, user, onClose, onSave,
|
||||
}: {
|
||||
open: boolean
|
||||
user?: StaffUser
|
||||
onClose: () => void
|
||||
onSave: (u: StaffUser) => void
|
||||
}) {
|
||||
const [form, setForm] = useState({
|
||||
firstName: user?.firstName ?? '',
|
||||
lastName: user?.lastName ?? '',
|
||||
email: user?.email ?? '',
|
||||
phone: user?.phone ?? '',
|
||||
role: (user?.role ?? 'receptionist') as StaffRole,
|
||||
position: user?.position ?? '',
|
||||
isActive: user?.isActive ?? true,
|
||||
avatarColor: user?.avatarColor ?? AVATAR_COLORS[Math.floor(Math.random() * AVATAR_COLORS.length)],
|
||||
})
|
||||
const [password, setPassword] = useState('')
|
||||
const [showPass, setShowPass] = useState(false)
|
||||
const [errors, setErrors] = useState<Record<string, string>>({})
|
||||
const isNew = !user
|
||||
|
||||
const set = <K extends keyof typeof form>(k: K, v: typeof form[K]) =>
|
||||
setForm(prev => ({ ...prev, [k]: v }))
|
||||
|
||||
const validate = () => {
|
||||
const e: Record<string, string> = {}
|
||||
if (!form.firstName.trim()) e.firstName = 'Введите имя'
|
||||
if (!form.lastName.trim()) e.lastName = 'Введите фамилию'
|
||||
if (!form.email.trim()) e.email = 'Введите email'
|
||||
if (!form.position.trim()) e.position = 'Введите должность'
|
||||
if (isNew && password.length < 6) e.password = 'Минимум 6 символов'
|
||||
setErrors(e)
|
||||
return Object.keys(e).length === 0
|
||||
}
|
||||
|
||||
const handleSave = () => {
|
||||
if (!validate()) return
|
||||
onSave({
|
||||
...form,
|
||||
id: user?.id ?? `u-${Date.now()}`,
|
||||
createdAt: user?.createdAt ?? new Date().toISOString().slice(0, 10),
|
||||
lastLogin: user?.lastLogin,
|
||||
})
|
||||
}
|
||||
|
||||
const suggestions = DEFAULT_POSITIONS[form.role]
|
||||
|
||||
return (
|
||||
<Modal
|
||||
open={open}
|
||||
onClose={onClose}
|
||||
title={isNew ? 'Новый сотрудник' : 'Редактировать сотрудника'}
|
||||
size="lg"
|
||||
footer={
|
||||
<>
|
||||
<button onClick={onClose} className="btn-secondary">Отмена</button>
|
||||
<button onClick={handleSave} className="btn-primary">
|
||||
{isNew ? 'Создать' : 'Сохранить'}
|
||||
</button>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<div className="space-y-4">
|
||||
{/* Avatar color + name */}
|
||||
<div className="flex items-center gap-4">
|
||||
<div
|
||||
className="w-14 h-14 rounded-2xl flex items-center justify-center text-white text-xl font-bold shrink-0"
|
||||
style={{ backgroundColor: form.avatarColor }}
|
||||
>
|
||||
{(form.firstName[0] ?? '?').toUpperCase()}
|
||||
</div>
|
||||
<div className="flex gap-1.5 flex-wrap">
|
||||
{AVATAR_COLORS.map(c => (
|
||||
<button
|
||||
key={c}
|
||||
type="button"
|
||||
onClick={() => set('avatarColor', c)}
|
||||
className={cn(
|
||||
'w-6 h-6 rounded-lg transition-all',
|
||||
form.avatarColor === c && 'ring-2 ring-offset-1 ring-slate-400',
|
||||
)}
|
||||
style={{ backgroundColor: c }}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">Имя *</label>
|
||||
<input type="text" className={cn('input', errors.firstName && 'border-red-400')}
|
||||
placeholder="Иван" value={form.firstName} onChange={e => set('firstName', e.target.value)} />
|
||||
{errors.firstName && <p className="mt-1 text-xs text-red-500">{errors.firstName}</p>}
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">Фамилия *</label>
|
||||
<input type="text" className={cn('input', errors.lastName && 'border-red-400')}
|
||||
placeholder="Иванов" value={form.lastName} onChange={e => set('lastName', e.target.value)} />
|
||||
{errors.lastName && <p className="mt-1 text-xs text-red-500">{errors.lastName}</p>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">Email *</label>
|
||||
<input type="email" className={cn('input', errors.email && 'border-red-400')}
|
||||
placeholder="staff@hotel.ru" value={form.email} onChange={e => set('email', e.target.value)} />
|
||||
{errors.email && <p className="mt-1 text-xs text-red-500">{errors.email}</p>}
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">Телефон</label>
|
||||
<input type="tel" className="input"
|
||||
placeholder="+7 (999) 000-00-00" value={form.phone} onChange={e => set('phone', e.target.value)} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Role */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">Роль в системе *</label>
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
{(Object.entries(ROLE_META) as [StaffRole, typeof ROLE_META[StaffRole]][]).map(([id, meta]) => (
|
||||
<button
|
||||
key={id}
|
||||
type="button"
|
||||
onClick={() => { set('role', id); set('position', '') }}
|
||||
className={cn(
|
||||
'flex items-center gap-1.5 px-2.5 py-2 rounded-lg text-xs font-medium border text-left transition-colors',
|
||||
form.role === id
|
||||
? 'bg-brand-600 border-brand-600 text-white'
|
||||
: 'bg-white dark:bg-slate-700 border-slate-200 dark:border-slate-600 text-slate-600 dark:text-slate-300 hover:border-brand-400',
|
||||
)}
|
||||
>
|
||||
<meta.icon size={12} />
|
||||
{meta.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Position */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">Должность *</label>
|
||||
<input type="text" className={cn('input mb-1.5', errors.position && 'border-red-400')}
|
||||
placeholder="Например: Старший администратор" value={form.position}
|
||||
onChange={e => set('position', e.target.value)} />
|
||||
{errors.position && <p className="mt-1 text-xs text-red-500">{errors.position}</p>}
|
||||
<div className="flex flex-wrap gap-1.5 mt-1">
|
||||
{suggestions.map(s => (
|
||||
<button
|
||||
key={s}
|
||||
type="button"
|
||||
onClick={() => set('position', s)}
|
||||
className={cn(
|
||||
'text-xs px-2 py-0.5 rounded-full border transition-colors',
|
||||
form.position === s
|
||||
? 'bg-brand-600 border-brand-600 text-white'
|
||||
: 'border-slate-200 dark:border-slate-600 text-slate-500 dark:text-slate-400 hover:border-brand-400 hover:text-brand-600',
|
||||
)}
|
||||
>
|
||||
{s}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Password */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">
|
||||
{isNew ? 'Пароль *' : 'Новый пароль (оставьте пустым, чтобы не менять)'}
|
||||
</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
type={showPass ? 'text' : 'password'}
|
||||
className={cn('input pr-10', errors.password && 'border-red-400')}
|
||||
placeholder="••••••••"
|
||||
value={password}
|
||||
onChange={e => setPassword(e.target.value)}
|
||||
/>
|
||||
<button type="button" onClick={() => setShowPass(v => !v)}
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600">
|
||||
{showPass ? <EyeOff size={16} /> : <Eye size={16} />}
|
||||
</button>
|
||||
</div>
|
||||
{errors.password && <p className="mt-1 text-xs text-red-500">{errors.password}</p>}
|
||||
</div>
|
||||
|
||||
{/* Active toggle */}
|
||||
<div className="flex items-center justify-between p-3 rounded-lg bg-slate-50 dark:bg-slate-700/40">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-slate-900 dark:text-slate-100">Активный сотрудник</p>
|
||||
<p className="text-xs text-slate-500 dark:text-slate-400">Неактивные не могут войти в систему</p>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => set('isActive', !form.isActive)}
|
||||
className={cn('relative w-11 h-6 rounded-full transition-colors', form.isActive ? 'bg-brand-600' : 'bg-slate-200 dark:bg-slate-600')}
|
||||
>
|
||||
<div className={cn('absolute top-0.5 w-5 h-5 rounded-full bg-white shadow-sm transition-transform', form.isActive ? 'left-[22px]' : 'left-0.5')} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
|
||||
// ── Page ───────────────────────────────────────────────────────────────────────
|
||||
|
||||
export function UsersPage() {
|
||||
const [users, setUsers] = useState<StaffUser[]>(MOCK_USERS)
|
||||
const [search, setSearch] = useState('')
|
||||
const [roleFilter, setRoleFilter] = useState<StaffRole | 'all'>('all')
|
||||
const [modalOpen, setModalOpen] = useState(false)
|
||||
const [editing, setEditing] = useState<StaffUser | undefined>()
|
||||
const [deleteId, setDeleteId] = useState<string | null>(null)
|
||||
|
||||
const filtered = users.filter(u => {
|
||||
const matchSearch = !search ||
|
||||
`${u.firstName} ${u.lastName}`.toLowerCase().includes(search.toLowerCase()) ||
|
||||
u.email.toLowerCase().includes(search.toLowerCase()) ||
|
||||
u.position.toLowerCase().includes(search.toLowerCase())
|
||||
const matchRole = roleFilter === 'all' || u.role === roleFilter
|
||||
return matchSearch && matchRole
|
||||
})
|
||||
|
||||
const openCreate = () => { setEditing(undefined); setModalOpen(true) }
|
||||
const openEdit = (u: StaffUser) => { setEditing(u); setModalOpen(true) }
|
||||
|
||||
const handleSave = (u: StaffUser) => {
|
||||
setUsers(prev => {
|
||||
const idx = prev.findIndex(x => x.id === u.id)
|
||||
if (idx >= 0) { const next = [...prev]; next[idx] = u; return next }
|
||||
return [...prev, u]
|
||||
})
|
||||
setModalOpen(false)
|
||||
}
|
||||
|
||||
const handleDelete = (id: string) => {
|
||||
setUsers(prev => prev.filter(u => u.id !== id))
|
||||
setDeleteId(null)
|
||||
}
|
||||
|
||||
const stats = {
|
||||
total: users.length,
|
||||
active: users.filter(u => u.isActive).length,
|
||||
managers: users.filter(u => u.role === 'hotel_manager').length,
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="p-4 md:p-6 space-y-5">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-xl font-bold text-slate-900 dark:text-slate-100">Сотрудники</h1>
|
||||
<p className="text-sm text-slate-500 dark:text-slate-400">{stats.total} пользователей · {stats.active} активных</p>
|
||||
</div>
|
||||
<button className="btn-primary" onClick={openCreate}>
|
||||
<Plus size={15} />
|
||||
<span className="hidden sm:inline">Добавить сотрудника</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Stats */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-3">
|
||||
{(Object.entries(ROLE_META) as [StaffRole, typeof ROLE_META[StaffRole]][]).map(([role, meta]) => {
|
||||
const count = users.filter(u => u.role === role).length
|
||||
return (
|
||||
<div key={role} className="card p-4 cursor-pointer hover:shadow-card-hover transition-shadow"
|
||||
onClick={() => setRoleFilter(roleFilter === role ? 'all' : role)}>
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<meta.icon size={14} className="text-slate-500 dark:text-slate-400" />
|
||||
<span className={cn('text-xs font-medium px-1.5 py-0.5 rounded-full', meta.color)}>
|
||||
{meta.label}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-2xl font-bold text-slate-900 dark:text-slate-100">{count}</p>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Filters */}
|
||||
<div className="flex gap-3 flex-wrap">
|
||||
<div className="relative flex-1 min-w-48">
|
||||
<Search size={15} className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" />
|
||||
<input type="text" className="input pl-9" placeholder="Поиск по имени, email, должности..."
|
||||
value={search} onChange={e => setSearch(e.target.value)} />
|
||||
</div>
|
||||
<div className="flex gap-1.5 flex-wrap">
|
||||
<button
|
||||
onClick={() => setRoleFilter('all')}
|
||||
className={cn('px-3 py-1.5 rounded-lg text-xs font-medium border transition-colors',
|
||||
roleFilter === 'all'
|
||||
? 'bg-brand-600 text-white border-brand-600'
|
||||
: 'bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-300 border-slate-200 dark:border-slate-600')}
|
||||
>
|
||||
Все
|
||||
</button>
|
||||
{(Object.entries(ROLE_META) as [StaffRole, typeof ROLE_META[StaffRole]][]).map(([role, meta]) => (
|
||||
<button
|
||||
key={role}
|
||||
onClick={() => setRoleFilter(roleFilter === role ? 'all' : role)}
|
||||
className={cn('px-3 py-1.5 rounded-lg text-xs font-medium border transition-colors',
|
||||
roleFilter === role
|
||||
? 'bg-brand-600 text-white border-brand-600'
|
||||
: 'bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-300 border-slate-200 dark:border-slate-600')}
|
||||
>
|
||||
{meta.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Table */}
|
||||
<div className="card overflow-hidden">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead className="bg-slate-50 dark:bg-slate-700/40 border-b border-slate-200 dark:border-slate-700">
|
||||
<tr>
|
||||
<th className="text-left text-xs font-semibold text-slate-500 dark:text-slate-400 px-4 py-3 uppercase tracking-wide">Сотрудник</th>
|
||||
<th className="text-left text-xs font-semibold text-slate-500 dark:text-slate-400 px-4 py-3 uppercase tracking-wide">Роль / Должность</th>
|
||||
<th className="text-left text-xs font-semibold text-slate-500 dark:text-slate-400 px-4 py-3 uppercase tracking-wide hidden md:table-cell">Контакты</th>
|
||||
<th className="text-left text-xs font-semibold text-slate-500 dark:text-slate-400 px-4 py-3 uppercase tracking-wide hidden lg:table-cell">Последний вход</th>
|
||||
<th className="text-left text-xs font-semibold text-slate-500 dark:text-slate-400 px-4 py-3 uppercase tracking-wide">Статус</th>
|
||||
<th className="px-4 py-3 w-20" />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-slate-100 dark:divide-slate-700">
|
||||
{filtered.map(u => {
|
||||
const meta = ROLE_META[u.role]
|
||||
return (
|
||||
<tr key={u.id} className="hover:bg-slate-50 dark:hover:bg-slate-700/30 transition-colors">
|
||||
<td className="px-4 py-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<div
|
||||
className="w-9 h-9 rounded-xl flex items-center justify-center text-white text-sm font-bold shrink-0"
|
||||
style={{ backgroundColor: u.avatarColor }}
|
||||
>
|
||||
{u.firstName[0]?.toUpperCase()}
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-slate-900 dark:text-slate-100">
|
||||
{u.lastName} {u.firstName}
|
||||
</p>
|
||||
<p className="text-xs text-slate-500 dark:text-slate-400">{u.email}</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<span className={cn('text-xs font-medium px-2 py-0.5 rounded-full', meta.color)}>
|
||||
{meta.label}
|
||||
</span>
|
||||
<p className="text-xs text-slate-500 dark:text-slate-400 mt-0.5">{u.position}</p>
|
||||
</td>
|
||||
<td className="px-4 py-3 hidden md:table-cell">
|
||||
<div className="space-y-0.5">
|
||||
<div className="flex items-center gap-1 text-xs text-slate-500 dark:text-slate-400">
|
||||
<Mail size={11} /> {u.email}
|
||||
</div>
|
||||
{u.phone && (
|
||||
<div className="flex items-center gap-1 text-xs text-slate-500 dark:text-slate-400">
|
||||
<Phone size={11} /> {u.phone}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-4 py-3 hidden lg:table-cell">
|
||||
<p className="text-xs text-slate-500 dark:text-slate-400">
|
||||
{u.lastLogin
|
||||
? new Date(u.lastLogin).toLocaleDateString('ru-RU')
|
||||
: '—'}
|
||||
</p>
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<span className={cn(
|
||||
'inline-flex items-center gap-1 text-xs font-medium px-2 py-0.5 rounded-full',
|
||||
u.isActive
|
||||
? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300'
|
||||
: 'bg-slate-100 text-slate-500 dark:bg-slate-700 dark:text-slate-400',
|
||||
)}>
|
||||
{u.isActive
|
||||
? <><CheckCircle2 size={10} /> Активен</>
|
||||
: <><AlertCircle size={10} /> Неактивен</>}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<div className="flex items-center gap-1 justify-end">
|
||||
<button
|
||||
onClick={() => openEdit(u)}
|
||||
className="p-1.5 rounded-lg text-slate-400 hover:text-brand-600 hover:bg-brand-50 dark:hover:bg-brand-900/20 transition-colors"
|
||||
>
|
||||
<Pencil size={14} />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setDeleteId(u.id)}
|
||||
className="p-1.5 rounded-lg text-slate-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors"
|
||||
>
|
||||
<Trash2 size={14} />
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
)
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{filtered.length === 0 && (
|
||||
<div className="py-12 text-center">
|
||||
<UserIcon size={32} className="mx-auto text-slate-300 dark:text-slate-600 mb-2" />
|
||||
<p className="text-slate-500 dark:text-slate-400">Сотрудники не найдены</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* User modal */}
|
||||
<UserModal
|
||||
open={modalOpen}
|
||||
user={editing}
|
||||
onClose={() => setModalOpen(false)}
|
||||
onSave={handleSave}
|
||||
/>
|
||||
|
||||
{/* Delete confirm */}
|
||||
{deleteId && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
|
||||
<div className="bg-white dark:bg-slate-800 rounded-2xl shadow-xl p-6 max-w-sm w-full">
|
||||
<h3 className="text-lg font-bold text-slate-900 dark:text-slate-100 mb-2">Удалить сотрудника?</h3>
|
||||
<p className="text-sm text-slate-500 dark:text-slate-400 mb-5">
|
||||
Сотрудник потеряет доступ к системе. Историю его действий можно будет просмотреть в журнале.
|
||||
</p>
|
||||
<div className="flex gap-3">
|
||||
<button onClick={() => setDeleteId(null)} className="btn-secondary flex-1 justify-center">Отмена</button>
|
||||
<button onClick={() => handleDelete(deleteId)} className="flex-1 justify-center py-2 px-4 rounded-xl bg-red-600 hover:bg-red-700 text-white text-sm font-medium transition-colors">
|
||||
Удалить
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user