forked from cardosofelipe/fast-next-template
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
135
frontend/src/components/admin/AdminSidebar.tsx
Normal file
135
frontend/src/components/admin/AdminSidebar.tsx
Normal file
@@ -0,0 +1,135 @@
|
||||
/**
|
||||
* Admin Sidebar Navigation
|
||||
* Displays navigation links for admin section
|
||||
*/
|
||||
|
||||
'use client';
|
||||
|
||||
import Link from 'next/link';
|
||||
import { usePathname } from 'next/navigation';
|
||||
import { cn } from '@/lib/utils';
|
||||
import {
|
||||
LayoutDashboard,
|
||||
Users,
|
||||
Building2,
|
||||
Settings,
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
} from 'lucide-react';
|
||||
import { useState } from 'react';
|
||||
import { useAuth } from '@/lib/auth/AuthContext';
|
||||
|
||||
interface NavItem {
|
||||
name: string;
|
||||
href: string;
|
||||
icon: React.ComponentType<{ className?: string }>;
|
||||
}
|
||||
|
||||
const navItems: NavItem[] = [
|
||||
{
|
||||
name: 'Dashboard',
|
||||
href: '/admin',
|
||||
icon: LayoutDashboard,
|
||||
},
|
||||
{
|
||||
name: 'Users',
|
||||
href: '/admin/users',
|
||||
icon: Users,
|
||||
},
|
||||
{
|
||||
name: 'Organizations',
|
||||
href: '/admin/organizations',
|
||||
icon: Building2,
|
||||
},
|
||||
{
|
||||
name: 'Settings',
|
||||
href: '/admin/settings',
|
||||
icon: Settings,
|
||||
},
|
||||
];
|
||||
|
||||
export function AdminSidebar() {
|
||||
const pathname = usePathname();
|
||||
const { user } = useAuth();
|
||||
const [collapsed, setCollapsed] = useState(false);
|
||||
|
||||
return (
|
||||
<aside
|
||||
className={cn(
|
||||
'border-r bg-muted/40 transition-all duration-300',
|
||||
collapsed ? 'w-16' : 'w-64'
|
||||
)}
|
||||
data-testid="admin-sidebar"
|
||||
>
|
||||
<div className="flex h-full flex-col">
|
||||
{/* Sidebar Header */}
|
||||
<div className="flex h-16 items-center justify-between border-b px-4">
|
||||
{!collapsed && (
|
||||
<h2 className="text-lg font-semibold">Admin Panel</h2>
|
||||
)}
|
||||
<button
|
||||
onClick={() => setCollapsed(!collapsed)}
|
||||
className="rounded-md p-2 hover:bg-accent"
|
||||
aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
|
||||
data-testid="sidebar-toggle"
|
||||
>
|
||||
{collapsed ? (
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
) : (
|
||||
<ChevronLeft className="h-4 w-4" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Navigation Links */}
|
||||
<nav className="flex-1 space-y-1 p-2">
|
||||
{navItems.map((item) => {
|
||||
const isActive =
|
||||
pathname === item.href ||
|
||||
(item.href !== '/admin' && pathname.startsWith(item.href));
|
||||
const Icon = item.icon;
|
||||
|
||||
return (
|
||||
<Link
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
className={cn(
|
||||
'flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors',
|
||||
'hover:bg-accent hover:text-accent-foreground',
|
||||
isActive
|
||||
? 'bg-accent text-accent-foreground'
|
||||
: 'text-muted-foreground',
|
||||
collapsed && 'justify-center'
|
||||
)}
|
||||
title={collapsed ? item.name : undefined}
|
||||
data-testid={`nav-${item.name.toLowerCase()}`}
|
||||
>
|
||||
<Icon className="h-5 w-5 flex-shrink-0" />
|
||||
{!collapsed && <span>{item.name}</span>}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
|
||||
{/* User Info */}
|
||||
{!collapsed && user && (
|
||||
<div className="border-t p-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary text-primary-foreground text-sm font-medium">
|
||||
{user.first_name?.[0] || user.email[0].toUpperCase()}
|
||||
</div>
|
||||
<div className="flex-1 overflow-hidden">
|
||||
<p className="text-sm font-medium truncate">
|
||||
{user.first_name} {user.last_name}
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground truncate">
|
||||
{user.email}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
92
frontend/src/components/admin/Breadcrumbs.tsx
Normal file
92
frontend/src/components/admin/Breadcrumbs.tsx
Normal file
@@ -0,0 +1,92 @@
|
||||
/**
|
||||
* Admin Breadcrumbs
|
||||
* Displays navigation breadcrumb trail for admin pages
|
||||
*/
|
||||
|
||||
'use client';
|
||||
|
||||
import Link from 'next/link';
|
||||
import { usePathname } from 'next/navigation';
|
||||
import { ChevronRight } from 'lucide-react';
|
||||
|
||||
interface BreadcrumbItem {
|
||||
label: string;
|
||||
href: string;
|
||||
}
|
||||
|
||||
const pathLabels: Record<string, string> = {
|
||||
admin: 'Admin',
|
||||
users: 'Users',
|
||||
organizations: 'Organizations',
|
||||
settings: 'Settings',
|
||||
};
|
||||
|
||||
export function Breadcrumbs() {
|
||||
const pathname = usePathname();
|
||||
|
||||
// Generate breadcrumb items from pathname
|
||||
const generateBreadcrumbs = (): BreadcrumbItem[] => {
|
||||
const segments = pathname.split('/').filter(Boolean);
|
||||
const breadcrumbs: BreadcrumbItem[] = [];
|
||||
|
||||
let currentPath = '';
|
||||
segments.forEach((segment) => {
|
||||
currentPath += `/${segment}`;
|
||||
const label = pathLabels[segment] || segment;
|
||||
breadcrumbs.push({
|
||||
label,
|
||||
href: currentPath,
|
||||
});
|
||||
});
|
||||
|
||||
return breadcrumbs;
|
||||
};
|
||||
|
||||
const breadcrumbs = generateBreadcrumbs();
|
||||
|
||||
if (breadcrumbs.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<nav
|
||||
aria-label="Breadcrumb"
|
||||
className="border-b bg-background px-6 py-3"
|
||||
data-testid="breadcrumbs"
|
||||
>
|
||||
<ol className="flex items-center space-x-2 text-sm">
|
||||
{breadcrumbs.map((breadcrumb, index) => {
|
||||
const isLast = index === breadcrumbs.length - 1;
|
||||
|
||||
return (
|
||||
<li key={breadcrumb.href} className="flex items-center">
|
||||
{index > 0 && (
|
||||
<ChevronRight
|
||||
className="mx-2 h-4 w-4 text-muted-foreground"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
)}
|
||||
{isLast ? (
|
||||
<span
|
||||
className="font-medium text-foreground"
|
||||
aria-current="page"
|
||||
data-testid={`breadcrumb-${breadcrumb.label.toLowerCase()}`}
|
||||
>
|
||||
{breadcrumb.label}
|
||||
</span>
|
||||
) : (
|
||||
<Link
|
||||
href={breadcrumb.href}
|
||||
className="text-muted-foreground hover:text-foreground transition-colors"
|
||||
data-testid={`breadcrumb-${breadcrumb.label.toLowerCase()}`}
|
||||
>
|
||||
{breadcrumb.label}
|
||||
</Link>
|
||||
)}
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ol>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
63
frontend/src/components/admin/DashboardStats.tsx
Normal file
63
frontend/src/components/admin/DashboardStats.tsx
Normal file
@@ -0,0 +1,63 @@
|
||||
/**
|
||||
* DashboardStats Component
|
||||
* Displays admin dashboard statistics in stat cards
|
||||
*/
|
||||
|
||||
'use client';
|
||||
|
||||
import { useAdminStats } from '@/lib/api/hooks/useAdmin';
|
||||
import { StatCard } from './StatCard';
|
||||
import { Users, UserCheck, Building2, Activity } from 'lucide-react';
|
||||
import { Alert, AlertDescription } from '@/components/ui/alert';
|
||||
import { AlertCircle } from 'lucide-react';
|
||||
|
||||
export function DashboardStats() {
|
||||
const { data: stats, isLoading, isError, error } = useAdminStats();
|
||||
|
||||
if (isError) {
|
||||
return (
|
||||
<Alert variant="destructive">
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
<AlertDescription>
|
||||
Failed to load dashboard statistics: {error?.message || 'Unknown error'}
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className="grid gap-4 md:grid-cols-2 lg:grid-cols-4"
|
||||
data-testid="dashboard-stats"
|
||||
>
|
||||
<StatCard
|
||||
title="Total Users"
|
||||
value={stats?.totalUsers ?? 0}
|
||||
icon={Users}
|
||||
description="All registered users"
|
||||
loading={isLoading}
|
||||
/>
|
||||
<StatCard
|
||||
title="Active Users"
|
||||
value={stats?.activeUsers ?? 0}
|
||||
icon={UserCheck}
|
||||
description="Users with active status"
|
||||
loading={isLoading}
|
||||
/>
|
||||
<StatCard
|
||||
title="Organizations"
|
||||
value={stats?.totalOrganizations ?? 0}
|
||||
icon={Building2}
|
||||
description="Total organizations"
|
||||
loading={isLoading}
|
||||
/>
|
||||
<StatCard
|
||||
title="Active Sessions"
|
||||
value={stats?.totalSessions ?? 0}
|
||||
icon={Activity}
|
||||
description="Current active sessions"
|
||||
loading={isLoading}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
98
frontend/src/components/admin/StatCard.tsx
Normal file
98
frontend/src/components/admin/StatCard.tsx
Normal file
@@ -0,0 +1,98 @@
|
||||
/**
|
||||
* StatCard Component
|
||||
* Displays a statistic card with icon, title, and value
|
||||
*/
|
||||
|
||||
import { LucideIcon } from 'lucide-react';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
interface StatCardProps {
|
||||
title: string;
|
||||
value: string | number;
|
||||
icon: LucideIcon;
|
||||
description?: string;
|
||||
loading?: boolean;
|
||||
trend?: {
|
||||
value: number;
|
||||
label: string;
|
||||
isPositive?: boolean;
|
||||
};
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function StatCard({
|
||||
title,
|
||||
value,
|
||||
icon: Icon,
|
||||
description,
|
||||
loading = false,
|
||||
trend,
|
||||
className,
|
||||
}: StatCardProps) {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'rounded-lg border bg-card p-6 shadow-sm',
|
||||
loading && 'animate-pulse',
|
||||
className
|
||||
)}
|
||||
data-testid="stat-card"
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="space-y-1 flex-1">
|
||||
<p
|
||||
className="text-sm font-medium text-muted-foreground"
|
||||
data-testid="stat-title"
|
||||
>
|
||||
{title}
|
||||
</p>
|
||||
<div className="flex items-baseline gap-2">
|
||||
{loading ? (
|
||||
<div className="h-8 w-24 bg-muted rounded" />
|
||||
) : (
|
||||
<p
|
||||
className="text-3xl font-bold tracking-tight"
|
||||
data-testid="stat-value"
|
||||
>
|
||||
{value}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
{description && !loading && (
|
||||
<p
|
||||
className="text-xs text-muted-foreground"
|
||||
data-testid="stat-description"
|
||||
>
|
||||
{description}
|
||||
</p>
|
||||
)}
|
||||
{trend && !loading && (
|
||||
<div
|
||||
className={cn(
|
||||
'text-xs font-medium',
|
||||
trend.isPositive ? 'text-green-600' : 'text-red-600'
|
||||
)}
|
||||
data-testid="stat-trend"
|
||||
>
|
||||
{trend.isPositive ? '↑' : '↓'} {Math.abs(trend.value)}%{' '}
|
||||
{trend.label}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div
|
||||
className={cn(
|
||||
'rounded-full p-3',
|
||||
loading ? 'bg-muted' : 'bg-primary/10'
|
||||
)}
|
||||
>
|
||||
<Icon
|
||||
className={cn(
|
||||
'h-6 w-6',
|
||||
loading ? 'text-muted-foreground' : 'text-primary'
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,4 +1,6 @@
|
||||
// Admin-specific components
|
||||
// Examples: UserTable, OrganizationForm, StatisticsCard, etc.
|
||||
|
||||
export {};
|
||||
export { AdminSidebar } from './AdminSidebar';
|
||||
export { Breadcrumbs } from './Breadcrumbs';
|
||||
export { StatCard } from './StatCard';
|
||||
export { DashboardStats } from './DashboardStats';
|
||||
|
||||
Reference in New Issue
Block a user