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/admin/MonitoringQuickStats.tsx

@@ -0,0 +1,116 @@
+import { Activity, AlertTriangle, Clock, Database, FileText, Shield, TrendingUp, Users } from 'lucide-react';
+import { Card, CardContent } from '@/components/ui/card';
+import type { SystemHealthData } from '@/hooks/useSystemHealth';
+import type { ModerationHealth } from '@/hooks/admin/useModerationHealth';
+
+interface MonitoringQuickStatsProps {
+  systemHealth?: SystemHealthData;
+  rateLimitStats?: { total_requests: number; blocked_requests: number; unique_ips: number };
+  moderationHealth?: ModerationHealth;
+}
+
+interface StatCardProps {
+  icon: React.ComponentType<{ className?: string }>;
+  label: string;
+  value: string | number;
+  trend?: 'up' | 'down' | 'neutral';
+  status?: 'healthy' | 'warning' | 'critical';
+}
+
+function StatCard({ icon: Icon, label, value, status = 'healthy' }: StatCardProps) {
+  const statusColors = {
+    healthy: 'text-green-500',
+    warning: 'text-yellow-500',
+    critical: 'text-red-500',
+  };
+
+  return (
+    <Card>
+      <CardContent className="p-4">
+        <div className="flex items-center gap-3">
+          <div className={`p-2 rounded-lg bg-muted ${statusColors[status]}`}>
+            <Icon className="w-5 h-5" />
+          </div>
+          <div className="flex-1 min-w-0">
+            <p className="text-xs text-muted-foreground truncate">{label}</p>
+            <p className="text-2xl font-bold">{value}</p>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+export function MonitoringQuickStats({ systemHealth, rateLimitStats, moderationHealth }: MonitoringQuickStatsProps) {
+  const criticalAlerts = systemHealth?.critical_alerts_count || 0;
+  const highAlerts = systemHealth?.high_alerts_count || 0;
+  const totalAlerts = criticalAlerts + highAlerts;
+  
+  const blockRate = rateLimitStats?.total_requests 
+    ? ((rateLimitStats.blocked_requests / rateLimitStats.total_requests) * 100).toFixed(1)
+    : '0.0';
+
+  const queueStatus = 
+    (moderationHealth?.queueLength || 0) > 50 ? 'critical' :
+    (moderationHealth?.queueLength || 0) > 20 ? 'warning' : 'healthy';
+
+  return (
+    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+      <StatCard
+        icon={AlertTriangle}
+        label="Active Alerts"
+        value={totalAlerts}
+        status={criticalAlerts > 0 ? 'critical' : highAlerts > 0 ? 'warning' : 'healthy'}
+      />
+      
+      <StatCard
+        icon={Shield}
+        label="Rate Limit Block Rate"
+        value={`${blockRate}%`}
+        status={parseFloat(blockRate) > 5 ? 'warning' : 'healthy'}
+      />
+      
+      <StatCard
+        icon={FileText}
+        label="Moderation Queue"
+        value={moderationHealth?.queueLength || 0}
+        status={queueStatus}
+      />
+      
+      <StatCard
+        icon={Clock}
+        label="Active Locks"
+        value={moderationHealth?.activeLocks || 0}
+        status={(moderationHealth?.activeLocks || 0) > 5 ? 'warning' : 'healthy'}
+      />
+      
+      <StatCard
+        icon={Database}
+        label="Orphaned Images"
+        value={systemHealth?.orphaned_images_count || 0}
+        status={(systemHealth?.orphaned_images_count || 0) > 0 ? 'warning' : 'healthy'}
+      />
+      
+      <StatCard
+        icon={Activity}
+        label="Failed Webhooks"
+        value={systemHealth?.failed_webhook_count || 0}
+        status={(systemHealth?.failed_webhook_count || 0) > 0 ? 'warning' : 'healthy'}
+      />
+      
+      <StatCard
+        icon={Users}
+        label="Unique IPs"
+        value={rateLimitStats?.unique_ips || 0}
+        status="healthy"
+      />
+      
+      <StatCard
+        icon={TrendingUp}
+        label="Total Requests"
+        value={rateLimitStats?.total_requests || 0}
+        status="healthy"
+      />
+    </div>
+  );
+}