-
-
-
-
Create Custom Bets
-
- Create your own bets on sports, esports, politics, entertainment, or anything else you can imagine.
-
+ {!events || events.length === 0 ? (
+
+
No upcoming events available
+
Check back soon for new betting opportunities
+ ) : (
+
+ {/* Table Header */}
+
+
Event
+
Sport
+
Spread
+
Time
+
Bet Range
+
-
-
-
-
Secure Escrow
-
- Funds are safely locked in escrow when a bet is matched, ensuring fair and secure transactions.
-
-
+ {/* Table Body */}
+
+ {events.map((event) => {
+ const gameTime = new Date(event.game_time)
+ const hoursUntil = Math.floor(
+ (gameTime.getTime() - Date.now()) / (1000 * 60 * 60)
+ )
+ const isUrgent = hoursUntil >= 0 && hoursUntil < 24
-
-
-
+ return (
+
handleEventClick(event.id)}
+ className="grid grid-cols-12 gap-4 px-6 py-5 w-full text-left hover:bg-gray-50 transition-colors items-center"
+ >
+
+
+ {event.home_team} vs {event.away_team}
+
+ {event.league && (
+
{event.league}
+ )}
+
+
+ {event.sport}
+
+
+
+
+ {event.official_spread > 0 ? '+' : ''}{event.official_spread}
+
+
+ ({event.home_team})
+
+
+
+
+ {gameTime.toLocaleDateString()}
+
+
+ {gameTime.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
+ {isUrgent && ` (${hoursUntil}h)`}
+
+
+
+ ${event.min_bet_amount} - ${event.max_bet_amount}
+
+
+ Spreads: {event.min_spread} to {event.max_spread}
+
+
+ )
+ })}
-
Real-time Updates
-
- Get instant notifications when your bets are matched, settled, or when new opportunities arise.
-
-
+ )}
+
+ {/* CTA for non-authenticated users */}
+ {!isAuthenticated && (
+
+
Ready to start betting?
+
Create an account to place bets on these events
+
+ Create Account
+
+ Log In
+
+
+
+ )}
)
diff --git a/frontend/src/pages/HowItWorks.tsx b/frontend/src/pages/HowItWorks.tsx
new file mode 100644
index 0000000..98103c3
--- /dev/null
+++ b/frontend/src/pages/HowItWorks.tsx
@@ -0,0 +1,123 @@
+import { Link } from 'react-router-dom'
+import { Header } from '@/components/layout/Header'
+import { Button } from '@/components/common/Button'
+import { HelpCircle, ArrowRight, Shield, Users, Zap, DollarSign } from 'lucide-react'
+
+export const HowItWorks = () => {
+ const steps = [
+ {
+ number: '01',
+ title: 'Create or Find a Bet',
+ description: 'Browse available spreads on upcoming games or create your own line.',
+ icon: Zap,
+ },
+ {
+ number: '02',
+ title: 'Match with Another User',
+ description: 'Take the opposite side of an existing bet or wait for someone to take yours.',
+ icon: Users,
+ },
+ {
+ number: '03',
+ title: 'Funds Held in Escrow',
+ description: 'Both sides stake is securely locked until the game is settled.',
+ icon: Shield,
+ },
+ {
+ number: '04',
+ title: 'Winner Takes the Pot',
+ description: 'After the game, the winner receives 90% of the total pot (10% platform fee).',
+ icon: DollarSign,
+ },
+ ]
+
+ return (
+
+
+
+ {/* Hero */}
+
+
+
+
How It Works
+
+ Peer-to-peer sports betting made simple. No bookies, no house edge on odds - just you vs another bettor.
+
+
+
+
+ {/* Steps */}
+
+
+ {steps.map((step) => (
+
+
+
{step.number}
+
+
{step.title}
+
{step.description}
+
+
+ ))}
+
+
+
+ {/* FAQ */}
+
+
+
Common Questions
+
+
+
+
What is spread betting?
+
+ Spread betting involves wagering on the margin of victory. If the spread is -7, the favorite must win by more than 7 points for bets on them to pay out.
+
+
+
+
+
How is my money protected?
+
+ All funds are held in secure escrow when a bet is matched. Neither party can access the funds until the game is settled.
+
+
+
+
+
What are the fees?
+
+ We charge a 10% commission on winning bets only. If you lose, you pay nothing beyond your stake.
+
+
+
+
+
Can I cancel a bet?
+
+ You can cancel open bets that haven't been matched yet. Once matched, bets cannot be cancelled.
+
+
+
+
+
+
+ {/* CTA */}
+
+
+
Ready to start betting?
+
Join thousands of users betting against each other
+
+
+
+ Create Account
+
+
+
+ Browse Events
+
+
+
+
+
+
+ )
+}
diff --git a/frontend/src/pages/Live.tsx b/frontend/src/pages/Live.tsx
new file mode 100644
index 0000000..932895f
--- /dev/null
+++ b/frontend/src/pages/Live.tsx
@@ -0,0 +1,50 @@
+import { Link } from 'react-router-dom'
+import { Header } from '@/components/layout/Header'
+import { Button } from '@/components/common/Button'
+import { Radio, ArrowRight } from 'lucide-react'
+
+export const Live = () => {
+ return (
+
+
+
+
+
+
+
Live Events
+
Watch the action unfold in real-time
+
+
+
+
🎮
+
No Live Events Right Now
+
+ Check back when games are in progress to see live betting action and real-time updates.
+
+
+
+ View Upcoming Events
+
+
+
+
+
+
Live Line Movement
+
Watch spreads shift in real-time as the game progresses
+
+
+
In-Game Betting
+
Place bets on live events with dynamic odds
+
+
+
Instant Settlement
+
Get paid out immediately when bets resolve
+
+
+
+
+ )
+}
diff --git a/frontend/src/pages/MyBets.tsx b/frontend/src/pages/MyBets.tsx
index 2c61755..d2f8344 100644
--- a/frontend/src/pages/MyBets.tsx
+++ b/frontend/src/pages/MyBets.tsx
@@ -1,56 +1,94 @@
import { useState } from 'react'
import { useQuery } from '@tanstack/react-query'
import { Layout } from '@/components/layout/Layout'
-import { BetList } from '@/components/bets/BetList'
import { Loading } from '@/components/common/Loading'
-import { betsApi } from '@/api/bets'
+import { spreadBetsApi } from '@/api/spread-bets'
+import type { SpreadBetDetail } from '@/types/spread-bet'
+
+const SpreadBetCard = ({ bet }: { bet: SpreadBetDetail }) => {
+ const isCreator = bet.creator_username !== undefined
+ const statusColors = {
+ open: 'bg-blue-100 text-blue-800',
+ matched: 'bg-yellow-100 text-yellow-800',
+ completed: 'bg-green-100 text-green-800',
+ cancelled: 'bg-gray-100 text-gray-800',
+ }
+
+ return (
+
+
+
+
+ {bet.event_home_team} vs {bet.event_away_team}
+
+
+ {new Date(bet.event_game_time).toLocaleString()}
+
+
+
+ {bet.status.charAt(0).toUpperCase() + bet.status.slice(1)}
+
+
+
+
+
+
Your Spread
+
+ {bet.spread > 0 ? '+' : ''}{bet.spread}
+
+
+
+
Stake
+
${Number(bet.stake_amount).toFixed(2)}
+
+
+
+
+
+
+ Team:
+ {bet.team === 'home' ? bet.event_home_team : bet.event_away_team}
+
+
+ Official Line:
+ {bet.event_official_spread > 0 ? '+' : ''}{bet.event_official_spread}
+
+
+ {bet.taker_username && (
+
+ Opponent:
+ {bet.taker_username}
+
+ )}
+
+
+ )
+}
export const MyBets = () => {
- const [activeTab, setActiveTab] = useState<'created' | 'accepted' | 'active' | 'history'>('active')
+ const [activeTab, setActiveTab] = useState<'active' | 'history'>('active')
- const { data: createdBets } = useQuery({
- queryKey: ['myCreatedBets'],
- queryFn: betsApi.getMyCreatedBets,
- enabled: activeTab === 'created',
- })
-
- const { data: acceptedBets } = useQuery({
- queryKey: ['myAcceptedBets'],
- queryFn: betsApi.getMyAcceptedBets,
- enabled: activeTab === 'accepted',
- })
-
- const { data: activeBets } = useQuery({
- queryKey: ['myActiveBets'],
- queryFn: betsApi.getMyActiveBets,
+ const { data: activeBets, isLoading: activeLoading } = useQuery({
+ queryKey: ['myActiveSpreadBets'],
+ queryFn: spreadBetsApi.getMyActiveBets,
enabled: activeTab === 'active',
})
- const { data: historyBets } = useQuery({
- queryKey: ['myHistory'],
- queryFn: betsApi.getMyHistory,
- enabled: activeTab === 'history',
- })
-
- const currentBets =
- activeTab === 'created' ? createdBets :
- activeTab === 'accepted' ? acceptedBets :
- activeTab === 'active' ? activeBets :
- historyBets
+ // For history, we could add a separate endpoint later
+ // For now, just show active bets
+ const currentBets = activeTab === 'active' ? activeBets : []
return (
My Bets
-
View and manage your bets
+
View and manage your spread bets
{[
- { key: 'active' as const, label: 'Active' },
- { key: 'created' as const, label: 'Created' },
- { key: 'accepted' as const, label: 'Accepted' },
+ { key: 'active' as const, label: 'Active Bets' },
{ key: 'history' as const, label: 'History' },
].map(({ key, label }) => (
{
))}
- {currentBets ? (
-
- ) : (
+ {activeLoading ? (
+ ) : currentBets && currentBets.length > 0 ? (
+
+ {currentBets.map((bet) => (
+
+ ) : (
+
+
No bets found
+
+ {activeTab === 'active'
+ ? 'Create a bet on the Sport Events page to get started!'
+ : 'Your completed bets will appear here'}
+
+
)}
diff --git a/frontend/src/pages/NewBets.tsx b/frontend/src/pages/NewBets.tsx
new file mode 100644
index 0000000..24b8f6c
--- /dev/null
+++ b/frontend/src/pages/NewBets.tsx
@@ -0,0 +1,85 @@
+import { Link } from 'react-router-dom'
+import { useQuery } from '@tanstack/react-query'
+import { Header } from '@/components/layout/Header'
+import { Button } from '@/components/common/Button'
+import { Loading } from '@/components/common/Loading'
+import { sportEventsApi } from '@/api/sport-events'
+import { Zap, ArrowRight, Clock } from 'lucide-react'
+
+export const NewBets = () => {
+ const { data: events, isLoading } = useQuery({
+ queryKey: ['public-sport-events'],
+ queryFn: () => sportEventsApi.getPublicEvents(),
+ })
+
+ // Simulate recent bets from events
+ const recentBets = events?.slice(0, 10).map((event, index) => ({
+ id: index,
+ event,
+ amount: Math.floor(Math.random() * 500 + 25),
+ spread: event.official_spread + (Math.random() > 0.5 ? 0.5 : -0.5),
+ team: Math.random() > 0.5 ? event.home_team : event.away_team,
+ timeAgo: `${Math.floor(Math.random() * 30 + 1)}m ago`,
+ }))
+
+ return (
+
+
+
+
+
+
New Bets
+
Fresh betting action from the community
+
+
+ {isLoading ? (
+
+ ) : (
+
+ {recentBets?.map((bet) => (
+
+
+
+
+ ${bet.amount}
+
+
+
+ {bet.team} {bet.spread > 0 ? '+' : ''}{bet.spread.toFixed(1)}
+
+
+ {bet.event.home_team} vs {bet.event.away_team}
+
+
+
+
+
+ {bet.event.sport}
+
+
+
+ Take Bet
+
+
+
+ ))}
+
+ )}
+
+
+
+
+ View All Events
+
+
+
+
+ )
+}
diff --git a/frontend/src/pages/Profile.tsx b/frontend/src/pages/Profile.tsx
new file mode 100644
index 0000000..2e7cf82
--- /dev/null
+++ b/frontend/src/pages/Profile.tsx
@@ -0,0 +1,192 @@
+import { useQuery } from '@tanstack/react-query'
+import { Link } from 'react-router-dom'
+import { Layout } from '@/components/layout/Layout'
+import { Card } from '@/components/common/Card'
+import { Loading } from '@/components/common/Loading'
+import { walletApi } from '@/api/wallet'
+import { spreadBetsApi } from '@/api/spread-bets'
+import { useAuthStore } from '@/store'
+import { formatCurrency } from '@/utils/formatters'
+import {
+ TrendingUp,
+ Activity,
+ Award,
+ Wallet,
+ User,
+ Mail,
+ Calendar,
+ ArrowRight
+} from 'lucide-react'
+
+export const Profile = () => {
+ const { user } = useAuthStore()
+
+ const { data: wallet, isLoading: walletLoading } = useQuery({
+ queryKey: ['wallet'],
+ queryFn: walletApi.getWallet,
+ })
+
+ const { data: activeBets, isLoading: betsLoading } = useQuery({
+ queryKey: ['myActiveSpreadBets'],
+ queryFn: spreadBetsApi.getMyActiveBets,
+ })
+
+ if (walletLoading || betsLoading) {
+ return
+ }
+
+ return (
+
+
+ {/* Profile Header */}
+
+
+
+
+
+
+ {user?.display_name || user?.username}
+
+
+
+ {user?.created_at && (
+
+
+ )}
+
+
+
+
+ {/* Stats Grid */}
+
+
+
+
+
+
+
Available Balance
+
+ {wallet ? formatCurrency(wallet.balance) : '$0.00'}
+
+
+
+
+
+
+
+
+
In Escrow
+
+ {wallet ? formatCurrency(wallet.escrow) : '$0.00'}
+
+
+
+
+
+
+
+
+
+
Active Bets
+
{activeBets?.length || 0}
+
+
+
+
+
+
+
+
Win Rate
+
+ {user ? `${(user.win_rate * 100).toFixed(0)}%` : '0%'}
+
+
+
+
+
+ {/* Quick Links */}
+
+
+
+
+
+
+
+
+
Wallet
+
Manage deposits and withdrawals
+
+
+
+
+
+
+
+
+
+
+
+
+
My Bets
+
View all your active and past bets
+
+
+
+
+
+
+
+ {/* Active Bets Preview */}
+ {activeBets && activeBets.length > 0 && (
+
+
+
Active Bets
+
+ {activeBets.slice(0, 3).map((bet) => (
+
+
+
+ {bet.event?.home_team} vs {bet.event?.away_team}
+
+
+ {bet.team === 'home' ? bet.event?.home_team : bet.event?.away_team}{' '}
+ {bet.spread > 0 ? '+' : ''}{bet.spread}
+
+
+
+
{formatCurrency(bet.stake_amount)}
+
{bet.status}
+
+
+ ))}
+
+ )}
+
+ )
+}
diff --git a/frontend/src/pages/SportEvents.tsx b/frontend/src/pages/SportEvents.tsx
new file mode 100644
index 0000000..8e05a5c
--- /dev/null
+++ b/frontend/src/pages/SportEvents.tsx
@@ -0,0 +1,153 @@
+import { useState } from 'react'
+import { useQuery } from '@tanstack/react-query'
+import { Layout } from '@/components/layout/Layout'
+import { Loading } from '@/components/common/Loading'
+import { Button } from '@/components/common/Button'
+import { sportEventsApi } from '@/api/sport-events'
+import { SpreadGrid } from '@/components/bets/SpreadGrid'
+import { ChevronLeft } from 'lucide-react'
+
+export const SportEvents = () => {
+ const [selectedEventId, setSelectedEventId] = useState
(null)
+
+ const { data: events, isLoading: isLoadingEvents } = useQuery({
+ queryKey: ['sport-events'],
+ queryFn: () => sportEventsApi.getUpcomingEvents(),
+ })
+
+ const { data: selectedEvent, isLoading: isLoadingEvent } = useQuery({
+ queryKey: ['sport-event', selectedEventId],
+ queryFn: () => sportEventsApi.getEventWithGrid(selectedEventId!),
+ enabled: selectedEventId !== null,
+ })
+
+ const handleEventClick = (eventId: number) => {
+ setSelectedEventId(eventId)
+ }
+
+ const handleBackToList = () => {
+ setSelectedEventId(null)
+ }
+
+ if (isLoadingEvents) {
+ return (
+
+
+ )
+ }
+
+ if (selectedEventId && isLoadingEvent) {
+ return (
+
+
+
+
+
+
+ )
+ }
+
+ return (
+
+
+ {selectedEvent ? (
+ <>
+
+
+
{
+ // Refetch to update grid
+ }}
+ onBetTaken={() => {
+ // Refetch to update grid
+ }}
+ />
+
+ ) : (
+ <>
+
+
Sport Events
+
+ Browse upcoming events and place spread bets
+
+
+
No upcoming events available
+
+ {events.map((event) => {
+ const gameTime = new Date(event.game_time)
+ const now = new Date()
+ const hoursUntil = Math.floor(
+ (gameTime.getTime() - now.getTime()) / (1000 * 60 * 60)
+ )
+
+ return (
+
handleEventClick(event.id)}
+ className="bg-white p-6 rounded-lg shadow hover:shadow-lg transition-shadow text-left"
+ >
+
+
+ {event.sport}
+
+ {hoursUntil < 24 && hoursUntil >= 0 && (
+
+ {hoursUntil}h
+
+ )}
+
+ {event.home_team} vs {event.away_team}
+
+
+
+
+ Spread: {event.home_team}{' '}
+ {event.official_spread > 0 ? '+' : ''}
+ {event.official_spread}
+
+
+ Time: {gameTime.toLocaleString()}
+
+ {event.venue && (
+
+ Venue: {event.venue}
+
+ )}
+ {event.league && (
+
{event.league}
+ )}
+
+
+ Bet range: ${event.min_bet_amount} - ${event.max_bet_amount}
+
+
+ Spread range: {event.min_spread} to {event.max_spread}
+
+
+ )
+ })}
+
+ )
+}
diff --git a/frontend/src/pages/Sports.tsx b/frontend/src/pages/Sports.tsx
new file mode 100644
index 0000000..3a42c25
--- /dev/null
+++ b/frontend/src/pages/Sports.tsx
@@ -0,0 +1,61 @@
+import { Link } from 'react-router-dom'
+import { Header } from '@/components/layout/Header'
+import { Button } from '@/components/common/Button'
+import { Trophy, ArrowRight } from 'lucide-react'
+
+export const Sports = () => {
+ const sports = [
+ { name: 'Football', icon: '🏈', leagues: ['NFL', 'NCAA Football'] },
+ { name: 'Basketball', icon: '🏀', leagues: ['NBA', 'NCAA Basketball'] },
+ { name: 'Hockey', icon: '🏒', leagues: ['NHL'] },
+ { name: 'Soccer', icon: '⚽', leagues: ['Premier League', 'La Liga', 'Bundesliga', 'MLS'] },
+ { name: 'Baseball', icon: '⚾', leagues: ['MLB'] },
+ { name: 'MMA', icon: '🥊', leagues: ['UFC', 'Bellator'] },
+ ]
+
+ return (
+
+
+
+
+
+
Sports
+
Choose your sport and start betting
+
+
+
+ {sports.map((sport) => (
+
+
+ {sport.icon}
+
{sport.name}
+
+
+ {sport.leagues.map((league) => (
+
+ {league}
+
+ ))}
+
+
+ ))}
+
+
+
+
+
+ View All Events
+
+
+
+
+
+
+
+
+
Watchlist
+
Track your favorite events and get alerts
+
+
+
+
👀
+
Your Watchlist is Empty
+
+ Sign up to save events to your watchlist and get notified when lines move or new bets are placed.
+
+
+
+
+ Create Account
+
+
+
+ Browse Events
+
+
+
+
+
+
+
+
+
Line Movement Alerts
+
+
+ Get notified instantly when lines move on events you're watching
+
+
+
+
+
Track Multiple Events
+
+
+ Keep an eye on all your favorite matchups in one place
+
+
+
+
+