Made some small requests changes
This commit is contained in:
parent
74ed7bd50a
commit
13d36012a8
@ -3,39 +3,39 @@ 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 });
|
||||
}
|
||||
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 });
|
||||
}
|
||||
export async function POST(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 });
|
||||
}
|
||||
}
|
||||
@ -1,242 +1,208 @@
|
||||
"use client";
|
||||
import axios from "axios";
|
||||
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",
|
||||
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",
|
||||
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",
|
||||
});
|
||||
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;
|
||||
id: number;
|
||||
name: string;
|
||||
email: string;
|
||||
role?: string;
|
||||
scientist?: { level: string } | null;
|
||||
};
|
||||
|
||||
type Request = {
|
||||
id: number;
|
||||
createdAt: string;
|
||||
requestType: string;
|
||||
requestingUser: User;
|
||||
outcome: string;
|
||||
id: number;
|
||||
createdAt: string;
|
||||
requestType: string;
|
||||
requestingUser: User;
|
||||
outcome: string;
|
||||
};
|
||||
|
||||
export default function RequestManagementPage() {
|
||||
const user = useStoreState((s) => s.user);
|
||||
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);
|
||||
// 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;
|
||||
// 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);
|
||||
});
|
||||
}, []);
|
||||
// Requests fetch
|
||||
useEffect(() => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
axios
|
||||
.get("/api/requests")
|
||||
.then((res) => {
|
||||
setRequests(res.data.requests || []);
|
||||
setLoading(false);
|
||||
})
|
||||
.catch(() => {
|
||||
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]
|
||||
);
|
||||
// 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 ?? "")
|
||||
);
|
||||
// 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);
|
||||
}
|
||||
}
|
||||
async function handleAction(requestId: number, action: "FULFILLED" | "REJECTED") {
|
||||
setActionLoading(requestId);
|
||||
setActionError(null);
|
||||
setActionSuccess(null);
|
||||
try {
|
||||
const res = await axios.post("/api/requests", { id: requestId, outcome: action });
|
||||
setRequests((prev) => prev.map((r) => (r.id === requestId ? { ...r, outcome: action } : r)));
|
||||
setActionSuccess("Request updated.");
|
||||
} catch (err: any) {
|
||||
setActionError(err.response?.data?.error || "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>
|
||||
);
|
||||
}
|
||||
// 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>
|
||||
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>
|
||||
);
|
||||
{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 border-neutral-200 border 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>
|
||||
);
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user