diff

web/package.json

@@ -11,13 +11,15 @@
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
+    "@monaco-editor/react": "^4.7.0",
     "@mui/icons-material": "^6.1.10",
     "@mui/material": "^6.1.10",
     "date-fns": "^4.1.0",
     "next": "^15.1.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "sass": "^1.82.0"
+    "sass": "^1.82.0",
+    "swr": "^2.3.3"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3.2.0",

web/src/app/_components/AppProviders.tsx

@@ -0,0 +1,15 @@
+"use client";
+
+import { ThemeProvider } from "@mui/material";
+import { SessionProvider } from "@/app/_components/SessionContext";
+import { theme } from "@/app/lib/theme";
+
+export default function AppProviders({ children }: { children: React.ReactNode }) {
+	return (
+		<SessionProvider>
+			<ThemeProvider theme={theme}>
+				{children}
+			</ThemeProvider>
+		</SessionProvider>
+	);
+}

web/src/app/_components/SessionContext.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import React, { createContext, useContext, ReactNode } from "react";
+import useSWR from "swr";
+import { RolesConstants } from "@/app/ts/Roles";
+
+interface UserInfo {
+	UserID: number;
+	Username: string;
+	AvatarURL: string;
+}
+
+interface SessionContextType {
+	roles: number;
+	user: UserInfo | null;
+	loading: boolean;
+}
+
+const SessionContext = createContext<SessionContextType>({ roles: RolesConstants.Empty, user: null, loading: true });
+
+const fetcher = async (url: string) => {
+	const res = await fetch(url);
+	if (!res.ok) return null;
+	try {
+		const data = await res.json();
+		if (data && typeof data === 'object' && (data.code || data.error)) return null;
+		return data;
+	} catch {
+		return null;
+	}
+};
+
+export const SessionProvider = ({ children }: { children: ReactNode }) => {
+	const { data: rolesData, isLoading: rolesLoading } = useSWR("/api/session/roles", fetcher, { refreshInterval: 60000 });
+	const { data: userData, isLoading: userLoading } = useSWR("/api/session/user", fetcher, { refreshInterval: 60000 });
+
+	const loading = rolesLoading || userLoading;
+	const roles = rolesData?.Roles ?? RolesConstants.Empty;
+	const user = userData ?? null;
+
+	return (
+		<SessionContext.Provider value={{ roles, user, loading }}>
+			{children}
+		</SessionContext.Provider>
+	);
+};
+
+export const useSession = () => useContext(SessionContext);

web/src/app/_components/header.tsx

@@ -2,8 +2,8 @@
 
 import Link from "next/link"
 import Image from "next/image";
-import { UserInfo } from "@/app/ts/User";
-import { useState, useEffect } from "react";
+import { useState } from "react";
+import { useSession } from "@/app/_components/SessionContext";
 
 import AppBar from "@mui/material/AppBar";
 import Toolbar from "@mui/material/Toolbar";
@@ -22,6 +22,7 @@ import ListItemText from "@mui/material/ListItemText";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import { useTheme } from "@mui/material/styles";
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
+import { RolesConstants, hasRole } from "@/app/ts/Roles";
 
 interface HeaderButton {
   name: string;
@@ -44,17 +45,18 @@ function HeaderButton(header: HeaderButton) {
 }
 
 export default function Header() {
-  const theme = useTheme();
-  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
-  const [mobileOpen, setMobileOpen] = useState(false);
+	const theme = useTheme();
+	const isMobile = useMediaQuery(theme.breakpoints.down('md'));
+	const [mobileOpen, setMobileOpen] = useState(false);
+
+	const { user, roles } = useSession();
+	const valid = !!user;
 
   const handleLoginClick = () => {
     window.location.href =
         "/auth/oauth2/login?redirect=" + window.location.href;
   };
 
-  const [valid, setValid] = useState<boolean>(false);
-  const [user, setUser] = useState<UserInfo | null>(null);
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
   const [quickLinksAnchor, setQuickLinksAnchor] = useState<null | HTMLElement>(null);
 
@@ -77,32 +79,6 @@ export default function Header() {
     setQuickLinksAnchor(null);
   };
 
-  useEffect(() => {
-    async function getLoginInfo() {
-      try {
-        const response = await fetch("/api/session/user");
-
-        if (!response.ok) {
-          setValid(false);
-          setUser(null);
-          return;
-        }
-
-        const userData = await response.json();
-        const isLoggedIn = userData && 'UserID' in userData;
-
-        setValid(isLoggedIn);
-        setUser(isLoggedIn ? userData : null);
-      } catch (error) {
-        console.error("Error fetching user data:", error);
-        setValid(false);
-        setUser(null);
-      }
-    }
-
-    getLoginInfo();
-  }, []);
-
   // Mobile navigation drawer content
   const drawer = (
       <Box onClick={handleDrawerToggle} sx={{ textAlign: 'center' }}>
@@ -148,6 +124,8 @@ export default function Header() {
     { name: "Fly Trials Maptest", href: "https://www.roblox.com/games/12724901535" },
   ];
 
+  const showScriptReview = hasRole(roles, RolesConstants.ScriptWrite);
+
   return (
       <AppBar position="static">
         <Toolbar>
@@ -169,6 +147,9 @@ export default function Header() {
                 {navItems.map((item) => (
                     <HeaderButton key={item.name} name={item.name} href={item.href} />
                 ))}
+                {showScriptReview && (
+                  <HeaderButton name="Script Review" href="/script-review" />
+                )}
                 <Box sx={{ flexGrow: 1 }} /> {/* Push quick links to the right */}
                 {/* Quick Links Dropdown */}
                 <Box>

web/src/app/_components/webpage.tsx

@@ -3,8 +3,10 @@
 import Header from "./header";
 
 export default function Webpage({children}: Readonly<{children?: React.ReactNode}>) {
-	return <>
-		<Header/>
-		{children}
-	</>
+	return (
+		<>
+			<Header />
+			{children}
+		</>
+	);
 }

web/src/app/layout.tsx

@@ -1,16 +1,25 @@
-"use client";
-
 import "./globals.scss";
-import {theme} from "@/app/lib/theme";
-import {ThemeProvider} from "@mui/material";
+import { SWRConfig } from "swr";
+import { getSessionUser, getSessionRoles } from "@/app/lib/session";
+import AppProviders from "@/app/_components/AppProviders";
+
+export default async function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
+	const user = await getSessionUser();
+	const roles = await getSessionRoles();
 
-export default function RootLayout({children}: Readonly<{children: React.ReactNode}>) {
 	return (
 		<html lang="en">
 			<body>
-				<ThemeProvider theme={theme}>
-					{children}
-				</ThemeProvider>
+				<SWRConfig value={{
+					fallback: {
+						"/api/session/user": user,
+						"/api/session/roles": { Roles: roles }
+					}
+				}}>
+					<AppProviders>
+						{children}
+					</AppProviders>
+				</SWRConfig>
 			</body>
 		</html>
 	);

web/src/app/lib/session.ts

@@ -0,0 +1,26 @@
+import { cookies } from "next/headers";
+
+const BASE_URL = process.env.API_HOST;
+
+export async function getSessionUser() {
+	const cookieStore = await cookies();
+	const cookieHeader = cookieStore.toString();
+	const res = await fetch(`${BASE_URL}/session/user`, {
+		headers: { Cookie: cookieHeader },
+		cache: 'no-store',
+	});
+	if (!res.ok) return null;
+	return await res.json();
+}
+
+export async function getSessionRoles() {
+	const cookieStore = await cookies();
+	const cookieHeader = cookieStore.toString();
+	const res = await fetch(`${BASE_URL}/session/roles`, {
+		headers: { Cookie: cookieHeader },
+		cache: 'no-store',
+	});
+	if (!res.ok) return 0;
+	const data = await res.json();
+	return data.Roles ?? 0;
+}

web/src/app/maps/[mapId]/page.tsx

@@ -8,6 +8,7 @@ import Link from "next/link";
 import { Snackbar, Alert } from "@mui/material";
 import { useBatchThumbnails } from "@/app/hooks/useBatchThumbnails";
 import { MapfixStatus, type MapfixInfo } from "@/app/ts/Mapfix";
+import { useSession } from "@/app/_components/SessionContext";
 
 // MUI Components
 import {
@@ -46,9 +47,9 @@ export default function MapDetails() {
 	const [loading, setLoading] = useState(true);
 	const [error, setError] = useState<string | null>(null);
 	const [copySuccess, setCopySuccess] = useState(false);
-	const [roles, setRoles] = useState(RolesConstants.Empty);
 	const [downloading, setDownloading] = useState(false);
 	const [mapfixes, setMapfixes] = useState<MapfixInfo[]>([]);
+	const { roles, loading: sessionLoading } = useSession();
 
 	useTitle(map ? `${map.DisplayName}` : 'Loading Map...');
 
@@ -100,26 +101,6 @@ export default function MapDetails() {
 		fetchMapfixes();
 	}, [map]);
 
-	useEffect(() => {
-		async function getRoles() {
-			try {
-				const rolesResponse = await fetch("/api/session/roles");
-				if (rolesResponse.ok) {
-					const rolesData = await rolesResponse.json();
-					setRoles(rolesData.Roles);
-				} else {
-					console.warn(`Failed to fetch roles: ${rolesResponse.status}`);
-					setRoles(RolesConstants.Empty);
-				}
-			} catch (error) {
-				console.warn("Error fetching roles data:", error);
-				setRoles(RolesConstants.Empty);
-			}
-		}
-		getRoles()
-	}, [mapId]);
-	
-	// Use useBatchThumbnails for the map thumbnail
 	const assetIds = map?.ID ? [map.ID] : [];
 	const { thumbnails: thumbnailUrls } = useBatchThumbnails(assetIds);
 
@@ -318,7 +299,7 @@ export default function MapDetails() {
 											</Tooltip>
 										</Box>
 									</Box>
-									{!loading && hasRole(roles,RolesConstants.MapDownload) && (
+									{!loading && !sessionLoading && hasRole(roles,RolesConstants.MapDownload) && (
 										<Box sx={{ display: 'flex', alignItems: 'center' }}>
 											<InsertDriveFileIcon sx={{ mr: 1, color: 'primary.main' }} />
 											<Typography variant="body1">

web/src/app/script-review/page.tsx

@@ -0,0 +1,384 @@
+"use client";
+
+import Webpage from "@/app/_components/webpage";
+import React, { useEffect, useState } from "react";
+import {useTitle} from "@/app/hooks/useTitle";
+import {
+	Box,
+	Button,
+	Container,
+	FormControl,
+	FormControlLabel,
+	FormLabel,
+	Radio,
+	RadioGroup,
+	Typography,
+	Paper,
+	CircularProgress,
+	Alert
+} from "@mui/material";
+import dynamic from "next/dynamic";
+import { DiffEditor } from "@monaco-editor/react";
+import Tabs from '@mui/material/Tabs';
+import Tab from '@mui/material/Tab';
+import Breadcrumbs from '@mui/material/Breadcrumbs';
+import NavigateNextIcon from '@mui/icons-material/NavigateNext';
+import Skeleton from '@mui/material/Skeleton';
+
+const POLICY_OPTIONS = [
+	{ value: 0, label: "None (Unreviewed)" },
+	{ value: 1, label: "Allowed" },
+	{ value: 2, label: "Blocked" },
+	{ value: 3, label: "Delete" },
+	{ value: 4, label: "Replace" },
+];
+
+interface ScriptPolicy {
+	ID: number;
+	FromScriptHash: string;
+	ToScriptID: number;
+	Policy: number;
+}
+
+interface ScriptInfo {
+	ID: number;
+	Name: string;
+	Hash: string;
+	Source: string;
+	ResourceType: number;
+	ResourceID: number;
+}
+
+interface ScriptPolicyUpdateBody {
+	ID: number | null;
+	Policy?: number;
+	ToScriptID?: number;
+}
+
+const MonacoEditor = dynamic(() => import("@monaco-editor/react"), { ssr: false });
+
+export default function ScriptReviewPage() {
+	useTitle("Script Review");
+
+	const [loading, setLoading] = useState(true);
+	const [error, setError] = useState<string | null>(null);
+	const [policy, setPolicy] = useState(0);
+	const [scriptPolicyId, setScriptPolicyId] = useState<number | null>(null);
+	const [scriptSource, setScriptSource] = useState("");
+	const [originalSource, setOriginalSource] = useState("");
+	const [submitting, setSubmitting] = useState(false);
+	const [success, setSuccess] = useState(false);
+	const [scriptPolicies, setScriptPolicies] = useState<ScriptPolicy[]>([]);
+	const [scriptInfos, setScriptInfos] = useState<ScriptInfo[]>([]);
+	const [selectedScript, setSelectedScript] = useState<ScriptInfo | null>(null);
+	const [page, setPage] = useState(1);
+	const [editorTab, setEditorTab] = useState<'edit' | 'diff'>('edit');
+
+	// Extracted fetch logic for reuse
+	const fetchPoliciesAndScripts = React.useCallback(async () => {
+		setLoading(true);
+		setError(null);
+		try {
+			const res = await fetch(`/api/script-policy?Page=${page}&Limit=10&Policy=0`);
+			if (!res.ok) throw new Error(`Failed to fetch script policies: ${res.status}`);
+			const policies: ScriptPolicy[] = await res.json();
+			setScriptPolicies(policies);
+			const scriptFetches = policies.map(async (policy) => {
+				const scriptId = policy.ToScriptID || 0;
+				const id = scriptId || 0;
+				if (id) {
+					const res = await fetch(`/api/scripts/${id}`);
+					if (res.ok) {
+						return await res.json();
+					}
+				}
+				return null;
+			});
+			const infos = (await Promise.all(scriptFetches)).filter(Boolean) as ScriptInfo[];
+			setScriptInfos(infos);
+			if (infos.length > 0) {
+				setSelectedScript(infos[0]);
+				setScriptSource(infos[0].Source || "");
+				setOriginalSource(infos[0].Source || "");
+				const firstPolicy = policies[0];
+				setScriptPolicyId(firstPolicy.ID);
+				setPolicy(firstPolicy.Policy);
+			} else {
+				setSelectedScript(null);
+				setScriptSource("");
+				setOriginalSource("");
+				setScriptPolicyId(null);
+				setPolicy(0);
+			}
+		} catch (err) {
+			setError(err instanceof Error ? err.message : "Failed to load script policies");
+		}
+		setLoading(false);
+	}, [page]);
+
+	useEffect(() => {
+		fetchPoliciesAndScripts();
+	}, [page, fetchPoliciesAndScripts]);
+
+	useEffect(() => {
+		setSelectedScript(null);
+		setScriptSource("");
+		setOriginalSource("");
+		setScriptPolicyId(null);
+		setPolicy(0);
+	}, [page]);
+
+	const handleScriptSelect = (script: ScriptInfo, idx: number) => {
+		setError(null);
+		setSelectedScript(script);
+		setScriptSource(script.Source || "");
+		setOriginalSource(script.Source || "");
+		const policy = scriptPolicies[idx];
+		if (policy) {
+			setScriptPolicyId(policy.ID);
+			setPolicy(policy.Policy);
+		}
+	};
+
+	const handlePolicyChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+		setPolicy(Number(event.target.value));
+	};
+
+	const handleSourceChange = (newSource: string) => {
+		setScriptSource(newSource);
+		if (newSource !== originalSource) {
+			setPolicy(4);
+		} else if (policy === 4) {
+			setPolicy(0);
+		}
+	};
+
+	const handleSubmit = async (e: React.FormEvent) => {
+		e.preventDefault();
+		setSubmitting(true);
+		setError(null);
+		setSuccess(false);
+		try {
+			let toScriptId: number | undefined = undefined;
+			if (policy === 4 && scriptSource !== originalSource && selectedScript) {
+				// Upload new script (deduplication handled on backend)
+				const uploadRes = await fetch("/api/scripts", {
+					method: "POST",
+					headers: { "Content-Type": "application/json" },
+					body: JSON.stringify({
+						Name: selectedScript.Name,
+						Source: scriptSource,
+						ResourceType: selectedScript.ResourceType
+					}),
+				});
+				if (!uploadRes.ok) throw new Error("Failed to upload replacement script");
+				const uploadData = await uploadRes.json();
+				toScriptId = uploadData.ScriptID;
+			}
+			// Update script policy
+			const updateBody: ScriptPolicyUpdateBody = { ID: scriptPolicyId };
+			if (policy !== undefined) updateBody.Policy = policy;
+			if (policy === 4 && toScriptId) updateBody.ToScriptID = toScriptId;
+			const updateRes = await fetch(`/api/script-policy/${scriptPolicyId}`, {
+				method: "POST",
+				headers: { "Content-Type": "application/json" },
+				body: JSON.stringify(updateBody),
+			});
+			if (!updateRes.ok) throw new Error("Failed to update script policy");
+			setSuccess(true);
+			// Refresh the list after successful review
+			await fetchPoliciesAndScripts();
+		} catch (err) {
+			setError(err instanceof Error ? err.message : "Failed to submit review");
+		} finally {
+			setSubmitting(false);
+		}
+	};
+
+	const isSourceChanged = scriptSource !== originalSource;
+	const canSubmit = (policy !== 4 && !isSourceChanged) || (policy === 4 && isSourceChanged);
+
+	return (
+		<Webpage>
+			<Container maxWidth={false} sx={{ py: 4, width: '85vw', maxWidth: '100vw', minWidth: 320, mx: 'auto' }}>
+				<Paper sx={{ p: 3, display: "flex", gap: 3, width: '100%', minWidth: 320, mx: 'auto', boxSizing: 'border-box' }}>
+					<Box sx={{ minWidth: 250, maxWidth: 350 }}>
+						<Typography variant="h6" gutterBottom>Unreviewed Scripts</Typography>
+						{loading ? (
+							<Box component="ul" sx={{ listStyle: "none", p: 0, m: 0 }}>
+								{Array.from({ length: 10 }).map((_, i) => (
+									<li key={i}>
+										<Skeleton variant="rectangular" height={30} sx={{ mb: 1, borderRadius: 1 }} />
+									</li>
+								))}
+							</Box>
+						) : scriptInfos.length === 0 ? (
+							<Typography>No unreviewed scripts found.</Typography>
+						) : (
+							<Box component="ul" sx={{ listStyle: "none", p: 0, m: 0 }}>
+								{scriptInfos.map((script, idx) => {
+		const isSelected = selectedScript?.ID === script.ID;
+		const name = script.Name || String(script.ID);
+		const parts = name.split(".");
+		let crumbs: React.ReactNode[];
+		const crumbTextColor = isSelected ? '#fff' : 'text.primary';
+		if (parts.length <= 2) {
+			crumbs = parts.map((part, i) => (
+				<Typography key={i} color={crumbTextColor} sx={{ fontWeight: isSelected ? 600 : 400, fontSize: 13, maxWidth: 120, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{part}</Typography>
+			));
+		} else {
+			crumbs = [
+				<Typography key={0} color={crumbTextColor} sx={{ fontSize: 13, maxWidth: 120, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{parts[0]}</Typography>,
+				<Typography key="ellipsis" color={isSelected ? '#fff' : 'text.secondary'} sx={{ fontSize: 13 }}>...</Typography>,
+				<Typography key={parts.length-1} color={crumbTextColor} sx={{ fontSize: 13, maxWidth: 120, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{parts[parts.length-1]}</Typography>
+			];
+		}
+		return (
+			<li key={script.ID}>
+				<Button
+					variant={isSelected ? "contained" : "outlined"}
+					fullWidth
+					sx={{
+						mb: 1,
+						textAlign: "left",
+						justifyContent: "flex-start",
+						whiteSpace: 'normal',
+						wordBreak: 'break-all',
+						px: 1,
+						py: 0.5,
+						color: isSelected ? '#fff' : undefined,
+						backgroundColor: isSelected ? '#1976d2' : undefined,
+						border: isSelected ? '1.5px solid #42a5f5' : undefined,
+						'&:hover': isSelected ? { backgroundColor: '#1565c0' } : undefined,
+					}}
+					onClick={() => handleScriptSelect(script, idx)}
+				>
+					<Breadcrumbs separator={<NavigateNextIcon fontSize="small" sx={{ color: isSelected ? '#fff' : 'inherit' }} />} aria-label="breadcrumb" sx={{ p: 0, m: 0 }}>
+						{crumbs}
+					</Breadcrumbs>
+				</Button>
+			</li>
+		);
+	})}
+							</Box>
+						)}
+						{/* Pagination controls */}
+						<Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', mt: 2 }}>
+							<Button
+								variant="outlined"
+								disabled={page === 1 || loading}
+								onClick={() => setPage(page - 1)}
+								sx={{ mr: 1 }}
+							>
+								&#8592;
+							</Button>
+							<Typography sx={{ mx: 2 }}>{`Page ${page}`}</Typography>
+							<Button
+								variant="outlined"
+								disabled={scriptPolicies.length < 10 || loading}
+								onClick={() => setPage(page + 1)}
+							>
+								&#8594;
+							</Button>
+						</Box>
+					</Box>
+					<Box sx={{ flex: 1, overflow: 'hidden' }}>
+						<Typography variant="h6" gutterBottom>Script Review</Typography>
+						{/* Show full script name above Policy */}
+						{selectedScript && (
+			<Typography variant="subtitle1" sx={{ fontWeight: 500, mb: 1, wordBreak: 'break-all' }}>
+				{selectedScript.Name || selectedScript.ID}
+			</Typography>
+		)}
+						{loading ? (
+							<Box sx={{ display: "flex", justifyContent: "center", alignItems: "center", minHeight: 200 }}>
+								<CircularProgress />
+							</Box>
+						) : error ? (
+							<Alert severity="error">{error}</Alert>
+						) : (
+							<form onSubmit={handleSubmit}>
+								<FormControl component="fieldset" sx={{ mb: 0 }}>
+									<FormLabel component="legend">Policy</FormLabel>
+									<RadioGroup row value={policy} onChange={handlePolicyChange}>
+										{POLICY_OPTIONS.map(opt => (
+											<FormControlLabel
+												key={opt.value}
+												value={opt.value}
+												control={<Radio />}
+												label={opt.label}
+												disabled={isSourceChanged && opt.value !== 4}
+											/>
+										))}
+									</RadioGroup>
+								</FormControl>
+								<Box sx={{ mb: 1 }} />
+								<Box sx={{ mb: 1 }}>
+									{policy === 4 && scriptSource !== originalSource ? (
+		<Tabs
+			value={editorTab}
+			onChange={(_, v) => setEditorTab(v)}
+			indicatorColor="primary"
+			textColor="primary"
+			sx={{ mb: 1 }}
+		>
+			<Tab label="Editor" value="edit" />
+			<Tab label="Diff" value="diff" />
+		</Tabs>
+	) : null}
+	{(policy !== 4 || scriptSource === originalSource || editorTab === 'edit') && (
+		<MonacoEditor
+			height="60vh"
+			defaultLanguage="lua"
+			value={scriptSource}
+			onChange={v => handleSourceChange(v ?? "")}
+			options={{
+				fontFamily: "monospace",
+				fontSize: 14,
+				minimap: { enabled: false },
+				wordWrap: "off",
+				lineNumbers: "on",
+				readOnly: false,
+				scrollbar: { vertical: 'visible', horizontal: 'auto' },
+				automaticLayout: true
+			}}
+			theme="vs-dark"
+		/>
+	)}
+	{policy === 4 && scriptSource !== originalSource && editorTab === 'diff' && (
+		<Box sx={{ height: '60vh', minHeight: 150 }}>
+			<DiffEditor
+				height="100%"
+				original={originalSource}
+				modified={scriptSource}
+				language="lua"
+				theme="vs-dark"
+				options={{
+					readOnly: true,
+					renderSideBySide: true,
+					minimap: { enabled: false },
+					automaticLayout: true,
+				}}
+			/>
+		</Box>
+	)}
+								</Box>
+								<Button
+									type="submit"
+									variant="contained"
+									color="primary"
+									disabled={!canSubmit || submitting}
+									fullWidth
+									sx={{ mt: 2 }}
+								>
+									{submitting ? <CircularProgress size={24} /> : "Submit Review"}
+								</Button>
+								{success && <Alert severity="success" sx={{ mt: 2 }}>Review submitted successfully!</Alert>}
+							</form>
+						)}
+					</Box>
+				</Paper>
+			</Container>
+		</Webpage>
+	);
+}