Commit Review Workspace ?

- diff --git a/src/components/sports/MarketRunner.tsx b/src/components/sports/MarketRunner.tsx
- index b61f1af..e3926b5 100644
- </div>
- 
- {/* Odds / Suspended */}
-       <div className="relative flex items-center justify-center w-full">
- {marketStatus && ['suspended', 'closed', 'ball running'].includes(marketStatus.toLowerCase()) && (
- <div className="absolute inset-0 flex items-center justify-center font-bold text-[11px] text-white z-20 rounded"
- style={{ backgroundColor: 'rgba(55,55,55,0.90)', pointerEvents: 'none' }}
- 
- {/* LAY */}
- <div className="flex gap-[5px] flex-1 md:max-w-[250px]">
- {displayLayOdds.map((odd, idx) => (
- <OddsButton
- key={`lay-${idx}`}

+ diff --git a/src/components/sports/MarketRunner.tsx b/src/components/sports/MarketRunner.tsx
+ index b61f1af..e3926b5 100644
+ </div>
+ 
+ {/* Odds / Suspended */}
+       <div className="relative flex items-center justify-center " style={{width:'90%'}}>
+ {marketStatus && ['suspended', 'closed', 'ball running'].includes(marketStatus.toLowerCase()) && (
+ <div className="absolute inset-0 flex items-center justify-center font-bold text-[11px] text-white z-20 rounded"
+ style={{ backgroundColor: 'rgba(55,55,55,0.90)', pointerEvents: 'none' }}
+ 
+ {/* LAY */}
+ <div className="flex gap-[5px] flex-1 md:max-w-[250px]">
+               
+ {displayLayOdds.map((odd, idx) => (
+ <OddsButton
+ key={`lay-${idx}`}

- diff --git a/src/components/sports/SportsMatchList.tsx b/src/components/sports/SportsMatchList.tsx
- index b28ecb1..a9c0b8b 100644
- );
- 
- if (!runner) {
- return { backPrice: null, backSize: null, layPrice: null, laySize: null };
- }
- 
-     return {
- backPrice: runner.back?.price || null,
- backSize: runner.back?.size || null,
- layPrice: runner.lay?.price || null,
- laySize: runner.lay?.size || null,
- };
- };
- 
- const getDrawOdds = (match: any) => {
- 

+ diff --git a/src/components/sports/SportsMatchList.tsx b/src/components/sports/SportsMatchList.tsx
+ index b28ecb1..a9c0b8b 100644
+ );
+ 
+ if (!runner) {
+       console.log(`⚠️ Runner not found for team: ${teamName} in match ${match.eventName}`);
+ return { backPrice: null, backSize: null, layPrice: null, laySize: null };
+ }
+ 
+     const odds = {
+ backPrice: runner.back?.price || null,
+ backSize: runner.back?.size || null,
+ layPrice: runner.lay?.price || null,
+ laySize: runner.lay?.size || null,
+ };
+     
+     // Only log if price is non-zero (to reduce noise)
+     if (odds.backPrice || odds.layPrice) {

- diff --git a/src/hooks/useListingOddsSocket.ts b/src/hooks/useListingOddsSocket.ts
- index e5970ff..f11fb6a 100644
- });
- 
- socket.on("listingOdds", (data) => {
-       console.log("📊 Listing Odds Update:", data);
- if (onUpdateRef.current) {
- onUpdateRef.current(data);
- }

+ diff --git a/src/hooks/useListingOddsSocket.ts b/src/hooks/useListingOddsSocket.ts
+ index e5970ff..f11fb6a 100644
+ });
+ 
+ socket.on("listingOdds", (data) => {
+       console.log("� listingOdds event received:");
+       console.log(JSON.stringify(data, null, 2));
+       
+ if (onUpdateRef.current) {
+ onUpdateRef.current(data);
+ }

- diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
- index 552293d..0b9923a 100644
- import { useState } from "react";
- import BannerCarousel from "../components/banner/BannerCarousel";
- import SportTabButton from "../components/home/SportTabButton";
- import UpcomingMatchCard from "../components/home/UpcomingMatchCard";
- import LoadingState from "../components/sports/LoadingState";
- import EmptyState from "../components/sports/EmptyState";
- import { useSportsbook, useCasino } from "../hooks";
- import { useThemeColors } from "../hooks/useThemeColors";
- import { useUpcomingMatches } from "../hooks/useUpcomingMatches";
- 
- export default function Home() {
-   const sportsbookEnabled = useSportsbook();
-   const casinoEnabled = useCasino();
-   const colors = useThemeColors();
-   const allMatchesTabs = [
-     { id: "all", name: "All Matches", icon: "fa-chess-board" },

+ diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
+ index 552293d..0b9923a 100644
+ import { useState, useEffect } from "react";
+ import { useParams } from "react-router-dom";
+ import BannerCarousel from "../components/banner/BannerCarousel";
+ import SportsTabNavigation from "../components/sports/SportsTabNavigation";
+ import LoadingState from "../components/sports/LoadingState";
+ import EmptyState from "../components/sports/EmptyState";
+ import { useSportsMatches } from "../hooks/useSportsMatches";
+ import { useListingOddsSocket } from "../hooks/useListingOddsSocket";
+ import { getSportId } from "../utils/sportsHelpers";
+ import SportsMatchList from "../components/sports/SportsMatchList";
+ import type { CricketMatch } from "../types/cricket";
+ 
+ export default function Home() {
+   const { sport } = useParams<{ sport: string }>();
+   const [activeTab, setActiveTab] = useState("live");
+ 

- diff --git a/src/pages/Sports.tsx b/src/pages/Sports.tsx
- index a1fec80..bd04f0a 100644
- 
- // Update local matches when initial data loads
- useEffect(() => {
- setMatches(initialMatches);
- }, [initialMatches]);
- 
- // Get all event IDs for socket connection
- const eventIds = matches.map(m => m.eventId);
- 
- // Socket connection for real-time listing odds updates
-   const { error: socketError } = useListingOddsSocket(eventIds, (data) => {
-     console.log("Received listing odds update:", data);
- 
-     // Update matches with new listing odds
-     if (data && data.eventId) {
-       setMatches(prevMatches => 

+ diff --git a/src/pages/Sports.tsx b/src/pages/Sports.tsx
+ index a1fec80..bd04f0a 100644
+ 
+ // Update local matches when initial data loads
+ useEffect(() => {
+     console.log("📥 Initial matches loaded:", initialMatches.length);
+ setMatches(initialMatches);
+ }, [initialMatches]);
+ 
+ // Get all event IDs for socket connection
+ const eventIds = matches.map(m => m.eventId);
+   
+   console.log("🎯 Event IDs for socket:", eventIds);
+ 
+ // Socket connection for real-time listing odds updates
+   const { isConnected } = useListingOddsSocket(eventIds, (socketData) => {
+     const timestamp = new Date().toLocaleTimeString();
+     console.log(`🔄 [${timestamp}] ========== SOCKET DATA RECEIVED ==========`);