src/app/api/management/request/route.ts

@@ -9,6 +9,8 @@ export async function POST(req: Request) {
         requestType,
         requestingUser: { connect: { id: requestingUserId } },
         outcome: "IN_PROGRESS",
+        // Optionally you can connect to Scientist via an inline relation if you have a foreign key
+        // If the model has comment or details fields, add it!
       },
     });
     return NextResponse.json({ request }, { status: 201 });

src/app/api/update-user/route.ts

@@ -13,7 +13,8 @@ export async function POST(req: Request) {
 		if ("user" in authResult === false) return authResult;
 
 		const { user } = authResult;
-		const { userId, email, name, password, requestedRole } = await req.json();
+		// todo handle requestedRole
+		const { userId, email, name, password } = await req.json();
 
 		// Trying to update a different user than themselves
 		// Only available to admins
@@ -57,12 +58,6 @@ export async function POST(req: Request) {
 			passwordHash = await bcryptjs.hash(password, 10);
 		}
 
-		if (requestedRole && ["GUEST", "SCIENTIST", "ADMIN"].includes(requestedRole) && requestedRole !== user.role) {
-			await prisma.request.create({
-				data: { requestType: requestedRole, requestingUserId: userId || user.id },
-			});
-		}
-
 		const updatedUser = await prisma.user.update({
 			where: { id: userId || user.id },
 			data: {

src/app/earthquakes/page.tsx

@@ -11,6 +11,28 @@ import EarthquakeSearchModal from "@components/EarthquakeSearchModal";
 import EarthquakeLogModal from "@components/EarthquakeLogModal"; // If you use a separate log modal
 import { useStoreState } from "@hooks/store";
 
+// Optional: "No Access Modal" - as in your original
+function NoAccessModal({ open, onClose }) {
+	if (!open) return null;
+	return (
+		<div className="fixed z-50 inset-0 bg-black/40 flex items-center justify-center">
+			<div className="bg-white rounded-lg shadow-lg p-8 max-w-xs w-full text-center relative">
+				<button onClick={onClose} className="absolute right-4 top-4 text-gray-500 hover:text-black text-lg" aria-label="Close">
+					&times;
+				</button>
+				<h2 className="font-bold text-xl mb-4">Access Denied</h2>
+				<p className="text-gray-600 mb-3">
+					Sorry, you do not have access rights to Log an Earthquake. Please Log in here, or contact an Admin if you believe this
+					is a mistake
+				</p>
+				<button onClick={onClose} className="bg-blue-600 text-white px-6 py-2 rounded hover:bg-blue-700 mt-2">
+					OK
+				</button>
+			</div>
+		</div>
+	);
+}
+
 export default function Earthquakes() {
 	const [selectedEventId, setSelectedEventId] = useState("");
 	const [hoveredEventId, setHoveredEventId] = useState("");
@@ -18,9 +40,12 @@ export default function Earthquakes() {
 	const [logModalOpen, setLogModalOpen] = useState(false);
 	const [noAccessModalOpen, setNoAccessModalOpen] = useState(false);
 
+	// Your user/role logic
 	const user = useStoreState((state) => state.user);
-	const canLogEarthquake = user?.role === "SCIENTIST" || user?.role === "ADMIN";
+	const role: "GUEST" | "SCIENTIST" | "ADMIN" = user?.role ?? "GUEST";
+	const canLogEarthquake = role === "SCIENTIST" || role === "ADMIN";
 
+	// Fetch earthquakes (10 days recent)
 	const { data, error, isLoading, mutate } = useSWR("/api/earthquakes", createPoster({ rangeDaysPrev: 10 }));
 
 	// Shape for Map/Sidebar
@@ -55,27 +80,6 @@ export default function Earthquakes() {
 		}
 	};
 
-	function NoAccessModal({ open, onClose }: { open: typeof noAccessModalOpen; onClose: () => void }) {
-		if (!open) return null;
-		return (
-			<div className="fixed z-50 inset-0 bg-black/40 flex items-center justify-center">
-				<div className="bg-white rounded-lg shadow-lg p-8 max-w-xs w-full text-center relative">
-					<button onClick={onClose} className="absolute right-4 top-4 text-gray-500 hover:text-black text-lg" aria-label="Close">
-						&times;
-					</button>
-					<h2 className="font-bold text-xl mb-4">Access Denied</h2>
-					<p className="text-gray-600 mb-3">
-						Sorry, you do not have access rights to Log an Earthquake. Please Log in here, or contact an Admin if you believe this
-						is a mistake
-					</p>
-					<button onClick={onClose} className="bg-blue-600 text-white px-6 py-2 rounded hover:bg-blue-700 mt-2">
-						OK
-					</button>
-				</div>
-			</div>
-		);
-	}
-
 	return (
 		<div className="flex h-[calc(100vh-3.5rem)] w-full overflow-hidden">
 			<div className="flex-grow h-full">
@@ -103,12 +107,15 @@ export default function Earthquakes() {
 				onButton2Click={() => setSearchModalOpen(true)}
 				button1Disabled={!canLogEarthquake}
 			/>
+			{/* ---- SEARCH MODAL ---- */}
 			<EarthquakeSearchModal
 				open={searchModalOpen}
 				onClose={() => setSearchModalOpen(false)}
 				onSelect={(eq) => setSelectedEventId(eq.code)}
 			/>
+			{/* ---- LOGGING MODAL ---- */}
 			<EarthquakeLogModal open={logModalOpen} onClose={() => setLogModalOpen(false)} onSuccess={() => mutate()} />
+			{/* ---- NO ACCESS ---- */}
 			<NoAccessModal open={noAccessModalOpen} onClose={() => setNoAccessModalOpen(false)} />
 		</div>
 	);

src/app/profile/page.tsx

@@ -229,7 +229,6 @@ export default function Profile() {
 			}
 			setIsDeleting(true);
 			try {
-				// todo add delete user route
 				const res = await axios.post(
 					"/api/delete-user",
 					{ userId: user!.id },

src/app/shop/page.tsx

@@ -1,43 +1,41 @@
 "use client";
 import Image from "next/image";
-import { Dispatch, SetStateAction, useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 
 import { ExtendedArtefact } from "@appTypes/ApiTypes";
 import { Currency } from "@appTypes/StoreModel";
 import BottomFooter from "@components/BottomFooter";
 import { useStoreState } from "@hooks/store";
 
-interface SuperExtendedArtefact extends ExtendedArtefact {
-	location: string;
-	dateReleased: string;
-	image: string;
-	price: number;
-}
-
 export default function Shop() {
-	const [artefacts, setArtefacts] = useState<SuperExtendedArtefact[]>([]);
+	const [artefacts, setArtefacts] = useState<ExtendedArtefact[]>([]);
 	const [hiddenArtefactIds, setHiddenArtefactIds] = useState<number[]>([]);
 	const [loading, setLoading] = useState(true);
+
+	const [cart, setCart] = useState<ExtendedArtefact[]>([]);
+	const [showCartModal, setShowCartModal] = useState(false);
+
 	const user = useStoreState((state) => state.user);
 
-	// 3. Fetch from your API route and map data to fit your existing fields
 	useEffect(() => {
 		async function fetchArtefacts() {
 			setLoading(true);
 			try {
 				const res = await fetch("/api/artefacts");
-				const data: { artefact: ExtendedArtefact[] } = await res.json();
+				const data = await res.json();
-
+				const transformed = data.artefact.map((a: any) => ({
-				const transformed = data.artefact.map((a) => ({
+					id: a.id,
-					...a,
+					name: a.name,
-					location: a.warehouseArea, // your database
+					description: a.description,
+					location: a.warehouseArea,
+					earthquakeID: a.earthquakeId?.toString() ?? "",
+					observatory: a.type ?? "",
 					dateReleased: a.createdAt ? new Date(a.createdAt).toLocaleDateString() : "",
 					image: "/artefactImages/" + (a.imageName || "NoImageFound.PNG"),
-					price: a.shopPrice ?? 100, // fallback price if not in DB
+					price: a.shopPrice ?? 100,
 				}));
 				setArtefacts(transformed);
 			} catch (e) {
-				// Optionally handle error
 				console.error("Failed to fetch artefacts", e);
 			} finally {
 				setLoading(false);
@@ -47,9 +45,10 @@ export default function Shop() {
 	}, []);
 
 	const [currentPage, setCurrentPage] = useState(1);
-	const [selectedArtefact, setSelectedArtefact] = useState<SuperExtendedArtefact | null>(null);
+	const [selectedArtefact, setSelectedArtefact] = useState<ExtendedArtefact | null>(null);
 	const [showPaymentModal, setShowPaymentModal] = useState(false);
-	const [artefactToBuy, setArtefactToBuy] = useState<SuperExtendedArtefact | null>(null);
+	const [artefactToBuy, setArtefactToBuy] = useState<ExtendedArtefact | null>(null);
+	const [cartCheckout, setCartCheckout] = useState(false); // true = checkout cart (not single artefact)
 	const [showThankYouModal, setShowThankYouModal] = useState(false);
 	const [orderNumber, setOrderNumber] = useState<string | null>(null);
 
@@ -74,7 +73,7 @@ export default function Shop() {
 		if (currentPage > 1) setCurrentPage((prev) => prev - 1);
 	};
 
-	function ArtefactCard({ artefact }: { artefact: SuperExtendedArtefact }) {
+	function ArtefactCard({ artefact }: { artefact: ExtendedArtefact }) {
 		return (
 			<div
 				className="flex flex-col bg-white shadow-md rounded-md overflow-hidden cursor-pointer hover:scale-105 transition-transform"
@@ -84,7 +83,7 @@ export default function Shop() {
 				<div className="p-4">
 					<h3 className="text-lg font-semibold">{artefact.name}</h3>
 					<p className="text-neutral-500 mb-2">{artefact.location}</p>
-					<p className="text-neutral-500 mb-2">{artefact.earthquakeCode}</p>
+					<p className="text-neutral-500 mb-2">{artefact.earthquakeID}</p>
 					<p className="text-black font-bold text-md mt-2">
 						{currencyTickers[selectedCurrency]}
 						{convertPrice(artefact.price, selectedCurrency)}
@@ -93,11 +92,14 @@ export default function Shop() {
 			</div>
 		);
 	}
-	function Modal({ artefact }: { artefact: SuperExtendedArtefact }) {
+
+	function Modal({ artefact }: { artefact: ExtendedArtefact }) {
 		if (!artefact) return null;
 		const handleOverlayClick = (e: React.MouseEvent) => {
 			if (e.target === e.currentTarget) setSelectedArtefact(null);
 		};
+		const inCart = cart.some((a) => a.id === artefact.id);
+
 		return (
 			<div
 				className="fixed inset-0 bg-neutral-900 bg-opacity-50 flex justify-center items-center z-50"
@@ -118,19 +120,35 @@ export default function Shop() {
 					</p>
 					<p className="text-neutral-600 mt-2">{artefact.description}</p>
 					<p className="text-neutral-500 font-bold mt-1">Location: {artefact.location}</p>
-					<p className="text-neutral-500 mb-2">{artefact.earthquakeCode}</p>
+					<p className="text-neutral-500 mb-2">{artefact.earthquakeID}</p>
-					<p className="text-neutral-500 mb-2">{artefact.type}</p>
+					<p className="text-neutral-500 mb-2">{artefact.observatory}</p>
 					<p className="text-neutral-500 mb-2">{artefact.dateReleased}</p>
-					<div className="flex justify-end gap-4 mt-4 mr-2">
+					<div className="flex flex-col sm:flex-row justify-end gap-4 mt-4 mr-2">
 						<button
 							onClick={() => {
-								setArtefactToBuy(artefact); // Set artefact for payment modal
+								if (!inCart) setCart((cart) => [...cart, artefact]);
-								setShowPaymentModal(true); // Show payment modal
-								setSelectedArtefact(null); // Close this modal
 							}}
-							className="px-10 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
+							disabled={inCart}
+							className={`px-6 py-2 rounded-md font-bold border 
+                                ${
+																	inCart
+																		? "bg-gray-300 text-gray-400 cursor-not-allowed"
+																		: "bg-green-500 hover:bg-green-600 text-white"
+																}
+                            `}
 						>
-							Buy
+							{inCart ? "In Cart" : "Add to Cart"}
+						</button>
+						<button
+							onClick={() => {
+								setArtefactToBuy(artefact);
+								setShowPaymentModal(true);
+								setCartCheckout(false);
+								setSelectedArtefact(null);
+							}}
+							className="px-8 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
+						>
+							Buy Now
 						</button>
 					</div>
 				</div>
@@ -138,15 +156,99 @@ export default function Shop() {
 		);
 	}
 
-	function PaymentModal({ artefact, onClose }: { artefact: SuperExtendedArtefact; onClose: () => void }) {
+	function CartModal() {
+		const total = cart.reduce((sum, art) => sum + art.price, 0);
+
+		const handleOverlayClick = (e: React.MouseEvent) => {
+			if (e.target === e.currentTarget) setShowCartModal(false);
+		};
+
+		return (
+			<div
+				className="fixed inset-0 bg-neutral-900 bg-opacity-60 flex justify-center items-center z-[999]"
+				onClick={handleOverlayClick}
+			>
+				<div className="bg-white rounded-xl shadow-2xl max-w-2xl w-full p-8">
+					<div className="flex justify-between items-center mb-4">
+						<h2 className="text-2xl font-bold">Your Cart</h2>
+						<button onClick={() => setShowCartModal(false)} className="text-xl font-bold px-2 py-1 rounded">
+							✖
+						</button>
+					</div>
+					{cart.length === 0 ? (
+						<p className="text-neutral-500">Your cart is empty.</p>
+					) : (
+						<>
+							<ul className="mb-4">
+								{cart.map((art) => (
+									<li key={art.id} className="flex items-center border-b py-2">
+										<div className="flex-shrink-0 mr-3">
+											<Image src={art.image} alt={art.name} width={60} height={40} className="rounded" />
+										</div>
+										<div className="flex-grow">
+											<p className="font-bold">{art.name}</p>
+											<p className="text-neutral-500 text-sm">{art.location}</p>
+										</div>
+										<p className="font-bold mr-2">
+											{currencyTickers[selectedCurrency]}
+											{convertPrice(art.price, selectedCurrency)}
+										</p>
+										<button
+											className="px-3 py-1 bg-red-400 hover:bg-red-500 text-white rounded"
+											onClick={() => setCart((c) => c.filter((a) => a.id !== art.id))}
+										>
+											Remove
+										</button>
+									</li>
+								))}
+							</ul>
+							<div className="flex justify-between items-center mb-2">
+								<span className="font-bold">Total:</span>
+								<span className="text-lg font-bold">
+									{currencyTickers[selectedCurrency]}
+									{convertPrice(total, selectedCurrency)}
+								</span>
+							</div>
+							<div className="text-right">
+								<button
+									className="px-8 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
+									onClick={() => {
+										setShowCartModal(false);
+										setArtefactToBuy(null);
+										setShowPaymentModal(true);
+										setCartCheckout(true);
+									}}
+								>
+									Checkout
+								</button>
+							</div>
+						</>
+					)}
+				</div>
+			</div>
+		);
+	}
+
+	function PaymentModal({
+		artefact,
+		onClose,
+		cartItems,
+	}: {
+		artefact?: ExtendedArtefact;
+		onClose: () => void;
+		cartItems?: ExtendedArtefact[];
+	}) {
 		const [cardNumber, setCardNumber] = useState("");
 		const [expiry, setExpiry] = useState("");
 		const [cvc, setCvc] = useState("");
 		const [name, setName] = useState("");
-		const [email, setEmail] = useState("");
+		const [email, setEmail] = useState(user?.email || "");
 		const [remember, setRemember] = useState(false);
 		const [error, setError] = useState("");
 
+		const artefactsToBuy = artefact ? [artefact] : cartItems || [];
+		const total = artefactsToBuy.reduce((sum, art) => sum + art.price, 0);
+
 		function validateEmail(email: string) {
 			return (
 				email.includes("@") &&
@@ -162,18 +264,13 @@ export default function Shop() {
 		function validateExpiry(exp: string) {
 			return /^\d{2}\/\d{2}$/.test(exp);
 		}
-
 		function handlePay() {
 			setError("");
-			if (email || user?.email) {
+			const paymentEmail = user?.email || email;
-				if (!validateEmail(email)) {
+			if (!validateEmail(paymentEmail)) {
-					setError("Please enter a valid email ending");
+				setError("Please enter a valid email");
 				return;
 			}
-			} else {
-				return;
-			}
-
 			if (!validateCardNumber(cardNumber)) {
 				setError("Card number must be 12-19 digits.");
 				return;
@@ -186,44 +283,51 @@ export default function Shop() {
 				setError("CVC must be 3 or 4 digits.");
 				return;
 			}
-
+			// remove all artefacts that were bought (works for both cart and single)
-			setHiddenArtefactIds((ids) => [...ids, artefact.id]);
+			setHiddenArtefactIds((ids) => [...ids, ...artefactsToBuy.map((a) => a.id)]);
-
+			// todo create receiving api route
-			// todo!! create receiving api route
+			// todo handle sending to api route
-			// todo!! handle sending to api route
 			const genOrder = () => "#" + Math.random().toString(36).substring(2, 10).toUpperCase();
 			setOrderNumber(genOrder());
 			onClose();
 			setShowThankYouModal(true);
+			setCart((c) => c.filter((a) => !artefactsToBuy.map((x) => x.id).includes(a.id)));
 		}
 		const handleOverlayClick = (e: React.MouseEvent) => {
 			if (e.target === e.currentTarget) onClose();
 		};
 		return (
 			<div
-				className="fixed inset-0 bg-neutral-900 bg-opacity-60 flex justify-center items-center z-10"
+				className="fixed inset-0 bg-neutral-900 bg-opacity-60 flex justify-center items-center z-[12000]"
 				onClick={handleOverlayClick}
 			>
 				<div className="bg-white rounded-xl shadow-2xl max-w-md w-full p-6">
-					<h2 className="text-2xl font-bold mb-4">Buy {artefact.name}</h2>
+					<h2 className="text-2xl font-bold mb-4">
-					{/* ...Image... */}
+						Checkout {artefact ? artefact.name : artefactsToBuy.length + " item(s)"}
+						{!artefact && <span className="ml-1">({artefactsToBuy.map((x) => x.name).join(", ")})</span>}
+					</h2>
 					<form
 						onSubmit={(e) => {
 							e.preventDefault();
 							handlePay();
 						}}
 					>
-						{!user ? (
+						{/* Email autofill */}
 						<input
 							className="w-full mb-2 px-3 py-2 border rounded"
 							placeholder="Email Address"
-								value={email}
+							value={user?.email ? user.email : email}
 							onChange={(e) => setEmail(e.target.value)}
 							type="email"
 							required
 							autoFocus
+							disabled={!!user?.email}
 						/>
-						) : null}
+						{user?.email && (
+							<p className="text-sm text-gray-500 mb-2">
+								Signed in as <span className="font-bold">{user.email}</span>
+							</p>
+						)}
 						<input
 							className="w-full mb-2 px-3 py-2 border rounded"
 							placeholder="Cardholder Name"
@@ -266,6 +370,13 @@ export default function Shop() {
 							Remember me
 						</label>
 						{error && <p className="text-red-600 mb-2">{error}</p>}
+						<div className="flex justify-between items-center mb-2">
+							<span className="font-bold">Total:</span>
+							<span className="text-lg font-bold">
+								{currencyTickers[selectedCurrency]}
+								{convertPrice(total, selectedCurrency)}
+							</span>
+						</div>
 						<div className="flex justify-end gap-2 mt-2">
 							<button type="button" onClick={onClose} className="px-4 py-2 bg-gray-300 text-gray-700 rounded-md mr-2">
 								Cancel
@@ -310,6 +421,28 @@ export default function Shop() {
 			}}
 		>
 			<div className="absolute inset-0 bg-black bg-opacity-0 z-0"></div>
+			{/* --- Cart Button fixed at top right --- */}
+			<button
+				className="absolute top-6 right-6 z-[11000] bg-white border border-blue-500 shadow-lg rounded-full p-3 hover:bg-blue-100 flex flex-row items-center"
+				onClick={() => setShowCartModal(true)}
+				aria-label="Open your cart"
+			>
+				<span className="mr-2 font-bold">{cart.length || ""}</span>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					className="w-7 h-7 text-blue-600"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke="currentColor"
+				>
+					<path
+						strokeLinecap="round"
+						strokeLinejoin="round"
+						strokeWidth={2}
+						d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13l-1.35 2.7a1 1 0 00.9 1.45h12.2M7 13l1.2-2.4M3 3l.01 0"
+					/>
+				</svg>
+			</button>
 			<div className="relative z-10 flex flex-col items-center w-full px-2 py-12">
 				<h1 className="text-4xl md:text-4xl font-bold text-center text-blue-300 mb-2 tracking-tight drop-shadow-lg">
 					Artefact Shop
@@ -320,7 +453,7 @@ export default function Shop() {
 				</p>
 				<div className="w-full max-w-7xl grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-10 p-2">
 					{currentArtefacts
-						.filter((x) => !hiddenArtefactIds.includes(x.id) && x.isRequired === false)
+						.filter((x) => !hiddenArtefactIds.includes(x.id))
 						.map((artefact) => (
 							<ArtefactCard key={artefact.id} artefact={artefact} />
 						))}
@@ -348,19 +481,22 @@ export default function Shop() {
 				</footer>
 			</div>
 			{selectedArtefact && <Modal artefact={selectedArtefact} />}
-			{artefactToBuy && showPaymentModal && (
+			{showCartModal && <CartModal />}
+			{showPaymentModal && (cartCheckout || artefactToBuy) && (
 				<PaymentModal
-					artefact={artefactToBuy}
+					artefact={cartCheckout ? undefined : artefactToBuy!}
+					cartItems={cartCheckout ? cart : undefined}
 					onClose={() => {
 						setShowPaymentModal(false);
 						setArtefactToBuy(null);
+						setCartCheckout(false);
 					}}
 				/>
 			)}
 			{showThankYouModal && orderNumber && (
 				<ThankYouModal orderNumber={orderNumber} onClose={() => setShowThankYouModal(false)} />
 			)}
-			{!selectedArtefact && !showPaymentModal && !showThankYouModal && (
+			{!selectedArtefact && !showPaymentModal && !showThankYouModal && !showCartModal && (
 				<div className="relative z-50">
 					<BottomFooter />
 				</div>

src/app/warehouse/page.tsx

@@ -95,7 +95,6 @@ function LogModal({ onClose }: { onClose: () => void }) {
 		}
 		setIsSubmitting(true);
 		try {
-			// todo!! add log api route
 			await new Promise((resolve) => setTimeout(resolve, 500)); // Simulated API call
 			alert(`Logged ${name} to storage: ${storageLocation}`);
 			onClose();

src/components/EarthquakeLogModal.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { FormEvent, useState, useRef } from "react";
+import { useState } from "react";
 import DatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
 
@@ -7,18 +7,10 @@ const typeOptions = [
   { value: "volcanic", label: "Volcanic" },
   { value: "tectonic", label: "Tectonic" },
   { value: "collapse", label: "Collapse" },
-	{ value: "explosion", label: "Explosion" },
+  { value: "explosion", label: "Explosion" }
 ];
 
-export default function EarthquakeLogModal({
+export default function EarthquakeLogModal({ open, onClose, onSuccess }) {
-	open,
-	onClose,
-	onSuccess,
-}: {
-	open: boolean;
-	onClose: () => void;
-	onSuccess: () => void;
-}) {
   const [date, setDate] = useState<Date | null>(new Date());
   const [magnitude, setMagnitude] = useState("");
   const [type, setType] = useState(typeOptions[0].value);
@@ -29,14 +21,15 @@ export default function EarthquakeLogModal({
   const [depth, setDepth] = useState("");
   const [loading, setLoading] = useState(false);
   const [successCode, setSuccessCode] = useState<string | null>(null);
-	const modalRef = useRef<HTMLDivElement>(null);
 
   async function handleLatLonChange(lat: string, lon: string) {
     setLatitude(lat);
     setLongitude(lon);
     if (/^-?\d+(\.\d+)?$/.test(lat) && /^-?\d+(\.\d+)?$/.test(lon)) {
       try {
-				const resp = await fetch(`https://nominatim.openstreetmap.org/reverse?lat=${lat}&lon=${lon}&format=json&zoom=10`);
+        const resp = await fetch(
+          `https://nominatim.openstreetmap.org/reverse?lat=${lat}&lon=${lon}&format=json&zoom=10`
+        );
         if (resp.ok) {
           const data = await resp.json();
           setCity(
@@ -56,7 +49,7 @@ export default function EarthquakeLogModal({
     }
   }
 
-	async function handleSubmit(e: FormEvent) {
+  async function handleSubmit(e) {
     e.preventDefault();
     setLoading(true);
     if (!date || !magnitude || !type || !city || !country || !latitude || !longitude || !depth) {
@@ -76,8 +69,8 @@ export default function EarthquakeLogModal({
           country: country.trim(),
           latitude: parseFloat(latitude),
           longitude: parseFloat(longitude),
-					depth,
+          depth
-				}),
+        })
       });
       if (res.ok) {
         const result = await res.json();
@@ -95,19 +88,13 @@ export default function EarthquakeLogModal({
     }
   }
 
-	function handleOutsideClick(e: React.MouseEvent<HTMLDivElement>) {
-		if (modalRef.current && !modalRef.current.contains(e.target as Node)) {
-			onClose();
-		}
-	}
-
   if (!open) return null;
 
   // Success popup overlay
   if (successCode) {
     return (
-			<div className="fixed z-50 inset-0 bg-black/40 flex items-center justify-center" onClick={handleOutsideClick}>
+      <div className="fixed z-50 inset-0 bg-black/40 flex items-center justify-center">
-				<div className="bg-white rounded-lg px-8 py-8 max-w-md w-full relative shadow-lg" ref={modalRef}>
+        <div className="bg-white rounded-lg px-8 py-8 max-w-md w-full relative shadow-lg">
           <button
             onClick={() => {
               setSuccessCode(null);
@@ -116,10 +103,12 @@ export default function EarthquakeLogModal({
             className="absolute right-4 top-4 text-xl text-gray-400 hover:text-gray-700"
             aria-label="Close"
           >
-						×
+            &times;
           </button>
           <div className="text-center">
-						<h2 className="text-xl font-semibold mb-3">Thank you for logging an earthquake!</h2>
+            <h2 className="text-xl font-semibold mb-3">
+              Thank you for logging an earthquake!
+            </h2>
             <div className="mb-0">The Earthquake Identifier is</div>
             <div className="font-mono text-lg mb-4 bg-slate-100 rounded px-2 py-1 inline-block text-blue-800">{successCode}</div>
           </div>
@@ -129,10 +118,13 @@ export default function EarthquakeLogModal({
   }
 
   return (
-		<div className="fixed z-50 inset-0 bg-black/40 flex items-center justify-center" onClick={handleOutsideClick}>
+    <div className="fixed z-50 inset-0 bg-black/40 flex items-center justify-center">
-			<div className="bg-white rounded-lg shadow-lg p-6 max-w-lg w-full relative" ref={modalRef}>
+      <div className="bg-white rounded-lg shadow-lg p-6 max-w-lg w-full relative">
-				<button onClick={onClose} className="absolute right-4 top-4 text-gray-500 hover:text-black text-lg">
+        <button
-					×
+          onClick={onClose}
+          className="absolute right-4 top-4 text-gray-500 hover:text-black text-lg"
+        >
+          &times;
         </button>
         <h2 className="font-bold text-xl mb-4">Log Earthquake</h2>
         <form onSubmit={handleSubmit} className="space-y-3">
@@ -140,7 +132,7 @@ export default function EarthquakeLogModal({
             <label className="block text-sm font-medium">Date</label>
             <DatePicker
               selected={date}
-							onChange={(date) => setDate(date)}
+              onChange={date => setDate(date)}
               className="border rounded px-3 py-2 w-full"
               dateFormat="yyyy-MM-dd"
               maxDate={new Date()}
@@ -159,7 +151,7 @@ export default function EarthquakeLogModal({
               max="10"
               step="0.1"
               value={magnitude}
-							onChange={(e) => {
+              onChange={e => {
                 const val = e.target.value;
                 if (parseFloat(val) > 10) return;
                 setMagnitude(val);
@@ -169,8 +161,13 @@ export default function EarthquakeLogModal({
           </div>
           <div>
             <label className="block text-sm font-medium">Type</label>
-						<select className="border rounded px-3 py-2 w-full" value={type} onChange={(e) => setType(e.target.value)} required>
+            <select
-							{typeOptions.map((opt) => (
+              className="border rounded px-3 py-2 w-full"
+              value={type}
+              onChange={e => setType(e.target.value)}
+              required
+            >
+              {typeOptions.map(opt => (
                 <option key={opt.value} value={opt.value}>
                   {opt.label}
                 </option>
@@ -179,12 +176,14 @@ export default function EarthquakeLogModal({
           </div>
           <div>
             <label className="block text-sm font-medium">City/Area</label>
-						<span className="block text-xs text-gray-400">(Use Lat/Lon then press Enter for reverse lookup)</span>
+            <span className="block text-xs text-gray-400">
+              (Use Lat/Lon then press Enter for reverse lookup)
+            </span>
             <input
               type="text"
               className="border rounded px-3 py-2 w-full"
               value={city}
-							onChange={(e) => setCity(e.target.value)}
+              onChange={e => setCity(e.target.value)}
               required
             />
           </div>
@@ -194,7 +193,7 @@ export default function EarthquakeLogModal({
               type="text"
               className="border rounded px-3 py-2 w-full"
               value={country}
-							onChange={(e) => setCountry(e.target.value)}
+              onChange={e => setCountry(e.target.value)}
               required
             />
           </div>
@@ -205,7 +204,7 @@ export default function EarthquakeLogModal({
                 type="number"
                 className="border rounded px-3 py-2 w-full"
                 value={latitude}
-								onChange={(e) => handleLatLonChange(e.target.value, longitude)}
+                onChange={e => handleLatLonChange(e.target.value, longitude)}
                 placeholder="e.g. 36.12"
                 step="any"
                 required
@@ -217,7 +216,7 @@ export default function EarthquakeLogModal({
                 type="number"
                 className="border rounded px-3 py-2 w-full"
                 value={longitude}
-								onChange={(e) => handleLatLonChange(latitude, e.target.value)}
+                onChange={e => handleLatLonChange(latitude, e.target.value)}
                 placeholder="e.g. -115.17"
                 step="any"
                 required
@@ -230,12 +229,16 @@ export default function EarthquakeLogModal({
               type="text"
               className="border rounded px-3 py-2 w-full"
               value={depth}
-							onChange={(e) => setDepth(e.target.value)}
+              onChange={e => setDepth(e.target.value)}
               placeholder="e.g. 10 km"
               required
             />
           </div>
-					<button type="submit" className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 w-full" disabled={loading}>
+          <button
+            type="submit"
+            className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 w-full"
+            disabled={loading}
+          >
             {loading ? "Logging..." : "Log Earthquake"}
           </button>
         </form>

src/components/EarthquakeSearchModal.tsx

@@ -23,8 +23,6 @@ const COLUMNS = [
   { label: "Date", key: "date" },
 ];
 
-// todo modify slightly
-
 export default function EarthquakeSearchModal({
   open,
   onClose,
@@ -74,12 +72,15 @@ export default function EarthquakeSearchModal({
 
   // Filter logic
   const filteredRows = useMemo(() => {
-		return results.filter(
+    return results.filter((row) =>
-			(row) =>
+      (!filters.code ||
-				(!filters.code || row.code.toLowerCase().includes(filters.code.toLowerCase())) &&
+        row.code.toLowerCase().includes(filters.code.toLowerCase())) &&
-				(!filters.location || (row.location || "").toLowerCase().includes(filters.location.toLowerCase())) &&
+      (!filters.location ||
-				(!filters.magnitude || String(row.magnitude).startsWith(filters.magnitude)) &&
+        (row.location || "").toLowerCase().includes(filters.location.toLowerCase())) &&
-				(!filters.date || row.date.slice(0, 10) === filters.date)
+      (!filters.magnitude ||
+        String(row.magnitude).startsWith(filters.magnitude)) &&
+      (!filters.date ||
+        row.date.slice(0, 10) === filters.date)
     );
   }, [results, filters]);
 
@@ -110,9 +111,10 @@ export default function EarthquakeSearchModal({
   return (
     <div className="fixed z-50 inset-0 bg-black/40 flex items-center justify-center animate-fadein">
       <div className="bg-white rounded-lg shadow-xl p-6 w-full max-w-2xl relative">
-				<button onClick={onClose} className="absolute right-4 top-4 text-2xl text-gray-400 hover:text-red-500 font-bold">
+        <button
-					&times;
+          onClick={onClose}
-				</button>
+          className="absolute right-4 top-4 text-2xl text-gray-400 hover:text-red-500 font-bold"
+        >&times;</button>
         <h2 className="font-bold text-xl mb-4">Search Earthquakes</h2>
         <form
           onSubmit={(e) => {
@@ -158,7 +160,9 @@ export default function EarthquakeSearchModal({
             Clear
           </button>
         </form>
-				{error && <div className="text-red-600 font-medium mb-2">{error}</div>}
+        {error && (
+          <div className="text-red-600 font-medium mb-2">{error}</div>
+        )}
         {/* Filter Row */}
         <div className="mb-2">
           <div className="flex gap-3">
@@ -167,10 +171,17 @@ export default function EarthquakeSearchModal({
                 key={col.key}
                 type={col.key === "magnitude" ? "number" : col.key === "date" ? "date" : "text"}
                 value={filters[col.key] || ""}
-								onChange={(e) => setFilters((f) => ({ ...f, [col.key]: e.target.value }))}
+                onChange={e =>
+                  setFilters(f => ({ ...f, [col.key]: e.target.value }))
+                }
                 className="border border-neutral-200 rounded px-2 py-1 text-xs"
                 style={{
-									width: col.key === "magnitude" ? 70 : col.key === "date" ? 130 : 120,
+                  width:
+                    col.key === "magnitude"
+                      ? 70
+                      : col.key === "date"
+                      ? 130
+                      : 120,
                 }}
                 placeholder={`Filter ${col.label}`}
                 aria-label={`Filter ${col.label}`}
@@ -189,15 +200,14 @@ export default function EarthquakeSearchModal({
                     key={col.key}
                     className={`font-semibold px-3 py-2 cursor-pointer select-none text-left`}
                     onClick={() =>
-											setSort(
+                      setSort(sort && sort.key === col.key
-												sort && sort.key === col.key
                         ? { key: col.key as keyof Earthquake, dir: sort.dir === "asc" ? "desc" : "asc" }
-													: { key: col.key as keyof Earthquake, dir: "asc" }
+                        : { key: col.key as keyof Earthquake, dir: "asc" })
-											)
                     }
                   >
                     {col.label}
-										{sort?.key === col.key && (sort.dir === "asc" ? " ↑" : " ↓")}
+                    {sort?.key === col.key &&
+                      (sort.dir === "asc" ? " ↑" : " ↓")}
                   </th>
                 ))}
               </tr>
@@ -210,7 +220,7 @@ export default function EarthquakeSearchModal({
                   </td>
                 </tr>
               )}
-							{sortedRows.map((eq) => (
+              {sortedRows.map(eq => (
                 <tr
                   key={eq.id}
                   className="hover:bg-blue-50 cursor-pointer border-b"