@qwickapps/server 1.3.0 → 1.4.0

package/ui/src/components/ControlPanelApp.tsx

@@ -36,6 +36,7 @@ import { defaultConfig } from '../config/AppConfig';
 import { DashboardPage } from '../pages/DashboardPage';
 import { LogsPage } from '../pages/LogsPage';
 import { SystemPage } from '../pages/SystemPage';
+import { AuthPage } from '../pages/AuthPage';
 import { NotFoundPage } from '../pages/NotFoundPage';
 
 // Dashboard widget system
@@ -122,6 +123,7 @@ function getBaseNavigationItems(): MenuItem[] {
   return [
     { id: 'dashboard', label: 'Dashboard', route: '/', icon: 'dashboard' },
     { id: 'logs', label: 'Logs', route: '/logs', icon: 'article' },
+    { id: 'auth', label: 'Auth', route: '/auth', icon: 'lock' },
     { id: 'system', label: 'System', route: '/system', icon: 'settings' },
   ];
 }
@@ -192,6 +194,7 @@ export function ControlPanelApp({
               <>
                 {!hideBaseNavItems.includes('dashboard') && <Route path="/" element={<DashboardPage />} />}
                 {!hideBaseNavItems.includes('logs') && <Route path="/logs" element={<LogsPage />} />}
+                {!hideBaseNavItems.includes('auth') && <Route path="/auth" element={<AuthPage />} />}
                 {!hideBaseNavItems.includes('system') && <Route path="/system" element={<SystemPage />} />}
               </>
             )}

package/ui/src/dashboard/PluginWidgetRenderer.tsx

@@ -100,16 +100,19 @@ export function PluginWidgetRenderer({
 
   return (
     <>
-      {visibleWidgets.map(widget => (
-        <Box key={widget.id} sx={{ mt: 4 }}>
-          {widget.title && (
-            <Typography variant="h6" sx={{ mb: 2, color: 'var(--theme-text-primary)' }}>
-              {widget.title}
-            </Typography>
-          )}
-          {getComponent(widget.component)}
-        </Box>
-      ))}
+      {visibleWidgets.map(widget => {
+        const Component = getComponent(widget.component);
+        return (
+          <Box key={widget.id} sx={{ mt: 4 }}>
+            {widget.title && (
+              <Typography variant="h6" sx={{ mb: 2, color: 'var(--theme-text-primary)' }}>
+                {widget.title}
+              </Typography>
+            )}
+            {Component && <Component />}
+          </Box>
+        );
+      })}
     </>
   );
 }

package/ui/src/dashboard/WidgetComponentRegistry.tsx

@@ -7,25 +7,29 @@
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
 
-import { ReactNode, createContext, useContext, useState, useCallback, useMemo } from 'react';
+import React, { createContext, useContext, useState, useCallback, useMemo, type ReactNode } from 'react';
 
 /**
  * Widget component definition
+ *
+ * IMPORTANT: We store component functions (ComponentType), not JSX instances (ReactNode).
+ * This ensures cross-React-version compatibility when the library is used in apps
+ * with different React versions.
  */
 export interface WidgetComponent {
   /** Component name (must match server-side WidgetContribution.component) */
   name: string;
-  /** The React component to render */
-  component: ReactNode;
+  /** The React component function to render */
+  component: React.ComponentType;
 }
 
 interface WidgetComponentRegistryContextValue {
   /** Register a widget component */
-  registerComponent: (name: string, component: ReactNode) => void;
+  registerComponent: (name: string, component: React.ComponentType) => void;
   /** Register multiple widget components */
   registerComponents: (components: WidgetComponent[]) => void;
   /** Get a component by name */
-  getComponent: (name: string) => ReactNode | null;
+  getComponent: (name: string) => React.ComponentType | null;
   /** Check if a component is registered */
   hasComponent: (name: string) => boolean;
   /** Get all registered component names */
@@ -47,15 +51,15 @@ export function WidgetComponentRegistryProvider({
   initialComponents = [],
   children,
 }: WidgetComponentRegistryProviderProps) {
-  const [components, setComponents] = useState<Map<string, ReactNode>>(() => {
-    const map = new Map<string, ReactNode>();
+  const [components, setComponents] = useState<Map<string, React.ComponentType>>(() => {
+    const map = new Map<string, React.ComponentType>();
     for (const comp of initialComponents) {
       map.set(comp.name, comp.component);
     }
     return map;
   });
 
-  const registerComponent = useCallback((name: string, component: ReactNode) => {
+  const registerComponent = useCallback((name: string, component: React.ComponentType) => {
     setComponents(prev => {
       const next = new Map(prev);
       next.set(name, component);
@@ -73,7 +77,7 @@ export function WidgetComponentRegistryProvider({
     });
   }, []);
 
-  const getComponent = useCallback((name: string): ReactNode | null => {
+  const getComponent = useCallback((name: string): React.ComponentType | null => {
     return components.get(name) ?? null;
   }, [components]);
 

package/ui/src/dashboard/builtInWidgets.tsx

@@ -4,10 +4,13 @@
  * Maps built-in widget component names to their React components.
  * These are the widgets that qwickapps-server provides out of the box.
  *
+ * IMPORTANT: We export component functions, not JSX instances.
+ * This ensures cross-React-version compatibility.
+ *
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
 
-import { ServiceHealthWidget } from './widgets';
+import { ServiceHealthWidget, IntegrationStatusWidget, AuthStatusWidget } from './widgets';
 import type { WidgetComponent } from './WidgetComponentRegistry';
 
 /**
@@ -16,14 +19,21 @@ import type { WidgetComponent } from './WidgetComponentRegistry';
  */
 export const builtInWidgetComponents: Record<string, React.ComponentType> = {
   ServiceHealthWidget: ServiceHealthWidget,
+  IntegrationStatusWidget: IntegrationStatusWidget,
+  AuthStatusWidget: AuthStatusWidget,
 };
 
 /**
- * Get built-in widget components as WidgetComponent array with JSX elements.
+ * Get built-in widget components as WidgetComponent array.
  * Use this when registering with WidgetComponentRegistryProvider.
+ *
+ * Returns component functions (not JSX instances) to ensure compatibility
+ * across different React versions.
  */
 export function getBuiltInWidgetComponents(): WidgetComponent[] {
   return [
-    { name: 'ServiceHealthWidget', component: <ServiceHealthWidget /> },
+    { name: 'ServiceHealthWidget', component: ServiceHealthWidget },
+    { name: 'IntegrationStatusWidget', component: IntegrationStatusWidget },
+    { name: 'AuthStatusWidget', component: AuthStatusWidget },
   ];
 }

package/ui/src/dashboard/widgets/AuthStatusWidget.tsx

@@ -0,0 +1,143 @@
+/**
+ * Auth Status Widget
+ *
+ * Displays the authentication plugin status on the dashboard.
+ * Shows whether auth is enabled, the adapter type, and configuration status.
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import { useState, useEffect } from 'react';
+import { Box, Typography, Chip, CircularProgress, Alert } from '@mui/material';
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+import ErrorIcon from '@mui/icons-material/Error';
+import BlockIcon from '@mui/icons-material/Block';
+import { api } from '../../api/controlPanelApi';
+
+interface AuthStatus {
+  state: 'enabled' | 'disabled' | 'error';
+  adapter: string | null;
+  error?: string;
+  missingVars?: string[];
+}
+
+const adapterLabels: Record<string, string> = {
+  supertokens: 'SuperTokens',
+  auth0: 'Auth0',
+  supabase: 'Supabase',
+  basic: 'Basic Auth',
+};
+
+export function AuthStatusWidget() {
+  const [status, setStatus] = useState<AuthStatus | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fetchStatus = async () => {
+      try {
+        const data = await api.fetch<AuthStatus>('/auth/config/status');
+        setStatus(data);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'Failed to fetch auth status');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchStatus();
+  }, []);
+
+  if (loading) {
+    return (
+      <Box sx={{ display: 'flex', justifyContent: 'center', py: 2 }}>
+        <CircularProgress size={20} />
+      </Box>
+    );
+  }
+
+  if (error) {
+    return (
+      <Alert severity="warning" sx={{ py: 0.5, fontSize: 13 }}>
+        Unable to load auth status
+      </Alert>
+    );
+  }
+
+  if (!status) return null;
+
+  const getStateIcon = () => {
+    switch (status.state) {
+      case 'enabled':
+        return <CheckCircleIcon sx={{ color: 'var(--theme-success)', fontSize: 32 }} />;
+      case 'error':
+        return <ErrorIcon sx={{ color: 'var(--theme-error)', fontSize: 32 }} />;
+      case 'disabled':
+      default:
+        return <BlockIcon sx={{ color: 'var(--theme-text-secondary)', fontSize: 32 }} />;
+    }
+  };
+
+  const getStateColor = () => {
+    switch (status.state) {
+      case 'enabled':
+        return 'var(--theme-success)';
+      case 'error':
+        return 'var(--theme-error)';
+      case 'disabled':
+      default:
+        return 'var(--theme-text-secondary)';
+    }
+  };
+
+  return (
+    <Box
+      sx={{
+        bgcolor: 'var(--theme-surface)',
+        borderRadius: 2,
+        p: 2,
+        border: '1px solid var(--theme-border)',
+      }}
+    >
+      <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
+        {getStateIcon()}
+        <Box sx={{ flex: 1 }}>
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 0.5 }}>
+            <Typography variant="subtitle1" sx={{ color: 'var(--theme-text-primary)', fontWeight: 600 }}>
+              {status.state === 'enabled' && status.adapter
+                ? adapterLabels[status.adapter] || status.adapter
+                : status.state === 'disabled'
+                  ? 'Not Configured'
+                  : 'Configuration Error'}
+            </Typography>
+            <Chip
+              label={status.state.toUpperCase()}
+              size="small"
+              sx={{
+                bgcolor: `${getStateColor()}20`,
+                color: getStateColor(),
+                fontWeight: 600,
+                fontSize: 10,
+                height: 20,
+              }}
+            />
+          </Box>
+          <Typography variant="body2" sx={{ color: 'var(--theme-text-secondary)' }}>
+            {status.state === 'enabled'
+              ? 'Authentication is active'
+              : status.state === 'disabled'
+                ? 'Set AUTH_ADAPTER environment variable'
+                : status.error || 'Check configuration'}
+          </Typography>
+        </Box>
+      </Box>
+
+      {/* Missing vars warning */}
+      {status.missingVars && status.missingVars.length > 0 && (
+        <Alert severity="warning" sx={{ mt: 2, py: 0.5, '& .MuiAlert-message': { fontSize: 12 } }}>
+          Missing: {status.missingVars.join(', ')}
+        </Alert>
+      )}
+    </Box>
+  );
+}

package/ui/src/dashboard/widgets/IntegrationStatusWidget.tsx

@@ -0,0 +1,135 @@
+/**
+ * Integration Status Widget
+ *
+ * Displays the status of configured integrations with their connection status.
+ * Used in the dashboard to show a quick overview of integration health.
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import { useState, useEffect } from 'react';
+import { Box, Typography, Chip, CircularProgress, Alert } from '@mui/material';
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+import ErrorIcon from '@mui/icons-material/Error';
+import { api } from '../../api/controlPanelApi';
+
+interface Integration {
+  id: string;
+  name: string;
+  description: string;
+  configured: boolean;
+}
+
+interface IntegrationsConfig {
+  integrations: Integration[];
+  stats: {
+    totalRequests: number;
+  };
+}
+
+export function IntegrationStatusWidget() {
+  const [config, setConfig] = useState<IntegrationsConfig | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fetchConfig = async () => {
+      try {
+        const data = await api.fetch<IntegrationsConfig>('/ai-proxy/config');
+        setConfig(data);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'Failed to fetch integrations');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchConfig();
+  }, []);
+
+  if (loading) {
+    return (
+      <Box sx={{ display: 'flex', justifyContent: 'center', py: 2 }}>
+        <CircularProgress size={20} />
+      </Box>
+    );
+  }
+
+  if (error) {
+    return (
+      <Alert severity="warning" sx={{ py: 0.5, fontSize: 13 }}>
+        Unable to load integrations
+      </Alert>
+    );
+  }
+
+  if (!config) return null;
+
+  const configuredCount = config.integrations.filter((i) => i.configured).length;
+  const totalCount = config.integrations.length;
+
+  return (
+    <Box
+      sx={{
+        bgcolor: 'var(--theme-surface)',
+        borderRadius: 2,
+        p: 2,
+        border: '1px solid var(--theme-border)',
+      }}
+    >
+      {/* Summary */}
+      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
+        <Typography variant="subtitle2" sx={{ color: 'var(--theme-text-secondary)' }}>
+          {configuredCount} of {totalCount} configured
+        </Typography>
+        <Typography variant="subtitle2" sx={{ color: 'var(--theme-text-secondary)' }}>
+          {config.stats.totalRequests} requests
+        </Typography>
+      </Box>
+
+      {/* Integration List */}
+      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
+        {config.integrations.map((integration) => (
+          <Box
+            key={integration.id}
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+              p: 1.5,
+              bgcolor: 'var(--theme-background)',
+              borderRadius: 1,
+            }}
+          >
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+              {integration.configured ? (
+                <CheckCircleIcon sx={{ color: 'var(--theme-success)', fontSize: 18 }} />
+              ) : (
+                <ErrorIcon sx={{ color: 'var(--theme-text-secondary)', fontSize: 18 }} />
+              )}
+              <Box>
+                <Typography variant="body2" sx={{ color: 'var(--theme-text-primary)', fontWeight: 500 }}>
+                  {integration.name}
+                </Typography>
+                <Typography variant="caption" sx={{ color: 'var(--theme-text-secondary)' }}>
+                  {integration.description}
+                </Typography>
+              </Box>
+            </Box>
+            <Chip
+              label={integration.configured ? 'Connected' : 'Not Configured'}
+              size="small"
+              sx={{
+                bgcolor: integration.configured ? 'var(--theme-success)20' : 'transparent',
+                color: integration.configured ? 'var(--theme-success)' : 'var(--theme-text-secondary)',
+                border: integration.configured ? 'none' : '1px solid var(--theme-border)',
+                fontWeight: 500,
+                fontSize: 11,
+              }}
+            />
+          </Box>
+        ))}
+      </Box>
+    </Box>
+  );
+}

package/ui/src/dashboard/widgets/index.ts

@@ -5,3 +5,5 @@
  */
 
 export { ServiceHealthWidget } from './ServiceHealthWidget';
+export { IntegrationStatusWidget } from './IntegrationStatusWidget';
+export { AuthStatusWidget } from './AuthStatusWidget';