@qwickapps/server 1.3.1 → 1.5.0

package/ui/src/App.tsx

@@ -3,13 +3,21 @@ import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import { QwickApp, ProductLogo, Text } from '@qwickapps/react-framework';
 import { Link, Box } from '@mui/material';
 import { defaultConfig } from './config/AppConfig';
-import { DashboardWidgetProvider } from './dashboard';
+import {
+  DashboardWidgetProvider,
+  WidgetComponentRegistryProvider,
+  getBuiltInWidgetComponents,
+} from './dashboard';
 import { DashboardPage } from './pages/DashboardPage';
 import { LogsPage } from './pages/LogsPage';
 import { SystemPage } from './pages/SystemPage';
 import { PluginsPage } from './pages/PluginsPage';
 import { UsersPage } from './pages/UsersPage';
 import { EntitlementsPage } from './pages/EntitlementsPage';
+import { AuthPage } from './pages/AuthPage';
+import { RateLimitPage } from './pages/RateLimitPage';
+import { NotificationsPage } from './pages/NotificationsPage';
+import { IntegrationsPage } from './pages/IntegrationsPage';
 import { PluginPage } from './pages/PluginPage';
 import { NotFoundPage } from './pages/NotFoundPage';
 import { api, type MenuContribution } from './api/controlPanelApi';
@@ -36,7 +44,7 @@ const builtInPluginNavItems: Record<string, NavigationItem> = {
 };
 
 // Routes that have dedicated page components
-const dedicatedRoutes = new Set(['/', '/plugins', '/logs', '/system', '/users', '/entitlements']);
+const dedicatedRoutes = new Set(['/', '/plugins', '/logs', '/system', '/users', '/entitlements', '/auth', '/rate-limits', '/notifications', '/integrations']);
 
 // Package version - injected at build time or fallback
 const SERVER_VERSION = '1.0.0';
@@ -177,16 +185,17 @@ export function App() {
 
   return (
     <BrowserRouter basename={basePath || undefined}>
-      <DashboardWidgetProvider>
-        <QwickApp
-          config={defaultConfig}
-          logo={logo}
-          footerContent={footerContent}
-          enableScaffolding={true}
-          navigationItems={navigationItems}
-          showThemeSwitcher={true}
-          showPaletteSwitcher={true}
-        >
+      <WidgetComponentRegistryProvider initialComponents={getBuiltInWidgetComponents()}>
+        <DashboardWidgetProvider>
+          <QwickApp
+            config={defaultConfig}
+            logo={logo}
+            footerContent={footerContent}
+            enableScaffolding={true}
+            navigationItems={navigationItems}
+            showThemeSwitcher={true}
+            showPaletteSwitcher={true}
+          >
           <Routes>
             {/* Core routes */}
             <Route path="/" element={<DashboardPage />} />
@@ -201,6 +210,18 @@ export function App() {
             {registeredPlugins.has('entitlements') && (
               <Route path="/entitlements" element={<EntitlementsPage />} />
             )}
+            {registeredPlugins.has('auth') && (
+              <Route path="/auth" element={<AuthPage />} />
+            )}
+            {registeredPlugins.has('rate-limit') && (
+              <Route path="/rate-limits" element={<RateLimitPage />} />
+            )}
+            {registeredPlugins.has('notifications') && (
+              <Route path="/notifications" element={<NotificationsPage />} />
+            )}
+            {registeredPlugins.has('ai-proxy') && (
+              <Route path="/integrations" element={<IntegrationsPage />} />
+            )}
 
             {/* Dynamic plugin routes - render generic PluginPage for non-dedicated routes */}
             {pluginMenuItems
@@ -215,8 +236,9 @@ export function App() {
 
             <Route path="*" element={<NotFoundPage />} />
           </Routes>
-        </QwickApp>
-      </DashboardWidgetProvider>
+          </QwickApp>
+        </DashboardWidgetProvider>
+      </WidgetComponentRegistryProvider>
     </BrowserRouter>
   );
 }

package/ui/src/api/controlPanelApi.ts

@@ -255,6 +255,7 @@ export interface PluginDetailResponse {
 // ==================
 
 export type AuthPluginState = 'disabled' | 'enabled' | 'error';
+export type AuthAdapterType = 'auth0' | 'supabase' | 'supertokens' | 'basic';
 
 export interface AuthConfigStatus {
   state: AuthPluginState;
@@ -262,6 +263,163 @@ export interface AuthConfigStatus {
   error?: string;
   missingVars?: string[];
   config?: Record<string, string>;
+  /** Runtime config from database (if available) */
+  runtimeConfig?: RuntimeAuthConfig;
+}
+
+export interface RuntimeAuthConfig {
+  adapter: AuthAdapterType | null;
+  config: {
+    auth0?: Auth0AdapterConfig;
+    supabase?: SupabaseAdapterConfig;
+    supertokens?: SupertokensAdapterConfig;
+    basic?: BasicAdapterConfig;
+  };
+  settings: {
+    authRequired?: boolean;
+    excludePaths?: string[];
+    debug?: boolean;
+  };
+  updatedAt: string;
+  updatedBy?: string;
+}
+
+export interface Auth0AdapterConfig {
+  domain: string;
+  clientId: string;
+  clientSecret: string;
+  baseUrl: string;
+  secret: string;
+  audience?: string;
+  scopes?: string[];
+  allowedRoles?: string[];
+  allowedDomains?: string[];
+}
+
+export interface SupabaseAdapterConfig {
+  url: string;
+  anonKey: string;
+}
+
+export interface BasicAdapterConfig {
+  username: string;
+  password: string;
+  realm?: string;
+}
+
+export interface SupertokensAdapterConfig {
+  connectionUri: string;
+  apiKey?: string;
+  appName: string;
+  apiDomain: string;
+  websiteDomain: string;
+  apiBasePath?: string;
+  websiteBasePath?: string;
+  enableEmailPassword?: boolean;
+  socialProviders?: {
+    google?: { clientId: string; clientSecret: string };
+    apple?: { clientId: string; clientSecret: string; keyId: string; teamId: string };
+    github?: { clientId: string; clientSecret: string };
+  };
+}
+
+export interface UpdateAuthConfigRequest {
+  adapter: AuthAdapterType;
+  config: Record<string, unknown>;
+  settings?: {
+    authRequired?: boolean;
+    excludePaths?: string[];
+  };
+}
+
+export interface TestProviderRequest {
+  adapter: AuthAdapterType;
+  config: Record<string, unknown>;
+  provider?: 'google' | 'github' | 'apple';
+}
+
+export interface TestProviderResponse {
+  success: boolean;
+  message: string;
+  details?: {
+    latency?: number;
+    version?: string;
+  };
+}
+
+// ==================
+// Notifications API Types
+// ==================
+
+export interface NotificationsConnectionHealth {
+  isConnected: boolean;
+  isHealthy: boolean;
+  lastEventAt: string | null;
+  timeSinceLastEvent: number;
+  channelCount: number;
+  isReconnecting: boolean;
+  reconnectAttempts: number;
+}
+
+export interface NotificationsStatsResponse {
+  totalConnections: number;
+  currentConnections: number;
+  eventsProcessed: number;
+  eventsRouted: number;
+  eventsParseFailed: number;
+  eventsDroppedNoClients: number;
+  reconnectionAttempts: number;
+  lastReconnectionAt?: string;
+  clientsByType: {
+    device: number;
+    user: number;
+  };
+  connectionHealth: NotificationsConnectionHealth;
+  channels: string[];
+  lastEventAt?: string;
+}
+
+export interface NotificationsClient {
+  id: string;
+  deviceId?: string;
+  userId?: string;
+  connectedAt: string;
+  durationMs: number;
+}
+
+export interface NotificationsClientsResponse {
+  clients: NotificationsClient[];
+  total: number;
+}
+
+// ==================
+// Rate Limit Config Types
+// ==================
+
+export type RateLimitStrategy = 'sliding-window' | 'fixed-window' | 'token-bucket';
+
+export interface RateLimitConfig {
+  windowMs: number;
+  maxRequests: number;
+  strategy: RateLimitStrategy;
+  cleanupEnabled: boolean;
+  cleanupIntervalMs: number;
+  store: string;
+  cache: string;
+  cacheAvailable: boolean;
+}
+
+export interface RateLimitConfigUpdateRequest {
+  windowMs?: number;
+  maxRequests?: number;
+  strategy?: RateLimitStrategy;
+  cleanupEnabled?: boolean;
+  cleanupIntervalMs?: number;
+}
+
+export interface RateLimitConfigUpdateResponse {
+  success: boolean;
+  config: RateLimitConfig;
 }
 
 class ControlPanelApi {
@@ -279,6 +437,33 @@ class ControlPanelApi {
     this.baseUrl = baseUrl;
   }
 
+  /**
+   * Get the base URL for API requests.
+   */
+  getBaseUrl(): string {
+    return this.baseUrl;
+  }
+
+  /**
+   * Generic fetch method for API requests.
+   * Automatically prepends the base URL and /api prefix.
+   */
+  async fetch<T = unknown>(path: string, options?: RequestInit): Promise<T> {
+    const url = `${this.baseUrl}/api${path.startsWith('/') ? path : `/${path}`}`;
+    const response = await fetch(url, {
+      ...options,
+      headers: {
+        'Content-Type': 'application/json',
+        ...options?.headers,
+      },
+    });
+    if (!response.ok) {
+      const error = await response.json().catch(() => ({}));
+      throw new Error(error.error || error.message || `Request failed: ${response.statusText}`);
+    }
+    return response.json();
+  }
+
   // ==================
   // Plugin Feature Detection
   // ==================
@@ -330,7 +515,7 @@ class ControlPanelApi {
     const params = new URLSearchParams();
     if (options.limit) params.set('limit', options.limit.toString());
     if (options.page) params.set('page', options.page.toString());
-    if (options.search) params.set('search', options.search);
+    if (options.search) params.set('q', options.search);
 
     const response = await fetch(`${this.baseUrl}/api/users?${params}`);
     if (!response.ok) {
@@ -360,10 +545,18 @@ class ControlPanelApi {
   }
 
   async banUser(email: string, reason: string, expiresAt?: string): Promise<void> {
-    const response = await fetch(`${this.baseUrl}/api/bans`, {
+    // Convert expiresAt datetime to duration in seconds
+    let duration: number | undefined;
+    if (expiresAt) {
+      const expiresDate = new Date(expiresAt);
+      const now = new Date();
+      duration = Math.max(0, Math.floor((expiresDate.getTime() - now.getTime()) / 1000));
+    }
+
+    const response = await fetch(`${this.baseUrl}/api/bans/email/${encodeURIComponent(email)}`, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ email, reason, expiresAt }),
+      body: JSON.stringify({ reason, duration }),
     });
     if (!response.ok) {
       const error = await response.json().catch(() => ({}));
@@ -372,7 +565,7 @@ class ControlPanelApi {
   }
 
   async unbanUser(email: string): Promise<void> {
-    const response = await fetch(`${this.baseUrl}/api/bans/${encodeURIComponent(email)}`, {
+    const response = await fetch(`${this.baseUrl}/api/bans/email/${encodeURIComponent(email)}`, {
       method: 'DELETE',
     });
     if (!response.ok) {
@@ -381,11 +574,13 @@ class ControlPanelApi {
   }
 
   async checkBan(email: string): Promise<{ banned: boolean; ban?: Ban }> {
-    const response = await fetch(`${this.baseUrl}/api/bans/check/${encodeURIComponent(email)}`);
+    const response = await fetch(`${this.baseUrl}/api/bans/email/${encodeURIComponent(email)}`);
     if (!response.ok) {
       throw new Error(`Ban check failed: ${response.statusText}`);
     }
-    return response.json();
+    const data = await response.json();
+    // Backend returns { email, isBanned }, transform to expected shape
+    return { banned: data.isBanned };
   }
 
   // ==================
@@ -595,6 +790,134 @@ class ControlPanelApi {
     }
     return response.json();
   }
+
+  /**
+   * Update auth configuration (save to database for hot-reload)
+   */
+  async updateAuthConfig(request: UpdateAuthConfigRequest): Promise<{ success: boolean; message: string }> {
+    const response = await fetch(`${this.baseUrl}/api/auth/config`, {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(request),
+    });
+    if (!response.ok) {
+      const error = await response.json().catch(() => ({}));
+      throw new Error(error.error || `Auth config update failed: ${response.statusText}`);
+    }
+    return response.json();
+  }
+
+  /**
+   * Delete auth configuration (revert to environment variables)
+   */
+  async deleteAuthConfig(): Promise<{ success: boolean; message: string }> {
+    const response = await fetch(`${this.baseUrl}/api/auth/config`, {
+      method: 'DELETE',
+    });
+    if (!response.ok) {
+      const error = await response.json().catch(() => ({}));
+      throw new Error(error.error || `Auth config delete failed: ${response.statusText}`);
+    }
+    return response.json();
+  }
+
+  /**
+   * Test auth provider connection without saving
+   */
+  async testAuthProvider(request: TestProviderRequest): Promise<TestProviderResponse> {
+    const response = await fetch(`${this.baseUrl}/api/auth/test-provider`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(request),
+    });
+    if (!response.ok) {
+      const error = await response.json().catch(() => ({}));
+      throw new Error(error.error || `Provider test failed: ${response.statusText}`);
+    }
+    return response.json();
+  }
+
+  /**
+   * Test current auth provider connection (uses existing env/runtime config)
+   */
+  async testCurrentAuthProvider(): Promise<TestProviderResponse> {
+    const response = await fetch(`${this.baseUrl}/api/auth/test-current`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+    });
+    if (!response.ok) {
+      const error = await response.json().catch(() => ({}));
+      throw new Error(error.error || `Provider test failed: ${response.statusText}`);
+    }
+    return response.json();
+  }
+
+  // ==================
+  // Rate Limit Config API
+  // ==================
+
+  async getRateLimitConfig(): Promise<RateLimitConfig> {
+    const response = await fetch(`${this.baseUrl}/api/rate-limit/config`);
+    if (!response.ok) {
+      throw new Error(`Rate limit config request failed: ${response.statusText}`);
+    }
+    return response.json();
+  }
+
+  async updateRateLimitConfig(updates: RateLimitConfigUpdateRequest): Promise<RateLimitConfigUpdateResponse> {
+    const response = await fetch(`${this.baseUrl}/api/rate-limit/config`, {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(updates),
+    });
+    if (!response.ok) {
+      const error = await response.json().catch(() => ({}));
+      throw new Error(error.error || `Rate limit config update failed: ${response.statusText}`);
+    }
+    return response.json();
+  }
+
+  // ==================
+  // Notifications API
+  // ==================
+
+  async getNotificationsStats(): Promise<NotificationsStatsResponse> {
+    const response = await fetch(`${this.baseUrl}/api/notifications/stats`);
+    if (!response.ok) {
+      throw new Error(`Notifications stats request failed: ${response.statusText}`);
+    }
+    return response.json();
+  }
+
+  async getNotificationsClients(): Promise<NotificationsClientsResponse> {
+    const response = await fetch(`${this.baseUrl}/api/notifications/clients`);
+    if (!response.ok) {
+      throw new Error(`Notifications clients request failed: ${response.statusText}`);
+    }
+    return response.json();
+  }
+
+  async disconnectNotificationsClient(clientId: string): Promise<{ success: boolean }> {
+    const response = await fetch(`${this.baseUrl}/api/notifications/clients/${encodeURIComponent(clientId)}`, {
+      method: 'DELETE',
+    });
+    if (!response.ok) {
+      const error = await response.json().catch(() => ({}));
+      throw new Error(error.error || `Disconnect client failed: ${response.statusText}`);
+    }
+    return response.json();
+  }
+
+  async forceNotificationsReconnect(): Promise<{ success: boolean; message: string }> {
+    const response = await fetch(`${this.baseUrl}/api/notifications/reconnect`, {
+      method: 'POST',
+    });
+    if (!response.ok) {
+      const error = await response.json().catch(() => ({}));
+      throw new Error(error.error || `Force reconnect failed: ${response.statusText}`);
+    }
+    return response.json();
+  }
 }
 
 export const api = new ControlPanelApi();

package/ui/src/components/StatCard.tsx

@@ -0,0 +1,58 @@
+/**
+ * StatCard Component
+ *
+ * A reusable card component for displaying statistics with an icon,
+ * value, label, and optional sub-value.
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import { Box, Card, CardContent } from '@mui/material';
+import { Text } from '@qwickapps/react-framework';
+
+export interface StatCardProps {
+  icon: React.ReactNode;
+  label: string;
+  value: string | number;
+  subValue?: string;
+  color?: string;
+}
+
+export function StatCard({
+  icon,
+  label,
+  value,
+  subValue,
+  color = 'var(--theme-primary)',
+}: StatCardProps) {
+  return (
+    <Card sx={{ bgcolor: 'var(--theme-surface)', height: '100%' }}>
+      <CardContent sx={{ py: 1.5, '&:last-child': { pb: 1.5 } }}>
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
+          <Box sx={{ color }}>{icon}</Box>
+          <Box sx={{ flex: 1, minWidth: 0 }}>
+            <Text
+              variant="h4"
+              content={String(value)}
+              customColor="var(--theme-text-primary)"
+              fontWeight="600"
+            />
+            <Text
+              variant="caption"
+              content={label}
+              customColor="var(--theme-text-secondary)"
+            />
+            {subValue && (
+              <Text
+                variant="caption"
+                content={subValue}
+                customColor="var(--theme-text-secondary)"
+                sx={{ display: 'block', mt: 0.25 }}
+              />
+            )}
+          </Box>
+        </Box>
+      </CardContent>
+    </Card>
+  );
+}

package/ui/src/dashboard/builtInWidgets.tsx

@@ -10,7 +10,7 @@
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
 
-import { ServiceHealthWidget } from './widgets';
+import { ServiceHealthWidget, IntegrationStatusWidget, AuthStatusWidget, NotificationsStatsWidget } from './widgets';
 import type { WidgetComponent } from './WidgetComponentRegistry';
 
 /**
@@ -19,6 +19,9 @@ import type { WidgetComponent } from './WidgetComponentRegistry';
  */
 export const builtInWidgetComponents: Record<string, React.ComponentType> = {
   ServiceHealthWidget: ServiceHealthWidget,
+  IntegrationStatusWidget: IntegrationStatusWidget,
+  AuthStatusWidget: AuthStatusWidget,
+  NotificationsStatsWidget: NotificationsStatsWidget,
 };
 
 /**
@@ -31,5 +34,8 @@ export const builtInWidgetComponents: Record<string, React.ComponentType> = {
 export function getBuiltInWidgetComponents(): WidgetComponent[] {
   return [
     { name: 'ServiceHealthWidget', component: ServiceHealthWidget },
+    { name: 'IntegrationStatusWidget', component: IntegrationStatusWidget },
+    { name: 'AuthStatusWidget', component: AuthStatusWidget },
+    { name: 'NotificationsStatsWidget', component: NotificationsStatsWidget },
   ];
 }