Урок 22. Частые ошибки дашбордов

📁 Раздел: Итоговый проект ⏱️ Время изучения: ~3–4 часа 🎯 Сложность: Продвинутая

⚡ Кратко

Прокрутка всей страницы вместо контента, дублирование навигации, «стена цифр», забытые состояния данных и таблица, ломающая мобильный.

Ошибка 1. Прокручивается вся страница

Как ломается: при прокрутке уезжают и сайдбар, и шапка — на длинных списках приходится возвращаться наверх за навигацией.

✅ Прокручивается только контент

<div className="grid h-svh grid-rows-[auto_1fr] lg:grid-cols-[16rem_1fr]">
  <aside className="lg:row-span-2 overflow-y-auto">…</aside>
  <header>…</header>
  <main className="overflow-y-auto">…</main>
</div>

Обратите внимание: h-svh, а не min-h-svh — иначе внутренняя прокрутка не появится.

Ошибка 2. Две копии навигации

Как ломается: добавили пункт в десктопный сайдбар, забыли в мобильном меню — и половина пользователей не видит новый раздел.

Как правильно: один компонент навигации, который рендерится и в раскладке, и внутри Sheet. Список пунктов — один массив данных.

Ошибка 3. Стена одинаковых цифр

Как ломается: двенадцать метрик одинакового размера — глазу не за что зацепиться.

Как правильно: четыре ключевые метрики крупно, остальное — в таблицу или на вторую вкладку. Если все показатели «главные», значит, главных нет.

Ошибка 4. Забытые состояния данных

Как ломается: у нового пользователя дашборд выглядит сломанным: пустые карточки без объяснений.

Нет данных

📊

Данных пока нет

Загрузите первый отчёт, чтобы увидеть статистику

<div class="grid gap-3 sm:grid-cols-2">
  <div class="rounded-xl bg-card p-6 ring-1 ring-border">
    <p class="text-center text-sm text-muted-foreground">Нет данных</p>
  </div>
  <div class="rounded-xl bg-card p-6 text-center ring-1 ring-border">
    <p class="text-2xl">📊</p>
    <p class="mt-2 text-sm font-medium text-card-foreground">Данных пока нет</p>
    <p class="mt-1 text-xs text-muted-foreground">Загрузите первый отчёт, чтобы увидеть статистику</p>
    <button class="mt-3 inline-flex h-8 items-center justify-center rounded-lg bg-primary px-3 text-sm font-medium text-primary-foreground">Загрузить отчёт</button>
  </div>
</div>

Слева — «пусто», справа — пустое состояние, которое объясняет и предлагает действие. Разница в три строки кода и в целую пропасть по ощущениям.

Ошибка 5. Таблица без прокрутки на мобильном

Как ломается: таблица растягивает страницу, появляется горизонтальная прокрутка всего экрана, и «уезжает» даже шапка.

<div class="overflow-x-auto rounded-xl ring-1 ring-border"><table>…</table></div>

Ошибка 6. Слишком много цвета

Дашборд — инструмент, а не витрина. Цветом выделяют отклонения: просроченный заказ, падение метрики, ошибка. Если цветными сделать все строки, выделение перестанет работать.

Ошибка 7. Меню действий вместо частых кнопок

Если пользователь чаще всего нажимает «Открыть», не прячьте это действие в меню за ⋯. Частое действие — на виду, редкие — в меню.