AI Review Center

Commit Review Workspace ?

Select a commit on the left to inspect quality, security, business value, findings, and suggested code changes.
Showing AI reviews for website
Project AI Score ?
71%
Quality Avg ?
72%
Security Avg ?
74%
Reviews ?
123

Review Result ?

solutionbowl/website · a7c697da
This commit adds a mobile view bottom navigation, session expired modal handling, profile menu enhancements, and a transaction card component with expandable details. The UI improvements and session management add visible business value. However, the addition of numerous console.log statements may reduce professionalism and introduce noise. The code is modular and mostly well-structured, but some styling is inline which could be better managed via style sheets or styled components for maintainability. Security-wise, there's no sensitive data handling but session expiration and modals are handled simply with some risk if session logic is not fully protected. Bug risk is moderate given UI interaction complexity but no obvious errors are present. The business value is good due to improved UX on mobile and session management.
Quality ?
85%
Security ?
55%
Business Value ?
75%
Maintainability ?
78%
Issues & Suggested Fixes ?
1AI detects the issue
2Shows file, line, or evidence
3Suggests the fix to apply
Remove Or Replace Console.log Statements W...
Where src/components/layout/Layout.tsx:32
Issue / Evidence remove or replace console.log statements with proper logger or use environment flags to disable in production to improve quality and professionalism score
Suggested Fix Review and simplify this section.
Batch Session Expired Modal Listener Logs...
Where src/components/layout/Layout.tsx:33-72
Issue / Evidence batch session expired modal listener logs or remove them to reduce noise and improve quality
Suggested Fix Review and simplify this section.
Move Inline Styles Into Css Classes Or Sty...
Where src/components/layout/BottomNav.tsx:39
Issue / Evidence move inline styles into CSS classes or styled components to improve maintainability and quality
Suggested Fix Review and simplify this section.
Move Inline Styles For Backgroundcolor And...
Where src/components/transactions/TransactionCard.tsx:12-15
Issue / Evidence move inline styles for backgroundColor and borderLeftColor to CSS classes or styled components for better maintainability
Suggested Fix Review and simplify this section.
Vague
Where commit message
Issue / Evidence vague
Suggested Fix improve commit message by describing what was changed and why to improve business value understanding and quality
Verify That Session Expiration Modal State...
Where src/components/layout/Layout.tsx:135
Issue / Evidence verify that session expiration modal state resets appropriately to avoid stale messages which could cause UI/UX bugs
Suggested Fix Review and simplify this section.
Code Change Preview · src/components/layout/BottomNav.tsx ?
Removed / Before Commit
- 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>
Added / After Commit
+ 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>
Removed / Before Commit
- 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);
-
Added / After Commit
+ 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);
Removed / Before Commit
- 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>
- </>
Added / After Commit
+ 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>
+ </>
Removed / Before Commit
- 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 (
Added / After Commit
+ 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?.();
+ };
+
Removed / Before Commit
- 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 }}>
Added / After Commit
+ 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"
+         }}
+       >
Removed / Before Commit
- 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,
Added / After Commit
+ 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" },
+ ];
+
Removed / Before Commit
- 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
-
Added / After Commit
+ 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[]>([])
Removed / Before Commit
- 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>
Added / After Commit
+ 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}
+ />
Removed / Before Commit
- diff --git a/src/pages/MultiRaceDetail.tsx b/src/pages/MultiRaceDetail.tsx
- index 2732321..5a1f204 100644
- if (!Number.isFinite(timestamp)) {
- return "-"
- }
- 
- return formatRaceDateTime(startTime).time
- }
- 
- 
- next[raceId] = runnerId
- 
-       // Auto-switch to "single" mode if only 1 selection
- if (Object.keys(next).length === 1) {
- setBetMode("single")
- }
-       // Auto-switch to "straight" mode if 2 or more selections
- else if (Object.keys(next).length >= 2) {
Added / After Commit
+ diff --git a/src/pages/MultiRaceDetail.tsx b/src/pages/MultiRaceDetail.tsx
+ index 2732321..5a1f204 100644
+ if (!Number.isFinite(timestamp)) {
+ return "-"
+ }
+ return formatRaceDateTime(startTime).time
+ }
+ 
+ 
+ next[raceId] = runnerId
+ 
+ if (Object.keys(next).length === 1) {
+ setBetMode("single")
+ }
+ else if (Object.keys(next).length >= 2) {
+ setBetMode("straight")
+ }
+ setSelectedRunners((current) => {