@qwickapps/server 1.6.0 → 1.6.1

package/src/plugins/notifications/NotificationsStatusWidget.tsx

@@ -0,0 +1,52 @@
+/**
+ * NotificationsStatusWidget - Dashboard widget for notifications overview
+ */
+
+import React, { useEffect, useState } from 'react';
+import { PluginStatusWidget } from '@qwickapps/server/ui';
+
+export interface NotificationsStatusWidgetProps {
+  /** API endpoint prefix (default: '/api/notifications') */
+  apiPrefix?: string;
+}
+
+export function NotificationsStatusWidget({ apiPrefix = '/api/notifications' }: NotificationsStatusWidgetProps) {
+  const [stats, setStats] = useState<{
+    totalNotifications: number;
+    pendingNotifications: number;
+    sentToday: number;
+    failedToday: number;
+    health: 'healthy' | 'warning' | 'error';
+  } | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    fetch(`${apiPrefix}/stats`)
+      .then((res) => res.json())
+      .then((data) => {
+        setStats(data);
+        setLoading(false);
+      })
+      .catch((err) => {
+        setError(err.message);
+        setLoading(false);
+      });
+  }, [apiPrefix]);
+
+  return (
+    <PluginStatusWidget
+      title="Notifications"
+      stats={[
+        { label: 'Total', value: stats?.totalNotifications ?? 0 },
+        { label: 'Pending', value: stats?.pendingNotifications ?? 0 },
+        { label: 'Sent Today', value: stats?.sentToday ?? 0 },
+        { label: 'Failed Today', value: stats?.failedToday ?? 0 },
+      ]}
+      health={stats?.health ?? 'error'}
+      loading={loading}
+      error={error}
+      detailsPath="/cpanel/plugins/notifications"
+    />
+  );
+}

package/src/plugins/notifications/index.ts

@@ -89,3 +89,9 @@ export type {
   ConnectionHealth,
   NotificationsManagerInterface,
 } from './types.js';
+
+// UI Components
+export { NotificationsStatusWidget } from './NotificationsStatusWidget.js';
+export { NotificationsManagementPage } from './NotificationsManagementPage.js';
+export type { NotificationsStatusWidgetProps } from './NotificationsStatusWidget.js';
+export type { NotificationsManagementPageProps } from './NotificationsManagementPage.js';

package/src/plugins/notifications/notifications-plugin.ts

@@ -113,7 +113,7 @@ function validateId(id: string | undefined, paramName: string): { valid: boolean
  * ```
  */
 export function createNotificationsPlugin(config: NotificationsPluginConfig): Plugin {
-  const apiPrefix = config.api?.prefix || '/notifications';
+  const apiPrefix = config.api?.prefix || '/'; // Framework adds /notifications prefix automatically
   const streamEnabled = config.api?.stream !== false;
   const statsEnabled = config.api?.stats !== false;
 

package/src/plugins/parental/API_ROUTES.md

@@ -0,0 +1,30 @@
+# Parental Plugin API Routes
+
+## Routes
+
+### GET /api/parental/stats
+Returns parental control statistics for the status widget.
+
+**Response:** `{ totalControls, activeControls, protectedAccounts, recentViolations, health }`
+
+### GET /api/parental
+Returns paginated list of parental controls.
+
+**Query:** `limit, offset, status`
+
+**Response:** `{ controls: Array<{ id, childUserId, childEmail, parentUserId, parentEmail, restrictions, status, createdAt, updatedAt }>, total }`
+
+### POST /api/parental
+Create a new parental control.
+
+### PATCH /api/parental/:id
+Update parental control restrictions.
+
+### DELETE /api/parental/:id
+Remove parental control.
+
+### GET /api/parental/violations
+Returns list of policy violations.
+
+---
+Copyright (c) 2025 QwickApps.com. All rights reserved.

package/src/plugins/parental/ParentalManagementPage.test.tsx

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

package/src/plugins/parental/ParentalManagementPage.tsx

@@ -0,0 +1,119 @@
+/**
+ * ParentalManagementPage - Full management interface for parental controls
+ */
+
+import React, { useState, useEffect } from 'react';
+import { PluginManagementPage } from '@qwickapps/server/ui';
+import { DataTable, Column } from '@qwickapps/react-framework';
+
+export interface ParentalManagementPageProps {
+  /** API endpoint prefix (default: '/api/parental') */
+  apiPrefix?: string;
+}
+
+interface ParentalControl {
+  id: string;
+  childUserId: string;
+  childEmail: string;
+  parentUserId: string;
+  parentEmail: string;
+  restrictions: string[];
+  status: 'active' | 'suspended';
+  createdAt: string;
+  updatedAt: string;
+}
+
+export function ParentalManagementPage({ apiPrefix = '/api/parental' }: ParentalManagementPageProps) {
+  const [activeTab, setActiveTab] = useState<'all' | 'active' | 'violations' | 'config'>('all');
+  const [controls, setControls] = useState<ParentalControl[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const status = activeTab === 'all' ? undefined : activeTab;
+    const url = status ? `${apiPrefix}?status=${status}` : `${apiPrefix}`;
+
+    fetch(url)
+      .then((res) => res.json())
+      .then((data) => {
+        setControls(data.controls || []);
+        setLoading(false);
+      })
+      .catch(() => setLoading(false));
+  }, [activeTab, apiPrefix]);
+
+  const columns: Column<ParentalControl>[] = [
+    { key: 'childEmail', label: 'Child Account', sortable: true },
+    { key: 'parentEmail', label: 'Parent Account', sortable: true },
+    {
+      key: 'restrictions',
+      label: 'Restrictions',
+      render: (val) => (
+        <span className="text-xs text-gray-600 dark:text-gray-400">
+          {Array.isArray(val) ? val.length : 0} active
+        </span>
+      ),
+    },
+    {
+      key: 'status',
+      label: 'Status',
+      sortable: true,
+      render: (val) => (
+        <span
+          className={`px-2 py-1 rounded text-xs font-medium ${
+            val === 'active'
+              ? 'bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-100'
+              : 'bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-300'
+          }`}
+        >
+          {String(val)}
+        </span>
+      ),
+    },
+    { key: 'createdAt', label: 'Created', sortable: true },
+    { key: 'updatedAt', label: 'Updated', sortable: true },
+  ];
+
+  const tabs = [
+    { id: 'all', label: 'All Controls' },
+    { id: 'active', label: 'Active' },
+    { id: 'violations', label: 'Violations' },
+    { id: 'config', label: 'Configuration' },
+  ];
+
+  return (
+    <PluginManagementPage
+      title="Parental Controls Management"
+      tabs={tabs}
+      activeTab={activeTab}
+      onTabChange={(tab) => setActiveTab(tab as typeof activeTab)}
+    >
+      {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">
+              Default restrictions and violation policies configuration.
+            </p>
+          </div>
+        </div>
+      ) : activeTab === 'violations' ? (
+        <div className="p-8 text-center text-gray-500 dark:text-gray-400">
+          Violations log and alerts
+        </div>
+      ) : (
+        <DataTable
+          columns={columns}
+          data={controls}
+          loading={loading}
+          emptyMessage="No parental controls found"
+          bulkActions={[
+            {
+              label: 'Suspend Selected',
+              onClick: (rows) => console.log('Suspend:', rows),
+              variant: 'danger',
+            },
+          ]}
+        />
+      )}
+    </PluginManagementPage>
+  );
+}

package/src/plugins/parental/ParentalStatusWidget.test.tsx

@@ -0,0 +1,109 @@
+/**
+ * ParentalStatusWidget 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 { ParentalStatusWidget } from './ParentalStatusWidget';
+
+describe('ParentalStatusWidget', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders loading state initially', () => {
+    (global.fetch as ReturnType<typeof vi.fn>).mockImplementation(
+      () => new Promise(() => {})
+    );
+
+    render(<ParentalStatusWidget apiPrefix="/api/parental" />);
+
+    expect(screen.getByText(/Parental Controls Loading/)).toBeInTheDocument();
+  });
+
+  it('fetches and displays stats successfully', async () => {
+    const mockStats = {
+      totalControls: 150,
+      activeControls: 120,
+      protectedAccounts: 100,
+      recentViolations: 5,
+      health: 'healthy' as const,
+    };
+
+    (global.fetch as ReturnType<typeof vi.fn>).mockResolvedValueOnce({
+      ok: true,
+      json: async () => mockStats,
+    });
+
+    render(<ParentalStatusWidget apiPrefix="/api/parental" />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Parental Controls')).toBeInTheDocument();
+      expect(screen.getByText(/Total Controls: 150/)).toBeInTheDocument();
+      expect(screen.getByText(/Active: 120/)).toBeInTheDocument();
+      expect(screen.getByText(/Protected Accounts: 100/)).toBeInTheDocument();
+      expect(screen.getByText(/Recent Violations: 5/)).toBeInTheDocument();
+    });
+
+    expect(global.fetch).toHaveBeenCalledWith('/api/parental/stats');
+  });
+
+  it('handles fetch error', async () => {
+    (global.fetch as ReturnType<typeof vi.fn>).mockRejectedValueOnce(
+      new Error('Parental service error')
+    );
+
+    render(<ParentalStatusWidget apiPrefix="/api/parental" />);
+
+    await waitFor(() => {
+      expect(screen.getByText(/Parental service error/)).toBeInTheDocument();
+    });
+  });
+
+  it('uses custom apiPrefix', async () => {
+    const mockStats = {
+      totalControls: 80,
+      activeControls: 60,
+      protectedAccounts: 50,
+      recentViolations: 2,
+      health: 'healthy' as const,
+    };
+
+    (global.fetch as ReturnType<typeof vi.fn>).mockResolvedValueOnce({
+      ok: true,
+      json: async () => mockStats,
+    });
+
+    render(<ParentalStatusWidget apiPrefix="/custom/parental" />);
+
+    await waitFor(() => {
+      expect(global.fetch).toHaveBeenCalledWith('/custom/parental/stats');
+    });
+  });
+
+  it('displays all parental control metrics correctly', async () => {
+    const mockStats = {
+      totalControls: 300,
+      activeControls: 250,
+      protectedAccounts: 200,
+      recentViolations: 10,
+      health: 'warning' as const,
+    };
+
+    (global.fetch as ReturnType<typeof vi.fn>).mockResolvedValueOnce({
+      ok: true,
+      json: async () => mockStats,
+    });
+
+    render(<ParentalStatusWidget apiPrefix="/api/parental" />);
+
+    await waitFor(() => {
+      expect(screen.getByText(/Total Controls: 300/)).toBeInTheDocument();
+      expect(screen.getByText(/Active: 250/)).toBeInTheDocument();
+      expect(screen.getByText(/Protected Accounts: 200/)).toBeInTheDocument();
+      expect(screen.getByText(/Recent Violations: 10/)).toBeInTheDocument();
+    });
+  });
+});

package/src/plugins/parental/ParentalStatusWidget.tsx

@@ -0,0 +1,52 @@
+/**
+ * ParentalStatusWidget - Dashboard widget for parental controls overview
+ */
+
+import React, { useEffect, useState } from 'react';
+import { PluginStatusWidget } from '@qwickapps/server/ui';
+
+export interface ParentalStatusWidgetProps {
+  /** API endpoint prefix (default: '/api/parental') */
+  apiPrefix?: string;
+}
+
+export function ParentalStatusWidget({ apiPrefix = '/api/parental' }: ParentalStatusWidgetProps) {
+  const [stats, setStats] = useState<{
+    totalControls: number;
+    activeControls: number;
+    protectedAccounts: number;
+    recentViolations: number;
+    health: 'healthy' | 'warning' | 'error';
+  } | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    fetch(`${apiPrefix}/stats`)
+      .then((res) => res.json())
+      .then((data) => {
+        setStats(data);
+        setLoading(false);
+      })
+      .catch((err) => {
+        setError(err.message);
+        setLoading(false);
+      });
+  }, [apiPrefix]);
+
+  return (
+    <PluginStatusWidget
+      title="Parental Controls"
+      stats={[
+        { label: 'Total Controls', value: stats?.totalControls ?? 0 },
+        { label: 'Active', value: stats?.activeControls ?? 0 },
+        { label: 'Protected Accounts', value: stats?.protectedAccounts ?? 0 },
+        { label: 'Recent Violations', value: stats?.recentViolations ?? 0, suffix: '/7d' },
+      ]}
+      health={stats?.health ?? 'error'}
+      loading={loading}
+      error={error}
+      detailsPath="/cpanel/plugins/parental"
+    />
+  );
+}

package/src/plugins/parental/index.ts

@@ -53,3 +53,9 @@ export { postgresParentalStore } from './stores/index.js';
 // Adapters
 export { kidsAdapter } from './adapters/index.js';
 export type { KidsAdapterConfig } from './adapters/index.js';
+
+// UI Components
+export { ParentalStatusWidget } from './ParentalStatusWidget.js';
+export type { ParentalStatusWidgetProps } from './ParentalStatusWidget.js';
+export { ParentalManagementPage } from './ParentalManagementPage.js';
+export type { ParentalManagementPageProps } from './ParentalManagementPage.js';

package/src/plugins/parental/parental-plugin.ts

@@ -58,7 +58,7 @@ function isWithinSchedule(schedule: Record<string, { start: string; end: string
  */
 export function createParentalPlugin(config: ParentalPluginConfig): Plugin {
   const debug = config.debug || false;
-  const apiPrefix = config.api?.prefix || '/parental';
+  const apiPrefix = config.api?.prefix || '/'; // Framework adds /parental prefix automatically
   const maxPinAttempts = config.maxPinAttempts || 5;
   const pinLockoutMinutes = config.pinLockoutMinutes || 30;