Connect to Lovable Cloud

Fix security definer view issue by enabling security_invoker on grouped_alerts_view and implement grouped alerts system with new keys, hooks, components, and monitoring overview integration. Added migration to adjust view, updated query keys, created useGroupedAlerts, useAlertGroupActions, GroupedAlertsPanel, and updated MonitoringOverview to include grouped alerts.

src/pages/admin/MonitoringOverview.tsx

@@ -3,16 +3,17 @@ import { useQueryClient } from '@tanstack/react-query';
 import { AdminLayout } from '@/components/layout/AdminLayout';
 import { RefreshButton } from '@/components/ui/refresh-button';
 import { SystemHealthStatus } from '@/components/admin/SystemHealthStatus';
-import { CriticalAlertsPanel } from '@/components/admin/CriticalAlertsPanel';
+import { GroupedAlertsPanel } from '@/components/admin/GroupedAlertsPanel';
 import { MonitoringQuickStats } from '@/components/admin/MonitoringQuickStats';
 import { RecentActivityTimeline } from '@/components/admin/RecentActivityTimeline';
 import { MonitoringNavCards } from '@/components/admin/MonitoringNavCards';
 import { useSystemHealth } from '@/hooks/useSystemHealth';
-import { useCombinedAlerts } from '@/hooks/admin/useCombinedAlerts';
+import { useGroupedAlerts } from '@/hooks/admin/useGroupedAlerts';
 import { useRecentActivity } from '@/hooks/admin/useRecentActivity';
 import { useDatabaseHealth } from '@/hooks/admin/useDatabaseHealth';
 import { useModerationHealth } from '@/hooks/admin/useModerationHealth';
 import { useRateLimitStats } from '@/hooks/useRateLimitMetrics';
+import { queryKeys } from '@/lib/queryKeys';
 import { Switch } from '@/components/ui/switch';
 import { Label } from '@/components/ui/label';
 
@@ -22,7 +23,7 @@ export default function MonitoringOverview() {
 
   // Fetch all monitoring data
   const systemHealth = useSystemHealth();
-  const combinedAlerts = useCombinedAlerts();
+  const groupedAlerts = useGroupedAlerts({ includeResolved: false });
   const recentActivity = useRecentActivity(3600000); // 1 hour
   const dbHealth = useDatabaseHealth();
   const moderationHealth = useModerationHealth();
@@ -30,7 +31,7 @@ export default function MonitoringOverview() {
 
   const isLoading = 
     systemHealth.isLoading ||
-    combinedAlerts.isLoading ||
+    groupedAlerts.isLoading ||
     recentActivity.isLoading ||
     dbHealth.isLoading ||
     moderationHealth.isLoading ||
@@ -53,10 +54,18 @@ export default function MonitoringOverview() {
       queryKey: ['rate-limit'],
       refetchType: 'active' 
     });
+    await queryClient.invalidateQueries({
+      queryKey: queryKeys.monitoring.groupedAlerts(),
+      refetchType: 'active'
+    });
   };
 
   // Calculate error count for nav card (from recent activity)
   const errorCount = recentActivity.data?.filter(e => e.type === 'error').length || 0;
+  
+  // Calculate stats from grouped alerts
+  const totalGroupedAlerts = groupedAlerts.data?.reduce((sum, g) => sum + g.unresolved_count, 0) || 0;
+  const recurringIssues = groupedAlerts.data?.filter(g => g.is_recurring).length || 0;
 
   return (
     <AdminLayout>
@@ -91,10 +100,10 @@ export default function MonitoringOverview() {
           isLoading={systemHealth.isLoading || dbHealth.isLoading}
         />
 
-        {/* Critical Alerts */}
-        <CriticalAlertsPanel
-          alerts={combinedAlerts.data}
-          isLoading={combinedAlerts.isLoading}
+        {/* Critical Alerts - Now Grouped */}
+        <GroupedAlertsPanel
+          alerts={groupedAlerts.data}
+          isLoading={groupedAlerts.isLoading}
         />
 
         {/* Quick Stats Grid */}