9c72fe87f9
- Introduced constants for admin hooks: `STATS_FETCH_LIMIT`, `DEFAULT_PAGE_LIMIT`, and `STATS_REFETCH_INTERVAL` to enhance readability and maintainability. - Updated query guards to ensure data fetching is restricted to superusers. - Enhanced accessibility across admin components by adding `aria-hidden` attributes and improving focus-visible styles. - Simplified `useAdminStats`, `useAdminUsers`, and `useAdminOrganizations` with shared constants. - Added 403 Forbidden page with proper structure, styling, and tests. - Implemented new tests for admin hooks, DashboardStats, AdminLayout, and ForbiddenPage for better coverage.
64 lines
1.7 KiB
TypeScript
64 lines
1.7 KiB
TypeScript
/**
|
|
* 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" aria-hidden="true" />
|
|
<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>
|
|
);
|
|
}
|