fix: FINNALY FIXED AND COMPILABLE

app/dashboard/page.tsx

@@ -4,7 +4,7 @@
 import { query } from '@/lib/db';
 import { LiveDotIcon } from '@/components/ui/icons';
 import DashboardClient from '@/components/dashboard/DashboardClient';
-import { Driver, DriverServerRow } from '@/types/racing';
+import { DashboardDriver } from '@/components/dashboard/DashboardClient';
 export const dynamic = "force-dynamic";
 
 async function getConnectedDrivers() {
@@ -37,7 +37,7 @@ async function getConnectedDrivers() {
 
   const rows = await query(sql);
     
-    const drivers: Driver[] = rows.map((row: DriverServerRow) => ({
+    const drivers: DashboardDriver[] = rows.map((row: any) => ({
         driver_guid: row.driver_guid,
         driver_name: row.driver_name,
         driver_team: row.driver_team,

app/events/[event_id]/page.tsx

@@ -2,15 +2,15 @@
 // Event detail page with registration form
 
 import { query } from '@/lib/db';
-import { Event, EventRegistration } from '@/types/racing';
+import { EventWithRegistrations, EventRegistrationWithDriver } from '@/types/racing';
 import { notFound } from 'next/navigation';
 import { TrophyIcon, MapPinIcon, UsersIcon, ClockIcon, CalendarIcon } from '@/components/ui/icons';
 import EventRegistrationForm from '@/components/events/EventRegistrationForm';
-import EventResultClient from '@/components/events/EventResultsClient';
+import EventResultsClient, { TeamStanding } from '@/components/events/EventResultsClient';
 
 export const dynamic = "force-dynamic";
 
-async function getEventResults(eventId: number) {
+async function getEventResults(eventId: number): Promise<{ event: Event | null; standings: TeamStanding[] }> {
 
   if (eventId == undefined) {
     return { event: null, standings: [] };
@@ -27,7 +27,7 @@ async function getEventResults(eventId: number) {
     WHERE event_id = $1
   `;
   const events = await query(eventSql, [String(eventId)]);
-  const event = events[0];
+  const event = (events[0] as Event) ?? null;
 
   // Get team standings with driver details
   const standingsSql = `
@@ -58,11 +58,11 @@ async function getEventResults(eventId: number) {
   
   const standings = await query(standingsSql, [eventId]);
 
-  return { event, standings };
+  return { event, standings: standings as TeamStanding[] };
 }
 
 
-async function getEvent(eventId: number): Promise<Event | null> {
+async function getEvent(eventId: number): Promise<EventWithRegistrations | null> {
     const sql = `
     SELECT e.*, COUNT(er.registration_id) as registrations_count
     FROM events e
@@ -72,10 +72,10 @@ async function getEvent(eventId: number): Promise<Event | null> {
   `;
   
   const rows = await query(sql, [eventId]);
-  return rows.length > 0 ? rows[0] as Event : null;
+  return rows.length > 0 ? rows[0] as EventWithRegistrations : null;
 }
 
-async function getEventRegistrations(eventId: number): Promise<EventRegistration[]> {
+async function getEventRegistrations(eventId: number): Promise<EventRegistrationWithDriver[]> {
   const sql = `
     SELECT 
       er.*,
@@ -87,7 +87,7 @@ async function getEventRegistrations(eventId: number): Promise<EventRegistration
   `;
   
   const rows = await query(sql, [eventId]);
-  return rows as EventRegistration[];
+  return rows as EventRegistrationWithDriver[];
 }
 
 function formatDate(date: Date): string {
@@ -104,19 +104,20 @@ function formatDate(date: Date): string {
 export default async function EventDetailPage({
   params,
 }: {
-  params: Promise<{ event_id: number }>;
+  params: Promise<{ event_id: string }>;
 }) {
   const { event_id } = await params;
-  const event: unknown = await getEvent(event_id);
+  const eventId = parseInt(event_id, 10);
+  const event = await getEvent(eventId);
   if (!event) {
     notFound();
   }
 
-  const registrations = await getEventRegistrations(event_id);
+  const registrations = await getEventRegistrations(eventId);
   
   // Fetch initial event results/standings 
 
-  const { standings } = await getEventResults(event_id);
+  const { standings } = await getEventResults(eventId);
 
 
   const isOpen = event.event_status === 'OPEN';
@@ -176,8 +177,8 @@ export default async function EventDetailPage({
                   {event.event_status === 'CLOSED' && !isFull && !deadlinePassed && 'Registration is closed for this event.'}
                 </p>
                 <div className="mt-6">
-                    <EventResultClient 
+                    <EventResultsClient 
-                        eventId={event_id} 
+                        eventId={eventId} 
                         initialStandings={standings}
                     />
                 </div>
@@ -205,11 +206,11 @@ export default async function EventDetailPage({
                 {registrations.length === 0 ? (
                   <p className="text-white/40 text-sm">No registrations yet</p>
                 ) : (
-                  registrations.map((reg: unknown, index: number) => (
+                  registrations.map((reg, index) => (
                     <div key={reg.registration_id} className="border border-white/10 p-3">
                       <div className="flex items-start justify-between mb-2">
                         <div className="flex items-center space-x-2">
-                          <span className="text-xs font-bold text-white/40">
+                          <span className="text-xs font-bold text-white/41">
                             #{String(index + 1).padStart(2, '0')}
                           </span>
                           <span className="font-semibold text-sm">{reg.driver_name}</span>

app/events/[event_id]/results/page.tsx

@@ -4,10 +4,11 @@
 import { query } from '@/lib/db';
 import Link from 'next/link';
 import EventResultsClient from '@/components/events/EventResultsClient';
+import { Event } from '@/types/racing';
 
 export const dynamic = "force-dynamic";
 
-async function getEventResults(eventId: number) {
+async function getEventResults(eventId: string) {
 
   if (eventId == undefined) {
     return { event: null, standings: [] };
@@ -23,8 +24,8 @@ async function getEventResults(eventId: number) {
     FROM events
     WHERE event_id = $1
   `;
-  const events = await query(eventSql, [String(eventId)]);
+  const events = await query(eventSql, [eventId]);
-  const event = events[0];
+  const event = (events[0] as Event) ?? null;
 
   // Get team standings with driver details
   const standingsSql = `
@@ -55,20 +56,20 @@ async function getEventResults(eventId: number) {
   
   const standings = await query(standingsSql, [eventId]);
 
-  return { event, standings };
+  return { event, standings: standings as any[] };
 }
   
 export default async function EventResultsPage({
   params,
 }: {
-  params: Promise<{ event_id: number }>;
+  params: Promise<{ event_id: string }>;
 }) {
 
   const { event_id } = await params;
+  const eventId = parseInt(event_id, 10);
 
   console.log('Fetching results for event ID:', event_id);
   const { event, standings } = await getEventResults(event_id);
-
   if (!event) {
     return (
       <div className="max-w-7xl mx-auto px-6 py-16">
@@ -110,7 +111,7 @@ export default async function EventResultsPage({
       {/* Team Championship Standings */}
       <div className="max-w-7xl mx-auto px-6 py-12">
         <EventResultsClient 
-          eventId={event_id} 
+          eventId={eventId} 
           initialStandings={standings}
         />
 

app/events/page.tsx

@@ -2,13 +2,13 @@
 // Events listing page
 
 import { query } from '@/lib/db';
-import { Event } from '@/types/racing';
+import { EventWithRegistrations } from '@/types/racing';
 import Link from 'next/link';
 import Image from "next/image";
 import { TrophyIcon, UsersIcon, MapPinIcon, ClockIcon, CalendarIcon } from '@/components/ui/icons';
 export const dynamic = "force-dynamic";
 
-async function getEvents(): Promise<Event[]> {
+async function getEvents(): Promise<EventWithRegistrations[]> {
   const sql = `
     SELECT 
       e.*,
@@ -21,7 +21,7 @@ async function getEvents(): Promise<Event[]> {
   `;
 
   const rows = await query(sql);
-  return rows as Event[];
+  return rows as EventWithRegistrations[];
 }
 
 function formatDate(date: Date): string {
@@ -67,7 +67,7 @@ export default async function EventsPage() {
             <p className="text-white/20 text-sm mt-2">Check back soon for new racing events</p>
           </div>
         ) : (
-          events.map((event: unknown) => {
+          events.map((event) => {
             const isOpen = event.event_status === 'OPEN';
             const isFull = event.registrations_count >= event.max_participants;
             const deadlinePassed = event.registration_deadline && new Date(event.registration_deadline) < new Date();

app/live/page.tsx

@@ -32,7 +32,7 @@ async function getLiveData(): Promise<LiveData[]> {
   
   // For each server, get connected cars with their positions
   const liveData = await Promise.all(
-    servers.map(async (server: unknown) => {
+    servers.map(async (server: any) => {
       const carsSql = `
         SELECT 
           u.driver_guid,
@@ -47,7 +47,7 @@ async function getLiveData(): Promise<LiveData[]> {
       const cars = await query(carsSql, [server.server_id]);
       
       // Add mock data for positions (real data will come from telemetry stream)
-      const carsWithPositions = cars.map((car: unknown, index: number) => ({
+      const carsWithPositions = cars.map((car: any, index: number) => ({
         ...car,
         carID: index,
         position: index + 1,

app/music/page.tsx

@@ -112,19 +112,7 @@ export default function MusicPage() {
     };
 
     useEffect(() => {
-        let active = true;
+        fetchTracks(); 
-
-        const run = async () => {
-            const data = await fetchTracks();
-            if (!active) return;
-            setTracks(data);
-        };  
-
-        void run();
-
-        return () => {
-            active = false;
-        };
     }, [isPlaying]);
 
     // Group tracks by theme
@@ -349,7 +337,7 @@ export default function MusicPage() {
                         <div className="border border-white/10 bg-black overflow-hidden">
                             {isVideo ? (
                                 <video
-                                    ref={mediaRef as unknown}
+                                    ref={mediaRef as React.RefObject<HTMLVideoElement>}
                                     onTimeUpdate={handleTimeUpdate}
                                     onEnded={nextTrack}
                                     onPlay={() => setIsPlaying(true)}
@@ -390,7 +378,7 @@ export default function MusicPage() {
 
                                     {/* Audio element (hidden) */}
                                     <audio
-                                        ref={mediaRef as unknown}
+                                        ref={mediaRef as React.RefObject<HTMLAudioElement>}
                                         onTimeUpdate={handleTimeUpdate}
                                         onEnded={nextTrack}
                                         onPlay={() => setIsPlaying(true)}

app/page.tsx

@@ -26,9 +26,9 @@ async function getStats() {
   `);
 
   return {
-    driversOnline: driversOnline[0]?.count || 0,
+      driversOnline: (driversOnline[0] as { count: number })?.count || 0,
-    totalDrivers: totalDrivers[0]?.count || 0,
+      totalDrivers: (totalDrivers[0] as { count: number })?.count || 0,
-    activeServers: activeServers[0]?.count || 0,
+      activeServers: (activeServers[0] as { count: number })?.count || 0,
   };
 }
 

app/rankings/page.tsx

@@ -44,8 +44,8 @@ async function getFilterOptions(): Promise<FilterOptions> {
   const cars = await query(carsQuery);
   
   return {
-    teams: teams.map((t: unknown) => t.driver_team),
+    teams: teams.map((t: any) => t.driver_team),
-    carModels: cars.map((c: unknown) => c.car_model)
+    carModels: cars.map((c: any) => c.car_model)
   };
 }
 
@@ -100,7 +100,7 @@ async function getRankings(
   
   // Get total count
   const countResult = await query(`SELECT COUNT(*) as count FROM users ${whereClause}`);
-  const totalCount = countResult[0]?.count || 0;
+  const totalCount = (countResult[0] as { count: number })?.count || 0;
   
   // Get paginated results
   const sql = `

components/dashboard/DashboardClient.tsx

@@ -5,7 +5,7 @@ import { useEffect, useState } from 'react';
 import { UsersIcon, ServerIcon, ActivityIcon, MapPinIcon, FlagIcon, LiveDotIcon, ClockIcon } from '@/components/ui/icons';
 import { cleanTrackName, cleanTrackConfig } from '@/lib/trackUtils';
 
-interface Driver {
+export interface DashboardDriver {
   driver_guid: string;
   driver_name: string;
   driver_team: string;
@@ -59,8 +59,8 @@ function formatElapsedTime(ms: number): string {
   return `${minutes}:${String(seconds).padStart(2, '0')}`;
 }
 
-export default function DashboardClient({ initialDrivers }: { initialDrivers: Driver[] }) {
+export default function DashboardClient({ initialDrivers }: { initialDrivers: DashboardDriver[] }) {
-  const [drivers, setDrivers] = useState<Driver[]>(initialDrivers);
+  const [drivers, setDrivers] = useState<DashboardDriver[]>(initialDrivers);
   const [isLoading, setIsLoading] = useState(false);
 
   // Auto-refresh every 3 seconds
@@ -90,7 +90,7 @@ export default function DashboardClient({ initialDrivers }: { initialDrivers: Dr
     }
     acc[serverId].push(driver);
     return acc;
-  }, {} as Record<number, Driver[]>);
+  }, {} as Record<number, DashboardDriver[]>);
 
   return (
     <>

components/events/EventRegistrationForm.tsx

@@ -67,7 +67,7 @@ export default function EventRegistrationForm({ eventId }: { eventId: number })
       setTimeout(() => {
         router.refresh();
       }, 1500);
-    } catch (err: unknown) {
+    } catch (err: any) {
       setError(err.message);
     } finally {
       setLoading(false);

components/events/EventResultsClient.tsx

@@ -4,7 +4,7 @@
 import { useEffect, useState } from 'react';
 import { TrophyIcon, UsersIcon, FlagIcon } from '@/components/ui/icons';
 
-interface TeamStanding {
+export interface TeamStanding {
   team_id: number;
   team_name: string;
   total_points: number;
@@ -111,7 +111,7 @@ export default function EventResultsClient({
           {/* Driver Results */}
           <div className="border-t border-white/10 pt-4 mt-4">
             <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
-              {team.drivers.map((driver: unknown) => (
+              {team.drivers.map((driver: any) => (
                 <div 
                   key={driver.driver_guid}
                   className="flex items-center justify-between p-3 bg-black/30 border border-white/5"

components/live/LiveSessionClient.tsx

@@ -13,7 +13,7 @@ interface LiveSessionClientProps {
   serverTrack: string;
   serverConfig: string;
   connectedPlayers: number;
-  initialCars: unknown[];
+  initialCars: any[];
 }
 
 export default function LiveSessionClient({

types/racing.ts

@@ -132,6 +132,10 @@ export interface EventRegistration {
   notes: string | null;
 }
 
+export interface EventRegistrationWithDriver extends EventRegistration {
+  driver_name: string;
+}
+
 export interface EventWithRegistrations extends Event {
   registrations_count: number;
   user_registered?: boolean;