logout if unauthorized

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "acc-server-manager-web",
-  "version": "0.20.0",
+  "version": "0.20.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "acc-server-manager-web",
-      "version": "0.20.0",
+      "version": "0.20.2",
       "dependencies": {
         "@date-fns/utc": "^2.1.1",
         "@hookform/resolvers": "^5.2.1",

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "acc-server-manager-web",
-	"version": "0.20.0",
+	"version": "0.20.2",
 	"private": true,
 	"scripts": {
 		"dev": "next dev --turbopack",

src/app/dashboard/page.tsx

@@ -13,7 +13,7 @@ export default async function DashboardPage() {
 	return (
 		<div className="min-h-screen bg-gray-900 text-white">
 			<header className="bg-gray-800 shadow-md">
-				<div className="mx-auto flex max-w-7xl items-center justify-between px-4 py-4 sm:px-6 lg:px-8">
+				<div className="mx-auto flex max-w-[120rem] items-center justify-between px-4 py-4 sm:px-6 lg:px-8">
 					<h1 className="text-2xl font-bold">ACC Server Manager</h1>
 					<div className="flex items-center space-x-4">
 						{hasPermission(session.user!, 'membership.view') && (
@@ -61,7 +61,7 @@ export default async function DashboardPage() {
 				</div>
 			</header>
 
-			<main className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
+			<main className="mx-auto max-w-[120rem] px-4 py-8 sm:px-6 lg:px-8">
 				<div className="mb-6 flex items-center justify-between">
 					<h2 className="text-xl font-semibold">Your Servers</h2>
 					<RefreshButton />

src/app/dashboard/server/[id]/page.tsx

@@ -27,7 +27,7 @@ export default async function ServerPage({ params }: ServerPageProps) {
 
 	return (
 		<div className="min-h-screen bg-gray-900 text-white">
-			<div className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
+			<div className="mx-auto max-w-[120rem] px-4 py-8 sm:px-6 lg:px-8">
 				<ServerHeader server={server} />
 
 				<div className="mt-8">

src/components/membership/UserManagementTable.tsx

@@ -80,7 +80,7 @@ export function UserManagementTable({ initialData, roles, currentUser }: UserMan
 	return (
 		<>
 			<header className="bg-gray-800 shadow-md">
-				<div className="mx-auto flex max-w-7xl items-center justify-between px-4 py-4 sm:px-6 lg:px-8">
+				<div className="mx-auto flex max-w-[120rem] items-center justify-between px-4 py-4 sm:px-6 lg:px-8">
 					<div className="flex items-center space-x-4">
 						<Link href="/dashboard" className="text-gray-300 hover:text-white">
 							<svg
@@ -111,7 +111,7 @@ export function UserManagementTable({ initialData, roles, currentUser }: UserMan
 				</div>
 			</header>
 
-			<main className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
+			<main className="mx-auto max-w-[120rem] px-4 py-8 sm:px-6 lg:px-8">
 				{/* Filters */}
 				<div className="mb-6 rounded-lg border border-gray-700 bg-gray-800 p-4">
 					<h2 className="mb-3 text-lg font-semibold">Filters</h2>

src/components/server/ServerCard.tsx

@@ -1,6 +1,10 @@
 import Link from 'next/link';
 import { Server, ServiceStatus, getStatusColor, serviceStatusToString } from '@/lib/types';
-import { startServerAction, stopServerAction, restartServerAction } from '@/lib/actions/servers';
+import {
+	startServerEventAction,
+	restartServerEventAction,
+	stopServerEventAction
+} from '@/lib/actions/servers';
 
 interface ServerCardProps {
 	server: Server;
@@ -49,7 +53,7 @@ export function ServerCard({ server }: ServerCardProps) {
 			</Link>
 
 			<div className="flex justify-between gap-2 bg-gray-900 px-4 py-3">
-				<form action={startServerAction.bind(null, server.id)}>
+				<form action={startServerEventAction.bind(null, server.id)}>
 					<button
 						type="submit"
 						disabled={server.status === ServiceStatus.Running}
@@ -59,7 +63,7 @@ export function ServerCard({ server }: ServerCardProps) {
 					</button>
 				</form>
 
-				<form action={restartServerAction.bind(null, server.id)}>
+				<form action={restartServerEventAction.bind(null, server.id)}>
 					<button
 						type="submit"
 						disabled={server.status === ServiceStatus.Stopped}
@@ -69,7 +73,7 @@ export function ServerCard({ server }: ServerCardProps) {
 					</button>
 				</form>
 
-				<form action={stopServerAction.bind(null, server.id)}>
+				<form action={stopServerEventAction.bind(null, server.id)}>
 					<button
 						type="submit"
 						disabled={server.status === ServiceStatus.Stopped}

src/components/server/ServerHeader.tsx

@@ -1,6 +1,10 @@
 import Link from 'next/link';
 import { Server, getStatusColor, serviceStatusToString, ServiceStatus } from '@/lib/types/server';
-import { startServerAction, stopServerAction, restartServerAction } from '@/lib/actions/servers';
+import {
+	startServerEventAction,
+	restartServerEventAction,
+	stopServerEventAction
+} from '@/lib/actions/servers';
 
 interface ServerHeaderProps {
 	server: Server;
@@ -49,7 +53,7 @@ export function ServerHeader({ server }: ServerHeaderProps) {
 					</div>
 
 					<div className="flex space-x-3">
-						<form action={startServerAction.bind(null, server.id)}>
+						<form action={startServerEventAction.bind(null, server.id)}>
 							<button
 								type="submit"
 								disabled={server.status === ServiceStatus.Running}
@@ -59,7 +63,7 @@ export function ServerHeader({ server }: ServerHeaderProps) {
 							</button>
 						</form>
 
-						<form action={restartServerAction.bind(null, server.id)}>
+						<form action={restartServerEventAction.bind(null, server.id)}>
 							<button
 								type="submit"
 								disabled={server.status === ServiceStatus.Stopped}
@@ -69,7 +73,7 @@ export function ServerHeader({ server }: ServerHeaderProps) {
 							</button>
 						</form>
 
-						<form action={stopServerAction.bind(null, server.id)}>
+						<form action={stopServerEventAction.bind(null, server.id)}>
 							<button
 								type="submit"
 								disabled={server.status === ServiceStatus.Stopped}

src/components/statistics/StatisticsDashboard.tsx

@@ -40,13 +40,13 @@ export function StatisticsDashboard({ stats }: StatisticsDashboardProps) {
 			</div>
 
 			{/* Charts */}
-			<div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
+			<div className="grid grid-cols-12 gap-4">
-				<div className="rounded-lg bg-gray-800 p-6">
+				<div className="col-span-9 rounded-lg bg-gray-800 p-6">
 					<h3 className="mb-4 text-lg font-medium text-white">Player Count Over Time</h3>
 					<PlayerCountChart data={stats.playerCountOverTime ?? []} />
 				</div>
 
-				<div className="rounded-lg bg-gray-800 p-6">
+				<div className="col-span-3 rounded-lg bg-gray-800 p-6">
 					<h3 className="mb-4 text-lg font-medium text-white">Session Types</h3>
 					<SessionTypesChart data={stats.sessionTypes ?? []} />
 				</div>

src/lib/actions/servers.ts

@@ -18,6 +18,10 @@ export async function startServerAction(serverId: string) {
 	}
 }
 
+export async function startServerEventAction(serverId: string) {
+	await startServerAction(serverId);
+}
+
 export async function stopServerAction(serverId: string) {
 	try {
 		const session = await requireAuth();
@@ -32,6 +36,10 @@ export async function stopServerAction(serverId: string) {
 	}
 }
 
+export async function stopServerEventAction(serverId: string) {
+	await stopServerAction(serverId);
+}
+
 export async function restartServerAction(serverId: string) {
 	try {
 		const session = await requireAuth();
@@ -45,3 +53,7 @@ export async function restartServerAction(serverId: string) {
 		};
 	}
 }
+
+export async function restartServerEventAction(serverId: string) {
+	await restartServerAction(serverId);
+}

src/lib/api/server/base.ts

@@ -1,3 +1,6 @@
+import { logout } from '@/lib/auth/server';
+import { redirect } from 'next/navigation';
+
 const BASE_URL = process.env.API_BASE_URL || 'http://localhost:8080';
 
 export async function fetchServerAPI<T>(
@@ -18,6 +21,10 @@ export async function fetchServerAPI<T>(
 	});
 
 	if (!response.ok) {
+		if (response.status == 401) {
+			await logout();
+			redirect('/login');
+		}
 		throw new Error(
 			`API Error: ${response.statusText} - ${method} - ${BASE_URL}${endpoint} - ${token}`
 		);