@qwickapps/server 1.4.0 → 1.5.0

package/ui/src/api/controlPanelApi.ts

@@ -347,6 +347,51 @@ export interface TestProviderResponse {
   };
 }
 
+// ==================
+// 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
 // ==================
@@ -470,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) {
@@ -500,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(() => ({}));
@@ -512,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) {
@@ -521,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 };
   }
 
   // ==================
@@ -821,6 +876,48 @@ class ControlPanelApi {
     }
     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, IntegrationStatusWidget, AuthStatusWidget } from './widgets';
+import { ServiceHealthWidget, IntegrationStatusWidget, AuthStatusWidget, NotificationsStatsWidget } from './widgets';
 import type { WidgetComponent } from './WidgetComponentRegistry';
 
 /**
@@ -21,6 +21,7 @@ export const builtInWidgetComponents: Record<string, React.ComponentType> = {
   ServiceHealthWidget: ServiceHealthWidget,
   IntegrationStatusWidget: IntegrationStatusWidget,
   AuthStatusWidget: AuthStatusWidget,
+  NotificationsStatsWidget: NotificationsStatsWidget,
 };
 
 /**
@@ -35,5 +36,6 @@ export function getBuiltInWidgetComponents(): WidgetComponent[] {
     { name: 'ServiceHealthWidget', component: ServiceHealthWidget },
     { name: 'IntegrationStatusWidget', component: IntegrationStatusWidget },
     { name: 'AuthStatusWidget', component: AuthStatusWidget },
+    { name: 'NotificationsStatsWidget', component: NotificationsStatsWidget },
   ];
 }

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

@@ -7,3 +7,4 @@
 export { ServiceHealthWidget } from './ServiceHealthWidget';
 export { IntegrationStatusWidget } from './IntegrationStatusWidget';
 export { AuthStatusWidget } from './AuthStatusWidget';
+export { NotificationsStatsWidget } from './NotificationsStatsWidget';