Урок 22. Домашнее задание: свой дашборд

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

⚡ Кратко

Собрать собственный дашборд под свою предметную область: каркас, метрики, график, таблица, оверлеи, тема и ревью по чек-листу.

Задание

Придумайте предметную область (свою, не «магазин»): библиотека, спортзал, учебный центр, автосервис, ферма. Соберите для неё дашборд:

  • каркас с сайдбаром, шапкой и мобильным меню;
  • четыре метрики, осмысленные для вашей области;
  • блок-график (можно «рыбой» из прямоугольников);
  • таблица с бейджами статусов и меню действий;
  • диалог создания записи с формой и валидацией;
  • боковая панель фильтров;
  • состояния: загрузка, пусто, ошибка;
  • фирменная тема и переключатель светлая / тёмная / системная;
  • пройденный чек-лист качества.

Подготовка окружения

npm create vite@latest my-dashboard -- --template react-ts
cd my-dashboard && npm install
npm install tailwindcss @tailwindcss/vite
npm install -D @types/node
# алиас @/ (урок 17), затем:
npx shadcn@latest init
npx shadcn@latest add button card badge input label field table tabs
npx shadcn@latest add dialog sheet dropdown-menu select switch skeleton separator avatar
npm run dev

Пошаговое решение

Шаг 1. Данные-заглушки

Начните с массива объектов в отдельном файле. Реальные данные подключите позже — сейчас важна раскладка и состояния.

📄 src/lib/mock.ts
// src/lib/mock.ts
export const metrics = [
  { label: "Активных абонементов", value: "412", delta: "6%", trend: "up" as const },
  { label: "Занятий за неделю", value: "128", delta: "3%", trend: "up" as const },
  { label: "Средняя посещаемость", value: "72%", delta: "4%", trend: "down" as const },
  { label: "Просроченных оплат", value: "9", delta: "2", trend: "down" as const },
]

Шаг 2. Каркас и навигация

Сначала «рыба»: прямоугольники вместо содержимого. Проверьте раскладку на 320, 768 и 1440 пикселях — и только потом наполняйте.

Шаг 3. Блоки

Метрики → график → таблица. Каждый блок сразу с тремя состояниями: добавьте временный переключатель loading / empty / error, чтобы их было удобно проверять.

Шаг 4. Интерактив

Меню строки, диалог создания, фильтры. После каждого — проход клавиатурой.

Шаг 5. Тема и ревью

Фирменные токены (урок 19), переключатель темы (урок 13), затем полный проход по чек-листу из раздела «Решения».

Как проверить

  • Дашборд работает на 320px и на 1440px без дефектов.
  • Вся страница проходится клавиатурой, фокус виден.
  • Тёмная тема корректна на каждом экране.
  • Есть все три состояния данных.
  • В компонентах нет жёстко заданных цветов.
  • npm run build проходит без ошибок.

Что дальше

Курс закончился, но проект — нет. Естественные продолжения:

  • подключить настоящие данные и обработку ошибок сети;
  • добавить сортировку и пагинацию в таблицу;
  • вынести компоненты в собственный реестр и переиспользовать в другом проекте (shadcn build);
  • написать тесты интерфейса, опираясь на data-slot;
  • измерить производительность и размер бандла.
Сравните размер собранного CSS с тем, что вы записали в уроке 02. Обычно он вырастает в разы меньше, чем количество экранов: новые страницы переиспользуют уже сгенерированные утилиты.