Added more todos

src/app/administrator/page.tsx

@@ -1,5 +1,5 @@
 "use client";
-import React, { useRef, useState } from 'react';
+import React, { useRef, useState } from "react";
 
 type Role = "ADMIN" | "GUEST" | "SCIENTIST";
 const roleLabels: Record<Role, string> = {

src/app/earthquakes/page.tsx

@@ -10,6 +10,8 @@ import { getRelativeDate } from "@utils/formatters";
 import GeologicalEvent from "@appTypes/Event";
 import axios from "axios";
 
+// todo (optional) add in filtering of map earthquakes
+
 // --- SEARCH MODAL COMPONENT ---
 function EarthquakeSearchModal({ open, onClose, onSelect }) {
 	const [search, setSearch] = useState("");
@@ -33,10 +35,7 @@ function EarthquakeSearchModal({ open, onClose, onSelect }) {
 	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-6 max-w-lg w-full relative">
-        <button
+				<button onClick={onClose} className="absolute right-4 top-4 text-gray-500 hover:text-black text-lg">
-          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">Search Earthquakes</h2>
@@ -45,34 +44,36 @@ function EarthquakeSearchModal({ open, onClose, onSelect }) {
 						type="text"
 						placeholder="e.g. Mexico, EV-7.4-Mexico-00035"
 						value={search}
-            onChange={e => setSearch(e.target.value)}
+						onChange={(e) => setSearch(e.target.value)}
 						className="flex-grow px-3 py-2 border rounded"
 						required
 					/>
-          <button
+					<button type="submit" className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
-            type="submit"
-            className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700"
-          >
 						{loading ? "Searching..." : "Search"}
 					</button>
 				</form>
 				<div>
-          {results.length === 0 && !loading && search !== "" && (
+					{results.length === 0 && !loading && search !== "" && <p className="text-gray-400 text-sm">No results found.</p>}
-            <p className="text-gray-400 text-sm">No results found.</p>
-          )}
 					<ul>
-            {results.map(eq => (
+						{results.map((eq) => (
 							<li
 								key={eq.id}
 								className="border-b py-2 cursor-pointer hover:bg-gray-50 flex items-center justify-between"
-                onClick={() => { onSelect(eq); onClose(); }}
+								onClick={() => {
+									onSelect(eq);
+									onClose();
+								}}
 								tabIndex={0}
 							>
 								<div>
-                  <strong>{eq.code}</strong> {" "}
+									<strong>{eq.code}</strong> <span>{eq.location}</span>{" "}
-                  <span>{eq.location}</span> <span className="text-xs text-gray-500">{new Date(eq.date).toLocaleDateString()}</span>
+									<span className="text-xs text-gray-500">{new Date(eq.date).toLocaleDateString()}</span>
 								</div>
-                <div className={`rounded-full px-2 py-1 ml-2 text-white font-semibold ${eq.magnitude >= 7 ? "bg-red-500" : eq.magnitude >= 6 ? "bg-orange-400" : "bg-yellow-400"}`}>
+								<div
+									className={`rounded-full px-2 py-1 ml-2 text-white font-semibold ${
+										eq.magnitude >= 7 ? "bg-red-500" : eq.magnitude >= 6 ? "bg-orange-400" : "bg-yellow-400"
+									}`}
+								>
 									{eq.magnitude}
 								</div>
 							</li>
@@ -148,7 +149,7 @@ export default function Earthquakes() {
 			<EarthquakeSearchModal
 				open={searchModalOpen}
 				onClose={() => setSearchModalOpen(false)}
-        onSelect={eq => {
+				onSelect={(eq) => {
 					setSelectedEventId(eq.code); // select on map/sidebar
 					// setSelectedSearchResult(eq); // you can use this if you want to show detail modal
 				}}

src/app/observatories/page.tsx

@@ -11,6 +11,10 @@ import { Observatory } from "@prismaclient";
 import { getRelativeDate } from "@utils/formatters";
 import GeologicalEvent from "@appTypes/Event";
 
+// todo add in showing of observatory stats when searching
+// todo add in deleting observatory when searching
+// todo add in changing colour of observatory icons if non-functional
+
 export default function Observatories() {
 	const [selectedEventId, setSelectedEventId] = useState("");
 	const [hoveredEventId, setHoveredEventId] = useState("");

src/app/shop/page.tsx

@@ -7,6 +7,8 @@ import { ExtendedArtefact } from "@appTypes/ApiTypes";
 import { Currency } from "@appTypes/StoreModel";
 import { useStoreState } from "@hooks/store";
 
+// todo hide from shop after purchase
+
 export default function Shop() {
     const [artefacts, setArtefacts] = useState<ExtendedArtefact[]>([]);
     const [loading, setLoading] = useState(true);
@@ -16,6 +18,7 @@ export default function Shop() {
         async function fetchArtefacts() {
             setLoading(true);
             try {
+                // todo only show only non-required artefacts
                 const res = await fetch("/api/artefacts");
                 const data = await res.json();