From 4c09e0dbd138696a836df08d2596b546354ec09e Mon Sep 17 00:00:00 2001
From: robertocarlous <robbertabimbola21@gmail.com>
Date: Sat, 17 Oct 2026 20:21:43 +0100
Subject: [PATCH] feat: add session security dashboard in account settings
 (#1111)

Add session management surface with active sessions list, device/browser/IP and last active time, current session badge and non-revokable state, single revoke with confirmation, and revoke-all-other sessions action. Add sessions API service, React Query hooks, settings page and route.
---
 .../settings/SessionSecuritySection.tsx       | 310 ++++++++++++++++++
 src/hooks/useSessions.ts                      |  77 +++++
 src/lib/queryKeys.ts                          |   4 +
 src/pages/AccountSettingsPage.tsx             |  47 +++
 src/routes.tsx                                |   9 +
 src/services/session.service.ts               |  70 ++++
 6 files changed, 517 insertions(+)
 create mode 100644 src/components/settings/SessionSecuritySection.tsx
 create mode 100644 src/hooks/useSessions.ts
 create mode 100644 src/pages/AccountSettingsPage.tsx
 create mode 100644 src/services/session.service.ts

diff --git a/src/components/settings/SessionSecuritySection.tsx b/src/components/settings/SessionSecuritySection.tsx
new file mode 100644
index 00000000..bc9cf8b7
--- /dev/null
+++ b/src/components/settings/SessionSecuritySection.tsx
@@ -0,0 +1,310 @@
+import { useState } from 'react';
+import {
+	Laptop,
+	Smartphone,
+	Monitor,
+	ShieldCheck,
+	Trash2,
+	LogOut,
+} from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { AsyncButton } from '@/components/ui/async-button';
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+} from '@/components/ui/dialog';
+import { cn } from '@/lib/utils';
+import type { Session } from '@/services/session.service';
+import { formatTimestampTooltip } from '@/utils/time.utils';
+
+export interface SessionSecuritySectionProps {
+	sessions: Session[];
+	isLoading?: boolean;
+	isError?: boolean;
+	isRevoking?: boolean;
+	onRevokeSession: (sessionId: string) => void;
+	onRevokeAllOtherSessions: () => void;
+	className?: string;
+}
+
+function DeviceIcon({ device }: { device: string }) {
+	const label = device.toLowerCase();
+	const className = 'size-5 text-white/60';
+	if (label.includes('iphone') || label.includes('android') || label.includes('phone')) {
+		return <Smartphone className={className} aria-hidden="true" />;
+	}
+	if (label.includes('ipad') || label.includes('tablet')) {
+		return <Monitor className={className} aria-hidden="true" />;
+	}
+	return <Laptop className={className} aria-hidden="true" />;
+}
+
+/**
+ * Session security dashboard (#1111).
+ *
+ * Lists every active session with its device, browser, IP and last-active
+ * time. The current session is badged and cannot be revoked from the list.
+ * Single-session and revoke-all-other actions are gated behind a
+ * confirmation dialog.
+ */
+export default function SessionSecuritySection({
+	sessions,
+	isLoading = false,
+	isError = false,
+	isRevoking = false,
+	onRevokeSession,
+	onRevokeAllOtherSessions,
+	className,
+}: SessionSecuritySectionProps) {
+	const [pendingRevoke, setPendingRevoke] = useState<Session | null>(null);
+	const [confirmRevokeAll, setConfirmRevokeAll] = useState(false);
+
+	const otherSessions = sessions.filter(session => !session.isCurrent);
+
+	const handleConfirmRevoke = () => {
+		if (!pendingRevoke) return;
+		onRevokeSession(pendingRevoke.id);
+		setPendingRevoke(null);
+	};
+
+	const handleConfirmRevokeAll = () => {
+		onRevokeAllOtherSessions();
+		setConfirmRevokeAll(false);
+	};
+
+	return (
+		<section
+			className={cn(
+				'rounded-[2rem] border border-white/10 bg-white/[0.02] p-6 shadow-2xl backdrop-blur-md md:p-8',
+				className
+			)}
+			data-testid="session-security-section"
+		>
+			<header className="mb-6 flex flex-wrap items-start justify-between gap-4">
+				<div className="flex items-start gap-3">
+					<ShieldCheck
+						className="mt-0.5 size-6 text-amber-300"
+						aria-hidden="true"
+					/>
+					<div>
+						<h2 className="font-grotesque text-xl font-black tracking-tight text-white">
+							Active sessions
+						</h2>
+						<p className="mt-1 text-sm text-white/50">
+							Devices currently signed in to your account. Revoke any you
+							don't recognise.
+						</p>
+					</div>
+				</div>
+
+				{otherSessions.length > 0 && (
+					<Button
+						type="button"
+						variant="destructive"
+						data-testid="revoke-all-sessions-button"
+						disabled={isRevoking}
+						onClick={() => setConfirmRevokeAll(true)}
+						className="gap-2"
+					>
+						<LogOut className="size-4" aria-hidden="true" />
+						Revoke all other sessions
+					</Button>
+				)}
+			</header>
+
+			{isLoading && (
+				<div
+					data-testid="session-security-loading"
+					className="space-y-3"
+				>
+					{Array.from({ length: 3 }).map((_, index) => (
+						<div
+							key={index}
+							className="h-16 w-full animate-pulse rounded-xl bg-white/5"
+						/>
+					))}
+				</div>
+			)}
+
+			{!isLoading && isError && (
+				<div
+					role="alert"
+					data-testid="session-security-error"
+					className="rounded-xl border border-amber-400/30 bg-amber-400/10 p-4 text-sm text-amber-200"
+				>
+					We couldn't load your active sessions. Please refresh and try
+					again.
+				</div>
+			)}
+
+			{!isLoading && !isError && sessions.length === 0 && (
+				<div
+					data-testid="session-security-empty"
+					className="flex flex-col items-center gap-3 rounded-2xl border border-white/10 py-16 text-center"
+				>
+					<div className="flex size-12 items-center justify-center rounded-full border border-white/10 bg-white/5 text-white/50">
+						<ShieldCheck className="size-6" aria-hidden="true" />
+					</div>
+					<p className="text-sm text-white/50">
+						No active sessions found
+					</p>
+				</div>
+			)}
+
+			{!isLoading && !isError && sessions.length > 0 && (
+				<ul
+					data-testid="session-security-list"
+					className="divide-y divide-white/10 rounded-xl border border-white/10"
+				>
+					{sessions.map(session => {
+						const { display, title } = formatTimestampTooltip(
+							session.lastActiveAt
+						);
+						return (
+							<li
+								key={session.id}
+								data-testid={`session-row-${session.id}`}
+								className={cn(
+									'flex flex-wrap items-center gap-4 px-4 py-4',
+									session.isCurrent && 'bg-amber-400/5'
+								)}
+							>
+								<div className="flex size-10 shrink-0 items-center justify-center rounded-full border border-white/10 bg-white/5">
+									<DeviceIcon device={session.device} />
+								</div>
+
+								<div className="min-w-0 flex-1">
+									<div className="flex flex-wrap items-center gap-2">
+										<p className="truncate font-jakarta text-sm font-semibold text-white">
+											{session.device}
+										</p>
+										{session.isCurrent && (
+											<span
+												data-testid={`session-current-badge-${session.id}`}
+												className="rounded-full border border-emerald-400/30 bg-emerald-400/15 px-2 py-0.5 text-[11px] font-semibold uppercase tracking-wider text-emerald-300"
+											>
+												This device
+											</span>
+										)}
+									</div>
+									<p
+										className="mt-1 truncate text-xs text-white/50"
+										title={title ?? undefined}
+									>
+										{session.browser} · {session.ipAddress} · Last
+										active {display}
+									</p>
+								</div>
+
+								{session.isCurrent ? (
+									<span
+										data-testid={`session-not-revokable-${session.id}`}
+										className="text-xs font-medium text-white/40"
+										aria-label="Current session cannot be revoked"
+									>
+										Current session
+									</span>
+								) : (
+									<Button
+										type="button"
+										variant="outline"
+										size="sm"
+										data-testid={`revoke-session-${session.id}`}
+										disabled={isRevoking}
+										onClick={() => setPendingRevoke(session)}
+										className="gap-1.5 text-red-300 hover:border-red-500/50 hover:bg-red-500/10 hover:text-red-200"
+									>
+										<Trash2
+											className="size-3.5"
+											aria-hidden="true"
+										/>
+										Revoke
+									</Button>
+								)}
+							</li>
+						);
+					})}
+				</ul>
+			)}
+
+			{/* Single-session revoke confirmation */}
+			<Dialog
+				open={pendingRevoke !== null}
+				onOpenChange={open => {
+					if (!open) setPendingRevoke(null);
+				}}
+			>
+				<DialogContent data-testid="revoke-session-dialog">
+					<DialogHeader>
+						<DialogTitle>Revoke this session?</DialogTitle>
+						<DialogDescription>
+							{pendingRevoke
+								? `${pendingRevoke.device} (${pendingRevoke.browser}) will be signed out on its next request.`
+								: ''}
+						</DialogDescription>
+					</DialogHeader>
+					<DialogFooter>
+						<Button
+							type="button"
+							variant="outline"
+							data-testid="revoke-session-cancel"
+							onClick={() => setPendingRevoke(null)}
+						>
+							Cancel
+						</Button>
+						<AsyncButton
+							type="button"
+							variant="destructive"
+							isPending={isRevoking}
+							pendingText="Revoking…"
+							data-testid="revoke-session-confirm"
+							onClick={handleConfirmRevoke}
+						>
+							Revoke session
+						</AsyncButton>
+					</DialogFooter>
+				</DialogContent>
+			</Dialog>
+
+			{/* Revoke-all confirmation */}
+			<Dialog
+				open={confirmRevokeAll}
+				onOpenChange={setConfirmRevokeAll}
+			>
+				<DialogContent data-testid="revoke-all-sessions-dialog">
+					<DialogHeader>
+						<DialogTitle>Revoke all other sessions?</DialogTitle>
+						<DialogDescription>
+							Every session except this device will be signed out. Your
+							current session stays active.
+						</DialogDescription>
+					</DialogHeader>
+					<DialogFooter>
+						<Button
+							type="button"
+							variant="outline"
+							data-testid="revoke-all-sessions-cancel"
+							onClick={() => setConfirmRevokeAll(false)}
+						>
+							Cancel
+						</Button>
+						<AsyncButton
+							type="button"
+							variant="destructive"
+							isPending={isRevoking}
+							pendingText="Revoking…"
+							data-testid="revoke-all-sessions-confirm"
+							onClick={handleConfirmRevokeAll}
+						>
+							Revoke all others
+						</AsyncButton>
+					</DialogFooter>
+				</DialogContent>
+			</Dialog>
+		</section>
+	);
+}
diff --git a/src/hooks/useSessions.ts b/src/hooks/useSessions.ts
new file mode 100644
index 00000000..b6674c08
--- /dev/null
+++ b/src/hooks/useSessions.ts
@@ -0,0 +1,77 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { queryKeys } from '@/lib/queryKeys';
+import {
+	sessionService,
+	type Session,
+	type SessionsResponse,
+} from '@/services/session.service';
+import showToast from '@/utils/toast.util';
+
+export interface UseSessionsResult {
+	sessions: Session[];
+	isLoading: boolean;
+	isError: boolean;
+	isRevoking: boolean;
+	/** Revoke a single non-current session. */
+	revokeSession: (sessionId: string) => void;
+	/** Revoke every session except the current one. */
+	revokeAllOtherSessions: () => void;
+}
+
+/**
+ * Fetches the current user's active sessions and exposes revoke helpers.
+ *
+ * The fetch fn is injectable so tests can supply a stub without module-level
+ * patching (matches the pattern used in `useNotifications`).
+ */
+export function useSessions(
+	userId: string,
+	fetchSessions: (id: string) => Promise<SessionsResponse> = id =>
+		sessionService.getSessions(id)
+): UseSessionsResult {
+	const queryClient = useQueryClient();
+	const queryKey = queryKeys.sessions.list(userId);
+
+	const { data, isLoading, isError } = useQuery({
+		queryKey,
+		queryFn: () => fetchSessions(userId),
+		enabled: !!userId,
+	});
+
+	const invalidate = () => {
+		void queryClient.invalidateQueries({ queryKey });
+	};
+
+	const { mutate: revokeSession, isPending: isRevokingOne } = useMutation({
+		mutationFn: (sessionId: string) =>
+			sessionService.revokeSession(sessionId),
+		onSuccess: () => {
+			showToast.success('Session revoked');
+			invalidate();
+		},
+		onError: () => {
+			showToast.error('Could not revoke that session. Try again.');
+		},
+	});
+
+	const { mutate: revokeAllOtherSessions, isPending: isRevokingAll } =
+		useMutation({
+			mutationFn: () => sessionService.revokeAllOtherSessions(),
+			onSuccess: () => {
+				showToast.success('All other sessions revoked');
+				invalidate();
+			},
+			onError: () => {
+				showToast.error('Could not revoke other sessions. Try again.');
+			},
+		});
+
+	return {
+		sessions: data?.sessions ?? [],
+		isLoading,
+		isError,
+		isRevoking: isRevokingOne || isRevokingAll,
+		revokeSession,
+		revokeAllOtherSessions,
+	};
+}
diff --git a/src/lib/queryKeys.ts b/src/lib/queryKeys.ts
index 567985ea..0052784a 100644
--- a/src/lib/queryKeys.ts
+++ b/src/lib/queryKeys.ts
@@ -34,4 +34,8 @@ export const queryKeys = {
 		all: () => ['notifications'] as const,
 		list: (userId: string) => ['notifications', userId, 'list'] as const,
 	},
+	sessions: {
+		all: () => ['sessions'] as const,
+		list: (userId: string) => ['sessions', userId, 'list'] as const,
+	},
 } as const;
diff --git a/src/pages/AccountSettingsPage.tsx b/src/pages/AccountSettingsPage.tsx
new file mode 100644
index 00000000..2f0098dd
--- /dev/null
+++ b/src/pages/AccountSettingsPage.tsx
@@ -0,0 +1,47 @@
+import { Settings } from 'lucide-react';
+import { useProfileStore } from '@/hooks/useProfileStore';
+import { useSessions } from '@/hooks/useSessions';
+import { useNavigationTiming } from '@/hooks/useNavigationTiming';
+import SessionSecuritySection from '@/components/settings/SessionSecuritySection';
+
+/**
+ * Account settings page (#1111).
+ *
+ * Currently hosts the session security dashboard. Additional account
+ * sections can be added here as the settings surface grows.
+ */
+export default function AccountSettingsPage() {
+	useNavigationTiming('account-settings');
+
+	const profile = useProfileStore(state => state.profile);
+	const userId = profile?.id ?? '';
+
+	const {
+		sessions,
+		isLoading,
+		isError,
+		isRevoking,
+		revokeSession,
+		revokeAllOtherSessions,
+	} = useSessions(userId);
+
+	return (
+		<main className="mx-auto max-w-3xl px-6 py-16">
+			<div className="mb-8 flex items-center gap-3">
+				<Settings className="size-6 text-foreground" aria-hidden="true" />
+				<h1 className="font-jakarta text-2xl font-semibold">
+					Account settings
+				</h1>
+			</div>
+
+			<SessionSecuritySection
+				sessions={sessions}
+				isLoading={isLoading}
+				isError={isError}
+				isRevoking={isRevoking}
+				onRevokeSession={revokeSession}
+				onRevokeAllOtherSessions={revokeAllOtherSessions}
+			/>
+		</main>
+	);
+}
diff --git a/src/routes.tsx b/src/routes.tsx
index b4add511..2d7bd554 100644
--- a/src/routes.tsx
+++ b/src/routes.tsx
@@ -2,6 +2,7 @@ import HomePage from './pages/HomePage';
 import NotFoundPage from './pages/NotFoundPage';
 import CreatorDetailPage from './pages/CreatorDetailPage';
 import NotificationsPage from './pages/NotificationsPage';
+import AccountSettingsPage from './pages/AccountSettingsPage';
 
 export const routes = [
 	{
@@ -24,6 +25,14 @@ export const routes = [
 		path: '/notifications',
 		element: <NotificationsPage />,
 	},
+	{
+		path: '/settings',
+		element: <AccountSettingsPage />,
+	},
+	{
+		path: '/account/settings',
+		element: <AccountSettingsPage />,
+	},
 	{
 		path: '*',
 		element: <NotFoundPage />,
diff --git a/src/services/session.service.ts b/src/services/session.service.ts
new file mode 100644
index 00000000..a7496c83
--- /dev/null
+++ b/src/services/session.service.ts
@@ -0,0 +1,70 @@
+// src/services/session.service.ts
+import { BaseApiService, type APIResponse } from './api.service';
+
+/** A single active login session for the current user. */
+export interface Session {
+	id: string;
+	/** Human-readable device label, e.g. "MacBook Pro". */
+	device: string;
+	/** Browser or client that opened the session, e.g. "Chrome 121". */
+	browser: string;
+	/** IP address the session was last seen from. */
+	ipAddress: string;
+	/** ISO 8601 timestamp of the last authenticated request. */
+	lastActiveAt: string;
+	/** ISO 8601 timestamp when the session was first created. */
+	createdAt: string;
+	/**
+	 * True for the session making the current request. The API is the source
+	 * of truth; the client never assumes which session is current.
+	 */
+	isCurrent: boolean;
+}
+
+export interface SessionsResponse {
+	sessions: Session[];
+}
+
+class SessionService extends BaseApiService {
+	/** List every active session for the current user — GET /auth/sessions */
+	async getSessions(userId: string): Promise<SessionsResponse> {
+		try {
+			const response = await this.api.get<APIResponse<SessionsResponse>>(
+				'/auth/sessions',
+				{ params: { userId } }
+			);
+			return response.data.data;
+		} catch (error) {
+			throw this.handleError(error);
+		}
+	}
+
+	/**
+	 * Revoke a single session — DELETE /auth/sessions/:id
+	 *
+	 * Revoking the current session is rejected by the API; callers must
+	 * exclude it from the list.
+	 */
+	async revokeSession(sessionId: string): Promise<void> {
+		try {
+			await this.api.delete(`/auth/sessions/${sessionId}`);
+		} catch (error) {
+			throw this.handleError(error);
+		}
+	}
+
+	/**
+	 * Revoke all sessions except the current one — DELETE /auth/sessions
+	 */
+	async revokeAllOtherSessions(): Promise<void> {
+		try {
+			await this.api.delete('/auth/sessions', {
+				params: { keepCurrent: true },
+			});
+		} catch (error) {
+			throw this.handleError(error);
+		}
+	}
+}
+
+export const sessionService = new SessionService();