@qwickapps/server 1.5.2 → 1.6.1

package/src/plugins/postgres/PostgresStatusWidget.test.tsx

@@ -0,0 +1,117 @@
+/**
+ * PostgresStatusWidget 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 { PostgresStatusWidget } from './PostgresStatusWidget';
+
+describe('PostgresStatusWidget', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders loading state initially', () => {
+    (global.fetch as ReturnType<typeof vi.fn>).mockImplementation(
+      () => new Promise(() => {})
+    );
+
+    render(<PostgresStatusWidget apiPrefix="/api/postgres" />);
+
+    expect(screen.getByText(/PostgreSQL Database Loading/)).toBeInTheDocument();
+  });
+
+  it('fetches and displays stats successfully', async () => {
+    const mockStats = {
+      total: 10,
+      idle: 3,
+      waiting: 2,
+      active: 5,
+      utilization: 50,
+      queryCount: 100,
+      avgQueryTime: 25,
+      health: 'healthy' as const,
+    };
+
+    (global.fetch as ReturnType<typeof vi.fn>).mockResolvedValueOnce({
+      ok: true,
+      json: async () => mockStats,
+    });
+
+    render(<PostgresStatusWidget apiPrefix="/api/postgres" />);
+
+    await waitFor(() => {
+      expect(screen.getByText('PostgreSQL Database')).toBeInTheDocument();
+      expect(screen.getByText(/Active Connections: 5/)).toBeInTheDocument();
+    });
+
+    expect(global.fetch).toHaveBeenCalledWith('/api/postgres/stats');
+  });
+
+  it('displays error state when fetch fails', async () => {
+    (global.fetch as ReturnType<typeof vi.fn>).mockRejectedValueOnce(
+      new Error('Failed to fetch stats')
+    );
+
+    render(<PostgresStatusWidget apiPrefix="/api/postgres" />);
+
+    await waitFor(() => {
+      expect(screen.getByText('PostgreSQL Database')).toBeInTheDocument();
+    }, { timeout: 2000 });
+  });
+
+  it('uses custom apiPrefix', async () => {
+    const mockStats = {
+      total: 10,
+      idle: 3,
+      waiting: 2,
+      active: 5,
+      utilization: 50,
+      queryCount: 100,
+      avgQueryTime: 25,
+      health: 'healthy' as const,
+    };
+
+    (global.fetch as ReturnType<typeof vi.fn>).mockResolvedValueOnce({
+      ok: true,
+      json: async () => mockStats,
+    });
+
+    render(<PostgresStatusWidget apiPrefix="/custom/api" />);
+
+    await waitFor(() => {
+      expect(global.fetch).toHaveBeenCalledWith('/custom/api/stats');
+    });
+  });
+
+  it('displays all stats metrics', async () => {
+    const mockStats = {
+      total: 10,
+      idle: 3,
+      waiting: 1,
+      active: 6,
+      utilization: 60,
+      queryCount: 150,
+      avgQueryTime: 45,
+      health: 'healthy' as const,
+    };
+
+    (global.fetch as ReturnType<typeof vi.fn>).mockResolvedValueOnce({
+      ok: true,
+      json: async () => mockStats,
+    });
+
+    render(<PostgresStatusWidget apiPrefix="/api/postgres" />);
+
+    await waitFor(() => {
+      expect(screen.getByText(/Active Connections: 6/)).toBeInTheDocument();
+      expect(screen.getByText(/Idle Connections: 3/)).toBeInTheDocument();
+      expect(screen.getByText(/Waiting Requests: 1/)).toBeInTheDocument();
+      expect(screen.getByText(/Pool Utilization: 60/)).toBeInTheDocument();
+      expect(screen.getByText(/Queries\/min: 150/)).toBeInTheDocument();
+      expect(screen.getByText(/Avg Query Time: 45/)).toBeInTheDocument();
+    });
+  });
+});

package/src/plugins/postgres/PostgresStatusWidget.tsx

@@ -0,0 +1,131 @@
+/**
+ * PostgreSQL Status Widget Component
+ * Displays connection pool status, query performance, and health metrics
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import React, { useEffect, useState } from 'react';
+import {
+  PluginStatusWidget,
+  StatCard,
+  type PluginStatusWidgetProps,
+} from '@qwickapps/server/ui';
+
+export interface PostgresStatusWidgetProps {
+  apiPrefix?: string;
+}
+
+interface PostgresStats {
+  total: number;
+  idle: number;
+  waiting: number;
+  active: number;
+  utilization: number;
+  queryCount: number;
+  avgQueryTime: number;
+  health: 'healthy' | 'warning' | 'error';
+}
+
+export const PostgresStatusWidget: React.FC<PostgresStatusWidgetProps> = ({
+  apiPrefix = '/api/plugins/postgres',
+}) => {
+  const [stats, setStats] = useState<PostgresStats | 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, 5000); // Refresh every 5s
+    return () => clearInterval(interval);
+  }, [apiPrefix]);
+
+  if (loading) {
+    return (
+      <PluginStatusWidget
+        title="PostgreSQL Database"
+        status="healthy"
+        loading={true}
+      />
+    );
+  }
+
+  if (error || !stats) {
+    return (
+      <PluginStatusWidget
+        title="PostgreSQL Database"
+        status="error"
+        message={error || 'Failed to load stats'}
+      />
+    );
+  }
+
+  const widgetStats: PluginStatusWidgetProps['stats'] = [
+    {
+      label: 'Active Connections',
+      value: stats.active,
+      unit: `/ ${stats.total}`,
+      status: stats.utilization > 80 ? 'warning' : stats.utilization > 95 ? 'error' : 'healthy',
+    },
+    {
+      label: 'Idle Connections',
+      value: stats.idle,
+      status: 'info',
+    },
+    {
+      label: 'Waiting Requests',
+      value: stats.waiting,
+      status: stats.waiting > 5 ? 'warning' : stats.waiting > 10 ? 'error' : 'healthy',
+    },
+    {
+      label: 'Pool Utilization',
+      value: stats.utilization,
+      unit: '%',
+      status: stats.utilization > 80 ? 'warning' : stats.utilization > 95 ? 'error' : 'healthy',
+    },
+    {
+      label: 'Queries/min',
+      value: stats.queryCount,
+      status: 'info',
+    },
+    {
+      label: 'Avg Query Time',
+      value: stats.avgQueryTime,
+      unit: 'ms',
+      status: stats.avgQueryTime > 100 ? 'warning' : stats.avgQueryTime > 500 ? 'error' : 'healthy',
+    },
+  ];
+
+  return (
+    <PluginStatusWidget
+      title="PostgreSQL Database"
+      status={stats.health}
+      stats={widgetStats}
+      actions={[
+        {
+          label: 'View Details',
+          onClick: () => {
+            window.location.href = '/cpanel/plugins/postgres';
+          },
+          variant: 'secondary',
+        },
+      ]}
+    />
+  );
+};
+
+export default PostgresStatusWidget;

package/src/plugins/postgres/index.ts

@@ -0,0 +1,10 @@
+/**
+ * PostgreSQL Plugin UI Components
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+export { PostgresStatusWidget } from './PostgresStatusWidget.js';
+export type { PostgresStatusWidgetProps } from './PostgresStatusWidget.js';
+export { PostgresManagementPage } from './PostgresManagementPage.js';
+export type { PostgresManagementPageProps } from './PostgresManagementPage.js';

package/src/plugins/preferences/API_ROUTES.md

@@ -0,0 +1,162 @@
+# Preferences Plugin API Routes
+
+This document describes the API routes needed to support the PreferencesStatusWidget and PreferencesManagementPage UI components.
+
+## Routes to Implement
+
+### 1. GET /api/preferences/stats
+
+Returns preference statistics for the status widget.
+
+**Response:**
+```typescript
+{
+  totalPreferences: number;
+  activeUsers: number;
+  preferenceSets: number;
+  recentUpdates: number;  // Last 7 days
+  health: 'healthy' | 'warning' | 'error';
+}
+```
+
+### 2. GET /api/preferences
+
+Returns user preferences.
+
+**Query Parameters:**
+- `userId` - Filter by user ID (admins only)
+- `scope` - Filter by scope ('user', 'global', 'app')
+- `key` - Filter by preference key pattern
+
+**Response:**
+```typescript
+{
+  preferences: Array<{
+    key: string;
+    value: unknown;
+    type: 'string' | 'number' | 'boolean' | 'json';
+    scope: 'user' | 'global' | 'app';
+    updatedAt: string;
+    userId?: string;
+  }>;
+}
+```
+
+### 3. GET /api/preferences/sets
+
+Returns list of preference sets (admin).
+
+**Response:**
+```typescript
+{
+  sets: Array<{
+    id: string;
+    userId?: string;
+    userEmail?: string;
+    scope: 'user' | 'global' | 'app';
+    preferenceCount: number;
+    updatedAt: string;
+    createdAt: string;
+  }>;
+}
+```
+
+### 4. GET /api/preferences/:key
+
+Returns a specific preference value.
+
+**Response:**
+```typescript
+{
+  key: string;
+  value: unknown;
+  type: 'string' | 'number' | 'boolean' | 'json';
+  scope: 'user' | 'global' | 'app';
+  updatedAt: string;
+}
+```
+
+### 5. PUT /api/preferences/:key
+
+Sets or updates a preference value.
+
+**Request Body:**
+```typescript
+{
+  value: unknown;
+  scope?: 'user' | 'global' | 'app';
+}
+```
+
+**Response:**
+```typescript
+{
+  key: string;
+  value: unknown;
+  updatedAt: string;
+}
+```
+
+### 6. DELETE /api/preferences/:key
+
+Deletes a preference.
+
+**Response:**
+```typescript
+{
+  success: boolean;
+  message: string;
+}
+```
+
+### 7. POST /api/preferences/bulk
+
+Bulk update multiple preferences.
+
+**Request Body:**
+```typescript
+{
+  preferences: Array<{
+    key: string;
+    value: unknown;
+    scope?: 'user' | 'global' | 'app';
+  }>;
+}
+```
+
+**Response:**
+```typescript
+{
+  success: boolean;
+  updatedCount: number;
+}
+```
+
+### 8. DELETE /api/preferences/user/:userId
+
+Delete all preferences for a user (admin only).
+
+**Response:**
+```typescript
+{
+  success: boolean;
+  deletedCount: number;
+}
+```
+
+## Security Considerations
+
+1. **Authentication**: All endpoints require authentication
+2. **Authorization**:
+   - Users can only access their own preferences
+   - Admins can access all preferences
+   - Global preferences require admin to modify
+3. **Validation**: Validate preference values against schema
+4. **Type Safety**: Enforce type constraints on preference values
+5. **Privacy**: Handle preference data according to privacy regulations
+6. **Audit Logging**: Log preference changes for compliance
+7. **Rate Limiting**: Prevent abuse of bulk operations
+
+---
+
+Copyright (c) 2025 QwickApps.com. All rights reserved.

package/src/plugins/preferences/PreferencesManagementPage.test.tsx

@@ -0,0 +1,58 @@
+/**
+ * PreferencesManagementPage 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 { PreferencesManagementPage } from './PreferencesManagementPage';
+
+describe('PreferencesManagementPage', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders page title', () => {
+    (global.fetch as ReturnType<typeof vi.fn>).mockImplementation(
+      () => Promise.resolve({
+        ok: true,
+        json: async () => ({}),
+      })
+    );
+
+    render(<PreferencesManagementPage apiPrefix="/api/preferences" />);
+
+    expect(screen.getByText('User Preferences Management')).toBeInTheDocument();
+  });
+
+  it('fetches preferences on mount', async () => {
+    (global.fetch as ReturnType<typeof vi.fn>).mockImplementation(
+      () => Promise.resolve({
+        ok: true,
+        json: async () => ({}),
+      })
+    );
+
+    render(<PreferencesManagementPage apiPrefix="/api/preferences" />);
+
+    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(<PreferencesManagementPage apiPrefix="/custom/preferences" />);
+
+    await waitFor(() => {
+      expect(global.fetch).toHaveBeenCalled();
+    });
+  });
+});

package/src/plugins/preferences/PreferencesManagementPage.tsx

@@ -0,0 +1,139 @@
+/**
+ * PreferencesManagementPage - Full management interface for user preferences
+ */
+
+import React, { useState, useEffect } from 'react';
+import { PluginManagementPage } from '@qwickapps/server/ui';
+import { DataTable, Column } from '@qwickapps/react-framework';
+
+export interface PreferencesManagementPageProps {
+  /** API endpoint prefix (default: '/api/preferences') */
+  apiPrefix?: string;
+}
+
+interface PreferenceSet {
+  id: string;
+  userId?: string;
+  userEmail?: string;
+  scope: 'user' | 'global' | 'app';
+  preferenceCount: number;
+  updatedAt: string;
+  createdAt: string;
+}
+
+interface Preference {
+  key: string;
+  value: unknown;
+  type: 'string' | 'number' | 'boolean' | 'json';
+  scope: 'user' | 'global' | 'app';
+  updatedAt: string;
+}
+
+export function PreferencesManagementPage({ apiPrefix = '/api/preferences' }: PreferencesManagementPageProps) {
+  const [activeTab, setActiveTab] = useState<'overview' | 'user' | 'global' | 'config'>('overview');
+  const [preferenceSets, setPreferenceSets] = useState<PreferenceSet[]>([]);
+  const [preferences, setPreferences] = useState<Preference[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    if (activeTab === 'overview') {
+      fetch(`${apiPrefix}/sets`)
+        .then((res) => res.json())
+        .then((data) => {
+          setPreferenceSets(data.sets || []);
+          setLoading(false);
+        })
+        .catch(() => setLoading(false));
+    } else if (activeTab === 'user' || activeTab === 'global') {
+      fetch(`${apiPrefix}?scope=${activeTab}`)
+        .then((res) => res.json())
+        .then((data) => {
+          setPreferences(data.preferences || []);
+          setLoading(false);
+        })
+        .catch(() => setLoading(false));
+    }
+  }, [activeTab, apiPrefix]);
+
+  const setColumns: Column<PreferenceSet>[] = [
+    { key: 'userEmail', label: 'User', sortable: true },
+    {
+      key: 'scope',
+      label: 'Scope',
+      sortable: true,
+      render: (val) => (
+        <span className="px-2 py-1 rounded text-xs font-medium bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-100">
+          {String(val).toUpperCase()}
+        </span>
+      ),
+    },
+    { key: 'preferenceCount', label: 'Count', sortable: true },
+    { key: 'updatedAt', label: 'Updated', sortable: true },
+  ];
+
+  const prefColumns: Column<Preference>[] = [
+    { key: 'key', label: 'Key', sortable: true },
+    {
+      key: 'value',
+      label: 'Value',
+      render: (val) => (
+        <code className="text-xs bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded">
+          {typeof val === 'object' ? JSON.stringify(val) : String(val)}
+        </code>
+      ),
+    },
+    {
+      key: 'type',
+      label: 'Type',
+      sortable: true,
+      render: (val) => (
+        <span className="text-xs text-gray-600 dark:text-gray-400">{String(val)}</span>
+      ),
+    },
+    { key: 'updatedAt', label: 'Updated', sortable: true },
+  ];
+
+  const tabs = [
+    { id: 'overview', label: 'Overview' },
+    { id: 'user', label: 'User Preferences' },
+    { id: 'global', label: 'Global Preferences' },
+    { id: 'config', label: 'Configuration' },
+  ];
+
+  return (
+    <PluginManagementPage
+      title="Preferences Management"
+      tabs={tabs}
+      activeTab={activeTab}
+      onTabChange={(tab) => setActiveTab(tab as typeof activeTab)}
+    >
+      {activeTab === 'overview' && (
+        <DataTable
+          columns={setColumns}
+          data={preferenceSets}
+          loading={loading}
+          emptyMessage="No preference sets found"
+        />
+      )}
+
+      {(activeTab === 'user' || activeTab === 'global') && (
+        <DataTable
+          columns={prefColumns}
+          data={preferences}
+          loading={loading}
+          emptyMessage={`No ${activeTab} preferences found`}
+        />
+      )}
+
+      {activeTab === 'config' && (
+        <div className="space-y-4">
+          <div className="p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
+            <p className="text-sm text-blue-900 dark:text-blue-100">
+              Preference schema and validation rules configuration.
+            </p>
+          </div>
+        </div>
+      )}
+    </PluginManagementPage>
+  );
+}