Merge branch 'master' of ssh://stash.dyson.global.corp:7999/~thowitz/tremor-tracker

package-lock.json

@@ -17,6 +17,7 @@
                 "csv-parse": "^5.6.0",
                 "csv-parser": "^3.2.0",
                 "date-fns": "^4.1.0",
+                "DatePicker": "^2.0.0",
                 "dotenv": "^16.5.0",
                 "easy-peasy": "^6.1.0",
                 "express": "^5.1.0",
@@ -2867,6 +2868,12 @@
                 "url": "https://github.com/sponsors/kossnocorp"
             }
         },
+        "node_modules/DatePicker": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/DatePicker/-/DatePicker-2.0.0.tgz",
+            "integrity": "sha512-x5zuXdURsRHGtLJAufN+LaR7EaisJ8HUDrfoHmOHQ5xfqYQa35kIwaQQeAQgc14puau2t1A2slDTuKqJwfZAdA==",
+            "license": "ISC"
+        },
         "node_modules/debug": {
             "version": "4.4.1",
             "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",

package.json

@@ -20,6 +20,7 @@
         "csv-parse": "^5.6.0",
         "csv-parser": "^3.2.0",
         "date-fns": "^4.1.0",
+        "DatePicker": "^2.0.0",
         "dotenv": "^16.5.0",
         "easy-peasy": "^6.1.0",
         "express": "^5.1.0",

src/app/api/requests/route.ts

@@ -0,0 +1,41 @@
+import { NextRequest, NextResponse } from "next/server";
+import { prisma } from "@utils/prisma";
+
+// GET requests, just requestingUser only
+export async function GET() {
+  try {
+    const requests = await prisma.request.findMany({
+      orderBy: { createdAt: "desc" },
+      include: {
+        requestingUser: true,
+      },
+    });
+    return NextResponse.json({ requests }, { status: 200 });
+  } catch (err) {
+    console.error("Failed to get requests", err);
+    return NextResponse.json({ error: "Internal Server Error" }, { status: 500 });
+  }
+}
+
+export async function PUT(req: NextRequest) {
+  try {
+    const { id, outcome } = await req.json();
+    if (!["FULFILLED", "REJECTED"].includes(outcome)) {
+      return NextResponse.json({ error: "Invalid outcome" }, { status: 400 });
+    }
+    const existing = await prisma.request.findUnique({ where: { id } });
+    if (!existing) {
+      return NextResponse.json({ error: "Request not found" }, { status: 404 });
+    }
+    const updated = await prisma.request.update({
+      where: { id },
+      data: {
+        outcome,
+      },
+    });
+    return NextResponse.json({ request: updated }, { status: 200 });
+  } catch (err) {
+    console.error("Update request failed", err);
+    return NextResponse.json({ error: "Update failed" }, { status: 500 });
+  }
+}

src/app/management/page.tsx

@@ -23,6 +23,37 @@ type Scientist = {
   subordinates: Scientist[];
 };
 // --- Helpers ---
+
+function normalizeScientist(input: any): Scientist {
+    return {
+      id: input.id,
+      createdAt:
+        typeof input.createdAt === "string"
+          ? input.createdAt
+          : input.createdAt instanceof Date
+          ? input.createdAt.toISOString()
+          : String(input.createdAt),
+      name: input.name,
+      level:
+        input.level === "JUNIOR"
+          ? "JUNIOR"
+          : input.level === "SENIOR"
+          ? "SENIOR"
+          : ("JUNIOR" as Level), // fallback/safe - but this should never happen
+      user: input.user,
+      userId: input.userId,
+      superior: input.superior ? normalizeScientist(input.superior) : null,
+      superiorId:
+        input.superiorId === undefined
+          ? null
+          : input.superiorId,
+      subordinates:
+        Array.isArray(input.subordinates)
+          ? input.subordinates.map(normalizeScientist)
+          : [],
+    };
+  }
+
 const initialScientists: Scientist[] = [
   {
     id: 0,
@@ -44,12 +75,11 @@ type SortField = (typeof sortFields)[number]["value"];
 type SortDir = "asc" | "desc";
 const dirLabels: Record<SortDir, string> = { asc: "ascending", desc: "descending" };
 const fieldLabels: Record<SortField, string> = { name: "Name", level: "Level" };
-
-// --- Updated RequestModal (only level/removal, no comment)
+// --- Updated RequestModal (clearer wording for "myself" & only level/removal)
 type RequestModalProps = {
   open: boolean;
   onClose: () => void;
-  requestingUserId: number;
+  requestingUserId: number | undefined;
   scientist?: Scientist | null;
 };
 function RequestModal({ open, onClose, requestingUserId, scientist }: RequestModalProps) {
@@ -57,7 +87,6 @@ function RequestModal({ open, onClose, requestingUserId, scientist }: RequestMod
   const [loading, setLoading] = useState(false);
   const [success, setSuccess] = useState<string | null>(null);
   const [error, setError] = useState<string | null>(null);
-
   async function handleSubmit(e: React.FormEvent) {
     e.preventDefault();
     setError(null); setSuccess(null);
@@ -78,7 +107,7 @@ function RequestModal({ open, onClose, requestingUserId, scientist }: RequestMod
         const d = await res.json().catch(() => ({}));
         throw new Error(d?.error || "Request failed");
       }
-      setSuccess("Request submitted for review.");
+      setSuccess("Your request has been submitted for review.");
     } catch (e: any) {
       setError(e?.message || "Unknown error");
     } finally {
@@ -89,18 +118,31 @@ function RequestModal({ open, onClose, requestingUserId, scientist }: RequestMod
   return open ? (
     <div className="fixed inset-0 z-40 flex items-center justify-center bg-black bg-opacity-30">
       <div className="bg-white rounded-lg shadow-lg p-8 max-w-md w-full relative">
-        <h3 className="text-lg font-bold mb-4">Request Action</h3>
+        <h3 className="text-lg font-bold mb-2">
+          Request a Change to Your Profile
+        </h3>
+        <div className="mb-2 text-gray-600 text-sm">
+          {/* Explain exactly what the request is for */}
+          {scientist
+            ? (
+                <>You are requesting a change for your own scientist profile: <b>{scientist.name}</b> ({scientist.user.email}).</>
+              )
+            : (
+                <>You are requesting a change for your own scientist profile.</>
+              )
+          }
+        </div>
         <form onSubmit={handleSubmit} className="space-y-3">
           <div>
-            <label className="block text-sm font-medium mb-1">Action Type</label>
+            <label className="block text-sm font-medium mb-1">Request Action Type</label>
             <select
               required
               className="w-full border px-2 py-1 rounded-lg"
               value={requestType}
               onChange={e=>setRequestType(e.target.value)}
             >
-              <option value="CHANGE_LEVEL">Request Change Level</option>
-              <option value="DELETE">Request Removal</option>
+              <option value="CHANGE_LEVEL">Request level change</option>
+              <option value="DELETE">Remove yourself from scientists</option>
             </select>
           </div>
           {error && <div className="text-red-600 text-xs">{error}</div>}
@@ -160,6 +202,7 @@ export default function ScientistManagementPage() {
   const isAdmin = userRole === "ADMIN";
   const isSeniorScientist = userRole === "SCIENTIST" && user?.scientist?.level === "SENIOR";
   const readOnly = isSeniorScientist && !isAdmin;
+
   // Data loading effects
   useEffect(() => {
     async function fetchAllUsers() {
@@ -302,6 +345,18 @@ export default function ScientistManagementPage() {
     }
   };
   const usersWithNoScientist = allUsers.filter(u => !u.scientist);
+
+  // Find "my" scientist for the modal as senior scientist
+    const rawMyScientist =
+    user?.scientist
+        ? scientists.find(s => s.id === user.scientist?.id) || user.scientist
+        : undefined;
+
+    // Only pass to modal if available, and fully normalized:
+    const myScientist = rawMyScientist
+    ? normalizeScientist(rawMyScientist)
+    : undefined;
+
   if (!isAdmin && !isSeniorScientist) {
     return (
       <div className="flex items-center justify-center min-h-[70vh] flex-col">
@@ -416,18 +471,34 @@ export default function ScientistManagementPage() {
                 {sortDir === "asc" ? "↑" : "↓"}
               </button>
               {isAdmin && (
-              <button
-                className="ml-2 px-2 py-1 rounded-lg bg-green-600 hover:bg-green-700 text-white font-bold flex items-center shadow transition duration-150"
-                type="button"
-                style={{ minWidth: 36, minHeight: 36 }}
-                onClick={() => setAddOpen(true)}
-                disabled={addOpen}
-                title="Add scientist"
-              >
-                <svg width="18" height="18" fill="none" stroke="currentColor" strokeWidth={2.2} viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" d="M12 5v14m7-7H5" />
-                </svg>
-              </button>
+                <button
+                  className="ml-2 px-2 py-1 rounded-lg bg-green-600 hover:bg-green-700 text-white font-bold flex items-center shadow transition duration-150"
+                  type="button"
+                  style={{ minWidth: 36, minHeight: 36 }}
+                  onClick={() => setAddOpen(true)}
+                  disabled={addOpen}
+                  title="Add scientist"
+                >
+                  <svg width="18" height="18" fill="none" stroke="currentColor" strokeWidth={2.2} viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M12 5v14m7-7H5" />
+                  </svg>
+                </button>
+              )}
+              {/* Senior scientist: Request Change button (for myself) */}
+              {!isAdmin && isSeniorScientist && !!myScientist && (
+                <button
+                  className="ml-2 px-2 py-1 rounded-lg bg-yellow-500 hover:bg-yellow-600 text-white font-bold flex items-center shadow transition duration-150"
+                  type="button"
+                  style={{ minWidth: 36, minHeight: 36 }}
+                  onClick={() => setRequestOpen(true)}
+                  disabled={requestOpen}
+                  title="Request changes to your own scientist profile"
+                >
+                  <svg width="18" height="18" fill="none" stroke="currentColor" strokeWidth={2.2} viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M20 12H4m8 8V4" />
+                  </svg>
+                  <span className="ml-2 text-xs font-normal text-center">🔁</span>
+                </button>
               )}
             </div>
             <small className="text-xs text-gray-500 mb-2 px-1">
@@ -526,7 +597,7 @@ export default function ScientistManagementPage() {
           open={requestOpen}
           onClose={()=>setRequestOpen(false)}
           requestingUserId={user?.id}
-          scientist={editScientist}
+          scientist={myScientist}
         />
         {/* MAIN PANEL */}
         <div className="flex-1 p-24 bg-white overflow-y-auto">
@@ -617,14 +688,7 @@ export default function ScientistManagementPage() {
                 </button>
                 </>
             )}
-            {readOnly && (
-                <button type="button"
-                onClick={()=>setRequestOpen(true)}
-                className="px-4 py-2 rounded-lg bg-yellow-500 hover:bg-yellow-600 text-white font-semibold shadow transition ml-3"
-                >
-                Request Change
-                </button>
-            )}
+            {/* No request change button here for readOnly/SCIENTIST users anymore */}
             </div>
         </form>
         ) : (

src/app/page.tsx

@@ -3,212 +3,220 @@ import Image from "next/image";
 import Link from "next/link";
 import { TbHexagon } from "react-icons/tb";
 import useSWR from "swr";
+
 import BottomFooter from "@components/BottomFooter";
 import { createPoster } from "@utils/axiosHelpers";
 import getMagnitudeColor from "@utils/getMagnitudeColour";
 
 // formats the date
 function getRelativeDate(dateString: string): string {
-    const date = new Date(dateString);
-    const now = new Date();
-    const diffMs = now.getTime() - date.getTime();
-    const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
-    if (diffDays === 0) return "today";
-    if (diffDays === 1) return "yesterday";
-    return date.toLocaleDateString();
+	const date = new Date(dateString);
+	const now = new Date();
+	const diffMs = now.getTime() - date.getTime();
+	const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
+	if (diffDays === 0) return "today";
+	if (diffDays === 1) return "yesterday";
+	return date.toLocaleDateString();
 }
 
 // copied from sidebar
 function MagnitudeNumber({ magnitude }: { magnitude: number }) {
-    const magnitudeStr = magnitude.toFixed(1);
-    const [whole, decimal] = magnitudeStr.split(".");
-    return (
-        <div className="relative" style={{ color: getMagnitudeColor(magnitude) }}>
-            <TbHexagon size={40} className="drop-shadow-sm" />
-            <div className="absolute inset-0 flex items-center justify-center">
-                <div className="flex items-baseline font-mono font-bold tracking-tight">
-                    <span className="text-xl -mr-1">{whole}</span>
-                    <span className="text-xs ml-[1.5px] -mr-[2.5px]">.</span>
-                    <span className="text-xs -mr-[1px]">{decimal}</span>
-                </div>
-            </div>
-        </div>
-    );
+	const magnitudeStr = magnitude.toFixed(1);
+	const [whole, decimal] = magnitudeStr.split(".");
+	return (
+		<div className="relative" style={{ color: getMagnitudeColor(magnitude) }}>
+			<TbHexagon size={40} className="drop-shadow-sm" />
+			<div className="absolute inset-0 flex items-center justify-center">
+				<div className="flex items-baseline font-mono font-bold tracking-tight">
+					<span className="text-xl -mr-1">{whole}</span>
+					<span className="text-xs ml-[1.5px] -mr-[2.5px]">.</span>
+					<span className="text-xs -mr-[1px]">{decimal}</span>
+				</div>
+			</div>
+		</div>
+	);
 }
 
 export default function Home() {
-    const { data, error, isLoading } = useSWR(
-        "/api/earthquakes",
-        createPoster({ rangeDaysPrev: 6 })
-    );
-    // Take 5 most recent
-    const recents = (data?.earthquakes ?? [])
-        .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
-        .slice(0, 5);
+	const { data, error, isLoading } = useSWR("/api/earthquakes", createPoster({ rangeDaysPrev: 6 }));
+	// Take 5 most recent
+	const recents = (data?.earthquakes ?? []).sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()).slice(0, 5);
 
-    return (
-        <main className="min-h-screen text-black">
-            <div className="w-full relative">
-                <div>
-                    <Image height={2000} width={2000} alt="Background Image" src="/lava_flows.jpg" />
-                </div>
-                <div className="absolute inset-0 bg-gradient-to-b from-transparent via-black/10 to-black/40"></div>
-                <div className="absolute inset-0 top-[30%]">
-                    <Image className="mx-auto" height={300} width={1000} alt="Title Image" src="/tremortrackertext.png" />
-                </div>
-            </div>
-            <p className="mt-2"></p>
-            <div className="flex flex-col md:flex-row md:justify-evenly gap-6 mt-2">
-                <Link href="/earthquakes" className="icon-link flex flex-col items-center p-6 rounded-xl transition-colors duration-300">
-                    <Image height={100} width={100} src="/earthquake.png" alt="Education Icon" className="h-40 w-40 mb-4" />
-                    <h3 className="text-xl font-bold text-black mb-4">Earthquakes</h3>
-                    <p className="text-md text-black text-center max-w-xs opacity-90">
-                        Log new earthquakes with their required details or search past seismic events
-                    </p>
-                </Link>
-                <Link
-                    href="/observatories"
-                    className="icon-link flex flex-col items-center p-6 rounded-xl transition-colors duration-300"
-                >
-                    <Image height={100} width={100} src="/observe.png" alt="Research Icon" className="h-40 w-40 mb-4" />
-                    <h3 className="text-xl font-bold text-black mb-4">Observatories</h3>
-                    <p className="text-md text-black text-center max-w-xs opacity-90">
-                        Find recently active observatories, and newly opened/closed sites
-                    </p>
-                </Link>
-                <Link href="/shop" className="icon-link flex flex-col items-center p-6 rounded-xl transition-colors duration-300">
-                    <Image height={100} width={100} src="/artefact.png" alt="Technology Icon" className="h-40 w-40 mb-4" />
-                    <h3 className="text-xl font-bold text-black mb-4">Artefacts</h3>
-                    <p className="text-md text-black text-center max-w-xs opacity-90">
-                        View or purchase recently discovered artefacts from seismic events
-                    </p>
-                </Link>
-            </div>
-            <p className="mt-18"></p>
-            <section className="min-h-screen text-black">
-                <div className="w-full relative z-40">
-                    <div>
-                        <Image height={2500} width={2000} alt="Background Image" src="/earthquakesMap.jpg" />
-                    </div>
-                    <div className="border absolute top-0 inset-0 bg-gradient-to-b from-transparent via-black/10 to-black/40">
-                        <section className="relative z-10 flex flex-col items-center text-center w-full px-4 py-14 mt-6">
-                            <h1 className="text-4xl md:text-5xl font-sans font-bold text-white drop-shadow-lg mb-4 tracking-tight z-10">
-                                Welcome to Tremor Tracker
-                            </h1>
-                            <p className="text-lg md:text-xl font-sans text-white w-4/6 mx-auto drop-shadow-md z-10">
-                                TremorTracker is a non-profit website and research company, that aims to provide true, reliable data. Our mission
-                                is seismic education and preparation for all
-                            </p>
-                            <p className="mt-20"></p>
-                            <p className="text-lg md:text-3xl font-bold text-white w-4/6 mx-auto drop-shadow-md z-10">What is an earthquake?</p>
-                            <p className="text-lg md:text-xl text-white w-4/6 mx-auto drop-shadow-md z-10">
-                                Earthquakes are a shaking of the earth's surface caused by a sudden release of energy underground. They can range
-                                in size, from tiny trembles to large quakes, which can cause destruction and even tsunamis. Hundreds of
-                                earthquakes happen every day—but most are too small to feel.
-                            </p>
-                            <p className="mt-20"></p>
-                            <p className="text-lg md:text-3xl font-bold text-white w-4/6 mx-auto drop-shadow-md z-10">
-                                How do we log earthquakes?
-                            </p>
-                            <p className="text-lg md:text-3xl font-bold text-white w-4/6 mx-auto drop-shadow-md z-10">
-                                What information are we interested in?
-                            </p>
-                            <p className="text-lg md:text-xl text-white w-4/6 mx-auto drop-shadow-md z-10">info</p>
-                            <p className="mt-20"></p>
-                            <p className="text-lg md:text-3xl font-bold text-white w-4/6 mx-auto drop-shadow-md z-10">
-                                What are observatories?
-                            </p>
-                            <p className="text-lg md:text-3xl font-bold text-white w-4/6 mx-auto drop-shadow-md z-10">What is their role?</p>
-                            <p className="text-lg md:text-xl text-white w-4/6 mx-auto drop-shadow-md z-10">info</p>
-                        </section>
-                    </div>
-                </div>
-            </section>
-            <p className="mt-20"></p>
-            <section className="relative z-10 flex flex-col items-start text-left w-5/6 mx-auto px-2 -mt-5 mb-2">
-                <h1 className="text-3xl md:text-3xl font-bold text-black drop-shadow-lg mb-3 tracking-tight">
-                    Recent Earthquake Events
-                </h1>
-                <p className="text-lg md:text-xl text-black drop-shadow-md">
-                    Learn about the most recent earthquake events from around the world:
-                </p>
-            </section>
-            <p className="mt-6"></p>
-            <div className="mx-auto w-5/6 px-2">
-                {error && (
-                    <div className="border rounded-xl bg-white bg-opacity-90 shadow-md p-4 mb-2">
-                        <p>Failed to load earthquakes.</p>
-                    </div>
-                )}
-                {isLoading && (
-                    <div className="border rounded-xl bg-white bg-opacity-90 shadow-md p-4 mb-2">
-                        <p>Loading...</p>
-                    </div>
-                )}
-                {!isLoading && recents.length === 0 && (
-                    <div className="border rounded-xl bg-white bg-opacity-90 shadow-md p-4 mb-2">
-                        <p>No earthquakes found.</p>
-                    </div>
-                )}
-                <div className="flex flex-col gap-4">
-                    {recents.map((eq) => (
-                        <div
-                            key={eq.code}
-                            className="flex items-center justify-between p-4 bg-white rounded-xl shadow border"
-                        >
-                            <div>
-                                <div className="font-semibold">
-                                    Earthquake in {eq.location || (eq.code && eq.code.split("-")[2])}
-                                </div>
-                                <div className="text-sm text-gray-500">{getRelativeDate(eq.date)}</div>
-                            </div>
-                            <MagnitudeNumber magnitude={eq.magnitude} />
-                        </div>
-                    ))}
-                </div>
-            </div>
-            <p className="mt-20"></p>
-            <section className="relative z-10 flex flex-col items-start text-left w-5/6 mx-auto px-2 -mt-5 mb-2">
-                <h1 className="text-3xl md:text-3xl font-bold text-black drop-shadow-lg mb-3 tracking-tight">
-                    Find Out More!
-                </h1>
-                <p className="text-lg md:text-xl text-black drop-shadow-md">
-                    Explore more of our website...
-                </p>
-            </section>
-            <p className="mt-2"></p>
-            <div className="flex flex-col md:flex-row md:justify-evenly gap-6 mt-2">
-                <Link href="/contact-us" className="icon-link flex flex-col items-center p-6 rounded-xl transition-colors duration-300">
-                    <Image height={100} width={100} src="/contactUs.jpg" alt="Education Icon" className="h-20 w-20 mb-4" />
-                    <h3 className="text-xl font-bold text-black mb-4">Contact us directly</h3>
-                    <p className="text-md text-black text-center max-w-xs opacity-90">
-                        Visit our socials or leave us a message via phone or email.
-                    </p>
-                </Link>
-                <Link href="/our-mission" className="icon-link flex flex-col items-center p-6 rounded-xl transition-colors duration-300">
-                    <Image height={100} width={100} src="/mission.jpg" alt="Research Icon" className="h-20 w-20 mb-4" />
-                    <h3 className="text-xl font-bold text-black mb-4">Our Mission</h3>
-                    <p className="text-md text-black text-center max-w-xs opacity-90">
-                        Find out more about our purpose and the features we offer.
-                    </p>
-                </Link>
-                <Link href="/the-team" className="icon-link flex flex-col items-center p-6 rounded-xl transition-colors duration-300">
-                    <Image height={100} width={100} src="/team.jpg" alt="Technology Icon" className="h-20 w-20 mb-4" />
-                    <h3 className="text-xl font-bold text-black mb-4">Meet the Team</h3>
-                    <p className="text-md text-black text-center max-w-xs opacity-90">
-                        Learn about our team leads and their responsibilities.
-                    </p>
-                </Link>
-            </div>
-            <p className="mt-10"></p>
-            <section style={{ height: 500 }} className="text-black">
-                <div className="w-full relative overflow-hidden z=10">
-                    <div className="flex justify-center">
-                        <Image height={400} width={800} alt="Background Image" src="/team.PNG" />
-                    </div>
-                    <BottomFooter />
-                </div>
-            </section>
-        </main>
-    );
+	return (
+		<main className="min-h-screen text-black">
+			<div className="w-full relative">
+				<div>
+					<Image height={2000} width={2000} alt="Background Image" src="/lava_flows.jpg" />
+				</div>
+				<div className="absolute inset-0 bg-gradient-to-b from-transparent via-black/10 to-black/40"></div>
+				<div className="absolute inset-0 top-[30%]">
+					<Image className="mx-auto" height={300} width={1000} alt="Title Image" src="/tremortrackertext.png" />
+				</div>
+			</div>
+			<p className="mt-2"></p>
+			<div className="flex flex-col md:flex-row md:justify-evenly gap-6 mt-2">
+				<Link href="/earthquakes" className="icon-link flex flex-col items-center p-6 rounded-xl transition-colors duration-300">
+					<Image height={100} width={100} src="/earthquake.png" alt="Education Icon" className="h-40 w-40 mb-4" />
+					<h3 className="text-xl font-bold text-black mb-4">Earthquakes</h3>
+					<p className="text-md text-black text-center max-w-xs opacity-90">
+						Log new earthquakes with their required details or search past seismic events
+					</p>
+				</Link>
+				<Link
+					href="/observatories"
+					className="icon-link flex flex-col items-center p-6 rounded-xl transition-colors duration-300"
+				>
+					<Image height={100} width={100} src="/observe.png" alt="Research Icon" className="h-40 w-40 mb-4" />
+					<h3 className="text-xl font-bold text-black mb-4">Observatories</h3>
+					<p className="text-md text-black text-center max-w-xs opacity-90">
+						Find recently active observatories, and newly opened/closed sites
+					</p>
+				</Link>
+				<Link href="/shop" className="icon-link flex flex-col items-center p-6 rounded-xl transition-colors duration-300">
+					<Image height={100} width={100} src="/artefact.png" alt="Aftefacts Icon" className="h-40 w-40 mb-4" />
+					<h3 className="text-xl font-bold text-black mb-4">Artefacts</h3>
+					<p className="text-md text-black text-center max-w-xs opacity-90">
+						View or purchase recently discovered artefacts from seismic events
+					</p>
+				</Link>
+			</div>
+			<p className="mt-18"></p>
+			<section className="min-h-screen text-black">
+				<div className="w-full relative z-40">
+					<div>
+						<Image height={2500} width={2000} alt="Background Image" src="/earthquakesMap.jpg" />
+					</div>
+					<div className="border absolute top-0 inset-0 bg-gradient-to-b from-transparent via-black/10 to-black/40">
+						<section className="relative z-10 flex flex-col items-center text-center w-full px-4 py-14 mt-6">
+							<h1 className="text-4xl md:text-5xl font-sans font-bold text-white drop-shadow-lg mb-4 tracking-tight z-10">
+								Welcome to Tremor Tracker
+							</h1>
+							<p className="text-lg md:text-xl font-sans text-white w-4/6 mx-auto drop-shadow-md z-10">
+								TremorTracker is a non-profit website and research company, that aims to provide seismic education and aid
+								preparation
+							</p>
+							<p className="mt-10"></p>
+							<p className="text-lg md:text-3xl font-bold text-white w-4/6 mx-auto drop-shadow-md z-10">What is an earthquake?</p>
+							<p className="text-lg md:text-xl text-white w-4/6 mx-auto drop-shadow-md z-10">
+								An earthquake is a sudden shaking of the Earth’s surface, triggered by a rapid release of energy deep underground.
+								This usually happens because the Earth’s outer shell, called the crust, is made up of large pieces known as
+								tectonic plates. These plates are always moving, but sometimes they get stuck at their edges; when stress builds
+								up and is finally released, it causes the ground to shake—an earthquake. Earthquakes can vary greatly in size—from
+								barely noticeable tremors to powerful quakes capable of causing widespread destruction. There are several types:
+								Tectonic, Volcanic and Collapse earthquakes. Understanding why and how earthquakes happen helps scientists predict
+								where they are most likely to occur and how to lessen their impact.
+							</p>
+							<p className="mt-10"></p>
+							<p className="text-lg md:text-3xl font-bold text-white w-4/6 mx-auto drop-shadow-md z-10">
+								How do we log earthquakes?
+							</p>
+							<p className="text-lg md:text-3xl font-bold text-white w-4/6 mx-auto drop-shadow-md z-10">
+								What information are we interested in?
+							</p>
+							<p className="text-lg md:text-xl text-white w-4/6 mx-auto drop-shadow-md z-10">
+								Scientists record earthquakes using special instruments called seismometers, which detect and measure the
+								vibrations in the ground. When an earthquake occurs, the seismometer produces a trace known as a seismogram,
+								showing the strength and duration of the shaking. Information from seismometers around the world is sent to data
+								centers, where experts analyze it to pinpoint the earthquake’s location, type, depth, and magnitude. This process
+								is called “logging” or recording earthquakes, and it helps track seismic activity globally.
+							</p>
+							<p className="mt-10"></p>
+							<p className="text-lg md:text-3xl font-bold text-white w-4/6 mx-auto drop-shadow-md z-10">
+								What are observatories?
+							</p>
+							<p className="text-lg md:text-xl text-white w-4/6 mx-auto drop-shadow-md z-10">
+								An earthquake observatory is a specialized facility where scientists monitor and study seismic activity. These
+								observatories are equipped with sensitive instruments that can detect and record even the smallest tremors deep
+								within the Earth. Observatories collect important data about the strength, location, and timing of each earthquake
+								that can be shared with the general public. Scientists at the observatory use this data to better understand how
+								and why earthquakes occur, track earthquake patterns, and issue warnings if a major quake is detected. The
+								information gathered also helps in designing safer buildings and improving emergency response plans.
+							</p>
+						</section>
+					</div>
+				</div>
+			</section>
+			<p className="mt-20"></p>
+			<section className="relative z-10 flex flex-col items-start text-left w-5/6 mx-auto px-2 -mt-5 mb-2">
+				<h1 className="text-3xl md:text-3xl font-bold text-black drop-shadow-lg mb-3 tracking-tight">Recent Earthquake Events</h1>
+				<p className="text-lg md:text-xl text-black drop-shadow-md">
+					Learn about the most recent earthquake events from around the world:
+				</p>
+			</section>
+			<p className="mt-6"></p>
+			<div className="mx-auto w-5/6 px-2">
+				{error && (
+					<div className="border rounded-xl bg-white bg-opacity-90 shadow-md p-4 mb-2">
+						<p>Failed to load earthquakes.</p>
+					</div>
+				)}
+				{isLoading && (
+					<div className="border rounded-xl bg-white bg-opacity-90 shadow-md p-4 mb-2">
+						<p>Loading...</p>
+					</div>
+				)}
+				{!isLoading && recents.length === 0 && (
+					<div className="border rounded-xl bg-white bg-opacity-90 shadow-md p-4 mb-2">
+						<p>No earthquakes found.</p>
+					</div>
+				)}
+				<div className="flex flex-col gap-4">
+					{recents.map((eq) => (
+						<div key={eq.code} className="flex items-center justify-between p-4 bg-white rounded-xl shadow border">
+							<div>
+								<div className="font-semibold">Earthquake in {eq.location || (eq.code && eq.code.split("-")[2])}</div>
+								<div className="text-sm text-gray-500">{getRelativeDate(eq.date)}</div>
+							</div>
+							<MagnitudeNumber magnitude={eq.magnitude} />
+						</div>
+					))}
+				</div>
+			</div>
+			<p className="mt-20"></p>
+			<section className="relative z-10 flex flex-col items-start text-left w-5/6 mx-auto px-2 -mt-5 mb-2">
+				<h1 className="text-3xl md:text-3xl font-bold text-black drop-shadow-lg mb-3 tracking-tight">Find Out More!</h1>
+				<p className="text-lg md:text-xl text-black drop-shadow-md">Explore more of our website...</p>
+			</section>
+			<p className="mt-2"></p>
+			<div className="flex flex-col md:flex-row md:justify-evenly gap-6 mt-2">
+				<Link href="/contact-us" className="icon-link flex flex-col items-center p-6 rounded-xl transition-colors duration-300">
+					<Image height={100} width={100} src="/contactUs.jpg" alt="Contact Us Icon" className="h-20 w-20 mb-4" />
+					<h3 className="text-xl font-bold text-black mb-4">Contact us directly</h3>
+					<p className="text-md text-black text-center max-w-xs opacity-90">
+						Visit our socials or leave us a message via phone or email.
+					</p>
+				</Link>
+				<Link href="/our-mission" className="icon-link flex flex-col items-center p-6 rounded-xl transition-colors duration-300">
+					<Image height={100} width={100} src="/mission.jpg" alt="Our Mission Icon" className="h-20 w-20 mb-4" />
+					<h3 className="text-xl font-bold text-black mb-4">Our Mission</h3>
+					<p className="text-md text-black text-center max-w-xs opacity-90">
+						Find out more about our purpose and the features we offer.
+					</p>
+				</Link>
+				<Link href="/the-team" className="icon-link flex flex-col items-center p-6 rounded-xl transition-colors duration-300">
+					<Image height={100} width={100} src="/team.jpg" alt="Team Icon" className="h-20 w-20 mb-4" />
+					<h3 className="text-xl font-bold text-black mb-4">Meet the Team</h3>
+					<p className="text-md text-black text-center max-w-xs opacity-90">
+						Learn about our team leads and their responsibilities.
+					</p>
+				</Link>
+				<Link href="/the-team" className="icon-link flex flex-col items-center p-6 rounded-xl transition-colors duration-300">
+					<Image height={100} width={100} src="/learn.jpg" alt="Learn Icon" className="h-20 w-20 mb-4" />
+					<h3 className="text-xl font-bold text-black mb-4">Learn</h3>
+					<p className="text-md text-black text-center max-w-xs opacity-90">
+						Find out more about earthquakes, what causes them and how to prepare.
+					</p>
+				</Link>
+			</div>
+			<p className="mt-10"></p>
+			<section style={{ height: 500 }} className="text-black">
+				<div className="w-full relative overflow-hidden z=10">
+					<div className="flex justify-center">
+						<Image height={400} width={800} alt="Background Image" src="/team.PNG" />
+					</div>
+					<BottomFooter />
+				</div>
+			</section>
+		</main>
+	);
 }

src/app/requests/page.tsx

@@ -0,0 +1,242 @@
+"use client";
+import React, { useState, useEffect } from "react";
+import { useStoreState } from "@hooks/store";
+
+// Helper dicts/types
+const outcomeColors: Record<string, string> = {
+  FULFILLED: "text-green-700 bg-green-100",
+  REJECTED: "text-red-700 bg-red-100",
+  IN_PROGRESS: "text-blue-700 bg-blue-100",
+  CANCELLED: "text-gray-600 bg-gray-100",
+  OTHER: "text-yellow-800 bg-yellow-100",
+};
+const requestTypeLabels: Record<string, string> = {
+  NEW_USER: "New User",
+  CHANGE_LEVEL: "Change Level",
+  DELETE: "Removal",
+};
+function formatDate(val?: string) {
+  if (!val) return "--";
+  return new Date(val).toLocaleString(undefined, {
+    year: "numeric",
+    month: "short",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+}
+
+// Minimal types
+type User = {
+  id: number;
+  name: string;
+  email: string;
+  role?: string;
+  scientist?: { level: string } | null;
+};
+
+type Request = {
+  id: number;
+  createdAt: string;
+  requestType: string;
+  requestingUser: User;
+  outcome: string;
+};
+
+export default function RequestManagementPage() {
+  const user = useStoreState((s) => s.user);
+
+  // All hooks first!
+  const [requests, setRequests] = useState<Request[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [actionLoading, setActionLoading] = useState<number | null>(null);
+  const [actionError, setActionError] = useState<string | null>(null);
+  const [actionSuccess, setActionSuccess] = useState<string | null>(null);
+
+  // User role logic must remain invariant per render
+  const userRole = user?.role as string | undefined;
+  const isAdmin = userRole === "ADMIN";
+  const isSeniorScientist = userRole === "SCIENTIST" && user?.scientist?.level === "SENIOR";
+  const userId = user?.id;
+
+  // Requests fetch
+  useEffect(() => {
+    setLoading(true);
+    setError(null);
+    fetch("/api/requests")
+      .then((res) => {
+        if (!res.ok) throw new Error("Failed to fetch requests");
+        return res.json();
+      })
+      .then((data) => {
+        setRequests(data.requests || []);
+        setLoading(false);
+      })
+      .catch((err) => {
+        setError("Failed to load requests.");
+        setLoading(false);
+      });
+  }, []);
+
+  // Filtering for non-admins to only their requests
+  const filteredRequests = React.useMemo(
+    () =>
+      isAdmin
+        ? requests
+        : requests.filter((r) => r.requestingUser.id === userId),
+    [isAdmin, requests, userId]
+  );
+
+  // Sorted: newest first
+  filteredRequests.sort((a, b) =>
+    (b.createdAt ?? "").localeCompare(a.createdAt ?? "")
+  );
+
+  async function handleAction(
+    requestId: number,
+    action: "FULFILLED" | "REJECTED"
+  ) {
+    setActionLoading(requestId);
+    setActionError(null);
+    setActionSuccess(null);
+    try {
+      const res = await fetch("/api/requests", {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ id: requestId, outcome: action }),
+      });
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({}));
+        throw new Error(data?.error || "Failed to update request");
+      }
+      setRequests((prev) =>
+        prev.map((r) =>
+          r.id === requestId ? { ...r, outcome: action } : r
+        )
+      );
+      setActionSuccess("Request updated.");
+    } catch (err: any) {
+      setActionError(err?.message || "Failed to update request");
+    } finally {
+      setActionLoading(null);
+    }
+  }
+
+  // Unauthorized access should return early, but not before hooks!
+  if (!isAdmin && !isSeniorScientist) {
+    return (
+      <div className="min-h-[60vh] flex flex-col items-center justify-center">
+        <h1 className="text-2xl font-bold text-red-600 mb-4">Unauthorized Access</h1>
+        <div className="text-gray-600">You do not have access to this page.</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="max-w-5xl mx-auto py-10 px-4">
+      <div className="mb-8">
+        <h1 className="text-2xl font-bold">
+          {isAdmin ? "All Requests" : "My Requests"}
+        </h1>
+        <p className="text-gray-600 mt-2">
+          View {isAdmin ? "and manage pending" : "your"} requests related to scientist management.
+        </p>
+      </div>
+
+      {loading ? (
+        <div className="text-gray-500 text-center py-20">Loading...</div>
+      ) : error ? (
+        <div className="text-red-600 text-center py-10">{error}</div>
+      ) : (
+        <div className="bg-white rounded-lg shadow p-5 overflow-x-auto">
+          <table className="min-w-full text-sm">
+            <thead>
+              <tr className="border-b">
+                <th className="px-4 py-2">Date</th>
+                <th className="px-4 py-2">Type</th>
+                <th className="px-4 py-2">Requested By</th>
+                <th className="px-4 py-2">Status</th>
+                {isAdmin && <th className="px-4 py-2">Actions</th>}
+              </tr>
+            </thead>
+            <tbody>
+              {filteredRequests.length === 0 ? (
+                <tr>
+                  <td
+                    className="py-12 text-center text-gray-400 font-semibold"
+                    colSpan={isAdmin ? 5 : 4}
+                  >
+                    No requests found.
+                  </td>
+                </tr>
+              ) : (
+                filteredRequests.map((req) => (
+                  <tr key={req.id} className="border-b last:border-0 hover:bg-neutral-50">
+                    <td className="px-4 py-2 whitespace-nowrap">
+                      {formatDate(req.createdAt)}
+                    </td>
+                    <td className="px-4 py-2">
+                      {requestTypeLabels[req.requestType] || req.requestType}
+                    </td>
+                    <td className="px-4 py-2 whitespace-nowrap">
+                      <span className="font-medium">{req.requestingUser.name}</span>
+                      <span className="ml-1 text-xs text-gray-500">
+                        ({req.requestingUser.email})
+                      </span>
+                    </td>
+                    <td className="px-4 py-2">
+                      <span className={
+                        "inline-block px-2 py-1 rounded-xl text-xs font-semibold " +
+                        (outcomeColors[req.outcome] ||
+                          "bg-gray-100 text-gray-600")
+                      }>
+                        {req.outcome.replace(/_/g, " ")}
+                      </span>
+                    </td>
+                    {isAdmin && (
+                      <td className="px-4 py-2">
+                        {req.outcome === "IN_PROGRESS" ? (
+                          <div className="flex gap-2">
+                            <button
+                              onClick={() => handleAction(req.id, "FULFILLED")}
+                              className={
+                                "px-3 py-1 rounded-lg bg-green-600 hover:bg-green-700 text-white" +
+                                (actionLoading === req.id ? " opacity-60" : "")
+                              }
+                              disabled={actionLoading === req.id}
+                            >
+                              Fulfilled
+                            </button>
+                            <button
+                              onClick={() => handleAction(req.id, "REJECTED")}
+                              className={
+                                "px-3 py-1 rounded-lg bg-red-500 hover:bg-red-600 text-white" +
+                                (actionLoading === req.id ? " opacity-60" : "")
+                              }
+                              disabled={actionLoading === req.id}
+                            >
+                              Reject
+                            </button>
+                          </div>
+                        ) : (
+                          <span className="text-xs text-gray-400">No actions</span>
+                        )}
+                        {(actionError && actionLoading === req.id) && (
+                          <div className="text-xs text-red-600">{actionError}</div>
+                        )}
+                        {(actionSuccess && actionLoading === req.id) && (
+                          <div className="text-xs text-green-600">{actionSuccess}</div>
+                        )}
+                      </td>
+                    )}
+                  </tr>
+                ))
+              )}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  );
+}

src/components/Navbar.tsx

@@ -142,6 +142,15 @@ export default function Navbar({}: // currencySelector,
                     <ManagementNavbarButton name="Scientist Management" href="/management" />
                     </div>
                 )
+            )}
+			{user && (
+                (user.role === "ADMIN" ||
+                    (user.role === "SCIENTIST" && user.scientist?.level === "SENIOR")
+                ) && (
+                    <div className="flex h-full mr-5">
+                    <ManagementNavbarButton name="Requests" href="/requests" />
+                    </div>
+                )
             )}
 			{user && user.role === "ADMIN" && (
 				<div className="flex h-full mr-5">