Refactor refresh button functionality

src/pages/Admin.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useState, useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Shield, Users, FileText, Flag, AlertCircle } from 'lucide-react';
 import { useUserRole } from '@/hooks/useUserRole';
@@ -15,6 +15,11 @@ export default function Admin() {
   const { user, loading: authLoading } = useAuth();
   const { isModerator, loading: roleLoading } = useUserRole();
   const navigate = useNavigate();
+  const [refreshKey, setRefreshKey] = useState(0);
+
+  const handleRefresh = useCallback(() => {
+    setRefreshKey(prev => prev + 1);
+  }, []);
 
   useEffect(() => {
     if (!authLoading && !roleLoading) {
@@ -49,7 +54,7 @@ export default function Admin() {
 
   return (
     <>
-      <AdminHeader />
+      <AdminHeader onRefresh={handleRefresh} />
       <div className="container mx-auto px-4 py-8">
         <div className="mb-8">
           <p className="text-muted-foreground">
@@ -123,11 +128,11 @@ export default function Admin() {
             </TabsList>
             
             <TabsContent value="queue">
-              <ModerationQueue />
+              <ModerationQueue key={`moderation-queue-${refreshKey}`} />
             </TabsContent>
             
             <TabsContent value="reports">
-              <ReportsQueue />
+              <ReportsQueue key={`reports-queue-${refreshKey}`} />
             </TabsContent>
           </Tabs>
         </CardContent>
@@ -145,7 +150,7 @@ export default function Admin() {
           </CardDescription>
         </CardHeader>
         <CardContent>
-          <UserManagement />
+          <UserManagement key={`user-management-${refreshKey}`} />
         </CardContent>
       </Card>
       </div>