@qwickapps/server 1.6.0 → 1.6.1

package/src/plugins/diagnostics/DiagnosticsManagementPage.tsx

@@ -0,0 +1,306 @@
+/**
+ * Diagnostics Management Page Component
+ * Full system diagnostics dashboard with logs, environment, and system info
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import React, { useEffect, useState } from 'react';
+import { PluginManagementPage } from '@qwickapps/server/ui';
+import { StatCard } from '@qwickapps/react-framework';
+
+export interface DiagnosticsManagementPageProps {
+  apiPrefix?: string;
+}
+
+interface DiagnosticsReport {
+  timestamp: string;
+  system: {
+    nodeVersion: string;
+    platform: string;
+    arch: string;
+    pid: number;
+    cwd: string;
+    uptime: number;
+    memory: {
+      rss: string;
+      heapTotal: string;
+      heapUsed: string;
+      external: string;
+    };
+  };
+  envCheck: Record<string, boolean>;
+  logs?: {
+    startup?: string[];
+    app?: string[];
+  };
+  health?: unknown;
+}
+
+export const DiagnosticsManagementPage: React.FC<DiagnosticsManagementPageProps> = ({
+  apiPrefix = '/api/plugins/diagnostics',
+}) => {
+  const [report, setReport] = useState<DiagnosticsReport | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [activeTab, setActiveTab] = useState<'system' | 'environment' | 'logs'>('system');
+
+  const fetchDiagnostics = async () => {
+    try {
+      const response = await fetch(`${apiPrefix}/full`);
+      if (response.ok) {
+        const data = await response.json();
+        setReport(data);
+      }
+    } catch (err) {
+      console.error('Failed to fetch diagnostics:', err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchDiagnostics();
+  }, [apiPrefix]);
+
+  const formatUptime = (seconds: number) => {
+    const days = Math.floor(seconds / 86400);
+    const hours = Math.floor((seconds % 86400) / 3600);
+    const minutes = Math.floor((seconds % 3600) / 60);
+    const secs = Math.floor(seconds % 60);
+
+    return `${days}d ${hours}h ${minutes}m ${secs}s`;
+  };
+
+  if (!report) {
+    return (
+      <PluginManagementPage
+        title="System Diagnostics"
+        description="View detailed system information and logs"
+        breadcrumbs={[
+          { label: 'Control Panel', href: '/cpanel' },
+          { label: 'Plugins', href: '/cpanel/plugins' },
+          { label: 'Diagnostics' },
+        ]}
+        loading={loading}
+      >
+        <div className="text-center text-gray-500 dark:text-gray-400 py-12">
+          No diagnostics data available
+        </div>
+      </PluginManagementPage>
+    );
+  }
+
+  return (
+    <PluginManagementPage
+      title="System Diagnostics"
+      description="View detailed system information, environment configuration, and logs"
+      breadcrumbs={[
+        { label: 'Control Panel', href: '/cpanel' },
+        { label: 'Plugins', href: '/cpanel/plugins' },
+        { label: 'Diagnostics' },
+      ]}
+      loading={loading}
+      actions={[
+        {
+          label: 'Refresh',
+          onClick: fetchDiagnostics,
+          variant: 'secondary',
+        },
+        {
+          label: 'Download Report',
+          onClick: () => {
+            const blob = new Blob([JSON.stringify(report, null, 2)], {
+              type: 'application/json',
+            });
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = `diagnostics-${new Date().toISOString()}.json`;
+            a.click();
+          },
+          variant: 'secondary',
+        },
+      ]}
+    >
+      {/* Tab Navigation */}
+      <div className="border-b border-gray-200 dark:border-gray-700 mb-6">
+        <nav className="-mb-px flex space-x-8">
+          {(['system', 'environment', 'logs'] as const).map((tab) => (
+            <button
+              key={tab}
+              onClick={() => setActiveTab(tab)}
+              className={`py-2 px-1 border-b-2 font-medium text-sm ${
+                activeTab === tab
+                  ? '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.charAt(0).toUpperCase() + tab.slice(1)}
+            </button>
+          ))}
+        </nav>
+      </div>
+
+      {/* System Tab */}
+      {activeTab === 'system' && (
+        <div className="space-y-6">
+          {/* System Stats */}
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+            <StatCard
+              label="Node Version"
+              value={report.system.nodeVersion}
+              status="info"
+            />
+            <StatCard
+              label="Platform"
+              value={`${report.system.platform} ${report.system.arch}`}
+              status="info"
+            />
+            <StatCard
+              label="Uptime"
+              value={formatUptime(report.system.uptime)}
+              status="healthy"
+            />
+            <StatCard
+              label="Process ID"
+              value={report.system.pid}
+              status="info"
+            />
+          </div>
+
+          {/* Memory Usage */}
+          <div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow">
+            <h3 className="text-lg font-semibold mb-4 text-gray-900 dark:text-gray-100">
+              Memory Usage
+            </h3>
+            <dl className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div>
+                <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">
+                  Resident Set Size
+                </dt>
+                <dd className="mt-1 text-2xl font-semibold text-gray-900 dark:text-gray-100">
+                  {report.system.memory.rss}
+                </dd>
+              </div>
+              <div>
+                <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">
+                  Heap Total
+                </dt>
+                <dd className="mt-1 text-2xl font-semibold text-gray-900 dark:text-gray-100">
+                  {report.system.memory.heapTotal}
+                </dd>
+              </div>
+              <div>
+                <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">
+                  Heap Used
+                </dt>
+                <dd className="mt-1 text-2xl font-semibold text-gray-900 dark:text-gray-100">
+                  {report.system.memory.heapUsed}
+                </dd>
+              </div>
+              <div>
+                <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">
+                  External
+                </dt>
+                <dd className="mt-1 text-2xl font-semibold text-gray-900 dark:text-gray-100">
+                  {report.system.memory.external}
+                </dd>
+              </div>
+            </dl>
+          </div>
+
+          {/* System Info */}
+          <div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow">
+            <h3 className="text-lg font-semibold mb-4 text-gray-900 dark:text-gray-100">
+              System Information
+            </h3>
+            <dl className="space-y-2">
+              <div className="flex justify-between">
+                <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">
+                  Working Directory
+                </dt>
+                <dd className="text-sm text-gray-900 dark:text-gray-100">
+                  <code className="bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded">
+                    {report.system.cwd}
+                  </code>
+                </dd>
+              </div>
+              <div className="flex justify-between">
+                <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">
+                  Report Generated
+                </dt>
+                <dd className="text-sm text-gray-900 dark:text-gray-100">
+                  {new Date(report.timestamp).toLocaleString()}
+                </dd>
+              </div>
+            </dl>
+          </div>
+        </div>
+      )}
+
+      {/* Environment Tab */}
+      {activeTab === 'environment' && (
+        <div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow">
+          <h3 className="text-lg font-semibold mb-4 text-gray-900 dark:text-gray-100">
+            Environment Variables
+          </h3>
+          <div className="space-y-2">
+            {Object.entries(report.envCheck).map(([key, value]) => (
+              <div key={key} className="flex items-center justify-between py-2 border-b border-gray-200 dark:border-gray-700">
+                <code className="text-sm font-medium text-gray-900 dark:text-gray-100">{key}</code>
+                <span
+                  className={`inline-block px-2 py-1 rounded text-xs font-medium ${
+                    value
+                      ? 'bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200'
+                      : 'bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200'
+                  }`}
+                >
+                  {value ? 'Configured' : 'Missing'}
+                </span>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Logs Tab */}
+      {activeTab === 'logs' && report.logs && (
+        <div className="space-y-6">
+          {report.logs.startup && (
+            <div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow">
+              <h3 className="text-lg font-semibold mb-4 text-gray-900 dark:text-gray-100">
+                Startup Logs
+              </h3>
+              <pre className="p-4 bg-gray-100 dark:bg-gray-900 rounded overflow-x-auto max-h-96 overflow-y-auto">
+                <code className="text-xs text-gray-900 dark:text-gray-100">
+                  {report.logs.startup.join('\n')}
+                </code>
+              </pre>
+            </div>
+          )}
+
+          {report.logs.app && (
+            <div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow">
+              <h3 className="text-lg font-semibold mb-4 text-gray-900 dark:text-gray-100">
+                Application Logs
+              </h3>
+              <pre className="p-4 bg-gray-100 dark:bg-gray-900 rounded overflow-x-auto max-h-96 overflow-y-auto">
+                <code className="text-xs text-gray-900 dark:text-gray-100">
+                  {report.logs.app.join('\n')}
+                </code>
+              </pre>
+            </div>
+          )}
+
+          {!report.logs.startup && !report.logs.app && (
+            <div className="text-center text-gray-500 dark:text-gray-400 py-12">
+              No logs available
+            </div>
+          )}
+        </div>
+      )}
+    </PluginManagementPage>
+  );
+};
+
+export default DiagnosticsManagementPage;

package/src/plugins/diagnostics/DiagnosticsStatusWidget.test.tsx

@@ -0,0 +1,112 @@
+/**
+ * DiagnosticsStatusWidget Tests
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+import { DiagnosticsStatusWidget } from './DiagnosticsStatusWidget';
+
+describe('DiagnosticsStatusWidget', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders loading state initially', () => {
+    (global.fetch as ReturnType<typeof vi.fn>).mockImplementation(
+      () => new Promise(() => {})
+    );
+
+    render(<DiagnosticsStatusWidget apiPrefix="/api/diagnostics" />);
+
+    expect(screen.getByText(/System Diagnostics Loading/)).toBeInTheDocument();
+  });
+
+  it('fetches and displays stats successfully', async () => {
+    const mockStats = {
+      uptime: 86400, // 1 day
+      memoryUsed: '512MB',
+      memoryTotal: '2GB',
+      cpuUsage: 45,
+      envVarsConfigured: 15,
+      envVarsTotal: 20,
+      health: 'healthy' as const,
+    };
+
+    (global.fetch as ReturnType<typeof vi.fn>).mockResolvedValueOnce({
+      ok: true,
+      json: async () => mockStats,
+    });
+
+    render(<DiagnosticsStatusWidget apiPrefix="/api/diagnostics" />);
+
+    await waitFor(() => {
+      expect(screen.getByText('System Diagnostics')).toBeInTheDocument();
+      expect(screen.getByText(/Uptime: 1d 0h/)).toBeInTheDocument();
+      expect(screen.getByText(/CPU Usage: 45/)).toBeInTheDocument();
+    });
+
+    expect(global.fetch).toHaveBeenCalledWith('/api/diagnostics/stats');
+  });
+
+  it('formats uptime correctly', async () => {
+    const mockStats = {
+      uptime: 7200, // 2 hours
+      memoryUsed: '256MB',
+      memoryTotal: '1GB',
+      cpuUsage: 30,
+      envVarsConfigured: 10,
+      envVarsTotal: 10,
+      health: 'healthy' as const,
+    };
+
+    (global.fetch as ReturnType<typeof vi.fn>).mockResolvedValueOnce({
+      ok: true,
+      json: async () => mockStats,
+    });
+
+    render(<DiagnosticsStatusWidget apiPrefix="/api/diagnostics" />);
+
+    await waitFor(() => {
+      expect(screen.getByText(/Uptime: 2h 0m/)).toBeInTheDocument();
+    });
+  });
+
+  it('displays all diagnostic metrics', async () => {
+    const mockStats = {
+      uptime: 3600,
+      memoryUsed: '768MB',
+      memoryTotal: '4GB',
+      cpuUsage: 65,
+      envVarsConfigured: 18,
+      envVarsTotal: 20,
+      health: 'warning' as const,
+    };
+
+    (global.fetch as ReturnType<typeof vi.fn>).mockResolvedValueOnce({
+      ok: true,
+      json: async () => mockStats,
+    });
+
+    render(<DiagnosticsStatusWidget apiPrefix="/api/diagnostics" />);
+
+    await waitFor(() => {
+      expect(screen.getByText(/Memory Used: 768MB/)).toBeInTheDocument();
+      expect(screen.getByText(/CPU Usage: 65/)).toBeInTheDocument();
+      expect(screen.getByText(/Environment: 18/)).toBeInTheDocument();
+    });
+  });
+
+  it('displays error state when fetch fails', async () => {
+    (global.fetch as ReturnType<typeof vi.fn>).mockRejectedValueOnce(
+      new Error('Failed to fetch stats')
+    );
+
+    render(<DiagnosticsStatusWidget apiPrefix="/api/diagnostics" />);
+
+    await waitFor(() => {
+      expect(screen.getByText('System Diagnostics')).toBeInTheDocument();
+    }, { timeout: 2000 });
+  });
+});

package/src/plugins/diagnostics/DiagnosticsStatusWidget.tsx

@@ -0,0 +1,129 @@
+/**
+ * Diagnostics Status Widget Component
+ * Displays system diagnostics overview including memory, uptime, and environment status
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import React, { useEffect, useState } from 'react';
+import {
+  PluginStatusWidget,
+  type PluginStatusWidgetProps,
+} from '@qwickapps/server/ui';
+
+export interface DiagnosticsStatusWidgetProps {
+  apiPrefix?: string;
+}
+
+interface DiagnosticsStats {
+  uptime: number;
+  memoryUsed: string;
+  memoryTotal: string;
+  cpuUsage: number;
+  envVarsConfigured: number;
+  envVarsTotal: number;
+  health: 'healthy' | 'warning' | 'error';
+}
+
+export const DiagnosticsStatusWidget: React.FC<DiagnosticsStatusWidgetProps> = ({
+  apiPrefix = '/api/plugins/diagnostics',
+}) => {
+  const [stats, setStats] = useState<DiagnosticsStats | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fetchStats = async () => {
+      try {
+        const response = await fetch(`${apiPrefix}/stats`);
+        if (!response.ok) throw new Error('Failed to fetch stats');
+        const data = await response.json();
+        setStats(data);
+        setError(null);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'Unknown error');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchStats();
+    const interval = setInterval(fetchStats, 10000); // Refresh every 10s
+    return () => clearInterval(interval);
+  }, [apiPrefix]);
+
+  if (loading) {
+    return (
+      <PluginStatusWidget
+        title="System Diagnostics"
+        status="healthy"
+        loading={true}
+      />
+    );
+  }
+
+  if (error || !stats) {
+    return (
+      <PluginStatusWidget
+        title="System Diagnostics"
+        status="error"
+        message={error || 'Failed to load diagnostics'}
+      />
+    );
+  }
+
+  const formatUptime = (seconds: number) => {
+    const days = Math.floor(seconds / 86400);
+    const hours = Math.floor((seconds % 86400) / 3600);
+    const minutes = Math.floor((seconds % 3600) / 60);
+
+    if (days > 0) return `${days}d ${hours}h`;
+    if (hours > 0) return `${hours}h ${minutes}m`;
+    return `${minutes}m`;
+  };
+
+  const widgetStats: PluginStatusWidgetProps['stats'] = [
+    {
+      label: 'Uptime',
+      value: formatUptime(stats.uptime),
+      status: 'info',
+    },
+    {
+      label: 'Memory Used',
+      value: stats.memoryUsed,
+      unit: `/ ${stats.memoryTotal}`,
+      status: 'info',
+    },
+    {
+      label: 'CPU Usage',
+      value: stats.cpuUsage,
+      unit: '%',
+      status: stats.cpuUsage > 80 ? 'warning' : stats.cpuUsage > 95 ? 'error' : 'healthy',
+    },
+    {
+      label: 'Environment',
+      value: stats.envVarsConfigured,
+      unit: `/ ${stats.envVarsTotal}`,
+      status: stats.envVarsConfigured < stats.envVarsTotal ? 'warning' : 'healthy',
+    },
+  ];
+
+  return (
+    <PluginStatusWidget
+      title="System Diagnostics"
+      status={stats.health}
+      stats={widgetStats}
+      actions={[
+        {
+          label: 'View Details',
+          onClick: () => {
+            window.location.href = '/cpanel/plugins/diagnostics';
+          },
+          variant: 'secondary',
+        },
+      ]}
+    />
+  );
+};
+
+export default DiagnosticsStatusWidget;

package/src/plugins/diagnostics/index.ts

@@ -0,0 +1,10 @@
+/**
+ * Diagnostics Plugin UI Components
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+export { DiagnosticsStatusWidget } from './DiagnosticsStatusWidget.js';
+export type { DiagnosticsStatusWidgetProps } from './DiagnosticsStatusWidget.js';
+export { DiagnosticsManagementPage } from './DiagnosticsManagementPage.js';
+export type { DiagnosticsManagementPageProps } from './DiagnosticsManagementPage.js';

package/src/plugins/diagnostics-plugin.ts

@@ -35,7 +35,7 @@ export function createDiagnosticsPlugin(config: DiagnosticsPluginConfig = {}): P
   const {
     include = { logs: { startup: 100, app: 200 }, health: true, config: true, system: true },
     logPaths = { startup: './logs/startup.log', app: './logs/app.log' },
-    endpoint = '/diagnostics/full',
+    endpoint = '/full', // Framework adds /diagnostics prefix automatically
   } = config;
 
   return {
@@ -120,10 +120,10 @@ export function createDiagnosticsPlugin(config: DiagnosticsPluginConfig = {}): P
         },
       });
 
-      // Register summary diagnostics endpoint
+      // Register summary diagnostics endpoint (framework adds /diagnostics prefix)
       registry.addRoute({
         method: 'get',
-        path: '/diagnostics/summary',
+        path: '/summary',
         pluginId: 'diagnostics',
         handler: (_req: Request, res: Response) => {
           try {

package/src/plugins/entitlements/API_ROUTES.md

@@ -0,0 +1,27 @@
+# Entitlements Plugin API Routes
+
+## Routes
+
+### GET /api/entitlements/stats
+Returns entitlement statistics for the status widget.
+
+**Response:** `{ totalEntitlements, activeEntitlements, expiredEntitlements, recentGrants, health }`
+
+### GET /api/entitlements
+Returns paginated list of entitlements with optional filtering.
+
+**Query:** `limit, offset, status`
+
+**Response:** `{ entitlements: Array<{ id, userId, userEmail, featureName, status, grantedAt, expiresAt, grantedBy }>, total }`
+
+### POST /api/entitlements
+Grant a new entitlement.
+
+### PATCH /api/entitlements/:id
+Update entitlement (extend, revoke).
+
+### DELETE /api/entitlements/:id
+Delete an entitlement.
+
+---
+Copyright (c) 2025 QwickApps.com. All rights reserved.

package/src/plugins/entitlements/EntitlementsManagementPage.test.tsx

@@ -0,0 +1,58 @@
+/**
+ * EntitlementsManagementPage Tests
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+import { EntitlementsManagementPage } from './EntitlementsManagementPage';
+
+describe('EntitlementsManagementPage', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders page title', () => {
+    (global.fetch as ReturnType<typeof vi.fn>).mockImplementation(
+      () => Promise.resolve({
+        ok: true,
+        json: async () => ([]),
+      })
+    );
+
+    render(<EntitlementsManagementPage apiPrefix="/api/entitlements" />);
+
+    expect(screen.getByText('Entitlements Management')).toBeInTheDocument();
+  });
+
+  it('fetches entitlements on mount', async () => {
+    (global.fetch as ReturnType<typeof vi.fn>).mockImplementation(
+      () => Promise.resolve({
+        ok: true,
+        json: async () => ([]),
+      })
+    );
+
+    render(<EntitlementsManagementPage apiPrefix="/api/entitlements" />);
+
+    await waitFor(() => {
+      expect(global.fetch).toHaveBeenCalled();
+    });
+  });
+
+  it('renders with custom apiPrefix', async () => {
+    (global.fetch as ReturnType<typeof vi.fn>).mockImplementation(
+      () => Promise.resolve({
+        ok: true,
+        json: async () => ([]),
+      })
+    );
+
+    render(<EntitlementsManagementPage apiPrefix="/custom/entitlements" />);
+
+    await waitFor(() => {
+      expect(global.fetch).toHaveBeenCalled();
+    });
+  });
+});