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/MonitoringNavCards.tsx

@@ -0,0 +1,83 @@
+import { AlertTriangle, ArrowRight, ScrollText, Shield } from 'lucide-react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Link } from 'react-router-dom';
+
+interface NavCardProps {
+  title: string;
+  description: string;
+  to: string;
+  icon: React.ComponentType<{ className?: string }>;
+  stat?: string;
+  badge?: number;
+}
+
+function NavCard({ title, description, to, icon: Icon, stat, badge }: NavCardProps) {
+  return (
+    <Link to={to}>
+      <Card className="hover:bg-accent/50 transition-colors cursor-pointer h-full">
+        <CardHeader>
+          <div className="flex items-start justify-between">
+            <div className="flex items-center gap-3">
+              <div className="p-2 rounded-lg bg-primary/10">
+                <Icon className="w-5 h-5 text-primary" />
+              </div>
+              <div>
+                <CardTitle className="text-base flex items-center gap-2">
+                  {title}
+                  {badge !== undefined && badge > 0 && (
+                    <Badge variant="destructive" className="text-xs">
+                      {badge}
+                    </Badge>
+                  )}
+                </CardTitle>
+              </div>
+            </div>
+            <ArrowRight className="w-5 h-5 text-muted-foreground" />
+          </div>
+          <CardDescription>{description}</CardDescription>
+        </CardHeader>
+        {stat && (
+          <CardContent>
+            <p className="text-sm text-muted-foreground">{stat}</p>
+          </CardContent>
+        )}
+      </Card>
+    </Link>
+  );
+}
+
+interface MonitoringNavCardsProps {
+  errorCount?: number;
+  rateLimitCount?: number;
+}
+
+export function MonitoringNavCards({ errorCount, rateLimitCount }: MonitoringNavCardsProps) {
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+      <NavCard
+        title="Error Monitoring"
+        description="View detailed error logs, analytics, and traces"
+        to="/admin/error-monitoring"
+        icon={AlertTriangle}
+        stat={errorCount !== undefined ? `${errorCount} errors in last 24h` : undefined}
+        badge={errorCount}
+      />
+      
+      <NavCard
+        title="Rate Limit Metrics"
+        description="Monitor rate limiting, alerts, and configurations"
+        to="/admin/rate-limit-metrics"
+        icon={Shield}
+        stat={rateLimitCount !== undefined ? `${rateLimitCount} blocks today` : undefined}
+      />
+      
+      <NavCard
+        title="System Log"
+        description="View system events, audit trails, and history"
+        to="/admin/system-log"
+        icon={ScrollText}
+      />
+    </div>
+  );
+}