quick commit

dashboard/frontend/src/App.tsx

@@ -0,0 +1,25 @@
+/**
+ * Main application with routing
+ */
+
+import { Routes, Route } from "react-router-dom";
+import { Layout } from "./components/Layout";
+import { Dashboard } from "./pages/Dashboard";
+import { Analytics } from "./pages/Analytics";
+import { Users } from "./pages/Users";
+import { Moderation } from "./pages/Moderation";
+import { Settings } from "./pages/Settings";
+
+export default function App() {
+  return (
+    <Routes>
+      <Route path="/" element={<Layout />}>
+        <Route index element={<Dashboard />} />
+        <Route path="analytics" element={<Analytics />} />
+        <Route path="users" element={<Users />} />
+        <Route path="moderation" element={<Moderation />} />
+        <Route path="settings" element={<Settings />} />
+      </Route>
+    </Routes>
+  );
+}

dashboard/frontend/src/components/Layout.tsx

@@ -0,0 +1,112 @@
+/**
+ * Main dashboard layout with navigation
+ */
+
+import { Link, Outlet, useLocation } from 'react-router-dom';
+import { useQuery } from '@tanstack/react-query';
+import { authApi } from '../services/api';
+
+const navigation = [
+  { name: 'Dashboard', href: '/' },
+  { name: 'Analytics', href: '/analytics' },
+  { name: 'Users', href: '/users' },
+  { name: 'Moderation', href: '/moderation' },
+  { name: 'Settings', href: '/settings' },
+];
+
+export function Layout() {
+  const location = useLocation();
+  const { data: me } = useQuery({
+    queryKey: ['me'],
+    queryFn: authApi.getMe,
+  });
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      {/* Header */}
+      <header className="bg-white border-b border-gray-200">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="flex justify-between items-center h-16">
+            <div className="flex items-center">
+              <h1 className="text-xl font-bold text-gray-900">GuardDen</h1>
+              <nav className="ml-10 flex space-x-4">
+                {navigation.map((item) => {
+                  const isActive = location.pathname === item.href;
+                  return (
+                    <Link
+                      key={item.name}
+                      to={item.href}
+                      className={`px-3 py-2 rounded-md text-sm font-medium transition-colors ${
+                        isActive
+                          ? 'bg-gray-100 text-gray-900'
+                          : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900'
+                      }`}
+                    >
+                      {item.name}
+                    </Link>
+                  );
+                })}
+              </nav>
+            </div>
+
+            <div className="flex items-center space-x-4">
+              {me?.owner ? (
+                <div className="flex items-center space-x-2">
+                  <span className="text-sm text-gray-600">
+                    {me.entra ? '✓ Entra' : ''} {me.discord ? '✓ Discord' : ''}
+                  </span>
+                  <a
+                    href="/auth/logout"
+                    className="text-sm text-gray-600 hover:text-gray-900"
+                  >
+                    Logout
+                  </a>
+                </div>
+              ) : (
+                <div className="flex space-x-2">
+                  <a href="/auth/entra/login" className="btn-secondary text-sm">
+                    Login with Entra
+                  </a>
+                  <a href="/auth/discord/login" className="btn-primary text-sm">
+                    Connect Discord
+                  </a>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </header>
+
+      {/* Main content */}
+      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        {!me?.owner ? (
+          <div className="card text-center py-12">
+            <h2 className="text-2xl font-bold text-gray-900 mb-4">
+              Authentication Required
+            </h2>
+            <p className="text-gray-600 mb-6">
+              Please authenticate with both Entra ID and Discord to access the dashboard.
+            </p>
+            <div className="flex justify-center space-x-4">
+              <a href="/auth/entra/login" className="btn-secondary">
+                Login with Entra
+              </a>
+              <a href="/auth/discord/login" className="btn-primary">
+                Connect Discord
+              </a>
+            </div>
+          </div>
+        ) : (
+          <Outlet />
+        )}
+      </main>
+
+      {/* Footer */}
+      <footer className="mt-12 border-t border-gray-200 py-6">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center text-sm text-gray-500">
+          © {new Date().getFullYear()} GuardDen. Discord Moderation Bot.
+        </div>
+      </footer>
+    </div>
+  );
+}

dashboard/frontend/src/index.css

@@ -0,0 +1,51 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  body {
+    @apply bg-gray-50 text-gray-900;
+  }
+}
+
+@layer components {
+  .card {
+    @apply bg-white rounded-lg shadow-sm border border-gray-200 p-6;
+  }
+
+  .btn {
+    @apply px-4 py-2 rounded-md font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2;
+  }
+
+  .btn-primary {
+    @apply btn bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500;
+  }
+
+  .btn-secondary {
+    @apply btn bg-gray-200 text-gray-900 hover:bg-gray-300 focus:ring-gray-500;
+  }
+
+  .btn-danger {
+    @apply btn bg-red-600 text-white hover:bg-red-700 focus:ring-red-500;
+  }
+
+  .input {
+    @apply w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500;
+  }
+
+  .label {
+    @apply block text-sm font-medium text-gray-700 mb-1;
+  }
+
+  .stat-card {
+    @apply card;
+  }
+
+  .stat-label {
+    @apply text-sm font-medium text-gray-600;
+  }
+
+  .stat-value {
+    @apply text-2xl font-bold text-gray-900 mt-1;
+  }
+}

dashboard/frontend/src/main.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { createRoot } from "react-dom/client";
+import { BrowserRouter } from "react-router-dom";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import App from "./App";
+import "./index.css";
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false,
+      retry: 1,
+      staleTime: 30000,
+    },
+  },
+});
+
+const container = document.getElementById("root");
+if (!container) {
+  throw new Error("Root container missing");
+}
+
+createRoot(container).render(
+  <React.StrictMode>
+    <QueryClientProvider client={queryClient}>
+      <BrowserRouter>
+        <App />
+      </BrowserRouter>
+    </QueryClientProvider>
+  </React.StrictMode>,
+);

dashboard/frontend/src/pages/Analytics.tsx

@@ -0,0 +1,119 @@
+/**
+ * Analytics page with detailed charts and metrics
+ */
+
+import { useQuery } from '@tanstack/react-query';
+import { analyticsApi, guildsApi } from '../services/api';
+import { useState } from 'react';
+import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend } from 'recharts';
+
+export function Analytics() {
+  const [selectedGuildId, setSelectedGuildId] = useState<number | undefined>();
+  const [days, setDays] = useState(30);
+
+  const { data: guilds } = useQuery({
+    queryKey: ['guilds'],
+    queryFn: guildsApi.list,
+  });
+
+  const { data: moderationStats, isLoading } = useQuery({
+    queryKey: ['analytics', 'moderation-stats', selectedGuildId, days],
+    queryFn: () => analyticsApi.getModerationStats(selectedGuildId, days),
+  });
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex justify-between items-center">
+        <div>
+          <h1 className="text-3xl font-bold text-gray-900">Analytics</h1>
+          <p className="text-gray-600 mt-1">Detailed moderation statistics and trends</p>
+        </div>
+        <div className="flex space-x-4">
+          <select
+            value={days}
+            onChange={(e) => setDays(Number(e.target.value))}
+            className="input max-w-xs"
+          >
+            <option value={7}>Last 7 days</option>
+            <option value={30}>Last 30 days</option>
+            <option value={90}>Last 90 days</option>
+          </select>
+          <select
+            value={selectedGuildId || ''}
+            onChange={(e) => setSelectedGuildId(e.target.value ? Number(e.target.value) : undefined)}
+            className="input max-w-xs"
+          >
+            <option value="">All Guilds</option>
+            {guilds?.map((guild) => (
+              <option key={guild.id} value={guild.id}>
+                {guild.name}
+              </option>
+            ))}
+          </select>
+        </div>
+      </div>
+
+      {isLoading ? (
+        <div className="text-center py-12">Loading...</div>
+      ) : moderationStats ? (
+        <>
+          {/* Summary Stats */}
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+            <div className="stat-card">
+              <div className="stat-label">Total Actions</div>
+              <div className="stat-value">{moderationStats.total_actions}</div>
+            </div>
+            <div className="stat-card">
+              <div className="stat-label">Automatic Actions</div>
+              <div className="stat-value">{moderationStats.automatic_vs_manual.automatic || 0}</div>
+            </div>
+            <div className="stat-card">
+              <div className="stat-label">Manual Actions</div>
+              <div className="stat-value">{moderationStats.automatic_vs_manual.manual || 0}</div>
+            </div>
+          </div>
+
+          {/* Actions Timeline */}
+          <div className="card">
+            <h3 className="text-lg font-semibold mb-4">Moderation Activity Over Time</h3>
+            <ResponsiveContainer width="100%" height={400}>
+              <LineChart data={moderationStats.actions_over_time}>
+                <CartesianGrid strokeDasharray="3 3" />
+                <XAxis
+                  dataKey="timestamp"
+                  tickFormatter={(value) => new Date(value).toLocaleDateString()}
+                />
+                <YAxis />
+                <Tooltip
+                  labelFormatter={(value) => new Date(value as string).toLocaleDateString()}
+                />
+                <Legend />
+                <Line
+                  type="monotone"
+                  dataKey="value"
+                  stroke="#0ea5e9"
+                  strokeWidth={2}
+                  name="Actions"
+                />
+              </LineChart>
+            </ResponsiveContainer>
+          </div>
+
+          {/* Actions by Type */}
+          <div className="card">
+            <h3 className="text-lg font-semibold mb-4">Actions by Type</h3>
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+              {Object.entries(moderationStats.actions_by_type).map(([action, count]) => (
+                <div key={action} className="border border-gray-200 rounded-lg p-4">
+                  <div className="text-sm text-gray-600 capitalize">{action}</div>
+                  <div className="text-2xl font-bold text-gray-900 mt-1">{count}</div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </>
+      ) : null}
+    </div>
+  );
+}

dashboard/frontend/src/pages/Dashboard.tsx

@@ -0,0 +1,184 @@
+/**
+ * Main dashboard overview page
+ */
+
+import { useQuery } from '@tanstack/react-query';
+import { analyticsApi, guildsApi } from '../services/api';
+import { useState } from 'react';
+import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, PieChart, Pie, Cell } from 'recharts';
+
+const COLORS = ['#0ea5e9', '#06b6d4', '#14b8a6', '#10b981', '#84cc16'];
+
+export function Dashboard() {
+  const [selectedGuildId, setSelectedGuildId] = useState<number | undefined>();
+
+  const { data: guilds } = useQuery({
+    queryKey: ['guilds'],
+    queryFn: guildsApi.list,
+  });
+
+  const { data: analytics, isLoading } = useQuery({
+    queryKey: ['analytics', 'summary', selectedGuildId],
+    queryFn: () => analyticsApi.getSummary(selectedGuildId, 7),
+  });
+
+  const actionTypeData = analytics
+    ? Object.entries(analytics.moderation_stats.actions_by_type).map(([name, value]) => ({
+        name,
+        value,
+      }))
+    : [];
+
+  const automaticVsManualData = analytics
+    ? Object.entries(analytics.moderation_stats.automatic_vs_manual).map(([name, value]) => ({
+        name,
+        value,
+      }))
+    : [];
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex justify-between items-center">
+        <div>
+          <h1 className="text-3xl font-bold text-gray-900">Dashboard</h1>
+          <p className="text-gray-600 mt-1">Overview of your server moderation activity</p>
+        </div>
+        <select
+          value={selectedGuildId || ''}
+          onChange={(e) => setSelectedGuildId(e.target.value ? Number(e.target.value) : undefined)}
+          className="input max-w-xs"
+        >
+          <option value="">All Guilds</option>
+          {guilds?.map((guild) => (
+            <option key={guild.id} value={guild.id}>
+              {guild.name}
+            </option>
+          ))}
+        </select>
+      </div>
+
+      {isLoading ? (
+        <div className="text-center py-12">Loading...</div>
+      ) : analytics ? (
+        <>
+          {/* Stats Grid */}
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+            <div className="stat-card">
+              <div className="stat-label">Total Actions</div>
+              <div className="stat-value">{analytics.moderation_stats.total_actions}</div>
+            </div>
+            <div className="stat-card">
+              <div className="stat-label">Active Users</div>
+              <div className="stat-value">{analytics.user_activity.active_users}</div>
+            </div>
+            <div className="stat-card">
+              <div className="stat-label">Total Messages</div>
+              <div className="stat-value">{analytics.user_activity.total_messages.toLocaleString()}</div>
+            </div>
+            <div className="stat-card">
+              <div className="stat-label">AI Checks</div>
+              <div className="stat-value">{analytics.ai_performance.total_checks}</div>
+            </div>
+          </div>
+
+          {/* User Activity */}
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+            <div className="card">
+              <h3 className="text-lg font-semibold mb-4">New Joins</h3>
+              <div className="space-y-3">
+                <div className="flex justify-between items-center">
+                  <span className="text-gray-600">Today</span>
+                  <span className="text-2xl font-bold">{analytics.user_activity.new_joins_today}</span>
+                </div>
+                <div className="flex justify-between items-center">
+                  <span className="text-gray-600">This Week</span>
+                  <span className="text-2xl font-bold">{analytics.user_activity.new_joins_week}</span>
+                </div>
+              </div>
+            </div>
+
+            <div className="card">
+              <h3 className="text-lg font-semibold mb-4">AI Performance</h3>
+              <div className="space-y-3">
+                <div className="flex justify-between items-center">
+                  <span className="text-gray-600">Flagged Content</span>
+                  <span className="text-xl font-semibold">{analytics.ai_performance.flagged_content}</span>
+                </div>
+                <div className="flex justify-between items-center">
+                  <span className="text-gray-600">Avg Confidence</span>
+                  <span className="text-xl font-semibold">
+                    {(analytics.ai_performance.avg_confidence * 100).toFixed(1)}%
+                  </span>
+                </div>
+                <div className="flex justify-between items-center">
+                  <span className="text-gray-600">Avg Response Time</span>
+                  <span className="text-xl font-semibold">
+                    {analytics.ai_performance.avg_response_time_ms.toFixed(0)}ms
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Charts */}
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+            <div className="card">
+              <h3 className="text-lg font-semibold mb-4">Actions by Type</h3>
+              <ResponsiveContainer width="100%" height={300}>
+                <PieChart>
+                  <Pie
+                    data={actionTypeData}
+                    dataKey="value"
+                    nameKey="name"
+                    cx="50%"
+                    cy="50%"
+                    outerRadius={100}
+                    label
+                  >
+                    {actionTypeData.map((entry, index) => (
+                      <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
+                    ))}
+                  </Pie>
+                  <Tooltip />
+                </PieChart>
+              </ResponsiveContainer>
+            </div>
+
+            <div className="card">
+              <h3 className="text-lg font-semibold mb-4">Automatic vs Manual</h3>
+              <ResponsiveContainer width="100%" height={300}>
+                <BarChart data={automaticVsManualData}>
+                  <CartesianGrid strokeDasharray="3 3" />
+                  <XAxis dataKey="name" />
+                  <YAxis />
+                  <Tooltip />
+                  <Bar dataKey="value" fill="#0ea5e9" />
+                </BarChart>
+              </ResponsiveContainer>
+            </div>
+          </div>
+
+          {/* Timeline */}
+          <div className="card">
+            <h3 className="text-lg font-semibold mb-4">Moderation Activity (Last 7 Days)</h3>
+            <ResponsiveContainer width="100%" height={300}>
+              <BarChart data={analytics.moderation_stats.actions_over_time}>
+                <CartesianGrid strokeDasharray="3 3" />
+                <XAxis
+                  dataKey="timestamp"
+                  tickFormatter={(value) => new Date(value).toLocaleDateString()}
+                />
+                <YAxis />
+                <Tooltip
+                  labelFormatter={(value) => new Date(value as string).toLocaleDateString()}
+                />
+                <Bar dataKey="value" fill="#0ea5e9" name="Actions" />
+              </BarChart>
+            </ResponsiveContainer>
+          </div>
+        </>
+      ) : null}
+    </div>
+  );
+}

dashboard/frontend/src/pages/Moderation.tsx

@@ -0,0 +1,142 @@
+/**
+ * Moderation logs page (enhanced version of original)
+ */
+
+import { useQuery } from '@tanstack/react-query';
+import { moderationApi, guildsApi } from '../services/api';
+import { useState } from 'react';
+import { format } from 'date-fns';
+
+export function Moderation() {
+  const [selectedGuildId, setSelectedGuildId] = useState<number | undefined>();
+  const [page, setPage] = useState(0);
+  const limit = 50;
+
+  const { data: guilds } = useQuery({
+    queryKey: ['guilds'],
+    queryFn: guildsApi.list,
+  });
+
+  const { data: logs, isLoading } = useQuery({
+    queryKey: ['moderation-logs', selectedGuildId, page],
+    queryFn: () => moderationApi.getLogs(selectedGuildId, limit, page * limit),
+  });
+
+  const totalPages = logs ? Math.ceil(logs.total / limit) : 0;
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex justify-between items-center">
+        <div>
+          <h1 className="text-3xl font-bold text-gray-900">Moderation Logs</h1>
+          <p className="text-gray-600 mt-1">
+            View all moderation actions ({logs?.total || 0} total)
+          </p>
+        </div>
+        <select
+          value={selectedGuildId || ''}
+          onChange={(e) => {
+            setSelectedGuildId(e.target.value ? Number(e.target.value) : undefined);
+            setPage(0);
+          }}
+          className="input max-w-xs"
+        >
+          <option value="">All Guilds</option>
+          {guilds?.map((guild) => (
+            <option key={guild.id} value={guild.id}>
+              {guild.name}
+            </option>
+          ))}
+        </select>
+      </div>
+
+      {/* Table */}
+      <div className="card">
+        {isLoading ? (
+          <div className="text-center py-12">Loading...</div>
+        ) : logs && logs.items.length > 0 ? (
+          <>
+            <div className="overflow-x-auto">
+              <table className="w-full">
+                <thead>
+                  <tr className="border-b border-gray-200">
+                    <th className="text-left py-3 px-4 font-semibold text-gray-700">Time</th>
+                    <th className="text-left py-3 px-4 font-semibold text-gray-700">Target</th>
+                    <th className="text-left py-3 px-4 font-semibold text-gray-700">Action</th>
+                    <th className="text-left py-3 px-4 font-semibold text-gray-700">Moderator</th>
+                    <th className="text-left py-3 px-4 font-semibold text-gray-700">Reason</th>
+                    <th className="text-left py-3 px-4 font-semibold text-gray-700">Type</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {logs.items.map((log) => (
+                    <tr key={log.id} className="border-b border-gray-100 hover:bg-gray-50">
+                      <td className="py-3 px-4 text-sm text-gray-600">
+                        {format(new Date(log.created_at), 'MMM d, yyyy HH:mm')}
+                      </td>
+                      <td className="py-3 px-4 font-medium">{log.target_name}</td>
+                      <td className="py-3 px-4">
+                        <span
+                          className={`inline-flex px-2 py-1 text-xs font-semibold rounded-full ${
+                            log.action === 'ban'
+                              ? 'bg-red-100 text-red-800'
+                              : log.action === 'kick'
+                              ? 'bg-orange-100 text-orange-800'
+                              : log.action === 'timeout'
+                              ? 'bg-yellow-100 text-yellow-800'
+                              : 'bg-gray-100 text-gray-800'
+                          }`}
+                        >
+                          {log.action}
+                        </span>
+                      </td>
+                      <td className="py-3 px-4 text-sm">{log.moderator_name}</td>
+                      <td className="py-3 px-4 text-sm text-gray-600">
+                        {log.reason || '—'}
+                      </td>
+                      <td className="py-3 px-4">
+                        <span
+                          className={`text-xs ${
+                            log.is_automatic ? 'text-blue-600' : 'text-gray-600'
+                          }`}
+                        >
+                          {log.is_automatic ? 'Auto' : 'Manual'}
+                        </span>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+
+            {/* Pagination */}
+            {totalPages > 1 && (
+              <div className="flex justify-between items-center mt-6 pt-4 border-t border-gray-200">
+                <button
+                  onClick={() => setPage((p) => Math.max(0, p - 1))}
+                  disabled={page === 0}
+                  className="btn-secondary disabled:opacity-50 disabled:cursor-not-allowed"
+                >
+                  Previous
+                </button>
+                <span className="text-sm text-gray-600">
+                  Page {page + 1} of {totalPages}
+                </span>
+                <button
+                  onClick={() => setPage((p) => Math.min(totalPages - 1, p + 1))}
+                  disabled={page >= totalPages - 1}
+                  className="btn-secondary disabled:opacity-50 disabled:cursor-not-allowed"
+                >
+                  Next
+                </button>
+              </div>
+            )}
+          </>
+        ) : (
+          <div className="text-center py-12 text-gray-600">No moderation logs found</div>
+        )}
+      </div>
+    </div>
+  );
+}

dashboard/frontend/src/pages/Settings.tsx

@@ -0,0 +1,280 @@
+/**
+ * Guild settings page
+ */
+
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { guildsApi } from '../services/api';
+import { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import type { AutomodRuleConfig, GuildSettings as GuildSettingsType } from '../types/api';
+
+export function Settings() {
+  const [selectedGuildId, setSelectedGuildId] = useState<number | undefined>();
+  const queryClient = useQueryClient();
+
+  const { data: guilds } = useQuery({
+    queryKey: ['guilds'],
+    queryFn: guildsApi.list,
+  });
+
+  const { data: settings } = useQuery({
+    queryKey: ['guild-settings', selectedGuildId],
+    queryFn: () => guildsApi.getSettings(selectedGuildId!),
+    enabled: !!selectedGuildId,
+  });
+
+  const { data: automodConfig } = useQuery({
+    queryKey: ['automod-config', selectedGuildId],
+    queryFn: () => guildsApi.getAutomodConfig(selectedGuildId!),
+    enabled: !!selectedGuildId,
+  });
+
+  const updateSettingsMutation = useMutation({
+    mutationFn: (data: GuildSettingsType) => guildsApi.updateSettings(selectedGuildId!, data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['guild-settings', selectedGuildId] });
+    },
+  });
+
+  const updateAutomodMutation = useMutation({
+    mutationFn: (data: AutomodRuleConfig) => guildsApi.updateAutomodConfig(selectedGuildId!, data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['automod-config', selectedGuildId] });
+    },
+  });
+
+  const {
+    register: registerSettings,
+    handleSubmit: handleSubmitSettings,
+    formState: { isDirty: isSettingsDirty },
+  } = useForm<GuildSettingsType>({
+    values: settings,
+  });
+
+  const {
+    register: registerAutomod,
+    handleSubmit: handleSubmitAutomod,
+    formState: { isDirty: isAutomodDirty },
+  } = useForm<AutomodRuleConfig>({
+    values: automodConfig,
+  });
+
+  const onSubmitSettings = (data: GuildSettingsType) => {
+    updateSettingsMutation.mutate(data);
+  };
+
+  const onSubmitAutomod = (data: AutomodRuleConfig) => {
+    updateAutomodMutation.mutate(data);
+  };
+
+  const handleExport = async () => {
+    if (!selectedGuildId) return;
+    const blob = await guildsApi.exportConfig(selectedGuildId);
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `guild_${selectedGuildId}_config.json`;
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex justify-between items-center">
+        <div>
+          <h1 className="text-3xl font-bold text-gray-900">Settings</h1>
+          <p className="text-gray-600 mt-1">Configure your guild settings and automod rules</p>
+        </div>
+        <select
+          value={selectedGuildId || ''}
+          onChange={(e) => setSelectedGuildId(e.target.value ? Number(e.target.value) : undefined)}
+          className="input max-w-xs"
+        >
+          <option value="">Select a Guild</option>
+          {guilds?.map((guild) => (
+            <option key={guild.id} value={guild.id}>
+              {guild.name}
+            </option>
+          ))}
+        </select>
+      </div>
+
+      {!selectedGuildId ? (
+        <div className="card text-center py-12">
+          <p className="text-gray-600">Please select a guild to configure settings</p>
+        </div>
+      ) : (
+        <>
+          {/* General Settings */}
+          <div className="card">
+            <div className="flex justify-between items-center mb-6">
+              <h2 className="text-xl font-semibold">General Settings</h2>
+              <button type="button" onClick={handleExport} className="btn-secondary text-sm">
+                Export Config
+              </button>
+            </div>
+            <form onSubmit={handleSubmitSettings(onSubmitSettings)} className="space-y-4">
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div>
+                  <label className="label">Command Prefix</label>
+                  <input
+                    {...registerSettings('prefix')}
+                    type="text"
+                    className="input"
+                    placeholder="!"
+                  />
+                </div>
+                <div>
+                  <label className="label">Log Channel ID</label>
+                  <input
+                    {...registerSettings('log_channel_id')}
+                    type="number"
+                    className="input"
+                    placeholder="123456789"
+                  />
+                </div>
+                <div>
+                  <label className="label">Verification Role ID</label>
+                  <input
+                    {...registerSettings('verification_role_id')}
+                    type="number"
+                    className="input"
+                    placeholder="123456789"
+                  />
+                </div>
+                <div>
+                  <label className="label">AI Sensitivity (0-100)</label>
+                  <input
+                    {...registerSettings('ai_sensitivity')}
+                    type="number"
+                    min="0"
+                    max="100"
+                    className="input"
+                  />
+                </div>
+              </div>
+
+              <div className="space-y-3">
+                <label className="flex items-center space-x-2">
+                  <input {...registerSettings('automod_enabled')} type="checkbox" className="rounded" />
+                  <span>Enable Automod</span>
+                </label>
+                <label className="flex items-center space-x-2">
+                  <input
+                    {...registerSettings('ai_moderation_enabled')}
+                    type="checkbox"
+                    className="rounded"
+                  />
+                  <span>Enable AI Moderation</span>
+                </label>
+                <label className="flex items-center space-x-2">
+                  <input
+                    {...registerSettings('verification_enabled')}
+                    type="checkbox"
+                    className="rounded"
+                  />
+                  <span>Enable Verification</span>
+                </label>
+              </div>
+
+              <div className="flex justify-end">
+                <button
+                  type="submit"
+                  className="btn-primary"
+                  disabled={!isSettingsDirty || updateSettingsMutation.isPending}
+                >
+                  {updateSettingsMutation.isPending ? 'Saving...' : 'Save Settings'}
+                </button>
+              </div>
+            </form>
+          </div>
+
+          {/* Automod Configuration */}
+          <div className="card">
+            <h2 className="text-xl font-semibold mb-6">Automod Rules</h2>
+            <form onSubmit={handleSubmitAutomod(onSubmitAutomod)} className="space-y-4">
+              <div className="space-y-3">
+                <label className="flex items-center space-x-2">
+                  <input
+                    {...registerAutomod('banned_words_enabled')}
+                    type="checkbox"
+                    className="rounded"
+                  />
+                  <span>Enable Banned Words Filter</span>
+                </label>
+                <label className="flex items-center space-x-2">
+                  <input
+                    {...registerAutomod('scam_detection_enabled')}
+                    type="checkbox"
+                    className="rounded"
+                  />
+                  <span>Enable Scam Detection</span>
+                </label>
+                <label className="flex items-center space-x-2">
+                  <input
+                    {...registerAutomod('spam_detection_enabled')}
+                    type="checkbox"
+                    className="rounded"
+                  />
+                  <span>Enable Spam Detection</span>
+                </label>
+                <label className="flex items-center space-x-2">
+                  <input
+                    {...registerAutomod('invite_filter_enabled')}
+                    type="checkbox"
+                    className="rounded"
+                  />
+                  <span>Enable Invite Filter</span>
+                </label>
+              </div>
+
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div>
+                  <label className="label">Max Mentions</label>
+                  <input
+                    {...registerAutomod('max_mentions')}
+                    type="number"
+                    min="1"
+                    max="20"
+                    className="input"
+                  />
+                </div>
+                <div>
+                  <label className="label">Max Emojis</label>
+                  <input
+                    {...registerAutomod('max_emojis')}
+                    type="number"
+                    min="1"
+                    max="50"
+                    className="input"
+                  />
+                </div>
+                <div>
+                  <label className="label">Spam Threshold</label>
+                  <input
+                    {...registerAutomod('spam_threshold')}
+                    type="number"
+                    min="1"
+                    max="20"
+                    className="input"
+                  />
+                </div>
+              </div>
+
+              <div className="flex justify-end">
+                <button
+                  type="submit"
+                  className="btn-primary"
+                  disabled={!isAutomodDirty || updateAutomodMutation.isPending}
+                >
+                  {updateAutomodMutation.isPending ? 'Saving...' : 'Save Automod Config'}
+                </button>
+              </div>
+            </form>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}

dashboard/frontend/src/pages/Users.tsx

@@ -0,0 +1,122 @@
+/**
+ * User management page
+ */
+
+import { useQuery } from '@tanstack/react-query';
+import { usersApi, guildsApi } from '../services/api';
+import { useState } from 'react';
+import { format } from 'date-fns';
+
+export function Users() {
+  const [selectedGuildId, setSelectedGuildId] = useState<number | undefined>();
+  const [searchTerm, setSearchTerm] = useState('');
+
+  const { data: guilds } = useQuery({
+    queryKey: ['guilds'],
+    queryFn: guildsApi.list,
+  });
+
+  const { data: users, isLoading } = useQuery({
+    queryKey: ['users', selectedGuildId, searchTerm],
+    queryFn: () => usersApi.search(selectedGuildId!, searchTerm || undefined),
+    enabled: !!selectedGuildId,
+  });
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex justify-between items-center">
+        <div>
+          <h1 className="text-3xl font-bold text-gray-900">User Management</h1>
+          <p className="text-gray-600 mt-1">Search and manage users across your servers</p>
+        </div>
+        <select
+          value={selectedGuildId || ''}
+          onChange={(e) => setSelectedGuildId(e.target.value ? Number(e.target.value) : undefined)}
+          className="input max-w-xs"
+        >
+          <option value="">Select a Guild</option>
+          {guilds?.map((guild) => (
+            <option key={guild.id} value={guild.id}>
+              {guild.name}
+            </option>
+          ))}
+        </select>
+      </div>
+
+      {!selectedGuildId ? (
+        <div className="card text-center py-12">
+          <p className="text-gray-600">Please select a guild to search users</p>
+        </div>
+      ) : (
+        <>
+          {/* Search */}
+          <div className="card">
+            <label className="label">Search Users</label>
+            <input
+              type="text"
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+              placeholder="Enter username..."
+              className="input"
+            />
+          </div>
+
+          {/* Results */}
+          <div className="card">
+            {isLoading ? (
+              <div className="text-center py-12">Loading...</div>
+            ) : users && users.length > 0 ? (
+              <div className="overflow-x-auto">
+                <table className="w-full">
+                  <thead>
+                    <tr className="border-b border-gray-200">
+                      <th className="text-left py-3 px-4 font-semibold text-gray-700">Username</th>
+                      <th className="text-left py-3 px-4 font-semibold text-gray-700">Strikes</th>
+                      <th className="text-left py-3 px-4 font-semibold text-gray-700">Warnings</th>
+                      <th className="text-left py-3 px-4 font-semibold text-gray-700">Kicks</th>
+                      <th className="text-left py-3 px-4 font-semibold text-gray-700">Bans</th>
+                      <th className="text-left py-3 px-4 font-semibold text-gray-700">Timeouts</th>
+                      <th className="text-left py-3 px-4 font-semibold text-gray-700">First Seen</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {users.map((user) => (
+                      <tr key={user.user_id} className="border-b border-gray-100 hover:bg-gray-50">
+                        <td className="py-3 px-4 font-medium">{user.username}</td>
+                        <td className="py-3 px-4">
+                          <span
+                            className={`inline-flex px-2 py-1 text-xs font-semibold rounded-full ${
+                              user.strike_count > 5
+                                ? 'bg-red-100 text-red-800'
+                                : user.strike_count > 2
+                                ? 'bg-yellow-100 text-yellow-800'
+                                : 'bg-gray-100 text-gray-800'
+                            }`}
+                          >
+                            {user.strike_count}
+                          </span>
+                        </td>
+                        <td className="py-3 px-4 text-center">{user.total_warnings}</td>
+                        <td className="py-3 px-4 text-center">{user.total_kicks}</td>
+                        <td className="py-3 px-4 text-center">{user.total_bans}</td>
+                        <td className="py-3 px-4 text-center">{user.total_timeouts}</td>
+                        <td className="py-3 px-4 text-sm text-gray-600">
+                          {format(new Date(user.first_seen), 'MMM d, yyyy')}
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            ) : (
+              <div className="text-center py-12 text-gray-600">
+                {searchTerm ? 'No users found matching your search' : 'Enter a username to search'}
+              </div>
+            )}
+          </div>
+        </>
+      )}
+    </div>
+  );
+}

dashboard/frontend/src/services/api.ts

@@ -0,0 +1,120 @@
+/**
+ * API client for GuardDen Dashboard
+ */
+
+import type {
+  AnalyticsSummary,
+  AutomodRuleConfig,
+  CreateUserNote,
+  Guild,
+  GuildSettings,
+  Me,
+  ModerationStats,
+  PaginatedLogs,
+  UserNote,
+  UserProfile,
+} from '../types/api';
+
+const BASE_URL = '';
+
+async function fetchJson<T>(url: string, options?: RequestInit): Promise<T> {
+  const response = await fetch(BASE_URL + url, {
+    ...options,
+    credentials: 'include',
+    headers: {
+      'Content-Type': 'application/json',
+      ...options?.headers,
+    },
+  });
+
+  if (!response.ok) {
+    const error = await response.text();
+    throw new Error(`Request failed: ${response.status} - ${error}`);
+  }
+
+  return response.json() as Promise<T>;
+}
+
+// Auth API
+export const authApi = {
+  getMe: () => fetchJson<Me>('/api/me'),
+};
+
+// Guilds API
+export const guildsApi = {
+  list: () => fetchJson<Guild[]>('/api/guilds'),
+  getSettings: (guildId: number) =>
+    fetchJson<GuildSettings>(`/api/guilds/${guildId}/settings`),
+  updateSettings: (guildId: number, settings: GuildSettings) =>
+    fetchJson<GuildSettings>(`/api/guilds/${guildId}/settings`, {
+      method: 'PUT',
+      body: JSON.stringify(settings),
+    }),
+  getAutomodConfig: (guildId: number) =>
+    fetchJson<AutomodRuleConfig>(`/api/guilds/${guildId}/automod`),
+  updateAutomodConfig: (guildId: number, config: AutomodRuleConfig) =>
+    fetchJson<AutomodRuleConfig>(`/api/guilds/${guildId}/automod`, {
+      method: 'PUT',
+      body: JSON.stringify(config),
+    }),
+  exportConfig: (guildId: number) =>
+    fetch(`${BASE_URL}/api/guilds/${guildId}/export`, {
+      credentials: 'include',
+    }).then((res) => res.blob()),
+};
+
+// Moderation API
+export const moderationApi = {
+  getLogs: (guildId?: number, limit = 50, offset = 0) => {
+    const params = new URLSearchParams({ limit: String(limit), offset: String(offset) });
+    if (guildId) {
+      params.set('guild_id', String(guildId));
+    }
+    return fetchJson<PaginatedLogs>(`/api/moderation/logs?${params}`);
+  },
+};
+
+// Analytics API
+export const analyticsApi = {
+  getSummary: (guildId?: number, days = 7) => {
+    const params = new URLSearchParams({ days: String(days) });
+    if (guildId) {
+      params.set('guild_id', String(guildId));
+    }
+    return fetchJson<AnalyticsSummary>(`/api/analytics/summary?${params}`);
+  },
+  getModerationStats: (guildId?: number, days = 30) => {
+    const params = new URLSearchParams({ days: String(days) });
+    if (guildId) {
+      params.set('guild_id', String(guildId));
+    }
+    return fetchJson<ModerationStats>(`/api/analytics/moderation-stats?${params}`);
+  },
+};
+
+// Users API
+export const usersApi = {
+  search: (guildId: number, username?: string, minStrikes?: number, limit = 50) => {
+    const params = new URLSearchParams({ guild_id: String(guildId), limit: String(limit) });
+    if (username) {
+      params.set('username', username);
+    }
+    if (minStrikes !== undefined) {
+      params.set('min_strikes', String(minStrikes));
+    }
+    return fetchJson<UserProfile[]>(`/api/users/search?${params}`);
+  },
+  getProfile: (userId: number, guildId: number) =>
+    fetchJson<UserProfile>(`/api/users/${userId}/profile?guild_id=${guildId}`),
+  getNotes: (userId: number, guildId: number) =>
+    fetchJson<UserNote[]>(`/api/users/${userId}/notes?guild_id=${guildId}`),
+  createNote: (userId: number, guildId: number, note: CreateUserNote) =>
+    fetchJson<UserNote>(`/api/users/${userId}/notes?guild_id=${guildId}`, {
+      method: 'POST',
+      body: JSON.stringify(note),
+    }),
+  deleteNote: (userId: number, noteId: number, guildId: number) =>
+    fetchJson<void>(`/api/users/${userId}/notes/${noteId}?guild_id=${guildId}`, {
+      method: 'DELETE',
+    }),
+};

dashboard/frontend/src/services/websocket.ts

@@ -0,0 +1,120 @@
+/**
+ * WebSocket service for real-time updates
+ */
+
+import type { WebSocketEvent } from '../types/api';
+
+type EventHandler = (event: WebSocketEvent) => void;
+
+export class WebSocketService {
+  private ws: WebSocket | null = null;
+  private handlers: Map<string, Set<EventHandler>> = new Map();
+  private reconnectTimeout: number | null = null;
+  private reconnectAttempts = 0;
+  private maxReconnectAttempts = 5;
+  private guildId: number | null = null;
+
+  connect(guildId: number): void {
+    this.guildId = guildId;
+    this.reconnectAttempts = 0;
+    this.doConnect();
+  }
+
+  private doConnect(): void {
+    if (this.guildId === null) return;
+
+    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+    const wsUrl = `${protocol}//${window.location.host}/ws/events?guild_id=${this.guildId}`;
+
+    this.ws = new WebSocket(wsUrl);
+
+    this.ws.onopen = () => {
+      console.log('WebSocket connected');
+      this.reconnectAttempts = 0;
+    };
+
+    this.ws.onmessage = (event) => {
+      try {
+        const data = JSON.parse(event.data) as WebSocketEvent;
+        this.emit(data.type, data);
+        this.emit('*', data); // Emit to wildcard handlers
+      } catch (error) {
+        console.error('Failed to parse WebSocket message:', error);
+      }
+    };
+
+    this.ws.onerror = (error) => {
+      console.error('WebSocket error:', error);
+    };
+
+    this.ws.onclose = () => {
+      console.log('WebSocket closed');
+      this.scheduleReconnect();
+    };
+  }
+
+  private scheduleReconnect(): void {
+    if (this.reconnectAttempts >= this.maxReconnectAttempts) {
+      console.error('Max reconnect attempts reached');
+      return;
+    }
+
+    const delay = Math.min(1000 * 2 ** this.reconnectAttempts, 30000);
+    this.reconnectTimeout = window.setTimeout(() => {
+      this.reconnectAttempts++;
+      console.log(`Reconnecting... (attempt ${this.reconnectAttempts})`);
+      this.doConnect();
+    }, delay);
+  }
+
+  disconnect(): void {
+    if (this.reconnectTimeout !== null) {
+      clearTimeout(this.reconnectTimeout);
+      this.reconnectTimeout = null;
+    }
+
+    if (this.ws) {
+      this.ws.close();
+      this.ws = null;
+    }
+
+    this.guildId = null;
+  }
+
+  on(eventType: string, handler: EventHandler): void {
+    if (!this.handlers.has(eventType)) {
+      this.handlers.set(eventType, new Set());
+    }
+    this.handlers.get(eventType)!.add(handler);
+  }
+
+  off(eventType: string, handler: EventHandler): void {
+    const handlers = this.handlers.get(eventType);
+    if (handlers) {
+      handlers.delete(handler);
+      if (handlers.size === 0) {
+        this.handlers.delete(eventType);
+      }
+    }
+  }
+
+  private emit(eventType: string, event: WebSocketEvent): void {
+    const handlers = this.handlers.get(eventType);
+    if (handlers) {
+      handlers.forEach((handler) => handler(event));
+    }
+  }
+
+  send(data: unknown): void {
+    if (this.ws && this.ws.readyState === WebSocket.OPEN) {
+      this.ws.send(JSON.stringify(data));
+    }
+  }
+
+  ping(): void {
+    this.send('ping');
+  }
+}
+
+// Singleton instance
+export const wsService = new WebSocketService();

dashboard/frontend/src/types/api.ts

@@ -0,0 +1,137 @@
+/**
+ * API types for GuardDen Dashboard
+ */
+
+// Auth types
+export interface Me {
+  entra: boolean;
+  discord: boolean;
+  owner: boolean;
+  entra_oid?: string | null;
+  discord_id?: string | null;
+}
+
+// Guild types
+export interface Guild {
+  id: number;
+  name: string;
+  owner_id: number;
+  premium: boolean;
+}
+
+// Moderation types
+export interface ModerationLog {
+  id: number;
+  guild_id: number;
+  target_id: number;
+  target_name: string;
+  moderator_id: number;
+  moderator_name: string;
+  action: string;
+  reason: string | null;
+  duration: number | null;
+  expires_at: string | null;
+  channel_id: number | null;
+  message_id: number | null;
+  message_content: string | null;
+  is_automatic: boolean;
+  created_at: string;
+}
+
+export interface PaginatedLogs {
+  total: number;
+  items: ModerationLog[];
+}
+
+// Analytics types
+export interface TimeSeriesDataPoint {
+  timestamp: string;
+  value: number;
+}
+
+export interface ModerationStats {
+  total_actions: number;
+  actions_by_type: Record<string, number>;
+  actions_over_time: TimeSeriesDataPoint[];
+  automatic_vs_manual: Record<string, number>;
+}
+
+export interface UserActivityStats {
+  active_users: number;
+  total_messages: number;
+  new_joins_today: number;
+  new_joins_week: number;
+}
+
+export interface AIPerformanceStats {
+  total_checks: number;
+  flagged_content: number;
+  avg_confidence: number;
+  false_positives: number;
+  avg_response_time_ms: number;
+}
+
+export interface AnalyticsSummary {
+  moderation_stats: ModerationStats;
+  user_activity: UserActivityStats;
+  ai_performance: AIPerformanceStats;
+}
+
+// User management types
+export interface UserProfile {
+  user_id: number;
+  username: string;
+  strike_count: number;
+  total_warnings: number;
+  total_kicks: number;
+  total_bans: number;
+  total_timeouts: number;
+  first_seen: string;
+  last_action: string | null;
+}
+
+export interface UserNote {
+  id: number;
+  user_id: number;
+  guild_id: number;
+  moderator_id: number;
+  moderator_name: string;
+  content: string;
+  created_at: string;
+}
+
+export interface CreateUserNote {
+  content: string;
+}
+
+// Configuration types
+export interface GuildSettings {
+  guild_id: number;
+  prefix: string | null;
+  log_channel_id: number | null;
+  automod_enabled: boolean;
+  ai_moderation_enabled: boolean;
+  ai_sensitivity: number;
+  verification_enabled: boolean;
+  verification_role_id: number | null;
+  max_warns_before_action: number;
+}
+
+export interface AutomodRuleConfig {
+  guild_id: number;
+  banned_words_enabled: boolean;
+  scam_detection_enabled: boolean;
+  spam_detection_enabled: boolean;
+  invite_filter_enabled: boolean;
+  max_mentions: number;
+  max_emojis: number;
+  spam_threshold: number;
+}
+
+// WebSocket event types
+export interface WebSocketEvent {
+  type: string;
+  guild_id: number;
+  timestamp: string;
+  data: Record<string, unknown>;
+}