Front end

26_T1/afl_player_tracking_and_crowd_monitoring/frontend/client/pages/ApiDiagnostics.tsx

@@ -201,6 +201,7 @@ export default function ApiDiagnostics() {
   const [testResult, setTestResult] = useState<any>(null);
   const [isTesting, setIsTesting] = useState(false);
   const [selectedTimeRange, setSelectedTimeRange] = useState("1h");
+  const [highlightedCards, setHighlightedCards] = useState<string[]>([]);
 
   // Simulate real-time updates
   useEffect(() => {
@@ -223,6 +224,24 @@ export default function ApiDiagnostics() {
     return () => clearInterval(interval);
   }, [isLive]);
 
+  const toggleHighlightedCard = (cardName: string) => {
+    setHighlightedCards((prev) =>
+      prev.includes(cardName)
+        ? prev.filter((item) => item !== cardName)
+        : [...prev, cardName],
+    );
+  };
+
+  const getOverviewCardClassName = (cardName: string) => {
+    const isHighlighted = highlightedCards.includes(cardName);
+
+    return `cursor-pointer transition-all duration-200 ${
+      isHighlighted
+        ? "ring-2 ring-green-500 bg-green-50 shadow-lg scale-[1.02]"
+        : "hover:shadow-md hover:scale-[1.01]"
+    }`;
+  };
+
   const runApiTest = async () => {
     setIsTesting(true);
     setTestResult(null);
@@ -307,7 +326,10 @@ export default function ApiDiagnostics() {
 
           {/* Overview Cards */}
           <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
-            <Card>
+            <Card
+              className={getOverviewCardClassName("API Health")}
+              onClick={() => toggleHighlightedCard("API Health")}
+            >
               <CardContent className="p-4">
                 <div className="flex items-center justify-between">
                   <div>
@@ -332,7 +354,10 @@ export default function ApiDiagnostics() {
               </CardContent>
             </Card>
 
-            <Card>
+            <Card
+              className={getOverviewCardClassName("Avg Response")}
+              onClick={() => toggleHighlightedCard("Avg Response")}
+            >
               <CardContent className="p-4">
                 <div className="flex items-center justify-between">
                   <div>
@@ -347,7 +372,10 @@ export default function ApiDiagnostics() {
               </CardContent>
             </Card>
 
-            <Card>
+            <Card
+              className={getOverviewCardClassName("Requests/min")}
+              onClick={() => toggleHighlightedCard("Requests/min")}
+            >
               <CardContent className="p-4">
                 <div className="flex items-center justify-between">
                   <div>
@@ -362,7 +390,10 @@ export default function ApiDiagnostics() {
               </CardContent>
             </Card>
 
-            <Card>
+            <Card
+              className={getOverviewCardClassName("Error Rate")}
+              onClick={() => toggleHighlightedCard("Error Rate")}
+            >
               <CardContent className="p-4">
                 <div className="flex items-center justify-between">
                   <div>

26_T1/afl_player_tracking_and_crowd_monitoring/frontend/client/pages/CrowdMonitor.tsx

@@ -314,10 +314,16 @@ export default function CrowdMonitor() {
 
           <Tabs value={viewMode} onValueChange={setViewMode} className="w-full">
             <TabsList className="grid w-full grid-cols-3">
-              <TabsTrigger value="heatmap">Heat Map</TabsTrigger>
-              <TabsTrigger value="list">Zone Details</TabsTrigger>
-              <TabsTrigger value="analytics">Analytics</TabsTrigger>
-            </TabsList>
+  <TabsTrigger value="heatmap" className="data-[state=active]:bg-green-600 data-[state=active]:text-white">
+    Heat Map
+  </TabsTrigger>
+  <TabsTrigger value="list" className="data-[state=active]:bg-green-600 data-[state=active]:text-white">
+    Zone Details
+  </TabsTrigger>
+  <TabsTrigger value="analytics" className="data-[state=active]:bg-green-600 data-[state=active]:text-white">
+    Analytics
+  </TabsTrigger>
+</TabsList>
 
             <TabsContent value="heatmap" className="space-y-4">
               <Card>

26_T1/afl_player_tracking_and_crowd_monitoring/frontend/client/pages/Login.tsx

@@ -114,7 +114,7 @@ export default function Login() {
       localStorage.setItem("userEmail", loginForm.email);
 
       // Successful login - redirect to dashboard
-      navigate("/afl-dashboard");
+      navigate("/player-performance");
     } else {
       setError(
         "Invalid email or password. Try demo@aflanalytics.com / demo123 or use your signup credentials",

26_T1/afl_player_tracking_and_crowd_monitoring/frontend/client/pages/PlayerPerformance.tsx

@@ -255,6 +255,7 @@ const generatePlayerData = () => {
 };
 
 export default function PlayerPerformance() {
+  const [selectedStat, setSelectedStat] = useState<string | null>(null);
   const [isLive, setIsLive] = useState(true);
   const [isPlaying, setIsPlaying] = useState(false);
   const ENABLE_LIVE_FEATURES = true;
@@ -376,15 +377,24 @@ export default function PlayerPerformance() {
     trend,
     color = "blue",
     icon: Icon,
+    active = false,
+    onClick,
   }: {
     title: string;
     value: string | number;
     subtitle?: string;
     trend?: "up" | "down" | "stable";
     color?: string;
     icon?: any;
+    active?: boolean;
+    onClick?: () => void;
   }) => (
-    <Card className="relative overflow-hidden">
+    <Card
+      className={`relative overflow-hidden transition-all duration-200 ${onClick ? "cursor-pointer" : ""} ${
+        active ? "ring-2 ring-blue-500 ring-offset-2 shadow-lg" : ""
+      }`}
+      onClick={onClick}
+    >
       <CardContent className="p-4">
         <div className="flex items-center justify-between mb-2">
           <div className="flex items-center gap-2">
@@ -533,37 +543,52 @@ export default function PlayerPerformance() {
 
           {/* Quick Stats Overview */}
           <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-            <StatCard
-              title="Players Active"
-              value={filteredPlayers.length}
-              icon={Users}
-              color="blue"
-              trend="up"
-            />
-            <StatCard
-              title="Total Goals"
-              value={filteredPlayers.reduce((sum, p) => sum + p.stats.goals, 0)}
-              icon={Target}
-              color="green"
-              trend="up"
-            />
-            <StatCard
-              title="Avg Efficiency"
-              value={`${Math.round(filteredPlayers.reduce((sum, p) => sum + p.stats.efficiency, 0) / filteredPlayers.length)}%`}
-              icon={Activity}
-              color="purple"
-              trend="stable"
-            />
-            <StatCard
-              title="Total Disposals"
-              value={filteredPlayers.reduce(
-                (sum, p) => sum + p.stats.disposals,
-                0,
-              )}
-              icon={BarChart3}
-              color="orange"
-              trend="up"
-            />
+                              <StatCard
+                      title="Players Active"
+                      value={filteredPlayers.length}
+                      icon={Users}
+                      color="blue"
+                      trend="up"
+                      active={selectedStat === "Players Active"}
+                      onClick={() => setSelectedStat("Players Active")}
+                    />
+
+                    <StatCard
+                      title="Total Goals"
+                      value={filteredPlayers.reduce((sum, p) => sum + p.stats.goals, 0)}
+                      icon={Target}
+                      color="green"
+                      trend="up"
+                      active={selectedStat === "Total Goals"}
+                      onClick={() => setSelectedStat("Total Goals")}
+                    />
+
+                    <StatCard
+                      title="Avg Efficiency"
+                      value={`${
+                        filteredPlayers.length > 0
+                          ? Math.round(
+                              filteredPlayers.reduce((sum, p) => sum + p.stats.efficiency, 0) /
+                                filteredPlayers.length
+                            )
+                          : 0
+                      }%`}
+                      icon={Activity}
+                      color="purple"
+                      trend="stable"
+                      active={selectedStat === "Avg Efficiency"}
+                      onClick={() => setSelectedStat("Avg Efficiency")}
+                    />
+
+                    <StatCard
+                      title="Total Disposals"
+                      value={filteredPlayers.reduce((sum, p) => sum + p.stats.disposals, 0)}
+                      icon={BarChart3}
+                      color="orange"
+                      trend="up"
+                      active={selectedStat === "Total Disposals"}
+                      onClick={() => setSelectedStat("Total Disposals")}
+                    />    
           </div>
 
           {/* Search and Filters */}
@@ -803,11 +828,19 @@ export default function PlayerPerformance() {
           {/* Additional Stats and Comparison */}
           <Tabs defaultValue="detailed-stats" className="w-full">
             <TabsList className="grid w-full grid-cols-4">
-              <TabsTrigger value="detailed-stats">Detailed Stats</TabsTrigger>
-              <TabsTrigger value="form">Form</TabsTrigger>
-              <TabsTrigger value="heatmap">Heat Map</TabsTrigger>
-              <TabsTrigger value="compare">Compare Players</TabsTrigger>
-            </TabsList>
+  <TabsTrigger value="detailed-stats" className="data-[state=active]:bg-blue-600 data-[state=active]:text-white">
+    Detailed Stats
+  </TabsTrigger>
+  <TabsTrigger value="form" className="data-[state=active]:bg-blue-600 data-[state=active]:text-white">
+    Form
+  </TabsTrigger>
+  <TabsTrigger value="heatmap" className="data-[state=active]:bg-blue-600 data-[state=active]:text-white">
+    Heat Map
+  </TabsTrigger>
+  <TabsTrigger value="compare" className="data-[state=active]:bg-blue-600 data-[state=active]:text-white">
+    Compare Players
+  </TabsTrigger>
+</TabsList>
 
             <TabsContent value="detailed-stats" className="space-y-4">
               <div className="grid grid-cols-2 md:grid-cols-4 gap-4">

26_T1/afl_player_tracking_and_crowd_monitoring/frontend/client/pages/Reports.tsx

@@ -119,6 +119,33 @@ const availableReports = [
     downloads: 8,
     created: "2024-01-07T20:30:00Z",
   },
+  {
+    id: 7,
+    name: "Crowd Movement & Density Report",
+    type: "Crowd Report",
+    category: "Crowd Monitoring",
+    date: "2024-01-20",
+    size: "2.1 MB",
+    format: "PDF",
+    teams: "MCG Stadium Analysis",
+    status: "ready",
+    downloads: 5,
+    created: "2024-01-20T12:00:00Z",
+  },
+
+  {
+  id: 8,
+  name: "Video Analysis Match Insights",
+  type: "Video Report",
+  category: "Video Analysis",
+  date: "2024-01-22",
+  size: "4.6 MB",
+  format: "MP4",
+  teams: "Match Footage Breakdown",
+  status: "ready",
+  downloads: 3,
+  created: "2024-01-22T14:00:00Z",
+}
 ];
 
 export default function Reports() {

Player_Tracking/afl_player_tracking_and_crowd_monitoring/frontend/client/pages/AFLDashboard.tsx

@@ -79,6 +79,7 @@ import {
   Settings,
   LogOut,
   ChevronDown,
+  Shield,
 } from "lucide-react";
 
 // Mock data for the dashboard
@@ -201,6 +202,7 @@ const crowdZones = [
     trend: "stable",
   },
 ];
+const safestZone = crowdZones.reduce((min, zone) => zone.density < min.density ? zone : min, crowdZones[0]);
 
 export default function AFLDashboard() {
   const navigate = useNavigate();
@@ -2091,6 +2093,22 @@ Export ID: ${Date.now()}-${Math.random().toString(36).substr(2, 9)}
                 </div>
               </CardContent>
             </Card>
+            <Card>
+              <CardContent className="p-4">
+                <div className="flex items-center justify-between">
+                  <div>
+                    <p className="text-sm text-gray-600">Safest Zone</p>
+                    <p className="text-lg font-bold text-green-600 leading-tight">
+                      {safestZone.zone}
+                    </p>
+                    <p className="text-xs text-gray-500">
+                      {safestZone.density}% full · {safestZone.current.toLocaleString()} people
+                    </p>
+                  </div>
+                  <Shield className="w-8 h-8 text-green-500" />
+                </div>
+              </CardContent>
+            </Card>
           </TabsContent>
 
           {/* Analytics Report Download */}

Player_Tracking/afl_player_tracking_and_crowd_monitoring/frontend/client/pages/CrowdMonitor.tsx

@@ -284,6 +284,31 @@ export default function CrowdMonitor() {
                 </div>
               </CardContent>
             </Card>
+          <Card>
+  <CardContent className="p-4">
+    <div className="flex items-center justify-between">
+      <div>
+        <p className="text-sm text-gray-600">Highest Attendance</p>
+        <p className="text-2xl font-bold text-green-600">62,500</p>
+        <p className="text-xs text-gray-500">MCG - Round 10</p>
+      </div>
+      <TrendingUp className="w-8 h-8 text-green-500" />
+    </div>
+  </CardContent>
+</Card>
+
+<Card>
+  <CardContent className="p-4">
+    <div className="flex items-center justify-between">
+      <div>
+        <p className="text-sm text-gray-600">Lowest Attendance</p>
+        <p className="text-2xl font-bold text-red-600">18,200</p>
+        <p className="text-xs text-gray-500">Marvel Stadium - Round 3</p>
+      </div>
+      <TrendingDown className="w-8 h-8 text-red-500" />
+    </div>
+  </CardContent>
+</Card>
           </div>
 
           {/* Controls */}