107 lines
4.2 KiB
TypeScript
107 lines
4.2 KiB
TypeScript
"use client";
|
|
|
|
import { signOut, useSession } from "next-auth/react";
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
|
|
export default function AdminLayout({
|
|
children,
|
|
}: {
|
|
children: React.ReactNode;
|
|
}) {
|
|
const pathname = usePathname();
|
|
const { data: session } = useSession();
|
|
const userRole = (session?.user as any)?.role;
|
|
const username = session?.user?.name || '';
|
|
const isAdmin = userRole === 'ADMIN';
|
|
const isSuperAdmin = username === 'admin';
|
|
|
|
const allNavigation = [
|
|
{ name: "Dashboard", href: "/admin", roles: ['ADMIN', 'VIEWER'], superAdminOnly: false },
|
|
{ name: "Devices", href: "/admin/devices", roles: ['ADMIN', 'VIEWER'], superAdminOnly: false },
|
|
{ name: "MQTT Provisioning", href: "/admin/mqtt", roles: ['ADMIN'], superAdminOnly: false },
|
|
{ name: "Setup Guide", href: "/admin/setup", roles: ['ADMIN', 'VIEWER'], superAdminOnly: false },
|
|
{ name: "Users", href: "/admin/users", roles: ['ADMIN'], superAdminOnly: false },
|
|
{ name: "Settings", href: "/admin/settings", roles: ['ADMIN'], superAdminOnly: true },
|
|
{ name: "Emails", href: "/admin/emails", roles: ['ADMIN'], superAdminOnly: true },
|
|
];
|
|
|
|
// Filter navigation based on user role and super admin status
|
|
const navigation = allNavigation.filter(item => {
|
|
const hasRole = item.roles.includes(userRole as string);
|
|
const hasAccess = item.superAdminOnly ? isSuperAdmin : true;
|
|
return hasRole && hasAccess;
|
|
});
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gray-100">
|
|
{/* Header */}
|
|
<header className="bg-white shadow">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
|
|
{/* Top row: Title + User Info + Actions */}
|
|
<div className="flex justify-between items-center mb-3 lg:mb-0">
|
|
<div>
|
|
<h1 className="text-xl sm:text-2xl font-bold text-black">
|
|
{isAdmin ? 'Admin Panel' : 'Dashboard'}
|
|
</h1>
|
|
</div>
|
|
<div className="flex gap-2 sm:gap-4 items-center">
|
|
{/* User info */}
|
|
<div className="flex items-center gap-2 text-xs sm:text-sm">
|
|
<span className="text-gray-600">Angemeldet als:</span>
|
|
<span className="font-semibold text-black">{username || session?.user?.email}</span>
|
|
{!isAdmin && (
|
|
<span className="px-2 py-0.5 bg-blue-100 text-blue-800 rounded text-xs">Viewer</span>
|
|
)}
|
|
{isAdmin && (
|
|
<span className="px-2 py-0.5 bg-red-100 text-red-800 rounded text-xs">Admin</span>
|
|
)}
|
|
</div>
|
|
{/* Actions */}
|
|
<div className="flex gap-2 items-center border-l border-gray-300 pl-2 sm:pl-4">
|
|
<Link
|
|
href="/map"
|
|
className="px-2 sm:px-4 py-2 text-sm text-black font-semibold hover:text-blue-600"
|
|
>
|
|
Map
|
|
</Link>
|
|
<button
|
|
onClick={async () => {
|
|
await signOut({ redirect: false });
|
|
window.location.href = '/login';
|
|
}}
|
|
className="px-2 sm:px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 text-sm font-semibold"
|
|
>
|
|
Logout
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Navigation row (scrollable on mobile) */}
|
|
<nav className="flex gap-2 overflow-x-auto lg:gap-4 pb-2 lg:pb-0 -mx-4 px-4 sm:mx-0 sm:px-0">
|
|
{navigation.map((item) => (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
className={`px-3 py-2 rounded-md text-sm font-semibold transition-colors whitespace-nowrap ${
|
|
pathname === item.href
|
|
? "bg-blue-600 text-white"
|
|
: "text-black hover:bg-gray-200"
|
|
}`}
|
|
>
|
|
{item.name}
|
|
</Link>
|
|
))}
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
{/* Main Content */}
|
|
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
|
{children}
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|