@qwickapps/server 1.6.0 → 1.6.1

package/ui/src/components/auth/shared/AuthLayout.tsx

@@ -0,0 +1,42 @@
+/**
+ * AuthLayout - Common layout wrapper for authentication pages
+ *
+ * Provides centered, card-style layout for auth forms
+ */
+
+import React from 'react';
+
+export interface AuthLayoutProps {
+  title: string;
+  children: React.ReactNode;
+}
+
+export function AuthLayout({ title, children }: AuthLayoutProps) {
+  return (
+    <div
+      style={{
+        minHeight: '100vh',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: '#f5f5f5',
+      }}
+    >
+      <div
+        style={{
+          maxWidth: '400px',
+          width: '100%',
+          padding: '2rem',
+          backgroundColor: '#ffffff',
+          borderRadius: '8px',
+          boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
+        }}
+      >
+        <h1 style={{ marginBottom: '1.5rem', fontSize: '1.5rem', fontWeight: 600 }}>
+          {title}
+        </h1>
+        {children}
+      </div>
+    </div>
+  );
+}

package/ui/src/components/auth/shared/index.ts

@@ -0,0 +1,9 @@
+/**
+ * Shared auth components
+ */
+
+export { AuthLayout } from './AuthLayout';
+export type { AuthLayoutProps } from './AuthLayout';
+
+export { AuthError } from './AuthError';
+export type { AuthErrorProps } from './AuthError';

package/ui/src/components/index.ts

@@ -8,8 +8,9 @@
 
 export { ControlPanelApp, type ControlPanelAppProps } from './ControlPanelApp';
 
-// Re-export MenuItem from react-framework for convenience
-export type { MenuItem } from '@qwickapps/react-framework';
+// Re-export generic components from react-framework for convenience
+export type { MenuItem, Column, StatCardProps, DataTableProps } from '@qwickapps/react-framework';
+export { StatCard, DataTable } from '@qwickapps/react-framework';
 
 // Re-export base pages for consumers who want to use them directly
 export { DashboardPage } from '../pages/DashboardPage';
@@ -39,6 +40,18 @@ export {
   type WidgetComponentRegistryProviderProps,
 } from '../dashboard';
 
+// Re-export server plugin UI components
+export {
+  PluginManagementPage,
+  PluginStatusWidget,
+  PluginConfigPanel,
+  type PluginManagementPageProps,
+  type PluginStatusWidgetProps,
+  type PluginConfigPanelProps,
+  type ConfigField,
+  type ConfigFieldType,
+} from './plugins';
+
 // Re-export API client and types
 export { api } from '../api/controlPanelApi';
 export type {

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

@@ -0,0 +1,315 @@
+/**
+ * PluginConfigPanel - Live configuration editor for plugins
+ *
+ * Provides form-based config editing with validation and real-time updates.
+ *
+ * @example
+ * ```tsx
+ * <PluginConfigPanel
+ *   title="Rate Limit Configuration"
+ *   description="Adjust rate limiting settings"
+ *   config={config}
+ *   schema={[
+ *     { key: 'maxRequests', label: 'Max Requests', type: 'number', min: 1 },
+ *     { key: 'windowMs', label: 'Window (ms)', type: 'number', min: 1000 },
+ *     { key: 'strategy', label: 'Strategy', type: 'select', options: [...] }
+ *   ]}
+ *   onSave={handleSave}
+ *   onReset={handleReset}
+ * />
+ * ```
+ */
+
+import React, { useState, useEffect } from 'react';
+
+export type ConfigFieldType = 'text' | 'number' | 'boolean' | 'select' | 'textarea';
+
+export interface ConfigField {
+  /** Config key */
+  key: string;
+
+  /** Display label */
+  label: string;
+
+  /** Field type */
+  type: ConfigFieldType;
+
+  /** Field description */
+  description?: string;
+
+  /** For number type */
+  min?: number;
+  max?: number;
+  step?: number;
+
+  /** For select type */
+  options?: Array<{ value: string | number; label: string }>;
+
+  /** Validation */
+  required?: boolean;
+  pattern?: RegExp;
+  validate?: (value: unknown) => string | null; // Return error message or null
+}
+
+export interface PluginConfigPanelProps {
+  /** Panel title */
+  title: string;
+
+  /** Optional description */
+  description?: string;
+
+  /** Current configuration */
+  config: Record<string, unknown>;
+
+  /** Schema defining config fields */
+  schema: ConfigField[];
+
+  /** Save handler */
+  onSave: (newConfig: Record<string, unknown>) => Promise<void>;
+
+  /** Reset handler */
+  onReset: () => void;
+
+  /** Loading state */
+  loading?: boolean;
+
+  /** Read-only mode */
+  readOnly?: boolean;
+}
+
+export const PluginConfigPanel: React.FC<PluginConfigPanelProps> = ({
+  title,
+  description,
+  config,
+  schema,
+  onSave,
+  onReset,
+  loading = false,
+  readOnly = false,
+}) => {
+  const [localConfig, setLocalConfig] = useState(config);
+  const [errors, setErrors] = useState<Record<string, string>>({});
+  const [saving, setSaving] = useState(false);
+  const [saved, setSaved] = useState(false);
+
+  useEffect(() => {
+    setLocalConfig(config);
+  }, [config]);
+
+  const validateField = (field: ConfigField, value: unknown): string | null => {
+    if (field.required && (value === undefined || value === null || value === '')) {
+      return `${field.label} is required`;
+    }
+
+    if (field.pattern && typeof value === 'string' && !field.pattern.test(value)) {
+      return `${field.label} format is invalid`;
+    }
+
+    if (field.validate) {
+      return field.validate(value);
+    }
+
+    return null;
+  };
+
+  const handleChange = (key: string, value: unknown) => {
+    setLocalConfig({ ...localConfig, [key]: value });
+    setSaved(false);
+
+    // Clear error for this field
+    if (errors[key]) {
+      setErrors({ ...errors, [key]: '' });
+    }
+  };
+
+  const handleSave = async () => {
+    // Validate all fields
+    const newErrors: Record<string, string> = {};
+    schema.forEach((field) => {
+      const error = validateField(field, localConfig[field.key]);
+      if (error) {
+        newErrors[field.key] = error;
+      }
+    });
+
+    if (Object.keys(newErrors).length > 0) {
+      setErrors(newErrors);
+      return;
+    }
+
+    setSaving(true);
+    try {
+      await onSave(localConfig);
+      setSaved(true);
+      setTimeout(() => setSaved(false), 3000);
+    } catch (error) {
+      console.error('Failed to save config:', error);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const renderField = (field: ConfigField) => {
+    const value = localConfig[field.key];
+    const hasError = Boolean(errors[field.key]);
+
+    const baseClasses = `
+      w-full px-3 py-2 rounded-md border
+      ${hasError
+        ? 'border-red-500 focus:ring-red-500'
+        : 'border-gray-300 dark:border-gray-600 focus:ring-blue-500'}
+      bg-white dark:bg-gray-800
+      text-gray-900 dark:text-white
+      focus:ring-2 focus:border-transparent
+      disabled:opacity-50 disabled:cursor-not-allowed
+    `;
+
+    switch (field.type) {
+      case 'boolean':
+        return (
+          <label className="flex items-center gap-2 cursor-pointer">
+            <input
+              type="checkbox"
+              checked={Boolean(value)}
+              onChange={(e) => handleChange(field.key, e.target.checked)}
+              disabled={readOnly || loading}
+              className="rounded"
+            />
+            <span className="text-sm text-gray-700 dark:text-gray-300">
+              {field.description || 'Enable'}
+            </span>
+          </label>
+        );
+
+      case 'select':
+        return (
+          <select
+            value={String(value ?? '')}
+            onChange={(e) => handleChange(field.key, e.target.value)}
+            disabled={readOnly || loading}
+            className={baseClasses}
+          >
+            {field.options?.map((option) => (
+              <option key={option.value} value={option.value}>
+                {option.label}
+              </option>
+            ))}
+          </select>
+        );
+
+      case 'textarea':
+        return (
+          <textarea
+            value={String(value ?? '')}
+            onChange={(e) => handleChange(field.key, e.target.value)}
+            disabled={readOnly || loading}
+            rows={4}
+            className={baseClasses}
+          />
+        );
+
+      case 'number':
+        return (
+          <input
+            type="number"
+            value={Number(value ?? 0)}
+            onChange={(e) => handleChange(field.key, Number(e.target.value))}
+            min={field.min}
+            max={field.max}
+            step={field.step}
+            disabled={readOnly || loading}
+            className={baseClasses}
+          />
+        );
+
+      case 'text':
+      default:
+        return (
+          <input
+            type="text"
+            value={String(value ?? '')}
+            onChange={(e) => handleChange(field.key, e.target.value)}
+            disabled={readOnly || loading}
+            className={baseClasses}
+          />
+        );
+    }
+  };
+
+  return (
+    <div className="rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-6">
+      {/* Header */}
+      <div className="mb-6">
+        <h2 className="text-2xl font-bold text-gray-900 dark:text-white">
+          {title}
+        </h2>
+        {description && (
+          <p className="mt-1 text-gray-600 dark:text-gray-400">
+            {description}
+          </p>
+        )}
+      </div>
+
+      {/* Fields */}
+      <div className="space-y-6">
+        {schema.map((field) => (
+          <div key={field.key}>
+            {field.type !== 'boolean' && (
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                {field.label}
+                {field.required && <span className="text-red-500 ml-1">*</span>}
+              </label>
+            )}
+            {renderField(field)}
+            {field.description && field.type !== 'boolean' && (
+              <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
+                {field.description}
+              </p>
+            )}
+            {errors[field.key] && (
+              <p className="mt-1 text-sm text-red-600 dark:text-red-400">
+                {errors[field.key]}
+              </p>
+            )}
+          </div>
+        ))}
+      </div>
+
+      {/* Actions */}
+      {!readOnly && (
+        <div className="mt-6 flex items-center gap-3">
+          <button
+            onClick={handleSave}
+            disabled={saving || loading}
+            className="
+              px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white
+              rounded-md text-sm font-medium
+              disabled:opacity-50 disabled:cursor-not-allowed
+              transition-colors
+            "
+          >
+            {saving ? 'Saving...' : 'Save Changes'}
+          </button>
+          <button
+            onClick={onReset}
+            disabled={saving || loading}
+            className="
+              px-4 py-2 bg-gray-200 hover:bg-gray-300 text-gray-900
+              dark:bg-gray-700 dark:hover:bg-gray-600 dark:text-white
+              rounded-md text-sm font-medium
+              disabled:opacity-50 disabled:cursor-not-allowed
+              transition-colors
+            "
+          >
+            Reset
+          </button>
+          {saved && (
+            <span className="text-sm text-green-600 dark:text-green-400">
+              ✓ Saved successfully
+            </span>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};

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

@@ -0,0 +1,218 @@
+/**
+ * PluginManagementPage - Template for full plugin management pages
+ *
+ * Provides consistent layout for plugin management with search, filters, and actions.
+ *
+ * @example
+ * ```tsx
+ * <PluginManagementPage
+ *   title="User Management"
+ *   description="Manage user accounts and permissions"
+ *   icon={<UsersIcon />}
+ *   searchPlaceholder="Search users by email or name..."
+ *   onSearch={handleSearch}
+ *   actions={[
+ *     { label: 'Create User', onClick: handleCreate, variant: 'primary' }
+ *   ]}
+ * >
+ *   <DataTable columns={columns} data={users} />
+ * </PluginManagementPage>
+ * ```
+ */
+
+import React, { ReactNode } from 'react';
+
+export interface PluginManagementPageProps {
+  /** Page title */
+  title: string;
+
+  /** Optional description */
+  description?: string;
+
+  /** Optional icon */
+  icon?: ReactNode;
+
+  /** Search bar placeholder */
+  searchPlaceholder?: string;
+
+  /** Search handler */
+  onSearch?: (query: string) => void;
+
+  /** Page-level action buttons */
+  actions?: Array<{
+    label: string;
+    onClick: () => void;
+    variant?: 'primary' | 'secondary' | 'danger';
+    icon?: ReactNode;
+  }>;
+
+  /** Optional filter controls */
+  filters?: ReactNode;
+
+  /** Optional tabs for multi-section pages */
+  tabs?: Array<{
+    id: string;
+    label: string;
+  }>;
+
+  /** Active tab ID */
+  activeTab?: string;
+
+  /** Tab change handler */
+  onTabChange?: (tabId: string) => void;
+
+  /** Page content (typically DataTable) */
+  children: ReactNode;
+
+  /** Loading state */
+  loading?: boolean;
+
+  /** Breadcrumb items */
+  breadcrumbs?: Array<{
+    label: string;
+    href?: string;
+  }>;
+}
+
+export const PluginManagementPage: React.FC<PluginManagementPageProps> = ({
+  title,
+  description,
+  icon,
+  searchPlaceholder,
+  onSearch,
+  actions = [],
+  filters,
+  tabs,
+  activeTab,
+  onTabChange,
+  children,
+  loading = false,
+  breadcrumbs,
+}) => {
+  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',
+  };
+
+  return (
+    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+      {/* Breadcrumbs */}
+      {breadcrumbs && breadcrumbs.length > 0 && (
+        <nav className="mb-4 flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400">
+          {breadcrumbs.map((crumb, index) => (
+            <React.Fragment key={index}>
+              {index > 0 && <span>/</span>}
+              {crumb.href ? (
+                <a href={crumb.href} className="hover:text-gray-900 dark:hover:text-gray-100">
+                  {crumb.label}
+                </a>
+              ) : (
+                <span className="text-gray-900 dark:text-gray-100 font-medium">
+                  {crumb.label}
+                </span>
+              )}
+            </React.Fragment>
+          ))}
+        </nav>
+      )}
+
+      {/* Header */}
+      <div className="mb-8">
+        <div className="flex items-start justify-between">
+          <div className="flex items-start gap-4">
+            {icon && (
+              <div className="text-4xl text-gray-600 dark:text-gray-400 mt-1">
+                {icon}
+              </div>
+            )}
+            <div>
+              <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
+                {title}
+              </h1>
+              {description && (
+                <p className="mt-2 text-gray-600 dark:text-gray-400">
+                  {description}
+                </p>
+              )}
+            </div>
+          </div>
+          {actions.length > 0 && (
+            <div className="flex gap-2">
+              {actions.map((action, index) => (
+                <button
+                  key={index}
+                  onClick={action.onClick}
+                  className={`
+                    flex items-center gap-2 px-4 py-2 rounded-md text-sm font-medium
+                    transition-colors
+                    ${actionVariants[action.variant || 'secondary']}
+                  `}
+                >
+                  {action.icon}
+                  {action.label}
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Tabs */}
+      {tabs && tabs.length > 0 && (
+        <div className="mb-6 border-b border-gray-200 dark:border-gray-700">
+          <nav className="flex space-x-8">
+            {tabs.map((tab) => (
+              <button
+                key={tab.id}
+                onClick={() => onTabChange?.(tab.id)}
+                className={`
+                  py-4 px-1 border-b-2 font-medium text-sm transition-colors
+                  ${
+                    activeTab === tab.id
+                      ? 'border-blue-500 text-blue-600 dark:text-blue-400'
+                      : 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-600'
+                  }
+                `}
+              >
+                {tab.label}
+              </button>
+            ))}
+          </nav>
+        </div>
+      )}
+
+      {/* Search and Filters */}
+      {(onSearch || filters) && (
+        <div className="mb-6 flex flex-col sm:flex-row gap-4">
+          {onSearch && (
+            <div className="flex-1">
+              <input
+                type="search"
+                placeholder={searchPlaceholder || 'Search...'}
+                onChange={(e) => onSearch(e.target.value)}
+                className="
+                  w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600
+                  bg-white dark:bg-gray-800
+                  text-gray-900 dark:text-white
+                  placeholder-gray-500 dark:placeholder-gray-400
+                  focus:ring-2 focus:ring-blue-500 focus:border-transparent
+                "
+              />
+            </div>
+          )}
+          {filters && (
+            <div className="flex gap-2">
+              {filters}
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Content */}
+      <div className={loading ? 'opacity-50 pointer-events-none' : ''}>
+        {children}
+      </div>
+    </div>
+  );
+};