Morty's Dashboard — React + Vite + Tailwind + shadcn/ui

Современный React-рефакторинг исходного HTML-монолита dashboard.

🎯 Фичи

Реализовано

✅ React 18 + TypeScript
✅ Vite — быстрая сборка
✅ Tailwind CSS — utility-first стили
✅ shadcn/ui компоненты — Card, Button, Badge, Dialog
✅ recharts — графики и спарклайны
✅ @tanstack/react-query — data fetching + auto-refresh (30s)
✅ lucide-react — иконки
✅ Dark/Light themes — переключатель темы
✅ Responsive design — адаптивная сетка

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

✅ System Monitor — CPU, RAM, Disk + sparkline
✅ OpenClaw Agent — Gateway, Models, Cost
✅ Piewell.com — Posts, Visitors, Status
✅ Futures Screener — Signals, Accuracy, Users

Модалки

✅ KPI Modal — детальная информация по проекту
✅ Kanban Modal — task board (todo/in-progress/done)

🚀 Запуск

Development

npm install
npm run dev

Production Build

npm run build
npm run preview  # preview production build

API Configuration

Создайте .env.local для локальной разработки:

VITE_API_BASE=http://localhost:3000/api

По умолчанию используется production API:

VITE_API_BASE=https://dashboard.szhub.space/api

📁 Структура проекта

src/
├── components/
│   ├── cards/
│   │   ├── SystemCard.tsx
│   │   ├── OpenClawCard.tsx
│   │   ├── PiewellCard.tsx
│   │   └── ScreenerCard.tsx
│   ├── modals/
│   │   ├── KpiModal.tsx
│   │   └── KanbanModal.tsx
│   ├── ui/
│   │   ├── card.tsx
│   │   ├── button.tsx
│   │   ├── badge.tsx
│   │   └── dialog.tsx
│   ├── Header.tsx
│   └── Footer.tsx
├── hooks/
│   ├── useProjects.ts
│   ├── useSystem.ts
│   └── useTheme.ts
├── lib/
│   ├── api.ts
│   └── utils.ts
├── types/
│   └── index.ts
├── App.tsx
├── main.tsx
└── index.css

🎨 Дизайн-система

Цвета (Tailwind)

Primary: #6366f1 (indigo)
Secondary: #10b981 (green)
Danger: #ef4444 (red)
Warning: #f59e0b (amber)
Piewell: #8b5cf6 (purple)
Screener: #10b981 (green)
OpenClaw: #ef4444 (red)
System: #f59e0b (amber)

Компоненты

Card — основной контейнер с glassmorphism эффектом
Button — варианты: primary, secondary, danger, ghost
Badge — статусы: success, danger, warning, info
Dialog — модальные окна с анимацией

🔧 TODO (будущие улучшения)

Drag-and-Drop (Phase 2)

@dnd-kit/sortable для перестановки карточек
Сохранение порядка в localStorage

Дополнительные карточки

Network Traffic Card — график MB/s
Task Board Card — мини-канбан на главной

Графики

Полноценные recharts графики (Line, Area, Bar)
Исторические данные (7 дней)
CPU/RAM/Disk trends

Фичи

Toast notifications (sonner)
Loading skeletons
Error boundaries
Service Worker (PWA)

📊 Метрики сборки

Бандл: ~559 KB (minified) / ~169 KB (gzip)
CSS: ~16 KB / ~4 KB (gzip)
Время сборки: ~20s

🔗 Endpoints (API)

GET /api/projects — все проекты
GET /api/projects/:id — детали проекта
GET /api/system — системные метрики
GET /api/projects/:project/kanban-tasks — задачи
POST /api/actions/restart — перезапуск сервиса

🛠️ Tech Stack

Технология	Версия	Назначение
React	18	UI framework
TypeScript	5	Type safety
Vite	7	Build tool
Tailwind CSS	3	Styling
React Query	5	Data fetching
Recharts	2	Charts
Lucide React	Latest	Icons

🎯 Отличия от оригинала

Было (HTML)	Стало (React)
3180 строк monolith HTML	Модульная архитектура
Vanilla JS	React + TypeScript
Inline CSS	Tailwind utility classes
Font Awesome	Lucide React
Manual DOM updates	React Query auto-refresh
SortableJS	@dnd-kit (TODO)

Создано: 2026-02-25
Версия: 1.0.0
Автор: Dashboard Lead (Sub-Agent)