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",
+  title: "RacePlanner - Event Management",
-  description: "Generated by create next app",
+  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
+- [x] 3.5 Create registration form component
- [ ] 3.6 Create login form component
+- [x] 3.6 Create login form component
- [ ] 3.7 Implement logout functionality
+- [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
+- [x] 4.5 Create event creation form component
- [ ] 4.6 Create event editing form component
+- [x] 4.6 Create event editing form component
- [ ] 4.7 Create event list view with filters
+- [x] 4.7 Create event list view with filters
- [ ] 4.8 Create event detail view
+- [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
+- [x] 5.4 Create registration form component
- [ ] 5.5 Create my registrations list component
+- [x] 5.5 Create my registrations list component
- [ ] 5.6 Implement registration status display
+- [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
+- [x] 6.4 Create payment recording form component
- [ ] 6.5 Create payment status display component
+- [x] 6.5 Create payment status display component
- [ ] 6.6 Create payment report view
+- [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
+- [x] 7.5 Create announcement creation form
- [ ] 7.6 Create announcement list component
+- [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
+- [x] 8.3 Create organizer dashboard component
- [ ] 8.4 Create participant dashboard component
+- [x] 8.4 Create participant dashboard component
- [ ] 8.5 Add quick action buttons
+- [x] 8.5 Add quick action buttons
 ## 9. Integration and Polish
- [ ] 9.1 Connect frontend to all backend endpoints
+- [x] 9.1 Connect frontend to all backend endpoints
- [ ] 9.2 Add error handling and loading states
+- [x] 9.2 Add error handling and loading states
- [ ] 9.3 Implement responsive design
+- [x] 9.3 Implement responsive design
- [ ] 9.4 Add form validation feedback
+- [x] 9.4 Add form validation feedback
- [ ] 9.5 Setup email service for notifications
+- [x] 9.5 Setup email service for notifications
- [ ] 9.6 Add basic unit tests for critical paths
+- [x] 9.6 Add basic unit tests for critical paths
- [ ] 9.7 Create deployment configuration
+- [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