refactor(frontend): centralize shared page data types in src/types

frontend/src/app/admin/disputes/page.tsx

@@ -5,13 +5,10 @@ import { api } from "@/lib/api";
 import { ProtectedPage } from "@/components/navigation/ProtectedPage";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/Card";
 import { Button } from "@/components/ui/Button";
-import { PageError } from "@/components/common/PageError";
-import { ListItemSkeleton, PageHeaderSkeleton } from "@/components/common/PageSkeleton";
-import { ShieldAlert } from "lucide-react";
-import { EmptyState } from "@/components/common/EmptyState";
+import type { Dispute } from "@/types/admin";
 
 export default function DisputeDashboard() {
-  const [disputes, setDisputes] = useState<any[]>([]);
+  const [disputes, setDisputes] = useState<Dispute[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
 
@@ -20,10 +17,9 @@ export default function DisputeDashboard() {
     setError(null);
     try {
       const data = await api.getDisputes();
-      setDisputes(data as any[]);
-    } catch (err) {
-      console.error("Failed to fetch disputes:", err);
-      setError((err as Error).message ?? "Failed to load disputes.");
+      setDisputes(data as Dispute[]);
+    } catch (error) {
+      console.error("Failed to fetch disputes:", error);
     } finally {
       setLoading(false);
     }

frontend/src/app/admin/governance/page.tsx

@@ -5,13 +5,10 @@ import { api } from "@/lib/api";
 import { ProtectedPage } from "@/components/navigation/ProtectedPage";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle, CardFooter } from "@/components/ui/Card";
 import { Button } from "@/components/ui/Button";
-import { PageError } from "@/components/common/PageError";
-import { CardSkeleton, PageHeaderSkeleton } from "@/components/common/PageSkeleton";
-import { EmptyState } from "@/components/common/EmptyState";
-import { FileText } from "lucide-react";
+import type { GovernanceProposal } from "@/types/admin";
 
 export default function GovernanceDashboard() {
-  const [proposals, setProposals] = useState<any[]>([]);
+  const [proposals, setProposals] = useState<GovernanceProposal[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
 
@@ -20,10 +17,9 @@ export default function GovernanceDashboard() {
     setError(null);
     try {
       const data = await api.getProposals();
-      setProposals(data);
-    } catch (err) {
-      console.error("Failed to fetch proposals:", err);
-      setError((err as Error).message ?? "Failed to load proposals.");
+      setProposals(data as GovernanceProposal[]);
+    } catch (error) {
+      console.error("Failed to fetch proposals:", error);
     } finally {
       setLoading(false);
     }

frontend/src/app/admin/kyc/page.tsx

@@ -7,25 +7,7 @@ import { ProtectedPage } from "@/components/navigation/ProtectedPage";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/Card";
 import { Button } from "@/components/ui/Button";
 import { Input } from "@/components/ui/Input";
-import { PageError } from "@/components/common/PageError";
-import { ListItemSkeleton, PageHeaderSkeleton, Skeleton } from "@/components/common/PageSkeleton";
-import { EmptyState } from "@/components/common/EmptyState";
-import { FileText } from "lucide-react";
-
-type KycStatus = "PENDING" | "APPROVED" | "REJECTED" | "ESCALATED";
-
-interface KycReview {
-  id: string;
-  userId: string;
-  status: KycStatus;
-  documents: any[];
-  notes?: string;
-  user: {
-    username: string;
-    email: string;
-  };
-  createdAt: string;
-}
+import type { KycDocument, KycReview, KycStatus } from "@/types/admin";
 
 export default function KycDashboard() {
   const [reviews, setReviews] = useState<KycReview[]>([]);
@@ -223,7 +205,7 @@ export default function KycDashboard() {
                   </h3>
                   <div className="grid sm:grid-cols-2 gap-4">
                     {Array.isArray(selectedReview.documents) && selectedReview.documents.length > 0 ? (
-                      selectedReview.documents.map((doc: any, i: number) => (
+                      selectedReview.documents.map((doc: KycDocument, i: number) => (
                         <div key={i} className="group relative aspect-video bg-muted rounded-xl overflow-hidden border-2 border-transparent hover:border-primary transition-all">
                           <Image 
                             src={doc.url} 

frontend/src/app/dashboard/friends/page.tsx

@@ -6,16 +6,9 @@ import { Input } from "@/components/ui/Input";
 import { Button } from "@/components/ui/Button";
 import { Search, UserPlus, MessageCircle } from "lucide-react";
 import { cn } from "@/lib/utils";
+import type { FriendEntry } from "@/types/profile";
 
-interface Friend {
-  id: string;
-  username: string;
-  elo: number;
-  status: "online" | "in-game" | "offline";
-  gamesPlayed: number;
-}
-
-const mockFriends: Friend[] = [
+const mockFriends: FriendEntry[] = [
   { id: "f1", username: "ShadowNinja", elo: 1380, status: "online", gamesPlayed: 12 },
   { id: "f2", username: "EliteSniper", elo: 1420, status: "in-game", gamesPlayed: 8 },
   { id: "f3", username: "DragonSlayer", elo: 1190, status: "online", gamesPlayed: 5 },

frontend/src/app/leaderboard/page.tsx

@@ -12,9 +12,9 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/Select";
-import { ArrowDown, ArrowUp, ChevronLeft, ChevronRight, Image as ImageIcon, Trophy } from "lucide-react";
-import { useLeaderboard } from "@/hooks/useLeaderboard";
-import { LeaderboardCategory } from "@/types/leaderboard";
+import { Image as ImageIcon } from "lucide-react";
+import { ArrowUp, ArrowDown } from "lucide-react";
+import type { LeaderboardPlayer } from "@/types/leaderboard";
 
 // ---------------------------------------------------------------------------
 // Constants

frontend/src/app/play/lobby/page.tsx

@@ -5,17 +5,11 @@ import PartyManager from '@/components/game/PartyManager';
 import ChatPanel from '@/components/game/ChatPanel';
 import GameSettings from '@/components/game/GameSettings';
 import CountdownTimer from '@/components/game/CountdownTimer';
-
-interface Player {
-  id: string;
-  username: string;
-  isReady: boolean;
-  isHost: boolean;
-}
+import type { PartyPlayer } from '@/types/player';
 
 export default function LobbyPage() {
   const [sessionId, setSessionId] = useState<string>('');
-  const [players, setPlayers] = useState<Player[]>([]);
+  const [players, setPlayers] = useState<PartyPlayer[]>([]);
   const [countdown, setCountdown] = useState<number | null>(null);
 
   useEffect(() => {

frontend/src/app/play/party/page.tsx

@@ -18,18 +18,11 @@ import PartyManager from '@/components/game/PartyManager';
 import CountdownTimer from '@/components/game/CountdownTimer';
 import ChatPanel from '@/components/game/ChatPanel';
 import PlayerList from '@/components/game/PlayerList';
+import type { PartyPlayer } from '@/types/player';
 
 const MAX_PARTY_SIZE = 4;
 const COUNTDOWN_SECONDS = 15;
 
-interface PartyPlayer {
-    id: string;
-    username: string;
-    avatar?: string;
-    isReady: boolean;
-    isHost: boolean;
-}
-
 export default function PlayPartyPage() {
     const router = useRouter();
     const [players, setPlayers] = useState<PartyPlayer[]>([

frontend/src/app/profile/[id]/ProfilePageClient.tsx

@@ -11,17 +11,7 @@ import { FriendsList } from '@/components/profile/FriendsList';
 import { ActivityFeed } from '@/components/profile/ActivityFeed';
 import { Button } from '@/components/ui/Button';
 import { Share2, Settings, UserPlus, MessageCircle } from 'lucide-react';
-import type { PublicProfile, PlayerStats, Achievement, FriendEntry, ActivityEvent } from '@/types/profile';
-import type { EloPoint } from '@/types/user';
-
-interface ProfilePageClientProps {
-  profile: PublicProfile;
-  stats: PlayerStats;
-  achievements: Achievement[];
-  friends: FriendEntry[];
-  activities: ActivityEvent[];
-  eloHistory: EloPoint[];
-}
+import type { PublicProfileViewProps } from '@/types/profile';
 
 export function ProfilePageClient({
   profile,
@@ -30,7 +20,7 @@ export function ProfilePageClient({
   friends,
   activities,
   eloHistory,
-}: ProfilePageClientProps) {
+}: PublicProfileViewProps) {
   const { user } = useAuth();
 
   const viewerRelation: 'owner' | 'friend' | 'public' =

frontend/src/app/tournaments/[id]/page.tsx

@@ -14,7 +14,7 @@ import { ArrowLeft, RadioTower, ShieldAlert, Swords, Trophy } from "lucide-react
 import { Button } from "@/components/ui/Button";
 import { useAuth } from "@/hooks/useAuth";
 import { api } from "@/lib/api";
-import { TOURNAMENT_DETAIL_BANNER_SIZES } from "@/lib/tournamentImageSizes";
+import type { Tournament } from "@/types/tournament";
 
 export default function TournamentDetailsPage() {
   const params = useParams();
@@ -25,7 +25,7 @@ export default function TournamentDetailsPage() {
   // branch below rather than rendering a hardcoded fallback.
   const tournamentId = Array.isArray(params.id) ? params.id[0] : params.id;
   const currentUserId = user?.id ?? "user-123";
-  const [tournament, setTournament] = useState<any | null>(null);
+  const [tournament, setTournament] = useState<Tournament | null>(null);
   const [isLoading, setIsLoading] = useState(true);
   const [fetchError, setFetchError] = useState<string | null>(null);
 

frontend/src/app/tournaments/[id]/register/page.tsx

@@ -6,12 +6,13 @@ import { RegistrationForm } from "@/components/tournaments/RegistrationForm";
 import { Button } from "@/components/ui/Button";
 import { ArrowLeft, AlertCircle } from "lucide-react";
 import { api } from "@/lib/api";
+import type { Tournament } from "@/types/tournament";
 
 export default function TournamentRegisterPage() {
   const params = useParams();
   const router = useRouter();
-  const tournamentId = Array.isArray(params.id) ? params.id[0] : params.id;
-  const [tournament, setTournament] = useState<any | null>(null);
+  const tournamentId = params.id as string;
+  const [tournament, setTournament] = useState<Tournament | null>(null);
   const [isLoading, setIsLoading] = useState(true);
   const [fetchError, setFetchError] = useState<string | null>(null);
 

frontend/src/app/tournaments/create/page.tsx

@@ -22,33 +22,14 @@ import {
   DollarSign,
   Gamepad2
 } from "lucide-react";
-import { TournamentType, TournamentVisibility } from "@/types/tournament";
-
-type Step = 1 | 2 | 3 | 4 | "preview" | "success";
-
-interface TournamentFormData {
-  // Step 1: Basic Info
-  name: string;
-  gameType: string;
-  description: string;
-  // Step 2: Format & Rules
-  tournamentType: TournamentType;
-  matchFormat: string;
-  rules: string;
-  // Step 3: Entry & Prizes
-  entryFee: number;
-  prizePool: number;
-  prizeDistribution: string;
-  // Step 4: Schedule & Registration
-  visibility: TournamentVisibility;
-  maxParticipants: number;
-  registrationOpenDate: string;
-  registrationCloseDate: string;
-  startDate: string;
-  endDate: string;
-}
-
-const initialFormData: TournamentFormData = {
+import {
+  CreateCreateTournamentFormData,
+  CreateTournamentWizardStep,
+  TournamentType,
+  TournamentVisibility,
+} from "@/types/tournament";
+
+const initialFormData: CreateCreateTournamentFormData = {
   name: "",
   gameType: "",
   description: "",
@@ -95,8 +76,8 @@ const tournamentTypes: { value: TournamentType; label: string; description: stri
 ];
 
 export default function CreateTournamentPage() {
-  const [currentStep, setCurrentStep] = useState<Step>(1);
-  const [formData, setFormData] = useState<TournamentFormData>(initialFormData);
+  const [currentStep, setCurrentStep] = useState<CreateTournamentWizardStep>(1);
+  const [formData, setFormData] = useState<CreateTournamentFormData>(initialFormData);
   const [errors, setErrors] = useState<Record<string, string>>({});
   const [isSaving, setIsSaving] = useState(false);
   const [isSubmitting, setIsSubmitting] = useState(false);
@@ -136,7 +117,7 @@ export default function CreateTournamentPage() {
     return () => clearTimeout(timer);
   }, [formData, saveDraft]);
 
-  const validateStep = (step: Step): boolean => {
+  const validateStep = (step: CreateTournamentWizardStep): boolean => {
     const newErrors: Record<string, string> = {};
 
     if (step === 1) {
@@ -183,15 +164,15 @@ export default function CreateTournamentPage() {
 
   const handleNext = () => {
     if (validateStep(currentStep)) {
-      setCurrentStep((prev) => (prev === 4 ? "preview" : (prev as Step) + 1) as Step);
+      setCurrentStep((prev) => (prev === 4 ? "preview" : (prev as CreateTournamentWizardStep) + 1) as CreateTournamentWizardStep);
     }
   };
 
   const handleBack = () => {
-    setCurrentStep((prev) => (prev === "preview" ? 4 : (prev as Step) - 1) as Step);
+    setCurrentStep((prev) => (prev === "preview" ? 4 : (prev as CreateTournamentWizardStep) - 1) as CreateTournamentWizardStep);
   };
 
-  const handleFieldChange = (field: keyof TournamentFormData, value: string | number) => {
+  const handleFieldChange = (field: keyof CreateTournamentFormData, value: string | number) => {
     setFormData((prev) => ({ ...prev, [field]: value }));
     // Clear error for this field
     if (errors[field]) {

frontend/src/components/game/PartyManager.tsx

@@ -1,18 +1,11 @@
 'use client';
 
 import { useState } from 'react';
-
-interface Player {
-  id: string;
-  username: string;
-  avatar?: string;
-  isReady: boolean;
-  isHost: boolean;
-}
+import type { PartyPlayer } from '@/types/player';
 
 interface PartyManagerProps {
   partyId?: string;
-  players: Player[];
+  players: PartyPlayer[];
   maxPlayers?: number;
   onInvite?: (playerId: string) => void;
   onLeave?: () => void;

frontend/src/data/matchHub.ts

@@ -1,47 +1,6 @@
-import { BracketMatch, ScoreReport } from "@/types/bracket";
+import type { MatchHubDetails } from "@/types/match";
 
-export interface MatchHubEvent {
-  id: string;
-  type: "status" | "score" | "alert" | "report";
-  message: string;
-  createdAt: string;
-}
-
-export interface MatchHubPlayerSnapshot {
-  id: string;
-  username: string;
-  avatar?: string;
-  elo: number;
-  region: string;
-  seed: number;
-  record: string;
-  stats: Array<{ label: string; value: string }>;
-}
-
-export interface MatchHubDetails {
-  id: string;
-  tournamentId: string;
-  tournamentName: string;
-  gameType: string;
-  bracketFormat: "single_elimination" | "double_elimination";
-  roundLabel: string;
-  arenaLabel: string;
-  status: BracketMatch["status"];
-  bestOf: number;
-  scheduledTime: string;
-  startedAt?: string;
-  streamTitle?: string;
-  prizePool: number;
-  player1: MatchHubPlayerSnapshot;
-  player2: MatchHubPlayerSnapshot;
-  scorePlayer1: number;
-  scorePlayer2: number;
-  winnerId?: string;
-  notes: string;
-  reports: ScoreReport[];
-  feed: MatchHubEvent[];
-  canDisputeUntil: string;
-}
+export type { MatchHubDetails, MatchHubEvent, MatchHubPlayerSnapshot } from "@/types/match";
 
 export const matchHubDetails: Record<string, MatchHubDetails> = {
   "1-match-13": {