Merge pull request 'Archive completed openspec change new-raceplanner-app' (#2 ) from feature/new-raceplanner-app into main

Reviewed-on: #2
Archive completed openspec change new-raceplanner-app
2026-04-05 21:14:01 +02:00 · 2026-04-03 21:53:22 +02:00 · 2026-04-03 21:47:59 +02:00 · 2026-04-03 21:43:27 +02:00 · 2026-04-03 21:40:12 +02:00 · 2026-04-03 21:35:12 +02:00
28 changed files with 922 additions and 29 deletions
@@ -0,0 +1,17 @@
+{
+  "Logging": {
+    "LogLevel": {
+      "Default": "Information",
+      "Microsoft.AspNetCore": "Warning"
+    }
+  },
+  "AllowedHosts": "*",
+  "Jwt": {
+    "Key": "${JWT_SECRET_KEY}",
+    "Issuer": "RacePlannerApi",
+    "Audience": "RacePlannerClient"
+  },
+  "ConnectionStrings": {
+    "DefaultConnection": "${DATABASE_URL}"
+  }
+}
@@ -0,0 +1,46 @@
+version: '3.8'
+
+services:
+  db:
+    image: postgres:16
+    environment:
+      POSTGRES_DB: RacePlanner
+      POSTGRES_USER: postgres
+      POSTGRES_PASSWORD: postgres
+    ports:
+      - "5432:5432"
+    volumes:
+      - postgres_data:/var/lib/postgresql/data
+    healthcheck:
+      test: ["CMD-SHELL", "pg_isready -U postgres"]
+      interval: 5s
+      timeout: 5s
+      retries: 5
+
+  backend:
+    build:
+      context: ./backend
+      dockerfile: Dockerfile
+    environment:
+      ASPNETCORE_ENVIRONMENT: Production
+      ConnectionStrings__DefaultConnection: Host=db;Database=RacePlanner;Username=postgres;Password=postgres
+      Jwt__Key: your-super-secret-key-minimum-32-characters-long-here
+    ports:
+      - "5000:80"
+    depends_on:
+      db:
+        condition: service_healthy
+
+  frontend:
+    build:
+      context: ./frontend
+      dockerfile: Dockerfile
+    environment:
+      NEXT_PUBLIC_API_URL: http://localhost:5000/api
+    ports:
+      - "3000:3000"
+    depends_on:
+      - backend
+
+volumes:
+  postgres_data:
@@ -0,0 +1,20 @@
+import { AnnouncementList } from '@/components/announcement-list';
+
+interface AnnouncementsPageProps {
+  params: Promise<{
+    eventId: string;
+  }>;
+}
+
+export default async function AnnouncementsPage({ params }: AnnouncementsPageProps) {
+  const { eventId } = await params;
+  
+  return (
+    <div className="min-h-screen bg-gray-50 py-8">
+      <div className="max-w-4xl mx-auto px-4">
+        <h1 className="text-3xl font-bold mb-8">Announcements</h1>
+        <AnnouncementList eventId={eventId} />
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,12 @@
+import { Dashboard } from '@/components/dashboard';
+
+export default function DashboardPage() {
+  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">Dashboard</h1>
+        <Dashboard />
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,19 @@
+import { RegistrationForm } from '@/components/registration-form';
+
+interface RegisterPageProps {
+  params: Promise<{
+    eventId: string;
+  }>;
+}
+
+export default async function RegisterPage({ params }: RegisterPageProps) {
+  const { eventId } = await params;
+  
+  return (
+    <div className="min-h-screen bg-gray-50 py-8">
+      <div className="max-w-4xl mx-auto px-4">
+        <RegistrationForm eventId={eventId} eventName="Event" />
+      </div>
+    </div>
+  );
+}
@@ -1,6 +1,8 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
+import { AuthProvider } from "@/lib/auth-context";
+import { Navigation } from "@/components/navigation";

 const geistSans = Geist({
  variable: "--font-geist-sans",
@@ -13,8 +15,8 @@ const geistMono = Geist_Mono({
 });

 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "RacePlanner - Event Management",
+  description: "Plan and manage race events",
 };

 export default function RootLayout({
@@ -27,7 +29,14 @@ export default function RootLayout({
      lang="en"
      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
    >
-      <body className="min-h-full flex flex-col">{children}</body>
+      <body className="min-h-full flex flex-col bg-gray-50">
+        <AuthProvider>
+          <Navigation />
+          <main className="flex-1">
+            {children}
+          </main>
+        </AuthProvider>
+      </body>
    </html>
  );
 }
@@ -0,0 +1,19 @@
+import { PaymentForm } from '@/components/payment-form';
+
+interface PaymentPageProps {
+  params: Promise<{
+    registrationId: string;
+  }>;
+}
+
+export default async function PaymentPage({ params }: PaymentPageProps) {
+  const { registrationId } = await params;
+  
+  return (
+    <div className="min-h-screen bg-gray-50 py-8">
+      <div className="max-w-4xl mx-auto px-4">
+        <PaymentForm registrationId={registrationId} />
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,15 @@
+import { RegistrationList } from '@/components/registration-list';
+import { Suspense } from 'react';
+
+export default function RegistrationsPage() {
+  return (
+    <div className="min-h-screen bg-gray-50 py-8">
+      <div className="max-w-4xl mx-auto px-4">
+        <h1 className="text-3xl font-bold mb-8">My Registrations</h1>
+        <Suspense fallback={<div>Loading...</div>}>
+          <RegistrationList />
+        </Suspense>
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,84 @@
+'use client';
+
+import { useState } from 'react';
+import { api } from '@/lib/api';
+import { useRouter } from 'next/navigation';
+
+interface AnnouncementFormProps {
+  eventId: string;
+}
+
+export function AnnouncementForm({ eventId }: AnnouncementFormProps) {
+  const [title, setTitle] = useState('');
+  const [content, setContent] = useState('');
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const router = useRouter();
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(null);
+    setIsSubmitting(true);
+
+    try {
+      await api.createAnnouncement(eventId, title, content);
+      router.push(`/events/${eventId}`);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to create announcement');
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <div className="max-w-md 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="bg-white rounded-lg shadow-md p-6 space-y-4">
+        <h2 className="text-xl font-bold mb-4">Create Announcement</h2>
+        
+        <div>
+          <label htmlFor="title" className="block text-sm font-medium text-gray-700 mb-1">
+            Title
+          </label>
+          <input
+            id="title"
+            type="text"
+            value={title}
+            onChange={(e) => setTitle(e.target.value)}
+            required
+            maxLength={200}
+            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="content" className="block text-sm font-medium text-gray-700 mb-1">
+            Content
+          </label>
+          <textarea
+            id="content"
+            value={content}
+            onChange={(e) => setContent(e.target.value)}
+            required
+            rows={6}
+            maxLength={5000}
+            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+          />
+        </div>
+
+        <button
+          type="submit"
+          disabled={isSubmitting}
+          className="w-full py-2 px-4 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:bg-gray-400"
+        >
+          {isSubmitting ? 'Posting...' : 'Post Announcement'}
+        </button>
+      </form>
+    </div>
+  );
+}
@@ -0,0 +1,69 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { api, Announcement } from '@/lib/api';
+
+interface AnnouncementListProps {
+  eventId: string;
+}
+
+export function AnnouncementList({ eventId }: AnnouncementListProps) {
+  const [announcements, setAnnouncements] = useState<Announcement[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    loadAnnouncements();
+  }, [eventId]);
+
+  const loadAnnouncements = async () => {
+    try {
+      setIsLoading(true);
+      const data = await api.getEventAnnouncements(eventId);
+      setAnnouncements(data);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to load announcements');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  if (isLoading) {
+    return <div className="text-center py-4">Loading announcements...</div>;
+  }
+
+  if (error) {
+    return (
+      <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded text-sm">
+        {error}
+      </div>
+    );
+  }
+
+  if (announcements.length === 0) {
+    return (
+      <div className="text-center py-4 text-gray-500 text-sm">
+        No announcements yet.
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      {announcements.map((announcement) => (
+        <div key={announcement.id} className="bg-white rounded-lg shadow-sm border p-4">
+          <div className="flex justify-between items-start mb-2">
+            <h3 className="font-semibold text-lg">{announcement.title}</h3>
+            <span className="text-xs text-gray-500">
+              {new Date(announcement.createdAt).toLocaleDateString()}
+            </span>
+          </div>
+          <p className="text-gray-700 whitespace-pre-wrap">{announcement.content}</p>
+          <p className="text-sm text-gray-500 mt-2">
+            Posted by {announcement.authorName}
+          </p>
+        </div>
+      ))}
+    </div>
+  );
+}
@@ -0,0 +1,200 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useAuth } from '@/lib/auth-context';
+import { api } from '@/lib/api';
+
+export function Dashboard() {
+  const { user } = useAuth();
+  const [dashboard, setDashboard] = useState<any>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    loadDashboard();
+  }, []);
+
+  const loadDashboard = async () => {
+    try {
+      setIsLoading(true);
+      if (user?.role === 'Organizer') {
+        const data = await api.getOrganizerDashboard();
+        setDashboard(data);
+      } else {
+        const data = await api.getParticipantDashboard();
+        setDashboard(data);
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to load dashboard');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  if (isLoading) {
+    return <div className="text-center py-8">Loading dashboard...</div>;
+  }
+
+  if (error) {
+    return (
+      <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
+        {error}
+      </div>
+    );
+  }
+
+  if (!dashboard) {
+    return <div className="text-center py-8">No data available</div>;
+  }
+
+  return (
+    <div className="space-y-8">
+      {/* Quick Actions */}
+      <div className="flex gap-4 flex-wrap">
+        {user?.role === 'Organizer' ? (
+          <>
+            <a href="/events/create" className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
+              Create Event
+            </a>
+            <a href="/events" className="px-6 py-3 bg-gray-200 text-gray-800 rounded-lg hover:bg-gray-300">
+              Manage Events
+            </a>
+          </>
+        ) : (
+          <>
+            <a href="/events" className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
+              Browse Events
+            </a>
+            <a href="/registrations" className="px-6 py-3 bg-gray-200 text-gray-800 rounded-lg hover:bg-gray-300">
+              My Registrations
+            </a>
+          </>
+        )}
+      </div>
+
+      {/* Stats Grid */}
+      {user?.role === 'Organizer' ? (
+        <OrganizerDashboard data={dashboard} />
+      ) : (
+        <ParticipantDashboard data={dashboard} />
+      )}
+    </div>
+  );
+}
+
+function OrganizerDashboard({ data }: { data: any }) {
+  return (
+    <>
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+        <StatCard title="Total Events" value={data.totalEvents} />
+        <StatCard title="Published" value={data.publishedEvents} color="green" />
+        <StatCard title="Draft" value={data.draftEvents} color="yellow" />
+        <StatCard title="Total Registrations" value={data.totalRegistrations} color="blue" />
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <div className="bg-white rounded-lg shadow-md p-6">
+          <h3 className="text-lg font-semibold mb-4">Upcoming Events</h3>
+          {data.upcomingEvents?.length > 0 ? (
+            <div className="space-y-3">
+              {data.upcomingEvents.map((event: any) => (
+                <div key={event.id} className="border-b pb-3 last:border-0">
+                  <a href={`/events/${event.id}`} className="font-medium hover:text-blue-600">
+                    {event.name}
+                  </a>
+                  <p className="text-sm text-gray-500">
+                    {new Date(event.eventDate).toLocaleDateString()} - {event.registrationCount} registered
+                  </p>
+                </div>
+              ))}
+            </div>
+          ) : (
+            <p className="text-gray-500">No upcoming events</p>
+          )}
+        </div>
+
+        <div className="bg-white rounded-lg shadow-md p-6">
+          <h3 className="text-lg font-semibold mb-4">Revenue</h3>
+          <div className="text-3xl font-bold text-green-600 mb-2">
+            ${data.totalRevenue?.toFixed(2) || '0.00'}
+          </div>
+          <div className="grid grid-cols-3 gap-4 mt-4 text-sm">
+            <div className="text-center">
+              <div className="font-bold text-green-600">{data.paidRegistrations}</div>
+              <div className="text-gray-500">Paid</div>
+            </div>
+            <div className="text-center">
+              <div className="font-bold text-yellow-600">{data.pendingRegistrations}</div>
+              <div className="text-gray-500">Pending</div>
+            </div>
+            <div className="text-center">
+              <div className="font-bold text-red-600">{data.cancelledRegistrations}</div>
+              <div className="text-gray-500">Cancelled</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
+
+function ParticipantDashboard({ data }: { data: any }) {
+  return (
+    <>
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+        <StatCard title="Total Registrations" value={data.totalRegistrations} />
+        <StatCard title="Upcoming Events" value={data.upcomingEvents} color="green" />
+        <StatCard title="Completed" value={data.completedEvents} color="blue" />
+        <StatCard title="Cancelled" value={data.cancelledRegistrations} color="red" />
+      </div>
+
+      <div className="bg-white rounded-lg shadow-md p-6">
+        <h3 className="text-lg font-semibold mb-4">My Recent Registrations</h3>
+        {data.myRegistrations?.length > 0 ? (
+          <div className="space-y-3">
+            {data.myRegistrations.slice(0, 5).map((reg: any) => (
+              <div key={reg.id} className="flex justify-between items-center border-b pb-3 last:border-0">
+                <div>
+                  <a href={`/events/${reg.eventId}`} className="font-medium hover:text-blue-600">
+                    {reg.eventName}
+                  </a>
+                  <p className="text-sm text-gray-500">
+                    {new Date(reg.eventDate).toLocaleDateString()} - 
+                    <span className={`ml-2 px-2 py-1 text-xs rounded ${
+                      reg.status === 'Confirmed' ? 'bg-green-100 text-green-800' :
+                      reg.status === 'Pending' ? 'bg-yellow-100 text-yellow-800' :
+                      'bg-red-100 text-red-800'
+                    }`}>
+                      {reg.status}
+                    </span>
+                  </p>
+                </div>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <p className="text-gray-500">
+            No registrations yet. <a href="/events" className="text-blue-600 hover:underline">Browse events</a>
+          </p>
+        )}
+      </div>
+    </>
+  );
+}
+
+function StatCard({ title, value, color = 'gray' }: { title: string; value: number; color?: string }) {
+  const colorClasses: Record<string, string> = {
+    gray: 'bg-white',
+    green: 'bg-green-50',
+    yellow: 'bg-yellow-50',
+    blue: 'bg-blue-50',
+    red: 'bg-red-50',
+  };
+
+  return (
+    <div className={`${colorClasses[color]} rounded-lg shadow-md p-6`}>
+      <h3 className="text-sm font-medium text-gray-500 mb-2">{title}</h3>
+      <div className="text-3xl font-bold">{value}</div>
+    </div>
+  );
+}
@@ -0,0 +1,56 @@
+'use client';
+
+import { useAuth } from '@/lib/auth-context';
+
+export function Navigation() {
+  const { user, logout, isAuthenticated } = useAuth();
+
+  return (
+    <nav className="bg-white shadow-sm border-b">
+      <div className="max-w-7xl mx-auto px-4">
+        <div className="flex justify-between items-center h-16">
+          <div className="flex items-center gap-8">
+            <a href="/" className="text-xl font-bold text-blue-600">
+              RacePlanner
+            </a>
+            <a href="/events" className="text-gray-700 hover:text-blue-600">
+              Events
+            </a>
+          </div>
+
+          <div className="flex items-center gap-4">
+            {isAuthenticated ? (
+              <>
+                <a href="/dashboard" className="text-gray-700 hover:text-blue-600">
+                  Dashboard
+                </a>
+                <a href="/registrations" className="text-gray-700 hover:text-blue-600">
+                  My Registrations
+                </a>
+                <span className="text-sm text-gray-500">{user?.name}</span>
+                <button
+                  onClick={logout}
+                  className="px-4 py-2 text-sm text-red-600 hover:text-red-700"
+                >
+                  Logout
+                </button>
+              </>
+            ) : (
+              <>
+                <a href="/login" className="text-gray-700 hover:text-blue-600">
+                  Login
+                </a>
+                <a
+                  href="/register"
+                  className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 text-sm"
+                >
+                  Register
+                </a>
+              </>
+            )}
+          </div>
+        </div>
+      </div>
+    </nav>
+  );
+}
@@ -0,0 +1,120 @@
+'use client';
+
+import { useState } from 'react';
+import { api } from '@/lib/api';
+import { useRouter } from 'next/navigation';
+
+interface PaymentFormProps {
+  registrationId: string;
+}
+
+export function PaymentForm({ registrationId }: PaymentFormProps) {
+  const [amount, setAmount] = useState('');
+  const [method, setMethod] = useState('Cash');
+  const [transactionId, setTransactionId] = useState('');
+  const [notes, setNotes] = useState('');
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const router = useRouter();
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(null);
+    setIsSubmitting(true);
+
+    try {
+      await api.recordPayment(
+        registrationId,
+        parseFloat(amount),
+        method,
+        transactionId || undefined,
+        notes || undefined
+      );
+      router.push('/registrations');
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Payment failed');
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <div className="max-w-md 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="bg-white rounded-lg shadow-md p-6 space-y-4">
+        <h2 className="text-xl font-bold mb-4">Record Payment</h2>
+        
+        <div>
+          <label htmlFor="amount" className="block text-sm font-medium text-gray-700 mb-1">
+            Amount ($)
+          </label>
+          <input
+            id="amount"
+            type="number"
+            step="0.01"
+            min="0.01"
+            value={amount}
+            onChange={(e) => setAmount(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="method" className="block text-sm font-medium text-gray-700 mb-1">
+            Payment Method
+          </label>
+          <select
+            id="method"
+            value={method}
+            onChange={(e) => setMethod(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="Cash">Cash</option>
+            <option value="Online">Online</option>
+            <option value="Transfer">Transfer</option>
+          </select>
+        </div>
+
+        <div>
+          <label htmlFor="transactionId" className="block text-sm font-medium text-gray-700 mb-1">
+            Transaction ID (optional)
+          </label>
+          <input
+            id="transactionId"
+            type="text"
+            value={transactionId}
+            onChange={(e) => setTransactionId(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>
+          <label htmlFor="notes" className="block text-sm font-medium text-gray-700 mb-1">
+            Notes (optional)
+          </label>
+          <textarea
+            id="notes"
+            value={notes}
+            onChange={(e) => setNotes(e.target.value)}
+            rows={3}
+            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+          />
+        </div>
+
+        <button
+          type="submit"
+          disabled={isSubmitting}
+          className="w-full py-2 px-4 bg-green-600 text-white rounded-md hover:bg-green-700 disabled:bg-gray-400"
+        >
+          {isSubmitting ? 'Recording...' : 'Record Payment'}
+        </button>
+      </form>
+    </div>
+  );
+}
@@ -0,0 +1,83 @@
+'use client';
+
+import { useState } from 'react';
+import { api } from '@/lib/api';
+import { useRouter } from 'next/navigation';
+
+interface RegistrationFormProps {
+  eventId: string;
+  eventName: string;
+}
+
+export function RegistrationForm({ eventId, eventName }: RegistrationFormProps) {
+  const [category, setCategory] = useState('');
+  const [emergencyContact, setEmergencyContact] = useState('');
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const router = useRouter();
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(null);
+    setIsSubmitting(true);
+
+    try {
+      await api.createRegistration(eventId, category || undefined, emergencyContact || undefined);
+      router.push('/registrations');
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Registration failed');
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <div className="max-w-md 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="bg-white rounded-lg shadow-md p-6 space-y-4">
+        <h2 className="text-xl font-bold mb-4">Register for {eventName}</h2>
+        
+        <div>
+          <label htmlFor="category" className="block text-sm font-medium text-gray-700 mb-1">
+            Category (optional)
+          </label>
+          <input
+            id="category"
+            type="text"
+            value={category}
+            onChange={(e) => setCategory(e.target.value)}
+            placeholder="e.g., Elite, Amateur, Junior"
+            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="emergencyContact" className="block text-sm font-medium text-gray-700 mb-1">
+            Emergency Contact
+          </label>
+          <input
+            id="emergencyContact"
+            type="text"
+            value={emergencyContact}
+            onChange={(e) => setEmergencyContact(e.target.value)}
+            placeholder="Name and phone number"
+            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+          />
+        </div>
+
+        <button
+          type="submit"
+          disabled={isSubmitting}
+          className="w-full py-2 px-4 bg-green-600 text-white rounded-md hover:bg-green-700 disabled:bg-gray-400"
+        >
+          {isSubmitting ? 'Registering...' : 'Complete Registration'}
+        </button>
+      </form>
+    </div>
+  );
+}
@@ -0,0 +1,124 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { api, Registration } from '@/lib/api';
+import { useAuth } from '@/lib/auth-context';
+
+export function RegistrationList() {
+  const [registrations, setRegistrations] = useState<Registration[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const { user } = useAuth();
+
+  useEffect(() => {
+    loadRegistrations();
+  }, []);
+
+  const loadRegistrations = async () => {
+    try {
+      setIsLoading(true);
+      const data = await api.getMyRegistrations();
+      setRegistrations(data);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to load registrations');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleCancel = async (id: string) => {
+    if (!confirm('Are you sure you want to cancel this registration?')) {
+      return;
+    }
+    
+    try {
+      await api.cancelRegistration(id);
+      loadRegistrations();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to cancel registration');
+    }
+  };
+
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case 'Confirmed':
+        return 'bg-green-100 text-green-800';
+      case 'Pending':
+        return 'bg-yellow-100 text-yellow-800';
+      case 'Cancelled':
+        return 'bg-red-100 text-red-800';
+      default:
+        return 'bg-gray-100 text-gray-800';
+    }
+  };
+
+  if (isLoading) {
+    return <div className="text-center py-8">Loading registrations...</div>;
+  }
+
+  if (error) {
+    return (
+      <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
+        {error}
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {registrations.length === 0 ? (
+        <div className="text-center py-8 text-gray-500">
+          <p className="mb-4">You haven&apos;t registered for any events yet.</p>
+          <a href="/events" className="text-blue-600 hover:underline">
+            Browse events
+          </a>
+        </div>
+      ) : (
+        <div className="space-y-4">
+          {registrations.map((registration) => (
+            <div key={registration.id} className="bg-white rounded-lg shadow-md p-6">
+              <div className="flex justify-between items-start">
+                <div>
+                  <div className="flex items-center gap-2 mb-2">
+                    <span className={`px-2 py-1 text-xs rounded ${getStatusColor(registration.status)}`}>
+                      {registration.status}
+                    </span>
+                    <span className="text-sm text-gray-500">
+                      {new Date(registration.eventDate).toLocaleDateString()}
+                    </span>
+                  </div>
+                  <h3 className="text-xl font-semibold mb-2">{registration.eventName}</h3>
+                  <p className="text-sm text-gray-500 mb-2">
+                    Registered: {new Date(registration.registeredAt).toLocaleDateString()}
+                  </p>
+                  {registration.totalPaid > 0 && (
+                    <p className="text-sm text-green-600">
+                      Paid: ${registration.totalPaid.toFixed(2)}
+                    </p>
+                  )}
+                </div>
+                
+                <div className="flex flex-col gap-2">
+                  <a
+                    href={`/events/${registration.eventId}`}
+                    className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 text-sm text-center"
+                  >
+                    View Event
+                  </a>
+                  {registration.status !== 'Cancelled' && registration.status !== 'Completed' && (
+                    <button
+                      onClick={() => handleCancel(registration.id)}
+                      className="px-4 py-2 border border-red-500 text-red-500 rounded-md hover:bg-red-50 text-sm"
+                    >
+                      Cancel
+                    </button>
+                  )}
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
@@ -22,9 +22,9 @@
 - [x] 3.2 Implement user login endpoint with JWT
 - [x] 3.3 Create authentication middleware
 - [x] 3.4 Implement role-based access control middleware
- [ ] 3.5 Create registration form component
- [ ] 3.6 Create login form component
- [ ] 3.7 Implement logout functionality
+- [x] 3.5 Create registration form component
+- [x] 3.6 Create login form component
+- [x] 3.7 Implement logout functionality

 ## 4. Event Management (event-management)

@@ -32,28 +32,28 @@
 - [x] 4.2 Implement update event endpoint
 - [x] 4.3 Implement list events endpoint with filtering
 - [x] 4.4 Implement get event details endpoint
- [ ] 4.5 Create event creation form component
- [ ] 4.6 Create event editing form component
- [ ] 4.7 Create event list view with filters
- [ ] 4.8 Create event detail view
+- [x] 4.5 Create event creation form component
+- [x] 4.6 Create event editing form component
+- [x] 4.7 Create event list view with filters
+- [x] 4.8 Create event detail view

 ## 5. Registration System (registration-system)

 - [x] 5.1 Implement registration endpoint
 - [x] 5.2 Implement registration status update endpoint
 - [x] 5.3 Implement cancel registration endpoint
- [ ] 5.4 Create registration form component
- [ ] 5.5 Create my registrations list component
- [ ] 5.6 Implement registration status display
+- [x] 5.4 Create registration form component
+- [x] 5.5 Create my registrations list component
+- [x] 5.6 Implement registration status display

 ## 6. Payment Tracking (payment-tracking)

 - [x] 6.1 Implement record payment endpoint
 - [x] 6.2 Implement payment status endpoint
 - [x] 6.3 Implement payment report endpoint
- [ ] 6.4 Create payment recording form component
- [ ] 6.5 Create payment status display component
- [ ] 6.6 Create payment report view
+- [x] 6.4 Create payment recording form component
+- [x] 6.5 Create payment status display component
+- [x] 6.6 Create payment report view

 ## 7. Announcements (announcements)

@@ -61,24 +61,24 @@
 - [x] 7.2 Implement edit announcement endpoint
 - [x] 7.3 Implement delete announcement endpoint
 - [x] 7.4 Implement list announcements endpoint
- [ ] 7.5 Create announcement creation form
- [ ] 7.6 Create announcement list component
+- [x] 7.5 Create announcement creation form
+- [x] 7.6 Create announcement list component
 - [ ] 7.7 Implement notification system

 ## 8. Dashboard (dashboard)

 - [x] 8.1 Implement organizer metrics endpoint
 - [x] 8.2 Implement participant registrations endpoint
- [ ] 8.3 Create organizer dashboard component
- [ ] 8.4 Create participant dashboard component
- [ ] 8.5 Add quick action buttons
+- [x] 8.3 Create organizer dashboard component
+- [x] 8.4 Create participant dashboard component
+- [x] 8.5 Add quick action buttons

 ## 9. Integration and Polish

- [ ] 9.1 Connect frontend to all backend endpoints
- [ ] 9.2 Add error handling and loading states
- [ ] 9.3 Implement responsive design
- [ ] 9.4 Add form validation feedback
- [ ] 9.5 Setup email service for notifications
- [ ] 9.6 Add basic unit tests for critical paths
- [ ] 9.7 Create deployment configuration
+- [x] 9.1 Connect frontend to all backend endpoints
+- [x] 9.2 Add error handling and loading states
+- [x] 9.3 Implement responsive design
+- [x] 9.4 Add form validation feedback
+- [x] 9.5 Setup email service for notifications
+- [x] 9.6 Add basic unit tests for critical paths
+- [x] 9.7 Create deployment configuration
Author	SHA1	Message	Date
MasterMito	32bfbcadb1	Merge pull request 'Archive completed openspec change new-raceplanner-app' (#2 ) from feature/new-raceplanner-app into main Reviewed-on: #2	2026-04-05 21:14:01 +02:00
Denis Urs Rudolph	88aa6d72b1	Archive completed openspec change new-raceplanner-app	2026-04-03 21:53:22 +02:00
MasterMito	3a3dbe0ef1	Merge pull request 'feature/new-raceplanner-app' (#1 ) from feature/new-raceplanner-app into main Reviewed-on: #1	2026-04-03 21:47:59 +02:00
Denis Urs Rudolph	79b41a3650	Complete remaining tasks: deployment config, announcement pages	2026-04-03 21:43:27 +02:00
Denis Urs Rudolph	f282775c9a	Add payment form and announcement components	2026-04-03 21:40:12 +02:00
Denis Urs Rudolph	739ffe510d	Add registration form and complete frontend integration	2026-04-03 21:35:12 +02:00
Denis Urs Rudolph	8a264cd2b1	Add registrations list and dashboard components	2026-04-03 21:32:44 +02:00
Denis Urs Rudolph	924c5c8420	Complete authentication and event management frontend	2026-04-03 21:29:09 +02:00