feat: enforce admin role checks in layouts and navbar navigation

shop/app/admin/layout.tsx

@@ -1,11 +1,28 @@
 import Link from 'next/link'
 import { LayoutDashboard, Package, Settings, Users, LogOut, LayoutGrid, ShoppingCart } from 'lucide-react'
 
-export default function AdminLayout({
+import { redirect } from 'next/navigation'
+import { createClient } from '@/lib/supabase/server'
+
+export default async function AdminLayout({
   children,
 }: {
   children: React.ReactNode
 }) {
+  const supabase = await createClient()
+  const { data: { user } } = await supabase.auth.getUser()
+  if (!user) redirect('/auth/login')
+
+  const { data: userData } = await supabase
+    .from('users')
+    .select('role')
+    .eq('id', user.id)
+    .single()
+
+  if (!userData || userData.role !== 'admin') {
+    redirect('/')
+  }
+
   return (
     <div className="flex min-h-screen bg-[#020617] text-white">
       {/* Sidebar */}

shop/components/Navbar.tsx

@@ -38,12 +38,23 @@ export async function Navbar() {
   );
 
   let user = null;
+  let role = "partner";
   try {
     const { data } = await supabase.auth.getUser();
     user = data.user;
+    if (user) {
+      const { data: dbUser } = await supabase
+        .from("users")
+        .select("role")
+        .eq("id", user.id)
+        .single();
+      if (dbUser) {
+        role = dbUser.role;
+      }
+    }
   } catch (error) {
     console.error("Fehler beim Abrufen des Users in Navbar:", error);
   }
 
-  return <NavbarClient user={user} />;
+  return <NavbarClient user={user} role={role} />;
 }

shop/components/NavbarClient.tsx

@@ -10,11 +10,13 @@ import { Button } from "@/components/ui/button";
 
 interface NavbarClientProps {
   user: User | null;
+  role?: string;
 }
 
-export function NavbarClient({ user }: NavbarClientProps) {
+export function NavbarClient({ user, role = "partner" }: NavbarClientProps) {
   const router = useRouter();
   const [currentUser, setCurrentUser] = useState<User | null>(user);
+  const [userRole, setUserRole] = useState<string>(role);
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
   const [open, setOpen] = useState(false);
 
@@ -53,8 +55,24 @@ export function NavbarClient({ user }: NavbarClientProps) {
   useEffect(() => {
     const {
       data: { subscription },
-    } = supabase.auth.onAuthStateChange((event, session) => {
+    } = supabase.auth.onAuthStateChange(async (event, session) => {
       setCurrentUser(session?.user ?? null);
+      if (session?.user) {
+        try {
+          const { data } = await supabase
+            .from("users")
+            .select("role")
+            .eq("id", session.user.id)
+            .single();
+          if (data) {
+            setUserRole(data.role);
+          }
+        } catch {
+          setUserRole("partner");
+        }
+      } else {
+        setUserRole("partner");
+      }
     });
 
     return () => {
@@ -131,20 +149,48 @@ export function NavbarClient({ user }: NavbarClientProps) {
                   <div className="px-3 py-1.5 text-[11px] truncate border-b text-slate-400 border-slate-100 dark:border-white/5 mb-1">
                     {currentUser.email}
                   </div>
-                  <Link
+                  {userRole === "admin" ? (
-                    href="/account-kunden"
+                    <>
-                    onClick={() => setOpen(false)}
+                      <Link
-                    className="block px-3 py-2 text-sm rounded-lg font-medium hover:bg-slate-100 dark:hover:bg-white/5"
+                        href="/admin"
-                  >
+                        onClick={() => setOpen(false)}
-                    Account Einstellungen
+                        className="block px-3 py-2 text-sm rounded-lg font-medium hover:bg-slate-100 dark:hover:bg-white/5"
-                  </Link>
+                      >
-                  <Link
+                        Dashboard
-                    href="/my-customers"
+                      </Link>
-                    onClick={() => setOpen(false)}
+                      <Link
-                    className="block px-3 py-2 text-sm rounded-lg font-medium hover:bg-slate-100 dark:hover:bg-white/5"
+                        href="/admin/einstellungen"
-                  >
+                        onClick={() => setOpen(false)}
-                    Kundenliste
+                        className="block px-3 py-2 text-sm rounded-lg font-medium hover:bg-slate-100 dark:hover:bg-white/5"
-                  </Link>
+                      >
+                        Admin Einstellungen
+                      </Link>
+                      <Link
+                        href="/admin/users"
+                        onClick={() => setOpen(false)}
+                        className="block px-3 py-2 text-sm rounded-lg font-medium hover:bg-slate-100 dark:hover:bg-white/5"
+                      >
+                        Benutzerverwaltung
+                      </Link>
+                    </>
+                  ) : (
+                    <>
+                      <Link
+                        href="/account-kunden"
+                        onClick={() => setOpen(false)}
+                        className="block px-3 py-2 text-sm rounded-lg font-medium hover:bg-slate-100 dark:hover:bg-white/5"
+                      >
+                        Account Einstellungen
+                      </Link>
+                      <Link
+                        href="/my-customers"
+                        onClick={() => setOpen(false)}
+                        className="block px-3 py-2 text-sm rounded-lg font-medium hover:bg-slate-100 dark:hover:bg-white/5"
+                      >
+                        Kundenliste
+                      </Link>
+                    </>
+                  )}
                   <hr className="my-1 border-slate-100 dark:border-white/5" />
                   <button
                     onClick={handleSignOut}
@@ -205,13 +251,34 @@ export function NavbarClient({ user }: NavbarClientProps) {
             <>
               <div className="h-px bg-white/5 my-1" />
               <div className="text-xs text-slate-500 px-1">Mein Account ({currentUser.email})</div>
-              <Link
+              {userRole === "admin" ? (
-                className="text-lg font-medium text-slate-300 hover:text-white transition-colors py-2"
+                <>
-                href="/my-customers"
+                  <Link
-                onClick={() => setIsMobileMenuOpen(false)}
+                    className="text-lg font-medium text-slate-300 hover:text-white transition-colors py-2"
-              >
+                    href="/admin"
-                Account Kunden
+                    onClick={() => setIsMobileMenuOpen(false)}
-              </Link>
+                  >
+                    Dashboard
+                  </Link>
+                  <Link
+                    className="text-lg font-medium text-slate-300 hover:text-white transition-colors py-2"
+                    href="/admin/einstellungen"
+                    onClick={() => setIsMobileMenuOpen(false)}
+                  >
+                    Admin Einstellungen
+                  </Link>
+                </>
+              ) : (
+                <>
+                  <Link
+                    className="text-lg font-medium text-slate-300 hover:text-white transition-colors py-2"
+                    href="/my-customers"
+                    onClick={() => setIsMobileMenuOpen(false)}
+                  >
+                    Kundenliste
+                  </Link>
+                </>
+              )}
             </>
           )}