Add admin hooks, components, and tests for statistics, navigation, and access control

- Introduced `useAdminStats`, `useAdminUsers`, and `useAdminOrganizations` hooks for admin data fetching with React Query.
- Added `AdminSidebar`, `Breadcrumbs`, and related navigation components for the admin section.
- Implemented comprehensive unit and integration tests for admin components.
- Created E2E tests for admin access control, navigation, and dashboard functionality.
- Updated exports to include new admin components.
This commit is contained in:
Felipe Cardoso
2025-11-06 00:35:11 +01:00
parent 11a78dfcc3
commit 67860c68e3
17 changed files with 2264 additions and 62 deletions

View File

@@ -1,11 +1,14 @@
/**
* Admin Dashboard Page
* Placeholder for future admin functionality
* Displays admin statistics and management options
* Protected by AuthGuard in layout with requireAdmin=true
*/
/* istanbul ignore next - Next.js type import for metadata */
import type { Metadata } from 'next';
import Link from 'next/link';
import { DashboardStats } from '@/components/admin';
import { Users, Building2, Settings } from 'lucide-react';
/* istanbul ignore next - Next.js metadata, not executable code */
export const metadata: Metadata = {
@@ -14,8 +17,9 @@ export const metadata: Metadata = {
export default function AdminPage() {
return (
<div className="container mx-auto px-4 py-8">
<div className="space-y-6">
<div className="container mx-auto px-6 py-8">
<div className="space-y-8">
{/* Page Header */}
<div>
<h1 className="text-3xl font-bold tracking-tight">
Admin Dashboard
@@ -25,35 +29,48 @@ export default function AdminPage() {
</p>
</div>
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
<div className="rounded-lg border bg-card p-6">
<h3 className="font-semibold text-lg mb-2">Users</h3>
<p className="text-sm text-muted-foreground">
Manage user accounts and permissions
</p>
<p className="text-xs text-muted-foreground mt-4">
Coming soon...
</p>
</div>
{/* Stats Grid */}
<DashboardStats />
<div className="rounded-lg border bg-card p-6">
<h3 className="font-semibold text-lg mb-2">Organizations</h3>
<p className="text-sm text-muted-foreground">
View and manage organizations
</p>
<p className="text-xs text-muted-foreground mt-4">
Coming soon...
</p>
</div>
{/* Quick Actions */}
<div>
<h2 className="text-xl font-semibold mb-4">Quick Actions</h2>
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
<Link href="/admin/users" className="block">
<div className="rounded-lg border bg-card p-6 transition-colors hover:bg-accent cursor-pointer">
<div className="flex items-center gap-3 mb-2">
<Users className="h-5 w-5 text-primary" />
<h3 className="font-semibold">User Management</h3>
</div>
<p className="text-sm text-muted-foreground">
View, create, and manage user accounts
</p>
</div>
</Link>
<div className="rounded-lg border bg-card p-6">
<h3 className="font-semibold text-lg mb-2">System</h3>
<p className="text-sm text-muted-foreground">
System settings and configuration
</p>
<p className="text-xs text-muted-foreground mt-4">
Coming soon...
</p>
<Link href="/admin/organizations" className="block">
<div className="rounded-lg border bg-card p-6 transition-colors hover:bg-accent cursor-pointer">
<div className="flex items-center gap-3 mb-2">
<Building2 className="h-5 w-5 text-primary" />
<h3 className="font-semibold">Organizations</h3>
</div>
<p className="text-sm text-muted-foreground">
Manage organizations and their members
</p>
</div>
</Link>
<Link href="/admin/settings" className="block">
<div className="rounded-lg border bg-card p-6 transition-colors hover:bg-accent cursor-pointer">
<div className="flex items-center gap-3 mb-2">
<Settings className="h-5 w-5 text-primary" />
<h3 className="font-semibold">System Settings</h3>
</div>
<p className="text-sm text-muted-foreground">
Configure system-wide settings
</p>
</div>
</Link>
</div>
</div>
</div>