01
Задача
LawyerApp — приложение для работы с договорами и историей их изменений. Его пользователю важно понимать не только содержание очередной правки, но и ответственность: кто предложил изменение, кто принимает решение и что мешает согласовать документ.
Экран должен был быстро отвечать на два вопроса: что сейчас происходит с документом и кто стоит за каждой правкой. Старая группировка по дням добавляла вложенность. Чтобы разобраться в состоянии договора, пользователю приходилось раскрывать историю и сопоставлять несколько записей.
Мне нужно было переработать представление этой информации, сохранив доступ к подробностям и истории решений. Отдельно я реализовал сценарий ведения клиентов юриста: список, добавление карточки и изменение статуса дела.
02
Решение
Вынес состояние документа в начало экрана. В сводке показаны текущая версия, открытые и закрытые правки, блокирующие вопросы, просрочка и конфликты. Пользователь сначала видит общую картину, затем переходит к конкретной строке.
Собрал правки в ровную таблицу. У каждой записи есть пункт договора, ответственный, уровень решения, статус и срок. Ответственность стала отдельной колонкой, а не подробностью внутри раскрывающегося блока. По ней можно понять, достаточно ли действия юриста или нужно согласование другого участника.
Объединил конфликтующие предложения. Две разные позиции по одному пункту показаны вместе. Пользователь видит, что перед ним вопрос для совместного решения, а не две независимые задачи. Цвет помогает выделить проблему, при этом остальные строки остаются спокойными и читаемыми.
Перенёс подробности в окно правки. По клику открываются формулировки «было / стало», аргументация и связанные сведения. Так основной список остаётся обозримым, а содержание изменения доступно в одном действии. Закрытые и отклонённые записи сохраняются в истории с менее заметным оформлением.
Добавил мини-CRM. Юрист может создать клиента, указать телефон и менять статус дела. Счётчики показывают распределение клиентов по статусам. В прототипе данные сохраняются в браузере; это позволяет проверить сценарий без отдельного сервера.
03
Результат
Подготовлен работающий интерфейс, на котором можно обсудить согласование договора: найти конфликт, открыть конкретную правку, увидеть ответственного и отличить незавершённые вопросы от истории. Мини-CRM демонстрирует отдельный путь — от добавления клиента до изменения статуса его дела.
Все данные демонстрационные. Для совместной работы потребуется серверная часть с авторизацией и общей базой.
Технологии: Next.js, React, TypeScript, Tailwind CSS.
Проект в деталях
