Add before/after image, cleanup submission references in mapfix

web/src/app/mapfixes/[mapfixId]/page.tsx

@@ -36,7 +36,7 @@ interface SnackbarState {
 	severity: 'success' | 'error' | 'info' | 'warning';
 }
 
-export default function SubmissionDetailsPage() {
+export default function MapfixDetailsPage() {
 	const { mapfixId } = useParams<{ mapfixId: string }>();
 	const router = useRouter();
 
@@ -47,6 +47,7 @@ export default function SubmissionDetailsPage() {
 	const [newComment, setNewComment] = useState("");
 	const [user, setUser] = useState<number|null>(null);
 	const [roles, setRoles] = useState<Roles>(RolesConstants.Empty);
+	const [showBeforeImage, setShowBeforeImage] = useState(false);
 	const [snackbar, setSnackbar] = useState<SnackbarState>({
 		open: false,
 		message: null,
@@ -78,7 +79,7 @@ export default function SubmissionDetailsPage() {
 
 			const [mapfixData, auditData, rolesData, userData] = await Promise.all([
 				fetch(`/api/mapfixes/${mapfixId}`).then(res => {
-					if (!res.ok) throw new Error(`Failed to fetch submission: ${res.status}`);
+					if (!res.ok) throw new Error(`Failed to fetch mapfix: ${res.status}`);
 					return res.json();
 				}),
 				fetch(`/api/mapfixes/${mapfixId}/audit-events?Page=1&Limit=100`).then(res => {
@@ -109,7 +110,7 @@ export default function SubmissionDetailsPage() {
 		}
 	}
 
-	// Fetch submission data and audit events
+	// Fetch mapfix data and audit events
 	useEffect(() => {
 		fetchData();
 	}, [mapfixId]);
@@ -246,29 +247,131 @@ export default function SubmissionDetailsPage() {
 					{/* Left Column - Image and Action Buttons */}
 					<Grid item xs={12} md={4}>
 						<Paper elevation={3} sx={{ borderRadius: 2, overflow: 'hidden', mb: 3 }}>
-							{mapfix.AssetID ? (
-								<CardMedia
-									component="img"
-									image={`/thumbnails/asset/${mapfix.AssetID}`}
-									alt="Map Thumbnail"
-									sx={{ width: '100%', aspectRatio: '1/1', objectFit: 'cover' }}
-								/>
-							) : (
-								<Box
-									sx={{
-										width: '100%',
-										aspectRatio: '1/1',
-										bgcolor: 'grey.200',
-										display: 'flex',
-										alignItems: 'center',
-										justifyContent: 'center'
-									}}
-								>
-									<Typography variant="body2" color="text.secondary">No image available</Typography>
+							<Box sx={{ position: 'relative', width: '100%', aspectRatio: '1/1' }}>
+								{/* Before/After Images Container */}
+								<Box sx={{ position: 'relative', width: '100%', height: '100%' }}>
+									{/* Before Image */}
+									<Box
+										sx={{
+											position: 'absolute',
+											top: 0,
+											left: 0,
+											width: '100%',
+											height: '100%',
+											zIndex: 1,
+											opacity: showBeforeImage ? 1 : 0,
+											transition: 'opacity 0.5s ease-in-out'
+										}}
+									>
+										<CardMedia
+											component="img"
+											image={`/thumbnails/asset/${mapfix.TargetAssetID}`}
+											alt="Before Map Thumbnail"
+											sx={{ width: '100%', height: '100%', objectFit: 'cover' }}
+										/>
+									</Box>
+
+									{/* After Image */}
+									<Box
+										sx={{
+											position: 'absolute',
+											top: 0,
+											left: 0,
+											width: '100%',
+											height: '100%',
+											zIndex: 0,
+											opacity: showBeforeImage ? 0 : 1,
+											transition: 'opacity 0.5s ease-in-out'
+										}}
+									>
+										<CardMedia
+											component="img"
+											image={`/thumbnails/asset/${mapfix.AssetID}`}
+											alt="After Map Thumbnail"
+											sx={{ width: '100%', height: '100%', objectFit: 'cover' }}
+										/>
+									</Box>
+									<Box
+										sx={{
+											position: 'absolute',
+											top: 16,
+											left: 16,
+											zIndex: 2,
+											bgcolor: 'rgba(0,0,0,0.65)',
+											color: 'white',
+											padding: '6px 12px',
+											borderRadius: 3,
+											backdropFilter: 'blur(4px)',
+											boxShadow: '0 2px 10px rgba(0,0,0,0.2)',
+											display: 'flex',
+											alignItems: 'center',
+											gap: 0.8,
+											transition: 'transform 0.3s ease-out',
+											transform: showBeforeImage ? 'translateY(0)' : 'translateY(0)',
+										}}
+									>
+										{showBeforeImage ? (
+											<>
+												<Typography variant="subtitle2" component="span" sx={{ fontWeight: 600 }}>
+													BEFORE
+												</Typography>
+											</>
+										) : (
+											<>
+												<Typography variant="subtitle2" component="span" sx={{ fontWeight: 600 }}>
+													AFTER
+												</Typography>
+											</>
+										)}
+									</Box>
+
+									<Box
+										sx={{
+											position: 'absolute',
+											bottom: 16,
+											left: '50%',
+											transform: 'translateX(-50%)',
+											zIndex: 2,
+											display: 'flex',
+											flexDirection: 'column',
+											alignItems: 'center',
+											gap: 1,
+										}}
+									>
+										<Typography
+											variant="caption"
+											sx={{
+												color: 'white',
+												bgcolor: 'rgba(0,0,0,0.4)',
+												padding: '2px 8px',
+												borderRadius: 1,
+												backdropFilter: 'blur(2px)',
+											}}
+										>
+											Click to compare
+										</Typography>
+									</Box>
+
+									<Box
+										sx={{
+											position: 'absolute',
+											top: 0,
+											left: 0,
+											width: '100%',
+											height: '100%',
+											zIndex: 3,
+											cursor: 'pointer',
+											'&:hover': {
+												background: 'linear-gradient(rgba(0,0,0,0.02), rgba(0,0,0,0.05))',
+											},
+										}}
+										onClick={() => setShowBeforeImage(!showBeforeImage)}
+									/>
 								</Box>
-							)}
+							</Box>
 						</Paper>
 
+
 						{/* Review Buttons */}
 						<ReviewButtons
 							onClick={handleReviewAction}
@@ -277,7 +380,7 @@ export default function SubmissionDetailsPage() {
 							roles={roles}/>
 					</Grid>
 
-					{/* Right Column - Submission Details and Comments */}
+					{/* Right Column - Mapfix Details and Comments */}
 					<Grid item xs={12} md={8}>
 						<ReviewItem
 							item={mapfix}

web/src/app/mapfixes/page.tsx

@@ -101,18 +101,18 @@ export default function MapfixInfoPage() {
 							width: '100%',
 						}}
 					>
-						{mapfixes.Mapfixes.map((submission) => (
+						{mapfixes.Mapfixes.map((mapfix) => (
 							<MapCard
-								key={submission.ID}
-								id={submission.ID}
-								assetId={submission.AssetID}
-								displayName={submission.DisplayName}
-								author={submission.Creator}
-								authorId={submission.Submitter}
-								rating={submission.StatusID}
-								statusID={submission.StatusID}
-								gameID={submission.GameID}
-								created={submission.CreatedAt}
+								key={mapfix.ID}
+								id={mapfix.ID}
+								assetId={mapfix.AssetID}
+								displayName={mapfix.DisplayName}
+								author={mapfix.Creator}
+								authorId={mapfix.Submitter}
+								rating={mapfix.StatusID}
+								statusID={mapfix.StatusID}
+								gameID={mapfix.GameID}
+								created={mapfix.CreatedAt}
 								type="mapfix"
 							/>
 						))}