frontend/src/app/events/[eventId]/page.tsx

@@ -0,0 +1,19 @@
+import { EventDetail } from '@/components/event-detail';
+
+interface EventPageProps {
+  params: Promise<{
+    eventId: string;
+  }>;
+}
+
+export default async function EventPage({ params }: EventPageProps) {
+  const { eventId } = await params;
+  
+  return (
+    <div className="min-h-screen bg-gray-50 py-8">
+      <div className="max-w-7xl mx-auto px-4">
+        <EventDetail eventId={eventId} />
+      </div>
+    </div>
+  );
+}

frontend/src/app/events/create/page.tsx

@@ -0,0 +1,12 @@
+import { EventForm } from '@/components/event-form';
+
+export default function CreateEventPage() {
+  return (
+    <div className="min-h-screen bg-gray-50 py-8">
+      <div className="max-w-7xl mx-auto px-4">
+        <h1 className="text-3xl font-bold mb-8">Create Event</h1>
+        <EventForm />
+      </div>
+    </div>
+  );
+}

frontend/src/app/events/page.tsx

@@ -0,0 +1,23 @@
+import { EventList } from '@/components/event-list';
+import { Suspense } from 'react';
+
+export default function EventsPage() {
+  return (
+    <div className="min-h-screen bg-gray-50 py-8">
+      <div className="max-w-7xl mx-auto px-4">
+        <div className="flex justify-between items-center mb-8">
+          <h1 className="text-3xl font-bold">Events</h1>
+          <a
+            href="/events/create"
+            className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
+          >
+            Create Event
+          </a>
+        </div>
+        <Suspense fallback={<div>Loading...</div>}>
+          <EventList />
+        </Suspense>
+      </div>
+    </div>
+  );
+}

frontend/src/app/login/page.tsx

@@ -0,0 +1,9 @@
+import { LoginForm } from '@/components/login-form';
+
+export default function LoginPage() {
+  return (
+    <div className="min-h-screen bg-gray-50 py-12">
+      <LoginForm />
+    </div>
+  );
+}

frontend/src/app/register/page.tsx

@@ -0,0 +1,9 @@
+import { RegisterForm } from '@/components/register-form';
+
+export default function RegisterPage() {
+  return (
+    <div className="min-h-screen bg-gray-50 py-12">
+      <RegisterForm />
+    </div>
+  );
+}

frontend/src/components/event-detail.tsx

@@ -0,0 +1,151 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { api, Event } from '@/lib/api';
+import { useAuth } from '@/lib/auth-context';
+
+interface EventDetailProps {
+  eventId: string;
+}
+
+export function EventDetail({ eventId }: EventDetailProps) {
+  const [event, setEvent] = useState<Event | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const { user } = useAuth();
+
+  useEffect(() => {
+    loadEvent();
+  }, [eventId]);
+
+  const loadEvent = async () => {
+    try {
+      setIsLoading(true);
+      const data = await api.getEvent(eventId);
+      setEvent(data);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to load event');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  if (isLoading) {
+    return <div className="text-center py-8">Loading...</div>;
+  }
+
+  if (error) {
+    return (
+      <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
+        {error}
+      </div>
+    );
+  }
+
+  if (!event) {
+    return <div className="text-center py-8">Event not found</div>;
+  }
+
+  const isOrganizer = user?.id === event.organizer.id;
+  const canEdit = isOrganizer || user?.role === 'Organizer';
+
+  return (
+    <div className="max-w-4xl mx-auto">
+      <div className="bg-white rounded-lg shadow-md p-6 mb-6">
+        <div className="flex justify-between items-start mb-4">
+          <div>
+            <span className={`inline-block px-2 py-1 text-xs rounded mb-2 ${
+              event.status === 'Published' ? 'bg-green-100 text-green-800' :
+              event.status === 'Draft' ? 'bg-yellow-100 text-yellow-800' :
+              'bg-red-100 text-red-800'
+            }`}>
+              {event.status}
+            </span>
+            <h1 className="text-3xl font-bold">{event.name}</h1>
+          </div>
+          {canEdit && (
+            <a
+              href={`/events/${event.id}/edit`}
+              className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
+            >
+              Edit Event
+            </a>
+          )}
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
+          <div className="space-y-3">
+            <div className="flex items-center gap-3">
+              <span className="text-2xl">📅</span>
+              <div>
+                <p className="text-sm text-gray-500">Date</p>
+                <p className="font-medium">{new Date(event.eventDate).toLocaleString()}</p>
+              </div>
+            </div>
+            <div className="flex items-center gap-3">
+              <span className="text-2xl">📍</span>
+              <div>
+                <p className="text-sm text-gray-500">Location</p>
+                <p className="font-medium">{event.location}</p>
+              </div>
+            </div>
+            <div className="flex items-center gap-3">
+              <span className="text-2xl">👥</span>
+              <div>
+                <p className="text-sm text-gray-500">Registrations</p>
+                <p className="font-medium">
+                  {event.currentRegistrations} registered
+                  {event.maxParticipants && ` / ${event.maxParticipants} max`}
+                </p>
+              </div>
+            </div>
+          </div>
+
+          <div className="space-y-3">
+            {event.category && (
+              <div className="flex items-center gap-3">
+                <span className="text-2xl">🏷️</span>
+                <div>
+                  <p className="text-sm text-gray-500">Category</p>
+                  <p className="font-medium">{event.category}</p>
+                </div>
+              </div>
+            )}
+            <div className="flex items-center gap-3">
+              <span className="text-2xl">👤</span>
+              <div>
+                <p className="text-sm text-gray-500">Organizer</p>
+                <p className="font-medium">{event.organizer.name}</p>
+              </div>
+            </div>
+            {event.tags.length > 0 && (
+              <div className="flex flex-wrap gap-2">
+                {event.tags.map((tag) => (
+                  <span key={tag} className="px-2 py-1 bg-gray-100 text-gray-700 text-sm rounded">
+                    {tag}
+                  </span>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+
+        <div className="border-t pt-6">
+          <h2 className="text-xl font-semibold mb-3">Description</h2>
+          <p className="text-gray-700 whitespace-pre-wrap">{event.description}</p>
+        </div>
+
+        {user?.role === 'Participant' && event.status === 'Published' && (
+          <div className="border-t pt-6 mt-6">
+            <a
+              href={`/events/${event.id}/register`}
+              className="block text-center py-3 px-6 bg-green-600 text-white rounded-md hover:bg-green-700 font-semibold"
+            >
+              Register for Event
+            </a>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

frontend/src/components/event-form.tsx

@@ -0,0 +1,187 @@
+'use client';
+
+import { useState } from 'react';
+import { api, Event } from '@/lib/api';
+import { useRouter } from 'next/navigation';
+
+interface EventFormProps {
+  event?: Event;
+}
+
+export function EventForm({ event }: EventFormProps) {
+  const [name, setName] = useState(event?.name || '');
+  const [description, setDescription] = useState(event?.description || '');
+  const [eventDate, setEventDate] = useState(event ? new Date(event.eventDate).toISOString().slice(0, 16) : '');
+  const [location, setLocation] = useState(event?.location || '');
+  const [category, setCategory] = useState(event?.category || '');
+  const [maxParticipants, setMaxParticipants] = useState(event?.maxParticipants?.toString() || '');
+  const [tags, setTags] = useState(event?.tags.join(', ') || '');
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const router = useRouter();
+
+  const categories = ['Running', 'Cycling', 'Triathlon', 'Trail', 'Road'];
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(null);
+    setIsSubmitting(true);
+
+    try {
+      const eventData = {
+        name,
+        description,
+        eventDate: new Date(eventDate).toISOString(),
+        location,
+        category: category || undefined,
+        maxParticipants: maxParticipants ? parseInt(maxParticipants) : undefined,
+        tags: tags.split(',').map(t => t.trim()).filter(t => t),
+      };
+
+      if (event) {
+        await api.updateEvent(event.id, eventData);
+      } else {
+        await api.createEvent(eventData);
+      }
+
+      router.push('/events');
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to save event');
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <div className="max-w-2xl mx-auto">
+      {error && (
+        <div className="mb-4 p-3 bg-red-100 border border-red-400 text-red-700 rounded">
+          {error}
+        </div>
+      )}
+
+      <form onSubmit={handleSubmit} className="space-y-6 bg-white rounded-lg shadow-md p-6">
+        <div>
+          <label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-1">
+            Event Name *
+          </label>
+          <input
+            id="name"
+            type="text"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            required
+            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+          />
+        </div>
+
+        <div>
+          <label htmlFor="description" className="block text-sm font-medium text-gray-700 mb-1">
+            Description
+          </label>
+          <textarea
+            id="description"
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+            rows={4}
+            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+          />
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div>
+            <label htmlFor="eventDate" className="block text-sm font-medium text-gray-700 mb-1">
+              Event Date & Time *
+            </label>
+            <input
+              id="eventDate"
+              type="datetime-local"
+              value={eventDate}
+              onChange={(e) => setEventDate(e.target.value)}
+              required
+              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+            />
+          </div>
+
+          <div>
+            <label htmlFor="location" className="block text-sm font-medium text-gray-700 mb-1">
+              Location *
+            </label>
+            <input
+              id="location"
+              type="text"
+              value={location}
+              onChange={(e) => setLocation(e.target.value)}
+              required
+              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+            />
+          </div>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div>
+            <label htmlFor="category" className="block text-sm font-medium text-gray-700 mb-1">
+              Category
+            </label>
+            <select
+              id="category"
+              value={category}
+              onChange={(e) => setCategory(e.target.value)}
+              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+            >
+              <option value="">Select Category</option>
+              {categories.map((cat) => (
+                <option key={cat} value={cat}>{cat}</option>
+              ))}
+            </select>
+          </div>
+
+          <div>
+            <label htmlFor="maxParticipants" className="block text-sm font-medium text-gray-700 mb-1">
+              Max Participants
+            </label>
+            <input
+              id="maxParticipants"
+              type="number"
+              min="1"
+              value={maxParticipants}
+              onChange={(e) => setMaxParticipants(e.target.value)}
+              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+            />
+          </div>
+        </div>
+
+        <div>
+          <label htmlFor="tags" className="block text-sm font-medium text-gray-700 mb-1">
+            Tags (comma-separated)
+          </label>
+          <input
+            id="tags"
+            type="text"
+            value={tags}
+            onChange={(e) => setTags(e.target.value)}
+            placeholder="e.g., beginner, competitive, charity"
+            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+          />
+        </div>
+
+        <div className="flex gap-4">
+          <button
+            type="submit"
+            disabled={isSubmitting}
+            className="flex-1 py-2 px-4 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:bg-gray-400"
+          >
+            {isSubmitting ? 'Saving...' : (event ? 'Update Event' : 'Create Event')}
+          </button>
+          <button
+            type="button"
+            onClick={() => router.push('/events')}
+            className="py-2 px-4 bg-gray-200 text-gray-800 rounded-md hover:bg-gray-300"
+          >
+            Cancel
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+}