Commit Review Workspace ?

- diff --git a/src/components/layout/BottomNav.tsx b/src/components/layout/BottomNav.tsx
- index e06d8cc..f645092 100644
- }, [sportsbookEnabled, casinoEnabled, racingEnabled]);
- 
- return (
-     <div style={{ backgroundColor: colors.secondary }} className="lg:hidden block fixed left-0 bottom-0 w-full z-[9] py-[15px] px-[30px] shadow-[0_-4px_10px_rgba(0,0,0,0.2)]">
-       <div className="flex gap-2 items-center justify-between">
- {navItems.map((item) => (
- <Link
- key={item.path}
- style={{
- color: location.pathname === item.path ? colors.primary : colors.textPrimary
- }}
-             className="text-[12px] flex flex-col gap-[5px] items-center bottom-nav-btn"
- >
-             <i className={`fa-solid ${item.icon}`}></i>
-             {item.name}
- </Link>

+ diff --git a/src/components/layout/BottomNav.tsx b/src/components/layout/BottomNav.tsx
+ index e06d8cc..f645092 100644
+ }, [sportsbookEnabled, casinoEnabled, racingEnabled]);
+ 
+ return (
+     <div style={{ backgroundColor: colors.secondary }} className="lg:hidden block fixed left-0 bottom-0 w-full z-[9] py-[12px] px-[20px] shadow-[0_-4px_10px_rgba(0,0,0,0.2)]">
+       <div className="flex gap-[10px] items-center justify-around max-w-[500px] mx-auto">
+ {navItems.map((item) => (
+ <Link
+ key={item.path}
+ style={{
+ color: location.pathname === item.path ? colors.primary : colors.textPrimary
+ }}
+             className="text-[12px] flex flex-col gap-[5px] items-center bottom-nav-btn flex-1"
+ >
+             <i className={`fa-solid ${item.icon} text-[18px]`}></i>
+             <span className="text-[11px]">{item.name}</span>
+ </Link>

- diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx
- index c32d457..3650f5e 100644
- const location = useLocation();
- 
- useEffect(() => {
-     console.log('🎭 [Layout] Setting up session expired modal listener');
-     
- const openSessionExpiredModal = () => {
-       console.log('🎭 [Layout] SESSION_EXPIRED_MODAL_EVENT received!');
-       const message = consumeSessionExpiredModal() || SESSION_EXPIRED_MESSAGE;
-       console.log('🎭 [Layout] Message from sessionStorage:', message);
- setSessionExpiredMessage(message);
-       console.log('🎭 [Layout] Modal state set to:', message);
- };
- 
- const message = consumeSessionExpiredModal();
-     console.log('🎭 [Layout] Initial check for queued message:', message);
- 

+ diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx
+ index c32d457..3650f5e 100644
+ const location = useLocation();
+ 
+ useEffect(() => {
+     console.log("🎭 [Layout] Setting up session expired modal listener");
+ 
+ const openSessionExpiredModal = () => {
+       console.log("🎭 [Layout] SESSION_EXPIRED_MODAL_EVENT received!");
+ 
+       const message =
+         consumeSessionExpiredModal() || SESSION_EXPIRED_MESSAGE;
+ 
+       console.log("🎭 [Layout] Message from sessionStorage:", message);
+ 
+ setSessionExpiredMessage(message);
+ 
+       console.log("🎭 [Layout] Modal state set to:", message);

- diff --git a/src/components/profile/ProfileDrawer.tsx b/src/components/profile/ProfileDrawer.tsx
- index fe28187..52acaa2 100644
- {/* Content */}
- <div className="px-[16px] py-[20px]">
- <ProfileInfo />
-           <ProfileMenu />
- </div>
- </div>
- </>

+ diff --git a/src/components/profile/ProfileDrawer.tsx b/src/components/profile/ProfileDrawer.tsx
+ index fe28187..52acaa2 100644
+ {/* Content */}
+ <div className="px-[16px] py-[20px]">
+ <ProfileInfo />
+           <ProfileMenu onClose={onClose} />
+ </div>
+ </div>
+ </>

- diff --git a/src/components/profile/ProfileMenu.tsx b/src/components/profile/ProfileMenu.tsx
- index 9421b5e..26fd7be 100644
- import ProfileMenuItem from "./ProfileMenuItem";
- import { useAuth } from "../../contexts/AuthContext";
- 
- const ProfileMenu: React.FC = () => {
- const navigate = useNavigate();
- const { logout } = useAuth();
- 
- const handleLogout = async () => {
- await logout({ redirectTo: "/" });
- };
- 
- const handleBetHistory = () => {
- navigate("/transactions");
- };
- 
- return (

+ diff --git a/src/components/profile/ProfileMenu.tsx b/src/components/profile/ProfileMenu.tsx
+ index 9421b5e..26fd7be 100644
+ import ProfileMenuItem from "./ProfileMenuItem";
+ import { useAuth } from "../../contexts/AuthContext";
+ 
+ interface ProfileMenuProps {
+   onClose?: () => void;
+ }
+ 
+ const ProfileMenu: React.FC<ProfileMenuProps> = ({ onClose }) => {
+ const navigate = useNavigate();
+ const { logout } = useAuth();
+ 
+ const handleLogout = async () => {
+ await logout({ redirectTo: "/" });
+     onClose?.();
+ };
+ 

- diff --git a/src/components/transactions/TransactionCard.tsx b/src/components/transactions/TransactionCard.tsx
- index 94b1e54..085c3da 100644
- import { formatDate, typeColor, typeIcon } from "./helpers";
- 
- export default function TransactionCard({ row, colors, historyType = "single" }: any) {
- if (historyType === "multi") {
- return (
-       <div className="rounded-[12px] p-4" style={{ backgroundColor: colors.secondary }}>
-         <div className="flex items-center justify-between mb-3">
-           <div className="flex flex-col gap-1">
-             <span className="font-medium text-[15px]" style={{ color: colors.textPrimary }}>
-               {row.bet_id}
-             </span>
-             <span className={`text-[13px] font-medium ${typeColor(row.bet_status)}`}>
-               {typeIcon(row.bet_status)} {row.bet_status}
-             </span>
- </div>
-           <span className="text-[12px]" style={{ color: colors.textSecondary }}>

+ diff --git a/src/components/transactions/TransactionCard.tsx b/src/components/transactions/TransactionCard.tsx
+ index 94b1e54..085c3da 100644
+ import { useState } from "react";
+ import { formatDate, typeColor } from "./helpers";
+ import { ChevronDown, ChevronUp, Flag, User, Target, TrendingUp, Calendar, Hash, CheckCircle, Copy } from "lucide-react";
+ 
+ export default function TransactionCard({ row, colors, historyType = "single" }: any) {
+   const [isExpanded, setIsExpanded] = useState(false);
+ 
+ if (historyType === "multi") {
+ return (
+       <div 
+         className="rounded-[12px] overflow-hidden border-l-4"
+         style={{ 
+           backgroundColor: colors.secondary,
+           borderLeftColor: row.bet_status === "WON" ? "#4ade80" : row.bet_status === "LOST" ? "#f87171" : "#fbbf24"
+         }}
+       >

- diff --git a/src/components/transactions/TransactionTabs.tsx b/src/components/transactions/TransactionTabs.tsx
- index 0a830a9..dc96947 100644
- import { useState } from "react";
- import type { TransactionFilters } from "./helpers";
- import { ChevronDown } from "lucide-react";
- // const TABS = ['Bet History', 'Deposit', 'Withdraw'];
- const RETURN_OPTIONS: Array<{ value: TransactionFilters["returnFilter"]; label: string }> = [
-   { value: 'all', label: 'All Returns' },
-   { value: 'won', label: 'Won' },
-   { value: 'lost', label: 'Lost' },
-   { value: 'pending', label: 'Pending' },
- ];
- 
- export default function TransactionTabs({
- filters,
- onFiltersChange,
- onClearFilters,
-   totalCount,

+ diff --git a/src/components/transactions/TransactionTabs.tsx b/src/components/transactions/TransactionTabs.tsx
+ index 0a830a9..dc96947 100644
+ import { useState } from "react";
+ import type { TransactionFilters } from "./helpers";
+ import { ChevronDown } from "lucide-react";
+ 
+ // const TABS = ['Bet History', 'Deposit', 'Withdraw'];
+ 
+ const RETURN_OPTIONS: Array<{
+   value: TransactionFilters["returnFilter"];
+   label: string;
+ }> = [
+   { value: "all", label: "All Returns" },
+   { value: "won", label: "Won" },
+   { value: "lost", label: "Lost" },
+   { value: "pending", label: "Pending" },
+ ];
+ 

- diff --git a/src/contexts/AuthContext.tsx b/src/contexts/AuthContext.tsx
- index c9c22e5..0cc0159 100644
- dispatchLogoutEvent();
- 
- window.location.href =
-           "/login";
- }
- 
- // Handle login from another tab/device - force logout current tab if DIFFERENT user

+ diff --git a/src/contexts/AuthContext.tsx b/src/contexts/AuthContext.tsx
+ index c9c22e5..0cc0159 100644
+ dispatchLogoutEvent();
+ 
+ window.location.href =
+           "/";
+ }
+ 
+ // Handle login from another tab/device - force logout current tab if DIFFERENT user

- diff --git a/src/pages/HorseRacing.tsx b/src/pages/HorseRacing.tsx
- index dfd963c..78d5aad 100644
- import BannerCarousel from "../components/banner/BannerCarousel"
- import RaceAccordion from "../components/racing/ReaceAccordion"
- import { useThemeColors } from "../hooks/useThemeColors"
- 
- 
- const COUNTRY_FLAG_BASE_URL =
- "https://whitelable-dev-bucket.s3.ap-south-1.amazonaws.com/countries/"
- 
- const RacingPage = () => {
- const colors = useThemeColors()
- const [countries, setCountries] = useState<Country[]>([])
- const [activeCountry, setActiveCountry] = useState<string>("")  
- const [raceEvents, setRaceEvents] = useState<RaceEvent[]>([])
- const [loading, setLoading] = useState(true)
- const selectedCountry = countries.find((country) => country._id === activeCountry) ?? null
- 

+ diff --git a/src/pages/HorseRacing.tsx b/src/pages/HorseRacing.tsx
+ index dfd963c..78d5aad 100644
+ import BannerCarousel from "../components/banner/BannerCarousel"
+ import RaceAccordion from "../components/racing/ReaceAccordion"
+ import { useThemeColors } from "../hooks/useThemeColors"
+ import MultiRaceDetail from "./MultiRaceDetail"
+ 
+ 
+ const COUNTRY_FLAG_BASE_URL =
+ "https://whitelable-dev-bucket.s3.ap-south-1.amazonaws.com/countries/"
+ 
+ type ViewMode = "allRaces" | "multibet"
+ 
+ const RacingPage = () => {
+ const colors = useThemeColors()
+ const [countries, setCountries] = useState<Country[]>([])
+ const [activeCountry, setActiveCountry] = useState<string>("")  
+ const [raceEvents, setRaceEvents] = useState<RaceEvent[]>([])

- diff --git a/src/pages/HorseRacingDetails.tsx b/src/pages/HorseRacingDetails.tsx
- index 7c442f0..a38491f 100644
- return textsByMarketId
- }, {})
- }
- 
- return marketTexts.reduce<Record<string, string>>((textsByMarketId, marketText) => {
- const scrollingText = marketText.scrolling_text?.trim()
- 
- 
- 
- return (
- <div className="pb-[80px] w-full max-w-[1240px] mx-auto">
- <RaceHeader 
- eventName={race.race_name}
- onRefreshMarkets={refreshRaceMarkets}
- />
- </div>

+ diff --git a/src/pages/HorseRacingDetails.tsx b/src/pages/HorseRacingDetails.tsx
+ index 7c442f0..a38491f 100644
+ return textsByMarketId
+ }, {})
+ }
+  
+ return marketTexts.reduce<Record<string, string>>((textsByMarketId, marketText) => {
+ const scrollingText = marketText.scrolling_text?.trim()
+ 
+ 
+ 
+ return (
+     <div className="w-full max-w-[1240px] mx-auto pb-[90px] ml-[3px]  md:ml-0">
+ <div className="pb-[80px] w-full max-w-[1240px] mx-auto">
+ <RaceHeader 
+ eventName={race.race_name}
+ onRefreshMarkets={refreshRaceMarkets}
+ />

- diff --git a/src/pages/MultiRaceDetail.tsx b/src/pages/MultiRaceDetail.tsx
- index 2732321..fb4476c 100644
- import { formatRaceDateTime } from "../utils/dateFormat"
- import { useAuth } from "../contexts/AuthContext"
- import { emitBetPlaced } from "../utils/betEvents"
- import toast from "react-hot-toast"
- 
- type Runner = {
- return numberValue === null ? "-" : numberValue.toFixed(2)
- }
- 
- const formatVolume = (volume: number | null | undefined) => {
- const numberValue = toNullableNumber(volume)
- return numberValue === null ? "" : numberValue.toLocaleString("en-IN")
- if (!Number.isFinite(timestamp)) {
- return "-"
- }
- 

+ diff --git a/src/pages/MultiRaceDetail.tsx b/src/pages/MultiRaceDetail.tsx
+ index 2732321..fb4476c 100644
+ import { formatRaceDateTime } from "../utils/dateFormat"
+ import { useAuth } from "../contexts/AuthContext"
+ import { emitBetPlaced } from "../utils/betEvents"
+ import { addExtraToOdd } from "../utils/oddsHelper"
+ import toast from "react-hot-toast"
+ 
+ type Runner = {
+ return numberValue === null ? "-" : numberValue.toFixed(2)
+ }
+ 
+ const formatDisplayedRunnerOdds = (odds: number | null | undefined) => {
+   const numberValue = toNullableNumber(odds)
+   const displayValue = addExtraToOdd(numberValue)
+   return displayValue === null ? "-" : displayValue.toFixed(2)
+ }
+