2026-04-03 21:47:59 +02:00
3 changed files with 76 additions and 11 deletions
@@ -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,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>
+  );
+}
@@ -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,10 +32,10 @@
 - [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)