Next.js / React
Быстрая маршрутизация SPA и надежная архитектура одностраничного приложения.
Все проекты
Management / GovTechЯнварь 2024
SmartQuery
Frontend-система управления электронной очередью для отделений почты с динамическим пересчетом SLA-метрик.
Next.jsReactTailwind CSSWebSockets
Дашборд оператора
Окно 3
SLA: в норме
В очереди
15
Время ожидания
6 мин
Вызвать следующего
WebSockets
Real-time
Скорость обновления
В фоне
Автоматически
Контроль метрик SLA
Динамически
Мониторинг нагрузки
Мгновенно
Синхронизация с табло
Архитектура
Два ключевых компонента системы
Система состоит из двух тесно интегрированных интерфейсов для бесшовного управления потоком посетителей.
Интерфейс сотрудника
Панель Оператора
- Ключевые показатели эффективности (KPI) сотрудника
- Карточки статистики в реальном времени
- График текущей нагрузки по услугам
- Списки «Текущая очередь» и активные талоны
Клиентский интерфейс
Табло Очереди
- Отлично читаемая контрастная тема
- Пульсирующая анимация при вызове талона
- Блок «Обслуживаются» и «Ожидают»
- Информационная «бегущая строка» снизу
Event Loop
Полный цикл обработки талона
Как приложение работает и синхронизируется в реальном времени.
01
Генерация
Клиент берет талон в киоске. Бэкенд создает запись в БД (статус "waiting").
02
Синхронизация
Через активное соединение (WS/SSE) талон сразу появляется у оператора.
03
Вызов
Оператор нажимает кнопку. Статус обновляется ("in_progress").
04
Оповещение
Срабатывает Табло: номер мигает и звучит гонг для привлечения внимания.
05
Пересчет
По итогу приложение пересчитывает SLA (среднее время ожидания, нагрузка).
Технологии
Стек и база системы
Надежные инструменты для корпоративного использования и высокой реактивности.
Tailwind CSS
Гибкая верстка компонентов, корпоративный дизайн в светлых тонах с высокой контрастностью.
WebSockets / SSE
Постоянное активное соединение с сервером для получения моментальных обновлений очередей.
Интерфейс
Галерея экранов системы
Продуманные рабочие места и информационные экраны.
Панель оператора (Дашборд) со статистикой отделения и списком текущей очереди