@qwickapps/server 1.0.0

package/ui/src/pages/LogsPage.tsx

@@ -0,0 +1,267 @@
+import { useState, useEffect } from 'react';
+import {
+  Box,
+  Card,
+  CardContent,
+  Typography,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Chip,
+  CircularProgress,
+  TextField,
+  FormControl,
+  InputLabel,
+  Select,
+  MenuItem,
+  IconButton,
+  Pagination,
+} from '@mui/material';
+import RefreshIcon from '@mui/icons-material/Refresh';
+import SearchIcon from '@mui/icons-material/Search';
+import { api, LogEntry, LogSource } from '../api/controlPanelApi';
+
+function getLevelColor(level: string): string {
+  switch (level.toLowerCase()) {
+    case 'error':
+      return 'var(--theme-error)';
+    case 'warn':
+    case 'warning':
+      return 'var(--theme-warning)';
+    case 'info':
+      return 'var(--theme-info)';
+    case 'debug':
+      return 'var(--theme-text-secondary)';
+    default:
+      return 'var(--theme-text-primary)';
+  }
+}
+
+export function LogsPage() {
+  const [logs, setLogs] = useState<LogEntry[]>([]);
+  const [sources, setSources] = useState<LogSource[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  // Filters
+  const [selectedSource, setSelectedSource] = useState<string>('');
+  const [selectedLevel, setSelectedLevel] = useState<string>('');
+  const [searchQuery, setSearchQuery] = useState<string>('');
+  const [page, setPage] = useState(1);
+  const [total, setTotal] = useState(0);
+  const limit = 50;
+
+  const fetchLogs = async () => {
+    setLoading(true);
+    try {
+      const data = await api.getLogs({
+        source: selectedSource || undefined,
+        level: selectedLevel || undefined,
+        search: searchQuery || undefined,
+        limit,
+        page,
+      });
+      setLogs(data.logs);
+      setTotal(data.total);
+      setError(null);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to fetch logs');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const fetchSources = async () => {
+    try {
+      const data = await api.getLogSources();
+      setSources(data);
+    } catch {
+      // Sources endpoint might not be available
+    }
+  };
+
+  useEffect(() => {
+    fetchSources();
+  }, []);
+
+  useEffect(() => {
+    fetchLogs();
+  }, [selectedSource, selectedLevel, page]);
+
+  const handleSearch = () => {
+    setPage(1);
+    fetchLogs();
+  };
+
+  const totalPages = Math.ceil(total / limit);
+
+  return (
+    <Box>
+      <Typography variant="h4" sx={{ mb: 1, color: 'var(--theme-text-primary)' }}>
+        Logs
+      </Typography>
+      <Typography variant="body2" sx={{ mb: 4, color: 'var(--theme-text-secondary)' }}>
+        View and search application logs
+      </Typography>
+
+      {/* Filters */}
+      <Card sx={{ mb: 3, bgcolor: 'var(--theme-surface)' }}>
+        <CardContent>
+          <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap', alignItems: 'center' }}>
+            {sources.length > 0 && (
+              <FormControl size="small" sx={{ minWidth: 150 }}>
+                <InputLabel sx={{ color: 'var(--theme-text-secondary)' }}>Source</InputLabel>
+                <Select
+                  value={selectedSource}
+                  label="Source"
+                  onChange={(e) => setSelectedSource(e.target.value)}
+                  sx={{ color: 'var(--theme-text-primary)' }}
+                >
+                  <MenuItem value="">All Sources</MenuItem>
+                  {sources.map((source) => (
+                    <MenuItem key={source.name} value={source.name}>
+                      {source.name}
+                    </MenuItem>
+                  ))}
+                </Select>
+              </FormControl>
+            )}
+
+            <FormControl size="small" sx={{ minWidth: 120 }}>
+              <InputLabel sx={{ color: 'var(--theme-text-secondary)' }}>Level</InputLabel>
+              <Select
+                value={selectedLevel}
+                label="Level"
+                onChange={(e) => setSelectedLevel(e.target.value)}
+                sx={{ color: 'var(--theme-text-primary)' }}
+              >
+                <MenuItem value="">All Levels</MenuItem>
+                <MenuItem value="error">Error</MenuItem>
+                <MenuItem value="warn">Warning</MenuItem>
+                <MenuItem value="info">Info</MenuItem>
+                <MenuItem value="debug">Debug</MenuItem>
+              </Select>
+            </FormControl>
+
+            <TextField
+              size="small"
+              placeholder="Search logs..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              onKeyPress={(e) => e.key === 'Enter' && handleSearch()}
+              sx={{
+                flex: 1,
+                minWidth: 200,
+                '& .MuiInputBase-input': { color: 'var(--theme-text-primary)' },
+              }}
+              InputProps={{
+                startAdornment: <SearchIcon sx={{ mr: 1, color: 'var(--theme-text-secondary)' }} />,
+              }}
+            />
+
+            <IconButton onClick={fetchLogs} sx={{ color: 'var(--theme-primary)' }}>
+              <RefreshIcon />
+            </IconButton>
+          </Box>
+        </CardContent>
+      </Card>
+
+      {/* Error State */}
+      {error && (
+        <Card sx={{ mb: 3, bgcolor: 'var(--theme-surface)', border: '1px solid var(--theme-error)' }}>
+          <CardContent>
+            <Typography color="error">{error}</Typography>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Logs Table */}
+      <Card sx={{ bgcolor: 'var(--theme-surface)' }}>
+        {loading ? (
+          <Box sx={{ display: 'flex', justifyContent: 'center', p: 4 }}>
+            <CircularProgress />
+          </Box>
+        ) : logs.length === 0 ? (
+          <CardContent>
+            <Typography sx={{ color: 'var(--theme-text-secondary)', textAlign: 'center' }}>
+              No logs found
+            </Typography>
+          </CardContent>
+        ) : (
+          <>
+            <TableContainer>
+              <Table size="small">
+                <TableHead>
+                  <TableRow>
+                    <TableCell sx={{ color: 'var(--theme-text-secondary)', borderColor: 'var(--theme-border)', width: 180 }}>
+                      Timestamp
+                    </TableCell>
+                    <TableCell sx={{ color: 'var(--theme-text-secondary)', borderColor: 'var(--theme-border)', width: 100 }}>
+                      Level
+                    </TableCell>
+                    {sources.length > 0 && (
+                      <TableCell sx={{ color: 'var(--theme-text-secondary)', borderColor: 'var(--theme-border)', width: 120 }}>
+                        Source
+                      </TableCell>
+                    )}
+                    <TableCell sx={{ color: 'var(--theme-text-secondary)', borderColor: 'var(--theme-border)' }}>
+                      Message
+                    </TableCell>
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  {logs.map((log, index) => (
+                    <TableRow key={index} hover>
+                      <TableCell sx={{ color: 'var(--theme-text-secondary)', borderColor: 'var(--theme-border)', fontFamily: 'monospace', fontSize: '0.75rem' }}>
+                        {new Date(log.timestamp).toLocaleString()}
+                      </TableCell>
+                      <TableCell sx={{ borderColor: 'var(--theme-border)' }}>
+                        <Chip
+                          label={log.level.toUpperCase()}
+                          size="small"
+                          sx={{
+                            bgcolor: getLevelColor(log.level) + '20',
+                            color: getLevelColor(log.level),
+                            fontSize: '0.65rem',
+                            height: 20,
+                          }}
+                        />
+                      </TableCell>
+                      {sources.length > 0 && (
+                        <TableCell sx={{ color: 'var(--theme-text-secondary)', borderColor: 'var(--theme-border)' }}>
+                          {log.source || '-'}
+                        </TableCell>
+                      )}
+                      <TableCell sx={{ color: 'var(--theme-text-primary)', borderColor: 'var(--theme-border)', fontFamily: 'monospace', fontSize: '0.8rem', whiteSpace: 'pre-wrap', wordBreak: 'break-all' }}>
+                        {log.message}
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </TableContainer>
+
+            {/* Pagination */}
+            {totalPages > 1 && (
+              <Box sx={{ display: 'flex', justifyContent: 'center', p: 2 }}>
+                <Pagination
+                  count={totalPages}
+                  page={page}
+                  onChange={(_, value) => setPage(value)}
+                  sx={{
+                    '& .MuiPaginationItem-root': {
+                      color: 'var(--theme-text-primary)',
+                    },
+                  }}
+                />
+              </Box>
+            )}
+          </>
+        )}
+      </Card>
+    </Box>
+  );
+}

package/ui/src/pages/NotFoundPage.tsx

@@ -0,0 +1,41 @@
+import { Box, Typography, Button } from '@mui/material';
+import { useNavigate } from 'react-router-dom';
+import HomeIcon from '@mui/icons-material/Home';
+
+export function NotFoundPage() {
+  const navigate = useNavigate();
+
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        minHeight: '50vh',
+        textAlign: 'center',
+      }}
+    >
+      <Typography variant="h1" sx={{ color: 'var(--theme-primary)', mb: 2 }}>
+        404
+      </Typography>
+      <Typography variant="h5" sx={{ color: 'var(--theme-text-primary)', mb: 1 }}>
+        Page Not Found
+      </Typography>
+      <Typography sx={{ color: 'var(--theme-text-secondary)', mb: 4 }}>
+        The page you're looking for doesn't exist or has been moved.
+      </Typography>
+      <Button
+        variant="contained"
+        startIcon={<HomeIcon />}
+        onClick={() => navigate('/')}
+        sx={{
+          bgcolor: 'var(--theme-primary)',
+          '&:hover': { bgcolor: 'var(--theme-primary)' },
+        }}
+      >
+        Back to Dashboard
+      </Button>
+    </Box>
+  );
+}

package/ui/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}

package/ui/vite.config.ts

@@ -0,0 +1,21 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  root: '.',
+  build: {
+    outDir: '../dist-ui',
+    emptyOutDir: true,
+    sourcemap: true,
+  },
+  server: {
+    port: 3102,
+    proxy: {
+      '/api': {
+        target: 'http://localhost:3101',
+        changeOrigin: true,
+      },
+    },
+  },
+});