@qwickapps/server 1.0.0

package/ui/src/api/controlPanelApi.ts

@@ -0,0 +1,148 @@
+/**
+ * Control Panel API Client
+ *
+ * Communicates with the backend Express API
+ */
+
+export interface HealthCheck {
+  status: 'healthy' | 'degraded' | 'unhealthy';
+  latency?: number;
+  lastChecked: string;
+  error?: string;
+}
+
+export interface HealthResponse {
+  status: 'healthy' | 'degraded' | 'unhealthy';
+  timestamp: string;
+  uptime: number;
+  checks: Record<string, HealthCheck>;
+}
+
+export interface InfoResponse {
+  product: string;
+  version: string;
+  uptime: number;
+  links: Array<{ label: string; url: string; external?: boolean }>;
+  branding?: {
+    primaryColor?: string;
+    logo?: string;
+  };
+}
+
+export interface DiagnosticsResponse {
+  timestamp: string;
+  product: string;
+  version?: string;
+  uptime: number;
+  health: Record<string, HealthCheck>;
+  system: {
+    nodeVersion: string;
+    platform: string;
+    arch: string;
+    memory: {
+      total: number;
+      used: number;
+      free: number;
+    };
+    cpu: {
+      usage: number;
+    };
+  };
+}
+
+export interface ConfigResponse {
+  config: Record<string, string | number | boolean>;
+  masked: string[];
+}
+
+export interface LogEntry {
+  timestamp: string;
+  level: string;
+  message: string;
+  source?: string;
+}
+
+export interface LogsResponse {
+  logs: LogEntry[];
+  total: number;
+  page: number;
+  limit: number;
+}
+
+export interface LogSource {
+  name: string;
+  type: 'file' | 'api';
+  available: boolean;
+}
+
+class ControlPanelApi {
+  private baseUrl: string;
+
+  constructor(baseUrl = '') {
+    this.baseUrl = baseUrl;
+  }
+
+  async getHealth(): Promise<HealthResponse> {
+    const response = await fetch(`${this.baseUrl}/api/health`);
+    if (!response.ok) {
+      throw new Error(`Health check failed: ${response.statusText}`);
+    }
+    return response.json();
+  }
+
+  async getInfo(): Promise<InfoResponse> {
+    const response = await fetch(`${this.baseUrl}/api/info`);
+    if (!response.ok) {
+      throw new Error(`Info request failed: ${response.statusText}`);
+    }
+    return response.json();
+  }
+
+  async getDiagnostics(): Promise<DiagnosticsResponse> {
+    const response = await fetch(`${this.baseUrl}/api/diagnostics`);
+    if (!response.ok) {
+      throw new Error(`Diagnostics request failed: ${response.statusText}`);
+    }
+    return response.json();
+  }
+
+  async getConfig(): Promise<ConfigResponse> {
+    const response = await fetch(`${this.baseUrl}/api/config`);
+    if (!response.ok) {
+      throw new Error(`Config request failed: ${response.statusText}`);
+    }
+    return response.json();
+  }
+
+  async getLogs(options: {
+    source?: string;
+    level?: string;
+    search?: string;
+    limit?: number;
+    page?: number;
+  } = {}): Promise<LogsResponse> {
+    const params = new URLSearchParams();
+    if (options.source) params.set('source', options.source);
+    if (options.level) params.set('level', options.level);
+    if (options.search) params.set('search', options.search);
+    if (options.limit) params.set('limit', options.limit.toString());
+    if (options.page) params.set('page', options.page.toString());
+
+    const response = await fetch(`${this.baseUrl}/api/logs?${params}`);
+    if (!response.ok) {
+      throw new Error(`Logs request failed: ${response.statusText}`);
+    }
+    return response.json();
+  }
+
+  async getLogSources(): Promise<LogSource[]> {
+    const response = await fetch(`${this.baseUrl}/api/logs/sources`);
+    if (!response.ok) {
+      throw new Error(`Log sources request failed: ${response.statusText}`);
+    }
+    const data = await response.json();
+    return data.sources;
+  }
+}
+
+export const api = new ControlPanelApi();

package/ui/src/config/AppConfig.ts

@@ -0,0 +1,18 @@
+import { AppConfigBuilder } from '@qwickapps/react-framework';
+
+/**
+ * Default control panel configuration
+ * Consumers can override this by passing their own config
+ */
+export const defaultConfig = AppConfigBuilder.create()
+  .withName('Control Panel')
+  .withId('com.qwickapps.control-panel')
+  .withVersion('1.0.0')
+  .withDefaultTheme('dark')
+  .withDefaultPalette('cosmic')
+  .withThemeSwitcher(true)
+  .withPaletteSwitcher(true)
+  .withDisplay('standalone')
+  .build();
+
+export type ControlPanelUIConfig = ReturnType<typeof AppConfigBuilder.prototype.build>;

package/ui/src/index.css

@@ -0,0 +1,29 @@
+/* Custom scrollbar styling */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--theme-background, #0f172a);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--theme-border, #334155);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--theme-text-secondary, #64748b);
+}
+
+/* Smooth scrolling */
+html {
+  scroll-behavior: smooth;
+}
+
+/* Better focus styles */
+:focus-visible {
+  outline: 2px solid var(--theme-primary, #6366f1);
+  outline-offset: 2px;
+}

package/ui/src/index.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import '@qwickapps/react-framework/index.css';
+import './index.css';
+import { App } from './App';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

package/ui/src/pages/ConfigPage.tsx

@@ -0,0 +1,199 @@
+import { useState, useEffect } from 'react';
+import {
+  Box,
+  Card,
+  CardContent,
+  Typography,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Chip,
+  CircularProgress,
+  IconButton,
+  Tooltip,
+  Snackbar,
+  Alert,
+} from '@mui/material';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import VisibilityIcon from '@mui/icons-material/Visibility';
+import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
+import LockIcon from '@mui/icons-material/Lock';
+import { api, ConfigResponse } from '../api/controlPanelApi';
+
+export function ConfigPage() {
+  const [config, setConfig] = useState<ConfigResponse | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [showMasked, setShowMasked] = useState<Record<string, boolean>>({});
+  const [snackbar, setSnackbar] = useState<{ open: boolean; message: string }>({
+    open: false,
+    message: '',
+  });
+
+  useEffect(() => {
+    const fetchConfig = async () => {
+      try {
+        const data = await api.getConfig();
+        setConfig(data);
+        setError(null);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'Failed to fetch config');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchConfig();
+  }, []);
+
+  const handleCopy = (value: string) => {
+    navigator.clipboard.writeText(value);
+    setSnackbar({ open: true, message: 'Copied to clipboard' });
+  };
+
+  const toggleMasked = (key: string) => {
+    setShowMasked((prev) => ({ ...prev, [key]: !prev[key] }));
+  };
+
+  const isMasked = (key: string): boolean => {
+    if (!config?.masked || !Array.isArray(config.masked)) return false;
+    return config.masked.some((mask) =>
+      key.toUpperCase().includes(mask.toUpperCase())
+    );
+  };
+
+  const formatValue = (key: string, value: unknown): string => {
+    const strValue = String(value);
+    if (isMasked(key) && !showMasked[key]) {
+      return '••••••••';
+    }
+    return strValue;
+  };
+
+  if (loading) {
+    return (
+      <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: '50vh' }}>
+        <CircularProgress />
+      </Box>
+    );
+  }
+
+  if (error) {
+    return (
+      <Card sx={{ bgcolor: 'var(--theme-surface)', border: '1px solid var(--theme-error)' }}>
+        <CardContent>
+          <Typography color="error">{error}</Typography>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  const configEntries = config ? Object.entries(config.config) : [];
+
+  return (
+    <Box>
+      <Typography variant="h4" sx={{ mb: 1, color: 'var(--theme-text-primary)' }}>
+        Configuration
+      </Typography>
+      <Typography variant="body2" sx={{ mb: 4, color: 'var(--theme-text-secondary)' }}>
+        Current environment configuration (read-only)
+      </Typography>
+
+      {/* Config Table */}
+      <Card sx={{ bgcolor: 'var(--theme-surface)' }}>
+        <TableContainer>
+          <Table>
+            <TableHead>
+              <TableRow>
+                <TableCell sx={{ color: 'var(--theme-text-secondary)', borderColor: 'var(--theme-border)' }}>
+                  Variable
+                </TableCell>
+                <TableCell sx={{ color: 'var(--theme-text-secondary)', borderColor: 'var(--theme-border)' }}>
+                  Value
+                </TableCell>
+                <TableCell sx={{ color: 'var(--theme-text-secondary)', borderColor: 'var(--theme-border)', width: 100 }}>
+                  Actions
+                </TableCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {configEntries.map(([key, value]) => (
+                <TableRow key={key}>
+                  <TableCell sx={{ borderColor: 'var(--theme-border)' }}>
+                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                      <Typography sx={{ color: 'var(--theme-text-primary)', fontFamily: 'monospace' }}>
+                        {key}
+                      </Typography>
+                      {isMasked(key) && (
+                        <Chip
+                          icon={<LockIcon sx={{ fontSize: 14 }} />}
+                          label="Sensitive"
+                          size="small"
+                          sx={{
+                            bgcolor: 'var(--theme-warning)20',
+                            color: 'var(--theme-warning)',
+                            height: 20,
+                            '& .MuiChip-icon': { color: 'var(--theme-warning)' },
+                          }}
+                        />
+                      )}
+                    </Box>
+                  </TableCell>
+                  <TableCell sx={{ color: 'var(--theme-text-primary)', borderColor: 'var(--theme-border)', fontFamily: 'monospace' }}>
+                    {formatValue(key, value)}
+                  </TableCell>
+                  <TableCell sx={{ borderColor: 'var(--theme-border)' }}>
+                    <Box sx={{ display: 'flex', gap: 0.5 }}>
+                      {isMasked(key) && (
+                        <Tooltip title={showMasked[key] ? 'Hide value' : 'Show value'}>
+                          <IconButton
+                            size="small"
+                            onClick={() => toggleMasked(key)}
+                            sx={{ color: 'var(--theme-text-secondary)' }}
+                          >
+                            {showMasked[key] ? <VisibilityOffIcon fontSize="small" /> : <VisibilityIcon fontSize="small" />}
+                          </IconButton>
+                        </Tooltip>
+                      )}
+                      <Tooltip title="Copy value">
+                        <IconButton
+                          size="small"
+                          onClick={() => handleCopy(String(value))}
+                          sx={{ color: 'var(--theme-text-secondary)' }}
+                        >
+                          <ContentCopyIcon fontSize="small" />
+                        </IconButton>
+                      </Tooltip>
+                    </Box>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </TableContainer>
+
+        {configEntries.length === 0 && (
+          <CardContent>
+            <Typography sx={{ color: 'var(--theme-text-secondary)', textAlign: 'center' }}>
+              No configuration variables available
+            </Typography>
+          </CardContent>
+        )}
+      </Card>
+
+      <Snackbar
+        open={snackbar.open}
+        autoHideDuration={2000}
+        onClose={() => setSnackbar({ ...snackbar, open: false })}
+        anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
+      >
+        <Alert severity="success" variant="filled">
+          {snackbar.message}
+        </Alert>
+      </Snackbar>
+    </Box>
+  );
+}

package/ui/src/pages/DashboardPage.tsx

@@ -0,0 +1,264 @@
+import { useState, useEffect } from 'react';
+import {
+  Box,
+  Card,
+  CardContent,
+  Typography,
+  Grid,
+  CircularProgress,
+  Chip,
+} from '@mui/material';
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+import ErrorIcon from '@mui/icons-material/Error';
+import WarningIcon from '@mui/icons-material/Warning';
+import AccessTimeIcon from '@mui/icons-material/AccessTime';
+import MemoryIcon from '@mui/icons-material/Memory';
+import StorageIcon from '@mui/icons-material/Storage';
+import { api, HealthResponse, InfoResponse } from '../api/controlPanelApi';
+
+function formatUptime(ms: number): string {
+  const seconds = Math.floor(ms / 1000);
+  const minutes = Math.floor(seconds / 60);
+  const hours = Math.floor(minutes / 60);
+  const days = Math.floor(hours / 24);
+
+  if (days > 0) {
+    return `${days}d ${hours % 24}h ${minutes % 60}m`;
+  }
+  if (hours > 0) {
+    return `${hours}h ${minutes % 60}m`;
+  }
+  if (minutes > 0) {
+    return `${minutes}m ${seconds % 60}s`;
+  }
+  return `${seconds}s`;
+}
+
+function getStatusIcon(status: string) {
+  switch (status) {
+    case 'healthy':
+      return <CheckCircleIcon sx={{ color: 'var(--theme-success)' }} />;
+    case 'degraded':
+      return <WarningIcon sx={{ color: 'var(--theme-warning)' }} />;
+    case 'unhealthy':
+      return <ErrorIcon sx={{ color: 'var(--theme-error)' }} />;
+    default:
+      return <CircularProgress size={20} />;
+  }
+}
+
+function getStatusColor(status: string): string {
+  switch (status) {
+    case 'healthy':
+      return 'var(--theme-success)';
+    case 'degraded':
+      return 'var(--theme-warning)';
+    case 'unhealthy':
+      return 'var(--theme-error)';
+    default:
+      return 'var(--theme-text-secondary)';
+  }
+}
+
+export function DashboardPage() {
+  const [health, setHealth] = useState<HealthResponse | null>(null);
+  const [info, setInfo] = useState<InfoResponse | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const [healthData, infoData] = await Promise.all([
+          api.getHealth(),
+          api.getInfo(),
+        ]);
+        setHealth(healthData);
+        setInfo(infoData);
+        setError(null);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'Failed to fetch data');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchData();
+    const interval = setInterval(fetchData, 10000);
+    return () => clearInterval(interval);
+  }, []);
+
+  if (loading) {
+    return (
+      <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: '50vh' }}>
+        <CircularProgress />
+      </Box>
+    );
+  }
+
+  if (error) {
+    return (
+      <Card sx={{ bgcolor: 'var(--theme-surface)', border: '1px solid var(--theme-error)' }}>
+        <CardContent>
+          <Typography color="error">{error}</Typography>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  const healthChecks = health ? Object.entries(health.checks) : [];
+  const healthyCount = healthChecks.filter(([, c]) => c.status === 'healthy').length;
+  const totalCount = healthChecks.length;
+
+  return (
+    <Box>
+      <Typography variant="h4" sx={{ mb: 1, color: 'var(--theme-text-primary)' }}>
+        Dashboard
+      </Typography>
+      <Typography variant="body2" sx={{ mb: 4, color: 'var(--theme-text-secondary)' }}>
+        Real-time overview of {info?.product || 'your service'}
+      </Typography>
+
+      {/* Status Banner */}
+      <Card
+        sx={{
+          mb: 4,
+          bgcolor: 'var(--theme-surface)',
+          border: `2px solid ${getStatusColor(health?.status || 'unknown')}`,
+        }}
+      >
+        <CardContent sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
+            {getStatusIcon(health?.status || 'unknown')}
+            <Box>
+              <Typography variant="h6" sx={{ color: 'var(--theme-text-primary)' }}>
+                Service Status: {health?.status?.charAt(0).toUpperCase()}{health?.status?.slice(1)}
+              </Typography>
+              <Typography variant="body2" sx={{ color: 'var(--theme-text-secondary)' }}>
+                Last updated: {health?.timestamp ? new Date(health.timestamp).toLocaleString() : 'N/A'}
+              </Typography>
+            </Box>
+          </Box>
+          <Chip
+            label={`${healthyCount}/${totalCount} checks passing`}
+            sx={{
+              bgcolor: getStatusColor(health?.status || 'unknown') + '20',
+              color: getStatusColor(health?.status || 'unknown'),
+            }}
+          />
+        </CardContent>
+      </Card>
+
+      {/* Stats Grid */}
+      <Grid container spacing={3} sx={{ mb: 4 }}>
+        <Grid size={{ xs: 12, sm: 6, md: 3 }}>
+          <Card sx={{ bgcolor: 'var(--theme-surface)', height: '100%' }}>
+            <CardContent>
+              <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 2 }}>
+                <AccessTimeIcon sx={{ color: 'var(--theme-primary)' }} />
+                <Typography variant="body2" sx={{ color: 'var(--theme-text-secondary)' }}>
+                  Uptime
+                </Typography>
+              </Box>
+              <Typography variant="h4" sx={{ color: 'var(--theme-primary)' }}>
+                {health ? formatUptime(health.uptime) : 'N/A'}
+              </Typography>
+            </CardContent>
+          </Card>
+        </Grid>
+
+        <Grid size={{ xs: 12, sm: 6, md: 3 }}>
+          <Card sx={{ bgcolor: 'var(--theme-surface)', height: '100%' }}>
+            <CardContent>
+              <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 2 }}>
+                <CheckCircleIcon sx={{ color: 'var(--theme-success)' }} />
+                <Typography variant="body2" sx={{ color: 'var(--theme-text-secondary)' }}>
+                  Health Checks
+                </Typography>
+              </Box>
+              <Typography variant="h4" sx={{ color: 'var(--theme-success)' }}>
+                {healthyCount}/{totalCount}
+              </Typography>
+            </CardContent>
+          </Card>
+        </Grid>
+
+        <Grid size={{ xs: 12, sm: 6, md: 3 }}>
+          <Card sx={{ bgcolor: 'var(--theme-surface)', height: '100%' }}>
+            <CardContent>
+              <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 2 }}>
+                <MemoryIcon sx={{ color: 'var(--theme-warning)' }} />
+                <Typography variant="body2" sx={{ color: 'var(--theme-text-secondary)' }}>
+                  Version
+                </Typography>
+              </Box>
+              <Typography variant="h4" sx={{ color: 'var(--theme-text-primary)' }}>
+                {info?.version || 'N/A'}
+              </Typography>
+            </CardContent>
+          </Card>
+        </Grid>
+
+        <Grid size={{ xs: 12, sm: 6, md: 3 }}>
+          <Card sx={{ bgcolor: 'var(--theme-surface)', height: '100%' }}>
+            <CardContent>
+              <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 2 }}>
+                <StorageIcon sx={{ color: 'var(--theme-info)' }} />
+                <Typography variant="body2" sx={{ color: 'var(--theme-text-secondary)' }}>
+                  Product
+                </Typography>
+              </Box>
+              <Typography variant="h5" sx={{ color: 'var(--theme-text-primary)' }}>
+                {info?.product || 'N/A'}
+              </Typography>
+            </CardContent>
+          </Card>
+        </Grid>
+      </Grid>
+
+      {/* Health Checks Detail */}
+      <Card sx={{ bgcolor: 'var(--theme-surface)' }}>
+        <CardContent>
+          <Typography variant="h6" sx={{ mb: 3, color: 'var(--theme-text-primary)' }}>
+            Health Checks
+          </Typography>
+          <Grid container spacing={2}>
+            {healthChecks.map(([name, check]) => (
+              <Grid size={{ xs: 12, sm: 6, md: 4 }} key={name}>
+                <Box
+                  sx={{
+                    p: 2,
+                    borderRadius: 1,
+                    bgcolor: 'var(--theme-background)',
+                    border: `1px solid ${getStatusColor(check.status)}40`,
+                  }}
+                >
+                  <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 1 }}>
+                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                      {getStatusIcon(check.status)}
+                      <Typography sx={{ color: 'var(--theme-text-primary)', fontWeight: 500 }}>
+                        {name}
+                      </Typography>
+                    </Box>
+                    {check.latency !== undefined && (
+                      <Chip
+                        label={`${check.latency}ms`}
+                        size="small"
+                        sx={{ bgcolor: 'var(--theme-surface)', color: 'var(--theme-text-secondary)' }}
+                      />
+                    )}
+                  </Box>
+                  {check.error && (
+                    <Typography variant="caption" sx={{ color: 'var(--theme-error)' }}>
+                      {check.error}
+                    </Typography>
+                  )}
+                </Box>
+              </Grid>
+            ))}
+          </Grid>
+        </CardContent>
+      </Card>
+    </Box>
+  );
+}