Perfect! I now have a comprehensive understanding of the GuruRMM dashboard. Let me provide a detailed summary.

## GuruRMM Dashboard - Tech Stack & Architecture Summary

Based on my exploration of the codebase, here's a complete overview:

### 1. **Core Framework & Build Tools**
- **React 19.2.0** - Latest React with modern features
- **Vite 7.2.4** - Lightning-fast build tool and dev server
- **TypeScript 5.9.3** - Full type safety
- **React Router DOM 7.10.1** - Client-side routing

### 2. **Styling & UI**
- **Tailwind CSS 4.1.18** - Utility-first CSS framework with Vite integration
- **Lucide React 0.561.0** - Beautiful, consistent icon library (SVG-based)
- **Custom CSS Variables** - HSL-based theming system using `hsl(var(--color))` pattern
- **Headless UI Components** - Custom components (Button, Card, Input) built from scratch without external UI library dependencies
- **clsx & tailwind-merge** - Utilities for combining and merging Tailwind classes intelligently

### 3. **Data Management & API Communication**
- **Axios 1.13.2** - HTTP client for API requests
- **TanStack React Query 5.90.12** - Server state management, caching, and synchronization
  - Configured with 1-minute stale time and 30-second auto-refetch intervals
  - Query invalidation on mutations for data freshness
- **Bearer token authentication** - JWT tokens stored in localStorage
- **Automatic 401 handling** - Redirects to login on auth failures

### 4. **Authentication & Authorization**
- **Context API** - `AuthProvider` and `useAuth` hook for state management
- **Multi-auth support**:
  - Email/password login and registration
  - Microsoft Entra (Azure AD) SSO integration
  - SSO callback handler for OAuth flows
- **Protected routes** - `ProtectedRoute` wrapper component for auth-gated pages
- **Session persistence** - Token stored in localStorage with automatic validation on app load

### 5. **Project Structure**

```
src/
├── components/       # Reusable UI components (Button, Card, Input, Layout)
├── pages/           # Page-level components
│   ├── Dashboard.tsx
│   ├── Agents.tsx
│   ├── AgentDetail.tsx
│   ├── Clients.tsx
│   ├── Sites.tsx
│   ├── Commands.tsx
│   ├── Settings.tsx
│   ├── Login.tsx
│   ├── Register.tsx
│   └── AuthCallback.tsx
├── hooks/           # Custom hooks (useAuth, useSso)
├── api/             # Centralized API client and types
├── lib/             # Utility functions (cn - class merging)
└── App.tsx          # Router setup with protected/public routes
```

### 6. **API Architecture**
The API client (`api/client.ts`) is highly organized with:
- **Axios instance** with configurable base URL (uses `VITE_API_URL` or defaults to `https://rmm-api.azcomputerguru.com`)
- **Request interceptors** - Automatically adds Bearer token to headers
- **Response interceptors** - Handles 401 errors by clearing session and redirecting
- **Modular API functions** - Organized into logical groups:
  - `authApi` - Login, register, user info
  - `agentsApi` - Agent management and metrics
  - `commandsApi` - Send and track commands
  - `clientsApi` - Client management
  - `sitesApi` - Site management and API key regeneration
  - `policiesApi` - Policy management and assignments
  - `alertsApi` - Alert management with summary
  - `usersApi` - User management (admin)
  - `organizationsApi` - Multi-tenant org management
  - `impersonationApi` - Dev admin impersonation
  - `ssoApi` - SSO/Entra integration

### 7. **Key Patterns & Features**

**State Management Pattern:**
- React Query for server state
- Context API for auth state
- Local component state for UI interactions
- localStorage for persistence

**Component Patterns:**
- Functional components with hooks
- Custom hooks for reusable logic (useAuth, useSso)
- Composed components (Card with CardHeader, CardTitle, CardContent)
- Error boundaries and loading states

**Data Fetching Pattern:**
```typescript
const { data: agents = [], isLoading, refetch } = useQuery({
  queryKey: ["agents"],
  queryFn: () => agentsApi.list().then((res) => res.data),
  refetchInterval: 30000, // Auto-refresh every 30 seconds
});
```

**Modal Pattern:**
- Custom modal components for actions (e.g., MoveAgentModal)
- Overlay with semi-transparent background
- State-based rendering

**Advanced Features:**
- Multi-level hierarchy filtering (Client → Site → Agent)
- Real-time status indicators with color coding
- Confirmation dialogs for destructive actions
- Responsive sidebar navigation (collapsible on mobile)
- User profile display with role information
- Hierarchical data grouping and display

### 8. **Routing**
- **Protected routes** - Redirect unauthenticated users to login
- **Public routes** - Redirect authenticated users away
- **Main routes**:
  - `/` - Dashboard
  - `/login` - Login page
  - `/register` - Registration page
  - `/auth/callback` - SSO callback handler
  - `/clients` - Client management
  - `/sites` - Site management
  - `/agents` - Agent list
  - `/agents/:id` - Agent details
  - `/commands` - Command management
  - `/settings` - Settings page

### 9. **Type Safety**
Comprehensive TypeScript interfaces for all API responses:
- `Agent`, `Metrics`, `AgentState`
- `Command`, `User`, `Client`, `Site`
- `Policy`, `PolicyAssignment`, `EffectivePolicy`
- `Alert`, `AlertSummary`, `Organization`
- Rich extended metrics including temperature sensors, uptime, user info

### 10. **Performance Optimizations**
- Vite's fast HMR (Hot Module Reload)
- React 19 optimizations
- Query caching with configurable stale time
- Automatic refetch intervals instead of continuous polling
- Icon library using SVG for scalability

This is a modern, well-structured React dashboard with enterprise-grade authentication, comprehensive data management, and clean separation of concerns.