@qwickapps/server 1.6.0 → 1.6.1

package/ui/src/components/plugins/PluginStatusWidget.tsx

@@ -0,0 +1,158 @@
+/**
+ * PluginStatusWidget - Template for plugin dashboard widgets
+ *
+ * Provides consistent layout for plugin status displays on the dashboard.
+ * Supports stats, health indicators, and quick actions.
+ *
+ * @example
+ * ```tsx
+ * <PluginStatusWidget
+ *   title="PostgreSQL"
+ *   icon={<DatabaseIcon />}
+ *   status="healthy"
+ *   stats={[
+ *     { label: 'Connections', value: 42, status: 'healthy' },
+ *     { label: 'Queries/sec', value: 1250, status: 'info' }
+ *   ]}
+ *   actions={[
+ *     { label: 'View Details', onClick: () => navigate('/postgres') }
+ *   ]}
+ * />
+ * ```
+ */
+
+import React from 'react';
+import { StatCard, StatCardProps } from '@qwickapps/react-framework';
+
+export interface PluginStatusWidgetProps {
+  /** Plugin name */
+  title: string;
+
+  /** Optional icon */
+  icon?: React.ReactNode;
+
+  /** Overall plugin status */
+  status?: 'healthy' | 'warning' | 'error' | 'disabled';
+
+  /** Overall plugin health (alias for status, for backward compatibility) */
+  health?: 'healthy' | 'warning' | 'error' | 'disabled';
+
+  /** Array of stats to display */
+  stats?: StatCardProps[];
+
+  /** Quick action buttons */
+  actions?: Array<{
+    label: string;
+    onClick: () => void;
+    variant?: 'primary' | 'secondary' | 'danger';
+  }>;
+
+  /** Optional message or description */
+  message?: string;
+
+  /** Loading state */
+  loading?: boolean;
+
+  /** Error message */
+  error?: string | null;
+
+  /** Path to details page */
+  detailsPath?: string;
+}
+
+export const PluginStatusWidget: React.FC<PluginStatusWidgetProps> = ({
+  title,
+  icon,
+  status,
+  health,
+  stats = [],
+  actions = [],
+  message,
+  loading = false,
+}) => {
+  // Use health as fallback for status (backward compatibility)
+  const displayStatus = status || health || 'disabled';
+  const statusIndicators = {
+    healthy: 'bg-green-500',
+    warning: 'bg-yellow-500',
+    error: 'bg-red-500',
+    disabled: 'bg-gray-400',
+  };
+
+  const actionVariants = {
+    primary: 'bg-blue-600 hover:bg-blue-700 text-white',
+    secondary: 'bg-gray-200 hover:bg-gray-300 text-gray-900 dark:bg-gray-700 dark:hover:bg-gray-600 dark:text-white',
+    danger: 'bg-red-600 hover:bg-red-700 text-white',
+  };
+
+  if (loading) {
+    return (
+      <div className="rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-6">
+        <div className="animate-pulse">
+          <div className="h-6 bg-gray-200 dark:bg-gray-700 rounded w-1/3 mb-4"></div>
+          <div className="space-y-3">
+            <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded"></div>
+            <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-5/6"></div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-6">
+      {/* Header */}
+      <div className="flex items-center justify-between mb-4">
+        <div className="flex items-center gap-3">
+          {icon && (
+            <div className="text-2xl text-gray-600 dark:text-gray-400">
+              {icon}
+            </div>
+          )}
+          <div>
+            <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
+              {title}
+            </h3>
+            {message && (
+              <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
+                {message}
+              </p>
+            )}
+          </div>
+        </div>
+        <div
+          className={`w-3 h-3 rounded-full ${statusIndicators[displayStatus]}`}
+          title={displayStatus}
+        />
+      </div>
+
+      {/* Stats Grid */}
+      {stats.length > 0 && (
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 mb-4">
+          {stats.map((stat, index) => (
+            <StatCard key={index} {...stat} />
+          ))}
+        </div>
+      )}
+
+      {/* Actions */}
+      {actions.length > 0 && (
+        <div className="flex flex-wrap gap-2 mt-4">
+          {actions.map((action, index) => (
+            <button
+              key={index}
+              onClick={action.onClick}
+              className={`
+                px-4 py-2 rounded-md text-sm font-medium
+                transition-colors
+                ${actionVariants[action.variant || 'secondary']}
+              `}
+            >
+              {action.label}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};

package/ui/src/components/plugins/index.ts

@@ -0,0 +1,20 @@
+/**
+ * Server Plugin UI Components
+ *
+ * Server-specific component patterns for qwickapps-server plugin UIs.
+ *
+ * @packageDocumentation
+ */
+
+export { PluginStatusWidget } from './PluginStatusWidget.js';
+export type { PluginStatusWidgetProps } from './PluginStatusWidget.js';
+
+export { PluginManagementPage } from './PluginManagementPage.js';
+export type { PluginManagementPageProps } from './PluginManagementPage.js';
+
+export { PluginConfigPanel } from './PluginConfigPanel.js';
+export type {
+  PluginConfigPanelProps,
+  ConfigField,
+  ConfigFieldType,
+} from './PluginConfigPanel.js';

package/ui/src/config/preferences.ts

@@ -0,0 +1,18 @@
+/**
+ * Preferences Configuration
+ *
+ * Shared constants for preferences management.
+ * These constants are used by both UI and server code.
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+/**
+ * Maximum size of preferences JSON string (100KB)
+ */
+export const MAX_PREFERENCES_SIZE = 100_000;
+
+/**
+ * Maximum nesting depth for preferences object
+ */
+export const MAX_NESTING_DEPTH = 10;

package/ui/src/dashboard/builtInWidgets.tsx

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

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

@@ -0,0 +1,229 @@
+/**
+ * CMS Maintenance Widget
+ *
+ * Provides CMS service control and seed management for the maintenance page
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import { useState, useEffect } from 'react';
+import {
+  Card,
+  CardContent,
+  Typography,
+  Box,
+  Button,
+  Chip,
+  CircularProgress,
+  Alert,
+  Divider,
+  List,
+  ListItem,
+  ListItemText,
+  IconButton,
+} from '@mui/material';
+import RefreshIcon from '@mui/icons-material/Refresh';
+import PlayArrowIcon from '@mui/icons-material/PlayArrow';
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+import ErrorIcon from '@mui/icons-material/Error';
+
+interface CMSStatus {
+  status: 'running' | 'unhealthy' | 'down';
+  url: string;
+  timestamp: string;
+}
+
+interface Seed {
+  name: string;
+  file: string;
+  path: string;
+}
+
+export function CMSMaintenanceWidget() {
+  const [status, setStatus] = useState<CMSStatus | null>(null);
+  const [seeds, setSeeds] = useState<Seed[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [executing, setExecuting] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState<string | null>(null);
+
+  const fetchStatus = async () => {
+    try {
+      const response = await fetch('/api/cms/status');
+      const data = await response.json();
+      setStatus(data);
+    } catch (err) {
+      console.error('Failed to fetch CMS status:', err);
+    }
+  };
+
+  const fetchSeeds = async () => {
+    try {
+      const response = await fetch('/api/cms/seeds');
+      const data = await response.json();
+      setSeeds(data.seeds || []);
+    } catch (err) {
+      console.error('Failed to fetch seeds:', err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchStatus();
+    fetchSeeds();
+    const interval = setInterval(fetchStatus, 30000);
+    return () => clearInterval(interval);
+  }, []);
+
+  const handleRestart = async () => {
+    setError(null);
+    setSuccess(null);
+    try {
+      const response = await fetch('/api/cms/restart', { method: 'POST' });
+      const data = await response.json();
+
+      if (response.ok) {
+        setSuccess('CMS service restarted successfully');
+        setTimeout(() => fetchStatus(), 2000);
+      } else {
+        setError(data.message || 'Restart not implemented');
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to restart CMS');
+    }
+  };
+
+  const handleRunSeed = async (seedName: string) => {
+    setExecuting(seedName);
+    setError(null);
+    setSuccess(null);
+
+    try {
+      const response = await fetch(`/api/cms/seeds/${seedName}/execute`, {
+        method: 'POST',
+      });
+      const data = await response.json();
+
+      if (data.success) {
+        setSuccess(`Seed "${seedName}" executed successfully`);
+      } else {
+        setError(data.error || 'Seed execution failed');
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to execute seed');
+    } finally {
+      setExecuting(null);
+    }
+  };
+
+  if (loading) {
+    return (
+      <Card>
+        <CardContent>
+          <Box display="flex" justifyContent="center" alignItems="center" minHeight="200px">
+            <CircularProgress />
+          </Box>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  const isHealthy = status?.status === 'running';
+  const statusColor = isHealthy ? 'success' : status?.status === 'unhealthy' ? 'warning' : 'error';
+  const StatusIcon = isHealthy ? CheckCircleIcon : ErrorIcon;
+
+  return (
+    <Card>
+      <CardContent>
+        {/* Header with Status */}
+        <Box display="flex" justifyContent="space-between" alignItems="center" mb={2}>
+          <Typography variant="h6">CMS Service Control</Typography>
+          {status && (
+            <Chip
+              label={status.status.toUpperCase()}
+              color={statusColor}
+              size="small"
+              icon={<StatusIcon />}
+            />
+          )}
+        </Box>
+
+        {error && (
+          <Alert severity="error" sx={{ mb: 2 }} onClose={() => setError(null)}>
+            {error}
+          </Alert>
+        )}
+
+        {success && (
+          <Alert severity="success" sx={{ mb: 2 }} onClose={() => setSuccess(null)}>
+            {success}
+          </Alert>
+        )}
+
+        {/* Service Control */}
+        <Box mb={3}>
+          <Typography variant="subtitle2" gutterBottom>
+            Service Control
+          </Typography>
+          <Typography variant="body2" color="text.secondary" mb={2}>
+            Manage the Payload CMS service
+          </Typography>
+          <Button
+            variant="outlined"
+            startIcon={<RefreshIcon />}
+            onClick={handleRestart}
+            disabled={!status}
+          >
+            Restart CMS Service
+          </Button>
+        </Box>
+
+        <Divider sx={{ my: 2 }} />
+
+        {/* Seed Management */}
+        <Box>
+          <Box display="flex" justifyContent="space-between" alignItems="center" mb={1}>
+            <Typography variant="subtitle2">Seed Scripts</Typography>
+            <IconButton size="small" onClick={fetchSeeds}>
+              <RefreshIcon fontSize="small" />
+            </IconButton>
+          </Box>
+          <Typography variant="body2" color="text.secondary" mb={2}>
+            Execute database seed scripts for initial data setup
+          </Typography>
+
+          {seeds.length > 0 ? (
+            <List dense>
+              {seeds.map((seed) => (
+                <ListItem
+                  key={seed.name}
+                  secondaryAction={
+                    <Button
+                      variant="outlined"
+                      size="small"
+                      startIcon={executing === seed.name ? <CircularProgress size={16} /> : <PlayArrowIcon />}
+                      onClick={() => handleRunSeed(seed.name)}
+                      disabled={executing !== null}
+                    >
+                      {executing === seed.name ? 'Running...' : 'Run'}
+                    </Button>
+                  }
+                >
+                  <ListItemText
+                    primary={seed.name}
+                    secondary={seed.file}
+                  />
+                </ListItem>
+              ))}
+            </List>
+          ) : (
+            <Alert severity="info">
+              No seed scripts found. Place seed scripts in the configured seeds directory.
+            </Alert>
+          )}
+        </Box>
+      </CardContent>
+    </Card>
+  );
+}

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

@@ -0,0 +1,115 @@
+/**
+ * CMS Status Widget
+ *
+ * Displays Payload CMS service status on the dashboard
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import { useState, useEffect } from 'react';
+import {
+  Card,
+  CardContent,
+  Typography,
+  Box,
+  Chip,
+  CircularProgress,
+  Alert,
+} from '@mui/material';
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+import ErrorIcon from '@mui/icons-material/Error';
+import LinkIcon from '@mui/icons-material/Link';
+
+interface CMSStatus {
+  status: 'running' | 'unhealthy' | 'down';
+  url: string;
+  health?: any;
+  error?: string;
+  timestamp: string;
+}
+
+export function CMSStatusWidget() {
+  const [status, setStatus] = useState<CMSStatus | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchStatus = async () => {
+    try {
+      const response = await fetch('/api/cms/status');
+      const data = await response.json();
+      setStatus(data);
+      setError(null);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to fetch CMS status');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchStatus();
+    const interval = setInterval(fetchStatus, 30000); // Refresh every 30s
+    return () => clearInterval(interval);
+  }, []);
+
+  if (loading) {
+    return (
+      <Card>
+        <CardContent>
+          <Box display="flex" justifyContent="center" alignItems="center" minHeight="100px">
+            <CircularProgress size={24} />
+          </Box>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (error || !status) {
+    return (
+      <Card>
+        <CardContent>
+          <Alert severity="error">{error || 'Failed to load CMS status'}</Alert>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  const isHealthy = status.status === 'running';
+  const statusColor = isHealthy ? 'success' : status.status === 'unhealthy' ? 'warning' : 'error';
+  const StatusIcon = isHealthy ? CheckCircleIcon : ErrorIcon;
+
+  return (
+    <Card>
+      <CardContent>
+        <Box display="flex" justifyContent="space-between" alignItems="center" mb={2}>
+          <Typography variant="h6">Payload CMS</Typography>
+          <Chip
+            label={status.status.toUpperCase()}
+            color={statusColor}
+            size="small"
+            icon={<StatusIcon />}
+          />
+        </Box>
+
+        <Box display="flex" flexDirection="column" gap={1}>
+          <Box display="flex" alignItems="center" gap={1}>
+            <LinkIcon fontSize="small" color="action" />
+            <Typography variant="body2" color="text.secondary">
+              {status.url}
+            </Typography>
+          </Box>
+
+          {status.error && (
+            <Alert severity="error" sx={{ mt: 1 }}>
+              {status.error}
+            </Alert>
+          )}
+
+          <Typography variant="caption" color="text.secondary" sx={{ mt: 1 }}>
+            Last checked: {new Date(status.timestamp).toLocaleTimeString()}
+          </Typography>
+        </Box>
+      </CardContent>
+    </Card>
+  );
+}

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

@@ -18,7 +18,7 @@ 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 { StatCard } from '@qwickapps/react-framework';
 import { formatNumber, formatDuration } from '../../utils/formatters';
 
 /**

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

@@ -8,3 +8,5 @@ export { ServiceHealthWidget } from './ServiceHealthWidget';
 export { IntegrationStatusWidget } from './IntegrationStatusWidget';
 export { AuthStatusWidget } from './AuthStatusWidget';
 export { NotificationsStatsWidget } from './NotificationsStatsWidget';
+export { CMSStatusWidget } from './CMSStatusWidget';
+export { CMSMaintenanceWidget } from './CMSMaintenanceWidget';