@qwickapps/server 1.6.1 → 1.7.1

package/ui/src/components/tenants/TenantFormDialog.tsx

@@ -0,0 +1,217 @@
+/**
+ * TenantFormDialog Component
+ *
+ * Dialog for creating and editing tenants.
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import { useState, useEffect } from 'react';
+import {
+  TextField,
+  Select,
+  MenuItem,
+  FormControl,
+  InputLabel,
+  FormHelperText,
+} from '@mui/material';
+import { Dialog, DialogTitle, DialogContent, DialogActions, Button } from '@qwickapps/react-framework';
+
+export interface Tenant {
+  id: string;
+  name: string;
+  type: 'user' | 'organization' | 'group' | 'department';
+  owner_id: string;
+  metadata?: Record<string, unknown>;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface TenantFormDialogProps {
+  /** Whether the dialog is open */
+  open: boolean;
+  /** Tenant to edit (if editing) */
+  tenant?: Tenant;
+  /** Callback when dialog is closed */
+  onClose: () => void;
+  /** Callback when form is submitted */
+  onSubmit: (data: {
+    name: string;
+    type: string;
+    owner_id: string;
+    metadata?: Record<string, unknown>;
+  }) => void | Promise<void>;
+}
+
+export function TenantFormDialog({
+  open,
+  tenant,
+  onClose,
+  onSubmit,
+}: TenantFormDialogProps) {
+  const [name, setName] = useState('');
+  const [type, setType] = useState<string>('organization');
+  const [ownerId, setOwnerId] = useState('');
+  const [metadataJson, setMetadataJson] = useState('{}');
+  const [errors, setErrors] = useState<Record<string, string>>({});
+  const [submitting, setSubmitting] = useState(false);
+
+  const isEditMode = !!tenant;
+
+  // Initialize form when tenant changes
+  useEffect(() => {
+    if (tenant) {
+      setName(tenant.name);
+      setType(tenant.type);
+      setOwnerId(tenant.owner_id);
+      setMetadataJson(JSON.stringify(tenant.metadata || {}, null, 2));
+    } else {
+      setName('');
+      setType('organization');
+      setOwnerId('');
+      setMetadataJson('{}');
+    }
+    setErrors({});
+  }, [tenant, open]);
+
+  const validate = () => {
+    const newErrors: Record<string, string> = {};
+
+    if (!name.trim()) {
+      newErrors.name = 'Name is required';
+    }
+
+    if (!isEditMode && !ownerId.trim()) {
+      newErrors.ownerId = 'Owner ID is required';
+    }
+
+    // Validate JSON
+    try {
+      JSON.parse(metadataJson);
+    } catch {
+      newErrors.metadata = 'Invalid JSON format';
+    }
+
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+
+  const handleSubmit = async () => {
+    if (!validate()) {
+      return;
+    }
+
+    setSubmitting(true);
+
+    try {
+      const data: {
+        name: string;
+        type?: string;
+        owner_id?: string;
+        metadata?: Record<string, unknown>;
+      } = {
+        name: name.trim(),
+      };
+
+      // Only include type and owner_id for create (not edit)
+      if (!isEditMode) {
+        data.type = type;
+        data.owner_id = ownerId.trim();
+      }
+
+      // Parse and include metadata if not empty
+      const parsedMetadata = JSON.parse(metadataJson);
+      if (Object.keys(parsedMetadata).length > 0) {
+        data.metadata = parsedMetadata;
+      }
+
+      await onSubmit(data as any);
+      onClose();
+    } catch (err) {
+      setErrors({
+        submit: err instanceof Error ? err.message : 'Failed to submit form',
+      });
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onClose={onClose} maxWidth="sm" fullWidth>
+      <DialogTitle>
+        {isEditMode ? 'Edit Tenant' : 'Create Tenant'}
+      </DialogTitle>
+      <DialogContent>
+        <TextField
+          label="Name"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          fullWidth
+          margin="normal"
+          error={!!errors.name}
+          helperText={errors.name}
+          autoFocus
+        />
+
+        {!isEditMode && (
+          <>
+            <FormControl fullWidth margin="normal" error={!!errors.type}>
+              <InputLabel>Type</InputLabel>
+              <Select
+                value={type}
+                label="Type"
+                onChange={(e) => setType(e.target.value)}
+              >
+                <MenuItem value="user">User</MenuItem>
+                <MenuItem value="organization">Organization</MenuItem>
+                <MenuItem value="group">Group</MenuItem>
+                <MenuItem value="department">Department</MenuItem>
+              </Select>
+              {errors.type && <FormHelperText>{errors.type}</FormHelperText>}
+            </FormControl>
+
+            <TextField
+              label="Owner ID"
+              value={ownerId}
+              onChange={(e) => setOwnerId(e.target.value)}
+              fullWidth
+              margin="normal"
+              error={!!errors.ownerId}
+              helperText={errors.ownerId || 'UUID of the user who owns this tenant'}
+            />
+          </>
+        )}
+
+        <TextField
+          label="Metadata (JSON)"
+          value={metadataJson}
+          onChange={(e) => setMetadataJson(e.target.value)}
+          fullWidth
+          margin="normal"
+          multiline
+          rows={4}
+          error={!!errors.metadata}
+          helperText={errors.metadata || 'Optional metadata in JSON format'}
+        />
+
+        {errors.submit && (
+          <FormHelperText error sx={{ mt: 2 }}>
+            {errors.submit}
+          </FormHelperText>
+        )}
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose} disabled={submitting}>
+          Cancel
+        </Button>
+        <Button
+          onClick={handleSubmit}
+          variant="contained"
+          disabled={submitting}
+        >
+          {submitting ? 'Saving...' : isEditMode ? 'Update' : 'Create'}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}

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

@@ -0,0 +1,20 @@
+/**
+ * Tenants Plugin UI Components
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+export { TenantCard } from './TenantCard';
+export type { TenantCardProps, Tenant } from './TenantCard';
+
+export { TenantFormDialog } from './TenantFormDialog';
+export type { TenantFormDialogProps } from './TenantFormDialog';
+
+export { MemberListDialog } from './MemberListDialog';
+export type { MemberListDialogProps, TenantMembership } from './MemberListDialog';
+
+export { MemberInviteDialog } from './MemberInviteDialog';
+export type { MemberInviteDialogProps } from './MemberInviteDialog';
+
+export { MemberRoleDialog } from './MemberRoleDialog';
+export type { MemberRoleDialogProps } from './MemberRoleDialog';

package/ui/src/dashboard/PluginWidgetRenderer.tsx

@@ -19,12 +19,15 @@ interface WidgetContribution {
   id: string;
   title: string;
   component: string;
+  type: 'status' | 'maintenance' | 'analytics' | 'monitoring' | 'custom';
   priority?: number;
   showByDefault?: boolean;
   pluginId: string;
 }
 
 interface PluginWidgetRendererProps {
+  /** Filter widgets by type (e.g., 'status' for dashboard, 'maintenance' for maintenance page) */
+  widgetType?: 'status' | 'maintenance' | 'analytics' | 'monitoring' | 'custom';
   /** Only show widgets marked as showByDefault (default: true) */
   defaultOnly?: boolean;
   /** Additional widget IDs to show (beyond showByDefault) */
@@ -35,6 +38,7 @@ interface PluginWidgetRendererProps {
  * Renders widgets from plugins that have registered them via the server API
  */
 export function PluginWidgetRenderer({
+  widgetType,
   defaultOnly = true,
   additionalWidgetIds = [],
 }: PluginWidgetRendererProps) {
@@ -78,6 +82,10 @@ export function PluginWidgetRenderer({
   // Filter widgets to show
   const visibleWidgets = widgets
     .filter(widget => {
+      // Filter by widget type if specified
+      if (widgetType && widget.type !== widgetType) {
+        return false;
+      }
       // Show if marked as default, or if in additionalWidgetIds
       if (defaultOnly) {
         return widget.showByDefault || additionalWidgetIds.includes(widget.id);

package/ui/src/dashboard/builtInWidgets.tsx

@@ -16,7 +16,13 @@ import {
   AuthStatusWidget,
   NotificationsStatsWidget,
   CMSStatusWidget,
-  CMSMaintenanceWidget
+  CMSMaintenanceWidget,
+  SeedManagementWidget,
+  ServiceControlWidget,
+  EnvironmentConfigWidget,
+  DatabaseOpsWidget,
+  LogsMaintenanceWidget,
+  CacheMaintenanceWidget,
 } from './widgets';
 import { PreferencesPage } from '../pages/PreferencesPage';
 import type { WidgetComponent } from './WidgetComponentRegistry';
@@ -32,6 +38,12 @@ export const builtInWidgetComponents: Record<string, React.ComponentType> = {
   NotificationsStatsWidget: NotificationsStatsWidget,
   CMSStatusWidget: CMSStatusWidget,
   CMSMaintenanceWidget: CMSMaintenanceWidget,
+  SeedManagementWidget: SeedManagementWidget,
+  ServiceControlWidget: ServiceControlWidget,
+  EnvironmentConfigWidget: EnvironmentConfigWidget,
+  DatabaseOpsWidget: DatabaseOpsWidget,
+  LogsMaintenanceWidget: LogsMaintenanceWidget,
+  CacheMaintenanceWidget: CacheMaintenanceWidget,
   PreferencesPage: PreferencesPage,
 };
 
@@ -50,6 +62,12 @@ export function getBuiltInWidgetComponents(): WidgetComponent[] {
     { name: 'NotificationsStatsWidget', component: NotificationsStatsWidget },
     { name: 'CMSStatusWidget', component: CMSStatusWidget },
     { name: 'CMSMaintenanceWidget', component: CMSMaintenanceWidget },
+    { name: 'SeedManagementWidget', component: SeedManagementWidget },
+    { name: 'ServiceControlWidget', component: ServiceControlWidget },
+    { name: 'EnvironmentConfigWidget', component: EnvironmentConfigWidget },
+    { name: 'DatabaseOpsWidget', component: DatabaseOpsWidget },
+    { name: 'LogsMaintenanceWidget', component: LogsMaintenanceWidget },
+    { name: 'CacheMaintenanceWidget', component: CacheMaintenanceWidget },
     { name: 'PreferencesPage', component: PreferencesPage },
   ];
 }

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

@@ -0,0 +1,195 @@
+/**
+ * Cache Maintenance Widget
+ *
+ * Provides cache management operations:
+ * - View cache statistics
+ * - Clear cache (flush all keys)
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import { useState, useEffect } from 'react';
+import {
+  Card,
+  CardContent,
+  Typography,
+  Button,
+  Alert,
+  Box,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogContentText,
+  DialogActions,
+  CircularProgress,
+  Chip,
+} from '@mui/material';
+import DeleteIcon from '@mui/icons-material/Delete';
+import RefreshIcon from '@mui/icons-material/Refresh';
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+import ErrorIcon from '@mui/icons-material/Error';
+
+interface CacheStats {
+  connected: boolean;
+  keyCount: number;
+  usedMemory?: string;
+}
+
+export function CacheMaintenanceWidget() {
+  const [stats, setStats] = useState<CacheStats | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [flushing, setFlushing] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState<string | null>(null);
+  const [confirmOpen, setConfirmOpen] = useState(false);
+
+  const fetchStats = async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const response = await fetch('/api/cache:default/stats');
+      if (!response.ok) {
+        if (response.status === 404) {
+          throw new Error('Cache plugin not configured');
+        }
+        throw new Error('Failed to fetch cache stats');
+      }
+      const data = await response.json();
+      setStats(data);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to fetch cache stats');
+      setStats(null);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchStats();
+  }, []);
+
+  const handleFlushCache = async () => {
+    setConfirmOpen(false);
+    setFlushing(true);
+    setError(null);
+    setSuccess(null);
+
+    try {
+      const response = await fetch('/api/cache:default/flush', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+      });
+
+      if (!response.ok) {
+        const data = await response.json();
+        throw new Error(data.error || 'Failed to flush cache');
+      }
+
+      const data = await response.json();
+      setSuccess(
+        data.message + (data.deletedCount !== undefined ? ` (${data.deletedCount} keys deleted)` : '')
+      );
+
+      // Refresh stats
+      await fetchStats();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to flush cache');
+    } finally {
+      setFlushing(false);
+    }
+  };
+
+  return (
+    <Card>
+      <CardContent>
+        <Typography variant="h6" gutterBottom>
+          Cache Management
+        </Typography>
+        <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
+          View cache statistics and clear cache
+        </Typography>
+
+        {error && (
+          <Alert severity="error" sx={{ mb: 2 }} onClose={() => setError(null)}>
+            {error}
+          </Alert>
+        )}
+
+        {success && (
+          <Alert severity="success" sx={{ mb: 2 }} onClose={() => setSuccess(null)}>
+            {success}
+          </Alert>
+        )}
+
+        {loading ? (
+          <Box sx={{ display: 'flex', justifyContent: 'center', p: 3 }}>
+            <CircularProgress size={30} />
+          </Box>
+        ) : stats ? (
+          <Box sx={{ mb: 2 }}>
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1 }}>
+              <Typography variant="body2" color="text.secondary">
+                <strong>Status:</strong>
+              </Typography>
+              <Chip
+                size="small"
+                icon={stats.connected ? <CheckCircleIcon /> : <ErrorIcon />}
+                label={stats.connected ? 'Connected' : 'Disconnected'}
+                color={stats.connected ? 'success' : 'error'}
+              />
+            </Box>
+
+            <Typography variant="body2" color="text.secondary">
+              <strong>Key Count:</strong> {stats.keyCount.toLocaleString()}
+            </Typography>
+
+            {stats.usedMemory && (
+              <Typography variant="body2" color="text.secondary">
+                <strong>Memory Used:</strong> {stats.usedMemory}
+              </Typography>
+            )}
+          </Box>
+        ) : null}
+
+        <Box sx={{ display: 'flex', gap: 1 }}>
+          <Button
+            variant="outlined"
+            color="primary"
+            size="small"
+            startIcon={<RefreshIcon />}
+            onClick={fetchStats}
+            disabled={loading}
+          >
+            Refresh
+          </Button>
+          <Button
+            variant="contained"
+            color="error"
+            size="small"
+            startIcon={flushing ? <CircularProgress size={16} color="inherit" /> : <DeleteIcon />}
+            onClick={() => setConfirmOpen(true)}
+            disabled={!stats || !stats.connected || flushing || loading}
+          >
+            Flush Cache
+          </Button>
+        </Box>
+
+        <Dialog open={confirmOpen} onClose={() => setConfirmOpen(false)}>
+          <DialogTitle>Flush Cache</DialogTitle>
+          <DialogContent>
+            <DialogContentText>
+              Are you sure you want to flush the cache? This will delete{' '}
+              {stats?.keyCount.toLocaleString()} keys. This action cannot be undone.
+            </DialogContentText>
+          </DialogContent>
+          <DialogActions>
+            <Button onClick={() => setConfirmOpen(false)}>Cancel</Button>
+            <Button onClick={handleFlushCache} color="error" variant="contained">
+              Flush
+            </Button>
+          </DialogActions>
+        </Dialog>
+      </CardContent>
+    </Card>
+  );
+}

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

@@ -0,0 +1,29 @@
+/**
+ * Database Operations Widget
+ *
+ * Provides database backup, restore, and maintenance operations.
+ * Part of the maintenance plugin.
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import { Card, CardContent, Typography, Alert } from '@mui/material';
+
+export function DatabaseOpsWidget() {
+  return (
+    <Card>
+      <CardContent>
+        <Typography variant="h6" gutterBottom>
+          Database Operations
+        </Typography>
+        <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
+          Backup, restore, and maintain database
+        </Typography>
+
+        <Alert severity="info">
+          Database operations UI coming soon. This will allow you to backup and restore your database.
+        </Alert>
+      </CardContent>
+    </Card>
+  );
+}

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

@@ -0,0 +1,29 @@
+/**
+ * Environment Configuration Widget
+ *
+ * Displays and allows editing environment variables.
+ * Part of the maintenance plugin.
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import { Card, CardContent, Typography, Alert } from '@mui/material';
+
+export function EnvironmentConfigWidget() {
+  return (
+    <Card>
+      <CardContent>
+        <Typography variant="h6" gutterBottom>
+          Environment Configuration
+        </Typography>
+        <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
+          View and manage environment variables
+        </Typography>
+
+        <Alert severity="info">
+          Environment configuration UI coming soon. This will allow you to view and edit environment variables.
+        </Alert>
+      </CardContent>
+    </Card>
+  );
+}