Your commit message here

src/components/auth/AuthProvider.js

@@ -0,0 +1,11 @@
+"use client"
+
+import { SessionProvider } from "next-auth/react"
+
+export function AuthProvider({ children }) {
+  return (
+    <SessionProvider>
+      {children}
+    </SessionProvider>
+  )
+}

src/components/ui/Navigation.js

@@ -2,9 +2,12 @@
 
 import Link from "next/link";
 import { usePathname } from "next/navigation";
+import { useSession, signOut } from "next-auth/react";
 
 const Navigation = () => {
 	const pathname = usePathname();
+	const { data: session, status } = useSession();
+
 	const isActive = (path) => {
 		if (path === "/") return pathname === "/";
 		// Exact match for paths
@@ -13,6 +16,7 @@ const Navigation = () => {
 		if (pathname.startsWith(path + "/")) return true;
 		return false;
 	};
+
 	const navItems = [
 		{ href: "/", label: "Dashboard" },
 		{ href: "/projects", label: "Projects" },
@@ -21,6 +25,20 @@ const Navigation = () => {
 		{ href: "/contracts", label: "Contracts" },
 	];
 
+	// Add admin-only items
+	if (session?.user?.role === 'admin') {
+		navItems.push({ href: "/admin/users", label: "User Management" });
+	}
+
+	const handleSignOut = async () => {
+		await signOut({ callbackUrl: "/auth/signin" });
+	};
+
+	// Don't show navigation on auth pages
+	if (pathname.startsWith('/auth/')) {
+		return null;
+	}
+
 	return (
 		<nav className="bg-white border-b border-gray-200">
 			<div className="max-w-6xl mx-auto px-6">
@@ -31,20 +49,51 @@ const Navigation = () => {
 						</Link>
 					</div>
 
-					<div className="flex space-x-8">
-						{navItems.map((item) => (
+					<div className="flex items-center space-x-4">
+						{status === "loading" ? (
+							<div className="text-gray-500">Loading...</div>
+						) : session ? (
+							<>
+								<div className="flex space-x-8">
+									{navItems.map((item) => (
+										<Link
+											key={item.href}
+											href={item.href}
+											className={`px-3 py-2 rounded-md text-sm font-medium transition-colors ${
+												isActive(item.href)
+													? "bg-blue-100 text-blue-700"
+													: "text-gray-600 hover:text-gray-900 hover:bg-gray-50"
+											}`}
+										>
+											{item.label}
+										</Link>
+									))}
+								</div>
+								
+								<div className="flex items-center space-x-4 ml-8 pl-8 border-l border-gray-200">
+									<div className="flex items-center space-x-2">
+										<div className="text-sm">
+											<div className="font-medium text-gray-900">{session.user.name}</div>
+											<div className="text-gray-500 capitalize">{session.user.role?.replace('_', ' ')}</div>
+										</div>
+									</div>
+									
+									<button
+										onClick={handleSignOut}
+										className="bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-2 rounded-md text-sm font-medium transition-colors"
+									>
+										Sign Out
+									</button>
+								</div>
+							</>
+						) : (
 							<Link
-								key={item.href}
-								href={item.href}
-								className={`px-3 py-2 rounded-md text-sm font-medium transition-colors ${
-									isActive(item.href)
-										? "bg-blue-100 text-blue-700"
-										: "text-gray-600 hover:text-gray-900 hover:bg-gray-50"
-								}`}
+								href="/auth/signin"
+								className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors"
 							>
-								{item.label}
+								Sign In
 							</Link>
-						))}
+						)}
 					</div>
 				</div>
 			</div>