Fix admin dashboard auto-refresh

src/components/moderation/ReportsQueue.tsx

@@ -10,6 +10,7 @@ import { useToast } from '@/hooks/use-toast';
 import { format } from 'date-fns';
 import { useAdminSettings } from '@/hooks/useAdminSettings';
 import { useAuth } from '@/hooks/useAuth';
+import { smartMergeArray } from '@/lib/smartStateUpdate';
 
 interface Report {
   id: string;
@@ -49,13 +50,19 @@ export const ReportsQueue = forwardRef<ReportsQueueRef>((props, ref) => {
   const [loading, setLoading] = useState(true);
   const [isInitialLoad, setIsInitialLoad] = useState(true);
   const [actionLoading, setActionLoading] = useState<string | null>(null);
+  const [newReportsCount, setNewReportsCount] = useState(0);
   const { toast } = useToast();
   const { user } = useAuth();
 
   // Get admin settings for polling configuration
-  const { getAdminPanelRefreshMode, getAdminPanelPollInterval } = useAdminSettings();
+  const { 
+    getAdminPanelRefreshMode, 
+    getAdminPanelPollInterval,
+    getAutoRefreshStrategy 
+  } = useAdminSettings();
   const refreshMode = getAdminPanelRefreshMode();
   const pollInterval = getAdminPanelPollInterval();
+  const refreshStrategy = getAutoRefreshStrategy();
 
   // Expose refresh method via ref
   useImperativeHandle(ref, () => ({
@@ -120,7 +127,27 @@ export const ReportsQueue = forwardRef<ReportsQueueRef>((props, ref) => {
         })
       );
 
-      setReports(reportsWithContent);
+      // Use smart merging for silent refreshes if strategy is 'merge'
+      if (silent && refreshStrategy === 'merge') {
+        const mergeResult = smartMergeArray(reports, reportsWithContent, {
+          compareFields: ['status'],
+          preserveOrder: true,
+          addToTop: true,
+        });
+
+        if (mergeResult.hasChanges) {
+          setReports(mergeResult.items);
+          
+          // Update new reports count
+          if (mergeResult.changes.added.length > 0) {
+            setNewReportsCount(prev => prev + mergeResult.changes.added.length);
+          }
+        }
+      } else {
+        // Full replacement for non-silent refreshes or 'replace' strategy
+        setReports(reportsWithContent);
+        setNewReportsCount(0);
+      }
     } catch (error) {
       console.error('Error fetching reports:', error);
       toast({
@@ -213,6 +240,24 @@ export const ReportsQueue = forwardRef<ReportsQueueRef>((props, ref) => {
 
   return (
     <div className="space-y-6">
+      {/* New Reports Notification */}
+      {newReportsCount > 0 && (
+        <div className="flex items-center justify-center">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => {
+              setNewReportsCount(0);
+              fetchReports(false);
+            }}
+            className="flex items-center gap-2 border-destructive/50 bg-destructive/5 hover:bg-destructive/10"
+          >
+            <Flag className="w-4 h-4" />
+            Show {newReportsCount} new {newReportsCount === 1 ? 'report' : 'reports'}
+          </Button>
+        </div>
+      )}
+
       {reports.map((report) => (
         <Card key={report.id} className="border-l-4 border-l-red-500">
           <CardHeader className="pb-4">