PRTL - Internal Trader Portal

┌─────────────────────────────────────────────────────────────────┐
│                         PRTL Architecture                        │
├─────────────────────────────────────────────────────────────────┤
│                                                                   │
│   ┌─────────────┐    ┌─────────────┐    ┌─────────────┐         │
│   │   Sidebar   │    │ Event Tree  │    │   Main      │         │
│   │ Navigation  │    │  Sidebar    │    │  Content    │         │
│   └─────────────┘    └─────────────┘    └─────────────┘         │
│                                                                   │
│   Trader Context Bar: Name | Role | Email | Phone                │
│                                                                   │
└─────────────────────────────────────────────────────────────────┘

// TradingLayout component structure
<TradingLayout title="UFC 305" subtitle="November 25, 2024" showEventTree>
  <EventDetailPage />
</TradingLayout>

▼ MMA
  ▼ UFC
    ● UFC 305 (Live)
    ○ UFC 306 (Upcoming)
  ▼ BKB Extreme Fighting
    ○ BKB 48 Brawl in the Pines V
▼ Motorsports
  ▼ Formula 1
    ● Monaco Grand Prix (Live)

interface TraderInfo {
  name: string;      // "John Smith"
  role: string;      // "Senior Trader"
  email: string;     // "john.smith@altsportsdata.com"
  phone?: string;    // "+1 (555) 123-4567"
  avatar?: string;
}

<FightCard
  fight={fight}
  isSelected={selectedFightId === fight.id}
  onClick={() => setSelectedFightId(fight.id)}
  onEdit={() => openEditModal(fight)}
/>

▼ Main Card Markets
  ☑ Fight 1: Holloway vs Volkanovski (Moneyline)
  ☑ Fight 1: Method of Victory
  ☐ Fight 1: Round Totals (Draft)
▼ Preliminary Card Markets
  ☑ Fight 5: Jones vs Martinez

Hold: 4.76% | Blue: 48.5% | Red: 43.5% | Margin: +8.0%

// src/types/event.ts
 
type Sport = 'mma' | 'jai_alai' | 'f1' | 'esports' | 'drone_racing' | 'arm_wrestling' | 'combat';
type EventStatus = 'live' | 'upcoming' | 'scheduled' | 'completed' | 'cancelled';
type FightStatus = 'scheduled' | 'live' | 'completed' | 'cancelled' | 'postponed';
type MarketStatus = 'draft' | 'pending_review' | 'approved' | 'published' | 'suspended' | 'closed' | 'settled';
type WeightClass = 'flyweight' | 'bantamweight' | 'featherweight' | 'lightweight' | 'welterweight' | 'middleweight' | 'light_heavyweight' | 'heavyweight';
 
interface Fighter {
  id: string;
  name: string;
  nickname?: string;
  record?: string;
  country?: string;
}
 
interface Fight {
  id: string;
  event_id: string;
  fight_number: number;
  weight_class: WeightClass;
  scheduled_rounds: number;
  status: FightStatus;
  blue_corner?: Fighter;
  red_corner?: Fighter;
  result?: FightResult;
}
 
interface OddsMarket {
  id: string;
  type: string;
  name: string;
  status: 'open' | 'suspended' | 'closed';
  selections: OddsSelection[];
  last_updated: string;
}
 
interface OddsSelection {
  id: string;
  name: string;
  odds: number;
  implied_probability: number;
  movement?: 'up' | 'down' | 'none';
}

import { SportEventRenderer, type UniversalEvent } from '@/components/sports';
 
// Automatically renders correct component based on sport type
<SportEventRenderer
  event={{ sport: 'mma', data: fightData }}
  isSelected={isSelected}
  onSelect={handleSelect}
  showOdds={true}
  variant="full" // or "compact" for sidebar lists
/>

import { CombatEventCard } from '@/components/sports';
 
<CombatEventCard
  fight={fight}
  isSelected={isSelected}
  onSelect={handleSelect}
  showOdds={true}
  blueOdds={-150}
  redOdds={+130}
  onEdit={() => openEditModal(fight)}
/>

import { RacquetMatchCard } from '@/components/sports';
 
<RacquetMatchCard
  match={match}
  isSelected={isSelected}
  onSelect={handleSelect}
  showLean={true}
  onLeanChange={(playerId, lean) => updateLean(playerId, lean)}
/>

import { MotorsportEventCard, MotorsportResultsTable } from '@/components/sports';
 
<MotorsportEventCard
  event={raceEvent}
  isSelected={isSelected}
  onSelect={handleSelect}
/>
 
// Results table for completed sessions
<MotorsportResultsTable
  results={qualifyingResults}
  showTeam={true}
  showTime={true}
  showPoints={true}
/>

import { ExtremeEventCard, HeatCard } from '@/components/sports';
 
<ExtremeEventCard
  event={extremeEvent}
  isSelected={isSelected}
  onSelect={handleSelect}
  showLean={true}
/>
 
// For surfing/action sports heats
<HeatCard
  heat={heat}
  isSelected={isSelected}
  onSelect={handleSelect}
/>

import { EsportsMatchCard, GameTabs } from '@/components/sports';
 
<EsportsMatchCard
  match={esportsMatch}
  isSelected={isSelected}
  onSelect={handleSelect}
  team1Odds={-120}
  team2Odds={+100}
/>
 
// Game-by-game navigation
<GameTabs
  games={match.games}
  activeGameNumber={currentGame}
  onSelectGame={setCurrentGame}
  bestOf={5}
/>

import { SportFilterTabs } from '@/components/sports';
 
<SportFilterTabs
  sports={['mma', 'jai_alai', 'f1', 'bull_riding']}
  activeSport={currentSport}
  onSelectSport={setCurrentSport}
  showCounts={true}
  eventCounts={{ mma: 12, jai_alai: 8, f1: 3, bull_riding: 5 }}
/>

import { SportEventList } from '@/components/sports';
 
<SportEventList
  events={allEvents}
  selectedEventId={selectedId}
  onSelectEvent={handleSelectEvent}
  groupBySport={true}
  variant="full" // or "compact"
/>

// Corner colors (Tailwind)
const cornerColors = {
  blue: 'bg-blue-500',
  red: 'bg-red-500'
};
 
// Corner indicator usage
<span className="w-3 h-3 rounded-full bg-blue-500" /> // Blue corner
<span className="w-3 h-3 rounded-full bg-red-500" />  // Red corner

function formatOdds(odds: number): string {
  if (odds >= 0) return `+${odds}`;
  return odds.toString();
}
 
// Display: +150 (underdog) or -200 (favorite)

// Market lifecycle operations
POST /v1/prtl/markets                    // Create market
PUT  /v1/prtl/markets/{id}/odds/{lineId} // Update odds
POST /v1/prtl/markets/{id}/suspend       // Suspend market
POST /v1/prtl/markets/{id}/publish       // Publish to clients
POST /v1/prtl/markets/{id}/settle        // Settle with result