diff --git a/client/src/pages/Detections.tsx b/client/src/pages/Detections.tsx index 4a583c8..3f7bc1d 100644 --- a/client/src/pages/Detections.tsx +++ b/client/src/pages/Detections.tsx @@ -1,18 +1,41 @@ -import { useQuery } from "@tanstack/react-query"; +import { useQuery, useMutation } from "@tanstack/react-query"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; -import { AlertTriangle, Search, Shield, Eye, Globe, MapPin, Building2 } from "lucide-react"; +import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; +import { Slider } from "@/components/ui/slider"; +import { AlertTriangle, Search, Shield, Eye, Globe, MapPin, Building2, ShieldPlus } from "lucide-react"; import { format } from "date-fns"; import { useState } from "react"; import type { Detection } from "@shared/schema"; import { getFlag } from "@/lib/country-flags"; +import { apiRequest, queryClient } from "@/lib/queryClient"; +import { useToast } from "@/hooks/use-toast"; export default function Detections() { const [searchQuery, setSearchQuery] = useState(""); + const [anomalyTypeFilter, setAnomalyTypeFilter] = useState("all"); + const [minScore, setMinScore] = useState(0); + const [maxScore, setMaxScore] = useState(100); + const { toast } = useToast(); + + // Build query params + const queryParams = new URLSearchParams(); + queryParams.set("limit", "500"); + if (anomalyTypeFilter !== "all") { + queryParams.set("anomalyType", anomalyTypeFilter); + } + if (minScore > 0) { + queryParams.set("minScore", minScore.toString()); + } + if (maxScore < 100) { + queryParams.set("maxScore", maxScore.toString()); + } + const { data: detections, isLoading } = useQuery({ - queryKey: ["/api/detections?limit=100"], + queryKey: ["/api/detections", anomalyTypeFilter, minScore, maxScore], + queryFn: () => fetch(`/api/detections?${queryParams.toString()}`).then(r => r.json()), refetchInterval: 5000, }); @@ -53,20 +76,58 @@ export default function Detections() { {/* Search and Filters */} -
-
- - setSearchQuery(e.target.value)} - className="pl-9" - data-testid="input-search" - /> +
+
+
+ + setSearchQuery(e.target.value)} + className="pl-9" + data-testid="input-search" + /> +
+ + +
+ +
+
+ Risk Score: + + {minScore} - {maxScore} + +
+
+ 0 + { + setMinScore(min); + setMaxScore(max); + }} + className="flex-1" + data-testid="slider-risk-score" + /> + 100 +
-