Люди в кабине: нет исполнителя
Реакция
Дизайн-система LiftCapital
Индиго версии 1
Один акцент — индиго #3350CD: главные кнопки, ссылки, фокус, активный пункт панели, текущий этап, знак. Остальной цвет — только смысл: статусы, приоритеты, нормативы.
Статус = текст на тоне
Цвет никогда не работает один: подпись всегда рядом, точек перед подписью нет (v4.2). У цвета одно значение: красный — критично и «не работает», янтарный — ждёт внимания, индиго — в движении, зелёный — готово, серый — неактивно.
Холодный серый, плоско
Белые карточки на фоне #F4F6FA, белая панель навигации с кромкой, рамка 1px, радиус 14. Тень только у слоёв и при наведении на кликабельное. Без градиентов и цветных плиток.
Шахта как мотив
Знак, индикатор этапов и иллюстрации-чертежи. Номера и коды — Geist Mono, заголовки и цифры — Geologica, интерфейс — Golos Text.
Каркас рабочего места
Панель навигации слева и контекстная полоса сверху. Эта страница — живой образец: сузьте окно до 1024 и 768.
Панель .rail и контекстная полоса .context-bar
Layout.Sider collapsed + Menu · Layout.Header.rail.rail__item.is-active.rail__foot.context-bar[data-context-city]
Панель: белая с правой кромкой, пункт — иконка и подпись цветом текста 2, активный — подложка indigo-50 и текст indigo-700, счётчик — белый на индиго. Внизу переключатель города (меню открывается вправо; события dropdown:select и id top-city как в v1) и «Все кабинеты демо». Аватар — один, в полосе.
Полоса 52px, белая, липкая: слева роль и охват («Диспетчер · Астана» — город подставляется сам из переключателя), справа поиск, уведомления, профиль. Контент: контейнер до 1400px, поля 28 / 20 (≤ 1024) / 16 (≤ 768). Заголовок страницы — Geologica 26/32, под ним строка контекста 14px, справа 1–2 главные кнопки.
Сетка: 12 колонок, зазор 16px
Row gutter={16} + Col span.grid.col-1 … .col-12.col-md-*.col-sm-*
Автоматически: ≤ 1200px .col-2 → 4; ≤ 1024px .col-3 → 6; ≤ 768px .col-2…4 → 6, остальные → 12; ≤ 480px всё → 12. Переопределить: .col-md-N (≤ 1024), .col-sm-N (≤ 768).
Раздел страницы
Typography.Title level={4} + Flex.section.section__head.section__title.section__actions
Открытые обращения 14
обновлено 16:40Все
Заголовок раздела — Geologica 18/26, счётчик, справа подпись и ссылка. Отступ между разделами 32px.
Цвет
Только через переменные. Цвет версии 1: один акцент индиго для структуры, действия и «живого», холодная нейтраль с каплей индиго, остальной цвет — смысл. Все пары текст/фон проверены скриптом (≥ 4.5:1).
Индиго: один акцент версии 1
token.colorPrimary · colorInfo · colorLink--indigo-50 … 900--primary--accent
Индиго · OKLCH h268 · структура, действие и «живое» одним цветом (как в v1)
В v4.1 главные кнопки (--primary) и акцент (--accent) — один indigo-600, как в версии 1. Шкалы v2 --navy-* и --signal-* оставлены как алиасы на --indigo-*, чтобы старые стили не ломались; новые стили берут только смысловые токены.
Нейтраль: холодный серый с каплей индиго (v1)
colorBgLayout · colorBgContainer · colorText…--gray-0 … 950--border-strong
Тона статусов
colorInfo · colorWarning · colorError · colorSuccess--{tone}-solid-fg-bg-border
info · индиго Новое
solid #3350CDfg #273FAEbg #F3F7FFborder #C9DAFF
Новое, назначено, выставлено · текст 8.1:1
warning · янтарный Отложено
solid #F2AB19fg #855C01bg #FFF6E2border #FDD89E
Ждёт внимания: отложено, пауза, в ремонте, авария, срок подходит · текст 5.5:1
progress · псевдоним warning Пауза
solid #F2AB19fg #855C01bg #FFF6E2border #FDD89E
v4.2: оранжевого больше нет, старые классы *--progress рисуются янтарным
danger · красный Просрочен
solid #D0252Afg #B32325bg #FFF2F1border #FDCBC5
Только люди в кабине, просрочка, ошибка · 6.0:1
success · зелёный Работает
solid #1F9F58fg #17713Ebg #EAFBEEborder #B7E7C4
Выполнено, подтверждено, оплачен · 5.6:1
planned · бирюзовый Плановое ТО
solid #0E9A94fg #006D68bg #E7FAF9border #B2E5E1
Плановое ТО, события графика · 5.7:1
neutral · серый Закрыто
solid #828895fg #4E5462bg #EDEFF5border #E0E3EA
Закрыто, отменено, черновик · 6.6:1
Палитра графиков
@ant-design/charts theme / Recharts--chart-1 … 8--chart-seq-1 … 4--chart-muted--chart-grid--chart-axis
Категориальная · порядок фиксирован
Порядковая · indigo-900 → indigo-400 (приоритеты, ступени)
Обращения за октябрь по типу (пример порядковой шкалы, 1 284)
Застревание людей · 64Авария · 231Неисправность · 590Жалобы и консультации · 399
Результат валидатора навыка dataviz (validate_palette.js, светлый режим, поверхность #FFFFFF)
categorical, 8 slots (палитра v1) — ALL CHECKS PASS [PASS] Lightness band all 8 inside L 0.43–0.77 [PASS] Chroma floor all 8 ≥ 0.1 [PASS] CVD separation worst adjacent #EDA100↔#1BAF7A ΔE 9.1 (protan) [PASS] Normal-vision floor worst adjacent #E87BA4↔#EDA100 ΔE 19.6 [WARN] Contrast vs surface #1BAF7A 2.74, #EDA100 2.11, #E87BA4 2.62 → подписи или таблица обязательны slots 1–3, --pairs all — PASS (CVD ?, обычное зрение ?) ordinal indigo-900 → indigo-400 — PASS (L монотонна, ΔL ≥ 0.06, светлый конец 2.77:1, разброс тона 0°) dark, поверхность #161A21: categorical — ALL CHECKS PASS (CVD ΔE ≥ 8.4, обычное ≥ 19.3, все 8 ≥ 3:1); ordinal indigo-200 → #5577EE — PASS (светлый конец 4.37:1)
Один ряд — только --chart-1; план/факт — --chart-muted + --chart-1; на точечных графиках не больше трёх рядов. Подписи и значения — цветами текста, не цветом ряда. Между сегментами стека — зазор 2px цветом поверхности, без обводок.
Контраст ключевых пар
WCAG 2.2 AA≥ 4.5:1 текст≥ 3:1 фокус, значки
| Пара | Фон страницы | Белый | Subtle | Muted |
|---|---|---|---|---|
| Текст 1 · #151923 | 16.24 | 17.57 | 16.97 | 15.28 |
| Текст 2 · #4E5462 | 7.01 | 7.59 | 7.33 | 6.60 |
| Текст 3 · #676D7B | 4.79 | 5.18 | 5.01 | 4.51 |
| Подсказка в поле · #6C727F | — | 4.83 | 4.66 | — |
| Ссылка · #3350CD | 6.12 | 6.63 | 6.40 | 5.76 * |
| Белый на индиго / красном | 6.63 / 5.28 | |||
| Пункт панели (текст 2) на белой панели · активный (indigo-700) на indigo-50 | 7.59 · 8.12 | |||
* На --bg-muted (трек сегментов, фон наведения) ссылки не ставим. Тона статусов: текст на подложке 5.3–8.1:1, на белом 5.9–8.7:1. Полный прогон — README «Контраст».
Типографика
Три шрифта одной ссылкой Google Fonts (display=swap). Без сети — системные шрифты: страницы остаются читаемыми.
Шрифты и проверка казахских букв
token.fontFamily · fontFamilyCode--font-sans--font-display--font-mono
Golos Text
интерфейс · 400 / 500 / 600--font-sans
Обращение SR-2026-000123 назначено механику, прибытие до 17:01Әкімшілік Қазақстан Ғылым Ңұр Өмір Ұлы Үміт Һәм ІсӘкімшілік Қазақстан Ғылым Ңұр Өмір Ұлы Үміт Һәм ІсӘкімшілік Қазақстан Ғылым Ңұр Өмір Ұлы Үміт Һәм Іс
Geologica
заголовки и крупные цифры · 400 / 600--font-display
Доска обращений · 1 284 · 94,1%Әкімшілік Қазақстан Ғылым Ңұр Өмір Ұлы Үміт Һәм ІсӘкімшілік Қазақстан Ғылым Ңұр Өмір Ұлы Үміт Һәм Іс
Geist Mono
номера, коды, таймеры · 400 / 600--font-mono, .code, .mono
вместо JetBrains Mono: в ней нет 12 казахских букв
SR-2026-000123 · WO-2026-000456 · ACT-2026-0042 · INV-2026-0042 · 0:54Әкімшілік Қазақстан Ғылым Ңұр Өмір Ұлы Үміт Һәм ІсӘкімшілік Қазақстан Ғылым Ңұр Өмір Ұлы Үміт Һәм Іс
Шкала
Typography · fontSize 14 · fontSizeHeading1–5.t-hero.t-kpi.t-page.t-lead.t-section.t-card.t-caption.t-small.t-caps
Главная цифра · Geologica 44/48 · 600
.t-hero одна на экран94,1%KPI · Geologica 32/36 · 600
.stat__value .t-kpi1 284Заголовок страницы · 26/32 · 600, −0.01em
h1 .t-pageДоска обращенийАдрес в герой-карточке · 22/28
.hero__title .t-leadКабанбай батыра, 48Раздел · 18/26 · 600
h2 .t-sectionОткрытые обращенияКарточка · 15/22 · 600
h3 .t-cardНагрузка бригады «Есиль-2»Текст · Golos 14/20 · 400Механик прибыл на объект, лифт П1 остановлен. Ждём запчасть: плата управления KONE KM713160G01.
Подпись · 13/18
.t-captionДиспетчер · Астана · 24 открытых · обновлено 16:40Мелкая · 12/16
.t-smallСоздано 23 окт, 16:21 · изменено 2 мин назадШапка таблицы · 11/16 · 600, заглавные
.t-caps .table thАдрес и объектНомер и код · Mono, на 1px меньше
.code .sla__timeНаряд WO-2026-000456 · таймер Прибытие20:54Отступы, радиусы, тени, слои
Шаг 4px. Карточки 14, кнопки и поля 10, пилюли 6. Тени тёплые и только у всплывающих слоёв.
Отступы
sizeUnit 4 · padding / margin--space-*
--space-14px--space-28px--space-312px--space-416px--space-520px--space-624px--space-728px--space-832px--space-1040px--space-1248px--space-1664pxРадиусы и высоты контролов
borderRadius · controlHeight--radius-*--control-*
xs · 4 · события календаря
sm · 6 · пилюли, теги, SLA
md · 10 · кнопки, поля
lg · 14 · карточки
xl · 18 · modal
full · счётчики
Высоты: --control-sm 32 · --control-md 36 (по умолчанию) · --control-lg 44 (касание) · --control-xl 52 (главная кнопка механика). Строка таблицы 44, контекстная полоса 52, панель 76 / 60.
Тени и слои
boxShadow · boxShadowSecondary · zIndexPopupBase--shadow-*--z-*
xs
сегмент, ползунокhover
наведение на карточкуpopover
меню, подсказка, тостoverlay
drawer, modal--z-sticky- 10 · шапка таблицы
--z-topbar- 100 · полоса
--z-rail- 110 · панель
--z-dropdown- 200
--z-overlay- 300 · drawer
--z-modal- 400
--z-toast- 500
--z-tooltip- 600
Иконки
Один набор: контур 1.75 на сетке 24, показ 20px. По мотивам Lucide (MIT); лифт, эскалатор, траволатор, город, кабина и знак нарисованы заново. Новые в v2: dashboard, cabin, brand-rail.
Спрайт
@ant-design/icons → свой набор SVG<svg class="icon"><use href="#i-name"/></svg>.icon--xs/sm/md/lg/xl
Тип объекта в
.icon-tile--brand: лифт, эскалатор, траволатор
cabin — кабина шахты этапов
Кнопки
Одна главная кнопка на экран или блок. Иконка-кнопка всегда с aria-label.
Варианты, размеры, состояния
Button type / size / danger / loading / block.btn.btn--primary|secondary|ghost|danger|danger-soft|link.btn--sm|lg|xl
primary
secondary
ghost
danger
danger-soft
link
sm · 32
md · 36
lg · 44
xl · 52
disabled
disabled
.is-loading
.is-loading
.btn--icon · .icon-btn sm / md / lg
Главная кнопка механика · .btn--xl.btn--block.btn--cta + .btn__chip
Поля ввода
Подпись над полем, подсказка или ошибка под ним. Фокус: рамка и кольцо акцента.
Поле, селект, текст
Form.Item · Input · Select · Input.TextArea.field.input.select.textarea.input-icon
ЖК «Жасыл Бақ» · 3 подъезда · 4 лифта на обслуживании
Номер должен содержать 11 цифр
Задан охватом роли
Выбор и переключатели
Checkbox · Radio · Switch · Segmented.check.radio.switch.segmented
.segmented--lg (44px, касание) и .segmented--block (на всю ширину) — для механика.
Вкладки и сегменты
Вкладки переключают панели, сегменты фильтруют список. Стрелки ← → работают с клавиатуры.
Вкладки с панелями
Tabs.tabs[data-tabs].tabs__item[data-tab="id"].tab-panel#id
- Объект
- Лифт П2 · KONE MonoSpace 500
- Заявитель
- Мадина Оспанова · +7 701 234 56 78
- Связанный наряд
- WO-2026-000456 · В пути
Панель «История»: шесть событий, последнее — механик в пути.
Панель «Комментарии»: два комментария диспетчера.
Панель «Вложения»: фото кабины и аудиозапись звонка.
Сегменты как фильтр
Segmented + фильтр таблицыdata-filter-targetdata-filterdata-tags
Лифт П1 · Туран, 19
Otis Gen2 · 16 остановок
Лифт П2 · Кабанбай батыра, 48
KONE MonoSpace 500 · 12 остановок
Эскалатор Э2 · ТРЦ «Сарайшық Молл»
Schindler 9300 · подъём 5,2 м
Лифт Г1 · Сығанақ, 12
ЩЛЗ ПГ-0503 · грузовой 1000 кг
Ничего не найдено
Измените фильтр
Статусы и приоритеты
Пилюля = текст на подложке тона, без точки (v4.2). Индиго — в движении, янтарный — ждёт внимания, красный — критично и «не работает», зелёный — готово, серый — неактивно. Классы по значениям enum модели данных.
Статусы по сущностям
Tag bordered={false} / Badge status + text.pill .pill--{entity}-{status}.pill--lg
Обращение
Новое
sr-new
Назначеноsr-assigned
В работеsr-in-progress
Отложеноsr-postponed
Выполненоsr-resolved
Закрытоsr-closed
Отмененоsr-cancelled
Наряд
Запланирован
wo-planned
Назначенwo-assigned
Принятwo-accepted
В путиwo-en-route
На местеwo-on-site
В работеwo-in-progress
Паузаwo-paused
Завершёнwo-completed
Подтверждёнwo-confirmed
Отменёнwo-cancelled
Объект
asset-operating
Остановленasset-stopped
В ремонтеasset-under-repair
Выведен из эксплуатацииasset-decommissioned
Плановое ТО (визит)
Запланировано
visit-scheduled
Выполненоvisit-done
Пропущеноvisit-missed
ТО-1ТО-3ТО-6ТО-12.tag
Освидетельствование
до 14 мар 2027
insp-valid
через 28 дн.insp-dueза 90/60/30/7 дн.
Просроченоinsp-overdue
Акт
Черновик
act-draft
Выставленact-issued
Подписанact-signed
Спорныйact-disputed
Счёт
Выставлен
inv-issued
Оплаченinv-paid
Просроченinv-overdue
Договор
из модели данных
из модели данных
Черновик
contract-draft
Действуетcontract-active
Истекает через 30 дн.contract-expiring
Истёкcontract-expired
Расторгнутcontract-terminated
Учётная запись
администрирование · новое в v2
администрирование · новое в v2
Активен
user-active
Приглашёнuser-invited
Отключёнuser-disabled
Тип обращения и приоритет
Tag + иконка-сигнал.prio .prio--critical|high|medium|low|planned.prio--lg
Та же форма, что у пилюли (радиус 6), слева «сигнал» из трёх столбиков: число залитых = уровень. Critical — сплошной красный, только для людей в кабине; high — янтарный (авария); medium и low — серые (v4.2: цвет только у срочного); planned — без сигнала.
| Тип обращения | Приоритет | Реакция | Прибытие | Устранение | Класс |
|---|---|---|---|---|---|
| Застревание людей | Люди в кабине | 5 мин | 30 мин | 2 ч | prio--critical |
| Авария (объект остановлен) | Авария | 15 мин | 2 ч | 24 ч | prio--high |
| Неисправность | Неисправность | 1 ч | 24 ч | 72 ч | prio--medium |
| Жалоба | Жалоба | 4 ч | 48 ч | 5 дней | prio--low |
| Консультация | Консультация | 8 ч | — | 5 дней | prio--low |
| Плановое ТО | Плановое ТО | — | по графику | по графику | prio--planned |
Таймер норматива
Statistic.Countdown в Tag.sladata-sla="сек"data-sla-total="сек".sla--warn|overdue|met
Прибытиев норме · запас > 25 %
Прибытиепредупреждение · ≤ 25 %
Реакцияпросрочено
Устранениедлинный срок
Реакцияза 3 мин
.sla--met выполнен
Прибытие.sla--lg drawer, механик
Таймеры живые: app.js раз в секунду пересчитывает время и цвет. Без data-sla чип статичен (задайте класс и текст сами).
Наряд: индикатор этапов «шахта»
Шесть этажей. Пройденные — риски индиго, текущий — кабина индиго, будущие — цвета рамки. Принять → Выехал → Я на месте → Начать работу → Заполнить отчёт → Завершить работу. Четыре вида на одной разметке и одном setStage.
Живой пример с главной кнопкой
Steps (свой рендер) / Progress steps={6}.stage[data-stage][data-stage-root][data-stage-next]
В путиWO-2026-000456
Прибытие
Кнопка двигает этап, меняет статус и подпись, показывает тост «Отменить» на 5 с. Своя логика: событие stage:advance (отменяемое) и window.setStage(el, n). Пауза — data-stage-state="paused": кабина янтарная.
Виды и состояния
.stage.stage--lg.stage--compact.stage--verticaldata-stage-state="paused"data-stage="7"
.stage · пауза на этапе 5: кабина и риска янтарные.stage · все этапы пройдены (Завершён / Подтверждён).stage--lg · экран наряда на телефоне: этажи 36px с номером, кабина на текущем.stage--lg · завершён.stage--vertical · этап 3пауза на этапе 5
завершён
.stage--vertical — для герой-карточки механика: шахта 44 × 123px, этажи 1 → 6 снизу вверх (кабина «поднимается» по ходу работы), подпись этапа справа. В .hero--shaft шахта сама встаёт в левую колонку.
| Наряд | Этап · .stage--compact |
|---|---|
| WO-2026-000461 | |
| WO-2026-000456 | |
| WO-2026-000449 | |
| WO-2026-000437 |
Карточки, KPI, «Нужно действие»
Белые карточки, рамка 1px, радиус 14. Тень (тёплая) появляется только при наведении на кликабельную.
KPI-плитки
Card + Statistic.stat.stat__value.delta--good|bad|flat.icon-tile--{tone}
Обращений за октябрь
1 284
6,2%к сентябрю
В нормативе
94,1%
1,3 п.п.к сентябрю
Освидетельствование просрочено
3объекта
2к сентябрю ·
.stat--alertТО план / факт
142из 150
Подпись сверху 13px, цифра Geologica 32/36 пропорциональными цифрами, иконка 20px в круге bg-subtle — без цвета: плитка никогда не заливается. Критичная — только красная точка у подписи (.stat--alert). Цвет дельты = направление × «хорошо ли это». Подпись без двоеточия, период назван.
«Нужно действие»
Card + List.inbox.inbox__head.inbox__row.inbox__row--critical.inbox__icon.inbox__aside.inbox__empty
Нужно действие 4
по нормативам и событиям · 16:40Механик не принял аварийный наряд
Реакция
Работа ждёт запчасти третий день
Отложено
Завершено с пробелами: нет фото «после»
Завершён
Нужно действие
обновлено 16:40Всё под контролем
Нет обращений и нарядов, которые ждут действия.
Одна карточка-список вместо ряда одинаковых карточек. Строка: значок тона в круге 36px, заголовок 600, строка «тип · номер · адрес», справа таймер или статус и одно действие (главная кнопка — только у критичной). Критичная — красная полоса слева и заливка, как строка таблицы. ≥ 1200px — две колонки строк, уже — одна; клик по строке открывает drawer. .exceptions из v1 оставлен алиасом для неперенесённых страниц.
Карточки
Card title / extra / actions · hoverable.card.card__head.card__foot.card--interactive.card--flush.card--subtle
Нагрузка бригады
«Есиль-2» · 6 из 8 на смене
Ерлан Касымов
В пути · Кабанбай батыра, 48
Данияр Сейткали
На месте · Туран, 19
Олег Литвинов
Не на смене
открытых нарядовВся бригада
Заметки по объекту
Видны механику перед выездом
- Код домофона
- 48К2
- Ключ от машинного
- у консьержа, пост 1
- Контакт
- Гульнара, председатель ОСИ
Таблица
Липкая шапка, строка 44px, hover, выбранная строка, числа справа. Клик по строке открывает drawer.
Доска обращений
Table sticky · rowSelection · onRow.toolbar.table-wrap(--scroll).tabletr.row--critical|hightr.is-selected.num.table-foot
| Тип | Адрес и объект | Статус | Исполнитель | Норматив | |||
|---|---|---|---|---|---|---|---|
| SR-2026-000123 | Люди в кабине | Кабанбай батыра, 48ЖК «Жасыл Бақ» · под. 2 · лифт П2 |
Новое | не назначен | Реакция | 16:36 | |
| SR-2026-000121 | Авария | Туран, 19БЦ «Темір Тау» · лифт Г1 |
В работе | Данияр Сейткали | Прибытие | 16:12 | |
| SR-2026-000118 | Авария | Сарайшық, 7ТРЦ «Сарайшық Молл» · эскалатор Э2 |
В работе | Ерлан Касымов | Прибытие | 15:02 | |
| SR-2026-000117 | Неисправность | Мәңгілік Ел, 27ЖК «Северный квартал» · лифт П1 |
Новое | не назначен | Реакция | 14:48 | |
| SR-2026-000112 | Неисправность | Кенесары, 40ОСИ «Кенесары 40» · лифт П1 |
Назначено | Тимур Ахметов | Прибытие | 11:20 | |
| SR-2026-000098 | Неисправность | Сығанақ, 12ЖК «Тұлпар» · под. 1 · лифт П1 |
Отложено | Руслан Жумабаев | ждём запчасти | 20 окт | |
| SR-2026-000096 | Жалоба | Республики, 64КСК «Есиль» · лифт П3 |
Выполнено | Арман Нурланов | в норме | 19 окт | |
| SR-2026-000091 | Консультация | Улы Дала, 5/2УК «Сарыарка Сервис» · все объекты |
Закрыто | Айгерим Сапарова | в норме | 18 окт | |
Обращений нет По этому фильтру ничего не найдено. | |||||||
Показано 8 из 312 · выбрано 1
Слои
Drawer справа 560px, modal по центру, тост внизу с «Отменить», меню и подсказки. Escape и клик по фону закрывают.
Drawer, modal, toast, dropdown, tooltip
Drawer · Modal · message · Dropdown · Tooltipdata-drawer-opendata-modal-openshowToast()[data-dropdown]data-tooltip
Тост вызывается из JS: showToast('Статус: В пути', { action: 'Отменить', onAction: fn }) или атрибутом data-toast="Текст" + data-toast-action="Отменить". Живёт 5 с, наведение ставит на паузу.
Отображение данных
Аватары, бейджи, теги, описания, списки, история, комментарии, файлы, фото, прогресс, уведомления, пустые состояния, скелетон, календарь, чек-лист, оценка.
Аватары, бейджи, счётчики, теги
Avatar · Badge · Tag.avatar(--sm|lg|xl|online).badge.count.tag
24732
KONEТО-3Вне договора
Описание (паспорт объекта)
Descriptions.dl.dl--stacked
- Тип
- Лифт пассажирский
- Производитель и модель
- KONE MonoSpace 500
- Заводской номер
- KN-41782209
- Грузоподъёмность · остановок
- 630 кг · 12
- Освидетельствование
- через 28 дн. 20 ноя 2026
История и комментарии
Timeline · Comment (List).timeline__item--{tone}.comment.composer
Ерлан Касымов выехал на объект
Айгерим Сапарова назначила наряд WO-2026-000456
Ближайший механик, 1,2 км. Позвонила заявителю, в кабине двое.Обращение создано по звонку · Люди в кабине
Файлы, фото, загрузка
Upload · Image.file.photo-grid.photo__label.upload-tile
ACT-2026-0042.pdf
Реестр актов, октябрь 2026.xlsx
До
До
После
Прогресс и кольцо
Progress (line / circle).progress[style="--value:62%"].progress-row.ring
ТО подтверждено · ОСИ «Нұрлы Тау-3»18 из 20
Загрузка бригады «Есиль-2»82%
Чек-лист ТО-17 из 12
94%
Уведомления на странице
Alert.alert--success|progress|warning|danger|neutral
Плановое ТО на ноябрь сформировано
142 визита, правило «первая среда месяца, 09:00».
Договор истекает через 30 дней
ОСИ «Кенесары 40» · 2 лифта.
Неверный телефон или пароль
Пустое состояние и скелетон
Empty · Skeleton.empty.empty--compact.skeleton--text|title|circle|block
Нарядов на сегодня нет
Новые наряды появятся здесь сразу после назначения диспетчером.
Чек-лист и оценка
Checkbox.Group · Rate.checklist.check--lg.checklist__mark--ok|fail|na.rating[data-rating]
Освещение шахтыНе работает 2 светильника · фото приложено
Оцените работу
Календарь (план ТО) и легенда графика
Calendar · legend.calendar.calendar__day.is-today|is-muted|is-weekend.calendar__event--done|missed|planned|more.legend
Пн
Вт
Ср
Чт
Пт
Сб
Вс
19ТО-1 · Туран, 19
20ТО-3 · Сығанақ, 12ТО-1 · Кенесары, 40
21ТО-1 · 6 объектов
22ТО-12 · ТРЦ
23ТО-1 · Мәңгілік Ел, 27ТО-3 · Алматы, 13+2 ещё
24
25
ФактПланДоля в нормативе
Знак и иллюстрации
Стиль «чертёж»: штрих 1.5px indigo-800, заливки фон страницы и белый, один акцент — индиго (лампа, индикатор, фара). Только вход, пустые состояния и одно место у директора. Никогда в таблицах, списках и в герой-карточке механика. v3: показаны символами спрайта <svg class="illo"><use href="#illo-…"/></svg> — цвета из токенов, ночью не «засвечены»; файлы остаются.
#i-logo (assets/logo-lockup.svg), на светлом индиго, на тёмном indigo-400.img.empty__art.empty__art--display (96px, в компактном 80px).Мобильный: рамка телефона 390 × 844
Кабинет механика mobile-first. На десктопе в рамке; ?full=1 или экран ≤ 500px убирают рамку.
16:40
Мои наряды
Механик · Ерлан Касымов
Сегодня, 23 окт
3 открытых · на смене с 08:00
В путиWO-2026-000456Люди в кабине
Кабанбай батыра, 48
ЖК «Жасыл Бақ» · подъезд 2 · лифт П2
Прибытие
Плановое ТОНазначен
Мәңгілік Ел, 27
ЖК «Северный квартал» · лифт П1 · ТО-1 · до 18:00
НеисправностьЗавершён
Сығанақ, 12
ЖК «Тұлпар» · лифт П1 · ждёт подтверждения
Здесь пусто
Нарядов с таким статусом нет
WO-2026-000461
НазначенПлановое ТО
Мәңгілік Ел, 27
ЖК «Северный квартал» · подъезд 1 · лифт П1
- Объект
- Otis Gen2 · 16 остановок · 1000 кг
- Код доступа
- 2741 · машинное у консьержа
- Норматив
- по графику · до 18:00
Заметка по объекту
Скрипит дверь на 9 этаже, проверить ролики.
График
Плановых визитов больше нет
Следующий — 5 ноя, ТО-1, Туран, 19.
Объекты
Лифт П2 · Кабанбай батыра, 48
KONE MonoSpace 500
Эскалатор Э2 · Сарайшық, 7
Schindler 9300
Профиль
Рамка и экраны
.phone-stage.phone.phone__screen[data-views][data-toast-host].view[data-view]
Экраны — секции .view. Переход: data-view-open="id", назад: data-view-back, вложенный экран помнит вкладку через data-view-parent. Ссылка вида mechanic.html?full=1#m-order откроет экран сразу.
Внутри телефона modal становится листом снизу, тост поднимается над таб-баром.
Шапка, таб-бар, связь
.m-header.m-content.m-sticky-actions.tabbar__item.offline-bar.hero
Шапка 56px с названием экрана (Geologica 17), таб-бар из 4 вкладок, активная — индиго. Касание ≥ 44px, одна главная кнопка (.btn--xl.btn--cta, индиго). Индикатор этапов: в герой-карточке .hero--shaft — вертикальная шахта .stage--vertical, на экране наряда .stage--lg, в списке .stage--compact. Пустые состояния — «табло этажей». «Нет связи» — янтарная полоса под шапкой.
Адаптивность офиса
Grid.useBreakpoint
1280–1600: основной режим, панель 76px с подписями. 1200: .col-2 → 4. 1024: панель 60px с подсказками, поля 20px, .col-3 → 6, таблица прокручивается вбок. 768: панели нет, бургер в полосе, поля 16px, колонки складываются, drawer на всю ширину, формы в одну колонку.
Консьерж встретит у подъезда, ключ от машинного у него.