fix(login): fetch version from /api/health instead of hardcoding, bump v0.4.8

Login page had 'NixServer v0.3.2 · Port 2087' hardcoded and subtitle
said 'Web Host Manager'. Now fetches version from GET /api/health on
mount (no auth needed) and shows it dynamically. Changed subtitle to
'Admin Panel'.

CHANGELOG.md

@@ -6,6 +6,62 @@ Pre-1.0 versions treat MINOR as feature releases and PATCH as bug fixes.
 
 ---
 
+## [0.4.8] — 2026-04-11
+
+### Bug Fixes
+- **Login page showing stale hardcoded version** — "NixServer v0.3.2 · Port 2087" was hardcoded. Now fetches version live from `GET /api/health` (no auth required) on mount.
+- **Login page subtitle** — "Web Host Manager" replaced with "Admin Panel" to remove any WHM trademark association.
+
+---
+
+## [0.4.7] — 2026-04-11
+
+### Bug Fixes
+- **Login broken after v0.4.6 update** — `package-lock.json` still mapped the workspace as `@nixpanel/whm`. After renaming the package to `@nixpanel/nixserver`, npm workspace resolution failed during `npm install`, causing the frontend build to break and leaving the panel unresponsive. Fixed by regenerating `package-lock.json` with the correct package name.
+
+---
+
+## [0.4.6] — 2026-04-11
+
+### Changes
+- **Removed all WHM trademark references** — "WHM" is a registered trademark of cPanel, L.L.C. All occurrences replaced with "NixServer":
+  - Sidebar menu item "Basic WebHost Manager® Setup" → "Basic NixServer Setup"
+  - Sidebar menu item "WHM Marketplace" → "NixServer Marketplace"
+  - Sidebar menu item "OpenAPI Documentation for WHM" → "OpenAPI Documentation for NixServer"
+  - Internal npm package name `@nixpanel/whm` → `@nixpanel/nixserver`
+
+---
+
+## [0.4.5] — 2026-04-11
+
+### Bug Fixes
+- **Sidebar version refresh not updating** — clicking the refresh icon now clears the stale version immediately (shows spinner) and adds a `?_t=` cache-bust parameter so the browser never serves a cached response. Same fix applied to the "Retry" button in the error state.
+- **`uptime` and `kill` missing from exec allowlist** — caused `GET /api/nixserver/system/info` to throw "Command not allowed", returning 500 and leaving Hostname/OS as `…` on the dashboard.
+- **Version fetch auto-retry** — when the version API fails (e.g. during service restart after upgrade), the sidebar now automatically retries every 5 s until it succeeds instead of permanently showing "Version unavailable".
+
+### New Features
+- **Day/Night mode toggle** — sun/moon flip switch at the right end of the dashboard info bar. Light palette: page `#f0f4f8`, cards `#ffffff`. Preference persisted to `localStorage`. All pages switch via seven `[data-theme="light"]` CSS overrides in `index.css` without touching individual page files.
+
+---
+
+## [0.4.4] — 2026-04-11
+
+### New Features
+- **Server info bar on Dashboard** — cPanel/WHM-style info strip at the top of the NixPanel home page. Shows Username, Hostname, OS, NixPanel Version, Load Averages (live from WebSocket), and Server Monitoring alert count. Alerts are colour-coded: green "All Clear" when all managed services are running; amber "N Alerts" with a count of stopped/failed services.
+
+---
+
+## [0.4.3] — 2026-04-11
+
+### New Features
+- **Version display in sidebar** — the sidebar footer shows the currently installed version (e.g. `v0.4.3`), fetched live from the API. A green checkmark indicates up to date; an amber alert indicates an update is available.
+- **One-click panel upgrade** — "Upgrade panel" button in the sidebar footer. When a newer version is available it highlights amber and shows the target version. Clicking requires a confirmation step before running. Calls `POST /api/nixserver/system/upgrade` which fires `scripts/update.sh` in the background (git pull → npm install → prisma migrate → build frontends + server → restart service). The panel comes back online automatically after ~60 s.
+- **Check for updates button** — small refresh icon next to the version badge re-fetches version info on demand.
+- **Backend: `GET /api/nixserver/system/version`** — returns `currentVersion` (read from `/opt/nixpanel/package.json`), `latestVersion` (fetched from GitHub raw content with a 5 s timeout), and `updateAvailable` boolean.
+- **Backend: `POST /api/nixserver/system/upgrade`** — admin-only; responds immediately then spawns `scripts/update.sh` detached so the HTTP response is flushed before the service restarts.
+
+---
+
 ## [0.4.2] — 2026-04-11
 
 ### Changes

nixclient/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nixpanel/cpanel",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "private": true,
   "type": "module",
   "scripts": {

nixserver/package.json

@@ -1,6 +1,6 @@
 {
-  "name": "@nixpanel/whm",
-  "version": "0.4.2",
+  "name": "@nixpanel/nixserver",
+  "version": "0.4.6",
   "private": true,
   "type": "module",
   "scripts": {

nixserver/src/App.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
 import { AuthProvider, useAuth } from './contexts/AuthContext'
+import { ThemeProvider } from './contexts/ThemeContext'
 import Layout from './components/Layout'
 import Login from './pages/Login'
 import Dashboard from './pages/Dashboard'
@@ -233,9 +234,11 @@ function PageLoader() {
 export default function App() {
   return (
     <BrowserRouter>
-      <AuthProvider>
-        <AppRoutes />
-      </AuthProvider>
+      <ThemeProvider>
+        <AuthProvider>
+          <AppRoutes />
+        </AuthProvider>
+      </ThemeProvider>
     </BrowserRouter>
   )
 }

nixserver/src/components/Layout.tsx

@@ -1,4 +1,4 @@
-import { useState, useMemo, useEffect } from 'react'
+import { useState, useMemo, useEffect, useCallback } from 'react'
 import { Outlet, Link, useNavigate, useLocation } from 'react-router-dom'
 import {
   LayoutDashboard, Settings, HelpCircle, Network, BookUser, UserCog,
@@ -6,9 +6,11 @@ import {
   Users, UserCheck, ArrowRightLeft, Paintbrush, Package,
   Globe, Database, Wifi, Box, Mail, HeartPulse, Lock,
   ShoppingBag, Code2, Puzzle, LogOut, Menu, X,
-  ChevronDown, ChevronRight, Search, RotateCcw
+  ChevronDown, ChevronRight, Search, RotateCcw, RefreshCcw,
+  ArrowUpCircle, CheckCircle2, AlertCircle, Loader2
 } from 'lucide-react'
 import { useAuth } from '../contexts/AuthContext'
+import { api } from '../api/client'
 
 // ─── Nav data ────────────────────────────────────────────────────────────────
 
@@ -16,7 +18,7 @@ type NavItem = { label: string; to: string }
 type NavCategory = {
   id: string
   label: string
-  icon: React.ComponentType<{ size?: number; className?: string }>
+  icon: React.ComponentType<{ size?: number | string; className?: string }>
   items: NavItem[]
 }
 
@@ -26,7 +28,7 @@ const NAV: NavCategory[] = [
     label: 'Server Configuration',
     icon: Settings,
     items: [
-      { label: 'Basic WebHost Manager® Setup',    to: '/settings' },
+      { label: 'Basic NixServer Setup',             to: '/settings' },
       { label: 'Change Root Password',             to: '/security' },
       { label: 'Configure Analytics',              to: '/settings' },
       { label: 'Configure Cron Jobs',              to: '/settings' },
@@ -38,7 +40,7 @@ const NAV: NavCategory[] = [
       { label: 'Terminal',                         to: '/system'   },
       { label: 'Tweak Settings',                   to: '/settings' },
       { label: 'Update Preferences',               to: '/settings' },
-      { label: 'WHM Marketplace',                  to: '/settings' },
+      { label: 'NixServer Marketplace',             to: '/settings' },
     ],
   },
   {
@@ -422,7 +424,7 @@ const NAV: NavCategory[] = [
       { label: 'Manage API Tokens',                  to: '/settings' },
       { label: 'Manage Hooks',                       to: '/settings' },
       { label: 'OpenAPI Documentation for NixPanel', to: '/settings' },
-      { label: 'OpenAPI Documentation for WHM',      to: '/settings' },
+      { label: 'OpenAPI Documentation for NixServer', to: '/settings' },
     ],
   },
   {
@@ -456,6 +458,55 @@ export default function Layout() {
 
   const [sidebarOpen, setSidebarOpen] = useState(true)
   const [search, setSearch] = useState('')
+
+  // ── Version / upgrade state ──────────────────────────────────────────────
+  type VersionInfo = { currentVersion: string; latestVersion: string | null; updateAvailable: boolean }
+  const [versionInfo, setVersionInfo] = useState<VersionInfo | null>(null)
+  const [versionError, setVersionError] = useState(false)
+  const [upgradeState, setUpgradeState] = useState<'idle' | 'confirm' | 'running' | 'done' | 'error'>('idle')
+
+  const fetchVersion = useCallback(async (manual = false) => {
+    setVersionError(false)
+    // On a manual refresh, clear the stale value so the spinner shows
+    if (manual) setVersionInfo(null)
+    try {
+      const { data } = await api.get('/nixserver/system/version', {
+        timeout: 10_000,
+        // Cache-bust so the browser never serves a stale version response
+        params: { _t: Date.now() },
+      })
+      setVersionInfo(data.data)
+    } catch {
+      setVersionError(true)
+    }
+  }, [])
+
+  // Initial fetch
+  useEffect(() => { fetchVersion() }, [fetchVersion])
+
+  // Auto-retry every 5 s while in error state (handles the service-restart window after an upgrade)
+  useEffect(() => {
+    if (!versionError) return
+    const t = setTimeout(fetchVersion, 5_000)
+    return () => clearTimeout(t)
+  }, [versionError, fetchVersion])
+
+  const handleUpgrade = async () => {
+    if (upgradeState === 'confirm') {
+      setUpgradeState('running')
+      try {
+        await api.post('/nixserver/system/upgrade')
+        setUpgradeState('done')
+      } catch {
+        setUpgradeState('error')
+      }
+    } else {
+      setUpgradeState('confirm')
+    }
+  }
+
+  // ─────────────────────────────────────────────────────────────────────────
+
   const [openCats, setOpenCats] = useState<Set<string>>(() => {
     // Auto-open the category that contains the active route on first render
     const active = NAV.find(cat =>
@@ -618,6 +669,96 @@ export default function Layout() {
           )}
         </nav>
 
+        {/* Version + upgrade */}
+        <div className="border-t border-[#2a2d3e] px-3 pt-2.5 pb-1 flex-shrink-0">
+          {versionInfo ? (
+            <div className="space-y-1.5">
+              {/* Version row */}
+              <div className="flex items-center justify-between px-1">
+                <div className="flex items-center gap-1.5">
+                  {versionInfo.updateAvailable ? (
+                    <AlertCircle size={11} className="text-amber-400 flex-shrink-0" />
+                  ) : (
+                    <CheckCircle2 size={11} className="text-emerald-500 flex-shrink-0" />
+                  )}
+                  <span className="text-[#64748b] text-[10px]">
+                    v{versionInfo.currentVersion}
+                  </span>
+                  {versionInfo.updateAvailable && versionInfo.latestVersion && (
+                    <span className="text-amber-400 text-[10px]">
+                      → v{versionInfo.latestVersion}
+                    </span>
+                  )}
+                </div>
+                <button
+                  onClick={() => fetchVersion(true)}
+                  title="Check for updates"
+                  className="text-[#4a5568] hover:text-[#94a3b8] transition-colors"
+                >
+                  <RefreshCcw size={10} />
+                </button>
+              </div>
+
+              {/* Upgrade button */}
+              {upgradeState === 'done' ? (
+                <div className="flex items-center gap-1.5 px-2 py-1.5 rounded-md bg-emerald-600/10 text-emerald-400 text-[10px]">
+                  <CheckCircle2 size={11} />
+                  <span>Upgrade started — panel restarting…</span>
+                </div>
+              ) : upgradeState === 'error' ? (
+                <div className="flex items-center gap-1.5 px-2 py-1.5 rounded-md bg-red-600/10 text-red-400 text-[10px]">
+                  <AlertCircle size={11} />
+                  <span>Upgrade failed — check logs</span>
+                </div>
+              ) : (
+                <div className="flex gap-1.5">
+                  <button
+                    onClick={handleUpgrade}
+                    disabled={upgradeState === 'running'}
+                    className={`flex-1 flex items-center justify-center gap-1.5 px-2 py-1.5 rounded-md text-[10px] font-medium transition-colors ${
+                      upgradeState === 'confirm'
+                        ? 'bg-amber-500/20 text-amber-300 hover:bg-amber-500/30'
+                        : versionInfo.updateAvailable
+                          ? 'bg-indigo-600/20 text-indigo-300 hover:bg-indigo-600/30'
+                          : 'bg-[#1e2130] text-[#64748b] hover:text-[#94a3b8]'
+                    }`}
+                  >
+                    {upgradeState === 'running' ? (
+                      <><Loader2 size={10} className="animate-spin" /><span>Upgrading…</span></>
+                    ) : upgradeState === 'confirm' ? (
+                      <><ArrowUpCircle size={10} /><span>Confirm upgrade</span></>
+                    ) : versionInfo.updateAvailable ? (
+                      <><ArrowUpCircle size={10} /><span>Upgrade available</span></>
+                    ) : (
+                      <><ArrowUpCircle size={10} /><span>Upgrade panel</span></>
+                    )}
+                  </button>
+                  {upgradeState === 'confirm' && (
+                    <button
+                      onClick={() => setUpgradeState('idle')}
+                      className="px-2 py-1.5 rounded-md bg-[#1e2130] text-[#64748b] hover:text-[#94a3b8] text-[10px] transition-colors"
+                    >
+                      Cancel
+                    </button>
+                  )}
+                </div>
+              )}
+            </div>
+          ) : versionError ? (
+            <div className="flex items-center justify-between px-1 py-1">
+              <span className="text-[#4a5568] text-[10px]">Version unavailable</span>
+              <button onClick={() => fetchVersion(true)} title="Retry" className="text-[#4a5568] hover:text-[#94a3b8] transition-colors">
+                <RefreshCcw size={10} />
+              </button>
+            </div>
+          ) : (
+            <div className="flex items-center gap-1.5 px-1 py-1">
+              <Loader2 size={10} className="animate-spin text-[#4a5568]" />
+              <span className="text-[#4a5568] text-[10px]">Checking version…</span>
+            </div>
+          )}
+        </div>
+
         {/* User + logout */}
         <div className="border-t border-[#2a2d3e] p-3 flex-shrink-0">
           <div className="px-1 mb-2">

nixserver/src/contexts/ThemeContext.tsx

@@ -0,0 +1,35 @@
+import { createContext, useContext, useEffect, useState } from 'react'
+
+type Theme = 'dark' | 'light'
+
+interface ThemeContextValue {
+  theme: Theme
+  toggleTheme: () => void
+}
+
+const ThemeContext = createContext<ThemeContextValue | null>(null)
+
+export function ThemeProvider({ children }: { children: React.ReactNode }) {
+  const [theme, setTheme] = useState<Theme>(() =>
+    (localStorage.getItem('nixpanel-theme') as Theme) ?? 'dark'
+  )
+
+  useEffect(() => {
+    document.documentElement.setAttribute('data-theme', theme)
+    localStorage.setItem('nixpanel-theme', theme)
+  }, [theme])
+
+  const toggleTheme = () => setTheme(t => (t === 'dark' ? 'light' : 'dark'))
+
+  return (
+    <ThemeContext.Provider value={{ theme, toggleTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  )
+}
+
+export function useTheme() {
+  const ctx = useContext(ThemeContext)
+  if (!ctx) throw new Error('useTheme must be used inside ThemeProvider')
+  return ctx
+}

nixserver/src/index.css

@@ -45,3 +45,45 @@ body {
 ::-webkit-scrollbar-thumb:hover {
   background: #3a3d4e;
 }
+
+/* ── Light theme ─────────────────────────────────────────────────────────── */
+
+[data-theme="light"] {
+  --bg-primary:   #f0f4f8;
+  --bg-secondary: #ffffff;
+  --bg-card:      #f1f5f9;
+  --border:       #e2e8f0;
+  --text-primary: #0f172a;
+  --text-muted:   #64748b;
+}
+
+[data-theme="light"] body {
+  background-color: #f0f4f8;
+  color: #0f172a;
+}
+
+/* Scrollbar */
+[data-theme="light"] ::-webkit-scrollbar-track { background: #f1f5f9; }
+[data-theme="light"] ::-webkit-scrollbar-thumb { background: #cbd5e1; }
+[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
+
+/* ── Background overrides ──────────────────────────────────────────────── */
+/* Page background (darkest) */
+[data-theme="light"] .bg-\[\#0f1117\] { background-color: #f0f4f8 !important; }
+/* Cards / sidebar */
+[data-theme="light"] .bg-\[\#1a1d27\] { background-color: #ffffff !important; }
+/* Hover / alternate rows */
+[data-theme="light"] .bg-\[\#1e2130\] { background-color: #f1f5f9 !important; }
+
+/* ── Border overrides ──────────────────────────────────────────────────── */
+[data-theme="light"] .border-\[\#2a2d3e\]   { border-color: #e2e8f0 !important; }
+
+/* ── Text overrides ────────────────────────────────────────────────────── */
+[data-theme="light"] .text-white             { color: #0f172a !important; }
+[data-theme="light"] .text-\[\#94a3b8\]      { color: #475569 !important; }
+[data-theme="light"] .text-\[\#64748b\]      { color: #64748b !important; }
+[data-theme="light"] .text-\[\#4a5568\]      { color: #94a3b8 !important; }
+
+/* ── Input fields ──────────────────────────────────────────────────────── */
+[data-theme="light"] input                   { color: #0f172a !important; }
+[data-theme="light"] input::placeholder      { color: #94a3b8 !important; }

nixserver/src/pages/Dashboard.tsx

@@ -1,7 +1,9 @@
 import React, { useEffect, useState, useRef } from 'react'
-import { Users, Server, HardDrive, Activity } from 'lucide-react'
+import { Users, Server, HardDrive, Activity, AlertTriangle, CheckCircle2, Sun, Moon } from 'lucide-react'
 import { AreaChart, Area, XAxis, YAxis, Tooltip, ResponsiveContainer } from 'recharts'
 import { api } from '../api/client'
+import { useAuth } from '../contexts/AuthContext'
+import { useTheme } from '../contexts/ThemeContext'
 
 interface SystemStats {
   cpu: number
@@ -18,6 +20,17 @@ interface AccountStats {
   terminated: number
 }
 
+interface SystemInfo {
+  hostname: string
+  os: string
+}
+
+interface ServiceStatus {
+  name: string
+  status: 'running' | 'stopped' | 'failed' | 'unknown'
+  enabled: boolean
+}
+
 interface StatCard {
   label: string
   value: string | number
@@ -31,15 +44,52 @@ const formatBytes = (bytes: number) => {
   return gb >= 1 ? `${gb.toFixed(1)} GB` : `${(bytes / 1024 / 1024).toFixed(0)} MB`
 }
 
+// ─── Server Info Bar ─────────────────────────────────────────────────────────
+
+interface InfoCellProps {
+  label: string
+  value: React.ReactNode
+}
+
+function InfoCell({ label, value }: InfoCellProps) {
+  return (
+    <div className="flex flex-col min-w-0">
+      <span className="text-[#4a5568] text-[10px] font-medium uppercase tracking-wide leading-none mb-0.5">
+        {label}
+      </span>
+      <span className="text-[#94a3b8] text-xs font-medium leading-none truncate">
+        {value}
+      </span>
+    </div>
+  )
+}
+
+function Divider() {
+  return <div className="w-px h-8 bg-[#2a2d3e] flex-shrink-0" />
+}
+
+// ─── Component ───────────────────────────────────────────────────────────────
+
 export default function Dashboard() {
+  const { user } = useAuth()
+  const { theme, toggleTheme } = useTheme()
   const [stats, setStats] = useState<SystemStats | null>(null)
   const [accountStats, setAccountStats] = useState<AccountStats | null>(null)
   const [cpuHistory, setCpuHistory] = useState<{ t: string; cpu: number; mem: number }[]>([])
+  const [systemInfo, setSystemInfo] = useState<SystemInfo | null>(null)
+  const [version, setVersion] = useState<string | null>(null)
+  const [alertCount, setAlertCount] = useState<number | null>(null)
   const wsRef = useRef<WebSocket | null>(null)
 
   useEffect(() => {
     api.get('/nixserver/accounts/stats').then(r => setAccountStats(r.data.data)).catch(() => {})
     api.get('/nixserver/system/stats').then(r => setStats(r.data.data)).catch(() => {})
+    api.get('/nixserver/system/info').then(r => setSystemInfo(r.data.data)).catch(() => {})
+    api.get('/nixserver/system/version').then(r => setVersion(r.data.data?.currentVersion ?? null)).catch(() => {})
+    api.get('/nixserver/services').then(r => {
+      const services: ServiceStatus[] = r.data.data ?? []
+      setAlertCount(services.filter(s => s.status !== 'running').length)
+    }).catch(() => { setAlertCount(0) })
 
     // WebSocket live stats
     const token = localStorage.getItem('access_token')
@@ -92,14 +142,69 @@ export default function Dashboard() {
     },
   ]
 
+  const loadStr = stats
+    ? `${stats.load[0].toFixed(2)}\u00a0\u00a0${stats.load[1].toFixed(2)}\u00a0\u00a0${stats.load[2].toFixed(2)}`
+    : '…'
+
+  const monitoringNode =
+    alertCount === null ? (
+      <span className="text-[#4a5568]">…</span>
+    ) : alertCount === 0 ? (
+      <span className="flex items-center gap-1 text-emerald-400">
+        <CheckCircle2 size={11} />
+        All Clear
+      </span>
+    ) : (
+      <span className="flex items-center gap-1 text-amber-400">
+        <AlertTriangle size={11} />
+        {alertCount} Alert{alertCount !== 1 ? 's' : ''}
+      </span>
+    )
+
   return (
     <div className="space-y-6">
-      <div>
-        <h1 className="text-white text-xl font-semibold">Dashboard</h1>
-        <p className="text-[#64748b] text-sm mt-0.5">Server overview and real-time metrics</p>
+
+      {/* ── cPanel-style server info bar ─────────────────────────────────── */}
+      <div className="bg-[#1a1d27] border border-[#2a2d3e] rounded-xl px-5 py-3.5 flex flex-wrap items-center gap-x-5 gap-y-3">
+        <InfoCell label="Username"          value={user?.username ?? '…'} />
+        <Divider />
+        <InfoCell label="Hostname"          value={systemInfo?.hostname ?? '…'} />
+        <Divider />
+        <InfoCell label="OS"                value={systemInfo?.os ?? '…'} />
+        <Divider />
+        <InfoCell label="NixPanel Version"  value={version ? `v${version}` : '…'} />
+        <Divider />
+        <InfoCell label="Load Averages"     value={loadStr} />
+        <Divider />
+        <InfoCell label="Server Monitoring" value={monitoringNode} />
+
+        {/* ── Day / Night toggle — far right ── */}
+        <div className="ml-auto flex items-center gap-2 flex-shrink-0">
+          <Moon
+            size={13}
+            className={theme === 'dark' ? 'text-indigo-400' : 'text-[#94a3b8]'}
+          />
+          <button
+            onClick={toggleTheme}
+            title={theme === 'dark' ? 'Switch to day mode' : 'Switch to night mode'}
+            className={`relative flex items-center w-10 h-5 rounded-full transition-colors cursor-pointer flex-shrink-0 ${
+              theme === 'light' ? 'bg-amber-400' : 'bg-[#2a2d3e]'
+            }`}
+          >
+            <span
+              className={`absolute h-4 w-4 rounded-full bg-white shadow-sm transition-transform ${
+                theme === 'light' ? 'translate-x-5' : 'translate-x-0.5'
+              }`}
+            />
+          </button>
+          <Sun
+            size={13}
+            className={theme === 'light' ? 'text-amber-500' : 'text-[#4a5568]'}
+          />
+        </div>
       </div>
 
-      {/* Stat cards */}
+      {/* ── Stat cards ───────────────────────────────────────────────────── */}
       <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4">
         {cards.map(card => (
           <div key={card.label} className="bg-[#1a1d27] border border-[#2a2d3e] rounded-xl p-4">
@@ -113,7 +218,7 @@ export default function Dashboard() {
         ))}
       </div>
 
-      {/* CPU / Memory chart */}
+      {/* ── CPU / Memory chart ───────────────────────────────────────────── */}
       <div className="bg-[#1a1d27] border border-[#2a2d3e] rounded-xl p-4">
         <h2 className="text-white text-sm font-medium mb-4">CPU & Memory — Live</h2>
         {cpuHistory.length > 0 ? (
@@ -132,8 +237,14 @@ export default function Dashboard() {
               <XAxis dataKey="t" tick={{ fill: '#64748b', fontSize: 10 }} tickLine={false} axisLine={false} />
               <YAxis domain={[0, 100]} tick={{ fill: '#64748b', fontSize: 10 }} tickLine={false} axisLine={false} />
               <Tooltip
-                contentStyle={{ background: '#1e2130', border: '1px solid #2a2d3e', borderRadius: 8, fontSize: 12 }}
-                labelStyle={{ color: '#94a3b8' }}
+                contentStyle={{
+                  background: theme === 'light' ? '#ffffff' : '#1e2130',
+                  border: `1px solid ${theme === 'light' ? '#e2e8f0' : '#2a2d3e'}`,
+                  borderRadius: 8,
+                  fontSize: 12,
+                  color: theme === 'light' ? '#0f172a' : '#e2e8f0',
+                }}
+                labelStyle={{ color: theme === 'light' ? '#64748b' : '#94a3b8' }}
               />
               <Area type="monotone" dataKey="cpu" stroke="#6366f1" fill="url(#cpu)" strokeWidth={2} name="CPU %" />
               <Area type="monotone" dataKey="mem" stroke="#10b981" fill="url(#mem)" strokeWidth={2} name="Mem %" />
@@ -146,15 +257,15 @@ export default function Dashboard() {
         )}
       </div>
 
-      {/* Account status breakdown */}
+      {/* ── Account status breakdown ─────────────────────────────────────── */}
       {accountStats && (
         <div className="bg-[#1a1d27] border border-[#2a2d3e] rounded-xl p-4">
           <h2 className="text-white text-sm font-medium mb-4">Account Status</h2>
           <div className="grid grid-cols-3 gap-4">
             {[
-              { label: 'Active', value: accountStats.active, color: 'text-emerald-400' },
-              { label: 'Suspended', value: accountStats.suspended, color: 'text-amber-400' },
-              { label: 'Terminated', value: accountStats.terminated, color: 'text-red-400' },
+              { label: 'Active',     value: accountStats.active,     color: 'text-emerald-400' },
+              { label: 'Suspended',  value: accountStats.suspended,  color: 'text-amber-400'   },
+              { label: 'Terminated', value: accountStats.terminated, color: 'text-red-400'     },
             ].map(s => (
               <div key={s.label} className="text-center">
                 <p className={`text-2xl font-bold ${s.color}`}>{s.value}</p>

nixserver/src/pages/Login.tsx

@@ -1,7 +1,8 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { useAuth } from '../contexts/AuthContext'
 import { Shield } from 'lucide-react'
+import axios from 'axios'
 
 export default function Login() {
   const { login } = useAuth()
@@ -10,6 +11,13 @@ export default function Login() {
   const [password, setPassword] = useState('')
   const [error, setError] = useState('')
   const [loading, setLoading] = useState(false)
+  const [version, setVersion] = useState<string | null>(null)
+
+  useEffect(() => {
+    axios.get('/api/health', { timeout: 5_000 })
+      .then(r => setVersion(r.data.version ?? null))
+      .catch(() => {})
+  }, [])
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault()
@@ -35,7 +43,7 @@ export default function Login() {
             <Shield size={24} className="text-white" />
           </div>
           <h1 className="text-white text-xl font-bold">NixServer</h1>
-          <p className="text-[#64748b] text-sm mt-1">Web Host Manager</p>
+          <p className="text-[#64748b] text-sm mt-1">Admin Panel</p>
         </div>
 
         {/* Form */}
@@ -81,7 +89,7 @@ export default function Login() {
         </form>
 
         <p className="text-center text-[#64748b] text-xs mt-4">
-          NixServer v0.3.2 · Port 2087
+          NixServer{version ? ` v${version}` : ''} · Port 2087
         </p>
       </div>
     </div>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nixpanel-server",
-  "version": "0.4.2",
+  "version": "0.4.8",
   "private": true,
   "workspaces": [
     "server",

scripts/update.sh

@@ -24,14 +24,20 @@ success "Dependencies ready"
 
 step "Running migrations"
 cd "$INSTALL_DIR/server"
-npx prisma generate --silent
-npx prisma migrate deploy
+npx prisma generate
+npx prisma db push
 success "Migrations applied"
 
 step "Rebuilding frontends"
 cd "$INSTALL_DIR"
 npm run build --workspace=nixserver --silent
 npm run build --workspace=nixclient --silent
+# Ensure Apache (www-data) can read the rebuilt assets
+chmod 755 "$INSTALL_DIR/nixserver" "$INSTALL_DIR/nixclient"
+find "$INSTALL_DIR/nixserver/dist" -type d -exec chmod 755 {} \;
+find "$INSTALL_DIR/nixserver/dist" -type f -exec chmod 644 {} \;
+find "$INSTALL_DIR/nixclient/dist" -type d -exec chmod 755 {} \;
+find "$INSTALL_DIR/nixclient/dist" -type f -exec chmod 644 {} \;
 success "Frontends rebuilt"
 
 step "Rebuilding server"

server/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nixpanel/server",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "private": true,
   "type": "module",
   "main": "dist/index.js",

server/src/app.ts

@@ -60,7 +60,7 @@ export async function buildApp() {
   // ─── Static files ────────────────────────────────────────────────────────────
 
   // NixServer frontend
-  const whmDist = path.resolve(__dirname, '../../nixserver/dist')
+  const nixserverDist = path.resolve(__dirname, '../../nixserver/dist')
   const cpanelDist = path.resolve(__dirname, '../../nixclient/dist')
 
   // ─── API Routes ──────────────────────────────────────────────────────────────
@@ -73,7 +73,7 @@ export async function buildApp() {
 
   fastify.get('/api/health', async () => ({
     status: 'ok',
-    version: '0.4.2',
+    version: '0.4.8',
     timestamp: new Date().toISOString(),
   }))
 

server/src/core/exec.ts

@@ -24,7 +24,7 @@ const ALLOWED_COMMANDS = new Set([
   // Network
   'ss', 'ip', 'hostname',
   // System
-  'uname', 'free', 'ps',
+  'uname', 'uptime', 'free', 'ps', 'kill',
   // PHP
   'php8.2', 'php8.3',
   // Fail2ban

server/src/routes/nixserver/system.ts

@@ -1,10 +1,13 @@
 import type { FastifyInstance } from 'fastify'
+import { spawn } from 'child_process'
 import prisma from '../../db/client.js'
 import { requireAdmin } from '../../middleware/auth.js'
 import { getSystemStats } from '../../core/system.js'
 import { exec } from '../../core/exec.js'
 import { readFile } from 'fs/promises'
 
+const INSTALL_DIR = process.env.INSTALL_DIR ?? '/opt/nixpanel'
+
 export default async function systemRoutes(fastify: FastifyInstance) {
   // GET /api/nixserver/system/stats
   fastify.get('/stats', { preHandler: [requireAdmin] }, async (request, reply) => {
@@ -121,4 +124,56 @@ export default async function systemRoutes(fastify: FastifyInstance) {
 
     return reply.send({ success: true, data: { message: 'Settings updated' } })
   })
+
+  // GET /api/nixserver/system/version
+  // Returns the installed version and checks GitHub for the latest available version.
+  fastify.get('/version', { preHandler: [requireAdmin] }, async (_request, reply) => {
+    // Read installed version from package.json
+    let currentVersion = '0.0.0'
+    try {
+      const pkg = JSON.parse(await readFile(`${INSTALL_DIR}/package.json`, 'utf8'))
+      currentVersion = pkg.version ?? '0.0.0'
+    } catch { /* running in dev or non-standard path */ }
+
+    // Check GitHub for latest version (5 s timeout, non-fatal)
+    let latestVersion: string | null = null
+    try {
+      const resp = await fetch(
+        'https://raw.githubusercontent.com/NixReaper/nixpanel-server/main/package.json',
+        { signal: AbortSignal.timeout(5_000) }
+      )
+      if (resp.ok) {
+        const json = await resp.json() as { version?: string }
+        latestVersion = json.version ?? null
+      }
+    } catch { /* offline or rate-limited */ }
+
+    return reply.send({
+      success: true,
+      data: {
+        currentVersion,
+        latestVersion,
+        updateAvailable: latestVersion !== null && latestVersion !== currentVersion,
+      },
+    })
+  })
+
+  // POST /api/nixserver/system/upgrade
+  // Fires the update script in the background and returns immediately.
+  // The service will restart ~60 s later once the build finishes.
+  fastify.post('/upgrade', { preHandler: [requireAdmin] }, async (_request, reply) => {
+    reply.send({
+      success: true,
+      data: { message: 'Upgrade started. The panel will be back online in about 60 seconds.' },
+    })
+
+    // Delay slightly to ensure the HTTP response is flushed before the service restarts
+    setTimeout(() => {
+      const child = spawn('bash', [`${INSTALL_DIR}/scripts/update.sh`], {
+        detached: true,
+        stdio: 'ignore',
+      })
+      child.unref()
+    }, 800)
+  })
 }