Create complete Dashboard application with Docker, Synology, and Unifi monitoring

Co-authored-by: mblanke <9078342+mblanke@users.noreply.github.com>
2026-03-01 12:10:20 -05:00 · 2026-01-09 21:48:13 +00:00
parent e952d1f1be
commit 8b730a789a
21 changed files with 7080 additions and 1 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,8 @@
+node_modules
+dist
+build
+.env
+.env.local
+config.json
+*.log
+.DS_Store
--- a/21
+++ b/21
@@ -0,0 +1,21 @@
+FROM node:20-alpine AS frontend-build
+
+WORKDIR /app/frontend
+COPY frontend/package*.json ./
+RUN npm ci
+COPY frontend/ ./
+RUN npm run build
+
+FROM node:20-alpine
+
+WORKDIR /app
+
+COPY package*.json ./
+RUN npm ci --production
+
+COPY server.js ./
+COPY --from=frontend-build /app/frontend/dist ./frontend/dist
+
+EXPOSE 3000 3001
+
+CMD ["node", "server.js"]
--- a/README.md
+++ b/README.md
@@ -1,2 +1,214 @@
 # Dashboard
-Replacement dashboard for homarr and heimdall
+
+A fun and flashy replacement dashboard for Heimdall and Homarr. Monitor all your Docker containers, Synology NAS, and Unifi network devices in one beautiful interface.
+
+![Dashboard Screenshot](https://via.placeholder.com/800x400/1a1a2e/9d4edd?text=Dashboard+Screenshot)
+
+## ✨ Features
+
+- 🐳 **Docker Container Monitoring** - Real-time monitoring of all containers with CPU, memory, and network stats
+- 💾 **Synology NAS Integration** - Monitor your Synology NAS health and storage
+- 📡 **Unifi Network Integration** - Track all your Unifi network devices and clients
+- 🎨 **Beautiful UI** - Modern, animated interface with gradient backgrounds and smooth transitions
+- ⚡ **Real-time Updates** - Auto-refresh every 5 seconds to keep data current
+- 🎮 **Container Controls** - Start, stop, restart, pause containers with one click
+- 📊 **System Monitoring** - View host system resources and stats
+
+## 🚀 Quick Start
+
+### Prerequisites
+
+- Node.js 18+ 
+- Docker (with socket access)
+- Optional: Synology NAS, Unifi Controller
+
+### Installation
+
+1. **Clone the repository**
+   ```bash
+   git clone https://github.com/mblanke/Dashboard.git
+   cd Dashboard
+   ```
+
+2. **Install dependencies**
+   ```bash
+   npm install
+   cd frontend && npm install && cd ..
+   ```
+
+3. **Configure integrations** (optional)
+   ```bash
+   cp config.example.json config.json
+   # Edit config.json with your credentials
+   ```
+
+4. **Build the frontend**
+   ```bash
+   npm run build:frontend
+   ```
+
+5. **Start the server**
+   ```bash
+   npm start
+   ```
+
+6. **Access the dashboard**
+   - Frontend: http://localhost:3000
+   - API: http://localhost:3001
+
+## 🐳 Docker Deployment
+
+The easiest way to run the dashboard is with Docker Compose:
+
+```bash
+# Create config file
+cp config.example.json config.json
+# Edit with your credentials
+
+# Start with Docker Compose
+docker-compose up -d
+```
+
+Access at http://localhost:3000
+
+## ⚙️ Configuration
+
+Create a `config.json` file in the root directory:
+
+```json
+{
+  "synology": {
+    "host": "192.168.1.100",
+    "port": 5000,
+    "username": "your-username",
+    "password": "your-password"
+  },
+  "unifi": {
+    "host": "192.168.1.1",
+    "port": 443,
+    "username": "your-username",
+    "password": "your-password"
+  }
+}
+```
+
+**Note:** Both Synology and Unifi are optional. The dashboard will work with just Docker if you don't configure them.
+
+## 🎨 Features in Detail
+
+### Docker Container Monitoring
+
+- View all containers (running, stopped, paused)
+- Real-time CPU and memory usage with animated progress bars
+- Network traffic monitoring (RX/TX)
+- Container controls: Start, Stop, Restart, Pause, Unpause
+- Port mappings and status information
+- Beautiful state indicators with glowing effects
+
+### Synology NAS Integration
+
+- System information (model, firmware)
+- CPU and memory utilization
+- Storage capacity and usage
+- Real-time health monitoring
+
+### Unifi Network Integration
+
+- All network devices overview
+- Device status and uptime
+- Connected clients count
+- Network health status
+- IP addresses and device models
+
+## 🛠️ Development
+
+### Development Mode
+
+Run the frontend and backend separately for development:
+
+```bash
+# Terminal 1: Start backend
+npm run dev
+
+# Terminal 2: Start frontend dev server
+npm run dev:frontend
+```
+
+The frontend dev server runs on http://localhost:5173 with hot reload.
+
+### Tech Stack
+
+**Frontend:**
+- React 18
+- Vite
+- Tailwind CSS
+- Framer Motion (animations)
+- Lucide React (icons)
+- Axios
+
+**Backend:**
+- Node.js
+- Express
+- Dockerode (Docker API)
+- Axios (HTTP client)
+
+## 📋 API Endpoints
+
+### Docker
+- `GET /api/docker/containers` - List all containers with stats
+- `POST /api/docker/container/:id/:action` - Control container (start/stop/restart/pause/unpause)
+
+### Synology
+- `GET /api/synology/info` - Get NAS information and stats
+
+### Unifi
+- `GET /api/unifi/devices` - Get network devices and health status
+
+### System
+- `GET /api/system/info` - Get host system information
+- `GET /api/config` - Get configuration status
+
+## 🔒 Security Notes
+
+- The dashboard requires access to the Docker socket (`/var/run/docker.sock`)
+- Store credentials in `config.json` (never commit this file)
+- For production use, consider:
+  - Using environment variables for credentials
+  - Running behind a reverse proxy with authentication
+  - Using HTTPS for Synology and Unifi connections
+  - Limiting Docker socket permissions
+
+## 🎯 Roadmap
+
+- [ ] Custom service bookmarks
+- [ ] Dashboard themes
+- [ ] Webhook notifications
+- [ ] Multiple server support
+- [ ] Mobile responsive improvements
+- [ ] Search and filter containers
+- [ ] Container logs viewer
+- [ ] System notifications
+
+## 🤝 Contributing
+
+Contributions are welcome! Feel free to:
+- Report bugs
+- Suggest features
+- Submit pull requests
+
+## 📝 License
+
+MIT License - feel free to use this project for personal or commercial purposes.
+
+## 🙏 Acknowledgments
+
+Created as a replacement for Heimdall and Homarr with a focus on:
+- Beautiful, modern UI
+- Easy setup and configuration
+- Comprehensive monitoring capabilities
+- Fun and flashy design
+
+---
+
+**Built with ❤️ for the self-hosted community**
+
--- a/config.example.json
+++ b/config.example.json
@@ -0,0 +1,14 @@
+{
+  "synology": {
+    "host": "192.168.1.100",
+    "port": 5000,
+    "username": "your-username",
+    "password": "your-password"
+  },
+  "unifi": {
+    "host": "192.168.1.1",
+    "port": 443,
+    "username": "your-username",
+    "password": "your-password"
+  }
+}
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -0,0 +1,19 @@
+services:
+  dashboard:
+    build: .
+    container_name: dashboard
+    restart: unless-stopped
+    ports:
+      - "3000:3000"
+      - "3001:3001"
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock:ro
+      - ./config.json:/app/config.json:ro
+    environment:
+      - NODE_ENV=production
+    networks:
+      - dashboard-network
+
+networks:
+  dashboard-network:
+    driver: bridge
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -0,0 +1,16 @@
+# React + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.
--- a/frontend/eslint.config.js
+++ b/frontend/eslint.config.js
@@ -0,0 +1,29 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{js,jsx}'],
+    extends: [
+      js.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    rules: {
+      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
+    },
+  },
+])
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>frontend</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -0,0 +1,35 @@
+{
+  "name": "frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "axios": "^1.13.2",
+    "framer-motion": "^12.25.0",
+    "lucide-react": "^0.562.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@tailwindcss/postcss": "^4.1.18",
+    "@tailwindcss/vite": "^4.1.18",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "autoprefixer": "^10.4.23",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^4.0.0",
+    "vite": "^7.2.4"
+  }
+}
--- a/frontend/public/vite.svg
+++ b/frontend/public/vite.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -0,0 +1,2 @@
+/* Add minimal styles if needed */
+
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -0,0 +1,553 @@
+import { useState, useEffect } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { 
+  Activity, 
+  Server, 
+  HardDrive, 
+  Wifi, 
+  Play, 
+  Square, 
+  RotateCw,
+  Pause,
+  Container,
+  Network,
+  Cpu,
+  MemoryStick,
+  Database,
+  Router,
+  AlertCircle
+} from 'lucide-react';
+import './App.css';
+
+const API_URL = 'http://localhost:3001/api';
+
+function App() {
+  const [containers, setContainers] = useState([]);
+  const [synologyInfo, setSynologyInfo] = useState(null);
+  const [unifiInfo, setUnifiInfo] = useState(null);
+  const [systemInfo, setSystemInfo] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [activeTab, setActiveTab] = useState('docker');
+
+  useEffect(() => {
+    fetchAllData();
+    const interval = setInterval(fetchAllData, 5000);
+    return () => clearInterval(interval);
+  }, []);
+
+  const fetchAllData = async () => {
+    try {
+      const [dockerRes, synologyRes, unifiRes, systemRes] = await Promise.all([
+        fetch(`${API_URL}/docker/containers`).then(r => r.json()).catch(() => ({ success: false })),
+        fetch(`${API_URL}/synology/info`).then(r => r.json()).catch(() => ({ success: false })),
+        fetch(`${API_URL}/unifi/devices`).then(r => r.json()).catch(() => ({ success: false })),
+        fetch(`${API_URL}/system/info`).then(r => r.json()).catch(() => ({ success: false }))
+      ]);
+
+      if (dockerRes.success) setContainers(dockerRes.containers);
+      if (synologyRes.success) setSynologyInfo(synologyRes.data);
+      if (unifiRes.success) setUnifiInfo(unifiRes.data);
+      if (systemRes.success) setSystemInfo(systemRes.data);
+      
+      setLoading(false);
+    } catch (error) {
+      console.error('Error fetching data:', error);
+      setLoading(false);
+    }
+  };
+
+  const handleContainerAction = async (containerId, action) => {
+    try {
+      const response = await fetch(`${API_URL}/docker/container/${containerId}/${action}`, {
+        method: 'POST'
+      });
+      const result = await response.json();
+      if (result.success) {
+        setTimeout(fetchAllData, 1000);
+      }
+    } catch (error) {
+      console.error('Error performing action:', error);
+    }
+  };
+
+  const getStateColor = (state) => {
+    switch (state) {
+      case 'running': return 'bg-green-500';
+      case 'exited': return 'bg-red-500';
+      case 'paused': return 'bg-yellow-500';
+      default: return 'bg-gray-500';
+    }
+  };
+
+  const getStateGlow = (state) => {
+    switch (state) {
+      case 'running': return 'shadow-green-500/50';
+      case 'exited': return 'shadow-red-500/50';
+      case 'paused': return 'shadow-yellow-500/50';
+      default: return 'shadow-gray-500/50';
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="min-h-screen bg-gradient-to-br from-gray-900 via-purple-900 to-gray-900 flex items-center justify-center">
+        <motion.div
+          animate={{ rotate: 360 }}
+          transition={{ duration: 2, repeat: Infinity, ease: "linear" }}
+          className="text-purple-400"
+        >
+          <Activity size={64} />
+        </motion.div>
+      </div>
+    );
+  }
+
+  const runningContainers = containers.filter(c => c.state === 'running').length;
+  const totalContainers = containers.length;
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-gray-900 via-purple-900 to-gray-900 text-white p-6">
+      {/* Header */}
+      <motion.header
+        initial={{ y: -100, opacity: 0 }}
+        animate={{ y: 0, opacity: 1 }}
+        className="mb-8"
+      >
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-4">
+            <motion.div
+              animate={{ 
+                scale: [1, 1.1, 1],
+                rotate: [0, 5, -5, 0]
+              }}
+              transition={{ duration: 2, repeat: Infinity }}
+              className="text-purple-400"
+            >
+              <Activity size={48} />
+            </motion.div>
+            <div>
+              <h1 className="text-4xl font-bold bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent">
+                Dashboard
+              </h1>
+              <p className="text-gray-400">Container & Infrastructure Monitor</p>
+            </div>
+          </div>
+          
+          {systemInfo && (
+            <motion.div
+              initial={{ scale: 0 }}
+              animate={{ scale: 1 }}
+              className="bg-gray-800/50 backdrop-blur-sm rounded-xl p-4 border border-purple-500/20"
+            >
+              <div className="text-sm text-gray-400">System</div>
+              <div className="text-2xl font-bold">{systemInfo.hostname}</div>
+              <div className="text-xs text-gray-500">
+                CPU: {systemInfo.cpus} cores | 
+                RAM: {Math.round((systemInfo.totalMemory - systemInfo.freeMemory) / 1024 / 1024 / 1024)}GB / 
+                {Math.round(systemInfo.totalMemory / 1024 / 1024 / 1024)}GB
+              </div>
+            </motion.div>
+          )}
+        </div>
+      </motion.header>
+
+      {/* Stats Overview */}
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ delay: 0.2 }}
+        className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8"
+      >
+        <motion.div
+          whileHover={{ scale: 1.05, y: -5 }}
+          className="bg-gradient-to-br from-purple-600/20 to-purple-900/20 backdrop-blur-sm rounded-xl p-6 border border-purple-500/30 shadow-xl shadow-purple-500/20"
+        >
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-gray-400 text-sm">Docker Containers</p>
+              <p className="text-3xl font-bold">{runningContainers}/{totalContainers}</p>
+              <p className="text-green-400 text-sm">Running</p>
+            </div>
+            <Container size={48} className="text-purple-400" />
+          </div>
+        </motion.div>
+
+        <motion.div
+          whileHover={{ scale: 1.05, y: -5 }}
+          className="bg-gradient-to-br from-blue-600/20 to-blue-900/20 backdrop-blur-sm rounded-xl p-6 border border-blue-500/30 shadow-xl shadow-blue-500/20"
+        >
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-gray-400 text-sm">Synology NAS</p>
+              <p className="text-3xl font-bold">{synologyInfo ? '✓' : '✗'}</p>
+              <p className={`${synologyInfo ? 'text-green-400' : 'text-red-400'} text-sm`}>
+                {synologyInfo ? 'Connected' : 'Not Configured'}
+              </p>
+            </div>
+            <Database size={48} className="text-blue-400" />
+          </div>
+        </motion.div>
+
+        <motion.div
+          whileHover={{ scale: 1.05, y: -5 }}
+          className="bg-gradient-to-br from-cyan-600/20 to-cyan-900/20 backdrop-blur-sm rounded-xl p-6 border border-cyan-500/30 shadow-xl shadow-cyan-500/20"
+        >
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-gray-400 text-sm">Unifi Network</p>
+              <p className="text-3xl font-bold">{unifiInfo?.data?.devices?.length || 0}</p>
+              <p className={`${unifiInfo ? 'text-green-400' : 'text-red-400'} text-sm`}>
+                {unifiInfo ? 'Devices' : 'Not Configured'}
+              </p>
+            </div>
+            <Router size={48} className="text-cyan-400" />
+          </div>
+        </motion.div>
+      </motion.div>
+
+      {/* Tabs */}
+      <div className="flex gap-2 mb-6">
+        {['docker', 'synology', 'unifi'].map((tab) => (
+          <motion.button
+            key={tab}
+            whileHover={{ scale: 1.05 }}
+            whileTap={{ scale: 0.95 }}
+            onClick={() => setActiveTab(tab)}
+            className={`px-6 py-3 rounded-lg font-semibold transition-all ${
+              activeTab === tab
+                ? 'bg-purple-600 text-white shadow-lg shadow-purple-500/50'
+                : 'bg-gray-800/50 text-gray-400 hover:bg-gray-700/50'
+            }`}
+          >
+            {tab.charAt(0).toUpperCase() + tab.slice(1)}
+          </motion.button>
+        ))}
+      </div>
+
+      {/* Content */}
+      <AnimatePresence mode="wait">
+        {activeTab === 'docker' && (
+          <motion.div
+            key="docker"
+            initial={{ opacity: 0, x: -20 }}
+            animate={{ opacity: 1, x: 0 }}
+            exit={{ opacity: 0, x: 20 }}
+            className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6"
+          >
+            {containers.map((container, index) => (
+              <motion.div
+                key={container.id}
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ delay: index * 0.05 }}
+                whileHover={{ scale: 1.02, y: -5 }}
+                className={`bg-gray-800/50 backdrop-blur-sm rounded-xl p-6 border border-gray-700/50 shadow-2xl ${getStateGlow(container.state)}`}
+              >
+                <div className="flex items-start justify-between mb-4">
+                  <div className="flex-1">
+                    <div className="flex items-center gap-2 mb-2">
+                      <motion.div
+                        animate={container.state === 'running' ? { scale: [1, 1.2, 1] } : {}}
+                        transition={{ duration: 2, repeat: Infinity }}
+                        className={`w-3 h-3 rounded-full ${getStateColor(container.state)}`}
+                      />
+                      <h3 className="font-bold text-lg">{container.name}</h3>
+                    </div>
+                    <p className="text-xs text-gray-400 truncate">{container.image}</p>
+                    <p className="text-xs text-gray-500">{container.status}</p>
+                  </div>
+                </div>
+
+                {container.state === 'running' && (
+                  <div className="space-y-2 mb-4">
+                    <div className="flex items-center gap-2 text-sm">
+                      <Cpu size={16} className="text-purple-400" />
+                      <div className="flex-1 bg-gray-700 rounded-full h-2">
+                        <motion.div
+                          initial={{ width: 0 }}
+                          animate={{ width: `${Math.min(container.cpuUsage, 100)}%` }}
+                          className="bg-gradient-to-r from-purple-500 to-pink-500 h-2 rounded-full"
+                        />
+                      </div>
+                      <span className="text-xs text-gray-400">{container.cpuUsage.toFixed(1)}%</span>
+                    </div>
+
+                    <div className="flex items-center gap-2 text-sm">
+                      <MemoryStick size={16} className="text-blue-400" />
+                      <div className="flex-1 bg-gray-700 rounded-full h-2">
+                        <motion.div
+                          initial={{ width: 0 }}
+                          animate={{ width: `${Math.min(container.memoryUsage.percent, 100)}%` }}
+                          className="bg-gradient-to-r from-blue-500 to-cyan-500 h-2 rounded-full"
+                        />
+                      </div>
+                      <span className="text-xs text-gray-400">
+                        {container.memoryUsage.used}MB
+                      </span>
+                    </div>
+
+                    <div className="flex items-center gap-2 text-xs text-gray-400">
+                      <Network size={14} className="text-green-400" />
+                      <span>↓ {(container.networkRx / 1024 / 1024).toFixed(2)}MB</span>
+                      <span>↑ {(container.networkTx / 1024 / 1024).toFixed(2)}MB</span>
+                    </div>
+                  </div>
+                )}
+
+                <div className="flex gap-2">
+                  {container.state === 'running' ? (
+                    <>
+                      <motion.button
+                        whileHover={{ scale: 1.1 }}
+                        whileTap={{ scale: 0.9 }}
+                        onClick={() => handleContainerAction(container.id, 'pause')}
+                        className="flex-1 bg-yellow-600/20 hover:bg-yellow-600/30 border border-yellow-600/50 text-yellow-400 rounded-lg py-2 px-3 flex items-center justify-center gap-2 transition-all"
+                      >
+                        <Pause size={16} />
+                      </motion.button>
+                      <motion.button
+                        whileHover={{ scale: 1.1 }}
+                        whileTap={{ scale: 0.9 }}
+                        onClick={() => handleContainerAction(container.id, 'restart')}
+                        className="flex-1 bg-blue-600/20 hover:bg-blue-600/30 border border-blue-600/50 text-blue-400 rounded-lg py-2 px-3 flex items-center justify-center gap-2 transition-all"
+                      >
+                        <RotateCw size={16} />
+                      </motion.button>
+                      <motion.button
+                        whileHover={{ scale: 1.1 }}
+                        whileTap={{ scale: 0.9 }}
+                        onClick={() => handleContainerAction(container.id, 'stop')}
+                        className="flex-1 bg-red-600/20 hover:bg-red-600/30 border border-red-600/50 text-red-400 rounded-lg py-2 px-3 flex items-center justify-center gap-2 transition-all"
+                      >
+                        <Square size={16} />
+                      </motion.button>
+                    </>
+                  ) : container.state === 'paused' ? (
+                    <motion.button
+                      whileHover={{ scale: 1.05 }}
+                      whileTap={{ scale: 0.95 }}
+                      onClick={() => handleContainerAction(container.id, 'unpause')}
+                      className="w-full bg-green-600/20 hover:bg-green-600/30 border border-green-600/50 text-green-400 rounded-lg py-2 px-3 flex items-center justify-center gap-2 transition-all"
+                    >
+                      <Play size={16} />
+                      Unpause
+                    </motion.button>
+                  ) : (
+                    <motion.button
+                      whileHover={{ scale: 1.05 }}
+                      whileTap={{ scale: 0.95 }}
+                      onClick={() => handleContainerAction(container.id, 'start')}
+                      className="w-full bg-green-600/20 hover:bg-green-600/30 border border-green-600/50 text-green-400 rounded-lg py-2 px-3 flex items-center justify-center gap-2 transition-all"
+                    >
+                      <Play size={16} />
+                      Start
+                    </motion.button>
+                  )}
+                </div>
+              </motion.div>
+            ))}
+          </motion.div>
+        )}
+
+        {activeTab === 'synology' && (
+          <motion.div
+            key="synology"
+            initial={{ opacity: 0, x: -20 }}
+            animate={{ opacity: 1, x: 0 }}
+            exit={{ opacity: 0, x: 20 }}
+          >
+            {synologyInfo ? (
+              <div className="bg-gray-800/50 backdrop-blur-sm rounded-xl p-8 border border-blue-500/30 shadow-2xl">
+                <div className="flex items-center gap-4 mb-6">
+                  <Database size={48} className="text-blue-400" />
+                  <div>
+                    <h2 className="text-2xl font-bold">Synology NAS</h2>
+                    <p className="text-gray-400">{synologyInfo.host}</p>
+                  </div>
+                </div>
+                
+                {synologyInfo.system && (
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <div className="bg-gray-700/30 rounded-lg p-4">
+                      <p className="text-gray-400 text-sm">Model</p>
+                      <p className="text-xl font-bold">{synologyInfo.system.model || 'N/A'}</p>
+                    </div>
+                    <div className="bg-gray-700/30 rounded-lg p-4">
+                      <p className="text-gray-400 text-sm">Firmware</p>
+                      <p className="text-xl font-bold">{synologyInfo.system.firmware_ver || 'N/A'}</p>
+                    </div>
+                  </div>
+                )}
+                
+                {synologyInfo.utilization && (
+                  <div className="mt-6">
+                    <h3 className="text-lg font-semibold mb-4">System Utilization</h3>
+                    <div className="space-y-3">
+                      {synologyInfo.utilization.cpu && (
+                        <div>
+                          <div className="flex justify-between text-sm mb-1">
+                            <span>CPU Usage</span>
+                            <span>{synologyInfo.utilization.cpu.user_load || 0}%</span>
+                          </div>
+                          <div className="bg-gray-700 rounded-full h-3">
+                            <motion.div
+                              initial={{ width: 0 }}
+                              animate={{ width: `${synologyInfo.utilization.cpu.user_load || 0}%` }}
+                              className="bg-gradient-to-r from-blue-500 to-cyan-500 h-3 rounded-full"
+                            />
+                          </div>
+                        </div>
+                      )}
+                      
+                      {synologyInfo.utilization.memory && (
+                        <div>
+                          <div className="flex justify-between text-sm mb-1">
+                            <span>Memory Usage</span>
+                            <span>{Math.round((synologyInfo.utilization.memory.real_usage || 0))}%</span>
+                          </div>
+                          <div className="bg-gray-700 rounded-full h-3">
+                            <motion.div
+                              initial={{ width: 0 }}
+                              animate={{ width: `${synologyInfo.utilization.memory.real_usage || 0}%` }}
+                              className="bg-gradient-to-r from-purple-500 to-pink-500 h-3 rounded-full"
+                            />
+                          </div>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                )}
+              </div>
+            ) : (
+              <motion.div
+                initial={{ scale: 0.9 }}
+                animate={{ scale: 1 }}
+                className="bg-gray-800/50 backdrop-blur-sm rounded-xl p-12 border border-yellow-500/30 text-center"
+              >
+                <AlertCircle size={64} className="text-yellow-400 mx-auto mb-4" />
+                <h3 className="text-2xl font-bold mb-2">Synology Not Configured</h3>
+                <p className="text-gray-400 mb-4">
+                  Add your Synology NAS credentials to config.json to enable monitoring
+                </p>
+                <pre className="bg-gray-900/50 rounded-lg p-4 text-left text-sm text-gray-300 overflow-x-auto">
+{`{
+  "synology": {
+    "host": "192.168.1.100",
+    "port": 5000,
+    "username": "your-username",
+    "password": "your-password"
+  }
+}`}
+                </pre>
+              </motion.div>
+            )}
+          </motion.div>
+        )}
+
+        {activeTab === 'unifi' && (
+          <motion.div
+            key="unifi"
+            initial={{ opacity: 0, x: -20 }}
+            animate={{ opacity: 1, x: 0 }}
+            exit={{ opacity: 0, x: 20 }}
+          >
+            {unifiInfo ? (
+              <div>
+                <div className="bg-gray-800/50 backdrop-blur-sm rounded-xl p-8 border border-cyan-500/30 shadow-2xl mb-6">
+                  <div className="flex items-center gap-4 mb-6">
+                    <Router size={48} className="text-cyan-400" />
+                    <div>
+                      <h2 className="text-2xl font-bold">Unifi Network</h2>
+                      <p className="text-gray-400">{unifiInfo.host}</p>
+                    </div>
+                  </div>
+                  
+                  {unifiInfo.data?.health && unifiInfo.data.health.length > 0 && (
+                    <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                      {unifiInfo.data.health.map((health, idx) => (
+                        <div key={idx} className="bg-gray-700/30 rounded-lg p-4">
+                          <p className="text-gray-400 text-sm capitalize">{health.subsystem}</p>
+                          <p className={`text-xl font-bold ${health.status === 'ok' ? 'text-green-400' : 'text-red-400'}`}>
+                            {health.status?.toUpperCase()}
+                          </p>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </div>
+
+                {unifiInfo.data?.devices && unifiInfo.data.devices.length > 0 && (
+                  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                    {unifiInfo.data.devices.map((device, index) => (
+                      <motion.div
+                        key={device._id}
+                        initial={{ opacity: 0, y: 20 }}
+                        animate={{ opacity: 1, y: 0 }}
+                        transition={{ delay: index * 0.05 }}
+                        whileHover={{ scale: 1.02, y: -5 }}
+                        className="bg-gray-800/50 backdrop-blur-sm rounded-xl p-6 border border-gray-700/50 shadow-xl"
+                      >
+                        <div className="flex items-center gap-3 mb-4">
+                          <motion.div
+                            animate={device.state === 1 ? { scale: [1, 1.2, 1] } : {}}
+                            transition={{ duration: 2, repeat: Infinity }}
+                            className={`w-3 h-3 rounded-full ${device.state === 1 ? 'bg-green-500' : 'bg-red-500'}`}
+                          />
+                          <div className="flex-1">
+                            <h3 className="font-bold">{device.name || device.model}</h3>
+                            <p className="text-xs text-gray-400">{device.model}</p>
+                          </div>
+                        </div>
+
+                        <div className="space-y-2 text-sm">
+                          <div className="flex justify-between">
+                            <span className="text-gray-400">IP Address</span>
+                            <span className="font-mono">{device.ip}</span>
+                          </div>
+                          <div className="flex justify-between">
+                            <span className="text-gray-400">Uptime</span>
+                            <span>{Math.floor((device.uptime || 0) / 86400)}d {Math.floor(((device.uptime || 0) % 86400) / 3600)}h</span>
+                          </div>
+                          {device.num_sta !== undefined && (
+                            <div className="flex justify-between">
+                              <span className="text-gray-400">Clients</span>
+                              <span className="text-cyan-400 font-bold">{device.num_sta}</span>
+                            </div>
+                          )}
+                        </div>
+                      </motion.div>
+                    ))}
+                  </div>
+                )}
+              </div>
+            ) : (
+              <motion.div
+                initial={{ scale: 0.9 }}
+                animate={{ scale: 1 }}
+                className="bg-gray-800/50 backdrop-blur-sm rounded-xl p-12 border border-yellow-500/30 text-center"
+              >
+                <AlertCircle size={64} className="text-yellow-400 mx-auto mb-4" />
+                <h3 className="text-2xl font-bold mb-2">Unifi Not Configured</h3>
+                <p className="text-gray-400 mb-4">
+                  Add your Unifi Controller credentials to config.json to enable monitoring
+                </p>
+                <pre className="bg-gray-900/50 rounded-lg p-4 text-left text-sm text-gray-300 overflow-x-auto">
+{`{
+  "unifi": {
+    "host": "192.168.1.1",
+    "port": 443,
+    "username": "your-username",
+    "password": "your-password"
+  }
+}`}
+                </pre>
+              </motion.div>
+            )}
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}
+
+export default App;
--- a/frontend/src/assets/react.svg
+++ b/frontend/src/assets/react.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -0,0 +1,24 @@
+@import "tailwindcss";
+
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+  color-scheme: dark;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+}
+
+#root {
+  min-height: 100vh;
+}
+
--- a/frontend/src/main.jsx
+++ b/frontend/src/main.jsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.jsx'
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -0,0 +1,8 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+})
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "dashboard",
+  "version": "1.0.0",
+  "description": "Replacement dashboard for homarr and heimdall",
+  "main": "server.js",
+  "type": "commonjs",
+  "scripts": {
+    "dev": "node server.js",
+    "dev:frontend": "cd frontend && npm run dev",
+    "build:frontend": "cd frontend && npm run build",
+    "start": "node server.js"
+  },
+  "keywords": [
+    "dashboard",
+    "docker",
+    "synology",
+    "unifi",
+    "monitoring"
+  ],
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "axios": "^1.13.2",
+    "cors": "^2.8.5",
+    "dockerode": "^4.0.9",
+    "express": "^4.22.1",
+    "node-ssh": "^13.2.1",
+    "ws": "^8.19.0"
+  }
+}
--- a/server.js
+++ b/server.js
@@ -0,0 +1,295 @@
+const express = require('express');
+const cors = require('cors');
+const Docker = require('dockerode');
+const axios = require('axios');
+const { NodeSSH } = require('node-ssh');
+const fs = require('fs');
+const path = require('path');
+
+const app = express();
+const PORT = process.env.PORT || 3001;
+const FRONTEND_PORT = 3000;
+
+// Middleware
+app.use(cors());
+app.use(express.json());
+
+// Serve frontend static files in production
+const frontendDistPath = path.join(__dirname, 'frontend', 'dist');
+if (fs.existsSync(frontendDistPath)) {
+  const frontendApp = express();
+  frontendApp.use(express.static(frontendDistPath));
+  frontendApp.get('/*', (req, res) => {
+    res.sendFile(path.join(frontendDistPath, 'index.html'));
+  });
+  frontendApp.listen(FRONTEND_PORT, () => {
+    console.log(`🎨 Frontend server running on http://localhost:${FRONTEND_PORT}`);
+  });
+}
+
+// Initialize Docker connection
+const docker = new Docker({ socketPath: '/var/run/docker.sock' });
+
+// Load config if exists
+let config = {};
+const configPath = path.join(__dirname, 'config.json');
+if (fs.existsSync(configPath)) {
+  config = JSON.parse(fs.readFileSync(configPath, 'utf8'));
+}
+
+// Docker endpoints
+app.get('/api/docker/containers', async (req, res) => {
+  try {
+    const containers = await docker.listContainers({ all: true });
+    const detailedContainers = await Promise.all(
+      containers.map(async (containerInfo) => {
+        const container = docker.getContainer(containerInfo.Id);
+        const stats = await container.stats({ stream: false }).catch(() => null);
+        const inspect = await container.inspect().catch(() => null);
+        
+        return {
+          id: containerInfo.Id,
+          name: containerInfo.Names[0].replace('/', ''),
+          image: containerInfo.Image,
+          state: containerInfo.State,
+          status: containerInfo.Status,
+          ports: containerInfo.Ports,
+          created: containerInfo.Created,
+          cpuUsage: stats ? calculateCPUPercent(stats) : 0,
+          memoryUsage: stats ? calculateMemoryUsage(stats) : { used: 0, limit: 0, percent: 0 },
+          networkRx: stats ? stats.networks?.eth0?.rx_bytes || 0 : 0,
+          networkTx: stats ? stats.networks?.eth0?.tx_bytes || 0 : 0,
+          labels: inspect?.Config?.Labels || {},
+        };
+      })
+    );
+    
+    res.json({ success: true, containers: detailedContainers });
+  } catch (error) {
+    console.error('Error fetching containers:', error.message);
+    res.json({ success: false, containers: [], error: error.message });
+  }
+});
+
+app.post('/api/docker/container/:id/:action', async (req, res) => {
+  try {
+    const { id, action } = req.params;
+    const container = docker.getContainer(id);
+    
+    switch (action) {
+      case 'start':
+        await container.start();
+        break;
+      case 'stop':
+        await container.stop();
+        break;
+      case 'restart':
+        await container.restart();
+        break;
+      case 'pause':
+        await container.pause();
+        break;
+      case 'unpause':
+        await container.unpause();
+        break;
+      default:
+        return res.json({ success: false, error: 'Invalid action' });
+    }
+    
+    res.json({ success: true, message: `Container ${action}ed successfully` });
+  } catch (error) {
+    res.json({ success: false, error: error.message });
+  }
+});
+
+// Synology endpoints
+app.get('/api/synology/info', async (req, res) => {
+  try {
+    const { host, port = 5000, username, password } = config.synology || {};
+    
+    if (!host || !username || !password) {
+      return res.json({ 
+        success: false, 
+        error: 'Synology not configured. Add config to config.json' 
+      });
+    }
+
+    // Login to Synology
+    const loginResponse = await axios.get(
+      `http://${host}:${port}/webapi/auth.cgi`,
+      {
+        params: {
+          api: 'SYNO.API.Auth',
+          version: 3,
+          method: 'login',
+          account: username,
+          passwd: password,
+          session: 'FileStation',
+          format: 'cookie'
+        },
+        timeout: 5000
+      }
+    ).catch(err => ({ data: { success: false } }));
+
+    if (!loginResponse.data.success) {
+      return res.json({ success: false, error: 'Failed to authenticate with Synology' });
+    }
+
+    const sid = loginResponse.data.data.sid;
+
+    // Get system info
+    const infoResponse = await axios.get(
+      `http://${host}:${port}/webapi/entry.cgi`,
+      {
+        params: {
+          api: 'SYNO.Core.System',
+          version: 1,
+          method: 'info',
+          _sid: sid
+        },
+        timeout: 5000
+      }
+    ).catch(() => ({ data: { success: false } }));
+
+    // Get storage info
+    const storageResponse = await axios.get(
+      `http://${host}:${port}/webapi/entry.cgi`,
+      {
+        params: {
+          api: 'SYNO.Core.System.Utilization',
+          version: 1,
+          method: 'get',
+          _sid: sid
+        },
+        timeout: 5000
+      }
+    ).catch(() => ({ data: { success: false } }));
+
+    res.json({
+      success: true,
+      data: {
+        system: infoResponse.data.data || {},
+        utilization: storageResponse.data.data || {},
+        host: host
+      }
+    });
+  } catch (error) {
+    res.json({ success: false, error: error.message });
+  }
+});
+
+// Unifi endpoints
+app.get('/api/unifi/devices', async (req, res) => {
+  try {
+    const { host, username, password, port = 443 } = config.unifi || {};
+    
+    if (!host || !username || !password) {
+      return res.json({ 
+        success: false, 
+        error: 'Unifi not configured. Add config to config.json' 
+      });
+    }
+
+    // Create axios instance with cookie jar
+    const api = axios.create({
+      baseURL: `https://${host}:${port}`,
+      httpsAgent: new (require('https').Agent)({ rejectUnauthorized: false }),
+      timeout: 5000
+    });
+
+    // Login
+    const loginResponse = await api.post('/api/auth/login', {
+      username,
+      password
+    }).catch(err => ({ data: {} }));
+
+    if (!loginResponse.data || loginResponse.status !== 200) {
+      return res.json({ success: false, error: 'Failed to authenticate with Unifi' });
+    }
+
+    // Get devices
+    const devicesResponse = await api.get('/proxy/network/api/s/default/stat/device')
+      .catch(() => ({ data: {} }));
+
+    // Get site stats
+    const statsResponse = await api.get('/proxy/network/api/s/default/stat/health')
+      .catch(() => ({ data: {} }));
+
+    res.json({
+      success: true,
+      data: {
+        devices: devicesResponse.data.data || [],
+        health: statsResponse.data.data || [],
+        host: host
+      }
+    });
+  } catch (error) {
+    res.json({ success: false, error: error.message });
+  }
+});
+
+// System info endpoint
+app.get('/api/system/info', async (req, res) => {
+  try {
+    const os = require('os');
+    
+    res.json({
+      success: true,
+      data: {
+        hostname: os.hostname(),
+        platform: os.platform(),
+        uptime: os.uptime(),
+        cpus: os.cpus().length,
+        totalMemory: os.totalmem(),
+        freeMemory: os.freemem(),
+        loadAverage: os.loadavg()
+      }
+    });
+  } catch (error) {
+    res.json({ success: false, error: error.message });
+  }
+});
+
+// Config endpoint
+app.get('/api/config', (req, res) => {
+  // Return sanitized config (no passwords)
+  const sanitized = {
+    synology: config.synology ? { 
+      host: config.synology.host, 
+      port: config.synology.port,
+      configured: true 
+    } : { configured: false },
+    unifi: config.unifi ? { 
+      host: config.unifi.host, 
+      port: config.unifi.port,
+      configured: true 
+    } : { configured: false }
+  };
+  
+  res.json({ success: true, config: sanitized });
+});
+
+// Helper functions
+function calculateCPUPercent(stats) {
+  const cpuDelta = stats.cpu_stats.cpu_usage.total_usage - stats.precpu_stats.cpu_usage.total_usage;
+  const systemDelta = stats.cpu_stats.system_cpu_usage - stats.precpu_stats.system_cpu_usage;
+  const cpuPercent = (cpuDelta / systemDelta) * stats.cpu_stats.online_cpus * 100;
+  return Math.round(cpuPercent * 100) / 100;
+}
+
+function calculateMemoryUsage(stats) {
+  const used = stats.memory_stats.usage;
+  const limit = stats.memory_stats.limit;
+  const percent = (used / limit) * 100;
+  return {
+    used: Math.round(used / 1024 / 1024),
+    limit: Math.round(limit / 1024 / 1024),
+    percent: Math.round(percent * 100) / 100
+  };
+}
+
+// Start server
+app.listen(PORT, () => {
+  console.log(`🚀 Dashboard API server running on port ${PORT}`);
+  console.log(`📊 API available at http://localhost:${PORT}`);
+});
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>