Add VPN configuration tools and agent documentation

Created comprehensive VPN setup tooling for Peaceful Spirit L2TP/IPsec connection
and enhanced agent documentation framework.

VPN Configuration (PST-NW-VPN):
- Setup-PST-L2TP-VPN.ps1: Automated L2TP/IPsec setup with split-tunnel and DNS
- Connect-PST-VPN.ps1: Connection helper with PPP adapter detection, DNS (192.168.0.2), and route config (192.168.0.0/24)
- Connect-PST-VPN-Standalone.ps1: Self-contained connection script for remote deployment
- Fix-PST-VPN-Auth.ps1: Authentication troubleshooting for CHAP/MSChapv2
- Diagnose-VPN-Interface.ps1: Comprehensive VPN interface and routing diagnostic
- Quick-Test-VPN.ps1: Fast connectivity verification (DNS/router/routes)
- Add-PST-VPN-Route-Manual.ps1: Manual route configuration helper
- vpn-connect.bat, vpn-disconnect.bat: Simple batch file shortcuts
- OpenVPN config files (Windows-compatible, abandoned for L2TP)

Key VPN Implementation Details:
- L2TP creates PPP adapter with connection name as interface description
- UniFi auto-configures DNS (192.168.0.2) but requires manual route to 192.168.0.0/24
- Split-tunnel enabled (only remote traffic through VPN)
- All-user connection for pre-login auto-connect via scheduled task
- Authentication: CHAP + MSChapv2 for UniFi compatibility

Agent Documentation:
- AGENT_QUICK_REFERENCE.md: Quick reference for all specialized agents
- documentation-squire.md: Documentation and task management specialist agent
- Updated all agent markdown files with standardized formatting

Project Organization:
- Moved conversation logs to dedicated directories (guru-connect-conversation-logs, guru-rmm-conversation-logs)
- Cleaned up old session JSONL files from projects/msp-tools/
- Added guru-connect infrastructure (agent, dashboard, proto, scripts, .gitea workflows)
- Added guru-rmm server components and deployment configs

Technical Notes:
- VPN IP pool: 192.168.4.x (client gets 192.168.4.6)
- Remote network: 192.168.0.0/24 (router at 192.168.0.10)
- PSK: rrClvnmUeXEFo90Ol+z7tfsAZHeSK6w7
- Credentials: pst-admin / 24Hearts$

Files: 15 VPN scripts, 2 agent docs, conversation log reorganization,
guru-connect/guru-rmm infrastructure additions

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

projects/msp-tools/guru-rmm/dashboard/src/App.tsx

@@ -0,0 +1,153 @@
+import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { AuthProvider, useAuth } from "./hooks/useAuth";
+import { Layout } from "./components/Layout";
+import { Login } from "./pages/Login";
+import { Register } from "./pages/Register";
+import { Dashboard } from "./pages/Dashboard";
+import { Clients } from "./pages/Clients";
+import { Sites } from "./pages/Sites";
+import { Agents } from "./pages/Agents";
+import { AgentDetail } from "./pages/AgentDetail";
+import { Commands } from "./pages/Commands";
+import { Settings } from "./pages/Settings";
+import "./index.css";
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 1000 * 60,
+      retry: 1,
+    },
+  },
+});
+
+function ProtectedRoute({ children }: { children: React.ReactNode }) {
+  const { user, isLoading } = useAuth();
+
+  if (isLoading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <p className="text-[hsl(var(--muted-foreground))]">Loading...</p>
+      </div>
+    );
+  }
+
+  if (!user) {
+    return <Navigate to="/login" replace />;
+  }
+
+  return <Layout>{children}</Layout>;
+}
+
+function PublicRoute({ children }: { children: React.ReactNode }) {
+  const { user, isLoading } = useAuth();
+
+  if (isLoading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <p className="text-[hsl(var(--muted-foreground))]">Loading...</p>
+      </div>
+    );
+  }
+
+  if (user) {
+    return <Navigate to="/" replace />;
+  }
+
+  return <>{children}</>;
+}
+
+function AppRoutes() {
+  return (
+    <Routes>
+      <Route
+        path="/login"
+        element={
+          <PublicRoute>
+            <Login />
+          </PublicRoute>
+        }
+      />
+      <Route
+        path="/register"
+        element={
+          <PublicRoute>
+            <Register />
+          </PublicRoute>
+        }
+      />
+      <Route
+        path="/"
+        element={
+          <ProtectedRoute>
+            <Dashboard />
+          </ProtectedRoute>
+        }
+      />
+      <Route
+        path="/clients"
+        element={
+          <ProtectedRoute>
+            <Clients />
+          </ProtectedRoute>
+        }
+      />
+      <Route
+        path="/sites"
+        element={
+          <ProtectedRoute>
+            <Sites />
+          </ProtectedRoute>
+        }
+      />
+      <Route
+        path="/agents"
+        element={
+          <ProtectedRoute>
+            <Agents />
+          </ProtectedRoute>
+        }
+      />
+      <Route
+        path="/agents/:id"
+        element={
+          <ProtectedRoute>
+            <AgentDetail />
+          </ProtectedRoute>
+        }
+      />
+      <Route
+        path="/commands"
+        element={
+          <ProtectedRoute>
+            <Commands />
+          </ProtectedRoute>
+        }
+      />
+      <Route
+        path="/settings"
+        element={
+          <ProtectedRoute>
+            <Settings />
+          </ProtectedRoute>
+        }
+      />
+      <Route path="*" element={<Navigate to="/" replace />} />
+    </Routes>
+  );
+}
+
+function App() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <BrowserRouter>
+        <AuthProvider>
+          <AppRoutes />
+        </AuthProvider>
+      </BrowserRouter>
+    </QueryClientProvider>
+  );
+}
+
+export default App;

projects/msp-tools/guru-rmm/dashboard/src/api/client.ts

@@ -0,0 +1,204 @@
+import axios from "axios";
+
+// Default to production URL, override with VITE_API_URL for local dev
+const API_URL = import.meta.env.VITE_API_URL || "https://rmm-api.azcomputerguru.com";
+
+export const api = axios.create({
+  baseURL: API_URL,
+  headers: {
+    "Content-Type": "application/json",
+  },
+});
+
+// Add auth token to requests
+api.interceptors.request.use((config) => {
+  const token = localStorage.getItem("token");
+  if (token) {
+    config.headers.Authorization = `Bearer ${token}`;
+  }
+  return config;
+});
+
+// Handle auth errors
+api.interceptors.response.use(
+  (response) => response,
+  (error) => {
+    if (error.response?.status === 401) {
+      localStorage.removeItem("token");
+      window.location.href = "/login";
+    }
+    return Promise.reject(error);
+  }
+);
+
+// API types
+export interface Agent {
+  id: string;
+  hostname: string;
+  os_type: string;
+  os_version: string | null;
+  agent_version: string | null;
+  status: "online" | "offline" | "error";
+  last_seen: string | null;
+  created_at: string;
+  device_id: string | null;
+  site_id: string | null;
+  site_name: string | null;
+  client_id: string | null;
+  client_name: string | null;
+}
+
+export interface Metrics {
+  id: number;
+  agent_id: string;
+  timestamp: string;
+  cpu_percent: number;
+  memory_percent: number;
+  memory_used_bytes: number;
+  disk_percent: number;
+  disk_used_bytes: number;
+  network_rx_bytes: number;
+  network_tx_bytes: number;
+  // Extended metrics
+  uptime_seconds?: number;
+  boot_time?: number;
+  logged_in_user?: string;
+  user_idle_seconds?: number;
+  public_ip?: string;
+  memory_total_bytes?: number;
+  disk_total_bytes?: number;
+}
+
+export interface NetworkInterface {
+  name: string;
+  mac_address?: string;
+  ipv4_addresses: string[];
+  ipv6_addresses: string[];
+}
+
+export interface AgentState {
+  agent_id: string;
+  network_interfaces?: NetworkInterface[];
+  network_state_hash?: string;
+  uptime_seconds?: number;
+  boot_time?: number;
+  logged_in_user?: string;
+  user_idle_seconds?: number;
+  public_ip?: string;
+  network_updated_at?: string;
+  metrics_updated_at?: string;
+}
+
+export interface Command {
+  id: string;
+  agent_id: string;
+  command_type: string;
+  command_text: string;
+  status: "pending" | "running" | "completed" | "failed";
+  exit_code: number | null;
+  stdout: string | null;
+  stderr: string | null;
+  created_at: string;
+  completed_at: string | null;
+}
+
+export interface User {
+  id: string;
+  email: string;
+  name: string | null;
+  role: string;
+}
+
+export interface Client {
+  id: string;
+  name: string;
+  code: string | null;
+  notes: string | null;
+  is_active: boolean;
+  created_at: string;
+  site_count: number;
+}
+
+export interface Site {
+  id: string;
+  client_id: string;
+  client_name: string | null;
+  name: string;
+  site_code: string;
+  address: string | null;
+  notes: string | null;
+  is_active: boolean;
+  created_at: string;
+  agent_count: number;
+}
+
+export interface CreateSiteResponse {
+  site: Site;
+  api_key: string;
+  message: string;
+}
+
+export interface LoginRequest {
+  email: string;
+  password: string;
+}
+
+export interface LoginResponse {
+  token: string;
+  user: User;
+}
+
+export interface RegisterRequest {
+  email: string;
+  password: string;
+  name?: string;
+}
+
+// API functions
+export const authApi = {
+  login: (data: LoginRequest) => api.post<LoginResponse>("/api/auth/login", data),
+  register: (data: RegisterRequest) => api.post<LoginResponse>("/api/auth/register", data),
+  me: () => api.get<User>("/api/auth/me"),
+};
+
+export const agentsApi = {
+  list: () => api.get<Agent[]>("/api/agents"),
+  listUnassigned: () => api.get<Agent[]>("/api/agents/unassigned"),
+  get: (id: string) => api.get<Agent>(`/api/agents/${id}`),
+  delete: (id: string) => api.delete(`/api/agents/${id}`),
+  move: (id: string, siteId: string | null) =>
+    api.post<Agent>(`/api/agents/${id}/move`, { site_id: siteId }),
+  getMetrics: (id: string, hours?: number) =>
+    api.get<Metrics[]>(`/api/agents/${id}/metrics`, { params: { hours } }),
+  getState: (id: string) => api.get<AgentState>(`/api/agents/${id}/state`),
+};
+
+export const commandsApi = {
+  send: (agentId: string, command: { command_type: string; command: string }) =>
+    api.post<Command>(`/api/agents/${agentId}/command`, command),
+  list: () => api.get<Command[]>("/api/commands"),
+  get: (id: string) => api.get<Command>(`/api/commands/${id}`),
+};
+
+export const clientsApi = {
+  list: () => api.get<Client[]>("/api/clients"),
+  get: (id: string) => api.get<Client>(`/api/clients/${id}`),
+  create: (data: { name: string; code?: string; notes?: string }) =>
+    api.post<Client>("/api/clients", data),
+  update: (id: string, data: { name?: string; code?: string; notes?: string; is_active?: boolean }) =>
+    api.put<Client>(`/api/clients/${id}`, data),
+  delete: (id: string) => api.delete(`/api/clients/${id}`),
+};
+
+export const sitesApi = {
+  list: () => api.get<Site[]>("/api/sites"),
+  get: (id: string) => api.get<Site>(`/api/sites/${id}`),
+  listByClient: (clientId: string) => api.get<Site[]>(`/api/clients/${clientId}/sites`),
+  create: (data: { client_id: string; name: string; address?: string; notes?: string }) =>
+    api.post<CreateSiteResponse>("/api/sites", data),
+  update: (id: string, data: { name?: string; address?: string; notes?: string; is_active?: boolean }) =>
+    api.put<Site>(`/api/sites/${id}`, data),
+  delete: (id: string) => api.delete(`/api/sites/${id}`),
+  regenerateApiKey: (id: string) =>
+    api.post<{ api_key: string; message: string }>(`/api/sites/${id}/regenerate-key`),
+};

projects/msp-tools/guru-rmm/dashboard/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>

projects/msp-tools/guru-rmm/dashboard/src/components/Button.tsx

@@ -0,0 +1,44 @@
+import { ButtonHTMLAttributes, forwardRef } from "react";
+import { cn } from "../lib/utils";
+
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
+  size?: "default" | "sm" | "lg" | "icon";
+}
+
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant = "default", size = "default", ...props }, ref) => {
+    return (
+      <button
+        className={cn(
+          "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+          {
+            "bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))] shadow hover:bg-[hsl(var(--primary))]/90":
+              variant === "default",
+            "bg-[hsl(var(--destructive))] text-[hsl(var(--destructive-foreground))] shadow-sm hover:bg-[hsl(var(--destructive))]/90":
+              variant === "destructive",
+            "border border-[hsl(var(--input))] bg-transparent shadow-sm hover:bg-[hsl(var(--accent))] hover:text-[hsl(var(--accent-foreground))]":
+              variant === "outline",
+            "bg-[hsl(var(--secondary))] text-[hsl(var(--secondary-foreground))] shadow-sm hover:bg-[hsl(var(--secondary))]/80":
+              variant === "secondary",
+            "hover:bg-[hsl(var(--accent))] hover:text-[hsl(var(--accent-foreground))]":
+              variant === "ghost",
+            "text-[hsl(var(--primary))] underline-offset-4 hover:underline": variant === "link",
+          },
+          {
+            "h-9 px-4 py-2": size === "default",
+            "h-8 rounded-md px-3 text-xs": size === "sm",
+            "h-10 rounded-md px-8": size === "lg",
+            "h-9 w-9": size === "icon",
+          },
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Button.displayName = "Button";
+
+export { Button };

projects/msp-tools/guru-rmm/dashboard/src/components/Card.tsx

@@ -0,0 +1,50 @@
+import { HTMLAttributes, forwardRef } from "react";
+import { cn } from "../lib/utils";
+
+const Card = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        "rounded-xl border border-[hsl(var(--border))] bg-[hsl(var(--card))] text-[hsl(var(--card-foreground))] shadow",
+        className
+      )}
+      {...props}
+    />
+  )
+);
+Card.displayName = "Card";
+
+const CardHeader = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
+  )
+);
+CardHeader.displayName = "CardHeader";
+
+const CardTitle = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h3
+      ref={ref}
+      className={cn("font-semibold leading-none tracking-tight", className)}
+      {...props}
+    />
+  )
+);
+CardTitle.displayName = "CardTitle";
+
+const CardDescription = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => (
+    <p ref={ref} className={cn("text-sm text-[hsl(var(--muted-foreground))]", className)} {...props} />
+  )
+);
+CardDescription.displayName = "CardDescription";
+
+const CardContent = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+  )
+);
+CardContent.displayName = "CardContent";
+
+export { Card, CardHeader, CardTitle, CardDescription, CardContent };

projects/msp-tools/guru-rmm/dashboard/src/components/Input.tsx

@@ -0,0 +1,21 @@
+import { InputHTMLAttributes, forwardRef } from "react";
+import { cn } from "../lib/utils";
+
+export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = forwardRef<HTMLInputElement, InputProps>(({ className, type, ...props }, ref) => {
+  return (
+    <input
+      type={type}
+      className={cn(
+        "flex h-9 w-full rounded-md border border-[hsl(var(--input))] bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-[hsl(var(--muted-foreground))] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[hsl(var(--ring))] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+Input.displayName = "Input";
+
+export { Input };

projects/msp-tools/guru-rmm/dashboard/src/components/Layout.tsx

@@ -0,0 +1,112 @@
+import { ReactNode } from "react";
+import { Link, useLocation, useNavigate } from "react-router-dom";
+import { LayoutDashboard, Server, Terminal, Settings, LogOut, Menu, X, Building2, MapPin } from "lucide-react";
+import { useState } from "react";
+import { useAuth } from "../hooks/useAuth";
+import { Button } from "./Button";
+
+interface LayoutProps {
+  children: ReactNode;
+}
+
+const navItems = [
+  { path: "/", label: "Dashboard", icon: LayoutDashboard },
+  { path: "/clients", label: "Clients", icon: Building2 },
+  { path: "/sites", label: "Sites", icon: MapPin },
+  { path: "/agents", label: "Agents", icon: Server },
+  { path: "/commands", label: "Commands", icon: Terminal },
+  { path: "/settings", label: "Settings", icon: Settings },
+];
+
+export function Layout({ children }: LayoutProps) {
+  const [sidebarOpen, setSidebarOpen] = useState(false);
+  const location = useLocation();
+  const navigate = useNavigate();
+  const { user, logout } = useAuth();
+
+  const handleLogout = () => {
+    logout();
+    navigate("/login");
+  };
+
+  return (
+    <div className="min-h-screen bg-[hsl(var(--background))]">
+      {/* Mobile header */}
+      <div className="lg:hidden flex items-center justify-between p-4 border-b border-[hsl(var(--border))]">
+        <span className="font-bold text-lg">GuruRMM</span>
+        <Button variant="ghost" size="icon" onClick={() => setSidebarOpen(!sidebarOpen)}>
+          {sidebarOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
+        </Button>
+      </div>
+
+      <div className="flex">
+        {/* Sidebar */}
+        <aside
+          className={`fixed inset-y-0 left-0 z-50 w-64 bg-[hsl(var(--card))] border-r border-[hsl(var(--border))] transform transition-transform duration-200 lg:translate-x-0 lg:static ${
+            sidebarOpen ? "translate-x-0" : "-translate-x-full"
+          }`}
+        >
+          <div className="flex flex-col h-full">
+            <div className="p-6 hidden lg:block">
+              <h1 className="text-xl font-bold">GuruRMM</h1>
+            </div>
+
+            <nav className="flex-1 px-4 space-y-1 mt-4 lg:mt-0">
+              {navItems.map((item) => {
+                const isActive = location.pathname === item.path;
+                return (
+                  <Link
+                    key={item.path}
+                    to={item.path}
+                    onClick={() => setSidebarOpen(false)}
+                    className={`flex items-center gap-3 px-3 py-2 rounded-md text-sm font-medium transition-colors ${
+                      isActive
+                        ? "bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))]"
+                        : "text-[hsl(var(--foreground))] hover:bg-[hsl(var(--muted))]"
+                    }`}
+                  >
+                    <item.icon className="h-5 w-5" />
+                    {item.label}
+                  </Link>
+                );
+              })}
+            </nav>
+
+            <div className="p-4 border-t border-[hsl(var(--border))]">
+              <div className="flex items-center gap-3 mb-3">
+                <div className="h-8 w-8 rounded-full bg-[hsl(var(--primary))] flex items-center justify-center text-[hsl(var(--primary-foreground))] text-sm font-medium">
+                  {user?.name?.[0] || user?.email?.[0] || "U"}
+                </div>
+                <div className="flex-1 min-w-0">
+                  <p className="text-sm font-medium truncate">{user?.name || user?.email}</p>
+                  <p className="text-xs text-[hsl(var(--muted-foreground))] truncate">
+                    {user?.role}
+                  </p>
+                </div>
+              </div>
+              <Button
+                variant="ghost"
+                className="w-full justify-start"
+                onClick={handleLogout}
+              >
+                <LogOut className="h-4 w-4 mr-2" />
+                Sign out
+              </Button>
+            </div>
+          </div>
+        </aside>
+
+        {/* Overlay for mobile */}
+        {sidebarOpen && (
+          <div
+            className="fixed inset-0 bg-black/50 z-40 lg:hidden"
+            onClick={() => setSidebarOpen(false)}
+          />
+        )}
+
+        {/* Main content */}
+        <main className="flex-1 p-6 lg:p-8">{children}</main>
+      </div>
+    </div>
+  );
+}

projects/msp-tools/guru-rmm/dashboard/src/hooks/useAuth.tsx

@@ -0,0 +1,68 @@
+import { createContext, useContext, useState, useEffect, ReactNode } from "react";
+import { User, authApi } from "../api/client";
+
+interface AuthContextType {
+  user: User | null;
+  token: string | null;
+  isLoading: boolean;
+  login: (email: string, password: string) => Promise<void>;
+  register: (email: string, password: string, name?: string) => Promise<void>;
+  logout: () => void;
+}
+
+const AuthContext = createContext<AuthContextType | null>(null);
+
+export function AuthProvider({ children }: { children: ReactNode }) {
+  const [user, setUser] = useState<User | null>(null);
+  const [token, setToken] = useState<string | null>(() => localStorage.getItem("token"));
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    if (token) {
+      authApi
+        .me()
+        .then((res) => setUser(res.data))
+        .catch(() => {
+          localStorage.removeItem("token");
+          setToken(null);
+        })
+        .finally(() => setIsLoading(false));
+    } else {
+      setIsLoading(false);
+    }
+  }, [token]);
+
+  const login = async (email: string, password: string) => {
+    const res = await authApi.login({ email, password });
+    localStorage.setItem("token", res.data.token);
+    setToken(res.data.token);
+    setUser(res.data.user);
+  };
+
+  const register = async (email: string, password: string, name?: string) => {
+    const res = await authApi.register({ email, password, name });
+    localStorage.setItem("token", res.data.token);
+    setToken(res.data.token);
+    setUser(res.data.user);
+  };
+
+  const logout = () => {
+    localStorage.removeItem("token");
+    setToken(null);
+    setUser(null);
+  };
+
+  return (
+    <AuthContext.Provider value={{ user, token, isLoading, login, register, logout }}>
+      {children}
+    </AuthContext.Provider>
+  );
+}
+
+export function useAuth() {
+  const context = useContext(AuthContext);
+  if (!context) {
+    throw new Error("useAuth must be used within an AuthProvider");
+  }
+  return context;
+}

projects/msp-tools/guru-rmm/dashboard/src/index.css

@@ -0,0 +1,57 @@
+@import "tailwindcss";
+
+/* Custom CSS variables for theming */
+:root {
+  --background: 0 0% 100%;
+  --foreground: 222.2 84% 4.9%;
+  --card: 0 0% 100%;
+  --card-foreground: 222.2 84% 4.9%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 222.2 84% 4.9%;
+  --primary: 221.2 83.2% 53.3%;
+  --primary-foreground: 210 40% 98%;
+  --secondary: 210 40% 96.1%;
+  --secondary-foreground: 222.2 47.4% 11.2%;
+  --muted: 210 40% 96.1%;
+  --muted-foreground: 215.4 16.3% 46.9%;
+  --accent: 210 40% 96.1%;
+  --accent-foreground: 222.2 47.4% 11.2%;
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 210 40% 98%;
+  --border: 214.3 31.8% 91.4%;
+  --input: 214.3 31.8% 91.4%;
+  --ring: 221.2 83.2% 53.3%;
+  --radius: 0.5rem;
+}
+
+.dark {
+  --background: 222.2 84% 4.9%;
+  --foreground: 210 40% 98%;
+  --card: 222.2 84% 4.9%;
+  --card-foreground: 210 40% 98%;
+  --popover: 222.2 84% 4.9%;
+  --popover-foreground: 210 40% 98%;
+  --primary: 217.2 91.2% 59.8%;
+  --primary-foreground: 222.2 47.4% 11.2%;
+  --secondary: 217.2 32.6% 17.5%;
+  --secondary-foreground: 210 40% 98%;
+  --muted: 217.2 32.6% 17.5%;
+  --muted-foreground: 215 20.2% 65.1%;
+  --accent: 217.2 32.6% 17.5%;
+  --accent-foreground: 210 40% 98%;
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 210 40% 98%;
+  --border: 217.2 32.6% 17.5%;
+  --input: 217.2 32.6% 17.5%;
+  --ring: 224.3 76.3% 48%;
+}
+
+* {
+  border-color: hsl(var(--border));
+}
+
+body {
+  background-color: hsl(var(--background));
+  color: hsl(var(--foreground));
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}

projects/msp-tools/guru-rmm/dashboard/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

projects/msp-tools/guru-rmm/dashboard/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

projects/msp-tools/guru-rmm/dashboard/src/pages/AgentDetail.tsx

@@ -0,0 +1,449 @@
+import { useState, FormEvent } from "react";
+import { useParams, Link } from "react-router-dom";
+import { useQuery, useMutation } from "@tanstack/react-query";
+import {
+  ArrowLeft,
+  Send,
+  Cpu,
+  HardDrive,
+  Network,
+  MemoryStick,
+  Clock,
+  User,
+  Globe,
+  Wifi,
+  Activity,
+} from "lucide-react";
+import {
+  LineChart,
+  Line,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+  Legend,
+} from "recharts";
+import { agentsApi, commandsApi, Metrics, AgentState } from "../api/client";
+import { Card, CardHeader, CardTitle, CardContent } from "../components/Card";
+import { Button } from "../components/Button";
+import { Input } from "../components/Input";
+
+function MetricCard({
+  title,
+  value,
+  icon: Icon,
+  unit,
+  subValue,
+}: {
+  title: string;
+  value: number | string | null;
+  icon: React.ComponentType<{ className?: string }>;
+  unit: string;
+  subValue?: string;
+}) {
+  return (
+    <Card>
+      <CardContent className="pt-6">
+        <div className="flex items-center justify-between">
+          <div>
+            <p className="text-sm text-[hsl(var(--muted-foreground))]">{title}</p>
+            <p className="text-2xl font-bold">
+              {value !== null ? `${typeof value === "number" ? value.toFixed(1) : value}${unit}` : "-"}
+            </p>
+            {subValue && (
+              <p className="text-xs text-[hsl(var(--muted-foreground))]">{subValue}</p>
+            )}
+          </div>
+          <Icon className="h-8 w-8 text-[hsl(var(--muted-foreground))]" />
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+function formatUptime(seconds: number): string {
+  const days = Math.floor(seconds / 86400);
+  const hours = Math.floor((seconds % 86400) / 3600);
+  const minutes = Math.floor((seconds % 3600) / 60);
+
+  if (days > 0) {
+    return `${days}d ${hours}h ${minutes}m`;
+  } else if (hours > 0) {
+    return `${hours}h ${minutes}m`;
+  } else {
+    return `${minutes}m`;
+  }
+}
+
+function formatIdleTime(seconds: number): string {
+  if (seconds < 60) return `${seconds}s`;
+  if (seconds < 3600) return `${Math.floor(seconds / 60)}m`;
+  return `${Math.floor(seconds / 3600)}h ${Math.floor((seconds % 3600) / 60)}m`;
+}
+
+function formatBytes(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  if (bytes < 1024 * 1024 * 1024) return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
+  return `${(bytes / 1024 / 1024 / 1024).toFixed(1)} GB`;
+}
+
+function MetricsChart({ metrics }: { metrics: Metrics[] }) {
+  // Reverse to show oldest first, take last 60 points
+  const chartData = [...metrics]
+    .reverse()
+    .slice(-60)
+    .map((m) => ({
+      time: new Date(m.timestamp).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }),
+      cpu: m.cpu_percent,
+      memory: m.memory_percent,
+    }));
+
+  if (chartData.length === 0) {
+    return (
+      <div className="h-64 flex items-center justify-center text-[hsl(var(--muted-foreground))]">
+        No metrics data available
+      </div>
+    );
+  }
+
+  return (
+    <ResponsiveContainer width="100%" height={250}>
+      <LineChart data={chartData}>
+        <CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border))" />
+        <XAxis
+          dataKey="time"
+          stroke="hsl(var(--muted-foreground))"
+          tick={{ fontSize: 12 }}
+          interval="preserveStartEnd"
+        />
+        <YAxis
+          domain={[0, 100]}
+          stroke="hsl(var(--muted-foreground))"
+          tick={{ fontSize: 12 }}
+          tickFormatter={(v) => `${v}%`}
+        />
+        <Tooltip
+          contentStyle={{
+            backgroundColor: "hsl(var(--card))",
+            border: "1px solid hsl(var(--border))",
+            borderRadius: "8px",
+          }}
+          labelStyle={{ color: "hsl(var(--foreground))" }}
+        />
+        <Legend />
+        <Line
+          type="monotone"
+          dataKey="cpu"
+          name="CPU %"
+          stroke="#3b82f6"
+          strokeWidth={2}
+          dot={false}
+        />
+        <Line
+          type="monotone"
+          dataKey="memory"
+          name="Memory %"
+          stroke="#10b981"
+          strokeWidth={2}
+          dot={false}
+        />
+      </LineChart>
+    </ResponsiveContainer>
+  );
+}
+
+function NetworkInterfacesCard({ state }: { state: AgentState | null }) {
+  if (!state?.network_interfaces || state.network_interfaces.length === 0) {
+    return null;
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <Wifi className="h-5 w-5" />
+          Network Interfaces
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="space-y-4">
+          {state.network_interfaces.map((iface, idx) => (
+            <div key={idx} className="border-b border-[hsl(var(--border))] pb-3 last:border-0 last:pb-0">
+              <div className="font-medium">{iface.name}</div>
+              {iface.mac_address && (
+                <div className="text-xs text-[hsl(var(--muted-foreground))] font-mono">
+                  MAC: {iface.mac_address}
+                </div>
+              )}
+              <div className="mt-1 space-y-1">
+                {iface.ipv4_addresses.map((ip, i) => (
+                  <div key={i} className="text-sm font-mono text-[hsl(var(--primary))]">
+                    {ip}
+                  </div>
+                ))}
+                {iface.ipv6_addresses.slice(0, 2).map((ip, i) => (
+                  <div key={i} className="text-xs font-mono text-[hsl(var(--muted-foreground))]">
+                    {ip}
+                  </div>
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+export function AgentDetail() {
+  const { id } = useParams<{ id: string }>();
+  const [command, setCommand] = useState("");
+  const [commandType, setCommandType] = useState("shell");
+
+  const { data: agent, isLoading: agentLoading } = useQuery({
+    queryKey: ["agent", id],
+    queryFn: () => agentsApi.get(id!).then((res) => res.data),
+    enabled: !!id,
+  });
+
+  // Get more metrics for the chart (last 2 hours = 120 data points at 1min intervals)
+  const { data: metrics = [] } = useQuery({
+    queryKey: ["agent-metrics", id],
+    queryFn: () => agentsApi.getMetrics(id!, 2).then((res) => res.data),
+    enabled: !!id,
+    refetchInterval: 30000,
+  });
+
+  const { data: agentState } = useQuery({
+    queryKey: ["agent-state", id],
+    queryFn: () => agentsApi.getState(id!).then((res) => res.data).catch(() => null),
+    enabled: !!id,
+    refetchInterval: 60000,
+  });
+
+  const latestMetrics = metrics[0] as Metrics | undefined;
+
+  const sendCommandMutation = useMutation({
+    mutationFn: (cmd: { command_type: string; command: string }) =>
+      commandsApi.send(id!, cmd),
+    onSuccess: () => {
+      setCommand("");
+    },
+  });
+
+  const handleSendCommand = (e: FormEvent) => {
+    e.preventDefault();
+    if (!command.trim()) return;
+    sendCommandMutation.mutate({ command_type: commandType, command });
+  };
+
+  if (agentLoading) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <p className="text-[hsl(var(--muted-foreground))]">Loading agent...</p>
+      </div>
+    );
+  }
+
+  if (!agent) {
+    return (
+      <div className="space-y-4">
+        <Link to="/agents" className="flex items-center gap-2 text-[hsl(var(--primary))]">
+          <ArrowLeft className="h-4 w-4" />
+          Back to agents
+        </Link>
+        <p className="text-[hsl(var(--muted-foreground))]">Agent not found.</p>
+      </div>
+    );
+  }
+
+  // Use agent state for extended info, fallback to latest metrics
+  const uptime = agentState?.uptime_seconds ?? latestMetrics?.uptime_seconds;
+  const publicIp = agentState?.public_ip ?? latestMetrics?.public_ip;
+  const loggedInUser = agentState?.logged_in_user ?? latestMetrics?.logged_in_user;
+  const idleTime = agentState?.user_idle_seconds ?? latestMetrics?.user_idle_seconds;
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex items-center gap-4">
+        <Link to="/agents" className="text-[hsl(var(--primary))]">
+          <ArrowLeft className="h-5 w-5" />
+        </Link>
+        <div>
+          <h1 className="text-3xl font-bold">{agent.hostname}</h1>
+          <p className="text-[hsl(var(--muted-foreground))]">
+            {agent.os_type} {agent.os_version && `(${agent.os_version})`}
+          </p>
+        </div>
+        <span
+          className={`ml-auto px-3 py-1 rounded-full text-sm font-medium ${
+            agent.status === "online"
+              ? "bg-green-100 text-green-800"
+              : agent.status === "error"
+              ? "bg-red-100 text-red-800"
+              : "bg-gray-100 text-gray-800"
+          }`}
+        >
+          {agent.status}
+        </span>
+      </div>
+
+      {/* Primary Metrics */}
+      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+        <MetricCard
+          title="CPU Usage"
+          value={latestMetrics?.cpu_percent ?? null}
+          icon={Cpu}
+          unit="%"
+        />
+        <MetricCard
+          title="Memory Usage"
+          value={latestMetrics?.memory_percent ?? null}
+          icon={MemoryStick}
+          unit="%"
+          subValue={latestMetrics?.memory_used_bytes ? formatBytes(latestMetrics.memory_used_bytes) : undefined}
+        />
+        <MetricCard
+          title="Disk Usage"
+          value={latestMetrics?.disk_percent ?? null}
+          icon={HardDrive}
+          unit="%"
+          subValue={latestMetrics?.disk_used_bytes ? formatBytes(latestMetrics.disk_used_bytes) : undefined}
+        />
+        <MetricCard
+          title="Network RX"
+          value={
+            latestMetrics?.network_rx_bytes
+              ? (latestMetrics.network_rx_bytes / 1024 / 1024).toFixed(1)
+              : null
+          }
+          icon={Network}
+          unit=" MB"
+        />
+      </div>
+
+      {/* Extended Info */}
+      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+        <MetricCard
+          title="Uptime"
+          value={uptime ? formatUptime(uptime) : null}
+          icon={Clock}
+          unit=""
+        />
+        <MetricCard
+          title="Public IP"
+          value={publicIp ?? null}
+          icon={Globe}
+          unit=""
+        />
+        <MetricCard
+          title="Logged In User"
+          value={loggedInUser ?? null}
+          icon={User}
+          unit=""
+        />
+        <MetricCard
+          title="User Idle"
+          value={idleTime !== undefined && idleTime !== null ? formatIdleTime(idleTime) : null}
+          icon={Activity}
+          unit=""
+        />
+      </div>
+
+      {/* Usage Chart */}
+      <Card>
+        <CardHeader>
+          <CardTitle>CPU &amp; Memory Usage (Last 2 Hours)</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <MetricsChart metrics={metrics} />
+        </CardContent>
+      </Card>
+
+      {/* Network Interfaces and Remote Command side by side */}
+      <div className="grid gap-6 lg:grid-cols-2">
+        <NetworkInterfacesCard state={agentState ?? null} />
+
+        <Card>
+          <CardHeader>
+            <CardTitle>Remote Command</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <form onSubmit={handleSendCommand} className="space-y-4">
+              <div className="flex items-center gap-4">
+                <select
+                  value={commandType}
+                  onChange={(e) => setCommandType(e.target.value)}
+                  className="flex h-9 rounded-md border border-[hsl(var(--input))] bg-transparent px-3 py-1 text-sm shadow-sm"
+                >
+                  <option value="shell">Shell</option>
+                  <option value="powershell">PowerShell</option>
+                </select>
+                <Input
+                  placeholder="Enter command..."
+                  value={command}
+                  onChange={(e) => setCommand(e.target.value)}
+                  className="flex-1"
+                />
+                <Button type="submit" disabled={sendCommandMutation.isPending || !command.trim()}>
+                  <Send className="h-4 w-4 mr-2" />
+                  Send
+                </Button>
+              </div>
+              {sendCommandMutation.isSuccess && (
+                <p className="text-sm text-green-600">Command sent successfully!</p>
+              )}
+              {sendCommandMutation.isError && (
+                <p className="text-sm text-[hsl(var(--destructive))]">
+                  Failed to send command. Please try again.
+                </p>
+              )}
+            </form>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Agent Information */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Agent Information</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <dl className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
+            <div>
+              <dt className="text-[hsl(var(--muted-foreground))]">Agent ID</dt>
+              <dd className="font-mono text-xs break-all">{agent.id}</dd>
+            </div>
+            <div>
+              <dt className="text-[hsl(var(--muted-foreground))]">Agent Version</dt>
+              <dd>{agent.agent_version || "-"}</dd>
+            </div>
+            <div>
+              <dt className="text-[hsl(var(--muted-foreground))]">Registered</dt>
+              <dd>{new Date(agent.created_at).toLocaleString()}</dd>
+            </div>
+            <div>
+              <dt className="text-[hsl(var(--muted-foreground))]">Last Seen</dt>
+              <dd>{agent.last_seen ? new Date(agent.last_seen).toLocaleString() : "Never"}</dd>
+            </div>
+            {agent.site_name && (
+              <div>
+                <dt className="text-[hsl(var(--muted-foreground))]">Site</dt>
+                <dd>{agent.site_name}</dd>
+              </div>
+            )}
+            {agent.client_name && (
+              <div>
+                <dt className="text-[hsl(var(--muted-foreground))]">Client</dt>
+                <dd>{agent.client_name}</dd>
+              </div>
+            )}
+          </dl>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

projects/msp-tools/guru-rmm/dashboard/src/pages/Agents.tsx

@@ -0,0 +1,349 @@
+import { useState } from "react";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { Link } from "react-router-dom";
+import { Trash2, Terminal, RefreshCw, MoveRight, Building2, MapPin } from "lucide-react";
+import { agentsApi, sitesApi, Agent, Site } from "../api/client";
+import { Card, CardHeader, CardTitle, CardContent } from "../components/Card";
+import { Button } from "../components/Button";
+import { Input } from "../components/Input";
+
+function AgentStatusBadge({ status }: { status: Agent["status"] }) {
+  const colors = {
+    online: "bg-green-100 text-green-800",
+    offline: "bg-gray-100 text-gray-800",
+    error: "bg-red-100 text-red-800",
+  };
+
+  return (
+    <span className={`px-2 py-1 rounded-full text-xs font-medium ${colors[status]}`}>
+      {status}
+    </span>
+  );
+}
+
+function MoveAgentModal({
+  agent,
+  sites,
+  onClose,
+  onMove,
+  isLoading,
+}: {
+  agent: Agent;
+  sites: Site[];
+  onClose: () => void;
+  onMove: (siteId: string | null) => void;
+  isLoading: boolean;
+}) {
+  const [selectedSiteId, setSelectedSiteId] = useState<string>(agent.site_id || "");
+
+  return (
+    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+      <div className="bg-[hsl(var(--card))] rounded-lg p-6 w-full max-w-md">
+        <h2 className="text-xl font-bold mb-4">Move Agent</h2>
+        <p className="text-[hsl(var(--muted-foreground))] mb-4">
+          Move <strong>{agent.hostname}</strong> to a different site
+        </p>
+
+        <div className="mb-4">
+          <label className="block text-sm font-medium mb-2">Select Site</label>
+          <select
+            value={selectedSiteId}
+            onChange={(e) => setSelectedSiteId(e.target.value)}
+            className="w-full px-3 py-2 rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--background))] text-sm"
+          >
+            <option value="">-- Unassigned --</option>
+            {sites.map((site) => (
+              <option key={site.id} value={site.id}>
+                {site.client_name} → {site.name} ({site.site_code})
+              </option>
+            ))}
+          </select>
+        </div>
+
+        <div className="flex justify-end gap-2 pt-4">
+          <Button type="button" variant="ghost" onClick={onClose}>
+            Cancel
+          </Button>
+          <Button
+            onClick={() => onMove(selectedSiteId || null)}
+            disabled={isLoading || selectedSiteId === (agent.site_id || "")}
+          >
+            {isLoading ? "Moving..." : "Move Agent"}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function Agents() {
+  const [search, setSearch] = useState("");
+  const [deleteConfirm, setDeleteConfirm] = useState<string | null>(null);
+  const [movingAgent, setMovingAgent] = useState<Agent | null>(null);
+  const [filterClient, setFilterClient] = useState<string>("");
+  const [filterSite, setFilterSite] = useState<string>("");
+  const queryClient = useQueryClient();
+
+  const { data: agents = [], isLoading, refetch } = useQuery({
+    queryKey: ["agents"],
+    queryFn: () => agentsApi.list().then((res) => res.data),
+    refetchInterval: 30000,
+  });
+
+  const { data: sites = [] } = useQuery({
+    queryKey: ["sites"],
+    queryFn: () => sitesApi.list().then((res) => res.data),
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: (id: string) => agentsApi.delete(id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["agents"] });
+      setDeleteConfirm(null);
+    },
+  });
+
+  const moveMutation = useMutation({
+    mutationFn: ({ agentId, siteId }: { agentId: string; siteId: string | null }) =>
+      agentsApi.move(agentId, siteId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["agents"] });
+      queryClient.invalidateQueries({ queryKey: ["sites"] });
+      setMovingAgent(null);
+    },
+  });
+
+  // Get unique clients from agents
+  const clients = [...new Set(agents.filter((a: Agent) => a.client_name).map((a: Agent) => a.client_name))];
+
+  // Filter agents
+  const filteredAgents = agents.filter((agent: Agent) => {
+    const matchesSearch =
+      agent.hostname.toLowerCase().includes(search.toLowerCase()) ||
+      agent.os_type.toLowerCase().includes(search.toLowerCase()) ||
+      (agent.client_name && agent.client_name.toLowerCase().includes(search.toLowerCase())) ||
+      (agent.site_name && agent.site_name.toLowerCase().includes(search.toLowerCase()));
+
+    const matchesClient = !filterClient || agent.client_name === filterClient;
+    const matchesSite = !filterSite || agent.site_id === filterSite;
+
+    return matchesSearch && matchesClient && matchesSite;
+  });
+
+  // Group agents by client > site for display
+  const groupedAgents = filteredAgents.reduce((acc: Record<string, Record<string, Agent[]>>, agent: Agent) => {
+    const clientKey = agent.client_name || "Unassigned";
+    const siteKey = agent.site_name || "No Site";
+
+    if (!acc[clientKey]) acc[clientKey] = {};
+    if (!acc[clientKey][siteKey]) acc[clientKey][siteKey] = [];
+    acc[clientKey][siteKey].push(agent);
+
+    return acc;
+  }, {});
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-3xl font-bold">Agents</h1>
+          <p className="text-[hsl(var(--muted-foreground))]">
+            Manage your monitored endpoints
+          </p>
+        </div>
+        <Button variant="outline" size="sm" onClick={() => refetch()}>
+          <RefreshCw className="h-4 w-4 mr-2" />
+          Refresh
+        </Button>
+      </div>
+
+      <div className="flex flex-wrap items-center gap-4">
+        <Input
+          placeholder="Search agents..."
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          className="max-w-sm"
+        />
+        <select
+          value={filterClient}
+          onChange={(e) => {
+            setFilterClient(e.target.value);
+            setFilterSite("");
+          }}
+          className="px-3 py-2 rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--background))] text-sm"
+        >
+          <option value="">All Clients</option>
+          <option value="">-- Unassigned --</option>
+          {clients.map((client) => (
+            <option key={client} value={client || ""}>
+              {client}
+            </option>
+          ))}
+        </select>
+        {filterClient && (
+          <select
+            value={filterSite}
+            onChange={(e) => setFilterSite(e.target.value)}
+            className="px-3 py-2 rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--background))] text-sm"
+          >
+            <option value="">All Sites</option>
+            {sites
+              .filter((s: Site) => s.client_name === filterClient)
+              .map((site: Site) => (
+                <option key={site.id} value={site.id}>
+                  {site.name}
+                </option>
+              ))}
+          </select>
+        )}
+      </div>
+
+      {/* Grouped View */}
+      {Object.entries(groupedAgents).map(([clientName, siteGroups]) => (
+        <Card key={clientName}>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <Building2 className="h-5 w-5" />
+              {clientName}
+              <span className="text-sm font-normal text-[hsl(var(--muted-foreground))]">
+                ({Object.values(siteGroups).flat().length} agents)
+              </span>
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            {Object.entries(siteGroups).map(([siteName, siteAgents]) => (
+              <div key={siteName} className="mb-6 last:mb-0">
+                <div className="flex items-center gap-2 mb-3 text-sm font-medium text-[hsl(var(--muted-foreground))]">
+                  <MapPin className="h-4 w-4" />
+                  {siteName}
+                  <span className="text-xs">({siteAgents.length} agents)</span>
+                </div>
+                <div className="overflow-x-auto">
+                  <table className="w-full">
+                    <thead>
+                      <tr className="border-b border-[hsl(var(--border))]">
+                        <th className="text-left py-2 px-4 font-medium text-sm">Hostname</th>
+                        <th className="text-left py-2 px-4 font-medium text-sm">OS</th>
+                        <th className="text-left py-2 px-4 font-medium text-sm">Status</th>
+                        <th className="text-left py-2 px-4 font-medium text-sm">Last Seen</th>
+                        <th className="text-left py-2 px-4 font-medium text-sm">Version</th>
+                        <th className="text-right py-2 px-4 font-medium text-sm">Actions</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {siteAgents.map((agent: Agent) => (
+                        <tr
+                          key={agent.id}
+                          className="border-b border-[hsl(var(--border))] hover:bg-[hsl(var(--muted))]/50"
+                        >
+                          <td className="py-2 px-4">
+                            <Link
+                              to={`/agents/${agent.id}`}
+                              className="font-medium hover:underline text-[hsl(var(--primary))]"
+                            >
+                              {agent.hostname}
+                            </Link>
+                          </td>
+                          <td className="py-2 px-4 text-sm">
+                            {agent.os_type}
+                            {agent.os_version && (
+                              <span className="text-[hsl(var(--muted-foreground))]">
+                                {" "}({agent.os_version})
+                              </span>
+                            )}
+                          </td>
+                          <td className="py-2 px-4">
+                            <AgentStatusBadge status={agent.status} />
+                          </td>
+                          <td className="py-2 px-4 text-sm text-[hsl(var(--muted-foreground))]">
+                            {agent.last_seen
+                              ? new Date(agent.last_seen).toLocaleString()
+                              : "Never"}
+                          </td>
+                          <td className="py-2 px-4 text-sm text-[hsl(var(--muted-foreground))]">
+                            {agent.agent_version || "-"}
+                          </td>
+                          <td className="py-2 px-4">
+                            <div className="flex items-center justify-end gap-1">
+                              <Button
+                                variant="ghost"
+                                size="icon"
+                                title="Move to different site"
+                                onClick={() => setMovingAgent(agent)}
+                              >
+                                <MoveRight className="h-4 w-4" />
+                              </Button>
+                              <Link to={`/agents/${agent.id}`}>
+                                <Button variant="ghost" size="icon" title="Open terminal">
+                                  <Terminal className="h-4 w-4" />
+                                </Button>
+                              </Link>
+                              {deleteConfirm === agent.id ? (
+                                <div className="flex items-center gap-1">
+                                  <Button
+                                    variant="destructive"
+                                    size="sm"
+                                    onClick={() => deleteMutation.mutate(agent.id)}
+                                    disabled={deleteMutation.isPending}
+                                  >
+                                    Confirm
+                                  </Button>
+                                  <Button
+                                    variant="ghost"
+                                    size="sm"
+                                    onClick={() => setDeleteConfirm(null)}
+                                  >
+                                    Cancel
+                                  </Button>
+                                </div>
+                              ) : (
+                                <Button
+                                  variant="ghost"
+                                  size="icon"
+                                  title="Delete agent"
+                                  onClick={() => setDeleteConfirm(agent.id)}
+                                >
+                                  <Trash2 className="h-4 w-4" />
+                                </Button>
+                              )}
+                            </div>
+                          </td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            ))}
+          </CardContent>
+        </Card>
+      ))}
+
+      {isLoading && (
+        <p className="text-[hsl(var(--muted-foreground))]">Loading agents...</p>
+      )}
+
+      {!isLoading && filteredAgents.length === 0 && (
+        <Card>
+          <CardContent className="py-8 text-center">
+            <p className="text-[hsl(var(--muted-foreground))]">
+              {search || filterClient ? "No agents match your filters." : "No agents registered yet."}
+            </p>
+          </CardContent>
+        </Card>
+      )}
+
+      {movingAgent && (
+        <MoveAgentModal
+          agent={movingAgent}
+          sites={sites}
+          onClose={() => setMovingAgent(null)}
+          onMove={(siteId) =>
+            moveMutation.mutate({ agentId: movingAgent.id, siteId })
+          }
+          isLoading={moveMutation.isPending}
+        />
+      )}
+    </div>
+  );
+}

projects/msp-tools/guru-rmm/dashboard/src/pages/Clients.tsx

@@ -0,0 +1,304 @@
+import { useState } from "react";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { Plus, Trash2, Edit2, Building2, RefreshCw } from "lucide-react";
+import { clientsApi, Client } from "../api/client";
+import { Card, CardHeader, CardTitle, CardContent } from "../components/Card";
+import { Button } from "../components/Button";
+import { Input } from "../components/Input";
+
+interface ClientFormData {
+  name: string;
+  code: string;
+  notes: string;
+}
+
+function ClientModal({
+  client,
+  onClose,
+  onSave,
+  isLoading,
+}: {
+  client?: Client;
+  onClose: () => void;
+  onSave: (data: ClientFormData) => void;
+  isLoading: boolean;
+}) {
+  const [formData, setFormData] = useState<ClientFormData>({
+    name: client?.name || "",
+    code: client?.code || "",
+    notes: client?.notes || "",
+  });
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    onSave(formData);
+  };
+
+  return (
+    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+      <div className="bg-[hsl(var(--card))] rounded-lg p-6 w-full max-w-md">
+        <h2 className="text-xl font-bold mb-4">
+          {client ? "Edit Client" : "New Client"}
+        </h2>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <label className="block text-sm font-medium mb-1">Name *</label>
+            <Input
+              value={formData.name}
+              onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+              placeholder="Company Name"
+              required
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium mb-1">Code</label>
+            <Input
+              value={formData.code}
+              onChange={(e) => setFormData({ ...formData, code: e.target.value.toUpperCase() })}
+              placeholder="ACME (optional short code)"
+              maxLength={20}
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium mb-1">Notes</label>
+            <textarea
+              value={formData.notes}
+              onChange={(e) => setFormData({ ...formData, notes: e.target.value })}
+              placeholder="Optional notes..."
+              className="w-full px-3 py-2 rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--background))] text-sm"
+              rows={3}
+            />
+          </div>
+          <div className="flex justify-end gap-2 pt-4">
+            <Button type="button" variant="ghost" onClick={onClose}>
+              Cancel
+            </Button>
+            <Button type="submit" disabled={isLoading || !formData.name.trim()}>
+              {isLoading ? "Saving..." : client ? "Update" : "Create"}
+            </Button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
+
+export function Clients() {
+  const [search, setSearch] = useState("");
+  const [showModal, setShowModal] = useState(false);
+  const [editingClient, setEditingClient] = useState<Client | undefined>();
+  const [deleteConfirm, setDeleteConfirm] = useState<string | null>(null);
+  const queryClient = useQueryClient();
+
+  const { data: clients = [], isLoading, refetch } = useQuery({
+    queryKey: ["clients"],
+    queryFn: () => clientsApi.list().then((res) => res.data),
+  });
+
+  const createMutation = useMutation({
+    mutationFn: (data: ClientFormData) => clientsApi.create(data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["clients"] });
+      setShowModal(false);
+    },
+  });
+
+  const updateMutation = useMutation({
+    mutationFn: ({ id, data }: { id: string; data: ClientFormData }) =>
+      clientsApi.update(id, data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["clients"] });
+      setShowModal(false);
+      setEditingClient(undefined);
+    },
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: (id: string) => clientsApi.delete(id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["clients"] });
+      setDeleteConfirm(null);
+    },
+  });
+
+  const handleSave = (data: ClientFormData) => {
+    if (editingClient) {
+      updateMutation.mutate({ id: editingClient.id, data });
+    } else {
+      createMutation.mutate(data);
+    }
+  };
+
+  const handleEdit = (client: Client) => {
+    setEditingClient(client);
+    setShowModal(true);
+  };
+
+  const handleCloseModal = () => {
+    setShowModal(false);
+    setEditingClient(undefined);
+  };
+
+  const filteredClients = clients.filter(
+    (client: Client) =>
+      client.name.toLowerCase().includes(search.toLowerCase()) ||
+      (client.code && client.code.toLowerCase().includes(search.toLowerCase()))
+  );
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-3xl font-bold">Clients</h1>
+          <p className="text-[hsl(var(--muted-foreground))]">
+            Manage your client organizations
+          </p>
+        </div>
+        <div className="flex gap-2">
+          <Button variant="outline" size="sm" onClick={() => refetch()}>
+            <RefreshCw className="h-4 w-4 mr-2" />
+            Refresh
+          </Button>
+          <Button size="sm" onClick={() => setShowModal(true)}>
+            <Plus className="h-4 w-4 mr-2" />
+            Add Client
+          </Button>
+        </div>
+      </div>
+
+      <div className="flex items-center gap-4">
+        <Input
+          placeholder="Search clients..."
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          className="max-w-sm"
+        />
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>All Clients</CardTitle>
+        </CardHeader>
+        <CardContent>
+          {isLoading ? (
+            <p className="text-[hsl(var(--muted-foreground))]">Loading clients...</p>
+          ) : filteredClients.length === 0 ? (
+            <div className="text-center py-8">
+              <Building2 className="h-12 w-12 mx-auto text-[hsl(var(--muted-foreground))] mb-4" />
+              <p className="text-[hsl(var(--muted-foreground))]">
+                {search ? "No clients match your search." : "No clients yet. Add your first client to get started."}
+              </p>
+            </div>
+          ) : (
+            <div className="overflow-x-auto">
+              <table className="w-full">
+                <thead>
+                  <tr className="border-b border-[hsl(var(--border))]">
+                    <th className="text-left py-3 px-4 font-medium">Name</th>
+                    <th className="text-left py-3 px-4 font-medium">Code</th>
+                    <th className="text-left py-3 px-4 font-medium">Sites</th>
+                    <th className="text-left py-3 px-4 font-medium">Status</th>
+                    <th className="text-left py-3 px-4 font-medium">Created</th>
+                    <th className="text-right py-3 px-4 font-medium">Actions</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {filteredClients.map((client: Client) => (
+                    <tr
+                      key={client.id}
+                      className="border-b border-[hsl(var(--border))] hover:bg-[hsl(var(--muted))]/50"
+                    >
+                      <td className="py-3 px-4">
+                        <div className="font-medium">{client.name}</div>
+                        {client.notes && (
+                          <div className="text-sm text-[hsl(var(--muted-foreground))] truncate max-w-xs">
+                            {client.notes}
+                          </div>
+                        )}
+                      </td>
+                      <td className="py-3 px-4">
+                        {client.code ? (
+                          <span className="px-2 py-1 bg-[hsl(var(--muted))] rounded text-sm font-mono">
+                            {client.code}
+                          </span>
+                        ) : (
+                          <span className="text-[hsl(var(--muted-foreground))]">-</span>
+                        )}
+                      </td>
+                      <td className="py-3 px-4">
+                        <span className="text-sm">{client.site_count} sites</span>
+                      </td>
+                      <td className="py-3 px-4">
+                        <span
+                          className={`px-2 py-1 rounded-full text-xs font-medium ${
+                            client.is_active
+                              ? "bg-green-100 text-green-800"
+                              : "bg-gray-100 text-gray-800"
+                          }`}
+                        >
+                          {client.is_active ? "Active" : "Inactive"}
+                        </span>
+                      </td>
+                      <td className="py-3 px-4 text-sm text-[hsl(var(--muted-foreground))]">
+                        {new Date(client.created_at).toLocaleDateString()}
+                      </td>
+                      <td className="py-3 px-4">
+                        <div className="flex items-center justify-end gap-2">
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            title="Edit client"
+                            onClick={() => handleEdit(client)}
+                          >
+                            <Edit2 className="h-4 w-4" />
+                          </Button>
+                          {deleteConfirm === client.id ? (
+                            <div className="flex items-center gap-1">
+                              <Button
+                                variant="destructive"
+                                size="sm"
+                                onClick={() => deleteMutation.mutate(client.id)}
+                                disabled={deleteMutation.isPending}
+                              >
+                                Confirm
+                              </Button>
+                              <Button
+                                variant="ghost"
+                                size="sm"
+                                onClick={() => setDeleteConfirm(null)}
+                              >
+                                Cancel
+                              </Button>
+                            </div>
+                          ) : (
+                            <Button
+                              variant="ghost"
+                              size="icon"
+                              title="Delete client"
+                              onClick={() => setDeleteConfirm(client.id)}
+                            >
+                              <Trash2 className="h-4 w-4" />
+                            </Button>
+                          )}
+                        </div>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      {showModal && (
+        <ClientModal
+          client={editingClient}
+          onClose={handleCloseModal}
+          onSave={handleSave}
+          isLoading={createMutation.isPending || updateMutation.isPending}
+        />
+      )}
+    </div>
+  );
+}

projects/msp-tools/guru-rmm/dashboard/src/pages/Commands.tsx

@@ -0,0 +1,114 @@
+import { useQuery } from "@tanstack/react-query";
+import { RefreshCw, CheckCircle, XCircle, Clock, Play } from "lucide-react";
+import { commandsApi, Command } from "../api/client";
+import { Card, CardHeader, CardTitle, CardContent } from "../components/Card";
+import { Button } from "../components/Button";
+
+function StatusIcon({ status }: { status: Command["status"] }) {
+  const icons = {
+    pending: <Clock className="h-4 w-4 text-yellow-500" />,
+    running: <Play className="h-4 w-4 text-blue-500" />,
+    completed: <CheckCircle className="h-4 w-4 text-green-500" />,
+    failed: <XCircle className="h-4 w-4 text-red-500" />,
+  };
+  return icons[status];
+}
+
+export function Commands() {
+  const { data: commands = [], isLoading, refetch } = useQuery({
+    queryKey: ["commands"],
+    queryFn: () => commandsApi.list().then((res) => res.data),
+    refetchInterval: 10000,
+  });
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-3xl font-bold">Commands</h1>
+          <p className="text-[hsl(var(--muted-foreground))]">
+            View command history and results
+          </p>
+        </div>
+        <Button variant="outline" size="sm" onClick={() => refetch()}>
+          <RefreshCw className="h-4 w-4 mr-2" />
+          Refresh
+        </Button>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Command History</CardTitle>
+        </CardHeader>
+        <CardContent>
+          {isLoading ? (
+            <p className="text-[hsl(var(--muted-foreground))]">Loading commands...</p>
+          ) : commands.length === 0 ? (
+            <p className="text-[hsl(var(--muted-foreground))]">
+              No commands have been executed yet.
+            </p>
+          ) : (
+            <div className="space-y-4">
+              {commands.map((cmd: Command) => (
+                <div
+                  key={cmd.id}
+                  className="border border-[hsl(var(--border))] rounded-lg p-4"
+                >
+                  <div className="flex items-start justify-between">
+                    <div className="flex items-center gap-3">
+                      <StatusIcon status={cmd.status} />
+                      <div>
+                        <p className="font-mono text-sm">{cmd.command_text}</p>
+                        <p className="text-xs text-[hsl(var(--muted-foreground))] mt-1">
+                          {cmd.command_type} • Agent: {cmd.agent_id.slice(0, 8)}... •{" "}
+                          {new Date(cmd.created_at).toLocaleString()}
+                        </p>
+                      </div>
+                    </div>
+                    <span
+                      className={`px-2 py-1 rounded text-xs font-medium ${
+                        cmd.status === "completed"
+                          ? "bg-green-100 text-green-800"
+                          : cmd.status === "failed"
+                          ? "bg-red-100 text-red-800"
+                          : cmd.status === "running"
+                          ? "bg-blue-100 text-blue-800"
+                          : "bg-yellow-100 text-yellow-800"
+                      }`}
+                    >
+                      {cmd.status}
+                      {cmd.exit_code !== null && ` (${cmd.exit_code})`}
+                    </span>
+                  </div>
+
+                  {(cmd.stdout || cmd.stderr) && (
+                    <div className="mt-3 space-y-2">
+                      {cmd.stdout && (
+                        <div>
+                          <p className="text-xs font-medium text-[hsl(var(--muted-foreground))] mb-1">
+                            Output:
+                          </p>
+                          <pre className="text-xs bg-[hsl(var(--muted))] p-2 rounded overflow-x-auto">
+                            {cmd.stdout}
+                          </pre>
+                        </div>
+                      )}
+                      {cmd.stderr && (
+                        <div>
+                          <p className="text-xs font-medium text-red-600 mb-1">Error:</p>
+                          <pre className="text-xs bg-red-50 text-red-800 p-2 rounded overflow-x-auto">
+                            {cmd.stderr}
+                          </pre>
+                        </div>
+                      )}
+                    </div>
+                  )}
+                </div>
+              ))}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

projects/msp-tools/guru-rmm/dashboard/src/pages/Dashboard.tsx

@@ -0,0 +1,141 @@
+import { useQuery } from "@tanstack/react-query";
+import { Activity, Server, AlertTriangle, CheckCircle } from "lucide-react";
+import { agentsApi, Agent } from "../api/client";
+import { Card, CardHeader, CardTitle, CardContent } from "../components/Card";
+
+function StatCard({
+  title,
+  value,
+  icon: Icon,
+  description,
+}: {
+  title: string;
+  value: string | number;
+  icon: React.ComponentType<{ className?: string }>;
+  description?: string;
+}) {
+  return (
+    <Card>
+      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+        <CardTitle className="text-sm font-medium">{title}</CardTitle>
+        <Icon className="h-4 w-4 text-[hsl(var(--muted-foreground))]" />
+      </CardHeader>
+      <CardContent>
+        <div className="text-2xl font-bold">{value}</div>
+        {description && (
+          <p className="text-xs text-[hsl(var(--muted-foreground))]">{description}</p>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
+export function Dashboard() {
+  const { data: agents = [], isLoading } = useQuery({
+    queryKey: ["agents"],
+    queryFn: () => agentsApi.list().then((res) => res.data),
+    refetchInterval: 30000,
+  });
+
+  const onlineAgents = agents.filter((a: Agent) => a.status === "online");
+  const offlineAgents = agents.filter((a: Agent) => a.status === "offline");
+  const errorAgents = agents.filter((a: Agent) => a.status === "error");
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-3xl font-bold">Dashboard</h1>
+        <p className="text-[hsl(var(--muted-foreground))]">
+          Overview of your managed endpoints
+        </p>
+      </div>
+
+      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+        <StatCard
+          title="Total Agents"
+          value={isLoading ? "..." : agents.length}
+          icon={Server}
+          description="Registered endpoints"
+        />
+        <StatCard
+          title="Online"
+          value={isLoading ? "..." : onlineAgents.length}
+          icon={CheckCircle}
+          description="Currently connected"
+        />
+        <StatCard
+          title="Offline"
+          value={isLoading ? "..." : offlineAgents.length}
+          icon={Activity}
+          description="Not responding"
+        />
+        <StatCard
+          title="Errors"
+          value={isLoading ? "..." : errorAgents.length}
+          icon={AlertTriangle}
+          description="Requires attention"
+        />
+      </div>
+
+      <div className="grid gap-4 md:grid-cols-2">
+        <Card>
+          <CardHeader>
+            <CardTitle>Recent Activity</CardTitle>
+          </CardHeader>
+          <CardContent>
+            {isLoading ? (
+              <p className="text-[hsl(var(--muted-foreground))]">Loading...</p>
+            ) : agents.length === 0 ? (
+              <p className="text-[hsl(var(--muted-foreground))]">
+                No agents registered yet. Deploy an agent to get started.
+              </p>
+            ) : (
+              <div className="space-y-4">
+                {agents.slice(0, 5).map((agent: Agent) => (
+                  <div key={agent.id} className="flex items-center justify-between">
+                    <div className="flex items-center gap-3">
+                      <div
+                        className={`h-2 w-2 rounded-full ${
+                          agent.status === "online"
+                            ? "bg-green-500"
+                            : agent.status === "error"
+                            ? "bg-red-500"
+                            : "bg-gray-400"
+                        }`}
+                      />
+                      <div>
+                        <p className="font-medium">{agent.hostname}</p>
+                        <p className="text-xs text-[hsl(var(--muted-foreground))]">
+                          {agent.os_type}
+                        </p>
+                      </div>
+                    </div>
+                    <span className="text-xs text-[hsl(var(--muted-foreground))]">
+                      {agent.last_seen
+                        ? new Date(agent.last_seen).toLocaleString()
+                        : "Never seen"}
+                    </span>
+                  </div>
+                ))}
+              </div>
+            )}
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>Quick Actions</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-2 text-sm text-[hsl(var(--muted-foreground))]">
+              <p>Deploy a new agent to start monitoring endpoints.</p>
+              <p className="mt-4">
+                Use the Agents page to view details and send commands to your endpoints.
+              </p>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}

projects/msp-tools/guru-rmm/dashboard/src/pages/Login.tsx

@@ -0,0 +1,84 @@
+import { useState, FormEvent } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import { useAuth } from "../hooks/useAuth";
+import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "../components/Card";
+import { Input } from "../components/Input";
+import { Button } from "../components/Button";
+
+export function Login() {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const { login } = useAuth();
+  const navigate = useNavigate();
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+    setError("");
+    setIsLoading(true);
+
+    try {
+      await login(email, password);
+      navigate("/");
+    } catch (err: any) {
+      setError(err.response?.data?.error || "Login failed. Please try again.");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-[hsl(var(--background))] px-4">
+      <Card className="w-full max-w-md">
+        <CardHeader className="text-center">
+          <CardTitle className="text-2xl">GuruRMM</CardTitle>
+          <CardDescription>Sign in to your account</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={handleSubmit} className="space-y-4">
+            {error && (
+              <div className="p-3 text-sm text-[hsl(var(--destructive))] bg-[hsl(var(--destructive))]/10 rounded-md">
+                {error}
+              </div>
+            )}
+            <div className="space-y-2">
+              <label htmlFor="email" className="text-sm font-medium">
+                Email
+              </label>
+              <Input
+                id="email"
+                type="email"
+                placeholder="admin@example.com"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                required
+              />
+            </div>
+            <div className="space-y-2">
+              <label htmlFor="password" className="text-sm font-medium">
+                Password
+              </label>
+              <Input
+                id="password"
+                type="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                required
+              />
+            </div>
+            <Button type="submit" className="w-full" disabled={isLoading}>
+              {isLoading ? "Signing in..." : "Sign in"}
+            </Button>
+          </form>
+          <div className="mt-4 text-center text-sm">
+            Don't have an account?{" "}
+            <Link to="/register" className="text-[hsl(var(--primary))] hover:underline">
+              Register
+            </Link>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

projects/msp-tools/guru-rmm/dashboard/src/pages/Register.tsx

@@ -0,0 +1,121 @@
+import { useState, FormEvent } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import { useAuth } from "../hooks/useAuth";
+import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "../components/Card";
+import { Input } from "../components/Input";
+import { Button } from "../components/Button";
+
+export function Register() {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [name, setName] = useState("");
+  const [error, setError] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const { register } = useAuth();
+  const navigate = useNavigate();
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+    setError("");
+
+    if (password !== confirmPassword) {
+      setError("Passwords do not match");
+      return;
+    }
+
+    if (password.length < 8) {
+      setError("Password must be at least 8 characters");
+      return;
+    }
+
+    setIsLoading(true);
+
+    try {
+      await register(email, password, name || undefined);
+      navigate("/");
+    } catch (err: any) {
+      setError(err.response?.data?.error || "Registration failed. Please try again.");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-[hsl(var(--background))] px-4">
+      <Card className="w-full max-w-md">
+        <CardHeader className="text-center">
+          <CardTitle className="text-2xl">Create Account</CardTitle>
+          <CardDescription>Set up your GuruRMM account</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={handleSubmit} className="space-y-4">
+            {error && (
+              <div className="p-3 text-sm text-[hsl(var(--destructive))] bg-[hsl(var(--destructive))]/10 rounded-md">
+                {error}
+              </div>
+            )}
+            <div className="space-y-2">
+              <label htmlFor="name" className="text-sm font-medium">
+                Name (optional)
+              </label>
+              <Input
+                id="name"
+                type="text"
+                placeholder="John Doe"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+              />
+            </div>
+            <div className="space-y-2">
+              <label htmlFor="email" className="text-sm font-medium">
+                Email
+              </label>
+              <Input
+                id="email"
+                type="email"
+                placeholder="admin@example.com"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                required
+              />
+            </div>
+            <div className="space-y-2">
+              <label htmlFor="password" className="text-sm font-medium">
+                Password
+              </label>
+              <Input
+                id="password"
+                type="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                required
+              />
+            </div>
+            <div className="space-y-2">
+              <label htmlFor="confirmPassword" className="text-sm font-medium">
+                Confirm Password
+              </label>
+              <Input
+                id="confirmPassword"
+                type="password"
+                value={confirmPassword}
+                onChange={(e) => setConfirmPassword(e.target.value)}
+                required
+              />
+            </div>
+            <Button type="submit" className="w-full" disabled={isLoading}>
+              {isLoading ? "Creating account..." : "Create account"}
+            </Button>
+          </form>
+          <div className="mt-4 text-center text-sm">
+            Already have an account?{" "}
+            <Link to="/login" className="text-[hsl(var(--primary))] hover:underline">
+              Sign in
+            </Link>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

projects/msp-tools/guru-rmm/dashboard/src/pages/Settings.tsx

@@ -0,0 +1,96 @@
+import { useAuth } from "../hooks/useAuth";
+import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "../components/Card";
+
+export function Settings() {
+  const { user } = useAuth();
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-3xl font-bold">Settings</h1>
+        <p className="text-[hsl(var(--muted-foreground))]">
+          Manage your account and preferences
+        </p>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Profile</CardTitle>
+          <CardDescription>Your account information</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <dl className="space-y-4">
+            <div>
+              <dt className="text-sm text-[hsl(var(--muted-foreground))]">Email</dt>
+              <dd className="font-medium">{user?.email}</dd>
+            </div>
+            <div>
+              <dt className="text-sm text-[hsl(var(--muted-foreground))]">Name</dt>
+              <dd className="font-medium">{user?.name || "-"}</dd>
+            </div>
+            <div>
+              <dt className="text-sm text-[hsl(var(--muted-foreground))]">Role</dt>
+              <dd className="font-medium capitalize">{user?.role}</dd>
+            </div>
+          </dl>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Agent Deployment</CardTitle>
+          <CardDescription>Deploy agents to your endpoints</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-4 text-sm">
+            <p className="text-[hsl(var(--muted-foreground))]">
+              To deploy an agent to a new endpoint, download and run the agent installer
+              with your server URL.
+            </p>
+            <div className="bg-[hsl(var(--muted))] p-4 rounded-md">
+              <p className="font-medium mb-2">Windows (PowerShell as Admin):</p>
+              <pre className="text-xs overflow-x-auto whitespace-pre-wrap">
+                {`# Install as a service
+.\\gururmm-agent.exe install --server wss://rmm-api.azcomputerguru.com/ws --api-key YOUR_API_KEY
+
+# Or run standalone for testing
+.\\gururmm-agent.exe --server wss://rmm-api.azcomputerguru.com/ws --api-key YOUR_API_KEY`}
+              </pre>
+            </div>
+            <div className="bg-[hsl(var(--muted))] p-4 rounded-md">
+              <p className="font-medium mb-2">Linux (as root):</p>
+              <pre className="text-xs overflow-x-auto whitespace-pre-wrap">
+                {`# Install as a systemd service
+sudo ./gururmm-agent install --server wss://rmm-api.azcomputerguru.com/ws --api-key YOUR_API_KEY
+
+# Or run standalone for testing
+./gururmm-agent --server wss://rmm-api.azcomputerguru.com/ws --api-key YOUR_API_KEY`}
+              </pre>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>About</CardTitle>
+          <CardDescription>System information</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <dl className="space-y-2 text-sm">
+            <div className="flex justify-between">
+              <dt className="text-[hsl(var(--muted-foreground))]">Dashboard Version</dt>
+              <dd>1.0.0</dd>
+            </div>
+            <div className="flex justify-between">
+              <dt className="text-[hsl(var(--muted-foreground))]">API Endpoint</dt>
+              <dd className="font-mono text-xs">
+                {import.meta.env.VITE_API_URL || "http://localhost:3001"}
+              </dd>
+            </div>
+          </dl>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

projects/msp-tools/guru-rmm/dashboard/src/pages/Sites.tsx

@@ -0,0 +1,453 @@
+import { useState } from "react";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { Plus, Trash2, Edit2, MapPin, RefreshCw, Key, Copy, Check } from "lucide-react";
+import { sitesApi, clientsApi, Site, Client, CreateSiteResponse } from "../api/client";
+import { Card, CardHeader, CardTitle, CardContent } from "../components/Card";
+import { Button } from "../components/Button";
+import { Input } from "../components/Input";
+
+interface SiteFormData {
+  client_id: string;
+  name: string;
+  address: string;
+  notes: string;
+}
+
+function ApiKeyModal({
+  apiKey,
+  siteCode,
+  onClose,
+}: {
+  apiKey: string;
+  siteCode: string;
+  onClose: () => void;
+}) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = () => {
+    navigator.clipboard.writeText(apiKey);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  return (
+    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+      <div className="bg-[hsl(var(--card))] rounded-lg p-6 w-full max-w-lg">
+        <div className="flex items-center gap-3 mb-4">
+          <div className="h-10 w-10 rounded-full bg-green-100 flex items-center justify-center">
+            <Key className="h-5 w-5 text-green-600" />
+          </div>
+          <div>
+            <h2 className="text-xl font-bold">Site Created!</h2>
+            <p className="text-sm text-[hsl(var(--muted-foreground))]">
+              Site Code: <span className="font-mono font-bold">{siteCode}</span>
+            </p>
+          </div>
+        </div>
+
+        <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-4">
+          <p className="text-sm text-yellow-800 font-medium mb-2">
+            Save this API key now - it will not be shown again!
+          </p>
+          <p className="text-xs text-yellow-700">
+            Configure agents with this API key to auto-register under this site.
+          </p>
+        </div>
+
+        <div className="mb-6">
+          <label className="block text-sm font-medium mb-2">API Key</label>
+          <div className="flex gap-2">
+            <Input
+              value={apiKey}
+              readOnly
+              className="font-mono text-sm"
+            />
+            <Button variant="outline" onClick={handleCopy}>
+              {copied ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
+            </Button>
+          </div>
+        </div>
+
+        <div className="flex justify-end">
+          <Button onClick={onClose}>Done</Button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function SiteModal({
+  site,
+  clients,
+  onClose,
+  onSave,
+  isLoading,
+}: {
+  site?: Site;
+  clients: Client[];
+  onClose: () => void;
+  onSave: (data: SiteFormData) => void;
+  isLoading: boolean;
+}) {
+  const [formData, setFormData] = useState<SiteFormData>({
+    client_id: site?.client_id || (clients[0]?.id || ""),
+    name: site?.name || "",
+    address: site?.address || "",
+    notes: site?.notes || "",
+  });
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    onSave(formData);
+  };
+
+  return (
+    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+      <div className="bg-[hsl(var(--card))] rounded-lg p-6 w-full max-w-md">
+        <h2 className="text-xl font-bold mb-4">
+          {site ? "Edit Site" : "New Site"}
+        </h2>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <label className="block text-sm font-medium mb-1">Client *</label>
+            <select
+              value={formData.client_id}
+              onChange={(e) => setFormData({ ...formData, client_id: e.target.value })}
+              className="w-full px-3 py-2 rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--background))] text-sm"
+              required
+              disabled={!!site}
+            >
+              <option value="">Select a client...</option>
+              {clients.map((client) => (
+                <option key={client.id} value={client.id}>
+                  {client.name} {client.code && `(${client.code})`}
+                </option>
+              ))}
+            </select>
+          </div>
+          <div>
+            <label className="block text-sm font-medium mb-1">Site Name *</label>
+            <Input
+              value={formData.name}
+              onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+              placeholder="Main Office, Branch 1, etc."
+              required
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium mb-1">Address</label>
+            <Input
+              value={formData.address}
+              onChange={(e) => setFormData({ ...formData, address: e.target.value })}
+              placeholder="123 Main St, City, State"
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium mb-1">Notes</label>
+            <textarea
+              value={formData.notes}
+              onChange={(e) => setFormData({ ...formData, notes: e.target.value })}
+              placeholder="Optional notes..."
+              className="w-full px-3 py-2 rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--background))] text-sm"
+              rows={3}
+            />
+          </div>
+          <div className="flex justify-end gap-2 pt-4">
+            <Button type="button" variant="ghost" onClick={onClose}>
+              Cancel
+            </Button>
+            <Button type="submit" disabled={isLoading || !formData.name.trim() || !formData.client_id}>
+              {isLoading ? "Saving..." : site ? "Update" : "Create"}
+            </Button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
+
+export function Sites() {
+  const [search, setSearch] = useState("");
+  const [showModal, setShowModal] = useState(false);
+  const [editingSite, setEditingSite] = useState<Site | undefined>();
+  const [deleteConfirm, setDeleteConfirm] = useState<string | null>(null);
+  const [newSiteApiKey, setNewSiteApiKey] = useState<{ apiKey: string; siteCode: string } | null>(null);
+  const [regeneratingKey, setRegeneratingKey] = useState<string | null>(null);
+  const queryClient = useQueryClient();
+
+  const { data: sites = [], isLoading, refetch } = useQuery({
+    queryKey: ["sites"],
+    queryFn: () => sitesApi.list().then((res) => res.data),
+  });
+
+  const { data: clients = [] } = useQuery({
+    queryKey: ["clients"],
+    queryFn: () => clientsApi.list().then((res) => res.data),
+  });
+
+  const createMutation = useMutation({
+    mutationFn: (data: SiteFormData) => sitesApi.create(data),
+    onSuccess: (response) => {
+      queryClient.invalidateQueries({ queryKey: ["sites"] });
+      queryClient.invalidateQueries({ queryKey: ["clients"] });
+      setShowModal(false);
+      // Show API key modal
+      const data = response.data as CreateSiteResponse;
+      setNewSiteApiKey({ apiKey: data.api_key, siteCode: data.site.site_code });
+    },
+  });
+
+  const updateMutation = useMutation({
+    mutationFn: ({ id, data }: { id: string; data: Partial<SiteFormData> }) =>
+      sitesApi.update(id, data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["sites"] });
+      setShowModal(false);
+      setEditingSite(undefined);
+    },
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: (id: string) => sitesApi.delete(id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["sites"] });
+      queryClient.invalidateQueries({ queryKey: ["clients"] });
+      setDeleteConfirm(null);
+    },
+  });
+
+  const regenerateKeyMutation = useMutation({
+    mutationFn: (id: string) => sitesApi.regenerateApiKey(id),
+    onSuccess: (response, id) => {
+      const site = sites.find((s: Site) => s.id === id);
+      setNewSiteApiKey({
+        apiKey: response.data.api_key,
+        siteCode: site?.site_code || "Unknown",
+      });
+      setRegeneratingKey(null);
+    },
+  });
+
+  const handleSave = (data: SiteFormData) => {
+    if (editingSite) {
+      updateMutation.mutate({ id: editingSite.id, data });
+    } else {
+      createMutation.mutate(data);
+    }
+  };
+
+  const handleEdit = (site: Site) => {
+    setEditingSite(site);
+    setShowModal(true);
+  };
+
+  const handleCloseModal = () => {
+    setShowModal(false);
+    setEditingSite(undefined);
+  };
+
+  const filteredSites = sites.filter(
+    (site: Site) =>
+      site.name.toLowerCase().includes(search.toLowerCase()) ||
+      site.site_code.toLowerCase().includes(search.toLowerCase()) ||
+      (site.client_name && site.client_name.toLowerCase().includes(search.toLowerCase()))
+  );
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-3xl font-bold">Sites</h1>
+          <p className="text-[hsl(var(--muted-foreground))]">
+            Manage client locations and their agent registrations
+          </p>
+        </div>
+        <div className="flex gap-2">
+          <Button variant="outline" size="sm" onClick={() => refetch()}>
+            <RefreshCw className="h-4 w-4 mr-2" />
+            Refresh
+          </Button>
+          <Button size="sm" onClick={() => setShowModal(true)} disabled={clients.length === 0}>
+            <Plus className="h-4 w-4 mr-2" />
+            Add Site
+          </Button>
+        </div>
+      </div>
+
+      {clients.length === 0 && (
+        <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
+          <p className="text-sm text-yellow-800">
+            You need to create a client before you can add sites.
+          </p>
+        </div>
+      )}
+
+      <div className="flex items-center gap-4">
+        <Input
+          placeholder="Search sites..."
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          className="max-w-sm"
+        />
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>All Sites</CardTitle>
+        </CardHeader>
+        <CardContent>
+          {isLoading ? (
+            <p className="text-[hsl(var(--muted-foreground))]">Loading sites...</p>
+          ) : filteredSites.length === 0 ? (
+            <div className="text-center py-8">
+              <MapPin className="h-12 w-12 mx-auto text-[hsl(var(--muted-foreground))] mb-4" />
+              <p className="text-[hsl(var(--muted-foreground))]">
+                {search ? "No sites match your search." : "No sites yet. Add your first site to get started."}
+              </p>
+            </div>
+          ) : (
+            <div className="overflow-x-auto">
+              <table className="w-full">
+                <thead>
+                  <tr className="border-b border-[hsl(var(--border))]">
+                    <th className="text-left py-3 px-4 font-medium">Site</th>
+                    <th className="text-left py-3 px-4 font-medium">Client</th>
+                    <th className="text-left py-3 px-4 font-medium">Site Code</th>
+                    <th className="text-left py-3 px-4 font-medium">Agents</th>
+                    <th className="text-left py-3 px-4 font-medium">Status</th>
+                    <th className="text-right py-3 px-4 font-medium">Actions</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {filteredSites.map((site: Site) => (
+                    <tr
+                      key={site.id}
+                      className="border-b border-[hsl(var(--border))] hover:bg-[hsl(var(--muted))]/50"
+                    >
+                      <td className="py-3 px-4">
+                        <div className="font-medium">{site.name}</div>
+                        {site.address && (
+                          <div className="text-sm text-[hsl(var(--muted-foreground))]">
+                            {site.address}
+                          </div>
+                        )}
+                      </td>
+                      <td className="py-3 px-4 text-sm">
+                        {site.client_name || "-"}
+                      </td>
+                      <td className="py-3 px-4">
+                        <span className="px-2 py-1 bg-[hsl(var(--muted))] rounded text-sm font-mono">
+                          {site.site_code}
+                        </span>
+                      </td>
+                      <td className="py-3 px-4">
+                        <span className="text-sm">{site.agent_count} agents</span>
+                      </td>
+                      <td className="py-3 px-4">
+                        <span
+                          className={`px-2 py-1 rounded-full text-xs font-medium ${
+                            site.is_active
+                              ? "bg-green-100 text-green-800"
+                              : "bg-gray-100 text-gray-800"
+                          }`}
+                        >
+                          {site.is_active ? "Active" : "Inactive"}
+                        </span>
+                      </td>
+                      <td className="py-3 px-4">
+                        <div className="flex items-center justify-end gap-2">
+                          {regeneratingKey === site.id ? (
+                            <div className="flex items-center gap-1">
+                              <Button
+                                variant="destructive"
+                                size="sm"
+                                onClick={() => regenerateKeyMutation.mutate(site.id)}
+                                disabled={regenerateKeyMutation.isPending}
+                              >
+                                Confirm
+                              </Button>
+                              <Button
+                                variant="ghost"
+                                size="sm"
+                                onClick={() => setRegeneratingKey(null)}
+                              >
+                                Cancel
+                              </Button>
+                            </div>
+                          ) : (
+                            <Button
+                              variant="ghost"
+                              size="icon"
+                              title="Regenerate API Key"
+                              onClick={() => setRegeneratingKey(site.id)}
+                            >
+                              <Key className="h-4 w-4" />
+                            </Button>
+                          )}
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            title="Edit site"
+                            onClick={() => handleEdit(site)}
+                          >
+                            <Edit2 className="h-4 w-4" />
+                          </Button>
+                          {deleteConfirm === site.id ? (
+                            <div className="flex items-center gap-1">
+                              <Button
+                                variant="destructive"
+                                size="sm"
+                                onClick={() => deleteMutation.mutate(site.id)}
+                                disabled={deleteMutation.isPending}
+                              >
+                                Confirm
+                              </Button>
+                              <Button
+                                variant="ghost"
+                                size="sm"
+                                onClick={() => setDeleteConfirm(null)}
+                              >
+                                Cancel
+                              </Button>
+                            </div>
+                          ) : (
+                            <Button
+                              variant="ghost"
+                              size="icon"
+                              title="Delete site"
+                              onClick={() => setDeleteConfirm(site.id)}
+                            >
+                              <Trash2 className="h-4 w-4" />
+                            </Button>
+                          )}
+                        </div>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      {showModal && (
+        <SiteModal
+          site={editingSite}
+          clients={clients}
+          onClose={handleCloseModal}
+          onSave={handleSave}
+          isLoading={createMutation.isPending || updateMutation.isPending}
+        />
+      )}
+
+      {newSiteApiKey && (
+        <ApiKeyModal
+          apiKey={newSiteApiKey.apiKey}
+          siteCode={newSiteApiKey.siteCode}
+          onClose={() => setNewSiteApiKey(null)}
+        />
+      )}
+    </div>
+  );
+}