ALVADI admin / returns

Returns Admin UI Kit

Визуальная инвентаризация интерфейса админки возвратов: компоненты списка заявок, внутренней страницы заявки, черновика и рабочих состояний для принятия решений.

01

Foundations

Базовые токены, типографика, цвета и геометрия интерфейса.

Типографика

24 / 30 / 700Returns Admin UI Kit
20 / 24 / 700Товары к возврату
16 / 20 / 700Претензия клиента
14 / 18 / 400Основной рабочий текст, значения таблиц и подписи.

Сетка и радиусы

4 pxминимальный шаг
2 pxтаблицы и поля
4 pxкарточки
999 pxкнопки и бейджи

Цвета

Black#1A1A1A
Text#333333
Secondary#737373
Link#006DBC
Blue#0E75D0
Danger#D70A0A
Row hover#D6E6F5
Soft grid#F1F3F5
02

Icons

Пиктограммы, уже используемые в админке возвратов.

Источник

Используем Remix Icon 4.9.1, бесплатный сет. В проекте иконки заведены в styles.css как CSS-переменные --icon-* и выводятся через mask.

Calendar--icon-calendarПоля даты и временные метки
Arrow down fill--icon-arrow-downSelect и compact controls
Arrow down line--icon-arrow-down-lineРаскрывающиеся секции
Search--icon-searchПоиск и фильтры
Filter--icon-filterКнопка фильтров
Filter off--icon-filter-offСброс фильтров
Warning--icon-warning-lineОшибки и предупреждения
Sticky note--icon-sticky-noteЗаметки админа
Code--icon-codeТехнические заметки
Reply--icon-replyТовар в возврате
Arrow right--icon-arrow-rightСсылки-действия
Arrow right long--icon-arrow-right-longПереходы в рабочем флоу
External link--icon-externalВнешние переходы
Edit--icon-editРедактирование
Translate--icon-translateПеревод комментария
Question--icon-questionСправка по решению
Mail send--icon-mail-sendПисьма клиенту
Mail check--icon-mail-check-fillОтправленное письмо
PDF--icon-pdfДокументы клиента
Word--icon-wordДокументы клиента
Bill--icon-billКредитный счёт
Close fill--icon-close-largeЗакрытие modal state
Close line--icon-close-large-lineЗакрытие popover
Close circle--icon-close-circleУдаление вложения
03

Shell

Админская рамка: верхняя панель, сайдбар, переключатель демо и шрифтов.

Header

Переключить демо:
40 px высота, чёрная шапка, демо-переключатель не должен увеличивать высоту.

Sidebar

04

Filters

Панель фильтрации списка товаров к возврату.

05

Actions

Кнопки и ссылки по уровню важности.

К созданию кредитного счёта
06

Statuses

Бейджи заявок, товаров, предупреждений и служебных маркеров.

Товар

Необработан Неверно заполн. Ждём товар Одобрен Кр. счёт создан Отклонён Отменён

Заявка и контроль

Вин-код совпадает! Внимание, вин-коды не совпадают! Клиент оповещён

Предупреждение решения

Клиенту не сообщили о решении! Клиент дополнил данные 12.03.26 15:12
07

Tables

Основные рабочие таблицы: список, карточка заявки, товар и лог.

Список заявок

Заказ Заявка Подана Товар Статус товара AL-код Item Цена, EUR
6167436 267582RR6167436 08.03.26 10:12 Капот Необработан AL85739201 510203 293.55

Инфо-таблица заявки

Номер заявки267582RR6137065
Заказ3096901
Клиент Sakura Kobayashi
Заметка админа к заявкеНет

Товары в заявке

ПричинаСтатусТоварAL-код, итем, поставщик
Дефект после установкиОтклонён Резиновые полоски...AL47590218   U6093174   Motog...
08

Forms

Карточки претензии, решения админа, загрузки файлов и переводов.

Претензия клиента

Указанная причинаВозврат в течение 14 дней
Комментарий клиентаProduct did not fit.
Перевод комментария клиента
Фотографии клиента
Документы клиента

Решение админа

Решение
Фото товара
Документы
Комментарий админаОпишите решение по товару
09

Feedback

Модалки, подсказки, заметки и подтверждения опасных действий.

Confirm dialog

Demo note popover

От Леонида к дизайну

Plain text заметка для конкретного состояния демо.

10

UX patterns

Правила применения, которые стоит перенести в DesignMD.

Do

  • Показывать таблицы плотными, с 14 px текстом и горизонтальным скроллом при нехватке ширины.
  • Держать статусы товара одинаковыми на списке заявок и внутри заявки.
  • Сохранять вложенные действия рядом с контекстом: заметка под textarea, подача заявки под таблицей товаров.
  • Использовать Remix Icon как mask-icon через CSS variables.

Don't

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