MasterMito/raceplanner
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: MasterMito/raceplanner:e6430e855b52c9dfdb5d5a3f01b65e65e027e5f9
Branches Tags
MasterMito/raceplanner:main MasterMito/raceplanner:feature/add-comprehensive-tests
..
compare: MasterMito/raceplanner:8a264cd2b10ed891c081e76ae1f1ab9753f17b9d
Branches Tags
MasterMito/raceplanner:feature/add-comprehensive-tests MasterMito/raceplanner:main

2 Commits
e6430e855b .. 8a264cd2b1

Author SHA1 Message Date
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
7 changed files with 427 additions and 11 deletions
Expand all files Collapse all files
frontend/src/app/dashboard/page.tsx
+12
View File
@@ -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>
);
}
frontend/src/app/layout.tsx
+12 -3
View File
@@ -1,6 +1,8 @@
import type { Metadata } from "next"; import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google"; import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css"; import "./globals.css";
import { AuthProvider } from "@/lib/auth-context";
import { Navigation } from "@/components/navigation";
const geistSans = Geist({ const geistSans = Geist({
variable: "--font-geist-sans", variable: "--font-geist-sans",
@@ -13,8 +15,8 @@ const geistMono = Geist_Mono({
}); });
export const metadata: Metadata = { 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({ export default function RootLayout({
@@ -27,7 +29,14 @@ export default function RootLayout({
lang="en" lang="en"
className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`} 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> </html>
); );
} }
frontend/src/app/registrations/page.tsx
+15
View File
@@ -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>
);
}
frontend/src/components/dashboard.tsx
+200
View File
@@ -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>
);
}
frontend/src/components/navigation.tsx
+56
View File
@@ -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>
);
}
frontend/src/components/registration-list.tsx
+124
View File
@@ -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>
);
}
openspec/changes/new-raceplanner-app/tasks.md
+7 -7
View File
@@ -22,9 +22,9 @@
- [x] 3.2 Implement user login endpoint with JWT - [x] 3.2 Implement user login endpoint with JWT
- [x] 3.3 Create authentication middleware - [x] 3.3 Create authentication middleware
- [x] 3.4 Implement role-based access control 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) ## 4. Event Management (event-management)
@@ -32,10 +32,10 @@
- [x] 4.2 Implement update event endpoint - [x] 4.2 Implement update event endpoint
- [x] 4.3 Implement list events endpoint with filtering - [x] 4.3 Implement list events endpoint with filtering
- [x] 4.4 Implement get event details endpoint - [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) ## 5. Registration System (registration-system)