feat: Add pagination to moderation queues

src/components/moderation/ReportsQueue.tsx

@@ -5,11 +5,22 @@ import { Badge } from '@/components/ui/badge';
 import { Card, CardContent, CardHeader } from '@/components/ui/card';
 import { Textarea } from '@/components/ui/textarea';
 import { Label } from '@/components/ui/label';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from '@/components/ui/pagination';
 import { supabase } from '@/integrations/supabase/client';
 import { useToast } from '@/hooks/use-toast';
 import { format } from 'date-fns';
 import { useAdminSettings } from '@/hooks/useAdminSettings';
 import { useAuth } from '@/hooks/useAuth';
+import { useIsMobile } from '@/hooks/use-mobile';
 import { smartMergeArray } from '@/lib/smartStateUpdate';
 
 interface Report {
@@ -46,6 +57,7 @@ export interface ReportsQueueRef {
 }
 
 export const ReportsQueue = forwardRef<ReportsQueueRef>((props, ref) => {
+  const isMobile = useIsMobile();
   const [reports, setReports] = useState<Report[]>([]);
   const [loading, setLoading] = useState(true);
   const [isInitialLoad, setIsInitialLoad] = useState(true);
@@ -53,6 +65,12 @@ export const ReportsQueue = forwardRef<ReportsQueueRef>((props, ref) => {
   const [newReportsCount, setNewReportsCount] = useState(0);
   const { toast } = useToast();
   const { user } = useAuth();
+  
+  // Pagination state
+  const [currentPage, setCurrentPage] = useState(1);
+  const [pageSize, setPageSize] = useState(25);
+  const [totalCount, setTotalCount] = useState(0);
+  const totalPages = Math.ceil(totalCount / pageSize);
 
   // Get admin settings for polling configuration
   const { 
@@ -76,6 +94,18 @@ export const ReportsQueue = forwardRef<ReportsQueueRef>((props, ref) => {
         setLoading(true);
       }
 
+      // Get total count
+      const { count } = await supabase
+        .from('reports')
+        .select('*', { count: 'exact', head: true })
+        .eq('status', 'pending');
+
+      setTotalCount(count || 0);
+
+      // Apply pagination
+      const startIndex = (currentPage - 1) * pageSize;
+      const endIndex = startIndex + pageSize - 1;
+
       const { data, error } = await supabase
         .from('reports')
         .select(`
@@ -89,7 +119,8 @@ export const ReportsQueue = forwardRef<ReportsQueueRef>((props, ref) => {
           reporter_id
         `)
         .eq('status', 'pending')
-        .order('created_at', { ascending: true });
+        .order('created_at', { ascending: true })
+        .range(startIndex, endIndex);
 
       if (error) throw error;
 
@@ -205,7 +236,14 @@ export const ReportsQueue = forwardRef<ReportsQueueRef>((props, ref) => {
       });
 
       // Remove report from queue
-      setReports(prev => prev.filter(r => r.id !== reportId));
+      setReports(prev => {
+        const newReports = prev.filter(r => r.id !== reportId);
+        // If last item on page and not page 1, go to previous page
+        if (newReports.length === 0 && currentPage > 1) {
+          setCurrentPage(prev => prev - 1);
+        }
+        return newReports;
+      });
     } catch (error) {
       console.error('Error updating report:', error);
       toast({
@@ -346,6 +384,117 @@ export const ReportsQueue = forwardRef<ReportsQueueRef>((props, ref) => {
           </CardContent>
         </Card>
       ))}
+
+      {/* Pagination Controls */}
+      {totalPages > 1 && !loading && (
+        <div className="flex items-center justify-between border-t pt-4 mt-6">
+          <div className="flex items-center gap-2 text-sm text-muted-foreground">
+            <span>
+              Showing {((currentPage - 1) * pageSize) + 1} - {Math.min(currentPage * pageSize, totalCount)} of {totalCount} reports
+            </span>
+            {!isMobile && (
+              <>
+                <span>•</span>
+                <Select 
+                  value={pageSize.toString()} 
+                  onValueChange={(value) => {
+                    setPageSize(parseInt(value));
+                    setCurrentPage(1);
+                  }}
+                >
+                  <SelectTrigger className="w-[120px] h-8">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="10">10 per page</SelectItem>
+                    <SelectItem value="25">25 per page</SelectItem>
+                    <SelectItem value="50">50 per page</SelectItem>
+                    <SelectItem value="100">100 per page</SelectItem>
+                  </SelectContent>
+                </Select>
+              </>
+            )}
+          </div>
+          
+          {isMobile ? (
+            <div className="flex items-center justify-between gap-4">
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => setCurrentPage(p => Math.max(1, p - 1))}
+                disabled={currentPage === 1}
+              >
+                Previous
+              </Button>
+              <span className="text-sm text-muted-foreground">
+                Page {currentPage} of {totalPages}
+              </span>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))}
+                disabled={currentPage === totalPages}
+              >
+                Next
+              </Button>
+            </div>
+          ) : (
+            <Pagination>
+              <PaginationContent>
+                <PaginationItem>
+                  <PaginationPrevious 
+                    onClick={() => setCurrentPage(p => Math.max(1, p - 1))}
+                    className={currentPage === 1 ? 'pointer-events-none opacity-50' : 'cursor-pointer'}
+                  />
+                </PaginationItem>
+                
+                {currentPage > 3 && (
+                  <>
+                    <PaginationItem>
+                      <PaginationLink onClick={() => setCurrentPage(1)} isActive={currentPage === 1}>
+                        1
+                      </PaginationLink>
+                    </PaginationItem>
+                    {currentPage > 4 && <PaginationEllipsis />}
+                  </>
+                )}
+                
+                {Array.from({ length: totalPages }, (_, i) => i + 1)
+                  .filter(page => page >= currentPage - 2 && page <= currentPage + 2)
+                  .map(page => (
+                    <PaginationItem key={page}>
+                      <PaginationLink 
+                        onClick={() => setCurrentPage(page)}
+                        isActive={currentPage === page}
+                      >
+                        {page}
+                      </PaginationLink>
+                    </PaginationItem>
+                  ))
+                }
+                
+                {currentPage < totalPages - 2 && (
+                  <>
+                    {currentPage < totalPages - 3 && <PaginationEllipsis />}
+                    <PaginationItem>
+                      <PaginationLink onClick={() => setCurrentPage(totalPages)} isActive={currentPage === totalPages}>
+                        {totalPages}
+                      </PaginationLink>
+                    </PaginationItem>
+                  </>
+                )}
+                
+                <PaginationItem>
+                  <PaginationNext 
+                    onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))}
+                    className={currentPage === totalPages ? 'pointer-events-none opacity-50' : 'cursor-pointer'}
+                  />
+                </PaginationItem>
+              </PaginationContent>
+            </Pagination>
+          )}
+        </div>
+      )}
     </div>
   );
 });