admin board

src/app/api/admin/users/route.ts

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

src/components/AdminDashboard.tsx

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