feat: create admin page with session management and access control

src/app/admin/page.js

@@ -0,0 +1,136 @@
+"use client";
+
+import { useSession } from "next-auth/react";
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
+import Link from "next/link";
+
+export default function AdminPage() {
+	const { data: session, status } = useSession();
+	const router = useRouter();
+
+	useEffect(() => {
+		if (status === "loading") return;
+		if (!session || session.user.role !== "admin") {
+			router.push("/");
+		}
+	}, [session, status, router]);
+
+	if (status === "loading") {
+		return (
+			<div className="min-h-screen flex items-center justify-center">
+				<div className="text-lg">Loading...</div>
+			</div>
+		);
+	}
+
+	if (!session || session.user.role !== "admin") {
+		return (
+			<div className="min-h-screen flex items-center justify-center">
+				<div className="text-center">
+					<h1 className="text-2xl font-bold text-gray-800 mb-4">
+						Access Denied
+					</h1>
+					<p className="text-gray-600 mb-6">
+						You need admin privileges to access this page.
+					</p>
+					<Link
+						href="/"
+						className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+					>
+						Go Home
+					</Link>
+				</div>
+			</div>
+		);
+	}
+
+	const adminPages = [
+		{
+			title: "Users",
+			description: "Manage user accounts, roles, and permissions",
+			href: "/admin/users",
+			icon: "👥",
+			color: "bg-blue-500 hover:bg-blue-600",
+		},
+		{
+			title: "Settings",
+			description: "Configure system settings, backups, and cron jobs",
+			href: "/admin/settings",
+			icon: "⚙️",
+			color: "bg-gray-600 hover:bg-gray-700",
+		},
+		{
+			title: "Audit Logs",
+			description: "View system activity and audit trail",
+			href: "/admin/audit-logs",
+			icon: "📋",
+			color: "bg-purple-500 hover:bg-purple-600",
+		},
+	];
+
+	return (
+		<div className="min-h-screen bg-gray-50 py-8">
+			<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+				<div className="mb-8">
+					<div className="flex items-center justify-between">
+						<div>
+							<h1 className="text-3xl font-bold text-gray-900">
+								Admin Panel
+							</h1>
+							<p className="mt-2 text-gray-600">
+								Manage your application settings and users
+							</p>
+						</div>
+						<Link
+							href="/dashboard"
+							className="text-blue-600 hover:text-blue-800 flex items-center gap-1"
+						>
+							← Back to Dashboard
+						</Link>
+					</div>
+				</div>
+
+				<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+					{adminPages.map((page) => (
+						<Link
+							key={page.href}
+							href={page.href}
+							className={`${page.color} rounded-xl p-6 text-white shadow-lg transform transition-all duration-200 hover:scale-105 hover:shadow-xl`}
+						>
+							<div className="text-4xl mb-4">{page.icon}</div>
+							<h2 className="text-xl font-bold mb-2">{page.title}</h2>
+							<p className="text-white/80 text-sm">{page.description}</p>
+						</Link>
+					))}
+				</div>
+
+				<div className="mt-8 bg-white rounded-lg shadow p-6">
+					<h3 className="text-lg font-semibold text-gray-900 mb-4">
+						Quick Info
+					</h3>
+					<div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
+						<div className="bg-gray-50 rounded-lg p-4">
+							<div className="text-gray-500">Logged in as</div>
+							<div className="font-medium text-gray-900">
+								{session.user.name}
+							</div>
+						</div>
+						<div className="bg-gray-50 rounded-lg p-4">
+							<div className="text-gray-500">Role</div>
+							<div className="font-medium text-gray-900 capitalize">
+								{session.user.role}
+							</div>
+						</div>
+						<div className="bg-gray-50 rounded-lg p-4">
+							<div className="text-gray-500">Environment</div>
+							<div className="font-medium text-gray-900">
+								{process.env.NODE_ENV || "development"}
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+}