108:"ExplicitChatIdProvider" 109:I[903690,["$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b","$81","$7d","$82","$83","$7f","$84","$85","$86","$87","$88","$89","$7e","$8a","$8b"],"$108"] 10a:I[838238,["$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b","$81","$7d","$82","$83","$7f","$84","$85","$86","$87","$88","$89","$7e","$8a","$8b"],"SWRDataProvider"] 10c:[] 10d:[["b_dDPh0ecuNBM",null],["b_CkzZhMr0gca",null]] 10e:[["b_dDPh0ecuNBM",{"templateVersionId":null,"templateCanonId":null}],["b_CkzZhMr0gca",{"templateVersionId":null,"templateCanonId":null}]] 10f:[["b_4Vjj1MRoKN9","$D2026-01-18T20:01:29.730Z"],["b_XX9Rn9d1bGI","$D2026-01-18T20:05:42.236Z"],["b_zMlI3GQXXv0","$D2026-01-18T20:06:48.041Z"],["b_Ve00p3RYCn2","$D2026-01-18T20:10:19.394Z"],["b_d0nWY7Gfiei","$D2026-01-18T20:10:45.672Z"],["b_Q56pUSzN9Vr","$D2026-01-18T20:11:13.439Z"],["b_TEBk5dmVLjy","$D2026-01-18T20:11:31.884Z"],["b_GY1TyBmr7Hv","$D2026-01-18T20:18:20.203Z"],["b_8VpNgfKhhox","$D2026-01-18T20:21:32.857Z"],["b_dBvzBWaQ9iR","$D2026-01-18T20:22:38.562Z"],["b_Av0KpcIMXYB","$D2026-01-18T20:25:24.544Z"],["b_eL3kTOobZtb","$D2026-01-18T20:35:15.005Z"],["b_qLbJG8oGv4D","$D2026-01-18T20:35:25.847Z"],["b_AXOZvpuiAeM","$D2026-01-18T20:35:37.039Z"],["b_LM9rf1PKAOy","$D2026-01-18T20:38:28.565Z"],["b_KhNryBRFVzD","$D2026-01-18T20:38:36.777Z"],["b_MBdkJKwinnp","$D2026-01-18T20:38:52.644Z"],["b_8g9wecE36q4","$D2026-01-18T20:39:09.293Z"],["b_xgPpNperSDn","$D2026-01-18T20:44:48.927Z"],["b_5Y23HrSOXf4","$D2026-01-18T20:44:59.538Z"],["b_cqsqLolyM8p","$D2026-01-18T20:47:59.740Z"],["b_JU2Jt15XWfS","$D2026-01-18T21:07:51.673Z"],["b_zOtedDIlLmh","$D2026-01-18T21:08:05.440Z"],["b_Kp7JHRvqpMS","$D2026-01-18T21:08:26.941Z"],["b_LajL4JKcz62","$D2026-01-18T21:08:47.115Z"],["b_IVUh97JRVZC","$D2026-01-18T21:08:59.772Z"],["b_dDPh0ecuNBM","$D2026-01-18T21:15:42.815Z"],["b_CkzZhMr0gca","$D2026-01-18T21:16:20.035Z"]] 110:[["b_dDPh0ecuNBM",false],["b_CkzZhMr0gca",false]] 111:[["b_dDPh0ecuNBM","$undefined"],["b_CkzZhMr0gca",{"git":{"ref":"main","sha":"a30cc736314b47f7a31877a05f90ab8296aadadc","type":"github","repoId":0,"repoName":"v0-1-Jshpt4ohGEnfzvn2m8coEgYz-pd7xzqqxarp","ownerName":"v0-git-s3-storage","commitMessage":"Initial commit from v0"}}]] 112:[["b_dDPh0ecuNBM",null],["b_CkzZhMr0gca",null]] 113:[["b_dDPh0ecuNBM",true],["b_CkzZhMr0gca",true]] 114:[["b_dDPh0ecuNBM",true],["b_CkzZhMr0gca",true]] 115:[] 116:Ta4c11,[V0_FILE]plaintext:file=".local/state/replit/agent/.agent_state_9df18c295ef1ec1424195ec272cf602cc53bff8f.bin" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/files-blob/.local/state/replit/agent/.agent_state_9df18c295ef1ec1424195ec272cf602cc53bff8f-kmQNtiq4kdmIRXB8Uuc1M40wrdxrYW.bin" isMerged="true" [V0_FILE]plaintext:file=".local/state/replit/agent/.agent_state_df4e83814c1501897a65cb359ed4b7311753e179.bin" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/files-blob/.local/state/replit/agent/.agent_state_df4e83814c1501897a65cb359ed4b7311753e179-dfwmBh2YjgzQQZsrjLnId7qEh1yt2H.bin" isMerged="true" [V0_FILE]plaintext:file=".local/state/replit/agent/.agent_state_ed020ab8e74dcceff3e3dd6073444105e41726fa.bin" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/files-blob/.local/state/replit/agent/.agent_state_ed020ab8e74dcceff3e3dd6073444105e41726fa-xNE1RWoTI7f3S6gvDI64bTozTxTnRo.bin" isMerged="true" [V0_FILE]plaintext:file=".local/state/replit/agent/.agent_state_main.bin" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/files-blob/.local/state/replit/agent/.agent_state_main-3tBqlItNLAhFYYych1NS8HLNUvDjQ7.bin" isMerged="true" [V0_FILE]plaintext:file=".local/state/replit/agent/repl_state.bin" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/files-blob/.local/state/replit/agent/repl_state-lpjXNIsbTb0RUrOSICqbAZ9VZRFikY.bin" isMerged="true" [V0_FILE]plaintext:file=".local/state/replit/agent/.agent_state_048b9e664192f8e54f770f371809b6fe28669eec.bin" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/files-blob/.local/state/replit/agent/.agent_state_048b9e664192f8e54f770f371809b6fe28669eec-Ajjb0MXiWyh7iw9vWWxqJvymhiKhDy.bin" isMerged="true" [V0_FILE]plaintext:file=".local/state/replit/agent/.agent_state_15c7fd7abd7e20f3f798178b7b9f118f62458699.bin" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/files-blob/.local/state/replit/agent/.agent_state_15c7fd7abd7e20f3f798178b7b9f118f62458699-3vpvf4aHlXHz1yMJYA1w7HW22U0v5r.bin" isMerged="true" [V0_FILE]plaintext:file=".local/state/replit/agent/.agent_state_71a71533b9c297a25a3d17dc3852b91e9a92a542.bin" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/files-blob/.local/state/replit/agent/.agent_state_71a71533b9c297a25a3d17dc3852b91e9a92a542-TsorIs3m8yoIkZPk7Pk24rojzOxedm.bin" isMerged="true" [V0_FILE]typescript:file="app/api/ai/fetch-matches/route.ts" isMerged="true" import { NextResponse } from "next/server" import { fetchMatchesFromAI, TOP_COMPETITIONS } from "@/lib/ai-service" export async function POST(req: Request) { try { const { league, date, testMode } = await req.json() // Test mode for quick validation if (testMode) { return NextResponse.json([ { id: "test-match-1", homeTeam: { name: "Test Team 1", nameAr: "فريق الاختبار 1", logo: "", shortName: "TST1", }, awayTeam: { name: "Test Team 2", nameAr: "فريق الاختبار 2", logo: "", shortName: "TST2", }, date: date || new Date().toISOString().split("T")[0], time: "20:00", venue: "Test Stadium", venueAr: "ملعب الاختبار", competition: "Test League", competitionAr: "دوري الاختبار", status: "upcoming", channel: "beIN Sports", channelAr: "بي إن سبورتس", }, ]) } // Validate competition const competition = TOP_COMPETITIONS.find((c) => c.id === league) if (!competition) { return NextResponse.json( { error: "Invalid competition" }, { status: 400 } ) } // Validate date if (!date) { return NextResponse.json({ error: "Date is required" }, { status: 400 }) } const matches = await fetchMatchesFromAI(league, date) return NextResponse.json(matches) } catch (error) { console.error("API Error:", error) return NextResponse.json( { error: "Failed to fetch matches" }, { status: 500 } ) } } export async function GET() { // Return list of available competitions return NextResponse.json({ competitions: TOP_COMPETITIONS, message: "Use POST to fetch matches for a specific competition and date", }) } [V0_FILE]typescript:file="app/api/match/[id]/route.ts" isMerged="true" import { NextResponse } from "next/server" import { fetchMatchDetails, TOP_COMPETITIONS } from "@/lib/ai-service" const FOOTBALL_DATA_API_KEY = process.env.FOOTBALL_DATA_API_KEY || "51db66a3c9634364baa34e3078ac6b91" const FOOTBALL_DATA_BASE_URL = "https://api.football-data.org/v4" // Fetch standings for a competition async function fetchStandings(competitionCode: string) { try { const response = await fetch( `${FOOTBALL_DATA_BASE_URL}/competitions/${competitionCode}/standings`, { headers: { "X-Auth-Token": FOOTBALL_DATA_API_KEY, }, next: { revalidate: 3600 }, // Cache for 1 hour } ) if (!response.ok) { console.error(`Standings API error: ${response.status}`) return null } const data = await response.json() return data.standings?.[0]?.table || null } catch (error) { console.error("Error fetching standings:", error) return null } } // Fetch head-to-head matches async function fetchHeadToHead(matchId: string) { try { const actualId = matchId.replace("fd-", "") const response = await fetch( `${FOOTBALL_DATA_BASE_URL}/matches/${actualId}/head2head?limit=5`, { headers: { "X-Auth-Token": FOOTBALL_DATA_API_KEY, }, next: { revalidate: 3600 }, } ) if (!response.ok) { console.error(`Head-to-head API error: ${response.status}`) return null } const data = await response.json() return data.matches || null } catch (error) { console.error("Error fetching head-to-head:", error) return null } } export async function GET( request: Request, context: { params: Promise<{ id: string }> } ) { try { const { id } = await context.params // Fetch basic match details const matchDetails = await fetchMatchDetails(id) if (!matchDetails) { return NextResponse.json( { error: "Match not found" }, { status: 404 } ) } // Find competition code for standings const competition = TOP_COMPETITIONS.find( (c) => c.name === matchDetails.competition || c.nameAr === matchDetails.competitionAr ) // Fetch additional data in parallel const [standings, headToHead] = await Promise.all([ competition?.apiCode ? fetchStandings(competition.apiCode) : null, fetchHeadToHead(id), ]) // Process standings data let processedStandings = null if (standings) { processedStandings = standings.map((entry: any) => ({ position: entry.position, team: { name: entry.team?.name || "Unknown", nameAr: entry.team?.name || "غير معروف", logo: entry.team?.crest || "", shortName: entry.team?.tla || "", }, playedGames: entry.playedGames || 0, won: entry.won || 0, draw: entry.draw || 0, lost: entry.lost || 0, goalsFor: entry.goalsFor || 0, goalsAgainst: entry.goalsAgainst || 0, goalDifference: entry.goalDifference || 0, points: entry.points || 0, form: entry.form?.split(",") || [], })) } // Process head-to-head data let processedH2H = null if (headToHead) { processedH2H = headToHead.map((match: any) => ({ id: `h2h-${match.id}`, date: new Date(match.utcDate).toLocaleDateString("ar-EG", { year: "numeric", month: "short", day: "numeric", }), competition: match.competition?.name || "", competitionAr: match.competition?.name || "", homeTeam: { name: match.homeTeam?.name || "Unknown", nameAr: match.homeTeam?.name || "غير معروف", logo: match.homeTeam?.crest || "", }, awayTeam: { name: match.awayTeam?.name || "Unknown", nameAr: match.awayTeam?.name || "غير معروف", logo: match.awayTeam?.crest || "", }, score: { home: match.score?.fullTime?.home ?? 0, away: match.score?.fullTime?.away ?? 0, }, })) } return NextResponse.json({ match: matchDetails, standings: processedStandings, headToHead: processedH2H, }) } catch (error) { console.error("API Error:", error) return NextResponse.json( { error: "Failed to fetch match details" }, { status: 500 } ) } } [V0_FILE]typescriptreact:file="app/admin/loading.tsx" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/admin/page.tsx" isMerged="true" "use client" import React from "react" import { Suspense } from "react" import { useSearchParams, useRouter } from "next/navigation" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { useMatchStore } from "@/lib/match-store" import { TOP_COMPETITIONS, type AIMatch } from "@/lib/ai-service" import { Loader2, Calendar, RefreshCw, Trophy, Clock, Users, Tv, ArrowLeft, Search, Filter, Download, Trash2, ChevronDown, CheckCircle, AlertCircle, Zap, Globe, Settings, BarChart3, Database, Eye, } from "lucide-react" import { toast } from "sonner" import { cn } from "@/lib/utils" import LoadingComponent from "./loading" function AdminDashboard() { const searchParams = useSearchParams() const router = useRouter() const [isLoggedIn, setIsLoggedIn] = useState(false) const [username, setUsername] = useState("") const [password, setPassword] = useState("") const [loading, setLoading] = useState(null) const [selectedDate, setSelectedDate] = useState(new Date().toISOString().split("T")[0]) const [activeTab, setActiveTab] = useState<"fetch" | "view" | "settings">("fetch") const [searchQuery, setSearchQuery] = useState("") const [selectedCompetitionFilter, setSelectedCompetitionFilter] = useState("all") const [recentActivity, setRecentActivity] = useState>([]) const addMatches = useMatchStore((state) => state.addMatches) const matches = useMatchStore((state) => state.matches) const clearMatches = useMatchStore((state) => state.clearMatches) const setFetchedMatches = useMatchStore((state) => state.setMatches) // Declared here // Use matches from store directly instead of local state const fetchedMatches = matches const addActivity = (type: "success" | "error" | "info", message: string) => { setRecentActivity((prev) => [ { id: Date.now().toString(), type, message, timestamp: new Date() }, ...prev.slice(0, 9), ]) } const handleLogin = (e: React.FormEvent) => { e.preventDefault() if (username === "admin" && password === "admin123") { setIsLoggedIn(true) addActivity("success", "تم تسجيل الدخول بنجاح") } else { toast.error("بيانات الدخول غير صحيحة") } } const handleFetch = async (competitionId: string) => { setLoading(competitionId) const competition = TOP_COMPETITIONS.find((c) => c.id === competitionId) try { const res = await fetch("/api/ai/fetch-matches", { method: "POST", body: JSON.stringify({ league: competitionId, date: selectedDate }), headers: { "Content-Type": "application/json" }, }) const data = await res.json() if (Array.isArray(data) && data.length > 0) { addMatches(data) // Save to persistent store addActivity("success", `تم جلب ${data.length} مباراة من ${competition?.nameAr}`) toast.success(`تم جلب ${data.length} مباريات من ${competition?.nameAr}`) } else { addActivity("info", `لا توجد مباريات في ${competition?.nameAr} لهذا التاريخ`) toast.info("لم يتم العثور على مباريات لهذا اليوم") } } catch (error) { addActivity("error", `فشل جلب بيانات ${competition?.nameAr}`) toast.error("فشل جلب البيانات") } finally { setLoading(null) } } const handleFetchAll = async () => { setLoading("all") let totalMatches = 0 for (const competition of TOP_COMPETITIONS) { try { const res = await fetch("/api/ai/fetch-matches", { method: "POST", body: JSON.stringify({ league: competition.id, date: selectedDate }), headers: { "Content-Type": "application/json" }, }) const data = await res.json() if (Array.isArray(data) && data.length > 0) { addMatches(data) // Save to persistent store totalMatches += data.length } } catch (error) { console.error(`Error fetching ${competition.id}:`, error) } } addActivity("success", `تم جلب ${totalMatches} مباراة من جميع البطولات`) toast.success(`تم جلب ${totalMatches} مباراة بنجاح`) setLoading(null) } const filteredMatches = fetchedMatches.filter((match) => { const matchesSearch = searchQuery === "" || match.homeTeam.name.toLowerCase().includes(searchQuery.toLowerCase()) || match.homeTeam.nameAr.includes(searchQuery) || match.awayTeam.name.toLowerCase().includes(searchQuery.toLowerCase()) || match.awayTeam.nameAr.includes(searchQuery) const matchesCompetition = selectedCompetitionFilter === "all" || match.competition.toLowerCase().includes(selectedCompetitionFilter.toLowerCase()) return matchesSearch && matchesCompetition }) const stats = { total: fetchedMatches.length, competitions: new Set(fetchedMatches.map((m) => m.competition)).size, live: fetchedMatches.filter((m) => m.status === "live").length, upcoming: fetchedMatches.filter((m) => m.status === "upcoming").length, } if (!isLoggedIn) { return (

لوحة الإدارة

PremierFlow Admin Panel

) } return (

{/* Background */}

{/* Header */}

لوحة التحكم

إدارة المباريات والبيانات

setSelectedDate(e.target.value)} className="bg-transparent border-none outline-none text-sm" />

{/* Main Content */}

{/* Stats Cards */}

{[ { label: "إجمالي المباريات", value: stats.total, icon: Trophy, color: "text-amber-500" }, { label: "البطولات", value: stats.competitions, icon: Globe, color: "text-blue-500" }, { label: "مباريات مباشرة", value: stats.live, icon: Tv, color: "text-red-500" }, { label: "مباريات قادمة", value: stats.upcoming, icon: Clock, color: "text-green-500" }, ].map((stat, i) => (

{stat.value}

{stat.label}

))}

{/* Tabs */}

{[ { id: "fetch", label: "جلب البيانات", icon: Download }, { id: "view", label: "عرض المباريات", icon: BarChart3 }, { id: "settings", label: "الإعدادات", icon: Settings }, ].map((tab) => ( ))}

{/* Tab Content */} {activeTab === "fetch" && (

{/* Competitions List */}

البطولات المتاحة

اختر بطولة لجلب مباريات {selectedDate}

{TOP_COMPETITIONS.map((competition) => (

{ ;(e.target as HTMLImageElement).src = "/generic-football-league-badge.png" }} />

{competition.nameAr}

{competition.country}

))}

{/* Activity Log */}

سجل النشاط {recentActivity.length === 0 ? (

لا يوجد نشاط حتى الآن

) : (

{recentActivity.map((activity) => (

{activity.type === "success" && ( )} {activity.type === "error" && ( )} {activity.type === "info" && ( )}

{activity.message}

{activity.timestamp.toLocaleTimeString("ar-EG")}

))}

)}

)} {activeTab === "view" && (

{/* Header */} المباريات المسجلة ({filteredMatches.length})

setSearchQuery(e.target.value)} className="glass pr-9 w-48" />

{filteredMatches.length === 0 ? (

لا توجد مباريات مسجلة

اذهب لتبويب "جلب البيانات" لإضافة مباريات

) : ( // Group matches by competition Object.entries( filteredMatches.reduce((acc, match) => { const key = match.competitionAr || match.competition if (!acc[key]) acc[key] = [] acc[key].push(match) return acc }, {} as Record) ).map(([competitionName, competitionMatches]) => { const competitionInfo = TOP_COMPETITIONS.find( c => c.nameAr === competitionName || c.name === competitionName ) return ( {/* Competition Header */}

{ (e.target as HTMLImageElement).src = "/generic-football-league-badge.png" }} />

{competitionName}

{competitionMatches.length} مباراة

{/* Matches List */}

{competitionMatches.map((match) => (

router.push(`/match/${match.id}`)} > {/* Match Header - Date, Matchday, Status */}

{match.matchdayAr && ( {match.matchdayAr} )} {match.date}

{match.status === "live" ? (match.elapsedTimeAr || "مباشر") : match.status === "finished" ? "انتهت" : match.time}

{/* Teams and Score Row */}

{/* Home Team */}

{match.homeTeam.nameAr || match.homeTeam.name}

{match.homeTeam.position && (

الترتيب: {match.homeTeam.position}

)}

{ (e.target as HTMLImageElement).src = "/generic-football-league-badge.png" }} />

{/* Score */}

{match.score ? `${match.score.home} - ${match.score.away}` : "VS"} {match.status === "live" && match.elapsedTime && (

{match.elapsedTime}'

)}

{/* Away Team */}

{ (e.target as HTMLImageElement).src = "/generic-football-league-badge.png" }} />

{match.awayTeam.nameAr || match.awayTeam.name}

{match.awayTeam.position && (

الترتيب: {match.awayTeam.position}

)}

{/* View Details Button */}

))}

) }) )}

)} {/* Settings Tab */} {activeTab === "settings" && ( إعدادات النظام

نظام الذكاء الاصطناعي

يستخدم النظام Vercel AI Gateway مع نموذج GPT-4-mini المجاني لجلب بيانات المباريات.

النظام يعمل بشكل طبيعي

البطولات المدعومة

{TOP_COMPETITIONS.map((comp) => (

{comp.nameAr}

))}

معلومات الإصدار

الإصدار: 2.0.0

آخر تحديث: {new Date().toLocaleDateString("ar-EG")}

النظام: PremierFlow AI Platform

)}

) } export default function AdminDashboardPage() { return ( }> ) } [V0_FILE]typescriptreact:file="app/match/[id]/page.tsx" isMerged="true" "use client" import React, { useState, useEffect } from "react" import { useParams, useRouter } from "next/navigation" import { useMatchStore } from "@/lib/match-store" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { ArrowLeft, Calendar, Clock, MapPin, Tv, User, Users, Trophy, Target, AlertTriangle, ArrowRightLeft, Loader2, RefreshCw, BarChart3, Swords, LayoutGrid, } from "lucide-react" import { cn } from "@/lib/utils" import type { AIMatch, FormResult } from "@/lib/ai-service" import { FootballPitch, BenchPlayers } from "@/components/football-pitch" import { StandingsTable, type StandingsEntry } from "@/components/standings-table" import { HeadToHead, type HeadToHeadMatch } from "@/components/head-to-head" // Form result badge component function FormBadge({ result }: { result: FormResult }) { return ( {result === "W" ? "ف" : result === "D" ? "ت" : "خ"} ) } // Section component function Section({ title, icon: Icon, children, action, }: { title: string icon: React.ElementType children: React.ReactNode action?: React.ReactNode }) { return ( {title} {action} {children} ) } // Goals Table Component function GoalsTable({ goals, homeTeam, awayTeam }: { goals: AIMatch["goals"] homeTeam: AIMatch["homeTeam"] awayTeam: AIMatch["awayTeam"] }) { if (!goals || goals.length === 0) return null return (

{goals.map((goal, i) => ( ))}

د	الفريق	الهداف	صانع اللعب	النتيجة
{goal.minute}'	{ (e.target as HTMLImageElement).src = "/placeholder.svg" }} /> {goal.team === "home" ? homeTeam.nameAr : awayTeam.nameAr}	{goal.scorerAr \|\| goal.scorer}	{goal.assistAr \|\| goal.assist \|\| "-"}	{goal.scoreAfter.home} - {goal.scoreAfter.away}

) } export default function MatchDetailsPage() { const params = useParams() const router = useRouter() const matchId = params.id as string const matches = useMatchStore((state) => state.matches) const updateMatch = useMatchStore((state) => state.updateMatch) const addMatches = useMatchStore((state) => state.addMatches) const storeMatch = matches.find((m) => m.id === matchId) const [match, setMatch] = useState(storeMatch || null) const [loading, setLoading] = useState(true) const [error, setError] = useState(false) const [standings, setStandings] = useState(null) const [headToHead, setHeadToHead] = useState(null) const [activeTab, setActiveTab] = useState("overview") // Fetch match data from API const fetchMatchData = async () => { if (!matchId) return setLoading(true) setError(false) try { const response = await fetch(`/api/match/${matchId}`) if (response.ok) { const data = await response.json() // Update match with detailed data if (data.match) { setMatch(data.match) // Also update the store if (storeMatch) { updateMatch(matchId, data.match) } else { addMatches([data.match]) } } else if (!storeMatch) { setError(true) } // Set standings and h2h if (data.standings) { setStandings(data.standings) } if (data.headToHead) { setHeadToHead(data.headToHead) } } else if (!storeMatch) { setError(true) } } catch (err) { console.error("Error fetching match data:", err) if (!storeMatch) { setError(true) } } finally { setLoading(false) } } useEffect(() => { // If we have match in store, use it initially if (storeMatch) { setMatch(storeMatch) } fetchMatchData() }, [matchId]) // Update local state when store changes useEffect(() => { if (storeMatch) { setMatch(storeMatch) } }, [storeMatch]) // Loading state if (loading && !match) { return (

جاري تحميل بيانات المباراة

يرجى الانتظار...

) } // Error state if (error || !match) { return (

المباراة غير موجودة

لم يتم العثور على بيانات هذه المباراة

) } return (

{/* Background */}

{/* Header */}

تفاصيل المباراة

{match.competitionAr}

{match.matchdayAr && ( {match.matchdayAr} )}

{/* Match Header Card */} {/* Competition Banner */}

{ (e.target as HTMLImageElement).src = "/placeholder.svg" }} /> {match.competitionAr}

{match.date} | {match.time}

{/* Teams and Score */}

{/* Home Team */}

{ (e.target as HTMLImageElement).src = "/placeholder.svg" }} />

{match.homeTeam.nameAr || match.homeTeam.name}

{match.homeTeam.position && (

الترتيب: {match.homeTeam.position}

)} {match.homeTeam.form && (

{match.homeTeam.form.map((result, i) => ( ))}

)}

{/* Score */}

{match.score ? ( `${match.score.home} - ${match.score.away}` ) : ( VS )}

{match.halfTimeScore && (

الشوط الأول: ({match.halfTimeScore.home} - {match.halfTimeScore.away})

)}

{match.status === "live" ? match.elapsedTimeAr || "مباشر" : match.status === "finished" ? "انتهت" : "لم تبدأ"}

{/* Away Team */}

{ (e.target as HTMLImageElement).src = "/placeholder.svg" }} />

{match.awayTeam.nameAr || match.awayTeam.name}

{match.awayTeam.position && (

الترتيب: {match.awayTeam.position}

)} {match.awayTeam.form && (

{match.awayTeam.form.map((result, i) => ( ))}

)}

{/* Match Info Grid */}

{[ { label: "الملعب", value: match.venueAr || match.venue || "غير محدد", icon: MapPin, }, { label: "القناة", value: match.channelAr || match.channel || "غير محدد", icon: Tv, }, { label: "المعلق", value: match.commentatorAr || match.commentator || "غير محدد", icon: User, }, { label: "الحكم", value: match.refereeAr || match.referee || "غير محدد", icon: Users, }, ].map((item, i) => (

{item.label}

{item.value}

))}

{/* Tabs Navigation */} نظرة عامة التشكيلة الترتيب المواجهات {/* Overview Tab */} {/* Goals Section */} {match.goals && match.goals.length > 0 && (

)} {/* Cards Section */} {match.cards && match.cards.length > 0 && (

{match.cards.map((card, i) => (

{card.playerAr || card.player}

{card.team === "home" ? match.homeTeam.nameAr : match.awayTeam.nameAr}

{card.minute}'

))}

)} {/* Substitutions Section */} {match.substitutions && match.substitutions.length > 0 && (

{match.substitutions.map((sub, i) => (

داخل خارج

{sub.playerInAr || sub.playerIn}

{sub.playerOutAr || sub.playerOut}

{sub.minute}'

{sub.team === "home" ? match.homeTeam.nameAr : match.awayTeam.nameAr}

))}

)} {/* Empty state */} {!match.goals?.length && !match.cards?.length && !match.substitutions?.length && (

لا توجد أحداث بعد

سيتم عرض الأهداف والبطاقات والتبديلات عند بدء المباراة

)} {/* Lineups Tab */} {(match.homeLineup && match.homeLineup.length > 0) || (match.awayLineup && match.awayLineup.length > 0) ? ( <> {/* Pitch Lineups */}

{/* Home Team Pitch */} {match.homeLineup && match.homeLineup.length > 0 && ( )} {/* Away Team Pitch */} {match.awayLineup && match.awayLineup.length > 0 && ( )}

{/* Bench */} {((match.homeBench && match.homeBench.length > 0) || (match.awayBench && match.awayBench.length > 0)) && (

{match.homeBench && match.homeBench.length > 0 && ( )} {match.awayBench && match.awayBench.length > 0 && ( )}

)} ) : (

التشكيلات غير متوفرة

سيتم إضافة التشكيلات قبل بدء المباراة

)} {/* Standings Tab */}

{standings && standings.length > 0 ? ( ) : (

جاري تحميل الترتيب...

{loading && }

)}

{/* Head to Head Tab */}

{headToHead && headToHead.length > 0 ? ( ) : (

جاري تحميل المواجهات...

{loading && }

)}

) } [V0_FILE]css:file="app/globals.css" isMerged="true" @import "tailwindcss"; @custom-variant dark (&:is(.dark *)); /* Revolutionary AI-inspired theme with mesh gradients */ :root { --background: oklch(0.05 0.01 270); --foreground: oklch(0.98 0 0); --card: oklch(0.12 0.015 270 / 0.6); --card-foreground: oklch(0.98 0 0); --popover: oklch(0.08 0.01 270); --popover-foreground: oklch(0.98 0 0); --primary: oklch(0.75 0.18 160); --primary-foreground: oklch(0.05 0 0); --secondary: oklch(0.15 0.02 270); --secondary-foreground: oklch(0.9 0 0); --muted: oklch(0.2 0.015 270); --muted-foreground: oklch(0.65 0 0); --accent: oklch(0.7 0.2 200); --accent-foreground: oklch(0.05 0 0); --destructive: oklch(0.6 0.25 25); --destructive-foreground: oklch(0.98 0 0); --border: oklch(0.3 0.03 270 / 0.3); --input: oklch(0.15 0.015 270); --ring: oklch(0.75 0.18 160); --chart-1: oklch(0.75 0.18 160); --chart-2: oklch(0.7 0.2 200); --chart-3: oklch(0.65 0.22 280); --chart-4: oklch(0.8 0.15 60); --chart-5: oklch(0.6 0.2 330); --radius: 1.5rem; --sidebar: oklch(0.08 0.01 270); --sidebar-foreground: oklch(0.98 0 0); --sidebar-primary: oklch(0.75 0.18 160); --sidebar-primary-foreground: oklch(0.05 0 0); --sidebar-accent: oklch(0.15 0.02 270); --sidebar-accent-foreground: oklch(0.98 0 0); --sidebar-border: oklch(0.25 0.02 270); --sidebar-ring: oklch(0.75 0.18 160); /* Glow colors */ --glow-primary: oklch(0.75 0.18 160 / 0.5); --glow-accent: oklch(0.7 0.2 200 / 0.4); --glow-live: oklch(0.65 0.3 25 / 0.6); } /* Light mode theme for when dark mode is disabled */ .light, :root:not(.dark) { --background: oklch(0.98 0.005 270); --foreground: oklch(0.15 0.01 270); --card: oklch(1 0 0 / 0.8); --card-foreground: oklch(0.15 0.01 270); --popover: oklch(0.98 0.005 270); --popover-foreground: oklch(0.15 0.01 270); --primary: oklch(0.55 0.2 160); --primary-foreground: oklch(0.98 0 0); --secondary: oklch(0.92 0.01 270); --secondary-foreground: oklch(0.2 0.01 270); --muted: oklch(0.92 0.01 270); --muted-foreground: oklch(0.45 0.01 270); --accent: oklch(0.55 0.18 200); --accent-foreground: oklch(0.98 0 0); --destructive: oklch(0.55 0.25 25); --destructive-foreground: oklch(0.98 0 0); --border: oklch(0.85 0.01 270); --input: oklch(0.92 0.01 270); --ring: oklch(0.55 0.2 160); --glow-primary: oklch(0.55 0.2 160 / 0.3); --glow-accent: oklch(0.55 0.18 200 / 0.25); --glow-live: oklch(0.55 0.3 25 / 0.4); } /* Dark mode (default) */ .dark { --background: oklch(0.05 0.01 270); --foreground: oklch(0.98 0 0); --card: oklch(0.12 0.015 270 / 0.6); --card-foreground: oklch(0.98 0 0); --popover: oklch(0.08 0.01 270); --popover-foreground: oklch(0.98 0 0); --primary: oklch(0.75 0.18 160); --primary-foreground: oklch(0.05 0 0); --secondary: oklch(0.15 0.02 270); --secondary-foreground: oklch(0.9 0 0); --muted: oklch(0.2 0.015 270); --muted-foreground: oklch(0.65 0 0); --accent: oklch(0.7 0.2 200); --accent-foreground: oklch(0.05 0 0); --destructive: oklch(0.6 0.25 25); --destructive-foreground: oklch(0.98 0 0); --border: oklch(0.3 0.03 270 / 0.3); --input: oklch(0.15 0.015 270); --ring: oklch(0.75 0.18 160); --glow-primary: oklch(0.75 0.18 160 / 0.5); --glow-accent: oklch(0.7 0.2 200 / 0.4); --glow-live: oklch(0.65 0.3 25 / 0.6); } @theme inline { /* استخدام Tajawal للخط العربي */ --font-sans: "Outfit", "Tajawal", "Outfit Fallback", sans-serif; --font-heading: "Space Grotesk", "Tajawal", "Space Grotesk Fallback", sans-serif; --font-arabic: "Tajawal", "Tajawal Fallback", sans-serif; --font-mono: monospace; --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) - 8px); --radius-md: calc(var(--radius) - 4px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 8px); --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); --color-glow-primary: var(--glow-primary); --color-glow-accent: var(--glow-accent); --color-glow-live: var(--glow-live); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground overflow-x-hidden; } /* Apply heading font to all headings */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); } } /* تحسين تطبيق خط Tajawal للعربية */ [dir="rtl"], [dir="rtl"] * { font-family: var(--font-arabic); } [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6 { font-family: var(--font-arabic); } /* Mesh gradient background */ @keyframes mesh-move { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 25% { transform: translate(10%, 10%) rotate(90deg); } 50% { transform: translate(-5%, 20%) rotate(180deg); } 75% { transform: translate(-15%, 5%) rotate(270deg); } } @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-20px); } } @keyframes pulse-ring { 0% { transform: scale(0.95); opacity: 0.8; } 50% { transform: scale(1.05); opacity: 0.4; } 100% { transform: scale(0.95); opacity: 0.8; } } @keyframes live-pulse { 0%, 100% { box-shadow: 0 0 20px var(--glow-live), 0 0 40px var(--glow-live); } 50% { box-shadow: 0 0 40px var(--glow-live), 0 0 80px var(--glow-live); } } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } @keyframes glow-pulse { 0%, 100% { filter: brightness(1) drop-shadow(0 0 10px var(--glow-primary)); } 50% { filter: brightness(1.2) drop-shadow(0 0 30px var(--glow-primary)); } } .animate-mesh { animation: mesh-move 20s ease-in-out infinite; } .animate-float { animation: float 6s ease-in-out infinite; } .animate-pulse-ring { animation: pulse-ring 3s ease-in-out infinite; } .animate-live-pulse { animation: live-pulse 2s ease-in-out infinite; } .animate-glow-pulse { animation: glow-pulse 3s ease-in-out infinite; } .shimmer-text { background: linear-gradient(90deg, var(--foreground) 0%, var(--primary) 50%, var(--foreground) 100%); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: shimmer 3s linear infinite; } .glass { background: oklch(0.15 0.02 270 / 0.4); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid oklch(1 0 0 / 0.1); } .glass-strong { background: oklch(0.1 0.015 270 / 0.7); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); border: 1px solid oklch(1 0 0 / 0.15); } /* Light mode glass styles */ :root:not(.dark) .glass { background: oklch(1 0 0 / 0.6); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid oklch(0 0 0 / 0.08); } :root:not(.dark) .glass-strong { background: oklch(1 0 0 / 0.85); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); border: 1px solid oklch(0 0 0 / 0.1); } /* Add toast progress bar animation */ @keyframes shrink-width { from { width: 100%; } to { width: 0%; } } .animate-shrink-width { animation: shrink-width linear forwards; } /* Custom scrollbar hide for tabs */ .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; } .scrollbar-hide::-webkit-scrollbar { display: none; } /* Smooth scroll for horizontal tabs */ .scroll-smooth { scroll-behavior: smooth; } /* Add notification overlay animations */ @keyframes goal-celebration { 0%, 100% { transform: scale(1); } 10% { transform: scale(1.05); } 20% { transform: scale(1); } 30% { transform: scale(1.03); } 40% { transform: scale(1); } } @keyframes bounce-subtle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } @keyframes celebration { 0% { transform: scale(1) rotate(0deg); } 25% { transform: scale(1.02) rotate(-1deg); } 50% { transform: scale(1) rotate(1deg); } 75% { transform: scale(1.02) rotate(-1deg); } 100% { transform: scale(1) rotate(0deg); } } @keyframes slide-in-right { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes slide-out-right { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100%); opacity: 0; } } @keyframes breaking-news-bar { 0% { transform: scaleX(0); transform-origin: left; } 100% { transform: scaleX(1); transform-origin: left; } } @keyframes glow-intense { 0%, 100% { box-shadow: 0 0 20px var(--glow-color, rgba(255, 255, 255, 0.3)); } 50% { box-shadow: 0 0 40px var(--glow-color, rgba(255, 255, 255, 0.5)), 0 0 60px var(--glow-color, rgba(255, 255, 255, 0.3)); } } .animate-goal-celebration { animation: goal-celebration 0.8s ease-in-out infinite; } .animate-bounce-subtle { animation: bounce-subtle 1s ease-in-out infinite; } .animate-celebration { animation: celebration 0.5s ease-in-out infinite; } .animate-slide-in-right { animation: slide-in-right 0.5s ease-out forwards; } .animate-slide-out-right { animation: slide-out-right 0.5s ease-in forwards; } .animate-breaking-news { animation: breaking-news-bar 0.5s ease-out forwards; } .animate-glow-intense { animation: glow-intense 1.5s ease-in-out infinite; } /* Notification shimmer effect */ @keyframes notification-shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } .notification-shimmer::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent); animation: notification-shimmer 2s infinite; } [V0_FILE]typescriptreact:file="components/ui/input-group.tsx" isMerged="true" 'use client' import { cva, type VariantProps } from 'class-variance-authority' import { cn } from '@/lib/utils' import { Button } from '@/components/ui/button' import { Input } from '@/components/ui/input' import { Textarea } from '@/components/ui/textarea' function InputGroup({ className, ...props }: React.ComponentProps<'div'>) { return (

textarea]:h-auto', // Variants based on alignment. 'has-[>[data-align=inline-start]]:[&>input]:pl-2', 'has-[>[data-align=inline-end]]:[&>input]:pr-2', 'has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3', 'has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3', // Focus state. 'has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]', // Error state. 'has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40', className, )} {...props} /> ) } const inputGroupAddonVariants = cva( "text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4 [&>kbd]:rounded-[calc(var(--radius)-5px)] group-data-[disabled=true]/input-group:opacity-50", { variants: { align: { 'inline-start': 'order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]', 'inline-end': 'order-last pr-3 has-[>button]:mr-[-0.4rem] has-[>kbd]:mr-[-0.35rem]', 'block-start': 'order-first w-full justify-start px-3 pt-3 [.border-b]:pb-3 group-has-[>input]/input-group:pt-2.5', 'block-end': 'order-last w-full justify-start px-3 pb-3 [.border-t]:pt-3 group-has-[>input]/input-group:pb-2.5', }, }, defaultVariants: { align: 'inline-start', }, }, ) function InputGroupAddon({ className, align = 'inline-start', ...props }: React.ComponentProps<'div'> & VariantProps) { return (

{ if ((e.target as HTMLElement).closest('button')) { return } e.currentTarget.parentElement?.querySelector('input')?.focus() }} {...props} /> ) } const inputGroupButtonVariants = cva( 'text-sm shadow-none flex gap-2 items-center', { variants: { size: { xs: "h-6 gap-1 px-2 rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2", sm: 'h-8 px-2.5 gap-1.5 rounded-md has-[>svg]:px-2.5', 'icon-xs': 'size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0', 'icon-sm': 'size-8 p-0 has-[>svg]:p-0', }, }, defaultVariants: { size: 'xs', }, }, ) function InputGroupButton({ className, type = 'button', variant = 'ghost', size = 'xs', ...props }: Omit, 'size'> & VariantProps) { return (