thowitz-work/tremor-tracker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Tim Howitz 2025-06-01 14:19:08 +01:00
commit 74ed7bd50a
8 changed files with 597 additions and 225 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
package-lock.json generated
View File

@ -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",

1
package.json
View File

@ -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",

BIN
public/learn.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB

41
src/app/api/requests/route.ts Normal file
View File

@ -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 });
}
}

100
src/app/management/page.tsx
View File

@ -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">
@ -429,6 +484,22 @@ export default function ScientistManagementPage() {
</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">
Scientists sorted by {fieldLabels[sortField]} {dirLabels[sortDir]}
@ -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>
) : (

84
src/app/page.tsx
View File

@ -3,6 +3,7 @@ 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";
@ -37,14 +38,9 @@ function MagnitudeNumber({ magnitude }: { magnitude: number }) {
}
export default function Home() {
const { data, error, isLoading } = useSWR(
"/api/earthquakes",
createPoster({ rangeDaysPrev: 6 })
);
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 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">
@ -77,7 +73,7 @@ export default function Home() {
</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" />
<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
@ -96,39 +92,53 @@ export default function Home() {
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
TremorTracker is a non-profit website and research company, that aims to provide seismic education and aid
preparation
</p>
<p className="mt-20"></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">
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.
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-20"></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">info</p>
<p className="mt-20"></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-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>
<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>
<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>
@ -152,14 +162,9 @@ export default function Home() {
)}
<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 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="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} />
@ -169,36 +174,39 @@ export default function Home() {
</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>
<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" />
<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="Research Icon" className="h-20 w-20 mb-4" />
<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="Technology Icon" className="h-20 w-20 mb-4" />
<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">

242
src/app/requests/page.tsx Normal file
View File

@ -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>
);
}

9
src/components/Navbar.tsx
View File

@ -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">