fix: FINNALY FIXED AND COMPILABLE

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 
-                        eventId={event_id} 
+                    <EventResultsClient 
+                        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>