Enhance alert resolution UX

Implement loading state, confirmation dialog, and related UI changes for resolving rate limit alerts:
- Add resolvingAlertId state
- Use ConfirmationDialog for safe resolution
- Update Resolve button to ghost variant with CheckCircle icon and loading behavior
- Wire up loading and disable states during mutation

src/pages/admin/RateLimitMetrics.tsx

@@ -17,6 +17,7 @@ import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContaine
 import { Activity, Shield, TrendingUp, Users, Clock, AlertTriangle, Bell, BellOff, CheckCircle } from 'lucide-react';
 import { Skeleton } from '@/components/ui/skeleton';
 import { Alert, AlertDescription } from '@/components/ui/alert';
+import { ConfirmationDialog } from '@/components/moderation/ConfirmationDialog';
 import { format } from 'date-fns';
 
 const COLORS = ['hsl(var(--primary))', 'hsl(var(--secondary))', 'hsl(var(--accent))', 'hsl(var(--muted))', 'hsl(var(--destructive))'];
@@ -27,6 +28,7 @@ export default function RateLimitMetrics() {
   const { user } = useAuth();
   const { isModerator, loading: rolesLoading } = useUserRole();
   const [timeWindow, setTimeWindow] = useState(60000); // 1 minute default
+  const [resolvingAlertId, setResolvingAlertId] = useState<string | null>(null);
 
   const { data: stats, isLoading: statsLoading, error: statsError } = useRateLimitStats(timeWindow);
   const { data: recentData, isLoading: recentLoading } = useRecentMetrics(50);
@@ -401,9 +403,13 @@ export default function RateLimitMetrics() {
                       {!alert.resolved_at && (
                         <Button
                           size="sm"
-                          variant="outline"
-                          onClick={() => resolveAlert.mutate(alert.id)}
+                          variant="ghost"
+                          onClick={() => setResolvingAlertId(alert.id)}
+                          loading={resolveAlert.isPending && resolvingAlertId === alert.id}
+                          disabled={resolveAlert.isPending}
+                          className="gap-2"
                         >
+                          <CheckCircle className="h-4 w-4" />
                           Resolve
                         </Button>
                       )}
@@ -417,6 +423,20 @@ export default function RateLimitMetrics() {
               )}
             </CardContent>
           </Card>
+          
+          <ConfirmationDialog
+            open={resolvingAlertId !== null}
+            onOpenChange={(open) => !open && setResolvingAlertId(null)}
+            title="Resolve Alert"
+            description="Are you sure you want to mark this alert as resolved? This action cannot be undone."
+            confirmLabel="Resolve"
+            onConfirm={() => {
+              if (resolvingAlertId) {
+                resolveAlert.mutate(resolvingAlertId);
+                setResolvingAlertId(null);
+              }
+            }}
+          />
         </TabsContent>
 
         <TabsContent value="config" className="space-y-6">