feat: Implement admin dashboard with user management, statistics, and role-based access control.

components/layout/header.tsx

@@ -13,7 +13,8 @@ import {
   LogOut,
   User,
   Menu,
-  Keyboard
+  Keyboard,
+  LayoutDashboard
 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import {
@@ -49,6 +50,7 @@ interface HeaderProps {
     name?: string | null;
     email?: string | null;
     image?: string | null;
+    isAdmin?: boolean;
   } | null;
 }
 
@@ -90,6 +92,20 @@ export function Header({ user }: HeaderProps) {
                   {item.label}
                 </Link>
               ))}
+              {user?.isAdmin && (
+                <Link
+                  href="/admin"
+                  className={cn(
+                    'flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-md transition-colors',
+                    pathname.startsWith('/admin')
+                      ? 'bg-accent text-accent-foreground'
+                      : 'hover:bg-accent hover:text-accent-foreground'
+                  )}
+                >
+                  <LayoutDashboard className="h-4 w-4" />
+                  Admin Panel
+                </Link>
+              )}
             </nav>
           </SheetContent>
         </Sheet>
@@ -117,6 +133,20 @@ export function Header({ user }: HeaderProps) {
               {item.label}
             </Link>
           ))}
+          {user?.isAdmin && (
+            <Link
+              href="/admin"
+              className={cn(
+                'flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-md transition-colors',
+                pathname.startsWith('/admin')
+                  ? 'bg-accent text-accent-foreground'
+                  : 'hover:bg-accent/50'
+              )}
+            >
+              <LayoutDashboard className="h-4 w-4" />
+              Admin Panel
+            </Link>
+          )}
         </nav>
 
         {/* Right side */}
@@ -149,6 +179,14 @@ export function Header({ user }: HeaderProps) {
                   </div>
                 </div>
                 <DropdownMenuSeparator />
+                {user.isAdmin && (
+                  <DropdownMenuItem asChild>
+                    <Link href="/admin">
+                      <LayoutDashboard className="h-4 w-4 mr-2" />
+                      Admin Panel
+                    </Link>
+                  </DropdownMenuItem>
+                )}
                 <DropdownMenuItem asChild>
                   <Link href="/settings">
                     <Settings className="h-4 w-4 mr-2" />

components/ui/table.tsx

@@ -0,0 +1,101 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return (
+    <div data-slot="table-container" className="relative w-full overflow-x-auto">
+      <table
+        data-slot="table"
+        className={cn("w-full caption-bottom text-xs", className)}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn("[&_tr]:border-b", className)}
+      {...props}
+    />
+  )
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  )
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn("bg-muted/50 border-t font-medium [&>tr]:last:border-b-0", className)}
+      {...props}
+    />
+  )
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn("hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors", className)}
+      {...props}
+    />
+  )
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn("text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0", className)}
+      {...props}
+    />
+  )
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn("p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0", className)}
+      {...props}
+    />
+  )
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("text-muted-foreground mt-4 text-xs", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}