+ {/* Front of card - Player Info */}
+
+
+
+ {/* Header with team colors */}
+
+
+
+ {/* Back of card - Performance Metrics */}
+
+
+
+ {/* Player Photo Area */}
+
+
+ #{player.number}
+ {getPositionIcon(player.position)}
+
+
+ {player.team}
+ {player.position}
+
+ {player.photo ? (
+ 
+ ) : (
+
+
+ {/* Player Details */}
+
+
+ {player.name
+ .split(" ")
+ .map((n) => n[0])
+ .join("")}
+
+
+ )}
+
+
+
+
+
+ {/* Quick Stats */}
+ + {player.name} +
++ {player.age}y • {player.height} • {player.weight} +
+
+
+
+ {/* Form indicator */}
+
+
+
+ {player.stats.goals}
+
+ Goals
+
+
+
+ {player.stats.disposals}
+
+ Disposals
+
+
+
+ {player.stats.efficiency}%
+
+ Efficiency
+
+ Form:
+ {formTrend ? (
+ = 85 ? "default" : "secondary"}
+ className="text-xs"
+ >
+ {avgForm.toFixed(0)}
+
+
+
+
+
+
+
+ {/* Header */}
+
+
+
+
+ {/* Performance Stats */}
+ {player.name}
+Performance Metrics
+
+ {/* Core Stats */}
+
+
+ {/* Click hint */}
+
+
+
+ {/* Efficiency Meters */}
+ + Core Stats +
+
+
+
+
+ {player.stats.kicks}
+ Kicks
+
+
+
+ {player.stats.handballs}
+
+ Handballs
+
+
+ {player.stats.marks}
+ Marks
+
+
+
+ {player.stats.tackles}
+
+ Tackles
+
+
+
+ {/* Movement Stats */}
+ + Efficiency +
+
+
+
+
+
+ Overall
+ {player.stats.efficiency}%
+
+
+
+
+
+ Goal Accuracy
+ {player.stats.goalAccuracy}%
+
+
+
+
+
+ {/* Recent Form */}
+ + Movement +
+
+
+
+
+
+ {player.stats.avgSpeed}
+
+ Avg Speed
+
+
+
+ {player.stats.maxSpeed}
+
+ Max Speed
+
+
+ + Recent Form +
+
+ {recentForm.map((score, index) => (
+
+ = 90
+ ? "bg-green-100 text-green-700"
+ : score >= 80
+ ? "bg-yellow-100 text-yellow-700"
+ : "bg-red-100 text-red-700",
+ )}
+ >
+ {score}
+
+ ))}
+
+
+ Click to flip back
+
+ {/* Header */}
+
+
+
+ {/* Main Content */}
+
+ );
+ }
+
+ return this.props.children;
+ }
+}
+
+export default ErrorBoundary;
+
+// Higher-order component for wrapping components with error boundary
+export function withErrorBoundary
+
+ Application Error
+
+
+
+
+ AFL Analytics
+
+
+
+
+
+
+
+
+ Something Went Wrong
+
+
+ An unexpected error occurred in the application. Our team
+ has been notified.
+
+
+
+
+
+ Error:{" "}
+ {this.state.error?.message || "An unknown error occurred"}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Error Details Section */}
+
+
+
+ {this.state.showDetails && (
+
+
+ {/* Help Section */}
+
+
+ )}
+
+
+ + Error Details +
+ +
+ {this.getErrorDetails()}
+
+
+
+ + Need Help? +
+-
+
- + • Try refreshing the page or going back to the dashboard + +
- • Clear your browser cache and cookies +
- • Contact support if the error persists +
- + • Include the error details above when reporting the + issue + +
+
+
+
+ {/* Live Status */}
+
+ );
+}
diff --git a/Player_Tracking/afl_player_tracking_and_crowd_monitoring/frontend/client/components/LoadingState.tsx b/Player_Tracking/afl_player_tracking_and_crowd_monitoring/frontend/client/components/LoadingState.tsx
new file mode 100644
index 000000000..19f1dd73c
--- /dev/null
+++ b/Player_Tracking/afl_player_tracking_and_crowd_monitoring/frontend/client/components/LoadingState.tsx
@@ -0,0 +1,297 @@
+import { ReactNode } from "react";
+import { Button } from "@/components/ui/button";
+import {
+ Card,
+ CardContent,
+ CardDescription,
+ CardHeader,
+ CardTitle,
+} from "@/components/ui/card";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Skeleton } from "@/components/ui/skeleton";
+import {
+ Loader2,
+ RefreshCw,
+ AlertCircle,
+ Wifi,
+ Server,
+ Clock,
+ CheckCircle,
+} from "lucide-react";
+
+interface LoadingStateProps {
+ isLoading?: boolean;
+ error?: Error | string | null;
+ isEmpty?: boolean;
+ children?: ReactNode;
+ loadingText?: string;
+ emptyText?: string;
+ emptyDescription?: string;
+ onRetry?: () => void;
+ retryText?: string;
+ showRetry?: boolean;
+ variant?: "default" | "card" | "inline" | "skeleton";
+ skeletonRows?: number;
+}
+
+export default function LoadingState({
+ isLoading = false,
+ error = null,
+ isEmpty = false,
+ children,
+ loadingText = "Loading...",
+ emptyText = "No data available",
+ emptyDescription = "There's nothing to show here yet.",
+ onRetry,
+ retryText = "Try Again",
+ showRetry = true,
+ variant = "default",
+ skeletonRows = 3,
+}: LoadingStateProps) {
+ // Loading state
+ if (isLoading) {
+ if (variant === "skeleton") {
+ return (
+
+
+
+ {isLive ? "LIVE" : "OFFLINE"}
+
+
+
+
+
+ {/* Time Display */}
+
+
+
+
+
+ {isLive && (
+ <>
+
+
+ Q{gameTime.quarter}
+ {formatGameTime()}
+
+
+ )}
+
+ {Array.from({ length: skeletonRows }).map((_, i) => (
+
+ );
+ }
+
+ if (variant === "inline") {
+ return (
+
+
+ ))}
+
+
+ );
+ }
+
+ if (variant === "card") {
+ return (
+
+
+ {loadingText}
+
+
+ );
+ }
+
+ // Error state
+ if (error) {
+ const errorMessage = typeof error === "string" ? error : error.message;
+ const isNetworkError =
+ errorMessage.toLowerCase().includes("network") ||
+ errorMessage.toLowerCase().includes("fetch");
+ const isServerError =
+ errorMessage.toLowerCase().includes("server") ||
+ errorMessage.includes("5");
+
+ const ErrorIcon = isNetworkError
+ ? Wifi
+ : isServerError
+ ? Server
+ : AlertCircle;
+ const errorColor = isNetworkError
+ ? "text-blue-600"
+ : isServerError
+ ? "text-red-600"
+ : "text-orange-600";
+ const bgColor = isNetworkError
+ ? "bg-blue-50 border-blue-200"
+ : isServerError
+ ? "bg-red-50 border-red-200"
+ : "bg-orange-50 border-orange-200";
+
+ if (variant === "inline") {
+ return (
+ {loadingText}
++ {isNetworkError + ? "Connection Error" + : isServerError + ? "Server Error" + : "Error"} +
+{errorMessage}
+ {showRetry && onRetry && ( + + )} +
+
+ );
+ }
+
+ // Empty state
+ if (isEmpty) {
+ if (variant === "inline") {
+ return (
+
+
+
+
+ + {isNetworkError + ? "Connection Problem" + : isServerError + ? "Server Error" + : "Something went wrong"} +
+{errorMessage}
+ {showRetry && onRetry && ( + + )} +
+
+ );
+ }
+
+ if (variant === "card") {
+ return (
+ {emptyText}
+
+
+ + {emptyText} +
+{emptyDescription}
+
+
+ );
+ }
+
+ // Success state - render children
+ return <>{children};
+}
+
+// Specialized loading components
+export const SkeletonLoader = ({ rows = 3 }: { rows?: number }) => (
+
+
+ {emptyText}
+{emptyDescription}
+
+
+);
diff --git a/Player_Tracking/afl_player_tracking_and_crowd_monitoring/frontend/client/components/MobileNavigation.tsx b/Player_Tracking/afl_player_tracking_and_crowd_monitoring/frontend/client/components/MobileNavigation.tsx
new file mode 100644
index 000000000..0376f6ac3
--- /dev/null
+++ b/Player_Tracking/afl_player_tracking_and_crowd_monitoring/frontend/client/components/MobileNavigation.tsx
@@ -0,0 +1,218 @@
+import { useState } from "react";
+import { Link, useLocation } from "react-router-dom";
+import { Button } from "@/components/ui/button";
+import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
+import {
+ Activity,
+ BarChart3,
+ Users,
+ Download,
+ Video,
+ Menu,
+ Home,
+ Zap,
+ Terminal,
+} from "lucide-react";
+
+const navigationItems = [
+ {
+ name: "Home",
+ href: "/afl-dashboard",
+ icon: Home,
+ description: "Main dashboard",
+ },
+ {
+ name: "Player Performance",
+ href: "/player-performance",
+ icon: BarChart3,
+ description: "Player stats & analysis",
+ },
+ {
+ name: "Crowd Monitor",
+ href: "/crowd-monitor",
+ icon: Users,
+ description: "Stadium crowd analytics",
+ },
+ {
+ name: "Analytics",
+ href: "/analytics",
+ icon: Video,
+ description: "Video analysis & reports",
+ },
+ {
+ name: "Reports",
+ href: "/reports",
+ icon: Download,
+ description: "Download & manage reports",
+ },
+ {
+ name: "API Diagnostics",
+ href: "/api-diagnostics",
+ icon: Terminal,
+ description: "System monitoring",
+ },
+];
+
+export default function MobileNavigation() {
+ const [isOpen, setIsOpen] = useState(false);
+ const location = useLocation();
+
+ const isActive = (href: string) => {
+ if (href === "/") {
+ return location.pathname === "/";
+ }
+ return location.pathname.startsWith(href);
+ };
+
+ return (
+ <>
+ {/* Mobile Header */}
+
+
+ {message}
+ {description &&{description}
} + {action} +
+
+
+
+
+
+
+
+
+
+
+
+
+ AFL Analytics
+
+
+
+
+
+
+
+
+
+
+
+ AFL Analytics
+
+
+ );
+ };
+
+ return (
+
+ {label}
+
+
+
+ {value1}
+ {unit}
+
+ vs
+
+ {value2}
+ {unit}
+
+
+
+
+
+
+
+
+
+
+
+ {/* Player Selection */}
+
+
+
+
+
+
+
+
+
+ {/* Player Cards */}
+
+
+
+
+
+
+
+ {/* Detailed Stat Comparison */}
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/Player_Tracking/afl_player_tracking_and_crowd_monitoring/frontend/client/components/ui/accordion.tsx b/Player_Tracking/afl_player_tracking_and_crowd_monitoring/frontend/client/components/ui/accordion.tsx
new file mode 100644
index 000000000..83ff01790
--- /dev/null
+++ b/Player_Tracking/afl_player_tracking_and_crowd_monitoring/frontend/client/components/ui/accordion.tsx
@@ -0,0 +1,56 @@
+import * as React from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDown } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const Accordion = AccordionPrimitive.Root;
+
+const AccordionItem = React.forwardRef<
+ React.ElementRef
+ {/* Player 1 Selection */}
+
+
+
+
+
+
+
+ {/* Player 2 Selection */}
+
+
+
+
+
+
+
+
+ {/* Player 1 Card */}
+
+
+
+
+
+
+
+ {/* Player 2 Card */}
+
+
+
+
+
+
+
+
+ {/* Comparison Chart */}
+
+
+
+ #{player1.number}
+
+
+ {player1.name}
+
+ + {player1.team} • {player1.position} +
+
+
+
+
+
+ {player1.stats.goals}
+
+ Goals
+
+
+
+ {player1.stats.disposals}
+
+ Disposals
+
+
+
+ {player1.stats.efficiency}%
+
+ Efficiency
+
+
+
+ #{player2.number}
+
+
+ {player2.name}
+
+ + {player2.team} • {player2.position} +
+
+
+
+
+
+ {player2.stats.goals}
+
+ Goals
+
+
+
+ {player2.stats.disposals}
+
+ Disposals
+
+
+
+ {player2.stats.efficiency}%
+
+ Efficiency
+
+
+
+
+
+
+
+
+
+
+ {comparisonType === "radar" && (
+
+
+
+
+ )}
+
+ {comparisonType === "bar" && (
+
+
+
+
+ )}
+
+ {comparisonType === "form" && (
+
+
+
+
+ )}
+
+ {children}
+
+ {children}
+
+
+
+
+ );
+});
+CarouselContent.displayName = "CarouselContent";
+
+const CarouselItem = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+
+ {children}
+
+
+
+
+ AFL Analytics Dashboard
+ Professional Sports Analytics Platform
+
+
+
+
+ ${content}
+
+