[V0_FILE]css:file="app/globals.css" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { /* Updated color scheme for UK Network Rail aesthetic */ --background: oklch(1 0 0); /* #ffffff */ --foreground: oklch(0.35 0.08 258.34); /* #005EB8 navy blue */ --card: oklch(0.97 0.005 258.34); /* #f1f5f9 light gray */ --card-foreground: oklch(0.45 0.02 258.34); /* #475569 dark gray */ --popover: oklch(1 0 0); /* #ffffff */ --popover-foreground: oklch(0.35 0.08 258.34); /* #005EB8 */ --primary: oklch(0.35 0.08 258.34); /* #005EB8 navy blue */ --primary-foreground: oklch(1 0 0); /* #ffffff */ --secondary: oklch(0.55 0.22 27.33); /* #DA291C disruption red */ --secondary-foreground: oklch(1 0 0); /* #ffffff */ --muted: oklch(0.97 0.005 258.34); /* #f1f5f9 */ --muted-foreground: oklch(0.45 0.02 258.34); /* #475569 */ --accent: oklch(0.55 0.22 27.33); /* #DA291C */ --accent-foreground: oklch(1 0 0); /* #ffffff */ --destructive: oklch(0.55 0.22 27.33); /* #DA291C */ --destructive-foreground: oklch(1 0 0); /* #ffffff */ --border: oklch(0.92 0.005 258.34); /* #e2e8f0 */ --input: oklch(0.95 0.005 258.34); /* #f0f4f8 */ --ring: oklch(0.35 0.08 258.34 / 0.5); /* rgba(0, 94, 184, 0.5) */ --chart-1: oklch(0.35 0.08 258.34); /* #005EB8 */ --chart-2: oklch(0.55 0.22 27.33); /* #DA291C */ --chart-3: oklch(0.97 0.005 258.34); /* #f1f5f9 */ --chart-4: oklch(0.45 0.02 258.34); /* #475569 */ --chart-5: oklch(0.65 0.15 120); /* #84cc16 success green */ --radius: 0.5rem; --sidebar: oklch(0.97 0.005 258.34); /* #f1f5f9 */ --sidebar-foreground: oklch(0.35 0.08 258.34); /* #005EB8 */ --sidebar-primary: oklch(0.35 0.08 258.34); /* #005EB8 */ --sidebar-primary-foreground: oklch(1 0 0); /* #ffffff */ --sidebar-accent: oklch(0.55 0.22 27.33); /* #DA291C */ --sidebar-accent-foreground: oklch(1 0 0); /* #ffffff */ --sidebar-border: oklch(0.92 0.005 258.34); /* #e2e8f0 */ --sidebar-ring: oklch(0.35 0.08 258.34 / 0.5); /* rgba(0, 94, 184, 0.5) */ } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.145 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.439 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { --font-sans: var(--font-geist-sans); --font-mono: var(--font-geist-mono); --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" "use client" import { useState } from "react" import { Card, CardContent } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Progress } from "@/components/ui/progress" import { Clock, AlertTriangle, CheckCircle, Train, Activity } from "lucide-react" import { TrainTimeline } from "@/components/train-timeline" import { DisruptionsPanel } from "@/components/disruptions-panel" import { AIRecommendations } from "@/components/ai-recommendations" import { DecisionLog } from "@/components/decision-log" import { WhatIfSimulator } from "@/components/what-if-simulator" export default function RailwayDashboard() { const [selectedTrain, setSelectedTrain] = useState(null) const [activeTab, setActiveTab] = useState("overview") // Mock KPI data const kpis = { punctuality: 87.3, averageDelay: 4.2, activeTrains: 142, disruptions: 7, } return (

{/* Header */}

Network Rail Control

Railway Operations Dashboard

Live {new Date().toLocaleTimeString("en-GB")}

{/* KPI Bar */}

Punctuality

{kpis.punctuality}%

Avg Delay

{kpis.averageDelay}m

Active Trains

{kpis.activeTrains}

Disruptions

{kpis.disruptions}

{/* Main Content */}

{/* Left Panel - Disruptions */}

{/* Center - Timeline */}

Train Timeline Decision Log What-If Simulator

{/* Right Panel - AI Recommendations */}

) } [V0_FILE]typescriptreact:file="components/train-timeline.tsx" isMerged="true" "use client" import { useState } from "react" import { Card, CardContent } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { ScrollArea } from "@/components/ui/scroll-area" import { Clock, MapPin, Users } from "lucide-react" interface Train { id: string number: string route: string status: "on-time" | "at-risk" | "delayed" currentLocation: string nextStop: string passengers: number scheduledTime: string actualTime: string delay: number } interface TrainTimelineProps { selectedTrain: string | null onTrainSelect: (trainId: string | null) => void } export function TrainTimeline({ selectedTrain, onTrainSelect }: TrainTimelineProps) { const [timeRange, setTimeRange] = useState("current") // Mock train data const trains: Train[] = [ { id: "1", number: "1A23", route: "London Euston → Manchester Piccadilly", status: "on-time", currentLocation: "Milton Keynes Central", nextStop: "Rugby", passengers: 287, scheduledTime: "14:30", actualTime: "14:30", delay: 0, }, { id: "2", number: "2B45", route: "Birmingham New Street → London Euston", status: "at-risk", currentLocation: "Coventry", nextStop: "Rugby", passengers: 312, scheduledTime: "14:45", actualTime: "14:48", delay: 3, }, { id: "3", number: "3C67", route: "Manchester Piccadilly → London Euston", status: "delayed", currentLocation: "Stockport", nextStop: "Macclesfield", passengers: 198, scheduledTime: "15:00", actualTime: "15:12", delay: 12, }, { id: "4", number: "4D89", route: "London Euston → Glasgow Central", status: "on-time", currentLocation: "Watford Junction", nextStop: "Milton Keynes Central", passengers: 445, scheduledTime: "15:15", actualTime: "15:15", delay: 0, }, { id: "5", number: "5E12", route: "Glasgow Central → London Euston", status: "delayed", currentLocation: "Preston", nextStop: "Wigan North Western", passengers: 356, scheduledTime: "15:30", actualTime: "15:38", delay: 8, }, ] const getStatusColor = (status: Train["status"]) => { switch (status) { case "on-time": return "bg-green-500" case "at-risk": return "bg-yellow-500" case "delayed": return "bg-red-500" default: return "bg-gray-500" } } const getStatusBadge = (status: Train["status"]) => { switch (status) { case "on-time": return On Time case "at-risk": return At Risk case "delayed": return Delayed } } return (

{/* Timeline Header */}

Train Timeline

{/* Timeline Content */}

{/* Time Scale */}

Train

{Array.from({ length: 12 }, (_, i) => { const hour = 14 + Math.floor(i / 2) const minute = i % 2 === 0 ? "00" : "30" return (

{hour}:{minute}

) })}

{/* Train Rows */}

{trains.map((train) => ( onTrainSelect(selectedTrain === train.id ? null : train.id)} >

{/* Train Info */}

{train.number}

{train.route.split(" → ")[0]}

{getStatusBadge(train.status)}

{/* Timeline Bar */}

{/* Train position bar */}

{/* Current time indicator */}

{/* Time labels */}

{train.scheduledTime} {train.delay > 0 && +{train.delay}m}

{/* Expanded Details */} {selectedTrain === train.id && (

Current

{train.currentLocation}

Next Stop

{train.nextStop}

Passengers

{train.passengers}

)} ))}

) } [V0_FILE]typescriptreact:file="components/ai-recommendations.tsx" isMerged="true" "use client" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { ScrollArea } from "@/components/ui/scroll-area" import { Progress } from "@/components/ui/progress" import { CheckCircle, XCircle, RotateCcw, Brain, TrendingUp, AlertCircle } from "lucide-react" interface Recommendation { id: string type: "reroute" | "delay" | "cancel" | "priority" update: string recommendation: string reason: string confidence: number impact: string affectedTrains: string[] estimatedSavings: string } export function AIRecommendations() { const recommendations: Recommendation[] = [ { id: "1", type: "reroute", update: "Signal failure at Rugby Junction detected", recommendation: "Reroute trains 1A23 and 4D89 via alternative route through Northampton", reason: "Alternative route adds 12 minutes but avoids 45-minute delay at Rugby. Reduces passenger impact by 78%.", confidence: 87, impact: "Moderate", affectedTrains: ["1A23", "4D89"], estimatedSavings: "33 minutes total delay", }, { id: "2", type: "priority", update: "Track clearance at Coventry progressing ahead of schedule", recommendation: "Prioritize train 2B45 for immediate departure once track is clear", reason: "Train 2B45 has highest passenger load (312) and connecting services at London Euston. Early departure minimizes cascade delays.", confidence: 92, impact: "High", affectedTrains: ["2B45"], estimatedSavings: "18 minutes average delay", }, { id: "3", type: "delay", update: "Engineering work at Watford Junction running over schedule", recommendation: "Implement 15-minute holding pattern for southbound services", reason: "Coordinated delay prevents bunching and maintains even service intervals. Better passenger experience than irregular departures.", confidence: 74, impact: "Low", affectedTrains: ["5E12", "6F34"], estimatedSavings: "Improved punctuality +5%", }, ] const getTypeIcon = (type: Recommendation["type"]) => { switch (type) { case "reroute": return case "priority": return case "delay": return case "cancel": return } } const getImpactColor = (impact: string) => { switch (impact.toLowerCase()) { case "low": return "bg-green-100 text-green-800 hover:bg-green-100" case "moderate": return "bg-yellow-100 text-yellow-800 hover:bg-yellow-100" case "high": return "bg-red-100 text-red-800 hover:bg-red-100" default: return "bg-gray-100 text-gray-800 hover:bg-gray-100" } } return (

AI Recommendations

{recommendations.map((rec) => (

{/* Header */}

{getTypeIcon(rec.type)}

{rec.impact} Impact

{rec.confidence}%

Confidence

{/* Confidence Bar */} {/* Update */}

Update

{rec.update}

{/* Recommendation */}

Recommendation

{rec.recommendation}

{/* Reason */}

Reason

{rec.reason}

{/* Affected Trains */}

Affected Trains

{rec.affectedTrains.map((train) => ( {train} ))}

{/* Estimated Savings */}

Estimated Benefit

{rec.estimatedSavings}

{/* Action Buttons */}

))}

) } [V0_FILE]typescriptreact:file="components/decision-log.tsx" isMerged="true" "use client" import { Card, CardContent } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { ScrollArea } from "@/components/ui/scroll-area" import { CheckCircle, XCircle, Clock, User } from "lucide-react" interface Decision { id: string timestamp: string operator: string action: "accepted" | "overridden" | "pending" recommendation: string outcome?: string reasoning?: string affectedTrains: string[] } export function DecisionLog() { const decisions: Decision[] = [ { id: "1", timestamp: "14:45:23", operator: "Controller A. Smith", action: "accepted", recommendation: "Reroute train 1A23 via Northampton due to signal failure", outcome: "Successfully implemented. Train arrived 8 minutes late vs predicted 45 minutes.", affectedTrains: ["1A23"], }, { id: "2", timestamp: "14:38:15", operator: "Controller B. Jones", action: "overridden", recommendation: "Cancel train 3C67 due to crew shortage", reasoning: "Alternative crew sourced from depot. Service maintained.", affectedTrains: ["3C67"], }, { id: "3", timestamp: "14:32:07", operator: "Controller A. Smith", action: "accepted", recommendation: "Priority boarding for train 2B45 at Coventry", outcome: "Reduced dwell time by 3 minutes. On-time performance maintained.", affectedTrains: ["2B45"], }, { id: "4", timestamp: "14:28:41", operator: "Controller C. Wilson", action: "pending", recommendation: "Implement speed restriction at Watford Junction", affectedTrains: ["4D89", "5E12"], }, { id: "5", timestamp: "14:15:33", operator: "Controller B. Jones", action: "accepted", recommendation: "Extend platform time at Manchester Piccadilly", outcome: "Medical emergency resolved. Service resumed normal operation.", affectedTrains: ["3C67", "6F34"], }, ] const getActionIcon = (action: Decision["action"]) => { switch (action) { case "accepted": return case "overridden": return case "pending": return } } const getActionBadge = (action: Decision["action"]) => { switch (action) { case "accepted": return Accepted case "overridden": return Overridden case "pending": return Pending } } return (

Decision Log

Chronological record of AI recommendations and controller decisions

{decisions.map((decision) => (

{/* Header */}

{getActionIcon(decision.action)}

{decision.timestamp}

{decision.operator}

{getActionBadge(decision.action)}

{/* Recommendation */}

Recommendation

{decision.recommendation}

{/* Outcome or Reasoning */} {decision.outcome && (

Outcome

{decision.outcome}

)} {decision.reasoning && (

Override Reasoning

{decision.reasoning}

)} {/* Affected Trains */}

Affected Trains

{decision.affectedTrains.map((train) => ( {train} ))}

))}

) } [V0_FILE]typescriptreact:file="components/what-if-simulator.tsx" isMerged="true" "use client" import { useState } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Badge } from "@/components/ui/badge" import { Separator } from "@/components/ui/separator" import { Play, RotateCcw, TrendingUp, TrendingDown } from "lucide-react" interface SimulationResult { scenario: string beforeMetrics: { totalDelay: number affectedTrains: number passengerImpact: number } afterMetrics: { totalDelay: number affectedTrains: number passengerImpact: number } recommendations: string[] } export function WhatIfSimulator() { const [disruptionType, setDisruptionType] = useState("") const [location, setLocation] = useState("") const [duration, setDuration] = useState("") const [severity, setSeverity] = useState("") const [simulationResult, setSimulationResult] = useState(null) const [isSimulating, setIsSimulating] = useState(false) const runSimulation = async () => { if (!disruptionType || !location || !duration || !severity) return setIsSimulating(true) // Simulate API call delay await new Promise((resolve) => setTimeout(resolve, 2000)) // Mock simulation result const result: SimulationResult = { scenario: `${disruptionType} at ${location} for ${duration} minutes (${severity} severity)`, beforeMetrics: { totalDelay: 127, affectedTrains: 8, passengerImpact: 2340, }, afterMetrics: { totalDelay: 89, affectedTrains: 5, passengerImpact: 1650, }, recommendations: [ "Reroute trains 1A23 and 4D89 via Northampton (+12 min each)", "Implement bus replacement service for local stations", "Coordinate with connecting services at major hubs", "Prioritize high-capacity trains for available slots", ], } setSimulationResult(result) setIsSimulating(false) } const resetSimulation = () => { setDisruptionType("") setLocation("") setDuration("") setSeverity("") setSimulationResult(null) } const getMetricChange = (before: number, after: number) => { const change = ((after - before) / before) * 100 return { value: Math.abs(change).toFixed(1), isImprovement: change < 0, icon: change < 0 ? ( ) : ( ), } } return (

What-If Simulator

Model potential disruptions and evaluate optimization strategies

{/* Input Panel */} Disruption Parameters

Disruption Type

Location

Duration (minutes) setDuration(e.target.value)} />

Severity

{/* Results Panel */} Simulation Results {!simulationResult ? (

Configure parameters and run simulation to see results

) : (

{/* Scenario */}

Scenario

{simulationResult.scenario}

{/* Metrics Comparison */}

Impact Analysis

{/* Total Delay */}

Total Delay

{simulationResult.beforeMetrics.totalDelay}m → {simulationResult.afterMetrics.totalDelay}m { getMetricChange( simulationResult.beforeMetrics.totalDelay, simulationResult.afterMetrics.totalDelay, ).icon } { getMetricChange( simulationResult.beforeMetrics.totalDelay, simulationResult.afterMetrics.totalDelay, ).value } %

{/* Affected Trains */}

Affected Trains

{simulationResult.beforeMetrics.affectedTrains} →{" "} {simulationResult.afterMetrics.affectedTrains} { getMetricChange( simulationResult.beforeMetrics.affectedTrains, simulationResult.afterMetrics.affectedTrains, ).icon } { getMetricChange( simulationResult.beforeMetrics.affectedTrains, simulationResult.afterMetrics.affectedTrains, ).value } %

{/* Passenger Impact */}

Passenger Impact

{simulationResult.beforeMetrics.passengerImpact} →{" "} {simulationResult.afterMetrics.passengerImpact} { getMetricChange( simulationResult.beforeMetrics.passengerImpact, simulationResult.afterMetrics.passengerImpact, ).icon } { getMetricChange( simulationResult.beforeMetrics.passengerImpact, simulationResult.afterMetrics.passengerImpact, ).value } %

{/* Recommendations */}

AI Recommendations

{simulationResult.recommendations.map((rec, index) => (

{index + 1}. {rec}

))}

)}

) } [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "geist": "^1.3.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "14.2.25", "next-themes": "^0.4.6", "react": "^19", "react-day-picker": "9.8.0", "react-dom": "^19", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.67" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="components/disruptions-panel.tsx" isEdit="true" isQuickEdit="true" "use client" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { ScrollArea } from "@/components/ui/scroll-area" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog" import { AlertTriangle, Clock, Zap, Construction, MapPin, Play } from "lucide-react" import { useState } from "react" interface Disruption { id: string type: "signal" | "track" | "delay" | "maintenance" title: string location: string severity: "low" | "medium" | "high" affectedTrains: string[] estimatedDuration: string description: string reportedAt: string } const disruptionExplanations = { signal: { title: "Signal Failure Explained", description: "Learn how railway signals work and what happens when they fail", videoQuery: "railway signal failure explanation showing signal box malfunction and train safety systems", }, track: { title: "Track Blockage Explained", description: "Understanding track obstructions and clearance procedures", videoQuery: "railway track blockage debris removal and safety procedures", }, delay: { title: "Passenger Incident Response", description: "How railway staff handle passenger emergencies and medical incidents", videoQuery: "railway passenger emergency response medical incident procedures", }, maintenance: { title: "Engineering Works Explained", description: "Why planned maintenance is essential for railway safety", videoQuery: "railway track maintenance engineering works single line working procedures", }, } export function DisruptionsPanel() { const [selectedExplanation, setSelectedExplanation] = useState(null) const disruptions: Disruption[] = [ { id: "1", type: "signal", title: "Signal Failure", location: "Rugby Junction", severity: "high", affectedTrains: ["1A23", "2B45", "4D89"], estimatedDuration: "45 mins", description: "Signal box malfunction affecting northbound services", reportedAt: "14:23", }, { id: "2", type: "track", title: "Track Blockage", location: "Coventry Station", severity: "medium", affectedTrains: ["2B45"], estimatedDuration: "20 mins", description: "Debris on track, clearance in progress", reportedAt: "14:35", }, { id: "3", type: "delay", title: "Passenger Incident", location: "Manchester Piccadilly", severity: "low", affectedTrains: ["3C67"], estimatedDuration: "15 mins", description: "Medical emergency, emergency services on scene", reportedAt: "14:42", }, { id: "4", type: "maintenance", title: "Planned Engineering", location: "Watford Junction", severity: "medium", affectedTrains: ["4D89", "5E12"], estimatedDuration: "2 hours", description: "Scheduled track maintenance, single line working", reportedAt: "13:00", }, ] const getDisruptionIcon = (type: Disruption["type"]) => { switch (type) { case "signal": return case "track": return case "delay": return case "maintenance": return } } const getSeverityColor = (severity: Disruption["severity"]) => { switch (severity) { case "low": return "bg-yellow-100 text-yellow-800 hover:bg-yellow-100" case "medium": return "bg-orange-100 text-orange-800 hover:bg-orange-100" case "high": return "bg-red-100 text-red-800 hover:bg-red-100" } } return (

Active Disruptions

{disruptions.map((disruption) => (

{/* Header */}

{getDisruptionIcon(disruption.type)}

{disruption.title}

{disruption.location}

{disruption.severity.toUpperCase()}

{/* Description */}

{disruption.description}

{/* Affected Trains */}

Affected Trains:

{disruption.affectedTrains.map((train) => ( {train} ))}

{/* Footer */}

Est. {disruption.estimatedDuration} Reported {disruption.reportedAt}

{/* Actions */}

))}

) } [V0_FILE]plaintext:file="public/videos/explanation-signal.mp4" query="railway signal failure explanation showing signal box malfunction and train safety systems" [V0_FILE]plaintext:file="public/videos/explanation-track.mp4" query="railway track blockage debris removal and safety procedures" [V0_FILE]plaintext:file="public/videos/explanation-delay.mp4" query="railway passenger emergency response medical incident procedures" [V0_FILE]plaintext:file="public/videos/explanation-maintenance.mp4" query="railway track maintenance engineering works single line working procedures" [V0_FILE]jpg:file="public/railway-control-room-dashboard.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/railway-control-room-dashboard-md0YNtoLRCdSZEVh4HMRNW1j7c4lG8.jpg"