feat(auth): add role guards and protect admin routes

src/components/layout/sidebar.tsx

@@ -5,12 +5,12 @@ import {
   Clipboard,
   Home,
   Package,
+  Shield,
   ShoppingCart,
   User,
 } from "lucide-react"
 import Link from "next/link"
 import { usePathname } from "next/navigation"
-
 import {
   Sidebar,
   SidebarContent,
@@ -21,6 +21,7 @@ import {
   SidebarMenuButton,
   SidebarMenuItem,
 } from "@/components/ui/sidebar"
+import type { UserRole } from "@/generated/prisma/client"
 
 import { SidebarSection } from "./sidebar/sidebarSection"
 
@@ -72,9 +73,22 @@ const items = [
 ]
 
 export default function AppSidebar({
+  userRole,
   ...props
-}: React.ComponentProps<typeof Sidebar>) {
+}: React.ComponentProps<typeof Sidebar> & { userRole?: UserRole }) {
   const pathname = usePathname()
+  const visibleItems =
+    userRole === "ADMIN"
+      ? [
+          ...items,
+          {
+            type: "item",
+            title: "Users",
+            url: "/admin/users",
+            icon: Shield,
+          },
+        ]
+      : items
 
   return (
     <Sidebar {...props}>
@@ -88,7 +102,7 @@ export default function AppSidebar({
         <SidebarGroup>
           <SidebarGroupContent>
             <SidebarMenu>
-              {items.map((item) => {
+              {visibleItems.map((item) => {
                 if (item.type === "item") {
                   const isActive =
                     item.url === "/"
@@ -96,7 +110,7 @@ export default function AppSidebar({
                       : pathname.startsWith(item.url)
 
                   return (
-                    <SidebarMenuItem key={`item-${item}`}>
+                    <SidebarMenuItem key={`item-${item.title}`}>
                       <SidebarMenuButton asChild isActive={isActive}>
                         <Link href={item.url}>
                           <item.icon className="mr-2 h-4 w-4" />
@@ -109,7 +123,7 @@ export default function AppSidebar({
                 if (item.type === "section") {
                   return (
                     <SidebarSection
-                      key={`section-${item}`}
+                      key={`section-${item.title}`}
                       title={item.title}
                       icon={item.icon}
                       items={item.items}