admin board
This commit is contained in:
jason
62
src/app/api/admin/users/route.ts
Normal file
62
src/app/api/admin/users/route.ts
Normal file
@@ -0,0 +1,62 @@
|
||||
import { NextResponse } from "next/server";
|
||||
export const dynamic = "force-dynamic";
|
||||
export const runtime = "nodejs";
|
||||
|
||||
import { getServerSession } from "next-auth/next";
|
||||
import { authOptions } from "@/lib/auth";
|
||||
import { prisma } from "@/lib/prisma";
|
||||
|
||||
// GET /api/admin/users - List all users
|
||||
export async function GET() {
|
||||
const session = await getServerSession(authOptions);
|
||||
|
||||
if (!session || session.user.role !== "ADMIN") {
|
||||
return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
|
||||
}
|
||||
|
||||
const users = await prisma.user.findMany({
|
||||
select: {
|
||||
id: true,
|
||||
name: true,
|
||||
email: true,
|
||||
image: true,
|
||||
role: true,
|
||||
reports: {
|
||||
orderBy: { date: "desc" },
|
||||
take: 1,
|
||||
select: { date: true, status: true },
|
||||
},
|
||||
},
|
||||
orderBy: { name: "asc" },
|
||||
});
|
||||
|
||||
return NextResponse.json(users);
|
||||
}
|
||||
|
||||
// PATCH /api/admin/users - Update a user's role
|
||||
export async function PATCH(req: Request) {
|
||||
const session = await getServerSession(authOptions);
|
||||
|
||||
if (!session || session.user.role !== "ADMIN") {
|
||||
return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
|
||||
}
|
||||
|
||||
const { userId, role } = await req.json();
|
||||
|
||||
if (!userId || !["EMPLOYEE", "ADMIN"].includes(role)) {
|
||||
return NextResponse.json({ error: "Invalid request" }, { status: 400 });
|
||||
}
|
||||
|
||||
// Prevent admins from demoting themselves
|
||||
if (userId === session.user.id && role === "EMPLOYEE") {
|
||||
return NextResponse.json({ error: "You cannot remove your own admin privileges" }, { status: 403 });
|
||||
}
|
||||
|
||||
const updated = await prisma.user.update({
|
||||
where: { id: userId },
|
||||
data: { role },
|
||||
select: { id: true, name: true, email: true, role: true },
|
||||
});
|
||||
|
||||
return NextResponse.json(updated);
|
||||
}
|
||||
@@ -1,16 +1,19 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { Search, ChevronDown, ChevronUp, ExternalLink, FileText, User, Calendar, Settings, ListChecks, Save } from "lucide-react";
|
||||
import { Search, ChevronDown, ChevronUp, ExternalLink, FileText, User, Users, Calendar, Settings, ListChecks, Save, ShieldCheck, ShieldOff } from "lucide-react";
|
||||
|
||||
export default function AdminDashboard() {
|
||||
const [reports, setReports] = useState<any[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [search, setSearch] = useState("");
|
||||
const [expandedId, setExpandedId] = useState<string | null>(null);
|
||||
const [tab, setTab] = useState<"REPORTS" | "SETTINGS">("REPORTS");
|
||||
const [tab, setTab] = useState<"REPORTS" | "USERS" | "SETTINGS">("REPORTS");
|
||||
const [folderId, setFolderId] = useState("");
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [users, setUsers] = useState<any[]>([]);
|
||||
const [usersLoading, setUsersLoading] = useState(false);
|
||||
const [togglingId, setTogglingId] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
fetchReports();
|
||||
@@ -45,6 +48,41 @@ export default function AdminDashboard() {
|
||||
}
|
||||
};
|
||||
|
||||
const fetchUsers = async () => {
|
||||
setUsersLoading(true);
|
||||
try {
|
||||
const res = await fetch("/api/admin/users");
|
||||
const data = await res.json();
|
||||
setUsers(data);
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch users");
|
||||
} finally {
|
||||
setUsersLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const toggleRole = async (userId: string, currentRole: string) => {
|
||||
setTogglingId(userId);
|
||||
const newRole = currentRole === "ADMIN" ? "EMPLOYEE" : "ADMIN";
|
||||
try {
|
||||
const res = await fetch("/api/admin/users", {
|
||||
method: "PATCH",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ userId, role: newRole }),
|
||||
});
|
||||
const data = await res.json();
|
||||
if (data.error) {
|
||||
alert(data.error);
|
||||
} else {
|
||||
setUsers(users.map(u => u.id === userId ? { ...u, role: newRole } : u));
|
||||
}
|
||||
} catch (error) {
|
||||
alert("Failed to update role");
|
||||
} finally {
|
||||
setTogglingId(null);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchReports = async () => {
|
||||
try {
|
||||
const res = await fetch("/api/reports");
|
||||
@@ -76,6 +114,14 @@ export default function AdminDashboard() {
|
||||
>
|
||||
<ListChecks size={18} /> Reports
|
||||
</button>
|
||||
<button
|
||||
onClick={() => { setTab("USERS"); if (!users.length) fetchUsers(); }}
|
||||
className={`flex items-center gap-2 px-4 py-2 rounded-lg transition-colors text-sm font-medium ${
|
||||
tab === "USERS" ? "bg-accent-primary text-white" : "hover:bg-white/5 text-text-dim"
|
||||
}`}
|
||||
>
|
||||
<Users size={18} /> Users
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setTab("SETTINGS")}
|
||||
className={`flex items-center gap-2 px-4 py-2 rounded-lg transition-colors text-sm font-medium ${
|
||||
@@ -164,6 +210,81 @@ export default function AdminDashboard() {
|
||||
))}
|
||||
{filteredReports.length === 0 && <p className="text-center py-10 text-text-dim">No reports found matching your criteria.</p>}
|
||||
</div>
|
||||
) : tab === "USERS" ? (
|
||||
<div className="space-y-4 animate-fade-in">
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold flex items-center gap-2">
|
||||
<Users size={20} className="text-accent-primary" /> Employee List
|
||||
</h3>
|
||||
<p className="text-sm text-text-dim">Manage admin privileges for your team.</p>
|
||||
</div>
|
||||
|
||||
{usersLoading ? (
|
||||
<div className="text-center py-10 animate-pulse text-text-dim">Loading users...</div>
|
||||
) : (
|
||||
<div className="grid gap-3">
|
||||
{users.map((user) => {
|
||||
const lastReport = user.reports?.[0];
|
||||
return (
|
||||
<div key={user.id} className="glass-card p-4 flex items-center justify-between gap-4">
|
||||
<div className="flex items-center gap-4 min-w-0">
|
||||
{user.image ? (
|
||||
<img src={user.image} alt={user.name} className="h-10 w-10 rounded-full flex-shrink-0" />
|
||||
) : (
|
||||
<div className="h-10 w-10 rounded-full bg-accent-primary/20 flex items-center justify-center text-accent-primary flex-shrink-0">
|
||||
<User size={20} />
|
||||
</div>
|
||||
)}
|
||||
<div className="min-w-0">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<p className="font-semibold truncate">{user.name || "Unnamed"}</p>
|
||||
<span className={`text-[10px] uppercase tracking-wider px-2 py-0.5 rounded-full font-bold flex-shrink-0 ${
|
||||
user.role === "ADMIN"
|
||||
? "bg-accent-primary/20 text-accent-primary"
|
||||
: "bg-white/10 text-text-dim"
|
||||
}`}>
|
||||
{user.role}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-xs text-text-dim truncate">{user.email}</p>
|
||||
{lastReport && (
|
||||
<p className="text-[10px] text-text-dim mt-0.5">
|
||||
Last report: {new Date(lastReport.date).toLocaleDateString()} •{" "}
|
||||
<span className={lastReport.status === "SUBMITTED" ? "text-green-400" : "text-yellow-400"}>
|
||||
{lastReport.status}
|
||||
</span>
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={() => toggleRole(user.id, user.role)}
|
||||
disabled={togglingId === user.id}
|
||||
className={`flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors flex-shrink-0 disabled:opacity-50 ${
|
||||
user.role === "ADMIN"
|
||||
? "bg-red-500/10 hover:bg-red-500/20 text-red-400 border border-red-500/20"
|
||||
: "bg-accent-primary/10 hover:bg-accent-primary/20 text-accent-primary border border-accent-primary/20"
|
||||
}`}
|
||||
title={user.role === "ADMIN" ? "Remove admin privileges" : "Grant admin privileges"}
|
||||
>
|
||||
{togglingId === user.id ? (
|
||||
"..."
|
||||
) : user.role === "ADMIN" ? (
|
||||
<><ShieldOff size={16} /> Remove Admin</>
|
||||
) : (
|
||||
<><ShieldCheck size={16} /> Make Admin</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{users.length === 0 && (
|
||||
<p className="text-center py-10 text-text-dim">No users found.</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="glass-card p-8 space-y-8 animate-fade-in">
|
||||
<div className="space-y-4">
|
||||
|
||||
Reference in New Issue
Block a user