В этом задании мы разобьём панель управления (dashboard) на независимые компоненты.
Панель управления - это сложный интерфейс с множеством различных элементов: шапка, карточки статистики, таблицы, графики. Когда всё находится в одном компоненте, код становится огромным и трудным для понимания и изменения.
В нашей панели можно выделить несколько независимых блоков:
Шапка - заголовок и меню пользователя с кнопкой выхода
Карточки статистики - отдельные блоки с числовыми показателями
Таблица заказов - таблица с сортировкой по колонкам
Бейдж статуса - цветная метка статуса заказа
Каждый блок имеет свою логику отображения и может быть выделен в компонент.
Вспомогательные функции - часто в компонентах есть функции для форматирования данных (getStatusColor, getStatusText). Эти функции можно оставить внутри компонента, который их использует, или вынести отдельно, если они нужны в нескольких местах.
Сортировка данных - это бизнес-логика, которая обычно остаётся в главном компоненте. Таблица получает уже отсортированные данные и функцию для изменения сортировки, но сама сортировка происходит выше.
Задание
Необходимо разбить монолитную админ-панель на логические компоненты. Создайте компонент DashboardHeader, который принимает userName (имя пользователя) и onLogout (функция выхода). Он отображает заголовок и меню пользователя. Создайте компонент StatCard, который принимает title (заголовок), value (значение) и change (изменение за период). Он отображает одну карточку статистики. Создайте компонент StatsGrid, который принимает stats (объект со статистикой) и отображает сетку из трёх StatCard. Создайте компонент StatusBadge, который принимает status (статус заказа) и отображает цветную метку с текстом. Внутри компонента реализуйте функции getStatusColor и getStatusText. Создайте компонент OrdersTable, который принимает orders (массив заказов), sortBy (поле сортировки), sortOrder (направление сортировки) и onSort (функция сортировки). Он отображает таблицу с заголовками, которые можно кликать для сортировки, и использует StatusBadge для статусов. В компоненте App оставьте состояние, логику сортировки, useEffect с обновлением статистики и композицию всех компонентов.
