progress enforcing adr-0005

src/pages/admin/AdminStatsPage.tsx

@@ -1,9 +1,8 @@
 // src/pages/admin/AdminStatsPage.tsx
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { Link } from 'react-router-dom';
-import { getApplicationStats, AppStats } from '../../services/apiClient';
-import { logger } from '../../services/logger.client';
 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';
@@ -13,29 +12,8 @@ import { BookOpenIcon } from '../../components/icons/BookOpenIcon';
 import { StatCard } from '../../components/StatCard';
 
 export const AdminStatsPage: React.FC = () => {
-  const [stats, setStats] = useState<AppStats | null>(null);
-  const [isLoading, setIsLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect(() => {
-    const fetchStats = async () => {
-      setIsLoading(true);
-      setError(null);
-      try {
-        const response = await getApplicationStats();
-        const data = await response.json();
-        setStats(data);
-      } catch (err) {
-        const errorMessage = err instanceof Error ? err.message : 'An unknown error occurred.';
-        logger.error({ err }, 'Failed to fetch application stats');
-        setError(errorMessage);
-      } finally {
-        setIsLoading(false);
-      }
-    };
-
-    fetchStats();
-  }, []);
+  // 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">
@@ -61,7 +39,9 @@ export const AdminStatsPage: React.FC = () => {
         </div>
       )}
       {error && (
-        <div className="text-red-500 bg-red-100 dark:bg-red-900/20 p-4 rounded-lg">{error}</div>
+        <div className="text-red-500 bg-red-100 dark:bg-red-900/20 p-4 rounded-lg">
+          {error.message}
+        </div>
       )}
 
       {stats && !isLoading && !error && (