12 KiB
12 KiB
Тестовое задание: Система управления сотрудниками
Описание задачи
Необходимо разработать с нуля полнофункциональную систему управления сотрудниками компании. Система должна позволять добавлять, редактировать, удалять сотрудников, а также управлять их расписанием и просматривать статистику.
Технический стек
- Frontend: Next.js 15+ (App Router)
- Backend: GraphQL с Apollo Server
- Database: PostgreSQL с Prisma ORM
- Styling: TailwindCSS с glassmorphism эффектами
- UI Components: Radix UI (через shadcn/ui)
- TypeScript: строгая типизация
- Icons: Lucide React
- Notifications: Sonner
Дизайн-система и стили
Цветовая схема
- Основные цвета: оттенки фиолетового (oklch(0.75 0.32 315) до oklch(0.68 0.28 280))
- Фон: тёмный градиент
bg-gradient-smooth - Карточки: стеклянный эффект
glass-card - Текст: белый и оттенки белого/серого
Glassmorphism стили
.glass-card {
background: rgba(255, 255, 255, 0.12);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow:
0 8px 32px rgba(168, 85, 247, 0.18),
0 4px 16px rgba(147, 51, 234, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.glass-card:hover {
background: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow:
0 12px 40px rgba(168, 85, 247, 0.25),
0 6px 20px rgba(147, 51, 234, 0.18);
}
Анимации
- Плавные переходы (0.3s ease)
- Hover-эффекты с изменением opacity и shadow
- Анимация появления форм
- Интерактивные элементы с transform
Структура базы данных
model Employee {
id String @id @default(cuid())
firstName String
lastName String
middleName String?
birthDate DateTime?
avatar String?
passportPhoto String?
passportSeries String?
passportNumber String?
passportIssued String?
passportDate DateTime?
address String?
position String
department String?
hireDate DateTime
salary Float?
status EmployeeStatus @default(ACTIVE)
phone String
email String?
telegram String?
whatsapp String?
emergencyContact String?
emergencyPhone String?
organizationId String
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
scheduleRecords EmployeeSchedule[]
organization Organization @relation(fields: [organizationId], references: [id])
}
model EmployeeSchedule {
id String @id @default(cuid())
date DateTime
status ScheduleStatus
hoursWorked Float?
notes String?
employeeId String
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
employee Employee @relation(fields: [employeeId], references: [id])
}
enum EmployeeStatus {
ACTIVE
VACATION
SICK
FIRED
}
enum ScheduleStatus {
WORK
WEEKEND
VACATION
SICK
ABSENT
}
Функциональные требования
1. Основная страница сотрудников (/employees)
Макет страницы:
- Sidebar слева (аналогично dashboard)
- Основной контент справа
- Поиск по ФИО, телефону, должности
- Табы: "Сотрудники", "Расписание", "Статистика"
Таб "Сотрудники":
- Карточки сотрудников в grid layout (3-4 в ряд)
- Каждая карточка содержит:
- Аватар (или инициалы, если нет фото)
- ФИО
- Должность
- Телефон
- Email (если есть)
- Статус (бейдж с цветом)
- Кнопки: "Редактировать", "Уволить"
- Кнопка "Добавить сотрудника" вверху
- Фильтры по статусу
- Пагинация при большом количестве
2. Добавление сотрудника
Inline форма (появляется как первая карточка):
- Обязательные поля:
- Имя, Фамилия
- Должность
- Дата приёма
- Телефон
- Необязательные поля:
- Отчество
- Дата рождения
- Адрес
- Оклад
- Паспортные данные
- Контакты для экстренной связи
- Telegram/WhatsApp
- Загрузка аватара
- Валидация всех полей
- Красивые маски ввода (телефон, паспорт, ЗП)
3. Редактирование сотрудника
Inline редактирование:
- Форма заменяет карточку сотрудника
- Все те же поля, что при создании
- Предзаполненные данные
- Возможность изменить статус
- Кнопки "Сохранить" / "Отмена"
4. Управление расписанием
Таб "Расписание":
- Календарь на месяц
- Выбор сотрудника из dropdown
- Отметки на каждый день:
- Работа (зелёный)
- Выходной (серый)
- Отпуск (синий)
- Больничный (жёлтый)
- Прогул (красный)
- Возможность массово отметить период
- Подсчёт отработанных часов/дней
5. Статистика
Таб "Статистика":
- Общее количество сотрудников
- Распределение по статусам
- Средний возраст
- Средняя зарплата
- График найма по месяцам
- Топ-должности
- Статистика посещаемости
GraphQL API
Queries
type Query {
employees: [Employee!]!
employee(id: ID!): Employee
employeeSchedule(employeeId: ID!, year: Int!, month: Int!): [EmployeeSchedule!]!
employeeStats: EmployeeStats!
}
Mutations
type Mutation {
createEmployee(input: CreateEmployeeInput!): CreateEmployeeResponse!
updateEmployee(id: ID!, input: UpdateEmployeeInput!): UpdateEmployeeResponse!
deleteEmployee(id: ID!): Boolean!
updateEmployeeSchedule(input: UpdateScheduleInput!): Boolean!
}
Types
type Employee {
id: ID!
firstName: String!
lastName: String!
middleName: String
birthDate: DateTime
avatar: String
position: String!
department: String
hireDate: DateTime!
salary: Float
status: EmployeeStatus!
phone: String!
email: String
telegram: String
whatsapp: String
emergencyContact: String
emergencyPhone: String
createdAt: DateTime!
updatedAt: DateTime!
scheduleRecords: [EmployeeSchedule!]!
}
Требования к реализации
1. Файловая структура
src/
├── app/
│ └── employees/
│ └── page.tsx
├── components/
│ └── employees/
│ ├── employees-dashboard.tsx
│ ├── employee-card.tsx
│ ├── employee-form.tsx
│ ├── employee-schedule.tsx
│ └── employee-stats.tsx
├── graphql/
│ ├── queries.ts
│ ├── mutations.ts
│ ├── typedefs.ts
│ └── resolvers.ts
└── lib/
├── validations.ts
└── input-masks.ts
2. Компоненты
EmployeesDashboard - основной контейнер:
- Управление состоянием
- GraphQL операции
- Переключение между табами
EmployeeCard - карточка сотрудника:
- Отображение информации
- Кнопки действий
- Анимации hover
EmployeeForm - форма создания/редактирования:
- Валидация полей
- Маски ввода
- Загрузка файлов
- Обработка ошибок
EmployeeSchedule - календарь:
- Интерактивный календарь
- Управление статусами дней
- Подсчёт статистики
3. Требования к UX/UI
Интерактивность:
- Плавные анимации при hover
- Loading состояния для всех операций
- Оптимистичные обновления
- Toast уведомления об успехе/ошибке
Адаптивность:
- Корректное отображение на мобильных устройствах
- Responsive grid для карточек
- Адаптивная форма
Доступность:
- Поддержка клавиатурной навигации
- ARIA атрибуты
- Семантическая разметка
4. Валидация
Клиентская валидация:
- Обязательные поля
- Форматы email, телефона
- Валидные даты
- Паспортные данные
Серверная валидация:
- Дублирование всех проверок
- Уникальность телефона
- Проверка существования сотрудника
5. Обработка ошибок
- Graceful обработка всех ошибок API
- Понятные сообщения пользователю
- Retry механизм для сетевых ошибок
- Fallback состояния
Дополнительные фичи (nice to have)
- Экспорт данных - выгрузка списка сотрудников в Excel/PDF
- Массовые операции - выбор нескольких сотрудников для действий
- Фильтры - по отделу, статусу, дате приёма
- Сортировка - по ФИО, дате приёма, зарплате
- История изменений - лог всех изменений сотрудника
- Интеграция с мессенджерами - отправка уведомлений
Критерии оценки
Обязательно (must have):
- ✅ Все основные функции работают
- ✅ Соответствие дизайн-системе
- ✅ Чистый и понятный код
- ✅ TypeScript без any
- ✅ Обработка ошибок
- ✅ Валидация данных
- ✅ Адаптивная вёрстка
Дополнительные баллы:
- ⭐ Оптимизация производительности
- ⭐ Тесты (unit/integration)
- ⭐ Документация API
- ⭐ Инновационные решения UX
- ⭐ Дополнительные фичи
Ресурсы
Дизайн-референсы:
- Glassmorphism: https://css.glass/
- UI Patterns: https://ui-patterns.com/
Технические ресурсы:
- Next.js App Router: https://nextjs.org/docs
- Prisma: https://www.prisma.io/docs
- Apollo GraphQL: https://www.apollographql.com/docs
- shadcn/ui: https://ui.shadcn.com/
Дедлайн
Время выполнения: 2 часа
Что предоставить:
- GitHub репозиторий с кодом
- README с инструкциями по запуску
- Демо на Vercel/Netlify (по возможности)
- Краткое описание архитектурных решений
Удачи в разработке! 🚀