Implement monitoring overview features

Add comprehensive monitoring dashboard scaffolding:
- Extend queryKeys with monitoring keys
- Create hooks: useCombinedAlerts, useRecentActivity, useDatabaseHealth, useModerationHealth
- Build UI components: SystemHealthStatus, CriticalAlertsPanel, MonitoringQuickStats, RecentActivityTimeline, MonitoringNavCards
- Create MonitoringOverview page and integrate routing (MonitoringOverview route)
- Wire AdminSidebar to include Monitoring navigation
- Introduce supporting routing and admin layout hooks/utilities
- Align with TanStack Query patterns and plan for auto-refresh and optimistic updates

src/components/layout/AdminSidebar.tsx

@@ -1,7 +1,9 @@
-import { LayoutDashboard, FileText, Flag, Users, Settings, ArrowLeft, ScrollText, BookOpen, Inbox, Mail, AlertTriangle, Shield } from 'lucide-react';
+import { LayoutDashboard, FileText, Flag, Users, Settings, ArrowLeft, ScrollText, BookOpen, Inbox, Mail, AlertTriangle, Shield, Activity } from 'lucide-react';
 import { NavLink } from 'react-router-dom';
 import { useUserRole } from '@/hooks/useUserRole';
 import { useSidebar } from '@/hooks/useSidebar';
+import { useCombinedAlerts } from '@/hooks/admin/useCombinedAlerts';
+import { Badge } from '@/components/ui/badge';
 import {
   Sidebar,
   SidebarContent,
@@ -21,6 +23,8 @@ export function AdminSidebar() {
   const isSuperuser = permissions?.role_level === 'superuser';
   const isAdmin = permissions?.role_level === 'admin' || isSuperuser;
   const collapsed = state === 'collapsed';
+  const { data: combinedAlerts } = useCombinedAlerts();
+  const alertCount = combinedAlerts?.length || 0;
 
   const navItems = [
     {
@@ -28,6 +32,12 @@ export function AdminSidebar() {
       url: '/admin',
       icon: LayoutDashboard,
     },
+    {
+      title: 'Monitoring Overview',
+      url: '/admin/monitoring-overview',
+      icon: Activity,
+      badge: alertCount > 0 ? alertCount : undefined,
+    },
     {
       title: 'Moderation',
       url: '/admin/moderation',
@@ -132,7 +142,21 @@ export function AdminSidebar() {
                       }
                     >
                       <item.icon className="w-4 h-4" />
-                      {!collapsed && <span>{item.title}</span>}
+                      {!collapsed && (
+                        <span className="flex items-center gap-2">
+                          {item.title}
+                          {item.badge !== undefined && (
+                            <Badge variant="destructive" className="text-xs h-5 px-1.5">
+                              {item.badge}
+                            </Badge>
+                          )}
+                        </span>
+                      )}
+                      {collapsed && item.badge !== undefined && item.badge > 0 && (
+                        <Badge variant="destructive" className="text-xs h-5 w-5 p-0 flex items-center justify-center absolute -top-1 -right-1">
+                          {item.badge}
+                        </Badge>
+                      )}
                     </NavLink>
                   </SidebarMenuButton>
                 </SidebarMenuItem>