Update dashboard and Docker compose

dashboard/frontend/src/App.tsx

@@ -6,7 +6,9 @@ import { Routes, Route } from "react-router-dom";
 import { Layout } from "./components/Layout";
 import { Dashboard } from "./pages/Dashboard";
 import { Analytics } from "./pages/Analytics";
+import { Servers } from "./pages/Servers";
 import { Users } from "./pages/Users";
+import { Chats } from "./pages/Chats";
 import { Moderation } from "./pages/Moderation";
 import { Settings } from "./pages/Settings";
 
@@ -15,8 +17,10 @@ export default function App() {
     <Routes>
       <Route path="/" element={<Layout />}>
         <Route index element={<Dashboard />} />
+        <Route path="servers" element={<Servers />} />
         <Route path="analytics" element={<Analytics />} />
         <Route path="users" element={<Users />} />
+        <Route path="chats" element={<Chats />} />
         <Route path="moderation" element={<Moderation />} />
         <Route path="settings" element={<Settings />} />
       </Route>

dashboard/frontend/src/components/Layout.tsx

@@ -2,22 +2,24 @@
  * Main dashboard layout with navigation
  */
 
-import { Link, Outlet, useLocation } from 'react-router-dom';
-import { useQuery } from '@tanstack/react-query';
-import { authApi } from '../services/api';
+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' },
+  { name: "Dashboard", href: "/" },
+  { name: "Servers", href: "/servers" },
+  { name: "Users", href: "/users" },
+  { name: "Chats", href: "/chats" },
+  { name: "Moderation", href: "/moderation" },
+  { name: "Analytics", href: "/analytics" },
+  { name: "Settings", href: "/settings" },
 ];
 
 export function Layout() {
   const location = useLocation();
   const { data: me } = useQuery({
-    queryKey: ['me'],
+    queryKey: ["me"],
     queryFn: authApi.getMe,
   });
 
@@ -38,8 +40,8 @@ export function Layout() {
                       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'
+                          ? "bg-gray-100 text-gray-900"
+                          : "text-gray-600 hover:bg-gray-50 hover:text-gray-900"
                       }`}
                     >
                       {item.name}
@@ -53,7 +55,7 @@ export function Layout() {
               {me?.owner ? (
                 <div className="flex items-center space-x-2">
                   <span className="text-sm text-gray-600">
-                    {me.entra ? '✓ Entra' : ''} {me.discord ? '✓ Discord' : ''}
+                    {me.entra ? "✓ Entra" : ""} {me.discord ? "✓ Discord" : ""}
                   </span>
                   <a
                     href="/auth/logout"
@@ -85,7 +87,8 @@ export function Layout() {
               Authentication Required
             </h2>
             <p className="text-gray-600 mb-6">
-              Please authenticate with both Entra ID and Discord to access the dashboard.
+              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">

dashboard/frontend/src/pages/Chats.tsx

@@ -0,0 +1,236 @@
+/**
+ * Message logs page
+ */
+
+import { useQuery } from '@tanstack/react-query';
+import { useMemo, useState } from 'react';
+import { format } from 'date-fns';
+import { guildsApi, moderationApi } from '../services/api';
+
+const ACTION_OPTIONS = [
+  { value: '', label: 'All Actions' },
+  { value: 'delete', label: 'Delete' },
+  { value: 'warn', label: 'Warn' },
+  { value: 'strike', label: 'Strike' },
+  { value: 'timeout', label: 'Timeout' },
+  { value: 'kick', label: 'Kick' },
+  { value: 'ban', label: 'Ban' },
+];
+
+export function Chats() {
+  const [selectedGuildId, setSelectedGuildId] = useState<number | undefined>();
+  const [searchTerm, setSearchTerm] = useState('');
+  const [actionFilter, setActionFilter] = useState('');
+  const [page, setPage] = useState(0);
+  const limit = 50;
+
+  const { data: guilds } = useQuery({
+    queryKey: ['guilds'],
+    queryFn: guildsApi.list,
+  });
+
+  const guildMap = useMemo(() => {
+    return new Map((guilds ?? []).map((guild) => [guild.id, guild.name]));
+  }, [guilds]);
+
+  const { data: logs, isLoading } = useQuery({
+    queryKey: ['chat-logs', selectedGuildId, page, searchTerm, actionFilter],
+    queryFn: () =>
+      moderationApi.getLogs({
+        guildId: selectedGuildId,
+        limit,
+        offset: page * limit,
+        messageOnly: true,
+        search: searchTerm || undefined,
+        action: actionFilter || undefined,
+      }),
+  });
+
+  const totalPages = logs ? Math.ceil(logs.total / limit) : 0;
+  const showGuildColumn = !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">Chats</h1>
+          <p className="text-gray-600 mt-1">Messages captured by moderation actions</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>
+
+      {/* Filters */}
+      <div className="card">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div>
+            <label className="label">Search Messages</label>
+            <input
+              type="text"
+              value={searchTerm}
+              onChange={(e) => {
+                setSearchTerm(e.target.value);
+                setPage(0);
+              }}
+              placeholder="Search message content, user, or reason..."
+              className="input"
+            />
+          </div>
+          <div>
+            <label className="label">Action Filter</label>
+            <select
+              value={actionFilter}
+              onChange={(e) => {
+                setActionFilter(e.target.value);
+                setPage(0);
+              }}
+              className="input"
+            >
+              {ACTION_OPTIONS.map((option) => (
+                <option key={option.value} value={option.value}>
+                  {option.label}
+                </option>
+              ))}
+            </select>
+          </div>
+        </div>
+      </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>
+                    {showGuildColumn && (
+                      <th className="text-left py-3 px-4 font-semibold text-gray-700">Guild</th>
+                    )}
+                    <th className="text-left py-3 px-4 font-semibold text-gray-700">User</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">Message</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) => {
+                    const messageLink =
+                      log.channel_id && log.message_id
+                        ? `https://discord.com/channels/${log.guild_id}/${log.channel_id}/${log.message_id}`
+                        : null;
+                    const guildName = guildMap.get(log.guild_id) ?? `Guild ${log.guild_id}`;
+
+                    return (
+                      <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>
+                        {showGuildColumn && (
+                          <td className="py-3 px-4 text-sm text-gray-600">{guildName}</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">
+                          <div className="text-sm text-gray-900 whitespace-pre-wrap">
+                            {log.message_content}
+                          </div>
+                          <div className="text-xs text-gray-500 mt-2">
+                            {log.channel_id ? `Channel ${log.channel_id}` : 'Channel unknown'}
+                            {messageLink ? (
+                              <>
+                                {' '}
+                                ·{' '}
+                                <a
+                                  href={messageLink}
+                                  target="_blank"
+                                  rel="noreferrer"
+                                  className="text-primary-600 hover:text-primary-700"
+                                >
+                                  Open in Discord
+                                </a>
+                              </>
+                            ) : null}
+                          </div>
+                        </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 chat logs found</div>
+        )}
+      </div>
+    </div>
+  );
+}

dashboard/frontend/src/pages/Moderation.tsx

@@ -2,10 +2,10 @@
  * 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';
+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>();
@@ -13,13 +13,18 @@ export function Moderation() {
   const limit = 50;
 
   const { data: guilds } = useQuery({
-    queryKey: ['guilds'],
+    queryKey: ["guilds"],
     queryFn: guildsApi.list,
   });
 
   const { data: logs, isLoading } = useQuery({
-    queryKey: ['moderation-logs', selectedGuildId, page],
-    queryFn: () => moderationApi.getLogs(selectedGuildId, limit, page * limit),
+    queryKey: ["moderation-logs", selectedGuildId, page],
+    queryFn: () =>
+      moderationApi.getLogs({
+        guildId: selectedGuildId,
+        limit,
+        offset: page * limit,
+      }),
   });
 
   const totalPages = logs ? Math.ceil(logs.total / limit) : 0;
@@ -35,9 +40,11 @@ export function Moderation() {
           </p>
         </div>
         <select
-          value={selectedGuildId || ''}
+          value={selectedGuildId || ""}
           onChange={(e) => {
-            setSelectedGuildId(e.target.value ? Number(e.target.value) : undefined);
+            setSelectedGuildId(
+              e.target.value ? Number(e.target.value) : undefined,
+            );
             setPage(0);
           }}
           className="input max-w-xs"
@@ -61,47 +68,66 @@ export function Moderation() {
               <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>
+                    <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">
+                    <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')}
+                        {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 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 === "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">
+                        {log.moderator_name}
+                      </td>
                       <td className="py-3 px-4 text-sm text-gray-600">
-                        {log.reason || '—'}
+                        {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 ? "text-blue-600" : "text-gray-600"
                           }`}
                         >
-                          {log.is_automatic ? 'Auto' : 'Manual'}
+                          {log.is_automatic ? "Auto" : "Manual"}
                         </span>
                       </td>
                     </tr>
@@ -124,7 +150,9 @@ export function Moderation() {
                   Page {page + 1} of {totalPages}
                 </span>
                 <button
-                  onClick={() => setPage((p) => Math.min(totalPages - 1, p + 1))}
+                  onClick={() =>
+                    setPage((p) => Math.min(totalPages - 1, p + 1))
+                  }
                   disabled={page >= totalPages - 1}
                   className="btn-secondary disabled:opacity-50 disabled:cursor-not-allowed"
                 >
@@ -134,7 +162,9 @@ export function Moderation() {
             )}
           </>
         ) : (
-          <div className="text-center py-12 text-gray-600">No moderation logs found</div>
+          <div className="text-center py-12 text-gray-600">
+            No moderation logs found
+          </div>
         )}
       </div>
     </div>

dashboard/frontend/src/pages/Servers.tsx

@@ -0,0 +1,97 @@
+/**
+ * Servers overview page
+ */
+
+import { useQuery } from '@tanstack/react-query';
+import { Link } from 'react-router-dom';
+import { guildsApi } from '../services/api';
+
+export function Servers() {
+  const { data: guilds, isLoading } = useQuery({
+    queryKey: ['guilds'],
+    queryFn: guildsApi.list,
+  });
+
+  const total = guilds?.length ?? 0;
+  const premiumCount = guilds?.filter((guild) => guild.premium).length ?? 0;
+  const standardCount = total - premiumCount;
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex justify-between items-center">
+        <div>
+          <h1 className="text-3xl font-bold text-gray-900">Servers</h1>
+          <p className="text-gray-600 mt-1">All servers that have added GuardDen</p>
+        </div>
+      </div>
+
+      {/* Stats */}
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+        <div className="stat-card">
+          <div className="stat-label">Total Servers</div>
+          <div className="stat-value">{total}</div>
+        </div>
+        <div className="stat-card">
+          <div className="stat-label">Premium Servers</div>
+          <div className="stat-value">{premiumCount}</div>
+        </div>
+        <div className="stat-card">
+          <div className="stat-label">Standard Servers</div>
+          <div className="stat-value">{standardCount}</div>
+        </div>
+      </div>
+
+      {/* Table */}
+      <div className="card">
+        {isLoading ? (
+          <div className="text-center py-12">Loading...</div>
+        ) : guilds && guilds.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">Server</th>
+                  <th className="text-left py-3 px-4 font-semibold text-gray-700">Server ID</th>
+                  <th className="text-left py-3 px-4 font-semibold text-gray-700">Owner ID</th>
+                  <th className="text-left py-3 px-4 font-semibold text-gray-700">Plan</th>
+                  <th className="text-left py-3 px-4 font-semibold text-gray-700">Actions</th>
+                </tr>
+              </thead>
+              <tbody>
+                {guilds.map((guild) => (
+                  <tr key={guild.id} className="border-b border-gray-100 hover:bg-gray-50">
+                    <td className="py-3 px-4 font-medium">{guild.name}</td>
+                    <td className="py-3 px-4 text-sm text-gray-600">{guild.id}</td>
+                    <td className="py-3 px-4 text-sm text-gray-600">{guild.owner_id}</td>
+                    <td className="py-3 px-4">
+                      <span
+                        className={`inline-flex px-2 py-1 text-xs font-semibold rounded-full ${
+                          guild.premium
+                            ? 'bg-yellow-100 text-yellow-800'
+                            : 'bg-gray-100 text-gray-700'
+                        }`}
+                      >
+                        {guild.premium ? 'Premium' : 'Standard'}
+                      </span>
+                    </td>
+                    <td className="py-3 px-4">
+                      <Link
+                        to={`/settings?guild=${guild.id}`}
+                        className="text-sm text-primary-600 hover:text-primary-700 font-medium"
+                      >
+                        Configure
+                      </Link>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        ) : (
+          <div className="text-center py-12 text-gray-600">No servers found</div>
+        )}
+      </div>
+    </div>
+  );
+}

dashboard/frontend/src/pages/Settings.tsx

@@ -2,44 +2,75 @@
  * 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';
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { guildsApi } from "../services/api";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { useSearchParams } from "react-router-dom";
+import type {
+  AutomodRuleConfig,
+  GuildSettings as GuildSettingsType,
+} from "../types/api";
 
 export function Settings() {
-  const [selectedGuildId, setSelectedGuildId] = useState<number | undefined>();
+  const [searchParams] = useSearchParams();
+  const [selectedGuildId, setSelectedGuildId] = useState<number | undefined>(
+    () => {
+      const guildParam = searchParams.get("guild");
+      if (!guildParam) {
+        return undefined;
+      }
+      const parsed = Number(guildParam);
+      return Number.isNaN(parsed) ? undefined : parsed;
+    },
+  );
   const queryClient = useQueryClient();
 
   const { data: guilds } = useQuery({
-    queryKey: ['guilds'],
+    queryKey: ["guilds"],
     queryFn: guildsApi.list,
   });
 
+  useEffect(() => {
+    const guildParam = searchParams.get("guild");
+    if (!guildParam) {
+      return;
+    }
+    const parsed = Number(guildParam);
+    if (!Number.isNaN(parsed) && parsed !== selectedGuildId) {
+      setSelectedGuildId(parsed);
+    }
+  }, [searchParams, selectedGuildId]);
+
   const { data: settings } = useQuery({
-    queryKey: ['guild-settings', selectedGuildId],
+    queryKey: ["guild-settings", selectedGuildId],
     queryFn: () => guildsApi.getSettings(selectedGuildId!),
     enabled: !!selectedGuildId,
   });
 
   const { data: automodConfig } = useQuery({
-    queryKey: ['automod-config', selectedGuildId],
+    queryKey: ["automod-config", selectedGuildId],
     queryFn: () => guildsApi.getAutomodConfig(selectedGuildId!),
     enabled: !!selectedGuildId,
   });
 
   const updateSettingsMutation = useMutation({
-    mutationFn: (data: GuildSettingsType) => guildsApi.updateSettings(selectedGuildId!, data),
+    mutationFn: (data: GuildSettingsType) =>
+      guildsApi.updateSettings(selectedGuildId!, data),
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['guild-settings', selectedGuildId] });
+      queryClient.invalidateQueries({
+        queryKey: ["guild-settings", selectedGuildId],
+      });
     },
   });
 
   const updateAutomodMutation = useMutation({
-    mutationFn: (data: AutomodRuleConfig) => guildsApi.updateAutomodConfig(selectedGuildId!, data),
+    mutationFn: (data: AutomodRuleConfig) =>
+      guildsApi.updateAutomodConfig(selectedGuildId!, data),
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['automod-config', selectedGuildId] });
+      queryClient.invalidateQueries({
+        queryKey: ["automod-config", selectedGuildId],
+      });
     },
   });
 
@@ -71,7 +102,7 @@ export function Settings() {
     if (!selectedGuildId) return;
     const blob = await guildsApi.exportConfig(selectedGuildId);
     const url = URL.createObjectURL(blob);
-    const a = document.createElement('a');
+    const a = document.createElement("a");
     a.href = url;
     a.download = `guild_${selectedGuildId}_config.json`;
     a.click();
@@ -84,11 +115,17 @@ export function Settings() {
       <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>
+          <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)}
+          value={selectedGuildId || ""}
+          onChange={(e) =>
+            setSelectedGuildId(
+              e.target.value ? Number(e.target.value) : undefined,
+            )
+          }
           className="input max-w-xs"
         >
           <option value="">Select a Guild</option>
@@ -102,7 +139,9 @@ export function Settings() {
 
       {!selectedGuildId ? (
         <div className="card text-center py-12">
-          <p className="text-gray-600">Please select a guild to configure settings</p>
+          <p className="text-gray-600">
+            Please select a guild to configure settings
+          </p>
         </div>
       ) : (
         <>
@@ -110,16 +149,23 @@ export function 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">
+              <button
+                type="button"
+                onClick={handleExport}
+                className="btn-secondary text-sm"
+              >
                 Export Config
               </button>
             </div>
-            <form onSubmit={handleSubmitSettings(onSubmitSettings)} className="space-y-4">
+            <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')}
+                    {...registerSettings("prefix")}
                     type="text"
                     className="input"
                     placeholder="!"
@@ -128,7 +174,7 @@ export function Settings() {
                 <div>
                   <label className="label">Log Channel ID</label>
                   <input
-                    {...registerSettings('log_channel_id')}
+                    {...registerSettings("log_channel_id")}
                     type="number"
                     className="input"
                     placeholder="123456789"
@@ -137,7 +183,7 @@ export function Settings() {
                 <div>
                   <label className="label">Verification Role ID</label>
                   <input
-                    {...registerSettings('verification_role_id')}
+                    {...registerSettings("verification_role_id")}
                     type="number"
                     className="input"
                     placeholder="123456789"
@@ -146,7 +192,7 @@ export function Settings() {
                 <div>
                   <label className="label">AI Sensitivity (0-100)</label>
                   <input
-                    {...registerSettings('ai_sensitivity')}
+                    {...registerSettings("ai_sensitivity")}
                     type="number"
                     min="0"
                     max="100"
@@ -157,12 +203,16 @@ export function Settings() {
 
               <div className="space-y-3">
                 <label className="flex items-center space-x-2">
-                  <input {...registerSettings('automod_enabled')} type="checkbox" className="rounded" />
+                  <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')}
+                    {...registerSettings("ai_moderation_enabled")}
                     type="checkbox"
                     className="rounded"
                   />
@@ -170,7 +220,7 @@ export function Settings() {
                 </label>
                 <label className="flex items-center space-x-2">
                   <input
-                    {...registerSettings('verification_enabled')}
+                    {...registerSettings("verification_enabled")}
                     type="checkbox"
                     className="rounded"
                   />
@@ -182,9 +232,13 @@ export function Settings() {
                 <button
                   type="submit"
                   className="btn-primary"
-                  disabled={!isSettingsDirty || updateSettingsMutation.isPending}
+                  disabled={
+                    !isSettingsDirty || updateSettingsMutation.isPending
+                  }
                 >
-                  {updateSettingsMutation.isPending ? 'Saving...' : 'Save Settings'}
+                  {updateSettingsMutation.isPending
+                    ? "Saving..."
+                    : "Save Settings"}
                 </button>
               </div>
             </form>
@@ -193,11 +247,14 @@ export function Settings() {
           {/* Automod Configuration */}
           <div className="card">
             <h2 className="text-xl font-semibold mb-6">Automod Rules</h2>
-            <form onSubmit={handleSubmitAutomod(onSubmitAutomod)} className="space-y-4">
+            <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')}
+                    {...registerAutomod("banned_words_enabled")}
                     type="checkbox"
                     className="rounded"
                   />
@@ -205,7 +262,7 @@ export function Settings() {
                 </label>
                 <label className="flex items-center space-x-2">
                   <input
-                    {...registerAutomod('scam_detection_enabled')}
+                    {...registerAutomod("scam_detection_enabled")}
                     type="checkbox"
                     className="rounded"
                   />
@@ -213,7 +270,7 @@ export function Settings() {
                 </label>
                 <label className="flex items-center space-x-2">
                   <input
-                    {...registerAutomod('spam_detection_enabled')}
+                    {...registerAutomod("spam_detection_enabled")}
                     type="checkbox"
                     className="rounded"
                   />
@@ -221,7 +278,7 @@ export function Settings() {
                 </label>
                 <label className="flex items-center space-x-2">
                   <input
-                    {...registerAutomod('invite_filter_enabled')}
+                    {...registerAutomod("invite_filter_enabled")}
                     type="checkbox"
                     className="rounded"
                   />
@@ -233,7 +290,7 @@ export function Settings() {
                 <div>
                   <label className="label">Max Mentions</label>
                   <input
-                    {...registerAutomod('max_mentions')}
+                    {...registerAutomod("max_mentions")}
                     type="number"
                     min="1"
                     max="20"
@@ -243,7 +300,7 @@ export function Settings() {
                 <div>
                   <label className="label">Max Emojis</label>
                   <input
-                    {...registerAutomod('max_emojis')}
+                    {...registerAutomod("max_emojis")}
                     type="number"
                     min="1"
                     max="50"
@@ -253,7 +310,7 @@ export function Settings() {
                 <div>
                   <label className="label">Spam Threshold</label>
                   <input
-                    {...registerAutomod('spam_threshold')}
+                    {...registerAutomod("spam_threshold")}
                     type="number"
                     min="1"
                     max="20"
@@ -268,7 +325,9 @@ export function Settings() {
                   className="btn-primary"
                   disabled={!isAutomodDirty || updateAutomodMutation.isPending}
                 >
-                  {updateAutomodMutation.isPending ? 'Saving...' : 'Save Automod Config'}
+                  {updateAutomodMutation.isPending
+                    ? "Saving..."
+                    : "Save Automod Config"}
                 </button>
               </div>
             </form>

dashboard/frontend/src/pages/Users.tsx

@@ -2,40 +2,53 @@
  * User management page
  */
 
-import { useQuery } from '@tanstack/react-query';
-import { usersApi, guildsApi } from '../services/api';
-import { useState } from 'react';
-import { format } from 'date-fns';
+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 [searchTerm, setSearchTerm] = useState("");
+  const [minStrikes, setMinStrikes] = useState("");
 
   const { data: guilds } = useQuery({
-    queryKey: ['guilds'],
+    queryKey: ["guilds"],
     queryFn: guildsApi.list,
   });
 
   const { data: users, isLoading } = useQuery({
-    queryKey: ['users', selectedGuildId, searchTerm],
-    queryFn: () => usersApi.search(selectedGuildId!, searchTerm || undefined),
-    enabled: !!selectedGuildId,
+    queryKey: ["users", selectedGuildId, searchTerm, minStrikes],
+    queryFn: () =>
+      usersApi.search(
+        selectedGuildId,
+        searchTerm || undefined,
+        minStrikes ? Number(minStrikes) : undefined,
+      ),
   });
 
+  const showGuildColumn = !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>
+          <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)}
+          value={selectedGuildId || ""}
+          onChange={(e) =>
+            setSelectedGuildId(
+              e.target.value ? Number(e.target.value) : undefined,
+            )
+          }
           className="input max-w-xs"
         >
-          <option value="">Select a Guild</option>
+          <option value="">All Guilds</option>
           {guilds?.map((guild) => (
             <option key={guild.id} value={guild.id}>
               {guild.name}
@@ -44,14 +57,10 @@ export function Users() {
         </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">
+      {/* Search */}
+      <div className="card">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div>
             <label className="label">Search Users</label>
             <input
               type="text"
@@ -61,62 +70,108 @@ export function Users() {
               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>
+            <label className="label">Minimum Strikes</label>
+            <input
+              type="number"
+              min="0"
+              value={minStrikes}
+              onChange={(e) => setMinStrikes(e.target.value)}
+              placeholder="0"
+              className="input"
+            />
           </div>
-        </>
-      )}
+        </div>
+      </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">
+                  {showGuildColumn && (
+                    <th className="text-left py-3 px-4 font-semibold text-gray-700">
+                      Guild
+                    </th>
+                  )}
+                  <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.guild_id}-${user.user_id}`}
+                    className="border-b border-gray-100 hover:bg-gray-50"
+                  >
+                    {showGuildColumn && (
+                      <td className="py-3 px-4 text-sm text-gray-600">
+                        {user.guild_name}
+                      </td>
+                    )}
+                    <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 || minStrikes
+              ? "No users found matching your filters"
+              : "No user activity found"}
+          </div>
+        )}
+      </div>
     </div>
   );
 }

dashboard/frontend/src/services/api.ts

@@ -13,16 +13,16 @@ import type {
   PaginatedLogs,
   UserNote,
   UserProfile,
-} from '../types/api';
+} from "../types/api";
 
-const BASE_URL = '';
+const BASE_URL = "";
 
 async function fetchJson<T>(url: string, options?: RequestInit): Promise<T> {
   const response = await fetch(BASE_URL + url, {
     ...options,
-    credentials: 'include',
+    credentials: "include",
     headers: {
-      'Content-Type': 'application/json',
+      "Content-Type": "application/json",
       ...options?.headers,
     },
   });
@@ -37,38 +37,66 @@ async function fetchJson<T>(url: string, options?: RequestInit): Promise<T> {
 
 // Auth API
 export const authApi = {
-  getMe: () => fetchJson<Me>('/api/me'),
+  getMe: () => fetchJson<Me>("/api/me"),
 };
 
 // Guilds API
 export const guildsApi = {
-  list: () => fetchJson<Guild[]>('/api/guilds'),
+  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',
+      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',
+      method: "PUT",
       body: JSON.stringify(config),
     }),
   exportConfig: (guildId: number) =>
     fetch(`${BASE_URL}/api/guilds/${guildId}/export`, {
-      credentials: 'include',
+      credentials: "include",
     }).then((res) => res.blob()),
 };
 
 // Moderation API
+type ModerationLogQuery = {
+  guildId?: number;
+  limit?: number;
+  offset?: number;
+  action?: string;
+  messageOnly?: boolean;
+  search?: string;
+};
+
 export const moderationApi = {
-  getLogs: (guildId?: number, limit = 50, offset = 0) => {
-    const params = new URLSearchParams({ limit: String(limit), offset: String(offset) });
+  getLogs: ({
+    guildId,
+    limit = 50,
+    offset = 0,
+    action,
+    messageOnly,
+    search,
+  }: ModerationLogQuery = {}) => {
+    const params = new URLSearchParams({
+      limit: String(limit),
+      offset: String(offset),
+    });
     if (guildId) {
-      params.set('guild_id', String(guildId));
+      params.set("guild_id", String(guildId));
+    }
+    if (action) {
+      params.set("action", action);
+    }
+    if (messageOnly) {
+      params.set("message_only", "true");
+    }
+    if (search) {
+      params.set("search", search);
     }
     return fetchJson<PaginatedLogs>(`/api/moderation/logs?${params}`);
   },
@@ -79,28 +107,38 @@ export const analyticsApi = {
   getSummary: (guildId?: number, days = 7) => {
     const params = new URLSearchParams({ days: String(days) });
     if (guildId) {
-      params.set('guild_id', String(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));
+      params.set("guild_id", String(guildId));
     }
-    return fetchJson<ModerationStats>(`/api/analytics/moderation-stats?${params}`);
+    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) });
+  search: (
+    guildId?: number,
+    username?: string,
+    minStrikes?: number,
+    limit = 50,
+  ) => {
+    const params = new URLSearchParams({ limit: String(limit) });
+    if (guildId) {
+      params.set("guild_id", String(guildId));
+    }
     if (username) {
-      params.set('username', username);
+      params.set("username", username);
     }
     if (minStrikes !== undefined) {
-      params.set('min_strikes', String(minStrikes));
+      params.set("min_strikes", String(minStrikes));
     }
     return fetchJson<UserProfile[]>(`/api/users/search?${params}`);
   },
@@ -110,11 +148,14 @@ export const usersApi = {
     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',
+      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',
-    }),
+    fetchJson<void>(
+      `/api/users/${userId}/notes/${noteId}?guild_id=${guildId}`,
+      {
+        method: "DELETE",
+      },
+    ),
 };

dashboard/frontend/src/types/api.ts

@@ -79,6 +79,8 @@ export interface AnalyticsSummary {
 
 // User management types
 export interface UserProfile {
+  guild_id: number;
+  guild_name: string;
   user_id: number;
   username: string;
   strike_count: number;