feat: add server column to global activity log

2026-03-23 22:12:10 +01:00
parent 36c31fa790
commit 2d85b63775
5 changed files with 81 additions and 64 deletions
--- a/src/app/dashboard/activity-log/page.tsx
+++ b/src/app/dashboard/activity-log/page.tsx
@@ -1,13 +1,16 @@
 import { requireAuth } from '@/lib/auth/server';
+import { getServers } from '@/lib/api/server/servers';
 import { ActivityLogTable } from '@/components/activityLog/ActivityLogTable';

 export default async function ActivityLogPage() {
-	await requireAuth();
+	const session = await requireAuth();
+	const servers = await getServers(session.token!);
+	const serverOptions = servers.map((s) => ({ id: s.id, name: s.name }));

 	return (
 		<main className="p-5">
 			<h1 className="mb-5 text-lg font-semibold text-primary">Activity Log</h1>
-			<ActivityLogTable />
+			<ActivityLogTable servers={serverOptions} />
 		</main>
 	);
 }
--- a/src/components/activityLog/ActivityLogTable.tsx
+++ b/src/components/activityLog/ActivityLogTable.tsx
@@ -8,8 +8,14 @@ import { Button } from '@/components/ui/Button';

 const PAGE_SIZE = 10;

+interface ServerOption {
+	id: string;
+	name: string;
+}
+
 interface ActivityLogTableProps {
 	serverId?: string;
+	servers?: ServerOption[];
 }

 function formatDate(iso: string): string {
@@ -47,7 +53,7 @@ const ACTION_BADGE: Record<ActionType, string> = {
 	leaderboard_update: 'bg-overlay text-muted'
 };

-export function ActivityLogTable({ serverId }: ActivityLogTableProps) {
+export function ActivityLogTable({ serverId, servers }: ActivityLogTableProps) {
 	const [logs, setLogs] = useState<ActivityLog[]>([]);
 	const [page, setPage] = useState(1);
 	const [hasMore, setHasMore] = useState(true);
@@ -55,6 +61,7 @@ export function ActivityLogTable({ serverId }: ActivityLogTableProps) {
 	const [error, setError] = useState<string | null>(null);

 	const [filterAction, setFilterAction] = useState<ActionType | ''>('');
+	const [filterServerId, setFilterServerId] = useState('');
 	const [filterStartDate, setFilterStartDate] = useState('');
 	const [filterEndDate, setFilterEndDate] = useState('');

@@ -65,9 +72,8 @@ export function ActivityLogTable({ serverId }: ActivityLogTableProps) {
 			setIsLoading(true);
 			setError(null);
 			const params = { ...filter, page: currentPage, page_size: PAGE_SIZE };
-			const result = serverId
-				? await getActivityLogAction(serverId, params)
-				: await getGlobalActivityLogAction(params);
+			if (serverId) params.server_id = serverId;
+			const result = await getActivityLogAction(params);
 			setIsLoading(false);
 			if (!result.success) {
 				setError(result.message);
@@ -86,6 +92,7 @@ export function ActivityLogTable({ serverId }: ActivityLogTableProps) {
 	const applyFilters = () => {
 		const filter: ActivityLogFilter = {};
 		if (filterAction) filter.action = filterAction as ActionType;
+		if (filterServerId) filter.server_id = filterServerId;
 		if (filterStartDate) filter.start_date = new Date(filterStartDate).toISOString();
 		if (filterEndDate) filter.end_date = new Date(filterEndDate).toISOString();
 		setAppliedFilter(filter);
@@ -96,6 +103,7 @@ export function ActivityLogTable({ serverId }: ActivityLogTableProps) {

 	const clearFilters = () => {
 		setFilterAction('');
+		setFilterServerId('');
 		setFilterStartDate('');
 		setFilterEndDate('');
 		setAppliedFilter({});
@@ -112,9 +120,9 @@ export function ActivityLogTable({ serverId }: ActivityLogTableProps) {

 	return (
 		<div className="flex flex-col gap-4">
-			<div className="flex flex-wrap items-end gap-3 rounded-lg border border-border bg-canvas p-4">
+			<div className="border-border bg-canvas flex flex-wrap items-end gap-3 rounded-lg border p-4">
 				<div className="flex flex-col gap-1">
-					<label className="text-xs text-subtle">Action type</label>
+					<label className="text-subtle text-xs">Action type</label>
 					<select
 						value={filterAction}
 						onChange={(e) => setFilterAction(e.target.value as ActionType | '')}
@@ -128,8 +136,25 @@ export function ActivityLogTable({ serverId }: ActivityLogTableProps) {
 						))}
 					</select>
 				</div>
+				{servers && servers.length > 0 && (
+					<div className="flex flex-col gap-1">
+						<label className="text-subtle text-xs">Server</label>
+						<select
+							value={filterServerId}
+							onChange={(e) => setFilterServerId(e.target.value)}
+							className="form-input w-48 text-sm"
+						>
+							<option value="">All servers</option>
+							{servers.map((s) => (
+								<option key={s.id} value={s.id}>
+									{s.name}
+								</option>
+							))}
+						</select>
+					</div>
+				)}
 				<div className="flex flex-col gap-1">
-					<label className="text-xs text-subtle">From</label>
+					<label className="text-subtle text-xs">From</label>
 					<input
 						type="date"
 						value={filterStartDate}
@@ -138,7 +163,7 @@ export function ActivityLogTable({ serverId }: ActivityLogTableProps) {
 					/>
 				</div>
 				<div className="flex flex-col gap-1">
-					<label className="text-xs text-subtle">To</label>
+					<label className="text-subtle text-xs">To</label>
 					<input
 						type="date"
 						value={filterEndDate}
@@ -154,31 +179,34 @@ export function ActivityLogTable({ serverId }: ActivityLogTableProps) {
 				</Button>
 			</div>

-			{error && (
-				<p className="text-sm text-red">{error}</p>
-			)}
+			{error && <p className="text-red text-sm">{error}</p>}

-			<div className="overflow-hidden rounded-lg border border-border bg-canvas">
+			<div className="border-border bg-canvas overflow-hidden rounded-lg border">
 				{logs.length === 0 && !isLoading ? (
 					<div className="px-4 py-12 text-center">
 						<div className="mb-3 text-4xl">📋</div>
-						<p className="text-sm text-muted">No activity logged yet.</p>
+						<p className="text-muted text-sm">No activity logged yet.</p>
 					</div>
 				) : (
 					<div className="overflow-x-auto">
 						<table className="min-w-full">
 							<thead>
-								<tr className="border-b border-border-muted bg-base">
-									<th className="px-4 py-2 text-left text-xs font-medium uppercase tracking-wider text-subtle">
+								<tr className="border-border-muted bg-base border-b">
+									<th className="text-subtle px-4 py-2 text-left text-xs font-medium tracking-wider uppercase">
 										Time
 									</th>
-									<th className="px-4 py-2 text-left text-xs font-medium uppercase tracking-wider text-subtle">
+									<th className="text-subtle px-4 py-2 text-left text-xs font-medium tracking-wider uppercase">
 										User
 									</th>
-									<th className="px-4 py-2 text-left text-xs font-medium uppercase tracking-wider text-subtle">
+									{!serverId && (
+										<th className="text-subtle px-4 py-2 text-left text-xs font-medium tracking-wider uppercase">
+											Server
+										</th>
+									)}
+									<th className="text-subtle px-4 py-2 text-left text-xs font-medium tracking-wider uppercase">
 										Action
 									</th>
-									<th className="px-4 py-2 text-left text-xs font-medium uppercase tracking-wider text-subtle">
+									<th className="text-subtle px-4 py-2 text-left text-xs font-medium tracking-wider uppercase">
 										Details
 									</th>
 								</tr>
@@ -187,14 +215,17 @@ export function ActivityLogTable({ serverId }: ActivityLogTableProps) {
 								{logs.map((log) => (
 									<tr
 										key={log.id}
-										className="border-b border-border-muted transition-colors hover:bg-hover last:border-0"
+										className="border-border-muted hover:bg-hover border-b transition-colors last:border-0"
 									>
-										<td className="whitespace-nowrap px-4 py-3 text-sm text-muted">
+										<td className="text-muted px-4 py-3 text-sm whitespace-nowrap">
 											{formatDate(log.createdAt)}
 										</td>
-										<td className="px-4 py-3 text-sm text-secondary">
-											{log.username}
-										</td>
+										<td className="text-secondary px-4 py-3 text-sm">{log.username}</td>
+										{!serverId && (
+											<td className="text-secondary px-4 py-3 text-sm">
+												{log.server?.name ?? log.serverId}
+											</td>
+										)}
 										<td className="px-4 py-3">
 											<span
 												className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${ACTION_BADGE[log.action] ?? 'bg-canvas text-muted'}`}
@@ -202,9 +233,7 @@ export function ActivityLogTable({ serverId }: ActivityLogTableProps) {
 												{ACTION_TYPE_LABELS[log.action] ?? log.action}
 											</span>
 										</td>
-										<td className="px-4 py-3 text-sm text-muted">
-											{parseDetails(log.details)}
-										</td>
+										<td className="text-muted px-4 py-3 text-sm">{parseDetails(log.details)}</td>
 									</tr>
 								))}
 							</tbody>
@@ -212,12 +241,10 @@ export function ActivityLogTable({ serverId }: ActivityLogTableProps) {
 					</div>
 				)}

-				{isLoading && (
-					<div className="px-4 py-4 text-center text-sm text-muted">Loading…</div>
-				)}
+				{isLoading && <div className="text-muted px-4 py-4 text-center text-sm">Loading…</div>}

 				{hasMore && !isLoading && logs.length > 0 && (
-					<div className="border-t border-border-muted px-4 py-3 text-center">
+					<div className="border-border-muted border-t px-4 py-3 text-center">
 						<Button variant="ghost" size="sm" onClick={loadMore}>
 							Load more
 						</Button>
--- a/src/lib/actions/activityLog.ts
+++ b/src/lib/actions/activityLog.ts
@@ -1,31 +1,15 @@
 'use server';

 import { requireAuth } from '@/lib/auth/server';
-import { getActivityLog, getGlobalActivityLog } from '@/lib/api/server/activityLog';
+import { getActivityLog } from '@/lib/api/server/activityLog';
 import type { ActivityLog, ActivityLogFilter } from '@/lib/schemas/activityLog';

 export async function getActivityLogAction(
-	serverId: string,
 	filter?: ActivityLogFilter
 ): Promise<{ success: true; data: ActivityLog[] } | { success: false; message: string }> {
 	try {
 		const session = await requireAuth();
-		const data = await getActivityLog(session.token!, serverId, filter);
-		return { success: true, data };
-	} catch (error) {
-		return {
-			success: false,
-			message: error instanceof Error ? error.message : 'Failed to fetch activity log'
-		};
-	}
-}
-
-export async function getGlobalActivityLogAction(
-	filter?: ActivityLogFilter
-): Promise<{ success: true; data: ActivityLog[] } | { success: false; message: string }> {
-	try {
-		const session = await requireAuth();
-		const data = await getGlobalActivityLog(session.token!, filter);
+		const data = await getActivityLog(session.token!, filter);
 		return { success: true, data };
 	} catch (error) {
 		return {
--- a/src/lib/api/server/activityLog.ts
+++ b/src/lib/api/server/activityLog.ts
@@ -1,5 +1,9 @@
 import { fetchServerAPI } from './base';
-import { activityLogSchema, type ActivityLog, type ActivityLogFilter } from '@/lib/schemas/activityLog';
+import {
+	activityLogSchema,
+	type ActivityLog,
+	type ActivityLogFilter
+} from '@/lib/schemas/activityLog';

 function buildQuery(filter?: ActivityLogFilter): string {
 	if (!filter) return '';
@@ -9,6 +13,7 @@ function buildQuery(filter?: ActivityLogFilter): string {
 	if (filter.sort_by) params.set('sort_by', filter.sort_by);
 	if (filter.sort_desc !== undefined) params.set('sort_desc', String(filter.sort_desc));
 	if (filter.user_id) params.set('user_id', filter.user_id);
+	if (filter.server_id) params.set('server_id', filter.server_id);
 	if (filter.action) params.set('action', filter.action);
 	if (filter.start_date) params.set('start_date', filter.start_date);
 	if (filter.end_date) params.set('end_date', filter.end_date);
@@ -17,23 +22,11 @@ function buildQuery(filter?: ActivityLogFilter): string {
 }

 export async function getActivityLog(
-	token: string,
-	serverId: string,
-	filter?: ActivityLogFilter
-): Promise<ActivityLog[]> {
-	const query = buildQuery(filter);
-	const response = await fetchServerAPI<ActivityLog[]>(
-		`/server/${serverId}/activity-log${query}`,
-		token
-	);
-	return activityLogSchema.array().parse(response.data);
-}
-
-export async function getGlobalActivityLog(
 	token: string,
 	filter?: ActivityLogFilter
 ): Promise<ActivityLog[]> {
 	const query = buildQuery(filter);
 	const response = await fetchServerAPI<ActivityLog[]>(`/activity-log${query}`, token);
+	console.log(response.data);
 	return activityLogSchema.array().parse(response.data);
 }
--- a/src/lib/schemas/activityLog.ts
+++ b/src/lib/schemas/activityLog.ts
@@ -10,9 +10,18 @@ export const actionTypeSchema = z.enum([

 export type ActionType = z.infer<typeof actionTypeSchema>;

+// Minimal server shape embedded in activity log responses (avoids circular import with server.ts)
+const embeddedServerSchema = z.object({
+	id: z.string(),
+	name: z.string()
+}).passthrough();
+
+export type EmbeddedServer = z.infer<typeof embeddedServerSchema>;
+
 export const activityLogSchema = z.object({
 	id: z.string(),
 	serverId: z.string(),
+	server: embeddedServerSchema.optional(),
 	userId: z.string(),
 	username: z.string(),
 	action: actionTypeSchema,
@@ -36,6 +45,7 @@ export const activityLogFilterSchema = z.object({
 	sort_by: z.string().optional(),
 	sort_desc: z.boolean().optional(),
 	user_id: z.string().optional(),
+	server_id: z.string().optional(),
 	action: actionTypeSchema.optional(),
 	start_date: z.string().optional(),
 	end_date: z.string().optional()