@qwickapps/server 1.3.1 → 1.5.0

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/NotificationsStatsWidget.tsx

@@ -0,0 +1,167 @@
+/**
+ * Notifications Stats Widget
+ *
+ * Displays realtime notifications connection statistics on the Control Panel dashboard.
+ * Shows active clients, events processed, and connection health.
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import { useState, useEffect } from 'react';
+import { Box, Card, CardContent, Chip, LinearProgress } from '@mui/material';
+import { GridLayout, Text } from '@qwickapps/react-framework';
+import WifiIcon from '@mui/icons-material/Wifi';
+import WifiOffIcon from '@mui/icons-material/WifiOff';
+import DevicesIcon from '@mui/icons-material/Devices';
+import PersonIcon from '@mui/icons-material/Person';
+import SendIcon from '@mui/icons-material/Send';
+import ErrorIcon from '@mui/icons-material/Error';
+import { api } from '../../api/controlPanelApi';
+import type { NotificationsStatsResponse } from '../../api/controlPanelApi';
+import { StatCard } from '../../components/StatCard';
+import { formatNumber, formatDuration } from '../../utils/formatters';
+
+/**
+ * Notifications Stats Widget Component
+ */
+export function NotificationsStatsWidget() {
+  const [stats, setStats] = useState<NotificationsStatsResponse | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchStats = async () => {
+      try {
+        const data = await api.getNotificationsStats();
+        setStats(data);
+        setError(null);
+      } catch (err) {
+        // Check if it's a 404 (plugin not enabled)
+        if (err instanceof Error && err.message.includes('404')) {
+          setError('Notifications plugin not enabled');
+        } else {
+          setError(err instanceof Error ? err.message : 'Failed to fetch stats');
+        }
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchStats();
+    const interval = setInterval(fetchStats, 5000); // Refresh every 5 seconds
+    return () => clearInterval(interval);
+  }, []);
+
+  if (loading) {
+    return (
+      <Card sx={{ bgcolor: 'var(--theme-surface)' }}>
+        <CardContent>
+          <LinearProgress />
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (error) {
+    return (
+      <Card sx={{ bgcolor: 'var(--theme-surface)', border: '1px solid var(--theme-border)' }}>
+        <CardContent>
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+            <WifiOffIcon sx={{ color: 'var(--theme-text-secondary)' }} />
+            <Text variant="body2" customColor="var(--theme-text-secondary)" content={error} />
+          </Box>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (!stats) {
+    return null;
+  }
+
+  const isHealthy = stats.connectionHealth.isHealthy;
+  const healthColor = isHealthy ? 'var(--theme-success)' : 'var(--theme-warning)';
+
+  return (
+    <Box>
+      {/* Connection Status Bar */}
+      <Card sx={{ bgcolor: 'var(--theme-surface)', mb: 2 }}>
+        <CardContent sx={{ py: 1, '&:last-child': { pb: 1 } }}>
+          <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+              {isHealthy ? (
+                <WifiIcon sx={{ color: healthColor, fontSize: 20 }} />
+              ) : (
+                <WifiOffIcon sx={{ color: healthColor, fontSize: 20 }} />
+              )}
+              <Text
+                variant="body2"
+                content={isHealthy ? 'Connected' : 'Reconnecting...'}
+                customColor={healthColor}
+                fontWeight="500"
+              />
+              {stats.connectionHealth.isReconnecting && (
+                <Chip
+                  label={`Attempt ${stats.connectionHealth.reconnectAttempts}`}
+                  size="small"
+                  sx={{
+                    bgcolor: 'var(--theme-warning)20',
+                    color: 'var(--theme-warning)',
+                    fontSize: '0.7rem',
+                    height: 18,
+                  }}
+                />
+              )}
+            </Box>
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
+              <Text
+                variant="caption"
+                content={`${stats.channels.length} channel${stats.channels.length !== 1 ? 's' : ''}`}
+                customColor="var(--theme-text-secondary)"
+              />
+              {stats.lastEventAt && (
+                <Text
+                  variant="caption"
+                  content={`Last event: ${formatDuration(stats.connectionHealth.timeSinceLastEvent)} ago`}
+                  customColor="var(--theme-text-secondary)"
+                />
+              )}
+            </Box>
+          </Box>
+        </CardContent>
+      </Card>
+
+      {/* Stats Grid */}
+      <GridLayout columns={4} spacing="small" equalHeight>
+        <StatCard
+          icon={<DevicesIcon sx={{ fontSize: 28 }} />}
+          label="Active Clients"
+          value={stats.currentConnections}
+          subValue={`${stats.totalConnections} total`}
+          color="var(--theme-primary)"
+        />
+        <StatCard
+          icon={<PersonIcon sx={{ fontSize: 28 }} />}
+          label="By Device"
+          value={stats.clientsByType.device}
+          subValue={`${stats.clientsByType.user} by user`}
+          color="var(--theme-info)"
+        />
+        <StatCard
+          icon={<SendIcon sx={{ fontSize: 28 }} />}
+          label="Events Routed"
+          value={formatNumber(stats.eventsRouted)}
+          subValue={`${formatNumber(stats.eventsProcessed)} processed`}
+          color="var(--theme-success)"
+        />
+        <StatCard
+          icon={<ErrorIcon sx={{ fontSize: 28 }} />}
+          label="Dropped"
+          value={formatNumber(stats.eventsDroppedNoClients)}
+          subValue={`${stats.eventsParseFailed} parse errors`}
+          color={stats.eventsDroppedNoClients > 0 ? 'var(--theme-warning)' : 'var(--theme-text-secondary)'}
+        />
+      </GridLayout>
+    </Box>
+  );
+}

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

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