Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 | 1x 7x 7x | // src/pages/admin/AdminStatsPage.tsx
import React from 'react';
import { Link } from 'react-router-dom';
import { LoadingSpinner } from '../../components/LoadingSpinner';
import { useApplicationStatsQuery } from '../../hooks/queries/useApplicationStatsQuery';
import { ChartBarIcon } from '../../components/icons/ChartBarIcon';
import { UsersIcon } from '../../components/icons/UsersIcon';
import { DocumentDuplicateIcon } from '../../components/icons/DocumentDuplicateIcon';
import { BuildingStorefrontIcon } from '../../components/icons/BuildingStorefrontIcon';
import { BellAlertIcon } from '../../components/icons/BellAlertIcon';
import { BookOpenIcon } from '../../components/icons/BookOpenIcon';
import { StatCard } from '../../components/StatCard';
export const AdminStatsPage: React.FC = () => {
// Use TanStack Query for data fetching (ADR-0005 Phase 5)
const { data: stats, isLoading, error } = useApplicationStatsQuery();
return (
<div className="max-w-5xl mx-auto py-8 px-4">
<div className="mb-8">
<Link to="/admin" className="text-brand-primary hover:underline">
← Back to Admin Dashboard
</Link>
<h1 className="text-3xl font-bold text-gray-800 dark:text-white mt-2">
Application Statistics
</h1>
<p className="text-gray-500 dark:text-gray-400">
A high-level overview of key application metrics.
</p>
</div>
{isLoading && (
<div
role="status"
aria-label="Loading stats"
className="flex justify-center items-center h-64"
>
<LoadingSpinner />
</div>
)}
{error && (
<div className="text-red-500 bg-red-100 dark:bg-red-900/20 p-4 rounded-lg">
{error.message}
</div>
)}
{stats && !isLoading && !error && (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<StatCard
title="Total Users"
value={stats.userCount.toLocaleString()}
icon={<UsersIcon className="w-6 h-6" />}
/>
<StatCard
title="Flyers Processed"
value={stats.flyerCount.toLocaleString()}
icon={<DocumentDuplicateIcon className="w-6 h-6" />}
/>
<StatCard
title="Total Flyer Items"
value={stats.flyerItemCount.toLocaleString()}
icon={<ChartBarIcon className="w-6 h-6" />}
/>
<StatCard
title="Stores Tracked"
value={stats.storeCount.toLocaleString()}
icon={<BuildingStorefrontIcon className="w-6 h-6" />}
/>
<StatCard
title="Pending Corrections"
value={stats.pendingCorrectionCount.toLocaleString()}
icon={<BellAlertIcon className="w-6 h-6" />}
/>
<StatCard
title="Total Recipes"
value={stats.recipeCount.toLocaleString()}
icon={<BookOpenIcon className="w-6 h-6" />}
/>
</div>
)}
</div>
);
};
|