Service Desk ИТ-поддержки

Веб-приложение для регистрации обращений сотрудников в отдел системного администрирования. Проект имитирует внутренний портал Service Desk: сотрудник может задать общий вопрос или описать проблему, система распознает намерение, отвечает в чате либо предлагает создать заявку через структурированную форму.

Главная идея проекта: пользователь не решает техническую проблему самостоятельно, а корректно оформляет обращение. Дальше заявка попадает в журнал, где ее можно назначить исполнителю, изменить статус, приоритет и срок выполнения.

Возможности

• Регистрация обращения через диалоговый интерфейс.
• Распознавание намерения пользователя: общий вопрос, инцидент или неясный запрос.
• Ответы на общие вопросы без создания заявки.
• Определение категории проблемы по ключевым словам.
• Создание заявки через кнопку и структурированную форму.
• SLA-опрос внутри формы перед созданием заявки.
• Автоматическое присвоение номера заявки.
• Расчет ETA по выбранному приоритету.
• Карточка текущей заявки.
• Журнал всех заявок.
• Разделение заявок на открытые, закрытые и все.
• Поиск по номеру, описанию, исполнителю, статусу и категории.
• Сортировка по дате создания, SLA, ETA и статусу.
• Редактирование статуса, приоритета, исполнителя и ETA.
• Закрытие заявки кнопкой Готово.
• Возврат закрытой заявки обратно в работу.
• Сохранение истории заявок в localStorage.
• Переключение светлой и темной темы.

Стек

• React
• TypeScript
• Vite
• Mantine UI
• Lucide React
• LocalStorage для хранения истории заявок

Backend и база данных не используются. Для демонстрационного Service Desk это удобно: проект запускается локально и не требует сервера.

Установка и запуск

Требуется Node.js 18 или новее.

На Windows, если PowerShell блокирует npm, используйте npm.cmd:

npm.cmd install
npm.cmd run dev

Обычный вариант:

npm install
npm run dev

После запуска Vite откроет локальный адрес, обычно:

http://127.0.0.1:5173

Сборка

npm.cmd run build

На Windows также можно:

npm run build

Собранные файлы появятся в папке dist.

Как работает регистрация заявки

1. Сотрудник открывает вкладку Регистрация.
2. Вводит общий вопрос или описание проблемы.
3. Система анализирует намерение пользователя.
4. Если это общий вопрос, сервис отвечает в чате и не создает заявку.
5. Если это инцидент, сервис определяет категорию и показывает кнопку Открыть форму заявки.
6. Сотрудник заполняет структурированную форму: ФИО, кабинет, инвентарный номер, категорию, SLA и описание.
7. После отправки формы создается заявка с номером, категорией, SLA, ETA и ответственной группой.
8. Заявка появляется в карточке текущего обращения и в журнале.

Распознавание намерений

Чат не считает любое сообщение заявкой. Он различает несколько типов сообщений:

Тип сообщения	Пример	Действие системы
Общий вопрос	Как проверить статус заявки?	Отвечает в чате без создания заявки
Вопрос про SLA	Что значит критический приоритет?	Объясняет правила SLA
Инцидент	Не работает монитор в кабинете 204	Распознает категорию и предлагает форму заявки
Неясный запрос	Помогите	Просит уточнить проблему

Для распознавания используются ключевые слова и простая intent recognition логика в src/data/intents.ts. Словари включают разные формулировки одной проблемы: бытовые фразы, технические термины, сокращения, названия программ, варианты вроде не работает, не запускается, нет доступа, а также часть английских слов вроде printer, network, ticket status.

SLA-логика

Ответ сотрудника	Приоритет	ETA
Нет, работа полностью остановлена	Критический	2 часа
Могу переключиться на другие задачи	Высокий	8 часов
Могу работать, но неудобно	Средний	24 часа

SLA назначается не только по типу проблемы, а по влиянию на работу сотрудника. Это ближе к реальному Service Desk: один и тот же монитор может быть критичным, если сотрудник полностью не может работать, или средним, если есть запасное рабочее место.

Категории обращений

Система распознает основные типовые обращения:

• не включается компьютер;
• не работает монитор;
• нет интернета или сети;
• не печатает принтер;
• забыли пароль или нет доступа;
• не открывается корпоративная программа;
• не работает мышь или клавиатура;
• нужна установка программного обеспечения;
• проблема с электронной почтой;
• нет доступа к общей папке.

Если категория не распознана, создается общее обращение в ИТ-поддержку.

Журнал заявок

Во вкладке Журнал заявок можно управлять всеми обращениями.

Доступные действия:

• фильтр Открытые, Закрытые, Все;
• поиск по тексту заявки;
• сортировка по новым заявкам, приоритету, ETA и статусу;
• изменение статуса;
• изменение SLA;
• назначение исполнителя;
• изменение ETA;
• закрытие заявки;
• повторное открытие закрытой заявки.

История заявок сохраняется в браузере через localStorage, поэтому после обновления страницы созданные обращения остаются в журнале.

Статусы заявок

• Создана
• Ожидает специалиста
• В работе
• Закрыта

При нажатии Готово заявка получает статус Закрыта и дату закрытия. Закрытую заявку можно вернуть в статус Ожидает специалиста.

Демонстрационные сценарии

Попробуйте ввести:

Не работает монитор

Затем выберите:

Нет, работа полностью остановлена

Результат: будет создана критическая заявка по оборудованию рабочего места.

Другие примеры:

Нет интернета в кабинете 305
Забыл пароль от учетной записи
Не печатает принтер в бухгалтерии
Не открывается 1С
Нет доступа к общей папке отдела

Структура проекта

src/
  App.tsx
  main.tsx
  styles.css
  types.ts
  components/
    Chat.tsx
    QuickActions.tsx
    RequestHistory.tsx
    TicketPanel.tsx
  data/
    faq.ts

Основные файлы:

• src/App.tsx — основная логика приложения, темы, вкладки, создание и обновление заявок.
• src/components/Chat.tsx — интерфейс регистрации обращения и выбора SLA.
• src/components/RequestHistory.tsx — журнал заявок, фильтры, сортировка и редактирование.
• src/components/TicketPanel.tsx — карточка текущей заявки.
• src/data/faq.ts — категории обращений, ключевые слова и группы исполнителей.
• src/data/intents.ts — распознавание намерений и ответы на общие вопросы.
• src/types.ts — TypeScript-типы заявок, сообщений, SLA и статусов.

Хранение данных

Проект не использует backend. Все заявки сохраняются локально в браузере:

localStorage key: service-desk-tickets

Это значит:

• данные сохраняются после обновления страницы;
• данные доступны только в текущем браузере;
• при очистке данных сайта журнал будет удален.