Refactor management components to remove loading state: Eliminate unused loading state and related conditional rendering from ChallengeManagement, EventManagement, FeedbackManagement, HouseManagement, and UserManagement components, simplifying the code and improving readability.

This reverts commit f093977b34.

.cursor/rules/api-routes.mdc

@@ -0,0 +1,32 @@
+---
+globs: app/api/**/*.ts
+---
+
+# API Routes Rules
+
+1. Routes MUST only use services for data access
+2. Routes MUST handle input validation
+3. Routes MUST return typed responses
+4. Routes MUST use proper error handling
+
+Example of correct API route:
+
+```typescript
+import { MyService } from "@/services/my-service";
+
+export async function GET(request: Request) {
+  try {
+    const service = new MyService(pool);
+    const data = await service.getData();
+    return Response.json(data);
+  } catch (error) {
+    return Response.error();
+  }
+}
+```
+
+❌ FORBIDDEN:
+
+- Direct database queries
+- Business logic implementation
+- Untyped responses

.cursor/rules/business-logic-separation.mdc

@@ -0,0 +1,167 @@
+---
+alwaysApply: true
+description: Enforce business logic separation between frontend and backend
+---
+
+# Business Logic Separation Rules
+
+## Core Principle: NO Business Logic in Frontend
+
+All business logic, data processing, and domain rules MUST be implemented in the backend services layer. The frontend is purely for presentation and user interaction.
+
+## ✅ ALLOWED in Frontend ([src/components/](mdc:src/components/), [src/hooks/](mdc:src/hooks/), [src/clients/](mdc:src/clients/))
+
+### Components
+- UI rendering and presentation logic
+- Form validation (UI-level only, not business rules)
+- User interaction handling (clicks, inputs, navigation)
+- Visual state management (loading, errors, UI states)
+- Data formatting for display purposes only
+
+### Hooks
+- React state management
+- API call orchestration (using clients)
+- UI-specific logic (modals, forms, animations)
+- Data fetching and caching coordination
+
+### Clients
+- HTTP requests to API routes
+- Request/response transformation (serialization only)
+- Error handling and retry logic
+- Authentication token management
+
+## ❌ FORBIDDEN in Frontend
+
+### Business Rules
+```typescript
+// ❌ BAD: Business logic in component
+const TaskCard = ({ task }) => {
+  const canEdit = task.status === 'open' && task.assignee === currentUser.id;
+  const priority = task.dueDate < new Date() ? 'high' : 'normal';
+  // This is business logic!
+}
+
+// ✅ GOOD: Get computed values from backend
+const TaskCard = ({ task }) => {
+  const { canEdit, priority } = task; // Computed by backend service
+}
+```
+
+### Data Processing
+```typescript
+// ❌ BAD: Data transformation in frontend
+const processJiraTasks = (tasks) => {
+  return tasks.map(task => ({
+    ...task,
+    normalizedStatus: mapJiraStatus(task.status),
+    estimatedHours: calculateEstimate(task.storyPoints)
+  }));
+}
+
+// ✅ GOOD: Data already processed by backend service
+const { processedTasks } = await tasksClient.getTasks();
+```
+
+### Domain Logic
+```typescript
+// ❌ BAD: Domain calculations in frontend
+const calculateTeamVelocity = (sprints) => {
+  // Complex business calculation
+}
+
+// ✅ GOOD: Domain logic in service
+// This belongs in services/team-analytics.ts
+```
+
+## ✅ REQUIRED in Backend ([src/services/](mdc:src/services/), [src/app/api/](mdc:src/app/api/))
+
+### Services Layer
+- All business rules and domain logic
+- Data validation and processing
+- Integration with external APIs (Jira, macOS Reminders)
+- Complex calculations and algorithms
+- Data aggregation and analytics
+- Permission and authorization logic
+
+### API Routes
+- Input validation and sanitization
+- Service orchestration
+- Response formatting
+- Error handling and logging
+- Authentication and authorization
+
+## Implementation Pattern
+
+### ✅ Correct Flow
+```
+User Action → Component → Client → API Route → Service → Database
+                ↑                                ↓
+            Pure UI Logic              Business Logic
+```
+
+### ❌ Incorrect Flow
+```
+User Action → Component with Business Logic → Database
+```
+
+## Examples
+
+### Task Status Management
+```typescript
+// ❌ BAD: In component
+const updateTaskStatus = (taskId, newStatus) => {
+  if (newStatus === 'done' && !task.hasAllSubtasks) {
+    throw new Error('Cannot complete task with pending subtasks');
+  }
+  // Business rule in frontend!
+}
+
+// ✅ GOOD: In services/task-processor.ts
+export const updateTaskStatus = async (taskId: string, newStatus: TaskStatus) => {
+  const task = await getTask(taskId);
+  
+  // Business rules in service
+  if (newStatus === 'done' && !await hasAllSubtasksCompleted(taskId)) {
+    throw new BusinessError('Cannot complete task with pending subtasks');
+  }
+  
+  return await updateTask(taskId, { status: newStatus });
+}
+```
+
+### Team Analytics
+```typescript
+// ❌ BAD: In component
+const TeamDashboard = () => {
+  const calculateBurndown = (tasks) => {
+    // Complex business calculation in component
+  }
+}
+
+// ✅ GOOD: In services/team-analytics.ts
+export const getTeamBurndown = async (teamId: string, sprintId: string) => {
+  // All calculation logic in service
+  const tasks = await getSprintTasks(sprintId);
+  return calculateBurndownMetrics(tasks);
+}
+```
+
+## Enforcement
+
+When reviewing code:
+1. **Components**: Should only contain JSX, event handlers, and UI state
+2. **Hooks**: Should only orchestrate API calls and manage React state  
+3. **Clients**: Should only make HTTP requests and handle responses
+4. **Services**: Should contain ALL business logic and data processing
+5. **API Routes**: Should validate input and call appropriate services
+
+## Red Flags
+
+Watch for these patterns that indicate business logic in frontend:
+- Complex calculations in components/hooks
+- Business rule validation in forms
+- Data transformation beyond display formatting
+- Domain-specific constants and rules
+- Integration logic with external systems
+
+Remember: **The frontend is a thin presentation layer. All intelligence lives in the backend.**

.cursor/rules/clients.mdc

@@ -0,0 +1,31 @@
+---
+globs: clients/**/*.ts
+---
+
+# HTTP Clients Rules
+
+1. All HTTP calls MUST be in clients/domains/
+2. Each domain MUST have its own client
+3. Clients MUST use the base HTTP client
+4. Clients MUST type their responses
+
+Example of correct client:
+
+```typescript
+import { HttpClient } from "@/clients/base/http-client";
+import { MyData } from "@/lib/types";
+
+export class MyClient {
+  constructor(private httpClient: HttpClient) {}
+
+  async getData(): Promise<MyData[]> {
+    return this.httpClient.get("/api/data");
+  }
+}
+```
+
+❌ FORBIDDEN:
+
+- Direct fetch calls
+- Business logic in clients
+- Untyped responses

.cursor/rules/components.mdc

@@ -0,0 +1,28 @@
+---
+globs: src/components/**/*.tsx
+---
+
+# Components Rules
+
+1. UI components MUST be in src/components/ui/
+2. Feature components MUST be in their feature folder
+3. Components MUST use clients for data fetching
+4. Components MUST be properly typed
+
+Example of correct component:
+
+```typescript
+import { useMyClient } from '@/hooks/use-my-client';
+
+export const MyComponent = () => {
+  const { data } = useMyClient();
+  return <div>{data.map(item => <Item key={item.id} {...item} />)}</div>;
+};
+```
+
+❌ FORBIDDEN:
+
+- Direct service usage
+- Direct database queries
+- Direct fetch calls
+- Untyped props

.cursor/rules/css-variables-theme.mdc

@@ -0,0 +1,167 @@
+---
+alwaysApply: true
+description: CSS Variables theme system best practices
+---
+
+# CSS Variables Theme System
+
+## Core Principle: Pure CSS Variables for Theming
+
+This project uses **CSS Variables exclusively** for theming. No Tailwind `dark:` classes or conditional CSS classes.
+
+## ✅ Architecture Pattern
+
+### CSS Structure
+```css
+:root {
+  /* Light theme (default values) */
+  --background: #f1f5f9;
+  --foreground: #0f172a;
+  --primary: #0891b2;
+  --success: #059669;
+  --destructive: #dc2626;
+  --accent: #d97706;
+  --purple: #8b5cf6;
+  --yellow: #eab308;
+  --green: #059669;
+  --blue: #2563eb;
+  --gray: #6b7280;
+  --gray-light: #e5e7eb;
+}
+
+.dark {
+  /* Dark theme (override values) */
+  --background: #1e293b;
+  --foreground: #f1f5f9;
+  --primary: #06b6d4;
+  --success: #10b981;
+  --destructive: #ef4444;
+  --accent: #f59e0b;
+  --purple: #8b5cf6;
+  --yellow: #eab308;
+  --green: #10b981;
+  --blue: #3b82f6;
+  --gray: #9ca3af;
+  --gray-light: #374151;
+}
+```
+
+### Theme Application
+- **Single source of truth**: [ThemeContext.tsx](mdc:src/contexts/ThemeContext.tsx) applies theme class to `document.documentElement`
+- **No duplication**: Theme is applied only once, not in multiple places
+- **SSR safe**: Initial theme from server-side preferences
+
+## ✅ Component Usage Patterns
+
+### Correct: Using CSS Variables
+```tsx
+// ✅ GOOD: CSS Variables in className
+<div className="bg-[var(--card)] text-[var(--foreground)] border-[var(--border)]">
+
+// ✅ GOOD: CSS Variables in style prop
+<div style={{ color: 'var(--primary)', backgroundColor: 'var(--card)' }}>
+
+// ✅ GOOD: CSS Variables with color-mix for transparency
+<div style={{ 
+  backgroundColor: 'color-mix(in srgb, var(--primary) 10%, transparent)',
+  borderColor: 'color-mix(in srgb, var(--primary) 20%, var(--border))'
+}}>
+```
+
+### ❌ Forbidden: Tailwind Dark Mode Classes
+```tsx
+// ❌ BAD: Tailwind dark: classes
+<div className="bg-white dark:bg-gray-800 text-black dark:text-white">
+
+// ❌ BAD: Conditional classes
+<div className={theme === 'dark' ? 'bg-gray-800' : 'bg-white'}>
+
+// ❌ BAD: Hardcoded colors
+<div className="bg-red-500 text-blue-600">
+```
+
+## ✅ Color System
+
+### Semantic Color Tokens
+- `--background`: Main background color
+- `--foreground`: Main text color
+- `--card`: Card/panel background
+- `--card-hover`: Card hover state
+- `--card-column`: Column background (darker than cards)
+- `--border`: Border color
+- `--input`: Input field background
+- `--primary`: Primary brand color
+- `--primary-foreground`: Text on primary background
+- `--muted`: Muted text color
+- `--muted-foreground`: Secondary text color
+- `--accent`: Accent color (orange/amber)
+- `--destructive`: Error/danger color (red)
+- `--success`: Success color (green)
+- `--purple`: Purple accent
+- `--yellow`: Yellow accent
+- `--green`: Green accent
+- `--blue`: Blue accent
+- `--gray`: Gray color
+- `--gray-light`: Light gray background
+
+### Color Mixing Patterns
+```css
+/* Background with transparency */
+background-color: color-mix(in srgb, var(--primary) 10%, transparent);
+
+/* Border with transparency */
+border-color: color-mix(in srgb, var(--primary) 20%, var(--border));
+
+/* Text with opacity */
+color: color-mix(in srgb, var(--destructive) 80%, transparent);
+```
+
+## ✅ Theme Context Usage
+
+### ThemeProvider Setup
+```tsx
+// In layout.tsx
+<ThemeProvider initialTheme={initialPreferences.viewPreferences.theme}>
+  {children}
+</ThemeProvider>
+```
+
+### Component Usage
+```tsx
+import { useTheme } from '@/contexts/ThemeContext';
+
+function MyComponent() {
+  const { theme, toggleTheme, setTheme } = useTheme();
+  
+  return (
+    <button onClick={toggleTheme}>
+      Switch to {theme === 'dark' ? 'light' : 'dark'} theme
+    </button>
+  );
+}
+```
+
+## ✅ Future Extensibility
+
+This system is designed to support:
+- **Custom color themes**: Easy to add new color variables
+- **User preferences**: Colors can be dynamically changed
+- **Theme presets**: Multiple predefined themes
+- **Accessibility**: High contrast modes
+
+## 🚨 Anti-patterns to Avoid
+
+1. **Don't mix approaches**: Never use both CSS variables and Tailwind dark: classes
+2. **Don't duplicate theme application**: Theme should be applied only in ThemeContext
+3. **Don't hardcode colors**: Always use semantic color tokens
+4. **Don't use conditional classes**: Use CSS variables instead
+5. **Don't forget transparency**: Use `color-mix()` for semi-transparent colors
+
+## 📁 Key Files
+
+- [globals.css](mdc:src/app/globals.css) - CSS Variables definitions
+- [ThemeContext.tsx](mdc:src/contexts/ThemeContext.tsx) - Theme management
+- [UserPreferencesContext.tsx](mdc:src/contexts/UserPreferencesContext.tsx) - Preferences sync
+- [layout.tsx](mdc:src/app/layout.tsx) - Theme provider setup
+
+Remember: **CSS Variables are the single source of truth for theming. Keep it pure and consistent.**

.cursor/rules/project-structure.mdc

@@ -0,0 +1,30 @@
+---
+alwaysApply: true
+---
+
+# Project Structure Rules
+
+1. Backend:
+   - [src/services/](mdc:src/services/) - ALL database access
+   - [src/app/api/](mdc:src/app/api/) - API routes using services
+
+2. Frontend:
+   - [src/clients/](mdc:src/clients/) - HTTP clients
+   - [src/components/](mdc:src/components/) - React components (organized by domain)
+   - [src/hooks/](mdc:src/hooks/) - React hooks
+
+3. Shared:
+   - [src/lib/](mdc:src/lib/) - Types and utilities
+   - [scripts/](mdc:scripts/) - Utility scripts
+
+Key Files:
+
+- [src/services/database.ts](mdc:src/services/database.ts) - Database pool
+- [src/clients/base/http-client.ts](mdc:src/clients/base/http-client.ts) - Base HTTP client
+- [src/lib/types.ts](mdc:src/lib/types.ts) - Shared types
+
+❌ FORBIDDEN:
+
+- Database access outside src/services/
+- HTTP calls outside src/clients/
+- Business logic in src/components/

.cursor/rules/server-actions.mdc

@@ -0,0 +1,113 @@
+---
+alwaysApply: true
+description: Guide for when to use Server Actions vs API Routes in Next.js App Router
+---
+
+# Server Actions vs API Routes - Decision Guide
+
+## ✅ USE SERVER ACTIONS for:
+
+### Quick Actions & Mutations
+- **TaskCard actions**: `updateTaskStatus()`, `updateTaskTitle()`, `deleteTask()`
+- **Daily checkboxes**: `toggleCheckbox()`, `addCheckbox()`, `updateCheckbox()`
+- **User preferences**: `updateTheme()`, `updateViewPreferences()`, `updateFilters()`
+- **Simple CRUD**: `createTag()`, `updateTag()`, `deleteTag()`
+
+### Characteristics of Server Action candidates:
+- Simple, frequent mutations
+- No complex business logic
+- Used in interactive components (forms, buttons, toggles)
+- Need immediate UI feedback with `useTransition`
+- Benefit from automatic cache revalidation
+
+## ❌ KEEP API ROUTES for:
+
+### Complex Endpoints
+- **Initial data fetching**: `GET /api/tasks` with complex filters
+- **External integrations**: `POST /api/jira/sync` with complex logic
+- **Analytics & reports**: Complex data aggregation
+- **Public API**: Endpoints that might be called from mobile/external
+
+### Characteristics that require API Routes:
+- Complex business logic or data processing
+- Multiple service orchestration
+- Need for HTTP monitoring/logging
+- External consumption (mobile apps, webhooks)
+- Real-time features (WebSockets, SSE)
+- File uploads or special content types
+
+## 🔄 Implementation Pattern
+
+### Server Actions Structure
+```typescript
+// actions/tasks.ts
+'use server'
+
+import { tasksService } from '@/services/tasks';
+import { revalidatePath } from 'next/cache';
+
+export async function updateTaskStatus(taskId: string, status: TaskStatus) {
+  try {
+    const task = await tasksService.updateTask(taskId, { status });
+    revalidatePath('/'); // Auto cache invalidation
+    return { success: true, data: task };
+  } catch (error) {
+    return { success: false, error: error.message };
+  }
+}
+```
+
+### Component Usage with useTransition
+```typescript
+// components/TaskCard.tsx
+'use client';
+
+import { updateTaskStatus } from '@/actions/tasks';
+import { useTransition } from 'react';
+
+export function TaskCard({ task }) {
+  const [isPending, startTransition] = useTransition();
+  
+  const handleStatusChange = (status) => {
+    startTransition(async () => {
+      const result = await updateTaskStatus(task.id, status);
+      if (!result.success) {
+        // Handle error
+      }
+    });
+  };
+  
+  return (
+    <div className={isPending ? 'opacity-50' : ''}>
+      {/* UI with loading state */}
+    </div>
+  );
+}
+```
+
+## 🏗️ Migration Strategy
+
+When migrating from API Routes to Server Actions:
+
+1. **Create server action** in `actions/` directory
+2. **Update component** to use server action directly
+3. **Remove API route** (PATCH, POST, DELETE for mutations)
+4. **Simplify client** (remove mutation methods, keep GET only)
+5. **Update hooks** to use server actions instead of HTTP calls
+
+## 🎯 Benefits of Server Actions
+
+- **🚀 Performance**: No HTTP serialization overhead
+- **🔄 Cache intelligence**: Automatic revalidation with `revalidatePath()`
+- **📦 Bundle reduction**: Less client-side HTTP code
+- **⚡ UX**: Native loading states with `useTransition`
+- **🎯 Simplicity**: Direct service calls, less boilerplate
+
+## 🚨 Anti-patterns to Avoid
+
+- Don't use server actions for complex data fetching
+- Don't use server actions for endpoints that need HTTP monitoring
+- Don't use server actions for public API endpoints
+- Don't mix server actions with client-side state management for the same data
+
+Remember: Server Actions are for **direct mutations**, API Routes are for **complex operations** and **public interfaces**.

.cursor/rules/services.mdc

@@ -0,0 +1,42 @@
+---
+globs: src/services/*.ts
+---
+
+# Services Rules
+
+1. Services MUST contain ALL PostgreSQL queries
+2. Services are the ONLY layer allowed to communicate with the database
+3. Each service MUST:
+   - Use the pool from [src/services/database.ts](mdc:src/services/database.ts)
+   - Implement proper transaction management
+   - Handle errors and logging
+   - Validate data before insertion
+   - Have a clear interface
+
+Example of correct service implementation:
+
+```typescript
+export class MyService {
+  constructor(private pool: Pool) {}
+
+  async myMethod(): Promise<Result> {
+    const client = await this.pool.connect();
+    try {
+      await client.query("BEGIN");
+      // ... queries
+      await client.query("COMMIT");
+    } catch (error) {
+      await client.query("ROLLBACK");
+      throw error;
+    } finally {
+      client.release();
+    }
+  }
+}
+```
+
+❌ FORBIDDEN:
+
+- Direct database queries outside src/services
+- Raw SQL in API routes
+- Database logic in components

.cursor/rules/todo-tracking.mdc

@@ -0,0 +1,54 @@
+---
+alwaysApply: true
+description: Automatic TODO tracking and task completion management
+---
+
+# TODO Task Tracking Rules
+
+## Automatic Task Completion
+
+Whenever you complete a task or implement a feature mentioned in [TODO.md](mdc:TODO.md), you MUST:
+
+1. **Immediately update the TODO.md** by changing `- [ ]` to `- [x]` for the completed task
+2. **Use the exact task description** from the TODO - don't modify the text
+3. **Update related sub-tasks** if completing a parent task affects them
+4. **Add completion timestamp** in a comment if the task was significant
+
+## Task Completion Examples
+
+### ✅ Correct completion marking:
+```markdown
+- [x] Initialiser Next.js avec TypeScript
+- [x] Configurer ESLint, Prettier  
+- [x] Setup structure de dossiers selon les règles du workspace
+```
+
+### ✅ With timestamp for major milestones:
+```markdown
+- [x] Créer `services/database.ts` - Pool de connexion DB <!-- Completed 2025-01-15 -->
+```
+
+## When to Update TODO.md
+
+Update the TODO immediately after:
+- Creating/modifying files mentioned in tasks
+- Implementing features described in tasks  
+- Completing configuration steps
+- Finishing any work item listed in the TODO
+
+## Task Dependencies
+
+When completing tasks, consider:
+- **Parent tasks**: Mark parent complete only when ALL sub-tasks are done
+- **Blocking tasks**: Some tasks may unblock others - mention this in updates
+- **Phase completion**: Note when entire phases are completed
+
+## Progress Tracking
+
+Always maintain visibility of:
+- Current phase progress
+- Next logical task to tackle
+- Any blockers or issues encountered
+- Completed vs remaining work ratio
+
+This ensures the TODO.md remains an accurate reflection of project progress and helps maintain momentum.

.env

@@ -5,8 +5,28 @@
 # Prisma supports the native connection string format for PostgreSQL, MySQL, SQLite, SQL Server, MongoDB and CockroachDB.
 # See the documentation for all the connection string options: https://pris.ly/d/connection-strings
 
-DATABASE_URL="file:./data/dev.db"
-AUTH_SECRET="your-secret-key-change-this-in-production"
-AUTH_URL="http://localhost:3000"
-PRISMA_DATA_PATH="/Users/julien.froidefond/Sites/DAIS/got-mc/data"
-UPLOADS_PATH="/Users/julien.froidefond/Sites/DAIS/got-mc/public/uploads"
+# DATABASE_URL="file:./data/dev.db"
+# AUTH_SECRET="your-secret-key-change-this-in-production"
+# AUTH_URL="http://localhost:3000"
+# PRISMA_DATA_PATH="/Users/julien.froidefond/Sites/DAIS/public/got-gaming/data"
+# UPLOADS_PATH="/Users/julien.froidefond/Sites/DAIS/public/got-gaming/public/uploads"
+
+# NextAuth Configuration
+NEXTAUTH_SECRET=change-this-secret-in-production
+NEXTAUTH_URL=http://localhost:3000
+
+# PostgreSQL Configuration
+POSTGRES_USER=gotgaming
+POSTGRES_PASSWORD=change-this-in-production
+POSTGRES_DB=gotgaming
+POSTGRES_HOST=localhost
+POSTGRES_PORT=5433
+
+# Database URL (construite automatiquement si non définie)
+# Si vous définissez cette variable, elle sera utilisée telle quelle
+# Sinon, elle sera construite à partir des variables POSTGRES_* ci-dessus
+DATABASE_URL=postgresql://gotgaming:change-this-in-production@localhost:5433/gotgaming?schema=public
+
+# Docker Volumes (optionnel)
+POSTGRES_DATA_PATH=./data/postgres
+UPLOADS_PATH=./public/uploads

.env.example

@@ -0,0 +1,19 @@
+# NextAuth Configuration
+NEXTAUTH_SECRET=change-this-secret-in-production
+NEXTAUTH_URL=http://localhost:3000
+
+# PostgreSQL Configuration
+POSTGRES_USER=gotgaming
+POSTGRES_PASSWORD=change-this-in-production
+POSTGRES_DB=gotgaming
+POSTGRES_HOST=got-postgres
+POSTGRES_PORT=5432
+
+# Database URL (construite automatiquement si non définie)
+# Si vous définissez cette variable, elle sera utilisée telle quelle
+# Sinon, elle sera construite à partir des variables POSTGRES_* ci-dessus
+# DATABASE_URL=postgresql://gotgaming:change-this-in-production@got-postgres:5432/gotgaming?schema=public
+
+# Docker Volumes (optionnel)
+POSTGRES_DATA_PATH=./data/postgres
+UPLOADS_PATH=./public/uploads

.gitea/workflows/deploy.yml

@@ -20,5 +20,7 @@ jobs:
           NEXTAUTH_SECRET: ${{ secrets.NEXTAUTH_SECRET }}
           PRISMA_DATA_PATH: ${{ vars.PRISMA_DATA_PATH }}
           UPLOADS_PATH: ${{ vars.UPLOADS_PATH }}
+          POSTGRES_DATA_PATH: ${{ vars.POSTGRES_DATA_PATH }}
+          POSTGRES_PASSWORD: ${{ secrets.POSTGRES_PASSWORD }}
         run: |
           docker compose up -d --build

.gitignore

@@ -25,6 +25,7 @@ yarn-debug.log*
 yarn-error.log*
 
 # local env files
+.env
 .env*.local
 
 # vercel
@@ -41,3 +42,9 @@ dev.db*
 
 # prisma
 /app/generated/prisma
+prisma/generated/
+
+# database data
+data/postgres/
+data/*.db
+data/*.db-journal

Dockerfile

@@ -6,7 +6,8 @@ WORKDIR /app
 RUN corepack enable && corepack prepare pnpm@latest --activate
 
 COPY package.json pnpm-lock.yaml ./
-RUN pnpm install --frozen-lockfile
+RUN --mount=type=cache,id=pnpm-store,target=/root/.local/share/pnpm/store \
+    pnpm install --frozen-lockfile
 
 # Stage 2: Builder
 FROM node:20-alpine AS builder
@@ -18,7 +19,9 @@ RUN corepack enable && corepack prepare pnpm@latest --activate
 COPY --from=deps /app/node_modules ./node_modules
 COPY . .
 
-ENV DATABASE_URL="file:/tmp/build.db"
+# ARG pour DATABASE_URL au build (valeur factice par défaut, car prisma generate n'a pas besoin de vraie DB)
+ARG DATABASE_URL_BUILD="postgresql://user:pass@localhost:5432/db"
+ENV DATABASE_URL=$DATABASE_URL_BUILD
 RUN pnpm prisma generate
 
 ENV NEXT_TELEMETRY_DISABLED=1
@@ -44,27 +47,41 @@ COPY --from=builder --chown=nextjs:nodejs /app/public ./public
 COPY --from=builder /app/package.json ./package.json
 COPY --from=builder /app/pnpm-lock.yaml ./pnpm-lock.yaml
 COPY --from=builder /app/next.config.js ./next.config.js
-COPY --from=builder /app/prisma ./prisma
-COPY --from=builder /app/prisma.config.ts ./prisma.config.ts
-
-ENV DATABASE_URL="file:/tmp/build.db"
+# Copier le répertoire prisma complet (schema + migrations)
+COPY --from=builder --chown=nextjs:nodejs /app/prisma ./prisma
+# Copier prisma.config.ts (nécessaire pour Prisma 7)
+COPY --from=builder --chown=nextjs:nodejs /app/prisma.config.ts ./prisma.config.ts
 
 # Installer seulement les dépendances de production puis générer Prisma Client
-RUN pnpm install --frozen-lockfile --prod && \
+# ARG pour DATABASE_URL au build (valeur factice par défaut, car prisma generate n'a pas besoin de vraie DB)
+# Au runtime, DATABASE_URL sera définie par docker-compose.yml (voir ligne 41)
+ARG DATABASE_URL_BUILD="postgresql://user:pass@localhost:5432/db"
+ENV DATABASE_URL=$DATABASE_URL_BUILD
+RUN --mount=type=cache,id=pnpm-store,target=/root/.local/share/pnpm/store \
+    pnpm install --frozen-lockfile --prod && \
     pnpm dlx prisma generate
+# Ne pas définir ENV DATABASE_URL ici - elle sera définie par docker-compose.yml au runtime
 
-ENV DATABASE_URL="file:/app/data/dev.db"
-
-# Create data directory for SQLite database and uploads directories
-RUN mkdir -p /app/data /app/public/uploads /app/public/uploads/backgrounds && \
-    chown -R nextjs:nodejs /app/data /app/public/uploads
+# Create uploads directories
+RUN mkdir -p /app/public/uploads /app/public/uploads/backgrounds && \
+    chown -R nextjs:nodejs /app/public/uploads
 
 RUN echo '#!/bin/sh' > /app/entrypoint.sh && \
     echo 'set -e' >> /app/entrypoint.sh && \
-    echo 'mkdir -p /app/data' >> /app/entrypoint.sh && \
     echo 'mkdir -p /app/public/uploads' >> /app/entrypoint.sh && \
     echo 'mkdir -p /app/public/uploads/backgrounds' >> /app/entrypoint.sh && \
-    echo 'pnpm dlx prisma migrate deploy || true' >> /app/entrypoint.sh && \
+    echo 'if [ -z "$DATABASE_URL" ]; then' >> /app/entrypoint.sh && \
+    echo '  echo "ERROR: DATABASE_URL is not set"' >> /app/entrypoint.sh && \
+    echo '  exit 1' >> /app/entrypoint.sh && \
+    echo 'fi' >> /app/entrypoint.sh && \
+    echo 'export DATABASE_URL' >> /app/entrypoint.sh && \
+    echo 'cd /app' >> /app/entrypoint.sh && \
+    echo 'echo "Applying migrations..."' >> /app/entrypoint.sh && \
+    echo 'if ! pnpm dlx prisma migrate deploy; then' >> /app/entrypoint.sh && \
+    echo '  echo "Migration failed. Attempting to resolve failed migration..."' >> /app/entrypoint.sh && \
+    echo '  pnpm dlx prisma migrate resolve --applied 20251217101717_init_postgres 2>/dev/null || true' >> /app/entrypoint.sh && \
+    echo '  pnpm dlx prisma migrate deploy || echo "WARNING: Some migrations may need manual resolution"' >> /app/entrypoint.sh && \
+    echo 'fi' >> /app/entrypoint.sh && \
     echo 'exec pnpm start' >> /app/entrypoint.sh && \
     chmod +x /app/entrypoint.sh && \
     chown nextjs:nodejs /app/entrypoint.sh
@@ -74,6 +91,5 @@ USER nextjs
 EXPOSE 3000
 ENV PORT=3000
 ENV HOSTNAME="0.0.0.0"
-ENV DATABASE_URL="file:/app/data/dev.db"
 
 ENTRYPOINT ["./entrypoint.sh"]

README.docker.md

@@ -24,26 +24,48 @@ docker-compose logs -f
 
 ## Variables d'environnement
 
-Créez un fichier `.env` à la racine du projet avec les variables suivantes :
+Créez un fichier `.env` à la racine du projet à partir du template `.env.example` :
+
+```bash
+cp .env.example .env
+```
+
+Puis modifiez les valeurs dans `.env` selon votre configuration :
 
 ```env
+# NextAuth Configuration
 NEXTAUTH_SECRET=your-secret-key-here
 NEXTAUTH_URL=http://localhost:3000
-DATABASE_URL=file:./prisma/dev.db
+
+# PostgreSQL Configuration
+POSTGRES_USER=gotgaming
+POSTGRES_PASSWORD=change-this-in-production
+POSTGRES_DB=gotgaming
+
+# Database URL (optionnel - construite automatiquement si non définie)
+# DATABASE_URL=postgresql://gotgaming:change-this-in-production@got-postgres:5432/gotgaming?schema=public
+
+# Docker Volumes (optionnel)
+POSTGRES_DATA_PATH=./data/postgres
+UPLOADS_PATH=./public/uploads
 ```
 
+**Important** : 
+- Le fichier `.env` est ignoré par Git (ne pas commiter vos secrets)
+- Si vous changez `POSTGRES_PASSWORD` après la première initialisation, vous devrez soit réinitialiser la base, soit changer le mot de passe manuellement dans PostgreSQL
+
 ## Volumes persistants
 
-### Base de données
+### Base de données PostgreSQL
 
-La base de données SQLite est persistée via un volume Docker. Par défaut, elle est stockée dans `/Volumes/EXTERNAL_USB/sites/got-gaming/data`, mais vous pouvez la personnaliser avec la variable d'environnement `PRISMA_DATA_PATH`.
+La base de données PostgreSQL est persistée via un volume Docker. Par défaut, elle est stockée dans `./data/postgres`, mais vous pouvez la personnaliser avec la variable d'environnement `POSTGRES_DATA_PATH`.
 
 Les migrations Prisma sont appliquées automatiquement au démarrage du conteneur.
 
 Pour appliquer manuellement les migrations :
 
 ```bash
-docker-compose exec got-app node node_modules/.bin/prisma migrate deploy
+docker-compose exec got-app pnpm dlx prisma migrate deploy
 ```
 
 ### Images uploadées

README.md

@@ -41,5 +41,5 @@ pnpm start
 - React 18
 - TypeScript
 - Tailwind CSS
-- Prisma (SQLite)
+- Prisma (PostgreSQL)
 - NextAuth.js

actions/admin/challenges.ts

@@ -0,0 +1,270 @@
+"use server";
+
+import { revalidatePath } from "next/cache";
+import { auth } from "@/lib/auth";
+import { challengeService } from "@/services/challenges/challenge.service";
+import { Role } from "@/prisma/generated/prisma/client";
+import { ValidationError, NotFoundError } from "@/services/errors";
+
+async function checkAdminAccess() {
+  const session = await auth();
+  if (!session?.user || session.user.role !== Role.ADMIN) {
+    throw new Error("Accès refusé - Admin uniquement");
+  }
+  return session;
+}
+
+export async function validateChallenge(
+  challengeId: string,
+  winnerId: string,
+  adminComment?: string
+) {
+  try {
+    const session = await checkAdminAccess();
+
+    const challenge = await challengeService.validateChallenge(
+      challengeId,
+      session.user.id,
+      winnerId,
+      adminComment
+    );
+
+    revalidatePath("/admin");
+    revalidatePath("/challenges");
+    revalidatePath("/leaderboard");
+
+    return {
+      success: true,
+      message: "Défi validé avec succès",
+      data: challenge,
+    };
+  } catch (error) {
+    console.error("Validate challenge error:", error);
+
+    if (error instanceof ValidationError) {
+      return { success: false, error: error.message };
+    }
+    if (error instanceof NotFoundError) {
+      return { success: false, error: error.message };
+    }
+    if (error instanceof Error && error.message.includes("Accès refusé")) {
+      return { success: false, error: error.message };
+    }
+
+    return {
+      success: false,
+      error: "Une erreur est survenue lors de la validation du défi",
+    };
+  }
+}
+
+export async function rejectChallenge(
+  challengeId: string,
+  adminComment?: string
+) {
+  try {
+    const session = await checkAdminAccess();
+
+    const challenge = await challengeService.rejectChallenge(
+      challengeId,
+      session.user.id,
+      adminComment
+    );
+
+    revalidatePath("/admin");
+    revalidatePath("/challenges");
+
+    return { success: true, message: "Défi rejeté", data: challenge };
+  } catch (error) {
+    console.error("Reject challenge error:", error);
+
+    if (error instanceof ValidationError) {
+      return { success: false, error: error.message };
+    }
+    if (error instanceof NotFoundError) {
+      return { success: false, error: error.message };
+    }
+    if (error instanceof Error && error.message.includes("Accès refusé")) {
+      return { success: false, error: error.message };
+    }
+
+    return {
+      success: false,
+      error: "Une erreur est survenue lors du rejet du défi",
+    };
+  }
+}
+
+export async function updateChallenge(
+  challengeId: string,
+  data: {
+    title?: string;
+    description?: string;
+    pointsReward?: number;
+  }
+) {
+  try {
+    await checkAdminAccess();
+
+    const challenge = await challengeService.updateChallenge(challengeId, {
+      title: data.title,
+      description: data.description,
+      pointsReward: data.pointsReward,
+    });
+
+    revalidatePath("/admin");
+    revalidatePath("/challenges");
+
+    return {
+      success: true,
+      message: "Défi mis à jour avec succès",
+      data: challenge,
+    };
+  } catch (error) {
+    console.error("Update challenge error:", error);
+
+    if (error instanceof ValidationError) {
+      return { success: false, error: error.message };
+    }
+    if (error instanceof NotFoundError) {
+      return { success: false, error: error.message };
+    }
+    if (error instanceof Error && error.message.includes("Accès refusé")) {
+      return { success: false, error: error.message };
+    }
+
+    return {
+      success: false,
+      error: "Une erreur est survenue lors de la mise à jour du défi",
+    };
+  }
+}
+
+export async function deleteChallenge(challengeId: string) {
+  try {
+    await checkAdminAccess();
+
+    await challengeService.deleteChallenge(challengeId);
+
+    revalidatePath("/admin");
+    revalidatePath("/challenges");
+
+    return { success: true, message: "Défi supprimé avec succès" };
+  } catch (error) {
+    console.error("Delete challenge error:", error);
+
+    if (error instanceof NotFoundError) {
+      return { success: false, error: error.message };
+    }
+    if (error instanceof Error && error.message.includes("Accès refusé")) {
+      return { success: false, error: error.message };
+    }
+
+    return {
+      success: false,
+      error: "Une erreur est survenue lors de la suppression du défi",
+    };
+  }
+}
+
+export async function adminCancelChallenge(challengeId: string) {
+  try {
+    await checkAdminAccess();
+
+    const challenge = await challengeService.adminCancelChallenge(challengeId);
+
+    revalidatePath("/admin");
+    revalidatePath("/challenges");
+
+    return {
+      success: true,
+      message: "Défi annulé avec succès",
+      data: challenge,
+    };
+  } catch (error) {
+    console.error("Admin cancel challenge error:", error);
+
+    if (error instanceof ValidationError) {
+      return { success: false, error: error.message };
+    }
+    if (error instanceof NotFoundError) {
+      return { success: false, error: error.message };
+    }
+    if (error instanceof Error && error.message.includes("Accès refusé")) {
+      return { success: false, error: error.message };
+    }
+
+    return {
+      success: false,
+      error: "Une erreur est survenue lors de l'annulation du défi",
+    };
+  }
+}
+
+export async function reactivateChallenge(challengeId: string) {
+  try {
+    await checkAdminAccess();
+
+    const challenge = await challengeService.reactivateChallenge(challengeId);
+
+    revalidatePath("/admin");
+    revalidatePath("/challenges");
+
+    return {
+      success: true,
+      message: "Défi réactivé avec succès",
+      data: challenge,
+    };
+  } catch (error) {
+    console.error("Reactivate challenge error:", error);
+
+    if (error instanceof ValidationError) {
+      return { success: false, error: error.message };
+    }
+    if (error instanceof NotFoundError) {
+      return { success: false, error: error.message };
+    }
+    if (error instanceof Error && error.message.includes("Accès refusé")) {
+      return { success: false, error: error.message };
+    }
+
+    return {
+      success: false,
+      error: "Une erreur est survenue lors de la réactivation du défi",
+    };
+  }
+}
+
+export async function adminAcceptChallenge(challengeId: string) {
+  try {
+    await checkAdminAccess();
+
+    const challenge = await challengeService.adminAcceptChallenge(challengeId);
+
+    revalidatePath("/admin");
+    revalidatePath("/challenges");
+
+    return {
+      success: true,
+      message: "Défi accepté avec succès",
+      data: challenge,
+    };
+  } catch (error) {
+    console.error("Admin accept challenge error:", error);
+
+    if (error instanceof ValidationError) {
+      return { success: false, error: error.message };
+    }
+    if (error instanceof NotFoundError) {
+      return { success: false, error: error.message };
+    }
+    if (error instanceof Error && error.message.includes("Accès refusé")) {
+      return { success: false, error: error.message };
+    }
+
+    return {
+      success: false,
+      error: "Une erreur est survenue lors de l'acceptation du défi",
+    };
+  }
+}

actions/admin/events.ts

@@ -0,0 +1,142 @@
+"use server";
+
+import { revalidatePath } from "next/cache";
+import { auth } from "@/lib/auth";
+import { eventService } from "@/services/events/event.service";
+import { Role, EventType } from "@/prisma/generated/prisma/client";
+import { ValidationError, NotFoundError } from "@/services/errors";
+
+function checkAdminAccess() {
+  return async () => {
+    const session = await auth();
+    if (!session?.user || session.user.role !== Role.ADMIN) {
+      throw new Error("Accès refusé");
+    }
+    return session;
+  };
+}
+
+export async function createEvent(data: {
+  date: string;
+  name: string;
+  description?: string | null;
+  type: string;
+  room?: string | null;
+  time?: string | null;
+  maxPlaces?: number | null;
+}) {
+  try {
+    await checkAdminAccess()();
+
+    const event = await eventService.validateAndCreateEvent({
+      date: data.date,
+      name: data.name,
+      description: data.description ?? "",
+      type: data.type as EventType,
+      room: data.room ?? undefined,
+      time: data.time ?? undefined,
+      maxPlaces: data.maxPlaces ?? undefined,
+    });
+
+    revalidatePath("/admin");
+    revalidatePath("/events");
+    revalidatePath("/");
+
+    return { success: true, data: event };
+  } catch (error) {
+    console.error("Error creating event:", error);
+
+    if (error instanceof ValidationError) {
+      return { success: false, error: error.message };
+    }
+    if (error instanceof Error && error.message === "Accès refusé") {
+      return { success: false, error: "Accès refusé" };
+    }
+
+    return {
+      success: false,
+      error: "Erreur lors de la création de l'événement",
+    };
+  }
+}
+
+export async function updateEvent(
+  eventId: string,
+  data: {
+    date?: string;
+    name?: string;
+    description?: string | null;
+    type?: string;
+    room?: string | null;
+    time?: string | null;
+    maxPlaces?: number | null;
+  }
+) {
+  try {
+    await checkAdminAccess()();
+
+    const event = await eventService.validateAndUpdateEvent(eventId, {
+      date: data.date,
+      name: data.name,
+      description: data.description ?? undefined,
+      type: data.type as EventType,
+      room: data.room ?? undefined,
+      time: data.time ?? undefined,
+      maxPlaces: data.maxPlaces ?? undefined,
+    });
+
+    revalidatePath("/admin");
+    revalidatePath("/events");
+    revalidatePath("/");
+
+    return { success: true, data: event };
+  } catch (error) {
+    console.error("Error updating event:", error);
+
+    if (error instanceof ValidationError) {
+      return { success: false, error: error.message };
+    }
+    if (error instanceof NotFoundError) {
+      return { success: false, error: error.message };
+    }
+    if (error instanceof Error && error.message === "Accès refusé") {
+      return { success: false, error: "Accès refusé" };
+    }
+
+    return {
+      success: false,
+      error: "Erreur lors de la mise à jour de l'événement",
+    };
+  }
+}
+
+export async function deleteEvent(eventId: string) {
+  try {
+    await checkAdminAccess()();
+
+    const existingEvent = await eventService.getEventById(eventId);
+
+    if (!existingEvent) {
+      return { success: false, error: "Événement non trouvé" };
+    }
+
+    await eventService.deleteEvent(eventId);
+
+    revalidatePath("/admin");
+    revalidatePath("/events");
+    revalidatePath("/");
+
+    return { success: true };
+  } catch (error) {
+    console.error("Error deleting event:", error);
+
+    if (error instanceof Error && error.message === "Accès refusé") {
+      return { success: false, error: "Accès refusé" };
+    }
+
+    return {
+      success: false,
+      error: "Erreur lors de la suppression de l'événement",
+    };
+  }
+}

actions/admin/feedback.ts

@@ -0,0 +1,127 @@
+"use server";
+
+import { revalidatePath } from "next/cache";
+import { auth } from "@/lib/auth";
+import { prisma } from "@/services/database";
+import { Role } from "@/prisma/generated/prisma/client";
+import { NotFoundError } from "@/services/errors";
+
+function checkAdminAccess() {
+  return async () => {
+    const session = await auth();
+    if (!session?.user || session.user.role !== Role.ADMIN) {
+      throw new Error("Accès refusé");
+    }
+    return session;
+  };
+}
+
+export async function addFeedbackBonusPoints(
+  userId: string,
+  points: number
+) {
+  try {
+    await checkAdminAccess()();
+
+    // Vérifier que l'utilisateur existe
+    const user = await prisma.user.findUnique({
+      where: { id: userId },
+      select: { id: true, score: true },
+    });
+
+    if (!user) {
+      throw new NotFoundError("Utilisateur");
+    }
+
+    // Ajouter les points
+    const updatedUser = await prisma.user.update({
+      where: { id: userId },
+      data: {
+        score: {
+          increment: points,
+        },
+      },
+      select: {
+        id: true,
+        username: true,
+        score: true,
+      },
+    });
+
+    revalidatePath("/admin");
+    revalidatePath("/leaderboard");
+
+    return {
+      success: true,
+      message: `${points} points ajoutés avec succès`,
+      data: updatedUser,
+    };
+  } catch (error) {
+    console.error("Error adding bonus points:", error);
+
+    if (error instanceof NotFoundError) {
+      return { success: false, error: error.message };
+    }
+    if (error instanceof Error && error.message === "Accès refusé") {
+      return { success: false, error: "Accès refusé" };
+    }
+
+    return {
+      success: false,
+      error: "Erreur lors de l'ajout des points",
+    };
+  }
+}
+
+export async function markFeedbackAsRead(feedbackId: string, isRead: boolean) {
+  try {
+    await checkAdminAccess()();
+
+    // Vérifier que le feedback existe
+    const feedback = await prisma.eventFeedback.findUnique({
+      where: { id: feedbackId },
+      select: { id: true },
+    });
+
+    if (!feedback) {
+      throw new NotFoundError("Feedback");
+    }
+
+    // Mettre à jour le statut
+    const updatedFeedback = await prisma.eventFeedback.update({
+      where: { id: feedbackId },
+      data: {
+        isRead,
+      },
+      select: {
+        id: true,
+        isRead: true,
+      },
+    });
+
+    revalidatePath("/admin");
+
+    return {
+      success: true,
+      message: isRead
+        ? "Feedback marqué comme lu"
+        : "Feedback marqué comme non lu",
+      data: updatedFeedback,
+    };
+  } catch (error) {
+    console.error("Error marking feedback as read:", error);
+
+    if (error instanceof NotFoundError) {
+      return { success: false, error: error.message };
+    }
+    if (error instanceof Error && error.message === "Accès refusé") {
+      return { success: false, error: "Accès refusé" };
+    }
+
+    return {
+      success: false,
+      error: "Erreur lors de la mise à jour du feedback",
+    };
+  }
+}
+

actions/admin/houses.ts

@@ -0,0 +1,139 @@
+"use server";
+
+import { revalidatePath } from "next/cache";
+import { auth } from "@/lib/auth";
+import { houseService } from "@/services/houses/house.service";
+import { Role } from "@/prisma/generated/prisma/client";
+import {
+  ValidationError,
+  NotFoundError,
+  ConflictError,
+  ForbiddenError,
+} from "@/services/errors";
+
+function checkAdminAccess() {
+  return async () => {
+    const session = await auth();
+    if (!session?.user || session.user.role !== Role.ADMIN) {
+      throw new Error("Accès refusé");
+    }
+    return session;
+  };
+}
+
+export async function updateHouse(
+  houseId: string,
+  data: {
+    name?: string;
+    description?: string | null;
+  }
+) {
+  try {
+    await checkAdminAccess()();
+
+    // L'admin peut modifier n'importe quelle maison sans vérifier les permissions normales
+    // On utilise directement le service mais on bypass les vérifications de propriétaire/admin
+    const house = await houseService.getHouseById(houseId);
+    if (!house) {
+      return { success: false, error: "Maison non trouvée" };
+    }
+
+    // Utiliser le service avec le creatorId pour bypass les vérifications
+    const updatedHouse = await houseService.updateHouse(
+      houseId,
+      house.creatorId, // Utiliser le creatorId pour bypass
+      data
+    );
+
+    revalidatePath("/admin");
+    revalidatePath("/houses");
+
+    return { success: true, data: updatedHouse };
+  } catch (error) {
+    console.error("Error updating house:", error);
+
+    if (error instanceof ValidationError) {
+      return { success: false, error: error.message };
+    }
+    if (error instanceof ConflictError) {
+      return { success: false, error: error.message };
+    }
+    if (error instanceof Error && error.message === "Accès refusé") {
+      return { success: false, error: "Accès refusé" };
+    }
+
+    return {
+      success: false,
+      error: "Erreur lors de la mise à jour de la maison",
+    };
+  }
+}
+
+export async function deleteHouse(houseId: string) {
+  try {
+    await checkAdminAccess()();
+
+    const house = await houseService.getHouseById(houseId);
+    if (!house) {
+      return { success: false, error: "Maison non trouvée" };
+    }
+
+    // L'admin peut supprimer n'importe quelle maison
+    // On utilise le creatorId pour bypass les vérifications
+    await houseService.deleteHouse(houseId, house.creatorId);
+
+    revalidatePath("/admin");
+    revalidatePath("/houses");
+
+    return { success: true };
+  } catch (error) {
+    console.error("Error deleting house:", error);
+
+    if (error instanceof NotFoundError) {
+      return { success: false, error: error.message };
+    }
+    if (error instanceof ForbiddenError) {
+      return { success: false, error: error.message };
+    }
+    if (error instanceof Error && error.message === "Accès refusé") {
+      return { success: false, error: "Accès refusé" };
+    }
+
+    return {
+      success: false,
+      error: "Erreur lors de la suppression de la maison",
+    };
+  }
+}
+
+export async function removeMember(houseId: string, memberId: string) {
+  try {
+    await checkAdminAccess()();
+
+    // L'admin peut retirer n'importe quel membre (sauf le propriétaire)
+    await houseService.removeMemberAsAdmin(houseId, memberId);
+
+    revalidatePath("/admin");
+    revalidatePath("/houses");
+
+    return { success: true, message: "Membre retiré de la maison" };
+  } catch (error) {
+    console.error("Error removing member:", error);
+
+    if (error instanceof NotFoundError) {
+      return { success: false, error: error.message };
+    }
+    if (error instanceof ForbiddenError) {
+      return { success: false, error: error.message };
+    }
+    if (error instanceof Error && error.message === "Accès refusé") {
+      return { success: false, error: "Accès refusé" };
+    }
+
+    return {
+      success: false,
+      error: "Erreur lors du retrait du membre",
+    };
+  }
+}
+

actions/admin/preferences.ts

@@ -0,0 +1,69 @@
+"use server";
+
+import { revalidatePath } from "next/cache";
+import { auth } from "@/lib/auth";
+import { sitePreferencesService } from "@/services/preferences/site-preferences.service";
+import { Role } from "@/prisma/generated/prisma/client";
+
+function checkAdminAccess() {
+  return async () => {
+    const session = await auth();
+    if (!session?.user || session.user.role !== Role.ADMIN) {
+      throw new Error("Accès refusé");
+    }
+    return session;
+  };
+}
+
+export async function updateSitePreferences(data: {
+  homeBackground?: string | null;
+  eventsBackground?: string | null;
+  leaderboardBackground?: string | null;
+  challengesBackground?: string | null;
+  profileBackground?: string | null;
+  houseBackground?: string | null;
+  eventRegistrationPoints?: number;
+  eventFeedbackPoints?: number;
+  houseJoinPoints?: number;
+  houseLeavePoints?: number;
+  houseCreatePoints?: number;
+}) {
+  try {
+    await checkAdminAccess()();
+
+    const preferences = await sitePreferencesService.updateSitePreferences({
+      homeBackground: data.homeBackground,
+      eventsBackground: data.eventsBackground,
+      leaderboardBackground: data.leaderboardBackground,
+      challengesBackground: data.challengesBackground,
+      profileBackground: data.profileBackground,
+      houseBackground: data.houseBackground,
+      eventRegistrationPoints: data.eventRegistrationPoints,
+      eventFeedbackPoints: data.eventFeedbackPoints,
+      houseJoinPoints: data.houseJoinPoints,
+      houseLeavePoints: data.houseLeavePoints,
+      houseCreatePoints: data.houseCreatePoints,
+    });
+
+    revalidatePath("/admin");
+    revalidatePath("/");
+    revalidatePath("/events");
+    revalidatePath("/leaderboard");
+    revalidatePath("/challenges");
+    revalidatePath("/profile");
+    revalidatePath("/houses");
+
+    return { success: true, data: preferences };
+  } catch (error) {
+    console.error("Error updating admin preferences:", error);
+
+    if (error instanceof Error && error.message === "Accès refusé") {
+      return { success: false, error: "Accès refusé" };
+    }
+
+    return {
+      success: false,
+      error: "Erreur lors de la mise à jour des préférences",
+    };
+  }
+}

actions/admin/users.ts

@@ -0,0 +1,129 @@
+"use server";
+
+import { revalidatePath } from "next/cache";
+import { auth } from "@/lib/auth";
+import { userService } from "@/services/users/user.service";
+import { userStatsService } from "@/services/users/user-stats.service";
+import { Role } from "@/prisma/generated/prisma/client";
+import {
+  ValidationError,
+  NotFoundError,
+  ConflictError,
+} from "@/services/errors";
+
+function checkAdminAccess() {
+  return async () => {
+    const session = await auth();
+    if (!session?.user || session.user.role !== Role.ADMIN) {
+      throw new Error("Accès refusé");
+    }
+    return session;
+  };
+}
+
+export async function updateUser(
+  userId: string,
+  data: {
+    username?: string;
+    avatar?: string | null;
+    hpDelta?: number;
+    xpDelta?: number;
+    score?: number;
+    level?: number;
+    role?: string;
+  }
+) {
+  try {
+    await checkAdminAccess()();
+
+    // Valider username si fourni
+    if (data.username !== undefined) {
+      try {
+        await userService.validateAndUpdateUserProfile(userId, {
+          username: data.username,
+        });
+      } catch (error) {
+        if (
+          error instanceof ValidationError ||
+          error instanceof ConflictError
+        ) {
+          return { success: false, error: error.message };
+        }
+        throw error;
+      }
+    }
+
+    // Mettre à jour stats et profil
+    const updatedUser = await userStatsService.updateUserStatsAndProfile(
+      userId,
+      {
+        username: data.username,
+        avatar: data.avatar,
+        hpDelta: data.hpDelta,
+        xpDelta: data.xpDelta,
+        score: data.score,
+        level: data.level,
+        role: data.role ? (data.role as Role) : undefined,
+      },
+      {
+        id: true,
+        username: true,
+        email: true,
+        role: true,
+        score: true,
+        level: true,
+        hp: true,
+        maxHp: true,
+        xp: true,
+        maxXp: true,
+        avatar: true,
+      }
+    );
+
+    revalidatePath("/admin");
+    revalidatePath("/leaderboard");
+
+    return { success: true, data: updatedUser };
+  } catch (error) {
+    console.error("Error updating user:", error);
+
+    if (error instanceof Error && error.message === "Accès refusé") {
+      return { success: false, error: "Accès refusé" };
+    }
+
+    return {
+      success: false,
+      error: "Erreur lors de la mise à jour de l'utilisateur",
+    };
+  }
+}
+
+export async function deleteUser(userId: string) {
+  try {
+    const session = await checkAdminAccess()();
+
+    await userService.validateAndDeleteUser(userId, session.user.id);
+
+    revalidatePath("/admin");
+    revalidatePath("/leaderboard");
+
+    return { success: true };
+  } catch (error) {
+    console.error("Error deleting user:", error);
+
+    if (error instanceof ValidationError) {
+      return { success: false, error: error.message };
+    }
+    if (error instanceof NotFoundError) {
+      return { success: false, error: error.message };
+    }
+    if (error instanceof Error && error.message === "Accès refusé") {
+      return { success: false, error: "Accès refusé" };
+    }
+
+    return {
+      success: false,
+      error: "Erreur lors de la suppression de l'utilisateur",
+    };
+  }
+}

actions/challenges/create.ts

@@ -0,0 +1,131 @@
+"use server";
+
+import { revalidatePath } from "next/cache";
+import { auth } from "@/lib/auth";
+import { challengeService } from "@/services/challenges/challenge.service";
+import {
+  ValidationError,
+  NotFoundError,
+  ConflictError,
+} from "@/services/errors";
+
+export async function createChallenge(data: {
+  challengedId: string;
+  title: string;
+  description: string;
+  pointsReward?: number;
+}) {
+  try {
+    const session = await auth();
+
+    if (!session?.user?.id) {
+      return {
+        success: false,
+        error: "Vous devez être connecté pour créer un défi",
+      };
+    }
+
+    const challenge = await challengeService.createChallenge({
+      challengerId: session.user.id,
+      challengedId: data.challengedId,
+      title: data.title,
+      description: data.description,
+      pointsReward: data.pointsReward || 100,
+    });
+
+    revalidatePath("/challenges");
+    revalidatePath("/profile");
+
+    return { success: true, message: "Défi créé avec succès", data: challenge };
+  } catch (error) {
+    console.error("Create challenge error:", error);
+
+    if (error instanceof ValidationError || error instanceof ConflictError) {
+      return { success: false, error: error.message };
+    }
+    if (error instanceof NotFoundError) {
+      return { success: false, error: error.message };
+    }
+
+    return {
+      success: false,
+      error: "Une erreur est survenue lors de la création du défi",
+    };
+  }
+}
+
+export async function acceptChallenge(challengeId: string) {
+  try {
+    const session = await auth();
+
+    if (!session?.user?.id) {
+      return {
+        success: false,
+        error: "Vous devez être connecté pour accepter un défi",
+      };
+    }
+
+    const challenge = await challengeService.acceptChallenge(
+      challengeId,
+      session.user.id
+    );
+
+    revalidatePath("/challenges");
+    revalidatePath("/profile");
+
+    return { success: true, message: "Défi accepté", data: challenge };
+  } catch (error) {
+    console.error("Accept challenge error:", error);
+
+    if (error instanceof ValidationError) {
+      return { success: false, error: error.message };
+    }
+    if (error instanceof NotFoundError) {
+      return { success: false, error: error.message };
+    }
+
+    return {
+      success: false,
+      error: "Une erreur est survenue lors de l'acceptation du défi",
+    };
+  }
+}
+
+export async function cancelChallenge(challengeId: string) {
+  try {
+    const session = await auth();
+
+    if (!session?.user?.id) {
+      return {
+        success: false,
+        error: "Vous devez être connecté pour annuler un défi",
+      };
+    }
+
+    const challenge = await challengeService.cancelChallenge(
+      challengeId,
+      session.user.id
+    );
+
+    revalidatePath("/challenges");
+    revalidatePath("/profile");
+
+    return { success: true, message: "Défi annulé", data: challenge };
+  } catch (error) {
+    console.error("Cancel challenge error:", error);
+
+    if (error instanceof ValidationError) {
+      return { success: false, error: error.message };
+    }
+    if (error instanceof NotFoundError) {
+      return { success: false, error: error.message };
+    }
+
+    return {
+      success: false,
+      error: "Une erreur est survenue lors de l'annulation du défi",
+    };
+  }
+}
+
+

actions/events/feedback.ts

@@ -0,0 +1,47 @@
+"use server";
+
+import { revalidatePath } from "next/cache";
+import { auth } from "@/lib/auth";
+import { eventFeedbackService } from "@/services/events/event-feedback.service";
+import { ValidationError, NotFoundError } from "@/services/errors";
+
+export async function createFeedback(
+  eventId: string,
+  data: {
+    rating: number;
+    comment?: string | null;
+  }
+) {
+  try {
+    const session = await auth();
+
+    if (!session?.user?.id) {
+      return { success: false, error: "Non authentifié" };
+    }
+
+    const feedback = await eventFeedbackService.validateAndCreateFeedback(
+      session.user.id,
+      eventId,
+      { rating: data.rating, comment: data.comment }
+    );
+
+    revalidatePath(`/feedback/${eventId}`);
+    revalidatePath("/events");
+
+    return { success: true, data: feedback };
+  } catch (error) {
+    console.error("Error saving feedback:", error);
+
+    if (error instanceof ValidationError) {
+      return { success: false, error: error.message };
+    }
+    if (error instanceof NotFoundError) {
+      return { success: false, error: error.message };
+    }
+
+    return {
+      success: false,
+      error: "Erreur lors de l'enregistrement du feedback",
+    };
+  }
+}

actions/events/register.ts

@@ -0,0 +1,77 @@
+"use server";
+
+import { revalidatePath } from "next/cache";
+import { auth } from "@/lib/auth";
+import { eventRegistrationService } from "@/services/events/event-registration.service";
+import {
+  ValidationError,
+  NotFoundError,
+  ConflictError,
+} from "@/services/errors";
+
+export async function registerForEvent(eventId: string) {
+  try {
+    const session = await auth();
+
+    if (!session?.user?.id) {
+      return {
+        success: false,
+        error: "Vous devez être connecté pour vous inscrire",
+      };
+    }
+
+    const registration = await eventRegistrationService.validateAndRegisterUser(
+      session.user.id,
+      eventId
+    );
+
+    revalidatePath("/events");
+    revalidatePath("/");
+
+    return {
+      success: true,
+      message: "Inscription réussie",
+      data: registration,
+    };
+  } catch (error) {
+    console.error("Registration error:", error);
+
+    if (error instanceof ValidationError || error instanceof ConflictError) {
+      return { success: false, error: error.message };
+    }
+    if (error instanceof NotFoundError) {
+      return { success: false, error: error.message };
+    }
+
+    return {
+      success: false,
+      error: "Une erreur est survenue lors de l'inscription",
+    };
+  }
+}
+
+export async function unregisterFromEvent(eventId: string) {
+  try {
+    const session = await auth();
+
+    if (!session?.user?.id) {
+      return { success: false, error: "Vous devez être connecté" };
+    }
+
+    await eventRegistrationService.unregisterUserFromEvent(
+      session.user.id,
+      eventId
+    );
+
+    revalidatePath("/events");
+    revalidatePath("/");
+
+    return { success: true, message: "Inscription annulée" };
+  } catch (error) {
+    console.error("Unregistration error:", error);
+    return {
+      success: false,
+      error: "Une erreur est survenue lors de l'annulation",
+    };
+  }
+}

actions/houses/create.ts

@@ -0,0 +1,48 @@
+"use server";
+
+import { revalidatePath } from "next/cache";
+import { auth } from "@/lib/auth";
+import { houseService } from "@/services/houses/house.service";
+import {
+  ValidationError,
+  ConflictError,
+} from "@/services/errors";
+
+export async function createHouse(data: {
+  name: string;
+  description?: string | null;
+}) {
+  try {
+    const session = await auth();
+
+    if (!session?.user?.id) {
+      return {
+        success: false,
+        error: "Vous devez être connecté pour créer une maison",
+      };
+    }
+
+    const house = await houseService.createHouse({
+      name: data.name,
+      description: data.description,
+      creatorId: session.user.id,
+    });
+
+    revalidatePath("/houses");
+    revalidatePath("/profile");
+
+    return { success: true, message: "Maison créée avec succès", data: house };
+  } catch (error) {
+    console.error("Create house error:", error);
+
+    if (error instanceof ValidationError || error instanceof ConflictError) {
+      return { success: false, error: error.message };
+    }
+
+    return {
+      success: false,
+      error: "Une erreur est survenue lors de la création de la maison",
+    };
+  }
+}
+

actions/houses/invitations.ts

@@ -0,0 +1,173 @@
+"use server";
+
+import { revalidatePath } from "next/cache";
+import { auth } from "@/lib/auth";
+import { houseService } from "@/services/houses/house.service";
+import {
+  ValidationError,
+  ConflictError,
+  ForbiddenError,
+  NotFoundError,
+} from "@/services/errors";
+
+export async function inviteUser(houseId: string, inviteeId: string) {
+  try {
+    const session = await auth();
+
+    if (!session?.user?.id) {
+      return {
+        success: false,
+        error: "Vous devez être connecté",
+      };
+    }
+
+    const invitation = await houseService.inviteUser({
+      houseId,
+      inviterId: session.user.id,
+      inviteeId,
+    });
+
+    revalidatePath("/houses");
+    revalidatePath(`/houses/${houseId}`);
+
+    return {
+      success: true,
+      message: "Invitation envoyée",
+      data: invitation,
+    };
+  } catch (error) {
+    console.error("Invite user error:", error);
+
+    if (
+      error instanceof ValidationError ||
+      error instanceof ConflictError ||
+      error instanceof ForbiddenError
+    ) {
+      return { success: false, error: error.message };
+    }
+
+    return {
+      success: false,
+      error: "Une erreur est survenue lors de l'envoi de l'invitation",
+    };
+  }
+}
+
+export async function acceptInvitation(invitationId: string) {
+  try {
+    const session = await auth();
+
+    if (!session?.user?.id) {
+      return {
+        success: false,
+        error: "Vous devez être connecté",
+      };
+    }
+
+    const membership = await houseService.acceptInvitation(
+      invitationId,
+      session.user.id
+    );
+
+    revalidatePath("/houses");
+    revalidatePath("/profile");
+    revalidatePath("/invitations");
+
+    return {
+      success: true,
+      message: "Invitation acceptée",
+      data: membership,
+    };
+  } catch (error) {
+    console.error("Accept invitation error:", error);
+
+    if (
+      error instanceof ValidationError ||
+      error instanceof ConflictError ||
+      error instanceof ForbiddenError ||
+      error instanceof NotFoundError
+    ) {
+      return { success: false, error: error.message };
+    }
+
+    return {
+      success: false,
+      error: "Une erreur est survenue lors de l'acceptation de l'invitation",
+    };
+  }
+}
+
+export async function rejectInvitation(invitationId: string) {
+  try {
+    const session = await auth();
+
+    if (!session?.user?.id) {
+      return {
+        success: false,
+        error: "Vous devez être connecté",
+      };
+    }
+
+    await houseService.rejectInvitation(invitationId, session.user.id);
+
+    revalidatePath("/houses");
+    revalidatePath("/invitations");
+
+    return { success: true, message: "Invitation refusée" };
+  } catch (error) {
+    console.error("Reject invitation error:", error);
+
+    if (
+      error instanceof ConflictError ||
+      error instanceof ForbiddenError ||
+      error instanceof NotFoundError
+    ) {
+      return { success: false, error: error.message };
+    }
+
+    return {
+      success: false,
+      error: "Une erreur est survenue lors du refus de l'invitation",
+    };
+  }
+}
+
+export async function cancelInvitation(invitationId: string) {
+  try {
+    const session = await auth();
+
+    if (!session?.user?.id) {
+      return {
+        success: false,
+        error: "Vous devez être connecté",
+      };
+    }
+
+    // Récupérer l'invitation pour obtenir le houseId avant de l'annuler
+    const invitation = await houseService.getInvitationById(invitationId);
+
+    await houseService.cancelInvitation(invitationId, session.user.id);
+
+    revalidatePath("/houses");
+    if (invitation?.houseId) {
+      revalidatePath(`/houses/${invitation.houseId}`);
+    }
+
+    return { success: true, message: "Invitation annulée" };
+  } catch (error) {
+    console.error("Cancel invitation error:", error);
+
+    if (
+      error instanceof ConflictError ||
+      error instanceof ForbiddenError ||
+      error instanceof NotFoundError
+    ) {
+      return { success: false, error: error.message };
+    }
+
+    return {
+      success: false,
+      error: "Une erreur est survenue lors de l'annulation de l'invitation",
+    };
+  }
+}

actions/houses/requests.ts

@@ -0,0 +1,163 @@
+"use server";
+
+import { revalidatePath } from "next/cache";
+import { auth } from "@/lib/auth";
+import { houseService } from "@/services/houses/house.service";
+import {
+  ValidationError,
+  ConflictError,
+  ForbiddenError,
+  NotFoundError,
+} from "@/services/errors";
+
+export async function requestToJoin(houseId: string) {
+  try {
+    const session = await auth();
+
+    if (!session?.user?.id) {
+      return {
+        success: false,
+        error: "Vous devez être connecté",
+      };
+    }
+
+    const request = await houseService.requestToJoin({
+      houseId,
+      requesterId: session.user.id,
+    });
+
+    revalidatePath("/houses");
+    revalidatePath(`/houses/${houseId}`);
+
+    return {
+      success: true,
+      message: "Demande envoyée",
+      data: request,
+    };
+  } catch (error) {
+    console.error("Request to join error:", error);
+
+    if (
+      error instanceof ValidationError ||
+      error instanceof ConflictError
+    ) {
+      return { success: false, error: error.message };
+    }
+
+    return {
+      success: false,
+      error: "Une erreur est survenue lors de l'envoi de la demande",
+    };
+  }
+}
+
+export async function acceptRequest(requestId: string) {
+  try {
+    const session = await auth();
+
+    if (!session?.user?.id) {
+      return {
+        success: false,
+        error: "Vous devez être connecté",
+      };
+    }
+
+    const membership = await houseService.acceptRequest(
+      requestId,
+      session.user.id
+    );
+
+    revalidatePath("/houses");
+    revalidatePath("/profile");
+
+    return {
+      success: true,
+      message: "Demande acceptée",
+      data: membership,
+    };
+  } catch (error) {
+    console.error("Accept request error:", error);
+
+    if (
+      error instanceof ConflictError ||
+      error instanceof ForbiddenError ||
+      error instanceof NotFoundError
+    ) {
+      return { success: false, error: error.message };
+    }
+
+    return {
+      success: false,
+      error: "Une erreur est survenue lors de l'acceptation de la demande",
+    };
+  }
+}
+
+export async function rejectRequest(requestId: string) {
+  try {
+    const session = await auth();
+
+    if (!session?.user?.id) {
+      return {
+        success: false,
+        error: "Vous devez être connecté",
+      };
+    }
+
+    await houseService.rejectRequest(requestId, session.user.id);
+
+    revalidatePath("/houses");
+
+    return { success: true, message: "Demande refusée" };
+  } catch (error) {
+    console.error("Reject request error:", error);
+
+    if (
+      error instanceof ConflictError ||
+      error instanceof ForbiddenError ||
+      error instanceof NotFoundError
+    ) {
+      return { success: false, error: error.message };
+    }
+
+    return {
+      success: false,
+      error: "Une erreur est survenue lors du refus de la demande",
+    };
+  }
+}
+
+export async function cancelRequest(requestId: string) {
+  try {
+    const session = await auth();
+
+    if (!session?.user?.id) {
+      return {
+        success: false,
+        error: "Vous devez être connecté",
+      };
+    }
+
+    await houseService.cancelRequest(requestId, session.user.id);
+
+    revalidatePath("/houses");
+
+    return { success: true, message: "Demande annulée" };
+  } catch (error) {
+    console.error("Cancel request error:", error);
+
+    if (
+      error instanceof ConflictError ||
+      error instanceof ForbiddenError ||
+      error instanceof NotFoundError
+    ) {
+      return { success: false, error: error.message };
+    }
+
+    return {
+      success: false,
+      error: "Une erreur est survenue lors de l'annulation de la demande",
+    };
+  }
+}
+

actions/houses/update.ts

@@ -0,0 +1,149 @@
+"use server";
+
+import { revalidatePath } from "next/cache";
+import { auth } from "@/lib/auth";
+import { houseService } from "@/services/houses/house.service";
+import {
+  ValidationError,
+  ConflictError,
+  ForbiddenError,
+  NotFoundError,
+} from "@/services/errors";
+
+export async function updateHouse(
+  houseId: string,
+  data: {
+    name?: string;
+    description?: string | null;
+  }
+) {
+  try {
+    const session = await auth();
+
+    if (!session?.user?.id) {
+      return {
+        success: false,
+        error: "Vous devez être connecté",
+      };
+    }
+
+    const house = await houseService.updateHouse(houseId, session.user.id, data);
+
+    revalidatePath("/houses");
+    revalidatePath(`/houses/${houseId}`);
+
+    return { success: true, message: "Maison mise à jour", data: house };
+  } catch (error) {
+    console.error("Update house error:", error);
+
+    if (
+      error instanceof ValidationError ||
+      error instanceof ConflictError ||
+      error instanceof ForbiddenError
+    ) {
+      return { success: false, error: error.message };
+    }
+
+    return {
+      success: false,
+      error: "Une erreur est survenue lors de la mise à jour de la maison",
+    };
+  }
+}
+
+export async function deleteHouse(houseId: string) {
+  try {
+    const session = await auth();
+
+    if (!session?.user?.id) {
+      return {
+        success: false,
+        error: "Vous devez être connecté",
+      };
+    }
+
+    await houseService.deleteHouse(houseId, session.user.id);
+
+    revalidatePath("/houses");
+    revalidatePath("/profile");
+
+    return { success: true, message: "Maison supprimée" };
+  } catch (error) {
+    console.error("Delete house error:", error);
+
+    if (error instanceof ForbiddenError) {
+      return { success: false, error: error.message };
+    }
+
+    return {
+      success: false,
+      error: "Une erreur est survenue lors de la suppression de la maison",
+    };
+  }
+}
+
+export async function leaveHouse(houseId: string) {
+  try {
+    const session = await auth();
+
+    if (!session?.user?.id) {
+      return {
+        success: false,
+        error: "Vous devez être connecté",
+      };
+    }
+
+    await houseService.leaveHouse(houseId, session.user.id);
+
+    revalidatePath("/houses");
+    revalidatePath("/profile");
+
+    return { success: true, message: "Vous avez quitté la maison" };
+  } catch (error) {
+    console.error("Leave house error:", error);
+
+    if (error instanceof ForbiddenError) {
+      return { success: false, error: error.message };
+    }
+
+    return {
+      success: false,
+      error: "Une erreur est survenue lors de la sortie de la maison",
+    };
+  }
+}
+
+export async function removeMember(houseId: string, memberId: string) {
+  try {
+    const session = await auth();
+
+    if (!session?.user?.id) {
+      return {
+        success: false,
+        error: "Vous devez être connecté",
+      };
+    }
+
+    await houseService.removeMember(houseId, memberId, session.user.id);
+
+    revalidatePath("/houses");
+    revalidatePath("/profile");
+
+    return { success: true, message: "Membre retiré de la maison" };
+  } catch (error) {
+    console.error("Remove member error:", error);
+
+    if (
+      error instanceof ForbiddenError ||
+      error instanceof NotFoundError
+    ) {
+      return { success: false, error: error.message };
+    }
+
+    return {
+      success: false,
+      error: "Une erreur est survenue lors du retrait du membre",
+    };
+  }
+}
+

actions/profile/update-password.ts

@@ -0,0 +1,45 @@
+"use server";
+
+import { revalidatePath } from "next/cache";
+import { auth } from "@/lib/auth";
+import { userService } from "@/services/users/user.service";
+import { ValidationError, NotFoundError } from "@/services/errors";
+
+export async function updatePassword(data: {
+  currentPassword: string;
+  newPassword: string;
+  confirmPassword: string;
+}) {
+  try {
+    const session = await auth();
+
+    if (!session?.user) {
+      return { success: false, error: "Non authentifié" };
+    }
+
+    await userService.validateAndUpdatePassword(
+      session.user.id,
+      data.currentPassword,
+      data.newPassword,
+      data.confirmPassword
+    );
+
+    revalidatePath("/profile");
+
+    return { success: true, message: "Mot de passe modifié avec succès" };
+  } catch (error) {
+    console.error("Error updating password:", error);
+
+    if (error instanceof ValidationError) {
+      return { success: false, error: error.message };
+    }
+    if (error instanceof NotFoundError) {
+      return { success: false, error: error.message };
+    }
+
+    return {
+      success: false,
+      error: "Erreur lors de la modification du mot de passe",
+    };
+  }
+}

actions/profile/update-profile.ts

@@ -0,0 +1,61 @@
+"use server";
+
+import { revalidatePath } from "next/cache";
+import { auth } from "@/lib/auth";
+import { userService } from "@/services/users/user.service";
+import { CharacterClass } from "@/prisma/generated/prisma/client";
+import { ValidationError, ConflictError } from "@/services/errors";
+
+export async function updateProfile(data: {
+  username?: string;
+  avatar?: string | null;
+  bio?: string | null;
+  characterClass?: string | null;
+}) {
+  try {
+    const session = await auth();
+
+    if (!session?.user) {
+      return { success: false, error: "Non authentifié" };
+    }
+
+    const updatedUser = await userService.validateAndUpdateUserProfile(
+      session.user.id,
+      {
+        username: data.username,
+        avatar: data.avatar,
+        bio: data.bio,
+        characterClass: data.characterClass
+          ? (data.characterClass as CharacterClass)
+          : null,
+      },
+      {
+        id: true,
+        email: true,
+        username: true,
+        avatar: true,
+        bio: true,
+        characterClass: true,
+        hp: true,
+        maxHp: true,
+        xp: true,
+        maxXp: true,
+        level: true,
+        score: true,
+      }
+    );
+
+    revalidatePath("/profile");
+    revalidatePath("/");
+
+    return { success: true, data: updatedUser };
+  } catch (error) {
+    console.error("Error updating profile:", error);
+
+    if (error instanceof ValidationError || error instanceof ConflictError) {
+      return { success: false, error: error.message };
+    }
+
+    return { success: false, error: "Erreur lors de la mise à jour du profil" };
+  }
+}

app/admin/challenges/page.tsx

@@ -0,0 +1,26 @@
+import ChallengeManagement from "@/components/admin/ChallengeManagement";
+import { Card } from "@/components/ui";
+import { challengeService } from "@/services/challenges/challenge.service";
+
+export const dynamic = "force-dynamic";
+
+export default async function AdminChallengesPage() {
+  const challenges = await challengeService.getAllChallenges();
+
+  // Sérialiser les dates pour le client
+  const serializedChallenges = challenges.map((challenge) => ({
+    ...challenge,
+    createdAt: challenge.createdAt.toISOString(),
+    acceptedAt: challenge.acceptedAt?.toISOString() ?? null,
+    completedAt: challenge.completedAt?.toISOString() ?? null,
+  }));
+
+  return (
+    <Card variant="dark" className="p-6">
+      <h2 className="text-2xl font-gaming font-bold mb-6 text-pixel-gold">
+        Gestion des Défis
+      </h2>
+      <ChallengeManagement initialChallenges={serializedChallenges} />
+    </Card>
+  );
+}

app/admin/events/page.tsx

@@ -0,0 +1,34 @@
+import EventManagement from "@/components/admin/EventManagement";
+import { Card } from "@/components/ui";
+import { eventService } from "@/services/events/event.service";
+
+export const dynamic = "force-dynamic";
+
+export default async function AdminEventsPage() {
+  const events = await eventService.getEventsWithStatus();
+
+  // Transformer les données pour la sérialisation
+  const serializedEvents = events.map((event) => ({
+    id: event.id,
+    date: event.date.toISOString(),
+    name: event.name,
+    description: event.description,
+    type: event.type,
+    status: event.status,
+    room: event.room,
+    time: event.time,
+    maxPlaces: event.maxPlaces,
+    createdAt: event.createdAt.toISOString(),
+    updatedAt: event.updatedAt.toISOString(),
+    registrationsCount: event.registrationsCount,
+  }));
+
+  return (
+    <Card variant="dark" className="p-6">
+      <h2 className="text-2xl font-gaming font-bold mb-6 text-pixel-gold">
+        Gestion des Événements
+      </h2>
+      <EventManagement initialEvents={serializedEvents} />
+    </Card>
+  );
+}

app/admin/feedbacks/page.tsx

@@ -0,0 +1,77 @@
+import FeedbackManagement from "@/components/admin/FeedbackManagement";
+import { Card } from "@/components/ui";
+import { eventFeedbackService } from "@/services/events/event-feedback.service";
+
+export const dynamic = "force-dynamic";
+
+export default async function AdminFeedbacksPage() {
+  const [feedbacksRaw, statistics] = await Promise.all([
+    eventFeedbackService.getAllFeedbacks(),
+    eventFeedbackService.getFeedbackStatistics(),
+  ]);
+
+  // Type assertion car getAllFeedbacks inclut event et user par défaut
+  const feedbacks = feedbacksRaw as unknown as Array<{
+    id: string;
+    rating: number;
+    comment: string | null;
+    isRead: boolean;
+    createdAt: Date;
+    event: {
+      id: string;
+      name: string;
+      date: Date;
+      type: string;
+    };
+    user: {
+      id: string;
+      username: string;
+      email: string;
+      avatar: string | null;
+      score: number;
+    };
+  }>;
+
+  // Sérialiser les dates pour le client
+  const serializedFeedbacks = feedbacks.map((feedback) => ({
+    id: feedback.id,
+    rating: feedback.rating,
+    comment: feedback.comment,
+    isRead: feedback.isRead,
+    createdAt: feedback.createdAt.toISOString(),
+    event: {
+      id: feedback.event.id,
+      name: feedback.event.name,
+      date: feedback.event.date.toISOString(),
+      type: feedback.event.type,
+    },
+    user: {
+      id: feedback.user.id,
+      username: feedback.user.username,
+      email: feedback.user.email,
+      avatar: feedback.user.avatar,
+      score: feedback.user.score,
+    },
+  }));
+
+  const serializedStatistics = statistics.map((stat) => ({
+    eventId: stat.eventId,
+    eventName: stat.eventName,
+    eventDate: stat.eventDate?.toISOString() ?? null,
+    eventType: stat.eventType,
+    averageRating: stat.averageRating,
+    feedbackCount: stat.feedbackCount,
+  }));
+
+  return (
+    <Card variant="dark" className="p-6">
+      <h2 className="text-2xl font-gaming font-bold mb-6 text-pixel-gold">
+        Gestion des Feedbacks
+      </h2>
+      <FeedbackManagement
+        initialFeedbacks={serializedFeedbacks}
+        initialStatistics={serializedStatistics}
+      />
+    </Card>
+  );
+}

app/admin/houses/page.tsx

@@ -0,0 +1,90 @@
+import HouseManagement from "@/components/admin/HouseManagement";
+import { Card } from "@/components/ui";
+import { houseService } from "@/services/houses/house.service";
+import { Prisma } from "@/prisma/generated/prisma/client";
+
+export const dynamic = "force-dynamic";
+
+export default async function AdminHousesPage() {
+  type HouseWithIncludes = Prisma.HouseGetPayload<{
+    include: {
+      creator: {
+        select: {
+          id: true;
+          username: true;
+          avatar: true;
+        };
+      };
+      memberships: {
+        include: {
+          user: {
+            select: {
+              id: true;
+              username: true;
+              avatar: true;
+              score: true;
+              level: true;
+            };
+          };
+        };
+      };
+    };
+  }>;
+
+  const houses = (await houseService.getAllHouses({
+    include: {
+      creator: {
+        select: {
+          id: true,
+          username: true,
+          avatar: true,
+        },
+      },
+      memberships: {
+        include: {
+          user: {
+            select: {
+              id: true,
+              username: true,
+              avatar: true,
+              score: true,
+              level: true,
+            },
+          },
+        },
+        orderBy: [{ role: "asc" }, { joinedAt: "asc" }],
+      },
+    },
+    orderBy: {
+      createdAt: "desc",
+    },
+  })) as unknown as HouseWithIncludes[];
+
+  // Transformer les données pour la sérialisation
+  const serializedHouses = houses.map((house) => ({
+    id: house.id,
+    name: house.name,
+    description: house.description,
+    creatorId: house.creatorId,
+    creator: house.creator,
+    createdAt: house.createdAt.toISOString(),
+    updatedAt: house.updatedAt.toISOString(),
+    membersCount: house.memberships?.length || 0,
+    memberships:
+      house.memberships?.map((membership) => ({
+        id: membership.id,
+        role: membership.role,
+        joinedAt: membership.joinedAt.toISOString(),
+        user: membership.user,
+      })) || [],
+  }));
+
+  return (
+    <Card variant="dark" className="p-6">
+      <h2 className="text-2xl font-gaming font-bold mb-6 text-pixel-gold">
+        Gestion des Maisons
+      </h2>
+      <HouseManagement initialHouses={serializedHouses} />
+    </Card>
+  );
+}

app/admin/layout.tsx

@@ -0,0 +1,52 @@
+import { redirect } from "next/navigation";
+import { auth } from "@/lib/auth";
+import { Role } from "@/prisma/generated/prisma/client";
+import NavigationWrapper from "@/components/navigation/NavigationWrapper";
+import AdminNavigation from "@/components/admin/AdminNavigation";
+import { SectionTitle } from "@/components/ui";
+
+export const dynamic = "force-dynamic";
+
+export default async function AdminLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const session = await auth();
+
+  if (!session?.user) {
+    redirect("/login");
+  }
+
+  if (session.user.role !== Role.ADMIN) {
+    redirect("/");
+  }
+
+  return (
+    <main className="min-h-screen bg-black relative">
+      {/* Background Image */}
+      <div
+        className="fixed inset-0 bg-cover bg-center bg-no-repeat"
+        style={{
+          backgroundImage: `url('/got-light.jpg')`,
+        }}
+      >
+        {/* Dark overlay for readability */}
+        <div className="absolute inset-0 bg-gradient-to-b from-black/70 via-black/60 to-black/80"></div>
+      </div>
+      <NavigationWrapper />
+      <section className="relative w-full min-h-screen flex flex-col items-center overflow-hidden pt-24 pb-16">
+        <div className="relative z-10 w-full max-w-6xl mx-auto px-8 py-16">
+          <SectionTitle variant="gradient" size="md" className="mb-16 text-center">
+            ADMIN
+          </SectionTitle>
+
+          <AdminNavigation />
+
+          {children}
+        </div>
+      </section>
+    </main>
+  );
+}
+

app/admin/page.tsx

@@ -1,54 +1,7 @@
 import { redirect } from "next/navigation";
-import { auth } from "@/lib/auth";
-import { prisma } from "@/lib/prisma";
-import { Role } from "@/prisma/generated/prisma/client";
-import NavigationWrapper from "@/components/NavigationWrapper";
-import AdminPanel from "@/components/AdminPanel";
 
 export const dynamic = "force-dynamic";
 
 export default async function AdminPage() {
-  const session = await auth();
-
-  if (!session?.user) {
-    redirect("/login");
-  }
-
-  if (session.user.role !== Role.ADMIN) {
-    redirect("/");
-  }
-
-  // Récupérer les préférences globales du site
-  let sitePreferences = await prisma.sitePreferences.findUnique({
-    where: { id: "global" },
-  });
-
-  // Si elles n'existent pas, créer une entrée par défaut
-  if (!sitePreferences) {
-    sitePreferences = await prisma.sitePreferences.create({
-      data: {
-        id: "global",
-        homeBackground: null,
-        eventsBackground: null,
-        leaderboardBackground: null,
-      },
-    });
-  }
-
-  return (
-    <main className="min-h-screen bg-black relative">
-      {/* Background Image */}
-      <div
-        className="absolute inset-0 bg-cover bg-center bg-no-repeat"
-        style={{
-          backgroundImage: `url('/got-light.jpg')`,
-        }}
-      >
-        {/* Dark overlay for readability */}
-        <div className="absolute inset-0 bg-gradient-to-b from-black/70 via-black/60 to-black/80"></div>
-      </div>
-      <NavigationWrapper />
-      <AdminPanel initialPreferences={sitePreferences} />
-    </main>
-  );
+  redirect("/admin/preferences");
 }

app/admin/preferences/page.tsx

@@ -0,0 +1,30 @@
+import { sitePreferencesService } from "@/services/preferences/site-preferences.service";
+import BackgroundPreferences from "@/components/admin/BackgroundPreferences";
+import EventPointsPreferences from "@/components/admin/EventPointsPreferences";
+import EventFeedbackPointsPreferences from "@/components/admin/EventFeedbackPointsPreferences";
+import HousePointsPreferences from "@/components/admin/HousePointsPreferences";
+import { Card } from "@/components/ui";
+
+export const dynamic = "force-dynamic";
+
+export default async function AdminPreferencesPage() {
+  const sitePreferences =
+    await sitePreferencesService.getOrCreateSitePreferences();
+
+  return (
+    <Card variant="dark" className="p-4 sm:p-6">
+      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6">
+        <h2 className="text-xl sm:text-2xl font-gaming font-bold text-pixel-gold break-words">
+          Préférences UI Globales
+        </h2>
+      </div>
+      <div className="space-y-4">
+        <BackgroundPreferences initialPreferences={sitePreferences} />
+        <EventPointsPreferences initialPreferences={sitePreferences} />
+        <EventFeedbackPointsPreferences initialPreferences={sitePreferences} />
+        <HousePointsPreferences initialPreferences={sitePreferences} />
+      </div>
+    </Card>
+  );
+}
+

app/admin/users/page.tsx

@@ -0,0 +1,42 @@
+import UserManagement from "@/components/admin/UserManagement";
+import { Card } from "@/components/ui";
+import { userService } from "@/services/users/user.service";
+
+export const dynamic = "force-dynamic";
+
+export default async function AdminUsersPage() {
+  const users = await userService.getAllUsers({
+    orderBy: {
+      score: "desc",
+    },
+    select: {
+      id: true,
+      username: true,
+      email: true,
+      role: true,
+      score: true,
+      level: true,
+      hp: true,
+      maxHp: true,
+      xp: true,
+      maxXp: true,
+      avatar: true,
+      createdAt: true,
+    },
+  });
+
+  // Sérialiser les dates pour le client
+  const serializedUsers = users.map((user) => ({
+    ...user,
+    createdAt: user.createdAt.toISOString(),
+  }));
+
+  return (
+    <Card variant="dark" className="p-6">
+      <h2 className="text-2xl font-gaming font-bold mb-6 text-pixel-gold">
+        Gestion des Utilisateurs
+      </h2>
+      <UserManagement initialUsers={serializedUsers} />
+    </Card>
+  );
+}

app/api/admin/challenges/route.ts

@@ -0,0 +1,25 @@
+import { NextResponse } from "next/server";
+import { auth } from "@/lib/auth";
+import { challengeService } from "@/services/challenges/challenge.service";
+import { Role } from "@/prisma/generated/prisma/client";
+
+export async function GET() {
+  try {
+    const session = await auth();
+
+    if (!session?.user || session.user.role !== Role.ADMIN) {
+      return NextResponse.json({ error: "Accès refusé" }, { status: 403 });
+    }
+
+    // Récupérer tous les défis pour l'admin (PENDING, ACCEPTED, CANCELLED, COMPLETED, REJECTED)
+    const challenges = await challengeService.getAllChallenges();
+
+    return NextResponse.json(challenges);
+  } catch (error) {
+    console.error("Error fetching challenges:", error);
+    return NextResponse.json(
+      { error: "Erreur lors de la récupération des défis" },
+      { status: 500 }
+    );
+  }
+}

app/api/admin/events/[id]/registrations/route.ts

@@ -0,0 +1,31 @@
+import { NextResponse } from "next/server";
+import { auth } from "@/lib/auth";
+import { eventRegistrationService } from "@/services/events/event-registration.service";
+import { Role } from "@/prisma/generated/prisma/client";
+
+export async function GET(
+  request: Request,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  try {
+    const session = await auth();
+
+    if (!session?.user || session.user.role !== Role.ADMIN) {
+      return NextResponse.json({ error: "Accès refusé" }, { status: 403 });
+    }
+
+    const { id: eventId } = await params;
+    const registrations = await eventRegistrationService.getEventRegistrations(
+      eventId
+    );
+
+    return NextResponse.json(registrations);
+  } catch (error) {
+    console.error("Error fetching event registrations:", error);
+    return NextResponse.json(
+      { error: "Erreur lors de la récupération des inscrits" },
+      { status: 500 }
+    );
+  }
+}
+

app/api/admin/events/[id]/route.ts

@@ -1,123 +0,0 @@
-import { NextResponse } from "next/server";
-import { auth } from "@/lib/auth";
-import { prisma } from "@/lib/prisma";
-import { Role, EventType } from "@/prisma/generated/prisma/client";
-
-export async function PUT(
-  request: Request,
-  { params }: { params: Promise<{ id: string }> }
-) {
-  try {
-    const session = await auth();
-
-    if (!session?.user || session.user.role !== Role.ADMIN) {
-      return NextResponse.json({ error: "Accès refusé" }, { status: 403 });
-    }
-
-    const { id } = await params;
-    const body = await request.json();
-    const { date, name, description, type, room, time, maxPlaces } = body;
-    // Le statut est ignoré s'il est fourni, il sera calculé automatiquement
-
-    // Vérifier que l'événement existe
-    const existingEvent = await prisma.event.findUnique({
-      where: { id },
-    });
-
-    if (!existingEvent) {
-      return NextResponse.json(
-        { error: "Événement non trouvé" },
-        { status: 404 }
-      );
-    }
-
-    const updateData: {
-      date?: Date;
-      name?: string;
-      description?: string;
-      type?: EventType;
-      room?: string | null;
-      time?: string | null;
-      maxPlaces?: number | null;
-    } = {};
-
-    if (date !== undefined) {
-      const eventDate = new Date(date);
-      if (isNaN(eventDate.getTime())) {
-        return NextResponse.json(
-          { error: "Format de date invalide" },
-          { status: 400 }
-        );
-      }
-      updateData.date = eventDate;
-    }
-    if (name !== undefined) updateData.name = name;
-    if (description !== undefined) updateData.description = description;
-    if (type !== undefined) {
-      if (!Object.values(EventType).includes(type)) {
-        return NextResponse.json(
-          { error: "Type d'événement invalide" },
-          { status: 400 }
-        );
-      }
-      updateData.type = type as EventType;
-    }
-    // Le statut est toujours calculé automatiquement, on ignore s'il est fourni
-    if (room !== undefined) updateData.room = room || null;
-    if (time !== undefined) updateData.time = time || null;
-    if (maxPlaces !== undefined)
-      updateData.maxPlaces = maxPlaces ? parseInt(maxPlaces) : null;
-
-    const event = await prisma.event.update({
-      where: { id },
-      data: updateData,
-    });
-
-    return NextResponse.json(event);
-  } catch (error) {
-    console.error("Error updating event:", error);
-    return NextResponse.json(
-      { error: "Erreur lors de la mise à jour de l'événement" },
-      { status: 500 }
-    );
-  }
-}
-
-export async function DELETE(
-  request: Request,
-  { params }: { params: Promise<{ id: string }> }
-) {
-  try {
-    const session = await auth();
-
-    if (!session?.user || session.user.role !== Role.ADMIN) {
-      return NextResponse.json({ error: "Accès refusé" }, { status: 403 });
-    }
-
-    const { id } = await params;
-
-    // Vérifier que l'événement existe
-    const existingEvent = await prisma.event.findUnique({
-      where: { id },
-    });
-
-    if (!existingEvent) {
-      return NextResponse.json(
-        { error: "Événement non trouvé" },
-        { status: 404 }
-      );
-    }
-
-    await prisma.event.delete({
-      where: { id },
-    });
-
-    return NextResponse.json({ success: true });
-  } catch (error) {
-    console.error("Error deleting event:", error);
-    return NextResponse.json(
-      { error: "Erreur lors de la suppression de l'événement" },
-      { status: 500 }
-    );
-  }
-}

app/api/admin/events/route.ts

@@ -1,8 +1,7 @@
 import { NextResponse } from "next/server";
 import { auth } from "@/lib/auth";
-import { prisma } from "@/lib/prisma";
-import { Role, EventType } from "@/prisma/generated/prisma/client";
-import { calculateEventStatus } from "@/lib/eventStatus";
+import { eventService } from "@/services/events/event.service";
+import { Role } from "@/prisma/generated/prisma/client";
 
 export async function GET() {
   try {
@@ -12,34 +11,22 @@ export async function GET() {
       return NextResponse.json({ error: "Accès refusé" }, { status: 403 });
     }
 
-    const events = await prisma.event.findMany({
-      orderBy: {
-        date: "desc",
-      },
-      include: {
-        _count: {
-          select: {
-            registrations: true,
-          },
-        },
-      },
-    });
+    const events = await eventService.getEventsWithStatus();
 
-    // Transformer les données pour inclure le nombre d'inscriptions
-    // Le statut est calculé automatiquement en fonction de la date
+    // Transformer les données pour la sérialisation
     const eventsWithCount = events.map((event) => ({
       id: event.id,
       date: event.date.toISOString(),
       name: event.name,
       description: event.description,
       type: event.type,
-      status: calculateEventStatus(event.date),
+      status: event.status,
       room: event.room,
       time: event.time,
       maxPlaces: event.maxPlaces,
       createdAt: event.createdAt.toISOString(),
       updatedAt: event.updatedAt.toISOString(),
-      registrationsCount: event._count.registrations,
+      registrationsCount: event.registrationsCount,
     }));
 
     return NextResponse.json(eventsWithCount);
@@ -51,60 +38,3 @@ export async function GET() {
     );
   }
 }
-
-export async function POST(request: Request) {
-  try {
-    const session = await auth();
-
-    if (!session?.user || session.user.role !== Role.ADMIN) {
-      return NextResponse.json({ error: "Accès refusé" }, { status: 403 });
-    }
-
-    const body = await request.json();
-    const { date, name, description, type, room, time, maxPlaces } = body;
-
-    if (!date || !name || !description || !type) {
-      return NextResponse.json(
-        { error: "Tous les champs sont requis" },
-        { status: 400 }
-      );
-    }
-
-    // Convertir la date string en Date object
-    const eventDate = new Date(date);
-    if (isNaN(eventDate.getTime())) {
-      return NextResponse.json(
-        { error: "Format de date invalide" },
-        { status: 400 }
-      );
-    }
-
-    // Valider les enums
-    if (!Object.values(EventType).includes(type)) {
-      return NextResponse.json(
-        { error: "Type d'événement invalide" },
-        { status: 400 }
-      );
-    }
-
-    const event = await prisma.event.create({
-      data: {
-        date: eventDate,
-        name,
-        description,
-        type: type as EventType,
-        room: room || null,
-        time: time || null,
-        maxPlaces: maxPlaces ? parseInt(maxPlaces) : null,
-      },
-    });
-
-    return NextResponse.json(event);
-  } catch (error) {
-    console.error("Error creating event:", error);
-    return NextResponse.json(
-      { error: "Erreur lors de la création de l'événement" },
-      { status: 500 }
-    );
-  }
-}

app/api/admin/feedback/route.ts

@@ -1,6 +1,6 @@
 import { NextResponse } from "next/server";
 import { auth } from "@/lib/auth";
-import { prisma } from "@/lib/prisma";
+import { eventFeedbackService } from "@/services/events/event-feedback.service";
 import { Role } from "@/prisma/generated/prisma/client";
 
 export async function GET() {
@@ -15,72 +15,14 @@ export async function GET() {
     }
 
     // Récupérer tous les feedbacks avec les détails de l'événement et de l'utilisateur
-    const feedbacks = await prisma.eventFeedback.findMany({
-      include: {
-        event: {
-          select: {
-            id: true,
-            name: true,
-            date: true,
-            type: true,
-          },
-        },
-        user: {
-          select: {
-            id: true,
-            username: true,
-            email: true,
-          },
-        },
-      },
-      orderBy: {
-        createdAt: "desc",
-      },
-    });
+    const feedbacks = await eventFeedbackService.getAllFeedbacks();
 
     // Calculer les statistiques par événement
-    const eventStats = await prisma.eventFeedback.groupBy({
-      by: ["eventId"],
-      _avg: {
-        rating: true,
-      },
-      _count: {
-        id: true,
-      },
-    });
-
-    // Récupérer les détails des événements pour les stats
-    const eventIds = eventStats.map((stat) => stat.eventId);
-    const events = await prisma.event.findMany({
-      where: {
-        id: {
-          in: eventIds,
-        },
-      },
-      select: {
-        id: true,
-        name: true,
-        date: true,
-        type: true,
-      },
-    });
-
-    // Combiner les stats avec les détails des événements
-    const statsWithDetails = eventStats.map((stat) => {
-      const event = events.find((e) => e.id === stat.eventId);
-      return {
-        eventId: stat.eventId,
-        eventName: event?.name || "Événement supprimé",
-        eventDate: event?.date || null,
-        eventType: event?.type || null,
-        averageRating: stat._avg.rating || 0,
-        feedbackCount: stat._count.id,
-      };
-    });
+    const statistics = await eventFeedbackService.getFeedbackStatistics();
 
     return NextResponse.json({
       feedbacks,
-      statistics: statsWithDetails,
+      statistics,
     });
   } catch (error) {
     console.error("Error fetching feedbacks:", error);

app/api/admin/houses/route.ts

@@ -0,0 +1,99 @@
+import { NextResponse } from "next/server";
+import { auth } from "@/lib/auth";
+import { houseService } from "@/services/houses/house.service";
+import { Role, Prisma } from "@/prisma/generated/prisma/client";
+
+export async function GET() {
+  try {
+    const session = await auth();
+
+    if (!session?.user || session.user.role !== Role.ADMIN) {
+      return NextResponse.json({ error: "Accès refusé" }, { status: 403 });
+    }
+
+    // Récupérer toutes les maisons avec leurs membres
+    type HouseWithIncludes = Prisma.HouseGetPayload<{
+      include: {
+        creator: {
+          select: {
+            id: true;
+            username: true;
+            avatar: true;
+          };
+        };
+        memberships: {
+          include: {
+            user: {
+              select: {
+                id: true;
+                username: true;
+                avatar: true;
+                score: true;
+                level: true;
+              };
+            };
+          };
+        };
+      };
+    }>;
+
+    const houses = (await houseService.getAllHouses({
+      include: {
+        creator: {
+          select: {
+            id: true,
+            username: true,
+            avatar: true,
+          },
+        },
+        memberships: {
+          include: {
+            user: {
+              select: {
+                id: true,
+                username: true,
+                avatar: true,
+                score: true,
+                level: true,
+              },
+            },
+          },
+          orderBy: [
+            { role: "asc" }, // OWNER, ADMIN, MEMBER
+            { joinedAt: "asc" },
+          ],
+        },
+      },
+      orderBy: {
+        createdAt: "desc",
+      },
+    })) as unknown as HouseWithIncludes[];
+
+    // Transformer les données pour la sérialisation
+    const housesWithData = houses.map((house) => ({
+      id: house.id,
+      name: house.name,
+      description: house.description,
+      creatorId: house.creatorId,
+      creator: house.creator,
+      createdAt: house.createdAt.toISOString(),
+      updatedAt: house.updatedAt.toISOString(),
+      membersCount: house.memberships?.length || 0,
+      memberships:
+        house.memberships?.map((membership) => ({
+          id: membership.id,
+          role: membership.role,
+          joinedAt: membership.joinedAt.toISOString(),
+          user: membership.user,
+        })) || [],
+    }));
+
+    return NextResponse.json(housesWithData);
+  } catch (error) {
+    console.error("Error fetching houses:", error);
+    return NextResponse.json(
+      { error: "Erreur lors de la récupération des maisons" },
+      { status: 500 }
+    );
+  }
+}

app/api/admin/preferences/route.ts

@@ -1,6 +1,6 @@
 import { NextResponse } from "next/server";
 import { auth } from "@/lib/auth";
-import { prisma } from "@/lib/prisma";
+import { sitePreferencesService } from "@/services/preferences/site-preferences.service";
 import { Role } from "@/prisma/generated/prisma/client";
 
 export async function GET() {
@@ -11,22 +11,9 @@ export async function GET() {
       return NextResponse.json({ error: "Accès refusé" }, { status: 403 });
     }
 
-    // Récupérer les préférences globales du site
-    let sitePreferences = await prisma.sitePreferences.findUnique({
-      where: { id: "global" },
-    });
-
-    // Si elles n'existent pas, créer une entrée par défaut
-    if (!sitePreferences) {
-      sitePreferences = await prisma.sitePreferences.create({
-        data: {
-          id: "global",
-          homeBackground: null,
-          eventsBackground: null,
-          leaderboardBackground: null,
-        },
-      });
-    }
+    // Récupérer les préférences globales du site (ou créer si elles n'existent pas)
+    const sitePreferences =
+      await sitePreferencesService.getOrCreateSitePreferences();
 
     return NextResponse.json(sitePreferences);
   } catch (error) {
@@ -37,46 +24,3 @@ export async function GET() {
     );
   }
 }
-
-export async function PUT(request: Request) {
-  try {
-    const session = await auth();
-
-    if (!session?.user || session.user.role !== Role.ADMIN) {
-      return NextResponse.json({ error: "Accès refusé" }, { status: 403 });
-    }
-
-    const body = await request.json();
-    const { homeBackground, eventsBackground, leaderboardBackground } = body;
-
-    const preferences = await prisma.sitePreferences.upsert({
-      where: { id: "global" },
-      update: {
-        homeBackground:
-          homeBackground === "" ? null : (homeBackground ?? undefined),
-        eventsBackground:
-          eventsBackground === "" ? null : (eventsBackground ?? undefined),
-        leaderboardBackground:
-          leaderboardBackground === ""
-            ? null
-            : (leaderboardBackground ?? undefined),
-      },
-      create: {
-        id: "global",
-        homeBackground: homeBackground === "" ? null : (homeBackground ?? null),
-        eventsBackground:
-          eventsBackground === "" ? null : (eventsBackground ?? null),
-        leaderboardBackground:
-          leaderboardBackground === "" ? null : (leaderboardBackground ?? null),
-      },
-    });
-
-    return NextResponse.json(preferences);
-  } catch (error) {
-    console.error("Error updating admin preferences:", error);
-    return NextResponse.json(
-      { error: "Erreur lors de la mise à jour des préférences" },
-      { status: 500 }
-    );
-  }
-}

app/api/admin/users/[id]/route.ts

@@ -1,242 +0,0 @@
-import { NextResponse } from "next/server";
-import { auth } from "@/lib/auth";
-import { prisma } from "@/lib/prisma";
-import { Role } from "@/prisma/generated/prisma/client";
-
-export async function PUT(
-  request: Request,
-  { params }: { params: Promise<{ id: string }> }
-) {
-  try {
-    const session = await auth();
-
-    if (!session?.user || session.user.role !== Role.ADMIN) {
-      return NextResponse.json({ error: "Accès refusé" }, { status: 403 });
-    }
-
-    const { id } = await params;
-    const body = await request.json();
-    const { username, avatar, hpDelta, xpDelta, score, level, role } = body;
-
-    // Récupérer l'utilisateur actuel
-    const user = await prisma.user.findUnique({
-      where: { id },
-    });
-
-    if (!user) {
-      return NextResponse.json(
-        { error: "Utilisateur non trouvé" },
-        { status: 404 }
-      );
-    }
-
-    // Calculer les nouvelles valeurs
-    let newHp = user.hp;
-    let newXp = user.xp;
-    let newLevel = user.level;
-    let newMaxXp = user.maxXp;
-
-    // Appliquer les changements de HP
-    if (hpDelta !== undefined) {
-      newHp = Math.max(0, Math.min(user.maxHp, user.hp + hpDelta));
-    }
-
-    // Appliquer les changements de XP
-    if (xpDelta !== undefined) {
-      newXp = user.xp + xpDelta;
-      newLevel = user.level;
-      newMaxXp = user.maxXp;
-
-      // Gérer le niveau up si nécessaire (quand on ajoute de l'XP)
-      if (newXp >= newMaxXp && newXp > 0) {
-        while (newXp >= newMaxXp) {
-          newXp -= newMaxXp;
-          newLevel += 1;
-          // Augmenter le maxXp pour le prochain niveau (formule simple)
-          newMaxXp = Math.floor(newMaxXp * 1.2);
-        }
-      }
-
-      // Gérer le niveau down si nécessaire (quand on enlève de l'XP)
-      if (newXp < 0 && newLevel > 1) {
-        while (newXp < 0 && newLevel > 1) {
-          newLevel -= 1;
-          // Calculer le maxXp du niveau précédent
-          newMaxXp = Math.floor(newMaxXp / 1.2);
-          newXp += newMaxXp;
-        }
-        // S'assurer que l'XP ne peut pas être négative
-        newXp = Math.max(0, newXp);
-      }
-
-      // S'assurer que le niveau minimum est 1
-      if (newLevel < 1) {
-        newLevel = 1;
-        newXp = 0;
-      }
-    }
-
-    // Appliquer les changements directs (username, avatar, score, level, role)
-    const updateData: {
-      hp: number;
-      xp: number;
-      level: number;
-      maxXp: number;
-      username?: string;
-      avatar?: string | null;
-      score?: number;
-      role?: Role;
-    } = {
-      hp: newHp,
-      xp: newXp,
-      level: newLevel,
-      maxXp: newMaxXp,
-    };
-
-    // Validation et mise à jour du username
-    if (username !== undefined) {
-      if (typeof username !== "string" || username.trim().length === 0) {
-        return NextResponse.json(
-          { error: "Le nom d'utilisateur ne peut pas être vide" },
-          { status: 400 }
-        );
-      }
-
-      if (username.length < 3 || username.length > 20) {
-        return NextResponse.json(
-          {
-            error:
-              "Le nom d'utilisateur doit contenir entre 3 et 20 caractères",
-          },
-          { status: 400 }
-        );
-      }
-
-      // Vérifier si le username est déjà pris par un autre utilisateur
-      const existingUser = await prisma.user.findFirst({
-        where: {
-          username: username.trim(),
-          NOT: { id },
-        },
-      });
-
-      if (existingUser) {
-        return NextResponse.json(
-          { error: "Ce nom d'utilisateur est déjà pris" },
-          { status: 400 }
-        );
-      }
-
-      updateData.username = username.trim();
-    }
-
-    // Mise à jour de l'avatar
-    if (avatar !== undefined) {
-      updateData.avatar = avatar || null;
-    }
-
-    if (score !== undefined) {
-      updateData.score = Math.max(0, score);
-    }
-
-    if (level !== undefined) {
-      // Si le niveau est modifié directement, utiliser cette valeur
-      const targetLevel = Math.max(1, level);
-      updateData.level = targetLevel;
-
-      // Recalculer le maxXp pour le nouveau niveau
-      // Formule: maxXp = 5000 * (1.2 ^ (level - 1))
-      let calculatedMaxXp = 5000;
-      for (let i = 1; i < targetLevel; i++) {
-        calculatedMaxXp = Math.floor(calculatedMaxXp * 1.2);
-      }
-      updateData.maxXp = calculatedMaxXp;
-
-      // Réinitialiser l'XP si le niveau change directement (sauf si on modifie aussi l'XP)
-      if (targetLevel !== user.level && xpDelta === undefined) {
-        updateData.xp = 0;
-      }
-    }
-
-    if (role !== undefined) {
-      if (role === "ADMIN" || role === "USER") {
-        updateData.role = role as Role;
-      }
-    }
-
-    // Mettre à jour l'utilisateur
-    const updatedUser = await prisma.user.update({
-      where: { id },
-      data: updateData,
-      select: {
-        id: true,
-        username: true,
-        email: true,
-        role: true,
-        score: true,
-        level: true,
-        hp: true,
-        maxHp: true,
-        xp: true,
-        maxXp: true,
-        avatar: true,
-      },
-    });
-
-    return NextResponse.json(updatedUser);
-  } catch (error) {
-    console.error("Error updating user:", error);
-    return NextResponse.json(
-      { error: "Erreur lors de la mise à jour de l'utilisateur" },
-      { status: 500 }
-    );
-  }
-}
-
-export async function DELETE(
-  request: Request,
-  { params }: { params: Promise<{ id: string }> }
-) {
-  try {
-    const session = await auth();
-
-    if (!session?.user || session.user.role !== Role.ADMIN) {
-      return NextResponse.json({ error: "Accès refusé" }, { status: 403 });
-    }
-
-    const { id } = await params;
-
-    // Vérifier que l'utilisateur existe
-    const user = await prisma.user.findUnique({
-      where: { id },
-    });
-
-    if (!user) {
-      return NextResponse.json(
-        { error: "Utilisateur non trouvé" },
-        { status: 404 }
-      );
-    }
-
-    // Empêcher la suppression de soi-même
-    if (user.id === session.user.id) {
-      return NextResponse.json(
-        { error: "Vous ne pouvez pas supprimer votre propre compte" },
-        { status: 400 }
-      );
-    }
-
-    // Supprimer l'utilisateur (les relations seront supprimées en cascade)
-    await prisma.user.delete({
-      where: { id },
-    });
-
-    return NextResponse.json({ success: true });
-  } catch (error) {
-    console.error("Error deleting user:", error);
-    return NextResponse.json(
-      { error: "Erreur lors de la suppression de l'utilisateur" },
-      { status: 500 }
-    );
-  }
-}

app/api/admin/users/route.ts

@@ -1,6 +1,6 @@
 import { NextResponse } from "next/server";
 import { auth } from "@/lib/auth";
-import { prisma } from "@/lib/prisma";
+import { userService } from "@/services/users/user.service";
 import { Role } from "@/prisma/generated/prisma/client";
 
 export async function GET() {
@@ -12,7 +12,10 @@ export async function GET() {
     }
 
     // Récupérer tous les utilisateurs avec leurs stats
-    const users = await prisma.user.findMany({
+    const users = await userService.getAllUsers({
+      orderBy: {
+        score: "desc",
+      },
       select: {
         id: true,
         username: true,
@@ -27,9 +30,6 @@ export async function GET() {
         avatar: true,
         createdAt: true,
       },
-      orderBy: {
-        score: "desc",
-      },
     });
 
     return NextResponse.json(users);

app/api/challenges/active-count/route.ts

@@ -0,0 +1,23 @@
+import { NextResponse } from "next/server";
+import { auth } from "@/lib/auth";
+import { challengeService } from "@/services/challenges/challenge.service";
+
+export async function GET() {
+  try {
+    const session = await auth();
+
+    if (!session?.user?.id) {
+      return NextResponse.json({ count: 0 });
+    }
+
+    const count = await challengeService.getActiveChallengesCount(
+      session.user.id
+    );
+
+    return NextResponse.json({ count });
+  } catch (error) {
+    console.error("Error fetching active challenges count:", error);
+    return NextResponse.json({ count: 0 });
+  }
+}
+

app/api/challenges/route.ts

@@ -0,0 +1,31 @@
+import { NextResponse } from "next/server";
+import { auth } from "@/lib/auth";
+import { challengeService } from "@/services/challenges/challenge.service";
+
+export async function GET() {
+  try {
+    const session = await auth();
+
+    if (!session?.user?.id) {
+      return NextResponse.json(
+        { error: "Vous devez être connecté" },
+        { status: 401 }
+      );
+    }
+
+    // Récupérer tous les défis de l'utilisateur
+    const challenges = await challengeService.getUserChallenges(
+      session.user.id
+    );
+
+    return NextResponse.json(challenges);
+  } catch (error) {
+    console.error("Error fetching challenges:", error);
+    return NextResponse.json(
+      { error: "Erreur lors de la récupération des défis" },
+      { status: 500 }
+    );
+  }
+}
+
+

app/api/events/[id]/register/route.ts

@@ -1,115 +1,6 @@
 import { NextResponse } from "next/server";
 import { auth } from "@/lib/auth";
-import { prisma } from "@/lib/prisma";
-import { calculateEventStatus } from "@/lib/eventStatus";
-
-export async function POST(
-  request: Request,
-  { params }: { params: Promise<{ id: string }> }
-) {
-  try {
-    const session = await auth();
-
-    if (!session?.user?.id) {
-      return NextResponse.json(
-        { error: "Vous devez être connecté pour vous inscrire" },
-        { status: 401 }
-      );
-    }
-
-    const { id: eventId } = await params;
-
-    // Vérifier si l'événement existe
-    const event = await prisma.event.findUnique({
-      where: { id: eventId },
-    });
-
-    if (!event) {
-      return NextResponse.json(
-        { error: "Événement introuvable" },
-        { status: 404 }
-      );
-    }
-
-    const eventStatus = calculateEventStatus(event.date);
-    if (eventStatus !== "UPCOMING") {
-      return NextResponse.json(
-        { error: "Vous ne pouvez vous inscrire qu'aux événements à venir" },
-        { status: 400 }
-      );
-    }
-
-    // Vérifier si l'utilisateur est déjà inscrit
-    const existingRegistration = await prisma.eventRegistration.findUnique({
-      where: {
-        userId_eventId: {
-          userId: session.user.id,
-          eventId: eventId,
-        },
-      },
-    });
-
-    if (existingRegistration) {
-      return NextResponse.json(
-        { error: "Vous êtes déjà inscrit à cet événement" },
-        { status: 400 }
-      );
-    }
-
-    // Créer l'inscription
-    const registration = await prisma.eventRegistration.create({
-      data: {
-        userId: session.user.id,
-        eventId: eventId,
-      },
-    });
-
-    return NextResponse.json(
-      { message: "Inscription réussie", registration },
-      { status: 201 }
-    );
-  } catch (error) {
-    console.error("Registration error:", error);
-    return NextResponse.json(
-      { error: "Une erreur est survenue lors de l'inscription" },
-      { status: 500 }
-    );
-  }
-}
-
-export async function DELETE(
-  request: Request,
-  { params }: { params: Promise<{ id: string }> }
-) {
-  try {
-    const session = await auth();
-
-    if (!session?.user?.id) {
-      return NextResponse.json(
-        { error: "Vous devez être connecté" },
-        { status: 401 }
-      );
-    }
-
-    const { id: eventId } = await params;
-
-    // Supprimer l'inscription
-    await prisma.eventRegistration.deleteMany({
-      where: {
-        userId: session.user.id,
-        eventId: eventId,
-      },
-    });
-
-    return NextResponse.json({ message: "Inscription annulée" });
-  } catch (error) {
-    console.error("Unregistration error:", error);
-    return NextResponse.json(
-      { error: "Une erreur est survenue lors de l'annulation" },
-      { status: 500 }
-    );
-  }
-}
+import { eventRegistrationService } from "@/services/events/event-registration.service";
 
 export async function GET(
   request: Request,
@@ -124,16 +15,12 @@ export async function GET(
 
     const { id: eventId } = await params;
 
-    const registration = await prisma.eventRegistration.findUnique({
-      where: {
-        userId_eventId: {
-          userId: session.user.id,
-          eventId: eventId,
-        },
-      },
-    });
+    const isRegistered = await eventRegistrationService.checkUserRegistration(
+      session.user.id,
+      eventId
+    );
 
-    return NextResponse.json({ registered: !!registration });
+    return NextResponse.json({ registered: isRegistered });
   } catch (error) {
     console.error("Check registration error:", error);
     return NextResponse.json({ registered: false });

app/api/events/[id]/route.ts

@@ -1,5 +1,5 @@
 import { NextResponse } from "next/server";
-import { prisma } from "@/lib/prisma";
+import { eventService } from "@/services/events/event.service";
 
 export async function GET(
   request: Request,
@@ -8,9 +8,7 @@ export async function GET(
   try {
     const { id } = await params;
 
-    const event = await prisma.event.findUnique({
-      where: { id },
-    });
+    const event = await eventService.getEventById(id);
 
     if (!event) {
       return NextResponse.json(

app/api/events/route.ts

@@ -1,12 +1,10 @@
 import { NextResponse } from "next/server";
-import { prisma } from "@/lib/prisma";
+import { eventService } from "@/services/events/event.service";
 
 export async function GET() {
   try {
-    const events = await prisma.event.findMany({
-      orderBy: {
-        date: "asc",
-      },
+    const events = await eventService.getAllEvents({
+      orderBy: { date: "asc" },
     });
 
     return NextResponse.json(events);

app/api/feedback/[eventId]/route.ts

@@ -1,70 +1,6 @@
 import { NextResponse } from "next/server";
 import { auth } from "@/lib/auth";
-import { prisma } from "@/lib/prisma";
-
-export async function POST(
-  request: Request,
-  { params }: { params: Promise<{ eventId: string }> }
-) {
-  try {
-    const session = await auth();
-    if (!session?.user?.id) {
-      return NextResponse.json({ error: "Non authentifié" }, { status: 401 });
-    }
-
-    const { eventId } = await params;
-    const body = await request.json();
-    const { rating, comment } = body;
-
-    // Valider la note (1-5)
-    if (!rating || rating < 1 || rating > 5) {
-      return NextResponse.json(
-        { error: "La note doit être entre 1 et 5" },
-        { status: 400 }
-      );
-    }
-
-    // Vérifier que l'événement existe
-    const event = await prisma.event.findUnique({
-      where: { id: eventId },
-    });
-
-    if (!event) {
-      return NextResponse.json(
-        { error: "Événement introuvable" },
-        { status: 404 }
-      );
-    }
-
-    // Créer ou mettre à jour le feedback (unique par utilisateur/événement)
-    const feedback = await prisma.eventFeedback.upsert({
-      where: {
-        userId_eventId: {
-          userId: session.user.id,
-          eventId,
-        },
-      },
-      update: {
-        rating,
-        comment: comment || null,
-      },
-      create: {
-        userId: session.user.id,
-        eventId,
-        rating,
-        comment: comment || null,
-      },
-    });
-
-    return NextResponse.json({ success: true, feedback });
-  } catch (error) {
-    console.error("Error saving feedback:", error);
-    return NextResponse.json(
-      { error: "Erreur lors de l'enregistrement du feedback" },
-      { status: 500 }
-    );
-  }
-}
+import { eventFeedbackService } from "@/services/events/event-feedback.service";
 
 export async function GET(
   request: Request,
@@ -79,23 +15,10 @@ export async function GET(
     const { eventId } = await params;
 
     // Récupérer le feedback de l'utilisateur pour cet événement
-    const feedback = await prisma.eventFeedback.findUnique({
-      where: {
-        userId_eventId: {
-          userId: session.user.id,
-          eventId,
-        },
-      },
-      include: {
-        event: {
-          select: {
-            id: true,
-            name: true,
-            date: true,
-          },
-        },
-      },
-    });
+    const feedback = await eventFeedbackService.getUserFeedback(
+      session.user.id,
+      eventId
+    );
 
     return NextResponse.json({ feedback });
   } catch (error) {

app/api/houses/[houseId]/invitations/route.ts

@@ -0,0 +1,51 @@
+import { NextResponse } from "next/server";
+import { auth } from "@/lib/auth";
+import { houseService } from "@/services/houses/house.service";
+
+export async function GET(
+  request: Request,
+  { params }: { params: Promise<{ houseId: string }> }
+) {
+  try {
+    const session = await auth();
+
+    if (!session?.user?.id) {
+      return NextResponse.json(
+        { error: "Vous devez être connecté" },
+        { status: 401 }
+      );
+    }
+
+    const { houseId } = await params;
+
+    // Vérifier que l'utilisateur est membre de la maison
+    const isMember = await houseService.isUserMemberOfHouse(
+      session.user.id,
+      houseId
+    );
+
+    if (!isMember) {
+      return NextResponse.json(
+        { error: "Vous devez être membre de cette maison" },
+        { status: 403 }
+      );
+    }
+
+    const { searchParams } = new URL(request.url);
+    const status = searchParams.get("status") as "PENDING" | "ACCEPTED" | "REJECTED" | "CANCELLED" | null;
+
+    const invitations = await houseService.getHouseInvitations(
+      houseId,
+      status || undefined
+    );
+
+    return NextResponse.json(invitations);
+  } catch (error) {
+    console.error("Error fetching house invitations:", error);
+    return NextResponse.json(
+      { error: "Erreur lors de la récupération des invitations" },
+      { status: 500 }
+    );
+  }
+}
+

app/api/houses/[houseId]/requests/route.ts

@@ -0,0 +1,48 @@
+import { NextResponse } from "next/server";
+import { auth } from "@/lib/auth";
+import { houseService } from "@/services/houses/house.service";
+
+export async function GET(
+  request: Request,
+  { params }: { params: Promise<{ houseId: string }> }
+) {
+  try {
+    const session = await auth();
+
+    if (!session?.user?.id) {
+      return NextResponse.json(
+        { error: "Vous devez être connecté" },
+        { status: 401 }
+      );
+    }
+
+    const { houseId } = await params;
+
+    // Vérifier que l'utilisateur est propriétaire ou admin
+    const isAuthorized = await houseService.isUserOwnerOrAdmin(
+      session.user.id,
+      houseId
+    );
+
+    if (!isAuthorized) {
+      return NextResponse.json(
+        { error: "Vous n'avez pas les permissions pour voir les demandes" },
+        { status: 403 }
+      );
+    }
+
+    const { searchParams } = new URL(request.url);
+    const status = searchParams.get("status") as "PENDING" | "ACCEPTED" | "REJECTED" | "CANCELLED" | null;
+
+    const requests = await houseService.getHouseRequests(houseId, status || undefined);
+
+    return NextResponse.json(requests);
+  } catch (error) {
+    console.error("Error fetching house requests:", error);
+    return NextResponse.json(
+      { error: "Erreur lors de la récupération des demandes" },
+      { status: 500 }
+    );
+  }
+}
+

app/api/houses/[houseId]/route.ts

@@ -0,0 +1,59 @@
+import { NextResponse } from "next/server";
+import { auth } from "@/lib/auth";
+import { houseService } from "@/services/houses/house.service";
+
+export async function GET(
+  request: Request,
+  { params }: { params: Promise<{ houseId: string }> }
+) {
+  try {
+    const session = await auth();
+
+    if (!session?.user?.id) {
+      return NextResponse.json(
+        { error: "Vous devez être connecté" },
+        { status: 401 }
+      );
+    }
+
+    const { houseId } = await params;
+    const house = await houseService.getHouseById(houseId, {
+      memberships: {
+        include: {
+          user: {
+            select: {
+              id: true,
+              username: true,
+              avatar: true,
+              score: true,
+              level: true,
+            },
+          },
+        },
+      },
+      creator: {
+        select: {
+          id: true,
+          username: true,
+          avatar: true,
+        },
+      },
+    });
+
+    if (!house) {
+      return NextResponse.json(
+        { error: "Maison non trouvée" },
+        { status: 404 }
+      );
+    }
+
+    return NextResponse.json(house);
+  } catch (error) {
+    console.error("Error fetching house:", error);
+    return NextResponse.json(
+      { error: "Erreur lors de la récupération de la maison" },
+      { status: 500 }
+    );
+  }
+}
+

app/api/houses/my-house/route.ts

@@ -0,0 +1,48 @@
+import { NextResponse } from "next/server";
+import { auth } from "@/lib/auth";
+import { houseService } from "@/services/houses/house.service";
+
+export async function GET() {
+  try {
+    const session = await auth();
+
+    if (!session?.user?.id) {
+      return NextResponse.json(
+        { error: "Vous devez être connecté" },
+        { status: 401 }
+      );
+    }
+
+    const house = await houseService.getUserHouse(session.user.id, {
+      memberships: {
+        include: {
+          user: {
+            select: {
+              id: true,
+              username: true,
+              avatar: true,
+              score: true,
+              level: true,
+            },
+          },
+        },
+      },
+      creator: {
+        select: {
+          id: true,
+          username: true,
+          avatar: true,
+        },
+      },
+    });
+
+    return NextResponse.json(house);
+  } catch (error) {
+    console.error("Error fetching user house:", error);
+    return NextResponse.json(
+      { error: "Erreur lors de la récupération de votre maison" },
+      { status: 500 }
+    );
+  }
+}
+

app/api/houses/route.ts

@@ -0,0 +1,87 @@
+import { NextResponse } from "next/server";
+import { auth } from "@/lib/auth";
+import { houseService } from "@/services/houses/house.service";
+
+export async function GET(request: Request) {
+  try {
+    const session = await auth();
+
+    if (!session?.user?.id) {
+      return NextResponse.json(
+        { error: "Vous devez être connecté" },
+        { status: 401 }
+      );
+    }
+
+    const { searchParams } = new URL(request.url);
+    const search = searchParams.get("search");
+    const include = searchParams.get("include")?.split(",") || [];
+
+    const includeOptions: {
+      memberships?: {
+        include: {
+          user: {
+            select: {
+              id: boolean;
+              username: boolean;
+              avatar: boolean;
+              score?: boolean;
+              level?: boolean;
+            };
+          };
+        };
+      };
+      creator?: {
+        select: {
+          id: boolean;
+          username: boolean;
+          avatar: boolean;
+        };
+      };
+    } = {};
+    if (include.includes("members")) {
+      includeOptions.memberships = {
+        include: {
+          user: {
+            select: {
+              id: true,
+              username: true,
+              avatar: true,
+              score: true,
+              level: true,
+            },
+          },
+        },
+      };
+    }
+    if (include.includes("creator")) {
+      includeOptions.creator = {
+        select: {
+          id: true,
+          username: true,
+          avatar: true,
+        },
+      };
+    }
+
+    let houses;
+    if (search) {
+      houses = await houseService.searchHouses(search, {
+        include: includeOptions,
+      });
+    } else {
+      houses = await houseService.getAllHouses({
+        include: includeOptions,
+      });
+    }
+
+    return NextResponse.json(houses);
+  } catch (error) {
+    console.error("Error fetching houses:", error);
+    return NextResponse.json(
+      { error: "Erreur lors de la récupération des maisons" },
+      { status: 500 }
+    );
+  }
+}
+

app/api/invitations/pending-count/route.ts

@@ -0,0 +1,23 @@
+import { NextResponse } from "next/server";
+import { auth } from "@/lib/auth";
+import { houseService } from "@/services/houses/house.service";
+
+export async function GET() {
+  try {
+    const session = await auth();
+
+    if (!session?.user?.id) {
+      return NextResponse.json({ count: 0 });
+    }
+
+    // Compter les invitations ET les demandes d'adhésion en attente
+    const count = await houseService.getPendingHouseActionsCount(
+      session.user.id
+    );
+
+    return NextResponse.json({ count });
+  } catch (error) {
+    console.error("Error fetching pending house actions count:", error);
+    return NextResponse.json({ count: 0 });
+  }
+}

app/api/invitations/route.ts

@@ -0,0 +1,36 @@
+import { NextResponse } from "next/server";
+import { auth } from "@/lib/auth";
+import { houseService } from "@/services/houses/house.service";
+
+export async function GET(request: Request) {
+  try {
+    const session = await auth();
+
+    if (!session?.user?.id) {
+      return NextResponse.json(
+        { error: "Vous devez être connecté" },
+        { status: 401 }
+      );
+    }
+
+    const { searchParams } = new URL(request.url);
+    const statusParam = searchParams.get("status");
+    const status = statusParam && ["PENDING", "ACCEPTED", "REJECTED", "CANCELLED"].includes(statusParam)
+      ? (statusParam as "PENDING" | "ACCEPTED" | "REJECTED" | "CANCELLED")
+      : undefined;
+
+    const invitations = await houseService.getUserInvitations(
+      session.user.id,
+      status
+    );
+
+    return NextResponse.json(invitations);
+  } catch (error) {
+    console.error("Error fetching invitations:", error);
+    return NextResponse.json(
+      { error: "Erreur lors de la récupération des invitations" },
+      { status: 500 }
+    );
+  }
+}
+

app/api/leaderboard/houses/route.ts

@@ -0,0 +1,17 @@
+import { NextResponse } from "next/server";
+import { userStatsService } from "@/services/users/user-stats.service";
+
+export async function GET() {
+  try {
+    const leaderboard = await userStatsService.getHouseLeaderboard(10);
+
+    return NextResponse.json(leaderboard);
+  } catch (error) {
+    console.error("Error fetching house leaderboard:", error);
+    return NextResponse.json(
+      { error: "Erreur lors de la récupération du leaderboard des maisons" },
+      { status: 500 }
+    );
+  }
+}
+

app/api/leaderboard/route.ts

@@ -1,49 +1,9 @@
 import { NextResponse } from "next/server";
-import { prisma } from "@/lib/prisma";
+import { userStatsService } from "@/services/users/user-stats.service";
 
 export async function GET() {
   try {
-    const users = await prisma.user.findMany({
-      orderBy: {
-        score: "desc",
-      },
-      take: 10,
-      select: {
-        id: true,
-        username: true,
-        email: true,
-        score: true,
-        level: true,
-        avatar: true,
-        bio: true,
-        characterClass: true,
-      },
-    });
-
-    const leaderboard = users.map(
-      (
-        user: {
-          id: string;
-          username: string;
-          email: string;
-          score: number;
-          level: number;
-          avatar: string | null;
-          bio: string | null;
-          characterClass: string | null;
-        },
-        index: number
-      ) => ({
-        rank: index + 1,
-        username: user.username,
-        email: user.email,
-        score: user.score,
-        level: user.level,
-        avatar: user.avatar,
-        bio: user.bio,
-        characterClass: user.characterClass,
-      })
-    );
+    const leaderboard = await userStatsService.getLeaderboard(10);
 
     return NextResponse.json(leaderboard);
   } catch (error) {

app/api/preferences/route.ts

@@ -1,12 +1,10 @@
 import { NextResponse } from "next/server";
-import { prisma } from "@/lib/prisma";
+import { sitePreferencesService } from "@/services/preferences/site-preferences.service";
 
 export async function GET() {
   try {
     // Récupérer les préférences globales du site (pas besoin d'authentification)
-    let sitePreferences = await prisma.sitePreferences.findUnique({
-      where: { id: "global" },
-    });
+    const sitePreferences = await sitePreferencesService.getSitePreferences();
 
     // Si elles n'existent pas, retourner des valeurs par défaut
     if (!sitePreferences) {
@@ -14,6 +12,9 @@ export async function GET() {
         homeBackground: null,
         eventsBackground: null,
         leaderboardBackground: null,
+        challengesBackground: null,
+        profileBackground: null,
+        houseBackground: null,
       });
     }
 
@@ -21,6 +22,9 @@ export async function GET() {
       homeBackground: sitePreferences.homeBackground,
       eventsBackground: sitePreferences.eventsBackground,
       leaderboardBackground: sitePreferences.leaderboardBackground,
+      challengesBackground: sitePreferences.challengesBackground,
+      profileBackground: sitePreferences.profileBackground,
+      houseBackground: sitePreferences.houseBackground,
     });
   } catch (error) {
     console.error("Error fetching preferences:", error);
@@ -29,6 +33,9 @@ export async function GET() {
         homeBackground: null,
         eventsBackground: null,
         leaderboardBackground: null,
+        challengesBackground: null,
+        profileBackground: null,
+        houseBackground: null,
       },
       { status: 200 }
     );

app/api/profile/password/route.ts

@@ -1,84 +0,0 @@
-import { NextResponse } from "next/server";
-import { auth } from "@/lib/auth";
-import { prisma } from "@/lib/prisma";
-import bcrypt from "bcryptjs";
-
-export async function PUT(request: Request) {
-  try {
-    const session = await auth();
-
-    if (!session?.user) {
-      return NextResponse.json({ error: "Non authentifié" }, { status: 401 });
-    }
-
-    const body = await request.json();
-    const { currentPassword, newPassword, confirmPassword } = body;
-
-    // Validation
-    if (!currentPassword || !newPassword || !confirmPassword) {
-      return NextResponse.json(
-        { error: "Tous les champs sont requis" },
-        { status: 400 }
-      );
-    }
-
-    if (newPassword.length < 6) {
-      return NextResponse.json(
-        {
-          error: "Le nouveau mot de passe doit contenir au moins 6 caractères",
-        },
-        { status: 400 }
-      );
-    }
-
-    if (newPassword !== confirmPassword) {
-      return NextResponse.json(
-        { error: "Les mots de passe ne correspondent pas" },
-        { status: 400 }
-      );
-    }
-
-    // Récupérer l'utilisateur avec le mot de passe
-    const user = await prisma.user.findUnique({
-      where: { id: session.user.id },
-      select: { password: true },
-    });
-
-    if (!user) {
-      return NextResponse.json(
-        { error: "Utilisateur non trouvé" },
-        { status: 404 }
-      );
-    }
-
-    // Vérifier l'ancien mot de passe
-    const isPasswordValid = await bcrypt.compare(
-      currentPassword,
-      user.password
-    );
-
-    if (!isPasswordValid) {
-      return NextResponse.json(
-        { error: "Mot de passe actuel incorrect" },
-        { status: 400 }
-      );
-    }
-
-    // Hasher le nouveau mot de passe
-    const hashedPassword = await bcrypt.hash(newPassword, 10);
-
-    // Mettre à jour le mot de passe
-    await prisma.user.update({
-      where: { id: session.user.id },
-      data: { password: hashedPassword },
-    });
-
-    return NextResponse.json({ message: "Mot de passe modifié avec succès" });
-  } catch (error) {
-    console.error("Error updating password:", error);
-    return NextResponse.json(
-      { error: "Erreur lors de la modification du mot de passe" },
-      { status: 500 }
-    );
-  }
-}

app/api/profile/route.ts

@@ -1,7 +1,6 @@
 import { NextResponse } from "next/server";
 import { auth } from "@/lib/auth";
-import { prisma } from "@/lib/prisma";
-import { CharacterClass } from "@/prisma/generated/prisma/enums";
+import { userService } from "@/services/users/user.service";
 
 export async function GET() {
   try {
@@ -11,23 +10,20 @@ export async function GET() {
       return NextResponse.json({ error: "Non authentifié" }, { status: 401 });
     }
 
-    const user = await prisma.user.findUnique({
-      where: { id: session.user.id },
-      select: {
-        id: true,
-        email: true,
-        username: true,
-        avatar: true,
-        bio: true,
-        characterClass: true,
-        hp: true,
-        maxHp: true,
-        xp: true,
-        maxXp: true,
-        level: true,
-        score: true,
-        createdAt: true,
-      },
+    const user = await userService.getUserById(session.user.id, {
+      id: true,
+      email: true,
+      username: true,
+      avatar: true,
+      bio: true,
+      characterClass: true,
+      hp: true,
+      maxHp: true,
+      xp: true,
+      maxXp: true,
+      level: true,
+      score: true,
+      createdAt: true,
     });
 
     if (!user) {
@@ -46,136 +42,3 @@ export async function GET() {
     );
   }
 }
-
-export async function PUT(request: Request) {
-  try {
-    const session = await auth();
-
-    if (!session?.user) {
-      return NextResponse.json({ error: "Non authentifié" }, { status: 401 });
-    }
-
-    const body = await request.json();
-    const { username, avatar, bio, characterClass } = body;
-
-    // Validation
-    if (username !== undefined) {
-      if (typeof username !== "string" || username.trim().length === 0) {
-        return NextResponse.json(
-          { error: "Le nom d'utilisateur ne peut pas être vide" },
-          { status: 400 }
-        );
-      }
-
-      if (username.length < 3 || username.length > 20) {
-        return NextResponse.json(
-          {
-            error:
-              "Le nom d'utilisateur doit contenir entre 3 et 20 caractères",
-          },
-          { status: 400 }
-        );
-      }
-
-      // Vérifier si le username est déjà pris par un autre utilisateur
-      const existingUser = await prisma.user.findFirst({
-        where: {
-          username: username.trim(),
-          NOT: { id: session.user.id },
-        },
-      });
-
-      if (existingUser) {
-        return NextResponse.json(
-          { error: "Ce nom d'utilisateur est déjà pris" },
-          { status: 400 }
-        );
-      }
-    }
-
-    // Validation bio
-    if (bio !== undefined && bio !== null) {
-      if (typeof bio !== "string") {
-        return NextResponse.json(
-          { error: "La bio doit être une chaîne de caractères" },
-          { status: 400 }
-        );
-      }
-      if (bio.length > 500) {
-        return NextResponse.json(
-          { error: "La bio ne peut pas dépasser 500 caractères" },
-          { status: 400 }
-        );
-      }
-    }
-
-    // Validation characterClass
-    const validClasses = [
-      "WARRIOR",
-      "MAGE",
-      "ROGUE",
-      "RANGER",
-      "PALADIN",
-      "ENGINEER",
-      "MERCHANT",
-      "SCHOLAR",
-      "BERSERKER",
-      "NECROMANCER",
-    ];
-    if (characterClass !== undefined && characterClass !== null) {
-      if (!validClasses.includes(characterClass)) {
-        return NextResponse.json(
-          { error: "Classe de personnage invalide" },
-          { status: 400 }
-        );
-      }
-    }
-
-    // Mettre à jour l'utilisateur
-    const updateData: {
-      username?: string;
-      avatar?: string | null;
-      bio?: string | null;
-      characterClass?: CharacterClass | null;
-    } = {};
-    if (username !== undefined) {
-      updateData.username = username.trim();
-    }
-    if (avatar !== undefined) {
-      updateData.avatar = avatar || null;
-    }
-    if (bio !== undefined) {
-      updateData.bio = bio === null ? null : bio.trim() || null;
-    }
-    if (characterClass !== undefined) {
-      updateData.characterClass = (characterClass as CharacterClass) || null;
-    }
-
-    const updatedUser = await prisma.user.update({
-      where: { id: session.user.id },
-      data: updateData,
-      select: {
-        id: true,
-        email: true,
-        username: true,
-        avatar: true,
-        bio: true,
-        characterClass: true,
-        hp: true,
-        maxHp: true,
-        xp: true,
-        maxXp: true,
-        level: true,
-        score: true,
-      },
-    });
-
-    return NextResponse.json(updatedUser);
-  } catch (error) {
-    console.error("Error updating profile:", error);
-    return NextResponse.json(
-      { error: "Erreur lors de la mise à jour du profil" },
-      { status: 500 }
-    );
-  }
-}

app/api/register/complete/route.ts

@@ -1,6 +1,10 @@
 import { NextResponse } from "next/server";
-import { prisma } from "@/lib/prisma";
-import { CharacterClass } from "@/prisma/generated/prisma/enums";
+import { userService } from "@/services/users/user.service";
+import {
+  ValidationError,
+  NotFoundError,
+  ConflictError,
+} from "@/services/errors";
 
 export async function POST(request: Request) {
   try {
@@ -14,139 +18,10 @@ export async function POST(request: Request) {
       );
     }
 
-    // Vérifier que l'utilisateur existe et a été créé récemment (dans les 10 dernières minutes)
-    const user = await prisma.user.findUnique({
-      where: { id: userId },
-    });
-
-    if (!user) {
-      return NextResponse.json(
-        { error: "Utilisateur non trouvé" },
-        { status: 404 }
-      );
-    }
-
-    // Vérifier que le compte a été créé récemment (dans les 10 dernières minutes)
-    const tenMinutesAgo = new Date(Date.now() - 10 * 60 * 1000);
-    if (user.createdAt < tenMinutesAgo) {
-      return NextResponse.json(
-        { error: "Temps écoulé pour finaliser l'inscription" },
-        { status: 400 }
-      );
-    }
-
-    // Validation username
-    if (username !== undefined) {
-      if (typeof username !== "string" || username.trim().length === 0) {
-        return NextResponse.json(
-          { error: "Le nom d'utilisateur ne peut pas être vide" },
-          { status: 400 }
-        );
-      }
-
-      if (username.length < 3 || username.length > 20) {
-        return NextResponse.json(
-          {
-            error:
-              "Le nom d'utilisateur doit contenir entre 3 et 20 caractères",
-          },
-          { status: 400 }
-        );
-      }
-
-      // Vérifier si le username est déjà pris par un autre utilisateur
-      const existingUser = await prisma.user.findFirst({
-        where: {
-          username: username.trim(),
-          NOT: { id: userId },
-        },
-      });
-
-      if (existingUser) {
-        return NextResponse.json(
-          { error: "Ce nom d'utilisateur est déjà pris" },
-          { status: 400 }
-        );
-      }
-    }
-
-    // Validation bio
-    if (bio !== undefined && bio !== null) {
-      if (typeof bio !== "string") {
-        return NextResponse.json(
-          { error: "La bio doit être une chaîne de caractères" },
-          { status: 400 }
-        );
-      }
-      if (bio.length > 500) {
-        return NextResponse.json(
-          { error: "La bio ne peut pas dépasser 500 caractères" },
-          { status: 400 }
-        );
-      }
-    }
-
-    // Validation characterClass
-    const validClasses = [
-      "WARRIOR",
-      "MAGE",
-      "ROGUE",
-      "RANGER",
-      "PALADIN",
-      "ENGINEER",
-      "MERCHANT",
-      "SCHOLAR",
-      "BERSERKER",
-      "NECROMANCER",
-    ];
-    if (characterClass !== undefined && characterClass !== null) {
-      if (!validClasses.includes(characterClass)) {
-        return NextResponse.json(
-          { error: "Classe de personnage invalide" },
-          { status: 400 }
-        );
-      }
-    }
-
-    // Mettre à jour l'utilisateur
-    const updateData: {
-      username?: string;
-      avatar?: string | null;
-      bio?: string | null;
-      characterClass?: CharacterClass | null;
-    } = {};
-
-    if (username !== undefined) {
-      updateData.username = username.trim();
-    }
-    if (avatar !== undefined) {
-      updateData.avatar = avatar || null;
-    }
-    if (bio !== undefined) {
-      if (bio === null || bio === "") {
-        updateData.bio = null;
-      } else if (typeof bio === "string") {
-        updateData.bio = bio.trim() || null;
-      } else {
-        updateData.bio = null;
-      }
-    }
-    if (characterClass !== undefined) {
-      updateData.characterClass = (characterClass as CharacterClass) || null;
-    }
-
-    // Si aucun champ à mettre à jour, retourner succès quand même
-    if (Object.keys(updateData).length === 0) {
-      return NextResponse.json({
-        message: "Profil finalisé avec succès",
-        userId: user.id,
-      });
-    }
-
-    const updatedUser = await prisma.user.update({
-      where: { id: userId },
-      data: updateData,
-    });
+    const updatedUser = await userService.validateAndCompleteRegistration(
+      userId,
+      { username, avatar, bio, characterClass }
+    );
 
     return NextResponse.json({
       message: "Profil finalisé avec succès",
@@ -154,11 +29,17 @@ export async function POST(request: Request) {
     });
   } catch (error) {
     console.error("Error completing registration:", error);
-    const errorMessage =
-      error instanceof Error ? error.message : "Erreur inconnue";
+
+    if (error instanceof ValidationError || error instanceof ConflictError) {
+      return NextResponse.json({ error: error.message }, { status: 400 });
+    }
+    if (error instanceof NotFoundError) {
+      return NextResponse.json({ error: error.message }, { status: 404 });
+    }
+
     return NextResponse.json(
       {
-        error: `Erreur lors de la finalisation de l'inscription: ${errorMessage}`,
+        error: `Erreur lors de la finalisation de l'inscription: ${error instanceof Error ? error.message : "Erreur inconnue"}`,
       },
       { status: 500 }
     );

app/api/register/route.ts

@@ -1,73 +1,19 @@
 import { NextResponse } from "next/server";
-import { prisma } from "@/lib/prisma";
-import bcrypt from "bcryptjs";
+import { userService } from "@/services/users/user.service";
+import { ValidationError, ConflictError } from "@/services/errors";
 
 export async function POST(request: Request) {
   try {
     const body = await request.json();
     const { email, username, password, bio, characterClass, avatar } = body;
 
-    if (!email || !username || !password) {
-      return NextResponse.json(
-        { error: "Email, nom d'utilisateur et mot de passe sont requis" },
-        { status: 400 }
-      );
-    }
-
-    if (password.length < 6) {
-      return NextResponse.json(
-        { error: "Le mot de passe doit contenir au moins 6 caractères" },
-        { status: 400 }
-      );
-    }
-
-    // Valider characterClass si fourni
-    const validCharacterClasses = [
-      "WARRIOR",
-      "MAGE",
-      "ROGUE",
-      "RANGER",
-      "PALADIN",
-      "ENGINEER",
-      "MERCHANT",
-      "SCHOLAR",
-      "BERSERKER",
-      "NECROMANCER",
-    ];
-    if (characterClass && !validCharacterClasses.includes(characterClass)) {
-      return NextResponse.json(
-        { error: "Classe de personnage invalide" },
-        { status: 400 }
-      );
-    }
-
-    // Vérifier si l'email existe déjà
-    const existingUser = await prisma.user.findFirst({
-      where: {
-        OR: [{ email }, { username }],
-      },
-    });
-
-    if (existingUser) {
-      return NextResponse.json(
-        { error: "Cet email ou nom d'utilisateur est déjà utilisé" },
-        { status: 400 }
-      );
-    }
-
-    // Hasher le mot de passe
-    const hashedPassword = await bcrypt.hash(password, 10);
-
-    // Créer l'utilisateur
-    const user = await prisma.user.create({
-      data: {
-        email,
-        username,
-        password: hashedPassword,
-        bio: bio || null,
-        characterClass: characterClass || null,
-        avatar: avatar || null,
-      },
+    const user = await userService.validateAndCreateUser({
+      email,
+      username,
+      password,
+      bio,
+      characterClass,
+      avatar,
     });
 
     return NextResponse.json(
@@ -76,6 +22,11 @@ export async function POST(request: Request) {
     );
   } catch (error) {
     console.error("Registration error:", error);
+
+    if (error instanceof ValidationError || error instanceof ConflictError) {
+      return NextResponse.json({ error: error.message }, { status: 400 });
+    }
+
     return NextResponse.json(
       { error: "Une erreur est survenue lors de l'inscription" },
       { status: 500 }

app/api/users/[id]/route.ts

@@ -1,6 +1,6 @@
 import { NextResponse } from "next/server";
 import { auth } from "@/lib/auth";
-import { prisma } from "@/lib/prisma";
+import { userService } from "@/services/users/user.service";
 
 export async function GET(
   request: Request,
@@ -19,19 +19,16 @@ export async function GET(
       return NextResponse.json({ error: "Accès refusé" }, { status: 403 });
     }
 
-    const user = await prisma.user.findUnique({
-      where: { id },
-      select: {
-        id: true,
-        username: true,
-        avatar: true,
-        hp: true,
-        maxHp: true,
-        xp: true,
-        maxXp: true,
-        level: true,
-        score: true,
-      },
+    const user = await userService.getUserById(id, {
+      id: true,
+      username: true,
+      avatar: true,
+      hp: true,
+      maxHp: true,
+      xp: true,
+      maxXp: true,
+      level: true,
+      score: true,
     });
 
     if (!user) {

app/api/users/route.ts

@@ -0,0 +1,43 @@
+import { NextResponse } from "next/server";
+import { auth } from "@/lib/auth";
+import { userService } from "@/services/users/user.service";
+
+export async function GET() {
+  try {
+    const session = await auth();
+
+    if (!session?.user?.id) {
+      return NextResponse.json(
+        { error: "Vous devez être connecté" },
+        { status: 401 }
+      );
+    }
+
+    // Récupérer tous les utilisateurs (pour sélectionner qui défier)
+    const users = await userService.getAllUsers({
+      orderBy: {
+        username: "asc",
+      },
+      select: {
+        id: true,
+        username: true,
+        avatar: true,
+        score: true,
+        level: true,
+      },
+    });
+
+    // Filtrer l'utilisateur actuel
+    const otherUsers = users.filter((user) => user.id !== session.user.id);
+
+    return NextResponse.json(otherUsers);
+  } catch (error) {
+    console.error("Error fetching users:", error);
+    return NextResponse.json(
+      { error: "Erreur lors de la récupération des utilisateurs" },
+      { status: 500 }
+    );
+  }
+}
+
+

app/challenges/page.tsx

@@ -0,0 +1,55 @@
+import { redirect } from "next/navigation";
+import { auth } from "@/lib/auth";
+import { getBackgroundImage } from "@/lib/preferences";
+import NavigationWrapper from "@/components/navigation/NavigationWrapper";
+import ChallengesSection from "@/components/challenges/ChallengesSection";
+import { challengeService } from "@/services/challenges/challenge.service";
+import { userService } from "@/services/users/user.service";
+
+export const dynamic = "force-dynamic";
+
+export default async function ChallengesPage() {
+  const session = await auth();
+
+  if (!session?.user) {
+    redirect("/login");
+  }
+
+  const [challengesRaw, users, backgroundImage] = await Promise.all([
+    challengeService.getUserChallenges(session.user.id),
+    userService
+      .getAllUsers({
+        orderBy: {
+          username: "asc",
+        },
+        select: {
+          id: true,
+          username: true,
+          avatar: true,
+          score: true,
+          level: true,
+        },
+      })
+      .then((users) => users.filter((user) => user.id !== session.user.id)),
+    getBackgroundImage("challenges", "/got-2.jpg"),
+  ]);
+
+  // Convertir les dates Date en string pour correspondre au type attendu par le composant
+  const challenges = challengesRaw.map((challenge) => ({
+    ...challenge,
+    createdAt: challenge.createdAt.toISOString(),
+    acceptedAt: challenge.acceptedAt?.toISOString() ?? null,
+    completedAt: challenge.completedAt?.toISOString() ?? null,
+  }));
+
+  return (
+    <main className="min-h-screen bg-black relative">
+      <NavigationWrapper />
+      <ChallengesSection
+        initialChallenges={challenges}
+        initialUsers={users}
+        backgroundImage={backgroundImage}
+      />
+    </main>
+  );
+}

app/events/page.tsx

@@ -1,17 +1,25 @@
-import NavigationWrapper from "@/components/NavigationWrapper";
-import EventsPageSection from "@/components/EventsPageSection";
-import { prisma } from "@/lib/prisma";
+import NavigationWrapper from "@/components/navigation/NavigationWrapper";
+import EventsPageSection from "@/components/events/EventsPageSection";
+import { eventService } from "@/services/events/event.service";
+import { eventRegistrationService } from "@/services/events/event-registration.service";
 import { getBackgroundImage } from "@/lib/preferences";
 import { auth } from "@/lib/auth";
 
 export const dynamic = "force-dynamic";
 
 export default async function EventsPage() {
-  const events = await prisma.event.findMany({
-    orderBy: {
-      date: "desc",
-    },
-  });
+  // Paralléliser les appels indépendants
+  const session = await auth();
+  
+  const [events, backgroundImage, allRegistrations] = await Promise.all([
+    eventService.getAllEvents({
+      orderBy: { date: "desc" },
+    }),
+    getBackgroundImage("events", "/got-2.jpg"),
+    session?.user?.id
+      ? eventRegistrationService.getUserRegistrations(session.user.id)
+      : Promise.resolve([]),
+  ]);
 
   // Sérialiser les dates pour le client
   const serializedEvents = events.map((event) => ({
@@ -21,27 +29,11 @@ export default async function EventsPage() {
     updatedAt: event.updatedAt.toISOString(),
   }));
 
-  const backgroundImage = await getBackgroundImage("events", "/got-2.jpg");
-
-  // Récupérer les inscriptions côté serveur pour éviter le clignotement
-  const session = await auth();
+  // Construire le map des inscriptions
   const initialRegistrations: Record<string, boolean> = {};
-
-  if (session?.user?.id) {
-    // Récupérer toutes les inscriptions (passées et à venir) pour permettre le feedback
-    const allRegistrations = await prisma.eventRegistration.findMany({
-      where: {
-        userId: session.user.id,
-      },
-      select: {
-        eventId: true,
-      },
-    });
-
-    allRegistrations.forEach((reg) => {
-      initialRegistrations[reg.eventId] = true;
-    });
-  }
+  allRegistrations.forEach((reg) => {
+    initialRegistrations[reg.eventId] = true;
+  });
 
   return (
     <main className="min-h-screen bg-black relative">

app/feedback/[eventId]/FeedbackPageClient.tsx

@@ -1,9 +1,19 @@
 "use client";
 
-import { useState, useEffect, type FormEvent } from "react";
+import { useState, useEffect, useTransition, type FormEvent } from "react";
 import { useSession } from "next-auth/react";
 import { useRouter, useParams } from "next/navigation";
-import Navigation from "@/components/Navigation";
+import Navigation from "@/components/navigation/Navigation";
+import { createFeedback } from "@/actions/events/feedback";
+import {
+  StarRating,
+  Textarea,
+  Button,
+  Alert,
+  Card,
+  BackgroundSection,
+  SectionTitle,
+} from "@/components/ui";
 
 interface Event {
   id: string;
@@ -38,6 +48,7 @@ export default function FeedbackPageClient({
   const [submitting, setSubmitting] = useState(false);
   const [error, setError] = useState("");
   const [success, setSuccess] = useState(false);
+  const [, startTransition] = useTransition();
 
   const [rating, setRating] = useState(0);
   const [comment, setComment] = useState("");
@@ -95,37 +106,41 @@ export default function FeedbackPageClient({
 
     setSubmitting(true);
 
-    try {
-      const response = await fetch(`/api/feedback/${eventId}`, {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
+    startTransition(async () => {
+      try {
+        const result = await createFeedback(eventId, {
           rating,
           comment: comment.trim() || null,
-        }),
-      });
+        });
 
-      const data = await response.json();
+        if (!result.success) {
+          setError(result.error || "Erreur lors de l'enregistrement");
+          setSubmitting(false);
+          return;
+        }
 
-      if (!response.ok) {
-        setError(data.error || "Erreur lors de l'enregistrement");
-        return;
+        setSuccess(true);
+        if (result.data) {
+          setExistingFeedback({
+            id: result.data.id,
+            rating: result.data.rating,
+            comment: result.data.comment,
+          });
+        }
+
+        // Rafraîchir le score dans le header
+        window.dispatchEvent(new Event("refreshUserScore"));
+
+        // Rediriger après 2 secondes
+        setTimeout(() => {
+          router.push("/events");
+        }, 2000);
+      } catch {
+        setError("Erreur lors de l'enregistrement");
+      } finally {
+        setSubmitting(false);
       }
-
-      setSuccess(true);
-      setExistingFeedback(data.feedback);
-
-      // Rediriger après 2 secondes
-      setTimeout(() => {
-        router.push("/events");
-      }, 2000);
-    } catch {
-      setError("Erreur lors de l'enregistrement");
-    } finally {
-      setSubmitting(false);
-    }
+    });
   };
 
   if (status === "loading" || loading) {
@@ -153,25 +168,17 @@ export default function FeedbackPageClient({
   return (
     <main className="min-h-screen bg-black relative">
       <Navigation />
-      <section className="relative w-full min-h-screen flex flex-col items-center justify-center overflow-hidden pt-24">
-        {/* Background Image */}
-        <div
-          className="absolute inset-0 bg-cover bg-center bg-no-repeat"
-          style={{
-            backgroundImage: `url('${backgroundImage}')`,
-          }}
-        >
-          <div className="absolute inset-0 bg-gradient-to-b from-black/70 via-black/60 to-black/80"></div>
-        </div>
-
+      <BackgroundSection backgroundImage={backgroundImage} className="pt-24">
         {/* Feedback Form */}
-        <div className="relative z-10 w-full max-w-2xl mx-auto px-8">
-          <div className="bg-black/80 border border-pixel-gold/30 rounded-lg p-8 backdrop-blur-sm">
-            <h1 className="text-4xl font-gaming font-black mb-2 text-center">
-              <span className="bg-gradient-to-r from-pixel-gold via-orange-400 to-pixel-gold bg-clip-text text-transparent">
-                FEEDBACK
-              </span>
-            </h1>
+        <div className="w-full max-w-2xl mx-auto px-8">
+          <Card variant="dark" className="p-8">
+            <SectionTitle
+              variant="gradient"
+              size="lg"
+              className="mb-2 text-center"
+            >
+              FEEDBACK
+            </SectionTitle>
             <p className="text-gray-400 text-sm text-center mb-2">
               {existingFeedback
                 ? "Modifier votre feedback pour"
@@ -182,15 +189,15 @@ export default function FeedbackPageClient({
             </p>
 
             {success && (
-              <div className="bg-green-900/50 border border-green-500/50 text-green-400 px-4 py-3 rounded text-sm mb-6">
+              <Alert variant="success" className="mb-6">
                 Feedback enregistré avec succès ! Redirection...
-              </div>
+              </Alert>
             )}
 
             {error && (
-              <div className="bg-red-900/50 border border-red-500/50 text-red-400 px-4 py-3 rounded text-sm mb-6">
+              <Alert variant="error" className="mb-6">
                 {error}
-              </div>
+              </Alert>
             )}
 
             <form onSubmit={handleSubmit} className="space-y-6">
@@ -199,67 +206,44 @@ export default function FeedbackPageClient({
                 <label className="block text-sm font-semibold text-gray-300 mb-4 uppercase tracking-wider">
                   Note
                 </label>
-                <div className="flex items-center justify-center gap-2">
-                  {[1, 2, 3, 4, 5].map((star) => (
-                    <button
-                      key={star}
-                      type="button"
-                      onClick={() => setRating(star)}
-                      className={`text-4xl transition-transform hover:scale-110 ${
-                        star <= rating
-                          ? "text-pixel-gold"
-                          : "text-gray-600 hover:text-gray-500"
-                      }`}
-                      aria-label={`Noter ${star} étoile${star > 1 ? "s" : ""}`}
-                    >
-                      ★
-                    </button>
-                  ))}
-                </div>
-                <p className="text-gray-500 text-xs text-center mt-2">
-                  {rating > 0 && `${rating}/5`}
-                </p>
+                <StarRating
+                  value={rating}
+                  onChange={setRating}
+                  size="lg"
+                  showValue
+                />
               </div>
 
               {/* Comment */}
-              <div>
-                <label
-                  htmlFor="comment"
-                  className="block text-sm font-semibold text-gray-300 mb-2 uppercase tracking-wider"
-                >
-                  Commentaire (optionnel)
-                </label>
-                <textarea
-                  id="comment"
-                  value={comment}
-                  onChange={(e) => setComment(e.target.value)}
-                  rows={6}
-                  maxLength={1000}
-                  className="w-full px-4 py-3 bg-black/60 border border-pixel-gold/30 rounded text-white placeholder-gray-500 focus:outline-none focus:border-pixel-gold transition resize-none"
-                  placeholder="Partagez votre expérience, vos suggestions..."
-                />
-                <p className="text-gray-500 text-xs mt-1 text-right">
-                  {comment.length}/1000 caractères
-                </p>
-              </div>
+              <Textarea
+                id="comment"
+                label="Commentaire (optionnel)"
+                value={comment}
+                onChange={(e) => setComment(e.target.value)}
+                rows={6}
+                maxLength={1000}
+                showCharCount
+                placeholder="Partagez votre expérience, vos suggestions..."
+              />
 
               {/* Submit Button */}
-              <button
+              <Button
                 type="submit"
+                variant="primary"
+                size="lg"
                 disabled={submitting || rating === 0}
-                className="w-full px-6 py-3 border border-pixel-gold/50 bg-black/60 text-white uppercase text-sm tracking-widest rounded hover:bg-pixel-gold/10 hover:border-pixel-gold transition disabled:opacity-50 disabled:cursor-not-allowed"
+                className="w-full"
               >
                 {submitting
                   ? "Enregistrement..."
                   : existingFeedback
                     ? "Modifier le feedback"
                     : "Envoyer le feedback"}
-              </button>
+              </Button>
             </form>
-          </div>
+          </Card>
         </div>
-      </section>
+      </BackgroundSection>
     </main>
   );
 }
-

app/globals.css

@@ -2,9 +2,107 @@
 @tailwind components;
 @tailwind utilities;
 
+:root {
+  /* Font variables - will be overridden by Next.js Font */
+  --font-orbitron: "Orbitron", sans-serif;
+  --font-rajdhani: "Rajdhani", sans-serif;
+
+  /* Dark cyan theme (default) */
+  --background: #001d2e;
+  --foreground: #ffffff;
+  --card: rgba(0, 29, 46, 0.6);
+  --card-hover: rgba(0, 29, 46, 0.8);
+  --card-column: rgba(0, 29, 46, 0.8);
+  --border: rgba(29, 254, 228, 0.3);
+  --input: rgba(0, 29, 46, 0.6);
+  --primary: #1dfee4;
+  --primary-foreground: #001d2e;
+  --muted: #9ca3af;
+  --muted-foreground: #9ca3af;
+  --gray-300: #d1d5db;
+  --gray-400: #9ca3af;
+  --gray-500: #6b7280;
+  --gray-600: #4b5563;
+  --gray-700: #374151;
+  --gray-800: #1f2937;
+  --gray-900: #111827;
+  --accent: #1dfee4;
+  --destructive: #ef4444;
+  --success: #10b981;
+  --purple: #8b5cf6;
+  --yellow: #eab308;
+  --green: #10b981;
+  --blue: #3b82f6;
+  --pixel-gold: #1dfee4;
+  --accent-color: #1dfee4;
+}
+
+.dark {
+  /* Dark gold theme (original) */
+  --background: #000000;
+  --foreground: #ffffff;
+  --card: rgba(0, 0, 0, 0.6);
+  --card-hover: rgba(0, 0, 0, 0.8);
+  --card-column: rgba(0, 0, 0, 0.8);
+  --border: rgba(218, 165, 32, 0.3);
+  --input: rgba(0, 0, 0, 0.6);
+  --primary: #06b6d4;
+  --primary-foreground: #ffffff;
+  --muted: #9ca3af;
+  --muted-foreground: #9ca3af;
+  --gray-300: #d1d5db;
+  --gray-400: #9ca3af;
+  --gray-500: #6b7280;
+  --gray-600: #4b5563;
+  --gray-700: #374151;
+  --gray-800: #1f2937;
+  --gray-900: #111827;
+  --accent: #ff8c00;
+  --destructive: #ef4444;
+  --success: #10b981;
+  --purple: #8b5cf6;
+  --yellow: #eab308;
+  --green: #10b981;
+  --blue: #3b82f6;
+  --pixel-gold: #daa520;
+  --accent-color: #daa520;
+}
+
+.dark-cyan {
+  /* Dark cyan theme (new) */
+  --background: #001d2e;
+  --foreground: #ffffff;
+  --card: rgba(0, 29, 46, 0.6);
+  --card-hover: rgba(0, 29, 46, 0.8);
+  --card-column: rgba(0, 29, 46, 0.8);
+  --border: rgba(29, 254, 228, 0.3);
+  --input: rgba(0, 29, 46, 0.6);
+  --primary: #1dfee4;
+  --primary-foreground: #001d2e;
+  --muted: #9ca3af;
+  --muted-foreground: #9ca3af;
+  --gray-300: #d1d5db;
+  --gray-400: #9ca3af;
+  --gray-500: #6b7280;
+  --gray-600: #4b5563;
+  --gray-700: #374151;
+  --gray-800: #1f2937;
+  --gray-900: #111827;
+  --accent: #1dfee4;
+  --destructive: #ef4444;
+  --success: #10b981;
+  --purple: #8b5cf6;
+  --yellow: #eab308;
+  --green: #10b981;
+  --blue: #3b82f6;
+  --pixel-gold: #1dfee4;
+  --accent-color: #1dfee4;
+}
+
 @layer base {
   body {
-    @apply bg-black text-white;
+    background-color: var(--background);
+    color: var(--foreground);
     font-family:
       -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
       "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
@@ -31,4 +129,65 @@
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
   }
+
+  @keyframes shimmer {
+    0% {
+      transform: translateX(-100%);
+    }
+    100% {
+      transform: translateX(100%);
+    }
+  }
+
+  .animate-shimmer {
+    animation: shimmer 2s infinite;
+  }
+
+  /* Button hover states using CSS variables */
+  .btn-primary {
+    border-color: color-mix(in srgb, var(--accent-color) 50%, transparent);
+    background-color: color-mix(in srgb, var(--background) 60%, transparent);
+    color: var(--foreground);
+  }
+  .btn-primary:hover:not(:disabled) {
+    border-color: var(--accent-color);
+    background-color: color-mix(in srgb, var(--accent-color) 10%, transparent);
+  }
+
+  .btn-secondary {
+    border-color: rgba(107, 114, 128, 0.5);
+    background-color: rgba(31, 41, 55, 0.2);
+    color: var(--gray-400);
+  }
+  .btn-secondary:hover:not(:disabled) {
+    border-color: var(--gray-500);
+    background-color: rgba(31, 41, 55, 0.3);
+  }
+
+  .btn-success {
+    border-color: rgba(16, 185, 129, 0.5);
+    background-color: rgba(16, 185, 129, 0.2);
+    color: var(--success);
+  }
+  .btn-success:hover:not(:disabled) {
+    background-color: rgba(16, 185, 129, 0.3);
+  }
+
+  .btn-danger {
+    border-color: rgba(239, 68, 68, 0.5);
+    background-color: rgba(239, 68, 68, 0.2);
+    color: var(--destructive);
+  }
+  .btn-danger:hover:not(:disabled) {
+    background-color: rgba(239, 68, 68, 0.3);
+  }
+
+  .btn-ghost {
+    border-color: transparent;
+    background-color: transparent;
+    color: var(--foreground);
+  }
+  .btn-ghost:hover:not(:disabled) {
+    color: var(--accent-color);
+  }
 }

app/houses/page.tsx

@@ -0,0 +1,207 @@
+import { redirect } from "next/navigation";
+import { auth } from "@/lib/auth";
+import { getBackgroundImage } from "@/lib/preferences";
+import NavigationWrapper from "@/components/navigation/NavigationWrapper";
+import HousesSection from "@/components/houses/HousesSection";
+import { houseService } from "@/services/houses/house.service";
+import { prisma } from "@/services/database";
+import type {
+  House,
+  HouseMembership,
+  HouseInvitation,
+} from "@/prisma/generated/prisma/client";
+
+export const dynamic = "force-dynamic";
+
+// Types pour les données sérialisées
+type HouseWithRelations = House & {
+  creator?: {
+    id: string;
+    username: string;
+    avatar: string | null;
+  } | null;
+  creatorId?: string;
+  memberships?: Array<
+    HouseMembership & {
+      user: {
+        id: string;
+        username: string;
+        avatar: string | null;
+        score: number | null;
+        level: number | null;
+      };
+    }
+  >;
+};
+
+type InvitationWithRelations = HouseInvitation & {
+  house: {
+    id: string;
+    name: string;
+  };
+  inviter: {
+    id: string;
+    username: string;
+    avatar: string | null;
+  };
+};
+
+export default async function HousesPage() {
+  const session = await auth();
+
+  if (!session?.user?.id) {
+    redirect("/login");
+  }
+
+  const [housesData, myHouseData, invitationsData, users, backgroundImage] =
+    await Promise.all([
+      // Récupérer les maisons
+      houseService.getAllHouses({
+        include: {
+          memberships: {
+            include: {
+              user: {
+                select: {
+                  id: true,
+                  username: true,
+                  avatar: true,
+                  score: true,
+                  level: true,
+                },
+              },
+            },
+            orderBy: [
+              { role: "asc" }, // OWNER, ADMIN, MEMBER
+              { user: { score: "desc" } }, // Puis par score décroissant
+            ],
+          },
+          creator: {
+            select: {
+              id: true,
+              username: true,
+              avatar: true,
+            },
+          },
+        },
+      }),
+      // Récupérer la maison de l'utilisateur
+      houseService.getUserHouse(session.user.id, {
+        memberships: {
+          include: {
+            user: {
+              select: {
+                id: true,
+                username: true,
+                avatar: true,
+                score: true,
+                level: true,
+              },
+            },
+          },
+        },
+        creator: {
+          select: {
+            id: true,
+            username: true,
+            avatar: true,
+          },
+        },
+      }),
+      // Récupérer les invitations de l'utilisateur
+      houseService.getUserInvitations(session.user.id, "PENDING"),
+      // Récupérer tous les utilisateurs sans maison pour les invitations
+      prisma.user.findMany({
+        where: {
+          houseMemberships: {
+            none: {},
+          },
+        },
+        select: {
+          id: true,
+          username: true,
+          avatar: true,
+        },
+        orderBy: {
+          username: "asc",
+        },
+      }),
+      getBackgroundImage("houses", "/got-2.jpg"),
+    ]);
+
+  // Sérialiser les données pour le client
+  const houses = (housesData as HouseWithRelations[]).map(
+    (house: HouseWithRelations) => ({
+      id: house.id,
+      name: house.name,
+      description: house.description,
+      creator: house.creator || {
+        id: house.creatorId || "",
+        username: "Unknown",
+        avatar: null,
+      },
+      memberships: (house.memberships || []).map((m) => ({
+        id: m.id,
+        role: m.role,
+        user: {
+          id: m.user.id,
+          username: m.user.username,
+          avatar: m.user.avatar,
+          score: m.user.score ?? 0,
+          level: m.user.level ?? 1,
+        },
+      })),
+    })
+  );
+
+  const myHouse = myHouseData
+    ? {
+        id: myHouseData.id,
+        name: myHouseData.name,
+        description: myHouseData.description,
+        creator: (myHouseData as HouseWithRelations).creator || {
+          id: (myHouseData as HouseWithRelations).creatorId || "",
+          username: "Unknown",
+          avatar: null,
+        },
+        memberships: (
+          (myHouseData as HouseWithRelations).memberships || []
+        ).map((m) => ({
+          id: m.id,
+          role: m.role,
+          user: {
+            id: m.user.id,
+            username: m.user.username,
+            avatar: m.user.avatar,
+            score: m.user.score ?? 0,
+            level: m.user.level ?? 1,
+          },
+        })),
+      }
+    : null;
+
+  const invitations = (invitationsData as InvitationWithRelations[]).map(
+    (inv: InvitationWithRelations) => ({
+      id: inv.id,
+      house: {
+        id: inv.house.id,
+        name: inv.house.name,
+      },
+      inviter: inv.inviter,
+      status: inv.status,
+      createdAt: inv.createdAt.toISOString(),
+    })
+  );
+
+  return (
+    <main className="min-h-screen bg-black relative">
+      <NavigationWrapper />
+      <HousesSection
+        initialHouses={houses}
+        initialMyHouse={myHouse}
+        initialUsers={users}
+        initialInvitations={invitations}
+        backgroundImage={backgroundImage}
+      />
+    </main>
+  );
+}

app/layout.tsx

@@ -2,7 +2,9 @@ import type { Metadata } from "next";
 import type { ReactNode } from "react";
 import { Orbitron, Rajdhani } from "next/font/google";
 import "./globals.css";
-import SessionProvider from "@/components/SessionProvider";
+import SessionProvider from "@/components/layout/SessionProvider";
+import { ThemeProvider } from "@/contexts/ThemeContext";
+import Footer from "@/components/layout/Footer";
 
 const orbitron = Orbitron({
   subsets: ["latin"],
@@ -27,9 +29,17 @@ export default function RootLayout({
   children: ReactNode;
 }>) {
   return (
-    <html lang="fr" className={`${orbitron.variable} ${rajdhani.variable}`}>
+    <html
+      lang="fr"
+      className={`${orbitron.variable} ${rajdhani.variable} dark-cyan`}
+    >
       <body className="antialiased">
-        <SessionProvider>{children}</SessionProvider>
+        <ThemeProvider>
+          <SessionProvider>
+            {children}
+            <Footer />
+          </SessionProvider>
+        </ThemeProvider>
       </body>
     </html>
   );

app/leaderboard/page.tsx

@@ -1,60 +1,24 @@
-import NavigationWrapper from "@/components/NavigationWrapper";
-import LeaderboardSection from "@/components/LeaderboardSection";
-import { prisma } from "@/lib/prisma";
+import NavigationWrapper from "@/components/navigation/NavigationWrapper";
+import LeaderboardSection from "@/components/leaderboard/LeaderboardSection";
+import { userStatsService } from "@/services/users/user-stats.service";
 import { getBackgroundImage } from "@/lib/preferences";
 
 export const dynamic = "force-dynamic";
 
-interface LeaderboardEntry {
-  rank: number;
-  username: string;
-  email: string;
-  score: number;
-  level: number;
-  avatar: string | null;
-  bio: string | null;
-  characterClass: string | null;
-}
-
 export default async function LeaderboardPage() {
-  const users = await prisma.user.findMany({
-    orderBy: {
-      score: "desc",
-    },
-    take: 10,
-    select: {
-      id: true,
-      username: true,
-      email: true,
-      score: true,
-      level: true,
-      avatar: true,
-      bio: true,
-      characterClass: true,
-    },
-  });
-
-  const leaderboard: LeaderboardEntry[] = users.map((user, index) => ({
-    rank: index + 1,
-    username: user.username,
-    email: user.email,
-    score: user.score,
-    level: user.level,
-    avatar: user.avatar,
-    bio: user.bio,
-    characterClass: user.characterClass,
-  }));
-
-  const backgroundImage = await getBackgroundImage(
-    "leaderboard",
-    "/leaderboard-bg.jpg"
-  );
+  // Paralléliser les appels DB
+  const [leaderboard, houseLeaderboard, backgroundImage] = await Promise.all([
+    userStatsService.getLeaderboard(10),
+    userStatsService.getHouseLeaderboard(10),
+    getBackgroundImage("leaderboard", "/leaderboard-bg.jpg"),
+  ]);
 
   return (
     <main className="min-h-screen bg-black relative">
       <NavigationWrapper />
       <LeaderboardSection
         leaderboard={leaderboard}
+        houseLeaderboard={houseLeaderboard}
         backgroundImage={backgroundImage}
       />
     </main>

app/login/page.tsx

@@ -4,7 +4,15 @@ import { useState, type FormEvent } from "react";
 import { signIn } from "next-auth/react";
 import { useRouter } from "next/navigation";
 import Link from "next/link";
-import Navigation from "@/components/Navigation";
+import Navigation from "@/components/navigation/Navigation";
+import {
+  Input,
+  Button,
+  Alert,
+  Card,
+  BackgroundSection,
+  SectionTitle,
+} from "@/components/ui";
 
 export default function LoginPage() {
   const router = useRouter();
@@ -46,79 +54,53 @@ export default function LoginPage() {
   return (
     <main className="min-h-screen bg-black relative">
       <Navigation />
-      <section className="relative w-full min-h-screen flex flex-col items-center justify-center overflow-hidden pt-24">
-        {/* Background Image */}
-        <div
-          className="absolute inset-0 bg-cover bg-center bg-no-repeat"
-          style={{
-            backgroundImage: `url('/got-2.jpg')`,
-          }}
-        >
-          <div className="absolute inset-0 bg-gradient-to-b from-black/70 via-black/60 to-black/80"></div>
-        </div>
-
+      <BackgroundSection backgroundImage="/got-2.jpg" className="pt-24">
         {/* Login Form */}
-        <div className="relative z-10 w-full max-w-md mx-auto px-8">
-          <div className="bg-black/80 border border-pixel-gold/30 rounded-lg p-8 backdrop-blur-sm">
-            <h1 className="text-4xl font-gaming font-black mb-2 text-center">
-              <span className="bg-gradient-to-r from-pixel-gold via-orange-400 to-pixel-gold bg-clip-text text-transparent">
-                CONNEXION
-              </span>
-            </h1>
+        <div className="w-full max-w-md mx-auto px-8">
+          <Card variant="dark" className="p-8">
+            <SectionTitle
+              variant="gradient"
+              size="md"
+              className="mb-2 text-center"
+            >
+              CONNEXION
+            </SectionTitle>
             <p className="text-gray-400 text-sm text-center mb-8">
               Connectez-vous à votre compte
             </p>
 
             <form onSubmit={handleSubmit} className="space-y-6">
-              {error && (
-                <div className="bg-red-900/50 border border-red-500/50 text-red-400 px-4 py-3 rounded text-sm">
-                  {error}
-                </div>
-              )}
+              {error && <Alert variant="error">{error}</Alert>}
 
-              <div>
-                <label
-                  htmlFor="email"
-                  className="block text-sm font-semibold text-gray-300 mb-2 uppercase tracking-wider"
-                >
-                  Email
-                </label>
-                <input
-                  id="email"
-                  type="email"
-                  value={email}
-                  onChange={(e) => setEmail(e.target.value)}
-                  required
-                  className="w-full px-4 py-3 bg-black/60 border border-pixel-gold/30 rounded text-white placeholder-gray-500 focus:outline-none focus:border-pixel-gold transition"
-                  placeholder="votre@email.com"
-                />
-              </div>
+              <Input
+                id="email"
+                type="email"
+                label="Email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                required
+                placeholder="votre@email.com"
+              />
 
-              <div>
-                <label
-                  htmlFor="password"
-                  className="block text-sm font-semibold text-gray-300 mb-2 uppercase tracking-wider"
-                >
-                  Mot de passe
-                </label>
-                <input
-                  id="password"
-                  type="password"
-                  value={password}
-                  onChange={(e) => setPassword(e.target.value)}
-                  required
-                  className="w-full px-4 py-3 bg-black/60 border border-pixel-gold/30 rounded text-white placeholder-gray-500 focus:outline-none focus:border-pixel-gold transition"
-                  placeholder="••••••••"
-                />
-              </div>
+              <Input
+                id="password"
+                type="password"
+                label="Mot de passe"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                required
+                placeholder="••••••••"
+              />
 
-              <button
+              <Button
                 type="submit"
+                variant="primary"
+                size="lg"
                 disabled={loading}
-                className="w-full px-6 py-3 border border-pixel-gold/50 bg-black/60 text-white uppercase text-sm tracking-widest rounded hover:bg-pixel-gold/10 hover:border-pixel-gold transition disabled:opacity-50 disabled:cursor-not-allowed"
+                className="w-full"
               >
                 {loading ? "Connexion..." : "Se connecter"}
-              </button>
+              </Button>
             </form>
 
             <div className="mt-6 text-center">
@@ -132,9 +114,9 @@ export default function LoginPage() {
                 </Link>
               </p>
             </div>
-          </div>
+          </Card>
         </div>
-      </section>
+      </BackgroundSection>
     </main>
   );
 }

app/page.tsx

@@ -1,18 +1,17 @@
-import NavigationWrapper from "@/components/NavigationWrapper";
-import HeroSection from "@/components/HeroSection";
-import EventsSection from "@/components/EventsSection";
-import { prisma } from "@/lib/prisma";
+import NavigationWrapper from "@/components/navigation/NavigationWrapper";
+import HeroSection from "@/components/layout/HeroSection";
+import EventsSection from "@/components/events/EventsSection";
+import { eventService } from "@/services/events/event.service";
 import { getBackgroundImage } from "@/lib/preferences";
 
 export const dynamic = "force-dynamic";
 
 export default async function Home() {
-  const events = await prisma.event.findMany({
-    orderBy: {
-      date: "asc",
-    },
-    take: 3,
-  });
+  // Paralléliser les appels DB
+  const [events, backgroundImage] = await Promise.all([
+    eventService.getUpcomingEvents(3),
+    getBackgroundImage("home", "/got-2.jpg"),
+  ]);
 
   // Convert Date objects to strings for serialization
   const serializedEvents = events.map((event) => ({
@@ -20,11 +19,8 @@ export default async function Home() {
     date: event.date.toISOString(),
   }));
 
-  // Récupérer l'image de fond côté serveur
-  const backgroundImage = await getBackgroundImage("home", "/got-2.jpg");
-
   return (
-    <main className="min-h-screen bg-black relative">
+    <main className="min-h-screen relative" style={{ backgroundColor: "var(--background)" }}>
       <NavigationWrapper />
       <HeroSection backgroundImage={backgroundImage} />
       <EventsSection events={serializedEvents} />

app/profile/page.tsx

@@ -1,9 +1,9 @@
 import { redirect } from "next/navigation";
 import { auth } from "@/lib/auth";
-import { prisma } from "@/lib/prisma";
+import { userService } from "@/services/users/user.service";
 import { getBackgroundImage } from "@/lib/preferences";
-import NavigationWrapper from "@/components/NavigationWrapper";
-import ProfileForm from "@/components/ProfileForm";
+import NavigationWrapper from "@/components/navigation/NavigationWrapper";
+import ProfileForm from "@/components/profile/ProfileForm";
 
 export default async function ProfilePage() {
   const session = await auth();
@@ -12,9 +12,9 @@ export default async function ProfilePage() {
     redirect("/login");
   }
 
-  const user = await prisma.user.findUnique({
-    where: { id: session.user.id },
-    select: {
+  // Paralléliser les appels DB
+  const [user, backgroundImage] = await Promise.all([
+    userService.getUserById(session.user.id, {
       id: true,
       email: true,
       username: true,
@@ -28,18 +28,14 @@ export default async function ProfilePage() {
       level: true,
       score: true,
       createdAt: true,
-    },
-  });
+    }),
+    getBackgroundImage("profile", "/got-background.jpg"),
+  ]);
 
   if (!user) {
     redirect("/login");
   }
 
-  const backgroundImage = await getBackgroundImage(
-    "home",
-    "/got-background.jpg"
-  );
-
   // Convert Date to string for the component
   const userProfile = {
     ...user,

app/register/page.tsx

@@ -3,8 +3,18 @@
 import { useState, useRef, type ChangeEvent, type FormEvent } from "react";
 import { useRouter } from "next/navigation";
 import Link from "next/link";
-import Navigation from "@/components/Navigation";
-import Avatar from "@/components/Avatar";
+import Navigation from "@/components/navigation/Navigation";
+import {
+  Avatar,
+  Input,
+  Textarea,
+  Button,
+  Alert,
+  Card,
+  BackgroundSection,
+  SectionTitle,
+} from "@/components/ui";
+import { CHARACTER_CLASSES } from "@/lib/character-classes";
 
 export default function RegisterPage() {
   const router = useRouter();
@@ -162,25 +172,17 @@ export default function RegisterPage() {
   return (
     <main className="min-h-screen bg-black relative">
       <Navigation />
-      <section className="relative w-full min-h-screen flex flex-col items-center justify-center overflow-hidden pt-24">
-        {/* Background Image */}
-        <div
-          className="absolute inset-0 bg-cover bg-center bg-no-repeat"
-          style={{
-            backgroundImage: `url('/got-2.jpg')`,
-          }}
-        >
-          <div className="absolute inset-0 bg-gradient-to-b from-black/70 via-black/60 to-black/80"></div>
-        </div>
-
+      <BackgroundSection backgroundImage="/got-2.jpg" className="pt-24">
         {/* Register Form */}
-        <div className="relative z-10 w-full max-w-md mx-auto px-8">
-          <div className="bg-black/80 border border-pixel-gold/30 rounded-lg p-8 backdrop-blur-sm">
-            <h1 className="text-4xl font-gaming font-black mb-2 text-center">
-              <span className="bg-gradient-to-r from-pixel-gold via-orange-400 to-pixel-gold bg-clip-text text-transparent">
-                INSCRIPTION
-              </span>
-            </h1>
+        <div className="w-full max-w-4xl mx-auto px-8">
+          <Card variant="dark" className="p-8">
+            <SectionTitle
+              variant="gradient"
+              size="lg"
+              className="mb-2 text-center"
+            >
+              INSCRIPTION
+            </SectionTitle>
             <p className="text-gray-400 text-sm text-center mb-4">
               {step === 1
                 ? "Créez votre compte pour commencer"
@@ -216,103 +218,65 @@ export default function RegisterPage() {
 
             {step === 1 ? (
               <form onSubmit={handleStep1Submit} className="space-y-6">
-                {error && (
-                  <div className="bg-red-900/50 border border-red-500/50 text-red-400 px-4 py-3 rounded text-sm">
-                    {error}
-                  </div>
-                )}
+                {error && <Alert variant="error">{error}</Alert>}
 
-                <div>
-                  <label
-                    htmlFor="email"
-                    className="block text-sm font-semibold text-gray-300 mb-2 uppercase tracking-wider"
-                  >
-                    Email
-                  </label>
-                  <input
-                    id="email"
-                    name="email"
-                    type="email"
-                    value={formData.email}
-                    onChange={handleChange}
-                    required
-                    className="w-full px-4 py-3 bg-black/60 border border-pixel-gold/30 rounded text-white placeholder-gray-500 focus:outline-none focus:border-pixel-gold transition"
-                    placeholder="votre@email.com"
-                  />
-                </div>
+                <Input
+                  id="email"
+                  name="email"
+                  type="email"
+                  label="Email"
+                  value={formData.email}
+                  onChange={handleChange}
+                  required
+                  placeholder="votre@email.com"
+                />
 
-                <div>
-                  <label
-                    htmlFor="username"
-                    className="block text-sm font-semibold text-gray-300 mb-2 uppercase tracking-wider"
-                  >
-                    Nom d&apos;utilisateur
-                  </label>
-                  <input
-                    id="username"
-                    name="username"
-                    type="text"
-                    value={formData.username}
-                    onChange={handleChange}
-                    required
-                    className="w-full px-4 py-3 bg-black/60 border border-pixel-gold/30 rounded text-white placeholder-gray-500 focus:outline-none focus:border-pixel-gold transition"
-                    placeholder="VotrePseudo"
-                  />
-                </div>
+                <Input
+                  id="username"
+                  name="username"
+                  type="text"
+                  label="Nom d'utilisateur"
+                  value={formData.username}
+                  onChange={handleChange}
+                  required
+                  placeholder="VotrePseudo"
+                />
 
-                <div>
-                  <label
-                    htmlFor="password"
-                    className="block text-sm font-semibold text-gray-300 mb-2 uppercase tracking-wider"
-                  >
-                    Mot de passe
-                  </label>
-                  <input
-                    id="password"
-                    name="password"
-                    type="password"
-                    value={formData.password}
-                    onChange={handleChange}
-                    required
-                    className="w-full px-4 py-3 bg-black/60 border border-pixel-gold/30 rounded text-white placeholder-gray-500 focus:outline-none focus:border-pixel-gold transition"
-                    placeholder="••••••••"
-                  />
-                </div>
+                <Input
+                  id="password"
+                  name="password"
+                  type="password"
+                  label="Mot de passe"
+                  value={formData.password}
+                  onChange={handleChange}
+                  required
+                  placeholder="••••••••"
+                />
 
-                <div>
-                  <label
-                    htmlFor="confirmPassword"
-                    className="block text-sm font-semibold text-gray-300 mb-2 uppercase tracking-wider"
-                  >
-                    Confirmer le mot de passe
-                  </label>
-                  <input
-                    id="confirmPassword"
-                    name="confirmPassword"
-                    type="password"
-                    value={formData.confirmPassword}
-                    onChange={handleChange}
-                    required
-                    className="w-full px-4 py-3 bg-black/60 border border-pixel-gold/30 rounded text-white placeholder-gray-500 focus:outline-none focus:border-pixel-gold transition"
-                    placeholder="••••••••"
-                  />
-                </div>
+                <Input
+                  id="confirmPassword"
+                  name="confirmPassword"
+                  type="password"
+                  label="Confirmer le mot de passe"
+                  value={formData.confirmPassword}
+                  onChange={handleChange}
+                  required
+                  placeholder="••••••••"
+                />
 
-                <button
+                <Button
                   type="submit"
+                  variant="primary"
+                  size="lg"
                   disabled={loading}
-                  className="w-full px-6 py-3 border border-pixel-gold/50 bg-black/60 text-white uppercase text-sm tracking-widest rounded hover:bg-pixel-gold/10 hover:border-pixel-gold transition disabled:opacity-50 disabled:cursor-not-allowed"
+                  className="w-full"
                 >
                   {loading ? "Création..." : "Suivant"}
-                </button>
+                </Button>
               </form>
             ) : (
               <form onSubmit={handleStep2Submit} className="space-y-6">
-                {error && (
-                  <div className="bg-red-900/50 border border-red-500/50 text-red-400 px-4 py-3 rounded text-sm">
-                    {error}
-                  </div>
-                )}
+                {error && <Alert variant="error">{error}</Alert>}
 
                 {/* Avatar Selection */}
                 <div>
@@ -387,83 +351,54 @@ export default function RegisterPage() {
                         className="hidden"
                         id="avatar-upload"
                       />
-                      <label
-                        htmlFor="avatar-upload"
-                        className="px-4 py-2 border border-pixel-gold/50 bg-black/40 text-white uppercase text-xs tracking-widest rounded hover:bg-pixel-gold/10 hover:border-pixel-gold transition cursor-pointer inline-block"
-                      >
-                        {uploadingAvatar
-                          ? "Upload en cours..."
-                          : "Upload un avatar custom"}
+                      <label htmlFor="avatar-upload">
+                        <Button
+                          variant="primary"
+                          size="md"
+                          as="span"
+                          className="cursor-pointer"
+                        >
+                          {uploadingAvatar
+                            ? "Upload en cours..."
+                            : "Upload un avatar custom"}
+                        </Button>
                       </label>
                     </div>
                   </div>
                 </div>
 
-                <div>
-                  <label
-                    htmlFor="username-step2"
-                    className="block text-sm font-semibold text-gray-300 mb-2 uppercase tracking-wider"
-                  >
-                    Nom d&apos;utilisateur
-                  </label>
-                  <input
-                    id="username-step2"
-                    name="username"
-                    type="text"
-                    value={formData.username}
-                    onChange={handleChange}
-                    required
-                    className="w-full px-4 py-3 bg-black/60 border border-pixel-gold/30 rounded text-white placeholder-gray-500 focus:outline-none focus:border-pixel-gold transition"
-                    placeholder="VotrePseudo"
-                    minLength={3}
-                    maxLength={20}
-                  />
-                  <p className="text-gray-500 text-xs mt-1">3-20 caractères</p>
-                </div>
+                <Input
+                  id="username-step2"
+                  name="username"
+                  type="text"
+                  label="Nom d'utilisateur"
+                  value={formData.username}
+                  onChange={handleChange}
+                  required
+                  placeholder="VotrePseudo"
+                  minLength={3}
+                  maxLength={20}
+                />
+                <p className="text-gray-500 text-xs mt-1">3-20 caractères</p>
 
-                <div>
-                  <label
-                    htmlFor="bio"
-                    className="block text-sm font-semibold text-gray-300 mb-2 uppercase tracking-wider"
-                  >
-                    Bio (optionnel)
-                  </label>
-                  <textarea
-                    id="bio"
-                    name="bio"
-                    value={formData.bio}
-                    onChange={handleChange}
-                    className="w-full px-4 py-3 bg-black/60 border border-pixel-gold/30 rounded text-white placeholder-gray-500 focus:outline-none focus:border-pixel-gold transition resize-none"
-                    rows={4}
-                    maxLength={500}
-                    placeholder="Parlez-nous de vous..."
-                  />
-                  <p className="text-gray-500 text-xs mt-1">
-                    {formData.bio.length}/500 caractères
-                  </p>
-                </div>
+                <Textarea
+                  id="bio"
+                  name="bio"
+                  label="Bio (optionnel)"
+                  value={formData.bio}
+                  onChange={handleChange}
+                  rows={4}
+                  maxLength={500}
+                  showCharCount
+                  placeholder="Parlez-nous de vous..."
+                />
 
                 <div>
                   <label className="block text-sm font-semibold text-gray-300 mb-3 uppercase tracking-wider">
                     Classe de Personnage (optionnel)
                   </label>
-                  <div className="grid grid-cols-2 gap-2">
-                    {[
-                      { value: "WARRIOR", name: "Guerrier", icon: "⚔️" },
-                      { value: "MAGE", name: "Mage", icon: "🔮" },
-                      { value: "ROGUE", name: "Voleur", icon: "🗡️" },
-                      { value: "RANGER", name: "Rôdeur", icon: "🏹" },
-                      { value: "PALADIN", name: "Paladin", icon: "🛡️" },
-                      { value: "ENGINEER", name: "Ingénieur", icon: "⚙️" },
-                      { value: "MERCHANT", name: "Marchand", icon: "💰" },
-                      { value: "SCHOLAR", name: "Érudit", icon: "📚" },
-                      { value: "BERSERKER", name: "Berserker", icon: "🔥" },
-                      {
-                        value: "NECROMANCER",
-                        name: "Nécromancien",
-                        icon: "💀",
-                      },
-                    ].map((cls) => (
+                  <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
+                    {CHARACTER_CLASSES.map((cls) => (
                       <button
                         key={cls.value}
                         type="button"
@@ -476,16 +411,16 @@ export default function RegisterPage() {
                                 : cls.value,
                           })
                         }
-                        className={`p-3 border-2 rounded-lg text-left transition-all ${
+                        className={`p-4 border-2 rounded-lg text-left transition-all ${
                           formData.characterClass === cls.value
-                            ? "border-pixel-gold bg-pixel-gold/20"
-                            : "border-pixel-gold/30 bg-black/40 hover:border-pixel-gold/50"
+                            ? "border-pixel-gold bg-pixel-gold/20 shadow-lg shadow-pixel-gold/30"
+                            : "border-pixel-gold/30 bg-black/40 hover:border-pixel-gold/50 hover:bg-black/60"
                         }`}
                       >
-                        <div className="flex items-center gap-2">
-                          <span className="text-xl">{cls.icon}</span>
+                        <div className="flex items-center gap-2 mb-1">
+                          <span className="text-2xl">{cls.icon}</span>
                           <span
-                            className={`font-bold text-xs uppercase tracking-wider ${
+                            className={`font-bold text-sm uppercase tracking-wider ${
                               formData.characterClass === cls.value
                                 ? "text-pixel-gold"
                                 : "text-white"
@@ -494,26 +429,33 @@ export default function RegisterPage() {
                             {cls.name}
                           </span>
                         </div>
+                        <p className="text-xs text-gray-400 leading-tight">
+                          {cls.desc}
+                        </p>
                       </button>
                     ))}
                   </div>
                 </div>
 
                 <div className="flex gap-4">
-                  <button
+                  <Button
                     type="button"
+                    variant="secondary"
+                    size="lg"
                     onClick={() => setStep(1)}
-                    className="flex-1 px-6 py-3 border border-gray-600/50 bg-black/40 text-gray-400 uppercase text-sm tracking-widest rounded hover:bg-gray-900/40 hover:border-gray-500 transition"
+                    className="flex-1"
                   >
                     Retour
-                  </button>
-                  <button
+                  </Button>
+                  <Button
                     type="submit"
+                    variant="primary"
+                    size="lg"
                     disabled={loading}
-                    className="flex-1 px-6 py-3 border border-pixel-gold/50 bg-black/60 text-white uppercase text-sm tracking-widest rounded hover:bg-pixel-gold/10 hover:border-pixel-gold transition disabled:opacity-50 disabled:cursor-not-allowed"
+                    className="flex-1"
                   >
                     {loading ? "Finalisation..." : "Terminer"}
-                  </button>
+                  </Button>
                 </div>
               </form>
             )}
@@ -529,9 +471,9 @@ export default function RegisterPage() {
                 </Link>
               </p>
             </div>
-          </div>
+          </Card>
         </div>
-      </section>
+      </BackgroundSection>
     </main>
   );
 }

app/style-guide/page.tsx

@@ -0,0 +1,542 @@
+"use client";
+
+import { useState } from "react";
+import Navigation from "@/components/navigation/Navigation";
+import {
+  Button,
+  Input,
+  Textarea,
+  Select,
+  Card,
+  Badge,
+  Alert,
+  Modal,
+  ProgressBar,
+  StarRating,
+  Avatar,
+  SectionTitle,
+  BackgroundSection,
+  CloseButton,
+} from "@/components/ui";
+
+export default function StyleGuidePage() {
+  const [modalOpen, setModalOpen] = useState(false);
+  const [inputValue, setInputValue] = useState("");
+  const [textareaValue, setTextareaValue] = useState("");
+  const [selectValue, setSelectValue] = useState("");
+  const [rating, setRating] = useState(0);
+
+  return (
+    <main className="min-h-screen bg-black relative">
+      <Navigation />
+      <BackgroundSection backgroundImage="/got-2.jpg" className="pt-24 pb-16">
+        <div className="w-full max-w-6xl mx-auto px-8">
+          <SectionTitle variant="gradient" size="xl" className="mb-16">
+            STYLE GUIDE
+          </SectionTitle>
+          <p className="text-gray-400 text-center mb-12 max-w-3xl mx-auto">
+            Guide de style complet avec tous les composants UI disponibles et
+            leurs variantes
+          </p>
+
+          {/* Buttons */}
+          <Card variant="dark" className="p-6 mb-8">
+            <h2 className="text-2xl font-bold text-pixel-gold mb-6">Buttons</h2>
+            <div className="space-y-6">
+              <div>
+                <h3 className="text-lg text-gray-300 mb-3">Variantes</h3>
+                <div className="flex flex-wrap gap-4">
+                  <Button variant="primary">Primary</Button>
+                  <Button variant="secondary">Secondary</Button>
+                  <Button variant="success">Success</Button>
+                  <Button variant="danger">Danger</Button>
+                  <Button variant="ghost">Ghost</Button>
+                </div>
+              </div>
+              <div>
+                <h3 className="text-lg text-gray-300 mb-3">Tailles</h3>
+                <div className="flex flex-wrap items-center gap-4">
+                  <Button variant="primary" size="sm">
+                    Small
+                  </Button>
+                  <Button variant="primary" size="md">
+                    Medium
+                  </Button>
+                  <Button variant="primary" size="lg">
+                    Large
+                  </Button>
+                </div>
+              </div>
+              <div>
+                <h3 className="text-lg text-gray-300 mb-3">États</h3>
+                <div className="flex flex-wrap gap-4">
+                  <Button variant="primary">Normal</Button>
+                  <Button variant="primary" disabled>
+                    Disabled
+                  </Button>
+                </div>
+              </div>
+            </div>
+          </Card>
+
+          {/* Inputs */}
+          <Card variant="dark" className="p-6 mb-8">
+            <h2 className="text-2xl font-bold text-pixel-gold mb-6">Inputs</h2>
+            <div className="space-y-6">
+              <div>
+                <h3 className="text-lg text-gray-300 mb-3">Types</h3>
+                <div className="space-y-4 max-w-md">
+                  <Input
+                    label="Text Input"
+                    type="text"
+                    placeholder="Entrez du texte"
+                    value={inputValue}
+                    onChange={(e) => setInputValue(e.target.value)}
+                  />
+                  <Input
+                    label="Email Input"
+                    type="email"
+                    placeholder="email@example.com"
+                  />
+                  <Input
+                    label="Password Input"
+                    type="password"
+                    placeholder="••••••••"
+                  />
+                  <Input label="Number Input" type="number" placeholder="123" />
+                  <Input label="Date Input" type="date" />
+                </div>
+              </div>
+              <div>
+                <h3 className="text-lg text-gray-300 mb-3">Avec erreur</h3>
+                <div className="max-w-md">
+                  <Input
+                    label="Input avec erreur"
+                    type="text"
+                    error="Ce champ est requis"
+                    value={inputValue}
+                    onChange={(e) => setInputValue(e.target.value)}
+                  />
+                </div>
+              </div>
+            </div>
+          </Card>
+
+          {/* Textarea */}
+          <Card variant="dark" className="p-6 mb-8">
+            <h2 className="text-2xl font-bold text-pixel-gold mb-6">
+              Textarea
+            </h2>
+            <div className="space-y-6">
+              <div>
+                <h3 className="text-lg text-gray-300 mb-3">Basique</h3>
+                <div className="max-w-md">
+                  <Textarea
+                    label="Commentaire"
+                    placeholder="Écrivez votre commentaire..."
+                    value={textareaValue}
+                    onChange={(e) => setTextareaValue(e.target.value)}
+                    rows={4}
+                  />
+                </div>
+              </div>
+              <div>
+                <h3 className="text-lg text-gray-300 mb-3">
+                  Avec compteur de caractères
+                </h3>
+                <div className="max-w-md">
+                  <Textarea
+                    label="Bio"
+                    placeholder="Parlez-nous de vous..."
+                    value={textareaValue}
+                    onChange={(e) => setTextareaValue(e.target.value)}
+                    rows={4}
+                    maxLength={500}
+                    showCharCount
+                  />
+                </div>
+              </div>
+              <div>
+                <h3 className="text-lg text-gray-300 mb-3">Avec erreur</h3>
+                <div className="max-w-md">
+                  <Textarea
+                    label="Textarea avec erreur"
+                    placeholder="Écrivez quelque chose..."
+                    error="Ce champ est requis"
+                    value={textareaValue}
+                    onChange={(e) => setTextareaValue(e.target.value)}
+                    rows={4}
+                  />
+                </div>
+              </div>
+            </div>
+          </Card>
+
+          {/* Select */}
+          <Card variant="dark" className="p-6 mb-8">
+            <h2 className="text-2xl font-bold text-pixel-gold mb-6">Select</h2>
+            <div className="space-y-6">
+              <div>
+                <h3 className="text-lg text-gray-300 mb-3">Basique</h3>
+                <div className="max-w-md">
+                  <Select
+                    label="Sélectionner une option"
+                    value={selectValue}
+                    onChange={(e) => setSelectValue(e.target.value)}
+                  >
+                    <option value="">Choisir...</option>
+                    <option value="option1">Option 1</option>
+                    <option value="option2">Option 2</option>
+                    <option value="option3">Option 3</option>
+                  </Select>
+                </div>
+              </div>
+              <div>
+                <h3 className="text-lg text-gray-300 mb-3">Sans label</h3>
+                <div className="max-w-md">
+                  <Select
+                    value={selectValue}
+                    onChange={(e) => setSelectValue(e.target.value)}
+                  >
+                    <option value="">Choisir...</option>
+                    <option value="option1">Option 1</option>
+                    <option value="option2">Option 2</option>
+                    <option value="option3">Option 3</option>
+                  </Select>
+                </div>
+              </div>
+              <div>
+                <h3 className="text-lg text-gray-300 mb-3">Avec erreur</h3>
+                <div className="max-w-md">
+                  <Select
+                    label="Select avec erreur"
+                    value={selectValue}
+                    onChange={(e) => setSelectValue(e.target.value)}
+                    error="Veuillez sélectionner une option"
+                  >
+                    <option value="">Choisir...</option>
+                    <option value="option1">Option 1</option>
+                    <option value="option2">Option 2</option>
+                    <option value="option3">Option 3</option>
+                  </Select>
+                </div>
+              </div>
+              <div>
+                <h3 className="text-lg text-gray-300 mb-3">Disabled</h3>
+                <div className="max-w-md">
+                  <Select
+                    label="Select désactivé"
+                    value={selectValue}
+                    onChange={(e) => setSelectValue(e.target.value)}
+                    disabled
+                  >
+                    <option value="">Choisir...</option>
+                    <option value="option1">Option 1</option>
+                    <option value="option2">Option 2</option>
+                    <option value="option3">Option 3</option>
+                  </Select>
+                </div>
+              </div>
+            </div>
+          </Card>
+
+          {/* Badges */}
+          <Card variant="dark" className="p-6 mb-8">
+            <h2 className="text-2xl font-bold text-pixel-gold mb-6">Badges</h2>
+            <div className="space-y-6">
+              <div>
+                <h3 className="text-lg text-gray-300 mb-3">Variantes</h3>
+                <div className="flex flex-wrap gap-4">
+                  <Badge variant="default">Default</Badge>
+                  <Badge variant="success">Success</Badge>
+                  <Badge variant="warning">Warning</Badge>
+                  <Badge variant="danger">Danger</Badge>
+                  <Badge variant="info">Info</Badge>
+                </div>
+              </div>
+              <div>
+                <h3 className="text-lg text-gray-300 mb-3">Tailles</h3>
+                <div className="flex flex-wrap items-center gap-4">
+                  <Badge variant="default" size="xs">
+                    Extra Small
+                  </Badge>
+                  <Badge variant="default" size="sm">
+                    Small
+                  </Badge>
+                  <Badge variant="default" size="md">
+                    Medium
+                  </Badge>
+                </div>
+              </div>
+            </div>
+          </Card>
+
+          {/* Alerts */}
+          <Card variant="dark" className="p-6 mb-8">
+            <h2 className="text-2xl font-bold text-pixel-gold mb-6">Alerts</h2>
+            <div className="space-y-4 max-w-md">
+              <Alert variant="success">
+                Opération réussie ! Votre action a été effectuée avec succès.
+              </Alert>
+              <Alert variant="error">
+                Une erreur est survenue. Veuillez réessayer.
+              </Alert>
+              <Alert variant="warning">
+                Attention ! Cette action est irréversible.
+              </Alert>
+              <Alert variant="info">
+                Information : Voici quelques informations utiles.
+              </Alert>
+            </div>
+          </Card>
+
+          {/* Cards */}
+          <Card variant="dark" className="p-6 mb-8">
+            <h2 className="text-2xl font-bold text-pixel-gold mb-6">Cards</h2>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <Card variant="default" className="p-4">
+                <h3 className="text-lg font-bold text-pixel-gold mb-2">
+                  Card Default
+                </h3>
+                <p className="text-gray-300 text-sm">
+                  Contenu de la carte avec variant default
+                </p>
+              </Card>
+              <Card variant="dark" className="p-4">
+                <h3 className="text-lg font-bold text-pixel-gold mb-2">
+                  Card Dark
+                </h3>
+                <p className="text-gray-300 text-sm">
+                  Contenu de la carte avec variant dark
+                </p>
+              </Card>
+            </div>
+          </Card>
+
+          {/* Progress Bars */}
+          <Card variant="dark" className="p-6 mb-8">
+            <h2 className="text-2xl font-bold text-pixel-gold mb-6">
+              Progress Bars
+            </h2>
+            <div className="space-y-6 max-w-md">
+              <div>
+                <h3 className="text-lg text-gray-300 mb-3">HP Bar (High)</h3>
+                <ProgressBar
+                  value={75}
+                  max={100}
+                  variant="hp"
+                  showLabel
+                  label="HP"
+                />
+              </div>
+              <div>
+                <h3 className="text-lg text-gray-300 mb-3">HP Bar (Medium)</h3>
+                <ProgressBar
+                  value={45}
+                  max={100}
+                  variant="hp"
+                  showLabel
+                  label="HP"
+                />
+              </div>
+              <div>
+                <h3 className="text-lg text-gray-300 mb-3">HP Bar (Low)</h3>
+                <ProgressBar
+                  value={20}
+                  max={100}
+                  variant="hp"
+                  showLabel
+                  label="HP"
+                />
+              </div>
+              <div>
+                <h3 className="text-lg text-gray-300 mb-3">XP Bar</h3>
+                <ProgressBar
+                  value={60}
+                  max={100}
+                  variant="xp"
+                  showLabel
+                  label="XP"
+                />
+              </div>
+              <div>
+                <h3 className="text-lg text-gray-300 mb-3">Default</h3>
+                <ProgressBar
+                  value={50}
+                  max={100}
+                  variant="default"
+                  showLabel
+                  label="Progress"
+                />
+              </div>
+              <div>
+                <h3 className="text-lg text-gray-300 mb-3">Sans label</h3>
+                <ProgressBar value={60} max={100} variant="default" />
+              </div>
+            </div>
+          </Card>
+
+          {/* Star Rating */}
+          <Card variant="dark" className="p-6 mb-8">
+            <h2 className="text-2xl font-bold text-pixel-gold mb-6">
+              Star Rating
+            </h2>
+            <div className="space-y-6">
+              <div>
+                <h3 className="text-lg text-gray-300 mb-3">Interactif</h3>
+                <StarRating value={rating} onChange={setRating} showValue />
+                <p className="text-gray-400 text-sm mt-2">
+                  Note sélectionnée : {rating}/5
+                </p>
+              </div>
+              <div>
+                <h3 className="text-lg text-gray-300 mb-3">Tailles</h3>
+                <div className="space-y-4">
+                  <div>
+                    <p className="text-gray-400 text-sm mb-2">Small</p>
+                    <StarRating value={4} size="sm" />
+                  </div>
+                  <div>
+                    <p className="text-gray-400 text-sm mb-2">Medium</p>
+                    <StarRating value={4} size="md" />
+                  </div>
+                  <div>
+                    <p className="text-gray-400 text-sm mb-2">Large</p>
+                    <StarRating value={4} size="lg" />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </Card>
+
+          {/* Avatar */}
+          <Card variant="dark" className="p-6 mb-8">
+            <h2 className="text-2xl font-bold text-pixel-gold mb-6">Avatar</h2>
+            <div className="space-y-6">
+              <div>
+                <h3 className="text-lg text-gray-300 mb-3">Tailles</h3>
+                <div className="flex items-center gap-6">
+                  <Avatar src="/avatar-1.jpg" username="User" size="sm" />
+                  <Avatar src="/avatar-2.jpg" username="User" size="md" />
+                  <Avatar src="/avatar-3.jpg" username="User" size="lg" />
+                </div>
+              </div>
+              <div>
+                <h3 className="text-lg text-gray-300 mb-3">
+                  Sans image (fallback)
+                </h3>
+                <Avatar src={null} username="John Doe" size="lg" />
+              </div>
+            </div>
+          </Card>
+
+          {/* Section Title */}
+          <Card variant="dark" className="p-6 mb-8">
+            <h2 className="text-2xl font-bold text-pixel-gold mb-6">
+              Section Title
+            </h2>
+            <div className="space-y-8">
+              <div>
+                <h3 className="text-lg text-gray-300 mb-3">Variantes</h3>
+                <div className="space-y-4">
+                  <SectionTitle variant="default" size="md">
+                    Default Title
+                  </SectionTitle>
+                  <SectionTitle variant="gradient" size="md">
+                    Gradient Title
+                  </SectionTitle>
+                </div>
+              </div>
+              <div>
+                <h3 className="text-lg text-gray-300 mb-3">Tailles</h3>
+                <div className="space-y-4">
+                  <SectionTitle variant="gradient" size="sm">
+                    Small Title
+                  </SectionTitle>
+                  <SectionTitle variant="gradient" size="md">
+                    Medium Title
+                  </SectionTitle>
+                  <SectionTitle variant="gradient" size="lg">
+                    Large Title
+                  </SectionTitle>
+                  <SectionTitle variant="gradient" size="xl">
+                    Extra Large Title
+                  </SectionTitle>
+                </div>
+              </div>
+              <div>
+                <h3 className="text-lg text-gray-300 mb-3">Avec sous-titre</h3>
+                <SectionTitle
+                  variant="gradient"
+                  size="lg"
+                  subtitle="Un sous-titre descriptif"
+                >
+                  Title with Subtitle
+                </SectionTitle>
+              </div>
+            </div>
+          </Card>
+
+          {/* Modal */}
+          <Card variant="dark" className="p-6 mb-8">
+            <h2 className="text-2xl font-bold text-pixel-gold mb-6">Modal</h2>
+            <div className="space-y-6">
+              <div>
+                <h3 className="text-lg text-gray-300 mb-3">Tailles</h3>
+                <div className="flex flex-wrap gap-4">
+                  <Button onClick={() => setModalOpen(true)}>
+                    Ouvrir Modal
+                  </Button>
+                </div>
+              </div>
+            </div>
+          </Card>
+
+          {/* Close Button */}
+          <Card variant="dark" className="p-6 mb-8">
+            <h2 className="text-2xl font-bold text-pixel-gold mb-6">
+              Close Button
+            </h2>
+            <div className="space-y-6">
+              <div>
+                <h3 className="text-lg text-gray-300 mb-3">Tailles</h3>
+                <div className="flex items-center gap-6">
+                  <CloseButton onClick={() => {}} size="sm" />
+                  <CloseButton onClick={() => {}} size="md" />
+                  <CloseButton onClick={() => {}} size="lg" />
+                </div>
+              </div>
+              <div>
+                <h3 className="text-lg text-gray-300 mb-3">Disabled</h3>
+                <CloseButton onClick={() => {}} disabled />
+              </div>
+            </div>
+          </Card>
+
+          {/* Modal Demo */}
+          <Modal
+            isOpen={modalOpen}
+            onClose={() => setModalOpen(false)}
+            size="md"
+          >
+            <div className="p-8">
+              <div className="flex items-center justify-between mb-6">
+                <h2 className="text-2xl font-bold text-pixel-gold">
+                  Exemple de Modal
+                </h2>
+                <CloseButton onClick={() => setModalOpen(false)} />
+              </div>
+              <p className="text-gray-300 mb-6">
+                Ceci est un exemple de modal avec différentes tailles
+                disponibles.
+              </p>
+              <div className="flex gap-4">
+                <Button onClick={() => setModalOpen(false)}>Fermer</Button>
+              </div>
+            </div>
+          </Modal>
+        </div>
+      </BackgroundSection>
+    </main>
+  );
+}

components/AdminPanel.tsx

@@ -1,119 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import UserManagement from "@/components/UserManagement";
-import EventManagement from "@/components/EventManagement";
-import FeedbackManagement from "@/components/FeedbackManagement";
-import BackgroundPreferences from "@/components/BackgroundPreferences";
-
-interface SitePreferences {
-  id: string;
-  homeBackground: string | null;
-  eventsBackground: string | null;
-  leaderboardBackground: string | null;
-}
-
-interface AdminPanelProps {
-  initialPreferences: SitePreferences;
-}
-
-type AdminSection = "preferences" | "users" | "events" | "feedbacks";
-
-export default function AdminPanel({ initialPreferences }: AdminPanelProps) {
-  const [activeSection, setActiveSection] =
-    useState<AdminSection>("preferences");
-
-  return (
-    <section className="relative w-full min-h-screen flex flex-col items-center overflow-hidden pt-24 pb-16">
-      <div className="relative z-10 w-full max-w-6xl mx-auto px-8 py-16">
-        <h1 className="text-4xl font-gaming font-black mb-8 text-center">
-          <span className="bg-gradient-to-r from-pixel-gold via-orange-400 to-pixel-gold bg-clip-text text-transparent">
-            ADMIN
-          </span>
-        </h1>
-
-        {/* Navigation Tabs */}
-        <div className="flex gap-4 mb-8 justify-center">
-          <button
-            onClick={() => setActiveSection("preferences")}
-            className={`px-6 py-3 border uppercase text-xs tracking-widest rounded transition ${
-              activeSection === "preferences"
-                ? "border-pixel-gold bg-pixel-gold/10 text-pixel-gold"
-                : "border-pixel-gold/30 bg-black/60 text-gray-400 hover:border-pixel-gold/50"
-            }`}
-          >
-            Préférences UI
-          </button>
-          <button
-            onClick={() => setActiveSection("users")}
-            className={`px-6 py-3 border uppercase text-xs tracking-widest rounded transition ${
-              activeSection === "users"
-                ? "border-pixel-gold bg-pixel-gold/10 text-pixel-gold"
-                : "border-pixel-gold/30 bg-black/60 text-gray-400 hover:border-pixel-gold/50"
-            }`}
-          >
-            Utilisateurs
-          </button>
-          <button
-            onClick={() => setActiveSection("events")}
-            className={`px-6 py-3 border uppercase text-xs tracking-widest rounded transition ${
-              activeSection === "events"
-                ? "border-pixel-gold bg-pixel-gold/10 text-pixel-gold"
-                : "border-pixel-gold/30 bg-black/60 text-gray-400 hover:border-pixel-gold/50"
-            }`}
-          >
-            Événements
-          </button>
-          <button
-            onClick={() => setActiveSection("feedbacks")}
-            className={`px-6 py-3 border uppercase text-xs tracking-widest rounded transition ${
-              activeSection === "feedbacks"
-                ? "border-pixel-gold bg-pixel-gold/10 text-pixel-gold"
-                : "border-pixel-gold/30 bg-black/60 text-gray-400 hover:border-pixel-gold/50"
-            }`}
-          >
-            Feedbacks
-          </button>
-        </div>
-
-        {activeSection === "preferences" && (
-          <div className="bg-black/80 border border-pixel-gold/30 rounded-lg p-4 sm:p-6 backdrop-blur-sm">
-            <h2 className="text-xl sm:text-2xl font-gaming font-bold mb-6 text-pixel-gold break-words">
-              Préférences UI Globales
-            </h2>
-            <div className="space-y-4">
-              <BackgroundPreferences initialPreferences={initialPreferences} />
-            </div>
-          </div>
-        )}
-
-        {activeSection === "users" && (
-          <div className="bg-black/80 border border-pixel-gold/30 rounded-lg p-6 backdrop-blur-sm">
-            <h2 className="text-2xl font-gaming font-bold mb-6 text-pixel-gold">
-              Gestion des Utilisateurs
-            </h2>
-            <UserManagement />
-          </div>
-        )}
-
-        {activeSection === "events" && (
-          <div className="bg-black/80 border border-pixel-gold/30 rounded-lg p-6 backdrop-blur-sm">
-            <h2 className="text-2xl font-gaming font-bold mb-6 text-pixel-gold">
-              Gestion des Événements
-            </h2>
-            <EventManagement />
-          </div>
-        )}
-
-        {activeSection === "feedbacks" && (
-          <div className="bg-black/80 border border-pixel-gold/30 rounded-lg p-6 backdrop-blur-sm">
-            <h2 className="text-2xl font-gaming font-bold mb-6 text-pixel-gold">
-              Gestion des Feedbacks
-            </h2>
-            <FeedbackManagement />
-          </div>
-        )}
-      </div>
-    </section>
-  );
-}

components/Avatar.tsx

@@ -49,7 +49,11 @@ export default function Avatar({
 
   return (
     <div
-      className={`${sizeClass} rounded-full border overflow-hidden bg-black/60 flex items-center justify-center relative ${className} ${borderClassName}`}
+      className={`${sizeClass} rounded-full border overflow-hidden flex items-center justify-center relative ${className} ${borderClassName}`}
+      style={{
+        backgroundColor: "var(--card)",
+        borderColor: "var(--border)",
+      }}
     >
       {displaySrc ? (
         <img
@@ -61,7 +65,8 @@ export default function Avatar({
         />
       ) : null}
       <span
-        className={`text-pixel-gold font-bold ${displaySrc ? "hidden" : ""}`}
+        className={`font-bold ${displaySrc ? "hidden" : ""}`}
+        style={{ color: "var(--accent-color)" }}
       >
         {initial}
       </span>

components/EventManagement.tsx

@@ -1,452 +0,0 @@
-"use client";
-
-import { useState, useEffect } from "react";
-import { calculateEventStatus } from "@/lib/eventStatus";
-
-interface Event {
-  id: string;
-  date: string;
-  name: string;
-  description: string;
-  type: "ATELIER" | "KATA" | "PRESENTATION" | "LEARNING_HOUR";
-  status: "UPCOMING" | "LIVE" | "PAST";
-  room?: string | null;
-  time?: string | null;
-  maxPlaces?: number | null;
-  createdAt: string;
-  updatedAt: string;
-  registrationsCount?: number;
-}
-
-interface EventFormData {
-  date: string;
-  name: string;
-  description: string;
-  type: "ATELIER" | "KATA" | "PRESENTATION" | "LEARNING_HOUR";
-  room?: string;
-  time?: string;
-  maxPlaces?: number;
-}
-
-const eventTypes: Event["type"][] = [
-  "ATELIER",
-  "KATA",
-  "PRESENTATION",
-  "LEARNING_HOUR",
-];
-const getEventTypeLabel = (type: Event["type"]) => {
-  switch (type) {
-    case "ATELIER":
-      return "Atelier";
-    case "KATA":
-      return "Kata";
-    case "PRESENTATION":
-      return "Présentation";
-    case "LEARNING_HOUR":
-      return "Learning Hour";
-    default:
-      return type;
-  }
-};
-
-const getStatusLabel = (status: Event["status"]) => {
-  switch (status) {
-    case "UPCOMING":
-      return "À venir";
-    case "LIVE":
-      return "En cours";
-    case "PAST":
-      return "Passé";
-    default:
-      return status;
-  }
-};
-
-export default function EventManagement() {
-  const [events, setEvents] = useState<Event[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [editingEvent, setEditingEvent] = useState<Event | null>(null);
-  const [isCreating, setIsCreating] = useState(false);
-  const [saving, setSaving] = useState(false);
-  const [formData, setFormData] = useState<EventFormData>({
-    date: "",
-    name: "",
-    description: "",
-    type: "ATELIER",
-    room: "",
-    time: "",
-    maxPlaces: undefined,
-  });
-
-  useEffect(() => {
-    fetchEvents();
-  }, []);
-
-  const fetchEvents = async () => {
-    try {
-      const response = await fetch("/api/admin/events");
-      if (response.ok) {
-        const data = await response.json();
-        setEvents(data);
-      }
-    } catch (error) {
-      console.error("Error fetching events:", error);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const handleCreate = () => {
-    setIsCreating(true);
-    setEditingEvent(null);
-    setFormData({
-      date: "",
-      name: "",
-      description: "",
-      type: "ATELIER",
-      room: "",
-      time: "",
-      maxPlaces: undefined,
-    });
-  };
-
-  const handleEdit = (event: Event) => {
-    setEditingEvent(event);
-    setIsCreating(false);
-    setFormData({
-      date: event.date,
-      name: event.name,
-      description: event.description,
-      type: event.type,
-      room: event.room || "",
-      time: event.time || "",
-      maxPlaces: event.maxPlaces || undefined,
-    });
-  };
-
-  const handleSave = async () => {
-    setSaving(true);
-    try {
-      let response;
-      if (isCreating) {
-        response = await fetch("/api/admin/events", {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-          },
-          body: JSON.stringify(formData),
-        });
-      } else if (editingEvent) {
-        response = await fetch(`/api/admin/events/${editingEvent.id}`, {
-          method: "PUT",
-          headers: {
-            "Content-Type": "application/json",
-          },
-          body: JSON.stringify(formData),
-        });
-      }
-
-      if (response?.ok) {
-        await fetchEvents();
-        setEditingEvent(null);
-        setIsCreating(false);
-        setFormData({
-          date: "",
-          name: "",
-          description: "",
-          type: "ATELIER",
-          room: "",
-          time: "",
-          maxPlaces: undefined,
-        });
-      } else {
-        const error = await response?.json();
-        alert(error.error || "Erreur lors de la sauvegarde");
-      }
-    } catch (error) {
-      console.error("Error saving event:", error);
-      alert("Erreur lors de la sauvegarde");
-    } finally {
-      setSaving(false);
-    }
-  };
-
-  const handleDelete = async (eventId: string) => {
-    if (!confirm("Êtes-vous sûr de vouloir supprimer cet événement ?")) {
-      return;
-    }
-
-    try {
-      const response = await fetch(`/api/admin/events/${eventId}`, {
-        method: "DELETE",
-      });
-
-      if (response.ok) {
-        await fetchEvents();
-      } else {
-        const error = await response.json();
-        alert(error.error || "Erreur lors de la suppression");
-      }
-    } catch (error) {
-      console.error("Error deleting event:", error);
-      alert("Erreur lors de la suppression");
-    }
-  };
-
-  const handleCancel = () => {
-    setEditingEvent(null);
-    setIsCreating(false);
-    setFormData({
-      date: "",
-      name: "",
-      description: "",
-      type: "ATELIER",
-      room: "",
-      time: "",
-      maxPlaces: undefined,
-    });
-  };
-
-  if (loading) {
-    return <div className="text-center text-gray-400 py-8">Chargement...</div>;
-  }
-
-  return (
-    <div className="space-y-4">
-      <div className="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-3 mb-4">
-        <h3 className="text-lg sm:text-xl font-gaming font-bold text-pixel-gold break-words">
-          Événements ({events.length})
-        </h3>
-        {!isCreating && !editingEvent && (
-          <button
-            onClick={handleCreate}
-            className="px-3 sm:px-4 py-2 border border-green-500/50 bg-green-900/20 text-green-400 uppercase text-[10px] sm:text-xs tracking-widest rounded hover:bg-green-900/30 transition whitespace-nowrap flex-shrink-0"
-          >
-            + Nouvel événement
-          </button>
-        )}
-      </div>
-
-      {(isCreating || editingEvent) && (
-        <div className="bg-black/60 border border-pixel-gold/20 rounded p-3 sm:p-4 mb-4">
-          <h4 className="text-pixel-gold font-bold mb-4 text-base sm:text-lg break-words">
-            {isCreating ? "Créer un événement" : "Modifier l'événement"}
-          </h4>
-          <div className="space-y-4">
-            <div>
-              <label className="block text-xs sm:text-sm text-gray-300 mb-1">
-                Date
-              </label>
-              <input
-                type="date"
-                value={formData.date}
-                onChange={(e) =>
-                  setFormData({ ...formData, date: e.target.value })
-                }
-                className="w-full px-3 py-2 bg-black/60 border border-pixel-gold/30 rounded text-white text-xs sm:text-sm"
-              />
-            </div>
-            <div>
-              <label className="block text-xs sm:text-sm text-gray-300 mb-1">
-                Nom
-              </label>
-              <input
-                type="text"
-                value={formData.name}
-                onChange={(e) =>
-                  setFormData({ ...formData, name: e.target.value })
-                }
-                placeholder="Nom de l'événement"
-                className="w-full px-3 py-2 bg-black/60 border border-pixel-gold/30 rounded text-white text-xs sm:text-sm"
-              />
-            </div>
-            <div>
-              <label className="block text-xs sm:text-sm text-gray-300 mb-1">
-                Description
-              </label>
-              <textarea
-                value={formData.description}
-                onChange={(e) =>
-                  setFormData({ ...formData, description: e.target.value })
-                }
-                placeholder="Description de l'événement"
-                rows={4}
-                className="w-full px-3 py-2 bg-black/60 border border-pixel-gold/30 rounded text-white text-xs sm:text-sm"
-              />
-            </div>
-            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-              <div>
-                <label className="block text-xs sm:text-sm text-gray-300 mb-1">
-                  Type
-                </label>
-                <select
-                  value={formData.type}
-                  onChange={(e) =>
-                    setFormData({
-                      ...formData,
-                      type: e.target.value as Event["type"],
-                    })
-                  }
-                  className="w-full px-3 py-2 bg-black/60 border border-pixel-gold/30 rounded text-white text-xs sm:text-sm"
-                >
-                  {eventTypes.map((type) => (
-                    <option key={type} value={type}>
-                      {getEventTypeLabel(type)}
-                    </option>
-                  ))}
-                </select>
-              </div>
-            </div>
-            <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
-              <div>
-                <label className="block text-xs sm:text-sm text-gray-300 mb-1">
-                  Salle
-                </label>
-                <input
-                  type="text"
-                  value={formData.room || ""}
-                  onChange={(e) =>
-                    setFormData({ ...formData, room: e.target.value })
-                  }
-                  placeholder="Ex: Nautilus"
-                  className="w-full px-3 py-2 bg-black/60 border border-pixel-gold/30 rounded text-white text-xs sm:text-sm"
-                />
-              </div>
-              <div>
-                <label className="block text-xs sm:text-sm text-gray-300 mb-1">
-                  Heure
-                </label>
-                <input
-                  type="text"
-                  value={formData.time || ""}
-                  onChange={(e) =>
-                    setFormData({ ...formData, time: e.target.value })
-                  }
-                  placeholder="Ex: 11h-12h"
-                  className="w-full px-3 py-2 bg-black/60 border border-pixel-gold/30 rounded text-white text-xs sm:text-sm"
-                />
-              </div>
-              <div>
-                <label className="block text-xs sm:text-sm text-gray-300 mb-1">
-                  Places max
-                </label>
-                <input
-                  type="number"
-                  value={formData.maxPlaces || ""}
-                  onChange={(e) =>
-                    setFormData({
-                      ...formData,
-                      maxPlaces: e.target.value
-                        ? parseInt(e.target.value)
-                        : undefined,
-                    })
-                  }
-                  placeholder="Ex: 25"
-                  className="w-full px-3 py-2 bg-black/60 border border-pixel-gold/30 rounded text-white text-xs sm:text-sm"
-                />
-              </div>
-            </div>
-            <div className="flex flex-col sm:flex-row gap-2">
-              <button
-                onClick={handleSave}
-                disabled={saving}
-                className="px-4 py-2 border border-green-500/50 bg-green-900/20 text-green-400 uppercase text-xs tracking-widest rounded hover:bg-green-900/30 transition disabled:opacity-50"
-              >
-                {saving ? "Enregistrement..." : "Enregistrer"}
-              </button>
-              <button
-                onClick={handleCancel}
-                className="px-4 py-2 border border-gray-600/50 bg-gray-900/20 text-gray-400 uppercase text-xs tracking-widest rounded hover:bg-gray-900/30 transition"
-              >
-                Annuler
-              </button>
-            </div>
-          </div>
-        </div>
-      )}
-
-      {events.length === 0 ? (
-        <div className="text-center text-gray-400 py-8">
-          Aucun événement trouvé
-        </div>
-      ) : (
-        <div className="space-y-3">
-          {events.map((event) => (
-            <div
-              key={event.id}
-              className="bg-black/60 border border-pixel-gold/20 rounded p-3 sm:p-4"
-            >
-              <div className="flex flex-col sm:flex-row sm:justify-between sm:items-start gap-3">
-                <div className="flex-1 min-w-0">
-                  <div className="flex flex-wrap items-center gap-2 sm:gap-3 mb-2">
-                    <h4 className="text-pixel-gold font-bold text-base sm:text-lg break-words">
-                      {event.name}
-                    </h4>
-                    <span className="px-2 py-1 bg-pixel-gold/20 border border-pixel-gold/50 text-pixel-gold text-[10px] sm:text-xs uppercase rounded whitespace-nowrap flex-shrink-0">
-                      {getEventTypeLabel(event.type)}
-                    </span>
-                    <span
-                      className={`px-2 py-1 text-[10px] sm:text-xs uppercase rounded whitespace-nowrap flex-shrink-0 ${(() => {
-                        const status = calculateEventStatus(event.date);
-                        return status === "UPCOMING"
-                          ? "bg-green-900/50 border border-green-500/50 text-green-400"
-                          : status === "LIVE"
-                            ? "bg-yellow-900/50 border border-yellow-500/50 text-yellow-400"
-                            : "bg-gray-900/50 border border-gray-500/50 text-gray-400";
-                      })()}`}
-                    >
-                      {getStatusLabel(calculateEventStatus(event.date))}
-                    </span>
-                  </div>
-                  <p className="text-gray-400 text-xs sm:text-sm mb-2 break-words">
-                    {event.description}
-                  </p>
-                  <div className="flex flex-wrap items-center gap-2 sm:gap-4 mt-2">
-                    <p className="text-gray-500 text-[10px] sm:text-xs whitespace-nowrap">
-                      Date: {new Date(event.date).toLocaleDateString("fr-FR")}
-                    </p>
-                    {event.room && (
-                      <p className="text-gray-500 text-[10px] sm:text-xs whitespace-nowrap">
-                        📍 Salle: {event.room}
-                      </p>
-                    )}
-                    {event.time && (
-                      <p className="text-gray-500 text-[10px] sm:text-xs whitespace-nowrap">
-                        🕐 Heure: {event.time}
-                      </p>
-                    )}
-                    {event.maxPlaces && (
-                      <p className="text-gray-500 text-[10px] sm:text-xs whitespace-nowrap">
-                        👥 Places: {event.maxPlaces}
-                      </p>
-                    )}
-                    <span className="px-2 py-1 bg-blue-900/30 border border-blue-500/50 text-blue-400 text-[10px] sm:text-xs rounded whitespace-nowrap flex-shrink-0">
-                      {event.registrationsCount || 0} inscrit
-                      {event.registrationsCount !== 1 ? "s" : ""}
-                    </span>
-                  </div>
-                </div>
-                {!isCreating && !editingEvent && (
-                  <div className="flex gap-2 sm:ml-4 flex-shrink-0">
-                    <button
-                      onClick={() => handleEdit(event)}
-                      className="px-2 sm:px-3 py-1 border border-pixel-gold/50 bg-black/60 text-white uppercase text-[10px] sm:text-xs tracking-widest rounded hover:bg-pixel-gold/10 transition whitespace-nowrap"
-                    >
-                      Modifier
-                    </button>
-                    <button
-                      onClick={() => handleDelete(event.id)}
-                      className="px-2 sm:px-3 py-1 border border-red-500/50 bg-red-900/20 text-red-400 uppercase text-[10px] sm:text-xs tracking-widest rounded hover:bg-red-900/30 transition whitespace-nowrap"
-                    >
-                      Supprimer
-                    </button>
-                  </div>
-                )}
-              </div>
-            </div>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}

components/EventsSection.tsx

@@ -1,43 +0,0 @@
-interface Event {
-  id: string;
-  date: string;
-  name: string;
-}
-
-interface EventsSectionProps {
-  events: Event[];
-}
-
-export default function EventsSection({ events }: EventsSectionProps) {
-  if (events.length === 0) {
-    return null;
-  }
-  return (
-    <section className="w-full bg-gray-950 border-t border-pixel-gold/30 py-16">
-      <div className="max-w-7xl mx-auto px-8">
-        <div className="flex flex-col md:flex-row items-center justify-around gap-8">
-          {events.map((event, index) => (
-            <div key={index} className="flex flex-col items-center">
-              <div className="flex flex-col items-center mb-4">
-                <span className="text-pixel-gold text-xs uppercase tracking-widest mb-2">
-                  Événement
-                </span>
-                <div className="w-16 h-px bg-pixel-gold"></div>
-              </div>
-              <div className="text-white text-lg font-bold mb-2 uppercase tracking-wide">
-                {new Date(event.date).toLocaleDateString("fr-FR", {
-                  day: "numeric",
-                  month: "long",
-                  year: "numeric",
-                })}
-              </div>
-              <div className="text-white text-base text-center">
-                {event.name}
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-    </section>
-  );
-}

components/FeedbackModal.tsx

@@ -1,288 +0,0 @@
-"use client";
-
-import { useState, useEffect, type FormEvent } from "react";
-import { useSession } from "next-auth/react";
-
-interface Event {
-  id: string;
-  name: string;
-  date: string;
-  description: string;
-}
-
-interface Feedback {
-  id: string;
-  rating: number;
-  comment: string | null;
-}
-
-interface FeedbackModalProps {
-  eventId: string | null;
-  eventName?: string;
-  onClose: () => void;
-}
-
-export default function FeedbackModal({
-  eventId,
-  eventName: _eventName,
-  onClose,
-}: FeedbackModalProps) {
-  const { status } = useSession();
-  const [event, setEvent] = useState<Event | null>(null);
-  const [existingFeedback, setExistingFeedback] = useState<Feedback | null>(
-    null
-  );
-  const [loading, setLoading] = useState(true);
-  const [submitting, setSubmitting] = useState(false);
-  const [error, setError] = useState("");
-  const [success, setSuccess] = useState(false);
-
-  const [rating, setRating] = useState(0);
-  const [comment, setComment] = useState("");
-
-  // Réinitialiser les états quand eventId change
-  useEffect(() => {
-    if (eventId) {
-      setEvent(null);
-      setExistingFeedback(null);
-      setRating(0);
-      setComment("");
-      setError("");
-      setSuccess(false);
-      setLoading(true);
-    }
-  }, [eventId]);
-
-  const fetchEventAndFeedback = async () => {
-    if (!eventId) return;
-
-    try {
-      // Récupérer l'événement
-      const eventResponse = await fetch(`/api/events/${eventId}`);
-      if (!eventResponse.ok) {
-        setError("Événement introuvable");
-        setLoading(false);
-        return;
-      }
-      const eventData = await eventResponse.json();
-      setEvent(eventData);
-
-      // Récupérer le feedback existant si disponible
-      const feedbackResponse = await fetch(`/api/feedback/${eventId}`);
-      if (feedbackResponse.ok) {
-        const feedbackData = await feedbackResponse.json();
-        if (feedbackData.feedback) {
-          setExistingFeedback(feedbackData.feedback);
-          setRating(feedbackData.feedback.rating);
-          setComment(feedbackData.feedback.comment || "");
-        } else {
-          // Pas de feedback existant, réinitialiser
-          setRating(0);
-          setComment("");
-        }
-      } else {
-        // Pas de feedback existant, réinitialiser
-        setRating(0);
-        setComment("");
-      }
-    } catch {
-      setError("Erreur lors du chargement des données");
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    if (status === "unauthenticated") {
-      onClose();
-      return;
-    }
-
-    if (status === "authenticated" && eventId) {
-      fetchEventAndFeedback();
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [status, eventId]);
-
-  const handleSubmit = async (e: FormEvent) => {
-    e.preventDefault();
-    if (!eventId) return;
-
-    setError("");
-    setSuccess(false);
-
-    if (rating === 0) {
-      setError("Veuillez sélectionner une note");
-      return;
-    }
-
-    setSubmitting(true);
-
-    try {
-      const response = await fetch(`/api/feedback/${eventId}`, {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
-          rating,
-          comment: comment.trim() || null,
-        }),
-      });
-
-      const data = await response.json();
-
-      if (!response.ok) {
-        setError(data.error || "Erreur lors de l'enregistrement");
-        return;
-      }
-
-      setSuccess(true);
-      setExistingFeedback(data.feedback);
-
-      // Fermer la modale après 1.5 secondes
-      setTimeout(() => {
-        onClose();
-      }, 1500);
-    } catch {
-      setError("Erreur lors de l'enregistrement");
-    } finally {
-      setSubmitting(false);
-    }
-  };
-
-  const handleClose = () => {
-    if (!submitting) {
-      onClose();
-    }
-  };
-
-  if (!eventId) return null;
-
-  return (
-    <div
-      className="fixed inset-0 z-[200] flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm"
-      onClick={handleClose}
-    >
-      <div
-        className="bg-black border-2 border-pixel-gold/70 rounded-lg max-w-2xl w-full max-h-[90vh] overflow-y-auto shadow-2xl"
-        onClick={(e) => e.stopPropagation()}
-      >
-        <div className="p-8">
-          {/* Header */}
-          <div className="flex items-center justify-between mb-6">
-            <h1 className="text-4xl font-gaming font-black">
-              <span className="bg-gradient-to-r from-pixel-gold via-orange-400 to-pixel-gold bg-clip-text text-transparent">
-                FEEDBACK
-              </span>
-            </h1>
-            <button
-              onClick={handleClose}
-              disabled={submitting}
-              className="text-gray-400 hover:text-pixel-gold text-3xl font-bold transition disabled:opacity-50 disabled:cursor-not-allowed"
-            >
-              ×
-            </button>
-          </div>
-
-          {loading ? (
-            <div className="text-white text-center py-8">Chargement...</div>
-          ) : !event ? (
-            <div className="text-red-400 text-center py-8">
-              Événement introuvable
-            </div>
-          ) : (
-            <>
-              <p className="text-gray-400 text-sm text-center mb-2">
-                {existingFeedback
-                  ? "Modifier votre feedback pour"
-                  : "Donnez votre avis sur"}
-              </p>
-              <p className="text-pixel-gold text-lg font-semibold text-center mb-8">
-                {event.name}
-              </p>
-
-              {success && (
-                <div className="bg-green-900/50 border border-green-500/50 text-green-400 px-4 py-3 rounded text-sm mb-6">
-                  Feedback enregistré avec succès !
-                </div>
-              )}
-
-              {error && (
-                <div className="bg-red-900/50 border border-red-500/50 text-red-400 px-4 py-3 rounded text-sm mb-6">
-                  {error}
-                </div>
-              )}
-
-              <form onSubmit={handleSubmit} className="space-y-6">
-                {/* Rating */}
-                <div>
-                  <label className="block text-sm font-semibold text-gray-300 mb-4 uppercase tracking-wider">
-                    Note
-                  </label>
-                  <div className="flex items-center justify-center gap-2">
-                    {[1, 2, 3, 4, 5].map((star) => (
-                      <button
-                        key={star}
-                        type="button"
-                        onClick={() => setRating(star)}
-                        disabled={submitting}
-                        className={`text-4xl transition-transform hover:scale-110 disabled:hover:scale-100 ${
-                          star <= rating
-                            ? "text-pixel-gold"
-                            : "text-gray-600 hover:text-gray-500"
-                        }`}
-                        aria-label={`Noter ${star} étoile${star > 1 ? "s" : ""}`}
-                      >
-                        ★
-                      </button>
-                    ))}
-                  </div>
-                  <p className="text-gray-500 text-xs text-center mt-2">
-                    {rating > 0 && `${rating}/5`}
-                  </p>
-                </div>
-
-                {/* Comment */}
-                <div>
-                  <label
-                    htmlFor="comment"
-                    className="block text-sm font-semibold text-gray-300 mb-2 uppercase tracking-wider"
-                  >
-                    Commentaire (optionnel)
-                  </label>
-                  <textarea
-                    id="comment"
-                    value={comment}
-                    onChange={(e) => setComment(e.target.value)}
-                    rows={6}
-                    maxLength={1000}
-                    disabled={submitting}
-                    className="w-full px-4 py-3 bg-black/60 border border-pixel-gold/30 rounded text-white placeholder-gray-500 focus:outline-none focus:border-pixel-gold transition resize-none disabled:opacity-50"
-                    placeholder="Partagez votre expérience, vos suggestions..."
-                  />
-                  <p className="text-gray-500 text-xs mt-1 text-right">
-                    {comment.length}/1000 caractères
-                  </p>
-                </div>
-
-                {/* Submit Button */}
-                <button
-                  type="submit"
-                  disabled={submitting || rating === 0}
-                  className="w-full px-6 py-3 border border-pixel-gold/50 bg-black/60 text-white uppercase text-sm tracking-widest rounded hover:bg-pixel-gold/10 hover:border-pixel-gold transition disabled:opacity-50 disabled:cursor-not-allowed"
-                >
-                  {submitting
-                    ? "Enregistrement..."
-                    : existingFeedback
-                      ? "Modifier le feedback"
-                      : "Envoyer le feedback"}
-                </button>
-              </form>
-            </>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}

components/LeaderboardSection.tsx

@@ -1,290 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import Avatar from "./Avatar";
-
-interface LeaderboardEntry {
-  rank: number;
-  username: string;
-  email: string;
-  score: number;
-  level: number;
-  avatar?: string | null;
-  bio?: string | null;
-  characterClass?: string | null;
-}
-
-interface LeaderboardSectionProps {
-  leaderboard: LeaderboardEntry[];
-  backgroundImage: string;
-}
-
-// Format number with consistent locale to avoid hydration mismatch
-const formatScore = (score: number): string => {
-  return score.toLocaleString("en-US");
-};
-
-export default function LeaderboardSection({
-  leaderboard,
-  backgroundImage,
-}: LeaderboardSectionProps) {
-  const [selectedEntry, setSelectedEntry] = useState<LeaderboardEntry | null>(
-    null
-  );
-
-  return (
-    <section className="relative w-full min-h-screen flex flex-col items-center justify-center pt-24 pb-16">
-      {/* Background Image */}
-      <div
-        className="absolute inset-0 bg-cover bg-center bg-no-repeat"
-        style={{
-          backgroundImage: `url('${backgroundImage}')`,
-        }}
-      >
-        {/* Dark overlay for readability */}
-        <div className="absolute inset-0 bg-gradient-to-b from-black/70 via-black/60 to-black/80"></div>
-      </div>
-
-      {/* Content */}
-      <div className="relative z-10 w-full max-w-6xl mx-auto px-4 sm:px-8 py-16">
-        {/* Title Section */}
-        <div className="text-center mb-12 overflow-hidden">
-          <h1 className="text-3xl sm:text-4xl md:text-7xl font-gaming font-black mb-4 tracking-tight break-words">
-            <span
-              className="bg-gradient-to-r from-pixel-gold via-orange-400 to-pixel-gold bg-clip-text text-transparent"
-              style={{
-                textShadow: "0 0 30px rgba(218, 165, 32, 0.5)",
-              }}
-            >
-              LEADERBOARD
-            </span>
-          </h1>
-          <div className="text-pixel-gold text-lg md:text-xl font-gaming-subtitle font-semibold flex items-center justify-center gap-2 tracking-wide">
-            <span>✦</span>
-            <span>Top Players</span>
-            <span>✦</span>
-          </div>
-        </div>
-
-        {/* Leaderboard Table */}
-        <div className="bg-black/60 border border-pixel-gold/30 rounded-lg backdrop-blur-sm overflow-x-auto">
-          {/* Header */}
-          <div className="bg-gray-900/80 border-b border-pixel-gold/30 grid grid-cols-12 gap-2 sm:gap-4 p-2 sm:p-4 font-bold text-[10px] sm:text-xs uppercase tracking-widest text-gray-300">
-            <div className="col-span-2 sm:col-span-1 text-center">Rank</div>
-            <div className="col-span-5 sm:col-span-6">Player</div>
-            <div className="col-span-3 text-right">Score</div>
-            <div className="col-span-2 text-right">Level</div>
-          </div>
-
-          {/* Entries */}
-          <div className="divide-y divide-pixel-gold/10 overflow-visible">
-            {leaderboard.map((entry) => (
-              <div
-                key={entry.rank}
-                className={`grid grid-cols-12 gap-2 sm:gap-4 p-2 sm:p-4 hover:bg-gray-900/50 transition relative ${
-                  entry.rank <= 3
-                    ? "bg-gradient-to-r from-pixel-gold/10 via-pixel-gold/5 to-transparent"
-                    : "bg-black/40"
-                }`}
-              >
-                {/* Rank */}
-                <div className="col-span-2 sm:col-span-1 flex items-center justify-center">
-                  <span
-                    className={`inline-flex items-center justify-center w-8 h-8 sm:w-10 sm:h-10 rounded-full font-bold text-xs sm:text-sm ${
-                      entry.rank === 1
-                        ? "bg-gradient-to-br from-pixel-gold to-orange-500 text-black shadow-lg shadow-pixel-gold/50"
-                        : entry.rank === 2
-                          ? "bg-gradient-to-br from-gray-400 to-gray-500 text-black"
-                          : entry.rank === 3
-                            ? "bg-gradient-to-br from-orange-700 to-orange-800 text-white"
-                            : "bg-gray-900 text-gray-400 border border-gray-800"
-                    }`}
-                  >
-                    {entry.rank}
-                  </span>
-                </div>
-
-                {/* Player */}
-                <div className="col-span-5 sm:col-span-6 flex items-center gap-2 sm:gap-3 min-w-0">
-                  <Avatar
-                    src={entry.avatar}
-                    username={entry.username}
-                    size="sm"
-                    className="flex-shrink-0"
-                    borderClassName="border-pixel-gold/30"
-                  />
-                  <div
-                    className="flex items-center gap-1 sm:gap-2 cursor-pointer hover:opacity-80 transition min-w-0"
-                    onClick={() => setSelectedEntry(entry)}
-                  >
-                    <span
-                      className={`font-bold text-xs sm:text-sm truncate ${
-                        entry.rank <= 3 ? "text-pixel-gold" : "text-white"
-                      }`}
-                    >
-                      {entry.username}
-                    </span>
-                    {entry.characterClass && (
-                      <span className="text-xs text-gray-400 uppercase tracking-wider">
-                        [{entry.characterClass === "WARRIOR" && "⚔️"}
-                        {entry.characterClass === "MAGE" && "🔮"}
-                        {entry.characterClass === "ROGUE" && "🗡️"}
-                        {entry.characterClass === "RANGER" && "🏹"}
-                        {entry.characterClass === "PALADIN" && "🛡️"}
-                        {entry.characterClass === "ENGINEER" && "⚙️"}
-                        {entry.characterClass === "MERCHANT" && "💰"}
-                        {entry.characterClass === "SCHOLAR" && "📚"}
-                        {entry.characterClass === "BERSERKER" && "🔥"}
-                        {entry.characterClass === "NECROMANCER" && "💀"}]
-                      </span>
-                    )}
-                    {entry.rank <= 3 && (
-                      <span className="text-pixel-gold text-xs">✦</span>
-                    )}
-                  </div>
-                </div>
-
-                {/* Score */}
-                <div className="col-span-3 flex items-center justify-end">
-                  <span className="font-mono text-gray-300 text-xs sm:text-sm">
-                    {formatScore(entry.score)}
-                  </span>
-                </div>
-
-                {/* Level */}
-                <div className="col-span-2 flex items-center justify-end">
-                  <span className="font-bold text-gray-400 text-xs sm:text-sm">
-                    Lv.{entry.level}
-                  </span>
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-
-        {/* Footer Info */}
-        <div className="mt-8 text-center">
-          <p className="text-gray-500 text-sm">
-            Compete with players worldwide and climb the ranks!
-          </p>
-          <p className="text-gray-600 text-xs mt-2">
-            Rankings update every hour
-          </p>
-        </div>
-      </div>
-
-      {/* Character Modal */}
-      {selectedEntry && (
-        <div
-          className="fixed inset-0 z-[200] flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm"
-          onClick={() => setSelectedEntry(null)}
-        >
-          <div
-            className="bg-black border-2 border-pixel-gold/70 rounded-lg max-w-2xl w-full max-h-[90vh] overflow-y-auto shadow-2xl"
-            onClick={(e) => e.stopPropagation()}
-          >
-            <div className="p-4 sm:p-8">
-              {/* Header */}
-              <div className="flex items-center justify-between mb-6">
-                <h2 className="text-xl sm:text-3xl font-bold text-pixel-gold uppercase tracking-wider break-words">
-                  {selectedEntry.username}
-                </h2>
-                <button
-                  onClick={() => setSelectedEntry(null)}
-                  className="text-gray-400 hover:text-pixel-gold text-2xl font-bold transition"
-                >
-                  ×
-                </button>
-              </div>
-
-              {/* Avatar and Class */}
-              <div className="flex items-center gap-4 sm:gap-6 mb-6">
-                <Avatar
-                  src={selectedEntry.avatar}
-                  username={selectedEntry.username}
-                  size="lg"
-                  className="flex-shrink-0"
-                  borderClassName="border-2 sm:border-4 border-pixel-gold/50"
-                />
-                <div>
-                  <div className="text-xs text-gray-400 uppercase tracking-widest mb-2">
-                    Rank #{selectedEntry.rank}
-                  </div>
-                  <div className="text-sm text-gray-300 mb-2">
-                    {selectedEntry.email}
-                  </div>
-                  {selectedEntry.characterClass && (
-                    <div className="flex items-center gap-2">
-                      <span className="text-2xl">
-                        {selectedEntry.characterClass === "WARRIOR" && "⚔️"}
-                        {selectedEntry.characterClass === "MAGE" && "🔮"}
-                        {selectedEntry.characterClass === "ROGUE" && "🗡️"}
-                        {selectedEntry.characterClass === "RANGER" && "🏹"}
-                        {selectedEntry.characterClass === "PALADIN" && "🛡️"}
-                        {selectedEntry.characterClass === "ENGINEER" && "⚙️"}
-                        {selectedEntry.characterClass === "MERCHANT" && "💰"}
-                        {selectedEntry.characterClass === "SCHOLAR" && "📚"}
-                        {selectedEntry.characterClass === "BERSERKER" && "🔥"}
-                        {selectedEntry.characterClass === "NECROMANCER" && "💀"}
-                      </span>
-                      <span className="text-lg font-bold text-pixel-gold uppercase tracking-wider">
-                        {selectedEntry.characterClass === "WARRIOR" &&
-                          "Guerrier"}
-                        {selectedEntry.characterClass === "MAGE" && "Mage"}
-                        {selectedEntry.characterClass === "ROGUE" && "Voleur"}
-                        {selectedEntry.characterClass === "RANGER" && "Rôdeur"}
-                        {selectedEntry.characterClass === "PALADIN" &&
-                          "Paladin"}
-                        {selectedEntry.characterClass === "ENGINEER" &&
-                          "Ingénieur"}
-                        {selectedEntry.characterClass === "MERCHANT" &&
-                          "Marchand"}
-                        {selectedEntry.characterClass === "SCHOLAR" && "Érudit"}
-                        {selectedEntry.characterClass === "BERSERKER" &&
-                          "Berserker"}
-                        {selectedEntry.characterClass === "NECROMANCER" &&
-                          "Nécromancien"}
-                      </span>
-                    </div>
-                  )}
-                </div>
-              </div>
-
-              {/* Stats */}
-              <div className="grid grid-cols-2 gap-4 mb-6">
-                <div className="bg-black/60 border border-pixel-gold/30 rounded p-4">
-                  <div className="text-xs text-gray-400 uppercase tracking-widest mb-1">
-                    Score
-                  </div>
-                  <div className="text-2xl font-bold text-pixel-gold">
-                    {formatScore(selectedEntry.score)}
-                  </div>
-                </div>
-                <div className="bg-black/60 border border-pixel-gold/30 rounded p-4">
-                  <div className="text-xs text-gray-400 uppercase tracking-widest mb-1">
-                    Niveau
-                  </div>
-                  <div className="text-2xl font-bold text-pixel-gold">
-                    Lv.{selectedEntry.level}
-                  </div>
-                </div>
-              </div>
-
-              {/* Bio */}
-              {selectedEntry.bio && (
-                <div className="border-t border-pixel-gold/30 pt-6">
-                  <div className="text-xs text-pixel-gold uppercase tracking-widest mb-3 font-bold">
-                    Bio
-                  </div>
-                  <p className="text-gray-200 leading-relaxed whitespace-pre-wrap break-words">
-                    {selectedEntry.bio}
-                  </p>
-                </div>
-              )}
-            </div>
-          </div>
-        </div>
-      )}
-    </section>
-  );
-}

components/Navigation.tsx

@@ -1,233 +0,0 @@
-"use client";
-
-import Link from "next/link";
-import { useSession, signOut } from "next-auth/react";
-import { useState } from "react";
-import { usePathname } from "next/navigation";
-import PlayerStats from "./PlayerStats";
-
-interface UserData {
-  username: string;
-  avatar: string | null;
-  hp: number;
-  maxHp: number;
-  xp: number;
-  maxXp: number;
-  level: number;
-}
-
-interface NavigationProps {
-  initialUserData?: UserData | null;
-  initialIsAdmin?: boolean;
-}
-
-export default function Navigation({
-  initialUserData,
-  initialIsAdmin,
-}: NavigationProps) {
-  const { data: session } = useSession();
-  const [isMenuOpen, setIsMenuOpen] = useState(false);
-  const pathname = usePathname();
-
-  // Ne pas afficher le profil sur les pages login/register
-  const isAuthPage = pathname === "/login" || pathname === "/register";
-
-  // Utiliser initialUserData pour déterminer l'état de connexion pendant l'hydratation
-  // Cela évite le clignottement au reload
-  // Vérifier explicitement que initialUserData n'est pas undefined
-  const isAuthenticated =
-    (initialUserData !== undefined && initialUserData !== null) ||
-    session !== null;
-  const isAdmin = initialIsAdmin ?? session?.user?.role === "ADMIN";
-
-  return (
-    <nav className="w-full fixed top-0 left-0 z-50 px-4 sm:px-8 py-3 bg-black/80 backdrop-blur-sm border-b border-gray-800/30">
-      <div className="max-w-7xl mx-auto flex items-center justify-between">
-        {/* Logo - Left */}
-        <Link
-          href="/"
-          className="flex flex-col hover:opacity-80 transition-opacity"
-        >
-          <div className="text-white text-lg sm:text-xl font-gaming font-bold tracking-tight">
-            GAME.OF.TECH
-          </div>
-          <div className="text-pixel-gold text-[10px] sm:text-xs font-gaming-subtitle font-semibold flex items-center gap-1 tracking-wide">
-            <span>✦</span>
-            <span>Peaksys</span>
-            <span>✦</span>
-          </div>
-        </Link>
-
-        {/* Navigation Links - Center (Desktop) */}
-        <div className="hidden md:flex items-center gap-6">
-          <Link
-            href="/"
-            className="text-white hover:text-pixel-gold transition text-xs font-normal uppercase tracking-widest"
-          >
-            HOME
-          </Link>
-          <Link
-            href="/events"
-            className="text-white hover:text-pixel-gold transition text-xs font-normal uppercase tracking-widest"
-          >
-            EVENTS
-          </Link>
-          <Link
-            href="/leaderboard"
-            className="text-white hover:text-pixel-gold transition text-xs font-normal uppercase tracking-widest"
-          >
-            LEADERBOARD
-          </Link>
-          {isAdmin && (
-            <Link
-              href="/admin"
-              className="text-pixel-gold hover:text-orange-400 transition text-xs font-normal uppercase tracking-widest"
-            >
-              ADMIN
-            </Link>
-          )}
-        </div>
-
-        {/* Right Side */}
-        <div className="flex items-center gap-2 sm:gap-4">
-          {/* PlayerStats - Hidden on mobile */}
-          {isAuthenticated && !isAuthPage && (
-            <div className="hidden lg:block">
-              <PlayerStats initialUserData={initialUserData} />
-            </div>
-          )}
-
-          {/* Desktop Auth Buttons */}
-          <div className="hidden md:flex items-center gap-4">
-            {isAuthenticated ? (
-              <button
-                onClick={() => signOut()}
-                className="text-gray-400 hover:text-pixel-gold transition text-xs font-normal uppercase tracking-widest"
-              >
-                Déconnexion
-              </button>
-            ) : (
-              <>
-                <Link
-                  href="/login"
-                  className="text-white hover:text-pixel-gold transition text-xs font-normal uppercase tracking-widest"
-                >
-                  Connexion
-                </Link>
-                <Link
-                  href="/register"
-                  className="px-4 py-2 border border-pixel-gold/50 bg-black/60 text-white uppercase text-xs tracking-widest rounded hover:bg-pixel-gold/10 hover:border-pixel-gold transition"
-                >
-                  Inscription
-                </Link>
-              </>
-            )}
-          </div>
-
-          {/* Mobile Menu Button */}
-          <button
-            onClick={() => setIsMenuOpen(!isMenuOpen)}
-            className="md:hidden text-white hover:text-pixel-gold transition p-2"
-            aria-label="Toggle menu"
-          >
-            <svg
-              className="w-6 h-6"
-              fill="none"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth="2"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              {isMenuOpen ? (
-                <path d="M6 18L18 6M6 6l12 12" />
-              ) : (
-                <path d="M4 6h16M4 12h16M4 18h16" />
-              )}
-            </svg>
-          </button>
-        </div>
-      </div>
-
-      {/* Mobile Menu */}
-      {isMenuOpen && (
-        <div className="md:hidden absolute top-full left-0 w-full bg-black/95 backdrop-blur-sm border-b border-gray-800/30">
-          <div className="px-4 py-4 flex flex-col gap-4">
-            {/* Mobile Navigation Links */}
-            <div className="flex flex-col gap-3">
-              <Link
-                href="/"
-                onClick={() => setIsMenuOpen(false)}
-                className="text-white hover:text-pixel-gold transition text-xs font-normal uppercase tracking-widest py-2"
-              >
-                HOME
-              </Link>
-              <Link
-                href="/events"
-                onClick={() => setIsMenuOpen(false)}
-                className="text-white hover:text-pixel-gold transition text-xs font-normal uppercase tracking-widest py-2"
-              >
-                EVENTS
-              </Link>
-              <Link
-                href="/leaderboard"
-                onClick={() => setIsMenuOpen(false)}
-                className="text-white hover:text-pixel-gold transition text-xs font-normal uppercase tracking-widest py-2"
-              >
-                LEADERBOARD
-              </Link>
-              {isAdmin && (
-                <Link
-                  href="/admin"
-                  onClick={() => setIsMenuOpen(false)}
-                  className="text-pixel-gold hover:text-orange-400 transition text-xs font-normal uppercase tracking-widest py-2"
-                >
-                  ADMIN
-                </Link>
-              )}
-            </div>
-
-            {/* Mobile PlayerStats */}
-            {isAuthenticated && !isAuthPage && (
-              <div className="lg:hidden pt-2 border-t border-gray-800/30">
-                <PlayerStats initialUserData={initialUserData} />
-              </div>
-            )}
-
-            {/* Mobile Auth Buttons */}
-            <div className="flex flex-col gap-3 pt-2 border-t border-gray-800/30">
-              {isAuthenticated ? (
-                <button
-                  onClick={() => {
-                    signOut();
-                    setIsMenuOpen(false);
-                  }}
-                  className="text-gray-400 hover:text-pixel-gold transition text-xs font-normal uppercase tracking-widest text-left py-2"
-                >
-                  Déconnexion
-                </button>
-              ) : (
-                <>
-                  <Link
-                    href="/login"
-                    onClick={() => setIsMenuOpen(false)}
-                    className="text-white hover:text-pixel-gold transition text-xs font-normal uppercase tracking-widest py-2"
-                  >
-                    Connexion
-                  </Link>
-                  <Link
-                    href="/register"
-                    onClick={() => setIsMenuOpen(false)}
-                    className="px-4 py-2 border border-pixel-gold/50 bg-black/60 text-white uppercase text-xs tracking-widest rounded hover:bg-pixel-gold/10 hover:border-pixel-gold transition text-center"
-                  >
-                    Inscription
-                  </Link>
-                </>
-              )}
-            </div>
-          </div>
-        </div>
-      )}
-    </nav>
-  );
-}

components/NavigationWrapper.tsx

@@ -1,41 +0,0 @@
-import { auth } from "@/lib/auth";
-import { prisma } from "@/lib/prisma";
-import Navigation from "./Navigation";
-
-interface UserData {
-  username: string;
-  avatar: string | null;
-  hp: number;
-  maxHp: number;
-  xp: number;
-  maxXp: number;
-  level: number;
-}
-
-export default async function NavigationWrapper() {
-  const session = await auth();
-
-  let userData: UserData | null = null;
-  const isAdmin = session?.user?.role === "ADMIN";
-
-  if (session?.user?.id) {
-    const user = await prisma.user.findUnique({
-      where: { id: session.user.id },
-      select: {
-        username: true,
-        avatar: true,
-        hp: true,
-        maxHp: true,
-        xp: true,
-        maxXp: true,
-        level: true,
-      },
-    });
-
-    if (user) {
-      userData = user;
-    }
-  }
-
-  return <Navigation initialUserData={userData} initialIsAdmin={isAdmin} />;
-}

components/PlayerStats.tsx

@@ -1,222 +0,0 @@
-"use client";
-
-import { useEffect, useState } from "react";
-import { useSession } from "next-auth/react";
-import Link from "next/link";
-import Avatar from "./Avatar";
-
-interface UserData {
-  username: string;
-  avatar: string | null;
-  hp: number;
-  maxHp: number;
-  xp: number;
-  maxXp: number;
-  level: number;
-}
-
-interface PlayerStatsProps {
-  initialUserData?: UserData | null;
-}
-
-// Format number with consistent locale to avoid hydration mismatch
-const formatNumber = (num: number): string => {
-  return num.toLocaleString("en-US");
-};
-
-const defaultUserData: UserData = {
-  username: "Guest",
-  avatar: null,
-  hp: 1000,
-  maxHp: 1000,
-  xp: 0,
-  maxXp: 5000,
-  level: 1,
-};
-
-export default function PlayerStats({ initialUserData }: PlayerStatsProps) {
-  const { data: session } = useSession();
-  const [userData, setUserData] = useState<UserData>(
-    initialUserData || defaultUserData
-  );
-
-  useEffect(() => {
-    // Si on a déjà des données initiales, ne rien faire (déjà initialisé dans useState)
-    if (initialUserData) {
-      return;
-    }
-
-    // Sinon, fallback sur le fetch côté client (pour les pages Client Components)
-    if (session?.user?.id) {
-      fetch(`/api/users/${session.user.id}`)
-        .then((res) => res.json())
-        .then((data) => {
-          if (data) {
-            // Utiliser requestAnimationFrame pour éviter les cascades de rendu
-            requestAnimationFrame(() => {
-              setUserData({
-                username: data.username || "Guest",
-                avatar: data.avatar,
-                hp: data.hp || 1000,
-                maxHp: data.maxHp || 1000,
-                xp: data.xp || 0,
-                maxXp: data.maxXp || 5000,
-                level: data.level || 1,
-              });
-            });
-          }
-        })
-        .catch(() => {
-          // Utiliser les données de session si l'API échoue
-          requestAnimationFrame(() => {
-            setUserData({
-              username: session.user.username || "Guest",
-              avatar: null,
-              hp: 1000,
-              maxHp: 1000,
-              xp: 0,
-              maxXp: 5000,
-              level: 1,
-            });
-          });
-        });
-    } else if (!initialUserData) {
-      // Utiliser requestAnimationFrame pour éviter les cascades de rendu
-      requestAnimationFrame(() => {
-        setUserData(defaultUserData);
-      });
-    }
-  }, [session, initialUserData]);
-
-  const { username, avatar, hp, maxHp, xp, maxXp, level } = userData;
-
-  // Calculer les pourcentages cibles
-  const targetHpPercentage = (hp / maxHp) * 100;
-  const targetXpPercentage = (xp / maxXp) * 100;
-
-  // Initialiser les pourcentages à 0 si on a des données initiales (pour l'animation)
-  // Sinon utiliser directement les valeurs calculées
-  const [hpPercentage, setHpPercentage] = useState(
-    initialUserData ? 0 : targetHpPercentage
-  );
-  const [xpPercentage, setXpPercentage] = useState(
-    initialUserData ? 0 : targetXpPercentage
-  );
-
-  useEffect(() => {
-    // Si on a des données initiales, animer depuis 0 vers la valeur cible
-    if (initialUserData) {
-      const hpTimer = setTimeout(() => {
-        setHpPercentage(targetHpPercentage);
-      }, 100);
-
-      const xpTimer = setTimeout(() => {
-        setXpPercentage(targetXpPercentage);
-      }, 200);
-
-      return () => {
-        clearTimeout(hpTimer);
-        clearTimeout(xpTimer);
-      };
-    }
-    // Sinon, mettre à jour directement (pour les pages Client Components)
-    // Utiliser requestAnimationFrame pour éviter les cascades de rendu
-    requestAnimationFrame(() => {
-      setHpPercentage(targetHpPercentage);
-      setXpPercentage(targetXpPercentage);
-    });
-  }, [targetHpPercentage, targetXpPercentage, initialUserData]);
-
-  const hpColor =
-    hpPercentage > 60
-      ? "from-green-600 to-green-700"
-      : hpPercentage > 30
-        ? "from-yellow-600 to-orange-700"
-        : "from-red-700 to-red-900";
-
-  return (
-    <div className="flex items-center gap-3">
-      {/* Avatar */}
-      <Link
-        href="/profile"
-        className="cursor-pointer hover:opacity-80 transition-opacity"
-      >
-        <Avatar
-          src={avatar}
-          username={username}
-          size="md"
-          borderClassName="border-pixel-gold/20"
-        />
-      </Link>
-
-      {/* Stats */}
-      <div className="flex flex-col gap-1.5 min-w-[180px] sm:min-w-[200px]">
-        {/* Username & Level */}
-        <div className="flex items-center gap-2">
-          <Link
-            href="/profile"
-            className="cursor-pointer hover:text-pixel-gold/80 transition-colors"
-          >
-            <div className="text-pixel-gold font-gaming font-bold text-sm tracking-wider">
-              {username}
-            </div>
-          </Link>
-          <div className="text-gray-400 font-pixel text-xs uppercase border border-pixel-gold/30 px-1.5 py-0.5 bg-black/40">
-            Lv.{level}
-          </div>
-        </div>
-
-        {/* Bars side by side */}
-        <div className="flex flex-col gap-1">
-          <div className="flex items-center gap-2">
-            {/* HP Bar */}
-            <div className="relative h-2 flex-1 bg-gray-900 border border-gray-700 rounded overflow-hidden">
-              <div
-                className={`absolute inset-0 bg-gradient-to-r ${hpColor} transition-all duration-1000 ease-out`}
-                style={{ width: `${hpPercentage}%` }}
-              >
-                <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/10 to-transparent animate-shimmer"></div>
-              </div>
-              {hpPercentage < 30 && (
-                <div className="absolute inset-0 border border-red-500 rounded animate-pulse"></div>
-              )}
-            </div>
-
-            {/* XP Bar */}
-            <div className="relative h-2 flex-1 bg-gray-900 border border-pixel-gold/30 rounded overflow-hidden">
-              <div
-                className="absolute inset-0 bg-gradient-to-r from-pixel-gold/80 via-pixel-gold/70 to-pixel-gold/80 transition-all duration-1000 ease-out"
-                style={{ width: `${xpPercentage}%` }}
-              >
-                <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/10 to-transparent animate-shimmer"></div>
-              </div>
-            </div>
-          </div>
-          {/* Labels */}
-          <div className="flex items-center gap-2 text-[8px] font-pixel text-gray-400">
-            <div className="flex-1 text-left">
-              HP {hp} / {maxHp}
-            </div>
-            <div className="flex-1 text-right">
-              XP {formatNumber(xp)} / {formatNumber(maxXp)}
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <style jsx>{`
-        @keyframes shimmer {
-          0% {
-            transform: translateX(-100%);
-          }
-          100% {
-            transform: translateX(100%);
-          }
-        }
-        .animate-shimmer {
-          animation: shimmer 2s infinite;
-        }
-      `}</style>
-    </div>
-  );
-}

components/ProfileForm.tsx

@@ -1,634 +0,0 @@
-"use client";
-
-import { useState, useRef, type ChangeEvent } from "react";
-import Avatar from "./Avatar";
-
-type CharacterClass =
-  | "WARRIOR"
-  | "MAGE"
-  | "ROGUE"
-  | "RANGER"
-  | "PALADIN"
-  | "ENGINEER"
-  | "MERCHANT"
-  | "SCHOLAR"
-  | "BERSERKER"
-  | "NECROMANCER"
-  | null;
-
-interface UserProfile {
-  id: string;
-  email: string;
-  username: string;
-  avatar: string | null;
-  bio: string | null;
-  characterClass: CharacterClass;
-  hp: number;
-  maxHp: number;
-  xp: number;
-  maxXp: number;
-  level: number;
-  score: number;
-  createdAt: string;
-}
-
-interface ProfileFormProps {
-  initialProfile: UserProfile;
-  backgroundImage: string;
-}
-
-const formatNumber = (num: number): string => {
-  return num.toLocaleString("en-US");
-};
-
-export default function ProfileForm({
-  initialProfile,
-  backgroundImage,
-}: ProfileFormProps) {
-  const [profile, setProfile] = useState<UserProfile>(initialProfile);
-  const [saving, setSaving] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [success, setSuccess] = useState<string | null>(null);
-
-  const [username, setUsername] = useState(initialProfile.username);
-  const [avatar, setAvatar] = useState<string | null>(initialProfile.avatar);
-  const [bio, setBio] = useState<string | null>(initialProfile.bio || null);
-  const [characterClass, setCharacterClass] = useState<CharacterClass>(
-    initialProfile.characterClass || null
-  );
-  const fileInputRef = useRef<HTMLInputElement>(null);
-  const [uploadingAvatar, setUploadingAvatar] = useState(false);
-
-  // Password change form state
-  const [showPasswordForm, setShowPasswordForm] = useState(false);
-  const [currentPassword, setCurrentPassword] = useState("");
-  const [newPassword, setNewPassword] = useState("");
-  const [confirmPassword, setConfirmPassword] = useState("");
-  const [changingPassword, setChangingPassword] = useState(false);
-
-  const handleAvatarUpload = async (e: ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0];
-    if (!file) return;
-
-    setUploadingAvatar(true);
-    setError(null);
-
-    try {
-      const formData = new FormData();
-      formData.append("file", file);
-
-      const response = await fetch("/api/profile/avatar", {
-        method: "POST",
-        body: formData,
-      });
-
-      if (response.ok) {
-        const data = await response.json();
-        setAvatar(data.url);
-        setSuccess("Avatar mis à jour avec succès");
-        setTimeout(() => setSuccess(null), 3000);
-      } else {
-        const errorData = await response.json();
-        setError(errorData.error || "Erreur lors de l'upload de l'avatar");
-      }
-    } catch (err) {
-      console.error("Error uploading avatar:", err);
-      setError("Erreur lors de l'upload de l'avatar");
-    } finally {
-      setUploadingAvatar(false);
-      if (fileInputRef.current) {
-        fileInputRef.current.value = "";
-      }
-    }
-  };
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setSaving(true);
-    setError(null);
-    setSuccess(null);
-
-    try {
-      const response = await fetch("/api/profile", {
-        method: "PUT",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
-          username,
-          avatar,
-          bio,
-          characterClass,
-        }),
-      });
-
-      if (response.ok) {
-        const data = await response.json();
-        setProfile(data);
-        setBio(data.bio || null);
-        setCharacterClass(data.characterClass || null);
-        setSuccess("Profil mis à jour avec succès");
-        setTimeout(() => setSuccess(null), 3000);
-      } else {
-        const errorData = await response.json();
-        setError(errorData.error || "Erreur lors de la mise à jour");
-      }
-    } catch (err) {
-      console.error("Error updating profile:", err);
-      setError("Erreur lors de la mise à jour du profil");
-    } finally {
-      setSaving(false);
-    }
-  };
-
-  const handlePasswordChange = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setChangingPassword(true);
-    setError(null);
-    setSuccess(null);
-
-    try {
-      const response = await fetch("/api/profile/password", {
-        method: "PUT",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
-          currentPassword,
-          newPassword,
-          confirmPassword,
-        }),
-      });
-
-      if (response.ok) {
-        setSuccess("Mot de passe modifié avec succès");
-        setCurrentPassword("");
-        setNewPassword("");
-        setConfirmPassword("");
-        setShowPasswordForm(false);
-        setTimeout(() => setSuccess(null), 3000);
-      } else {
-        const errorData = await response.json();
-        setError(
-          errorData.error || "Erreur lors de la modification du mot de passe"
-        );
-      }
-    } catch (err) {
-      console.error("Error changing password:", err);
-      setError("Erreur lors de la modification du mot de passe");
-    } finally {
-      setChangingPassword(false);
-    }
-  };
-
-  const hpPercentage = (profile.hp / profile.maxHp) * 100;
-  const xpPercentage = (profile.xp / profile.maxXp) * 100;
-
-  const hpColor =
-    hpPercentage > 60
-      ? "from-green-600 to-green-700"
-      : hpPercentage > 30
-        ? "from-yellow-600 to-orange-700"
-        : "from-red-700 to-red-900";
-
-  return (
-    <section className="relative w-full min-h-screen flex flex-col items-center justify-center overflow-hidden pt-24 pb-16">
-      {/* Background Image */}
-      <div
-        className="absolute inset-0 bg-cover bg-center bg-no-repeat"
-        style={{
-          backgroundImage: `url('${backgroundImage}')`,
-        }}
-      >
-        {/* Dark overlay for readability */}
-        <div className="absolute inset-0 bg-gradient-to-b from-black/70 via-black/60 to-black/80"></div>
-      </div>
-
-      {/* Content */}
-      <div className="relative z-10 w-full max-w-4xl mx-auto px-8 py-16">
-        {/* Title Section */}
-        <div className="text-center mb-12">
-          <h1 className="text-5xl md:text-7xl font-gaming font-black mb-4 tracking-tight">
-            <span
-              className="bg-gradient-to-r from-pixel-gold via-orange-400 to-pixel-gold bg-clip-text text-transparent"
-              style={{
-                textShadow: "0 0 30px rgba(218, 165, 32, 0.5)",
-              }}
-            >
-              PROFIL
-            </span>
-          </h1>
-          <div className="text-pixel-gold text-lg md:text-xl font-gaming-subtitle font-semibold flex items-center justify-center gap-2 tracking-wide">
-            <span>✦</span>
-            <span>Gérez votre profil</span>
-            <span>✦</span>
-          </div>
-        </div>
-
-        {/* Profile Card */}
-        <div className="bg-black/60 border border-pixel-gold/30 rounded-lg overflow-hidden backdrop-blur-sm">
-          <form onSubmit={handleSubmit} className="p-8 space-y-8">
-            {/* Messages */}
-            {error && (
-              <div className="bg-red-900/50 border border-red-500/50 text-red-400 px-4 py-3 rounded text-sm">
-                {error}
-              </div>
-            )}
-            {success && (
-              <div className="bg-green-900/50 border border-green-500/50 text-green-400 px-4 py-3 rounded text-sm">
-                {success}
-              </div>
-            )}
-
-            {/* Avatar Section */}
-            <div className="flex flex-col items-center gap-4">
-              <div className="relative">
-                <Avatar
-                  src={avatar}
-                  username={username}
-                  size="2xl"
-                  borderClassName="border-4 border-pixel-gold/50"
-                />
-                {uploadingAvatar && (
-                  <div className="absolute inset-0 bg-black/60 flex items-center justify-center rounded-full">
-                    <div className="text-pixel-gold text-sm">Upload...</div>
-                  </div>
-                )}
-              </div>
-
-              {/* Avatars par défaut */}
-              <div className="flex flex-col items-center gap-3">
-                <label className="block text-pixel-gold text-xs uppercase tracking-widest mb-2">
-                  Avatars par défaut
-                </label>
-                <div className="flex gap-3">
-                  {[
-                    "/avatar-1.jpg",
-                    "/avatar-2.jpg",
-                    "/avatar-3.jpg",
-                    "/avatar-4.jpg",
-                    "/avatar-5.jpg",
-                    "/avatar-6.jpg",
-                  ].map((defaultAvatar) => (
-                    <button
-                      key={defaultAvatar}
-                      type="button"
-                      onClick={() => {
-                        setAvatar(defaultAvatar);
-                        setSuccess("Avatar sélectionné");
-                        setTimeout(() => setSuccess(null), 3000);
-                      }}
-                      className={`w-16 h-16 rounded-full border-2 overflow-hidden transition ${
-                        avatar === defaultAvatar
-                          ? "border-pixel-gold scale-110"
-                          : "border-pixel-gold/30 hover:border-pixel-gold/50"
-                      }`}
-                    >
-                      <img
-                        src={defaultAvatar}
-                        alt="Avatar par défaut"
-                        className="w-full h-full object-cover"
-                      />
-                    </button>
-                  ))}
-                </div>
-              </div>
-
-              <div>
-                <input
-                  ref={fileInputRef}
-                  type="file"
-                  accept="image/*"
-                  onChange={handleAvatarUpload}
-                  className="hidden"
-                  id="avatar-upload"
-                />
-                <label
-                  htmlFor="avatar-upload"
-                  className="px-4 py-2 border border-pixel-gold/50 bg-black/40 text-white uppercase text-xs tracking-widest rounded hover:bg-pixel-gold/10 hover:border-pixel-gold transition cursor-pointer inline-block"
-                >
-                  {uploadingAvatar
-                    ? "Upload en cours..."
-                    : "Upload un avatar custom"}
-                </label>
-              </div>
-            </div>
-
-            {/* Username Field */}
-            <div>
-              <label className="block text-pixel-gold text-sm uppercase tracking-widest mb-2">
-                Nom d&apos;utilisateur
-              </label>
-              <input
-                type="text"
-                value={username}
-                onChange={(e) => setUsername(e.target.value)}
-                className="w-full px-4 py-3 bg-black/40 border border-pixel-gold/30 rounded text-white focus:outline-none focus:border-pixel-gold transition"
-                required
-                minLength={3}
-                maxLength={20}
-              />
-              <p className="text-gray-500 text-xs mt-1">3-20 caractères</p>
-            </div>
-
-            {/* Bio Field */}
-            <div>
-              <label className="block text-pixel-gold text-sm uppercase tracking-widest mb-2">
-                Bio
-              </label>
-              <textarea
-                value={bio || ""}
-                onChange={(e) => setBio(e.target.value)}
-                className="w-full px-4 py-3 bg-black/40 border border-pixel-gold/30 rounded text-white focus:outline-none focus:border-pixel-gold transition resize-none"
-                rows={4}
-                maxLength={500}
-                placeholder="Parlez-nous de vous..."
-              />
-              <p className="text-gray-500 text-xs mt-1">
-                {(bio || "").length}/500 caractères
-              </p>
-            </div>
-
-            {/* Character Class Selection */}
-            <div>
-              <label className="block text-pixel-gold text-sm uppercase tracking-widest mb-3">
-                Classe de Personnage
-              </label>
-              <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
-                {[
-                  {
-                    value: "WARRIOR",
-                    name: "Guerrier",
-                    icon: "⚔️",
-                    desc: "Maître du combat au corps à corps",
-                  },
-                  {
-                    value: "MAGE",
-                    name: "Mage",
-                    icon: "🔮",
-                    desc: "Manipulateur des arcanes",
-                  },
-                  {
-                    value: "ROGUE",
-                    name: "Voleur",
-                    icon: "🗡️",
-                    desc: "Furtif et mortel",
-                  },
-                  {
-                    value: "RANGER",
-                    name: "Rôdeur",
-                    icon: "🏹",
-                    desc: "Chasseur des terres sauvages",
-                  },
-                  {
-                    value: "PALADIN",
-                    name: "Paladin",
-                    icon: "🛡️",
-                    desc: "Protecteur sacré",
-                  },
-                  {
-                    value: "ENGINEER",
-                    name: "Ingénieur",
-                    icon: "⚙️",
-                    desc: "Créateur d'artefacts",
-                  },
-                  {
-                    value: "MERCHANT",
-                    name: "Marchand",
-                    icon: "💰",
-                    desc: "Maître du commerce",
-                  },
-                  {
-                    value: "SCHOLAR",
-                    name: "Érudit",
-                    icon: "📚",
-                    desc: "Gardien du savoir",
-                  },
-                  {
-                    value: "BERSERKER",
-                    name: "Berserker",
-                    icon: "🔥",
-                    desc: "Rage destructrice",
-                  },
-                  {
-                    value: "NECROMANCER",
-                    name: "Nécromancien",
-                    icon: "💀",
-                    desc: "Maître des morts",
-                  },
-                ].map((cls) => (
-                  <button
-                    key={cls.value}
-                    type="button"
-                    onClick={() =>
-                      setCharacterClass(cls.value as CharacterClass)
-                    }
-                    className={`p-4 border-2 rounded-lg text-left transition-all ${
-                      characterClass === cls.value
-                        ? "border-pixel-gold bg-pixel-gold/20 shadow-lg shadow-pixel-gold/30"
-                        : "border-pixel-gold/30 bg-black/40 hover:border-pixel-gold/50 hover:bg-black/60"
-                    }`}
-                  >
-                    <div className="flex items-center gap-2 mb-1">
-                      <span className="text-2xl">{cls.icon}</span>
-                      <span
-                        className={`font-bold text-sm uppercase tracking-wider ${
-                          characterClass === cls.value
-                            ? "text-pixel-gold"
-                            : "text-white"
-                        }`}
-                      >
-                        {cls.name}
-                      </span>
-                    </div>
-                    <p className="text-xs text-gray-400 leading-tight">
-                      {cls.desc}
-                    </p>
-                  </button>
-                ))}
-              </div>
-              {characterClass && (
-                <p className="text-pixel-gold text-xs mt-2 uppercase tracking-widest">
-                  ✓ Classe sélectionnée
-                </p>
-              )}
-            </div>
-
-            {/* Stats Display */}
-            <div className="border-t border-pixel-gold/20 pt-6">
-              <h3 className="text-pixel-gold text-sm uppercase tracking-widest mb-4">
-                Statistiques
-              </h3>
-
-              <div className="grid grid-cols-2 gap-4 mb-4">
-                <div className="bg-black/40 border border-pixel-gold/20 rounded p-4">
-                  <div className="text-gray-400 text-xs uppercase mb-1">
-                    Score
-                  </div>
-                  <div className="text-pixel-gold text-xl font-bold">
-                    {formatNumber(profile.score)}
-                  </div>
-                </div>
-                <div className="bg-black/40 border border-pixel-gold/20 rounded p-4">
-                  <div className="text-gray-400 text-xs uppercase mb-1">
-                    Niveau
-                  </div>
-                  <div className="text-pixel-gold text-xl font-bold">
-                    Lv.{profile.level}
-                  </div>
-                </div>
-              </div>
-
-              {/* HP Bar */}
-              <div className="mb-4">
-                <div className="flex justify-between text-xs text-gray-400 mb-1">
-                  <span>HP</span>
-                  <span>
-                    {profile.hp} / {profile.maxHp}
-                  </span>
-                </div>
-                <div className="relative h-3 bg-gray-900 border border-gray-700 rounded overflow-hidden">
-                  <div
-                    className={`absolute inset-0 bg-gradient-to-r ${hpColor} transition-all duration-1000 ease-out`}
-                    style={{ width: `${hpPercentage}%` }}
-                  />
-                </div>
-              </div>
-
-              {/* XP Bar */}
-              <div>
-                <div className="flex justify-between text-xs text-gray-400 mb-1">
-                  <span>XP</span>
-                  <span>
-                    {formatNumber(profile.xp)} / {formatNumber(profile.maxXp)}
-                  </span>
-                </div>
-                <div className="relative h-3 bg-gray-900 border border-pixel-gold/30 rounded overflow-hidden">
-                  <div
-                    className="absolute inset-0 bg-gradient-to-r from-pixel-gold/80 via-pixel-gold/70 to-pixel-gold/80 transition-all duration-1000 ease-out"
-                    style={{ width: `${xpPercentage}%` }}
-                  />
-                </div>
-              </div>
-            </div>
-
-            {/* Email (read-only) */}
-            <div>
-              <label className="block text-gray-500 text-sm uppercase tracking-widest mb-2">
-                Email
-              </label>
-              <input
-                type="email"
-                value={profile.email}
-                disabled
-                className="w-full px-4 py-3 bg-black/20 border border-gray-700/50 rounded text-gray-500 cursor-not-allowed"
-              />
-            </div>
-
-            {/* Submit Button */}
-            <div className="flex justify-end gap-4 pt-4 border-t border-pixel-gold/20">
-              <button
-                type="submit"
-                disabled={saving}
-                className="px-6 py-2 border border-pixel-gold/50 bg-black/40 text-white uppercase text-xs tracking-widest rounded hover:bg-pixel-gold/10 hover:border-pixel-gold transition disabled:opacity-50 disabled:cursor-not-allowed"
-              >
-                {saving ? "Enregistrement..." : "Enregistrer les modifications"}
-              </button>
-            </div>
-          </form>
-
-          {/* Password Change Section - Separate form */}
-          <div className="border-t border-pixel-gold/20 p-8">
-            <div className="flex items-center justify-between mb-4">
-              <h3 className="text-pixel-gold text-sm uppercase tracking-widest">
-                Mot de passe
-              </h3>
-              {!showPasswordForm && (
-                <button
-                  type="button"
-                  onClick={() => setShowPasswordForm(true)}
-                  className="px-4 py-2 border border-pixel-gold/50 bg-black/40 text-white uppercase text-xs tracking-widest rounded hover:bg-pixel-gold/10 hover:border-pixel-gold transition"
-                >
-                  Changer le mot de passe
-                </button>
-              )}
-            </div>
-
-            {showPasswordForm && (
-              <form onSubmit={handlePasswordChange} className="space-y-4">
-                <div>
-                  <label className="block text-pixel-gold text-sm uppercase tracking-widest mb-2">
-                    Mot de passe actuel
-                  </label>
-                  <input
-                    type="password"
-                    value={currentPassword}
-                    onChange={(e) => setCurrentPassword(e.target.value)}
-                    className="w-full px-4 py-3 bg-black/40 border border-pixel-gold/30 rounded text-white focus:outline-none focus:border-pixel-gold transition"
-                    required
-                  />
-                </div>
-
-                <div>
-                  <label className="block text-pixel-gold text-sm uppercase tracking-widest mb-2">
-                    Nouveau mot de passe
-                  </label>
-                  <input
-                    type="password"
-                    value={newPassword}
-                    onChange={(e) => setNewPassword(e.target.value)}
-                    className="w-full px-4 py-3 bg-black/40 border border-pixel-gold/30 rounded text-white focus:outline-none focus:border-pixel-gold transition"
-                    required
-                    minLength={6}
-                  />
-                  <p className="text-gray-500 text-xs mt-1">
-                    Minimum 6 caractères
-                  </p>
-                </div>
-
-                <div>
-                  <label className="block text-pixel-gold text-sm uppercase tracking-widest mb-2">
-                    Confirmer le nouveau mot de passe
-                  </label>
-                  <input
-                    type="password"
-                    value={confirmPassword}
-                    onChange={(e) => setConfirmPassword(e.target.value)}
-                    className="w-full px-4 py-3 bg-black/40 border border-pixel-gold/30 rounded text-white focus:outline-none focus:border-pixel-gold transition"
-                    required
-                    minLength={6}
-                  />
-                </div>
-
-                <div className="flex justify-end gap-4">
-                  <button
-                    type="button"
-                    onClick={() => {
-                      setShowPasswordForm(false);
-                      setCurrentPassword("");
-                      setNewPassword("");
-                      setConfirmPassword("");
-                      setError(null);
-                    }}
-                    className="px-4 py-2 border border-gray-600/50 bg-black/40 text-gray-400 uppercase text-xs tracking-widest rounded hover:bg-gray-900/40 hover:border-gray-500 transition"
-                  >
-                    Annuler
-                  </button>
-                  <button
-                    type="submit"
-                    disabled={changingPassword}
-                    className="px-4 py-2 border border-pixel-gold/50 bg-black/40 text-white uppercase text-xs tracking-widest rounded hover:bg-pixel-gold/10 hover:border-pixel-gold transition disabled:opacity-50 disabled:cursor-not-allowed"
-                  >
-                    {changingPassword
-                      ? "Modification..."
-                      : "Modifier le mot de passe"}
-                  </button>
-                </div>
-              </form>
-            )}
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-}

components/UserManagement.tsx

@@ -1,762 +0,0 @@
-"use client";
-
-import { useState, useEffect } from "react";
-import Avatar from "./Avatar";
-
-interface User {
-  id: string;
-  username: string;
-  email: string;
-  role: string;
-  score: number;
-  level: number;
-  hp: number;
-  maxHp: number;
-  xp: number;
-  maxXp: number;
-  avatar: string | null;
-  createdAt: string;
-}
-
-interface EditingUser {
-  userId: string;
-  username: string | null;
-  avatar: string | null;
-  hpDelta: number;
-  xpDelta: number;
-  score: number | null;
-  level: number | null;
-  role: string | null;
-}
-
-export default function UserManagement() {
-  const [users, setUsers] = useState<User[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [editingUser, setEditingUser] = useState<EditingUser | null>(null);
-  const [saving, setSaving] = useState(false);
-  const [deletingUserId, setDeletingUserId] = useState<string | null>(null);
-  const [uploadingAvatar, setUploadingAvatar] = useState<string | null>(null);
-
-  useEffect(() => {
-    fetchUsers();
-  }, []);
-
-  const fetchUsers = async () => {
-    try {
-      const response = await fetch("/api/admin/users");
-      if (response.ok) {
-        const data = await response.json();
-        setUsers(data);
-      }
-    } catch (error) {
-      console.error("Error fetching users:", error);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const handleEdit = (user: User) => {
-    setEditingUser({
-      userId: user.id,
-      username: user.username,
-      avatar: user.avatar,
-      hpDelta: 0,
-      xpDelta: 0,
-      score: user.score,
-      level: user.level,
-      role: user.role,
-    });
-  };
-
-  const handleSave = async () => {
-    if (!editingUser) return;
-
-    setSaving(true);
-    try {
-      const body: {
-        username?: string;
-        avatar?: string | null;
-        hpDelta?: number;
-        xpDelta?: number;
-        score?: number;
-        level?: number;
-        role?: string;
-      } = {};
-
-      if (editingUser.username !== null) {
-        body.username = editingUser.username;
-      }
-      if (editingUser.avatar !== undefined) {
-        body.avatar = editingUser.avatar;
-      }
-      if (editingUser.hpDelta !== 0) {
-        body.hpDelta = editingUser.hpDelta;
-      }
-      if (editingUser.xpDelta !== 0) {
-        body.xpDelta = editingUser.xpDelta;
-      }
-      if (editingUser.score !== null) {
-        body.score = editingUser.score;
-      }
-      if (editingUser.level !== null) {
-        body.level = editingUser.level;
-      }
-      if (editingUser.role !== null) {
-        body.role = editingUser.role;
-      }
-
-      const response = await fetch(`/api/admin/users/${editingUser.userId}`, {
-        method: "PUT",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify(body),
-      });
-
-      if (response.ok) {
-        await fetchUsers();
-        setEditingUser(null);
-      } else {
-        const error = await response.json();
-        alert(error.error || "Erreur lors de la mise à jour");
-      }
-    } catch (error) {
-      console.error("Error updating user:", error);
-      alert("Erreur lors de la mise à jour");
-    } finally {
-      setSaving(false);
-    }
-  };
-
-  const handleCancel = () => {
-    setEditingUser(null);
-  };
-
-  const handleDelete = async (userId: string) => {
-    if (
-      !confirm(
-        "Êtes-vous sûr de vouloir supprimer cet utilisateur ? Cette action est irréversible."
-      )
-    ) {
-      return;
-    }
-
-    setDeletingUserId(userId);
-    try {
-      const response = await fetch(`/api/admin/users/${userId}`, {
-        method: "DELETE",
-      });
-
-      if (response.ok) {
-        await fetchUsers();
-      } else {
-        const error = await response.json();
-        alert(error.error || "Erreur lors de la suppression");
-      }
-    } catch (error) {
-      console.error("Error deleting user:", error);
-      alert("Erreur lors de la suppression");
-    } finally {
-      setDeletingUserId(null);
-    }
-  };
-
-  const formatNumber = (num: number) => {
-    return num.toLocaleString("en-US");
-  };
-
-  if (loading) {
-    return <div className="text-center text-gray-400 py-8">Chargement...</div>;
-  }
-
-  return (
-    <div className="space-y-4">
-      {users.length === 0 ? (
-        <div className="text-center text-gray-400 py-8">
-          Aucun utilisateur trouvé
-        </div>
-      ) : (
-        users.map((user) => {
-          const isEditing = editingUser?.userId === user.id;
-          const previewHp = isEditing
-            ? Math.max(0, Math.min(user.maxHp, user.hp + editingUser.hpDelta))
-            : user.hp;
-          const previewXp = isEditing
-            ? Math.max(0, user.xp + editingUser.xpDelta)
-            : user.xp;
-          const displayAvatar = isEditing ? editingUser.avatar : user.avatar;
-          const displayUsername = isEditing
-            ? editingUser.username || user.username
-            : user.username;
-
-          return (
-            <div
-              key={user.id}
-              className="bg-black/60 border border-pixel-gold/20 rounded p-3 sm:p-4"
-            >
-              <div className="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-3 mb-2">
-                <div className="flex gap-2 sm:gap-3 items-center flex-1 min-w-0">
-                  {/* Avatar */}
-                  <Avatar
-                    src={displayAvatar}
-                    username={displayUsername}
-                    size="sm"
-                    className="flex-shrink-0"
-                    borderClassName="border-2 border-pixel-gold/50"
-                  />
-                  <div className="flex-1 min-w-0">
-                    <div className="flex items-center gap-1.5 sm:gap-2 flex-wrap">
-                      <h3 className="text-pixel-gold font-bold text-sm sm:text-base break-words">
-                        {displayUsername}
-                      </h3>
-                      <span className="text-[10px] sm:text-xs text-gray-500 whitespace-nowrap">
-                        Niveau {user.level}
-                      </span>
-                      <span className="text-[10px] sm:text-xs text-gray-500 whitespace-nowrap">
-                        Score: {formatNumber(user.score)}
-                      </span>
-                      <span
-                        className={`text-[10px] sm:text-xs whitespace-nowrap ${
-                          user.role === "ADMIN"
-                            ? "text-pixel-gold"
-                            : "text-gray-500"
-                        }`}
-                      >
-                        {user.role}
-                      </span>
-                    </div>
-                    <p className="text-gray-400 text-[10px] sm:text-xs truncate">
-                      {user.email}
-                    </p>
-                  </div>
-                </div>
-                {!isEditing && (
-                  <div className="flex gap-2 flex-shrink-0 sm:ml-2">
-                    <button
-                      onClick={() => handleEdit(user)}
-                      className="px-2 sm:px-3 py-1.5 border border-pixel-gold/50 bg-black/60 text-white uppercase text-[10px] sm:text-xs tracking-widest rounded hover:bg-pixel-gold/10 transition whitespace-nowrap"
-                    >
-                      Modifier
-                    </button>
-                    <button
-                      onClick={() => handleDelete(user.id)}
-                      disabled={deletingUserId === user.id}
-                      className="px-2 sm:px-3 py-1.5 border border-red-500/50 bg-red-900/20 text-red-400 uppercase text-[10px] sm:text-xs tracking-widest rounded hover:bg-red-900/30 transition disabled:opacity-50 whitespace-nowrap"
-                    >
-                      {deletingUserId === user.id
-                        ? "Suppression..."
-                        : "Supprimer"}
-                    </button>
-                  </div>
-                )}
-              </div>
-
-              {isEditing ? (
-                <div className="space-y-4">
-                  {/* Username Section */}
-                  <div>
-                    <label className="block text-xs sm:text-sm text-gray-300 mb-2">
-                      Nom d&apos;utilisateur
-                    </label>
-                    <input
-                      type="text"
-                      value={editingUser.username || ""}
-                      onChange={(e) =>
-                        setEditingUser({
-                          ...editingUser,
-                          username: e.target.value,
-                        })
-                      }
-                      className="w-full px-2 sm:px-3 py-1 bg-black/60 border border-pixel-gold/30 rounded text-white text-xs sm:text-sm"
-                      placeholder="Nom d'utilisateur"
-                    />
-                  </div>
-
-                  {/* Avatar Section */}
-                  <div className="flex flex-col items-center gap-3">
-                    <label className="block text-xs sm:text-sm text-gray-300 mb-2">
-                      Avatar
-                    </label>
-
-                    {/* Preview */}
-                    <div className="relative">
-                      <Avatar
-                        src={editingUser.avatar}
-                        username={editingUser.username || user.username}
-                        size="lg"
-                        borderClassName="border-2 border-pixel-gold/50"
-                      />
-                      {uploadingAvatar === user.id && (
-                        <div className="absolute inset-0 bg-black/60 flex items-center justify-center rounded-full">
-                          <div className="text-pixel-gold text-xs">
-                            Upload...
-                          </div>
-                        </div>
-                      )}
-                    </div>
-
-                    {/* Avatars par défaut */}
-                    <div className="flex flex-col items-center gap-2 w-full">
-                      <label className="block text-pixel-gold text-[10px] sm:text-xs uppercase tracking-widest">
-                        Avatars par défaut
-                      </label>
-                      <div className="flex flex-wrap gap-2 justify-center">
-                        {[
-                          "/avatar-1.jpg",
-                          "/avatar-2.jpg",
-                          "/avatar-3.jpg",
-                          "/avatar-4.jpg",
-                          "/avatar-5.jpg",
-                          "/avatar-6.jpg",
-                        ].map((defaultAvatar) => (
-                          <button
-                            key={defaultAvatar}
-                            type="button"
-                            onClick={() =>
-                              setEditingUser({
-                                ...editingUser,
-                                avatar: defaultAvatar,
-                              })
-                            }
-                            className={`w-12 h-12 sm:w-14 sm:h-14 rounded-full border-2 overflow-hidden transition ${
-                              editingUser.avatar === defaultAvatar
-                                ? "border-pixel-gold scale-110"
-                                : "border-pixel-gold/30 hover:border-pixel-gold/50"
-                            }`}
-                          >
-                            <img
-                              src={defaultAvatar}
-                              alt="Avatar par défaut"
-                              className="w-full h-full object-cover"
-                            />
-                          </button>
-                        ))}
-                      </div>
-                    </div>
-
-                    {/* Custom Upload */}
-                    <div>
-                      <input
-                        type="file"
-                        accept="image/*"
-                        onChange={async (e) => {
-                          const file = e.target.files?.[0];
-                          if (!file) return;
-
-                          setUploadingAvatar(user.id);
-                          try {
-                            const formData = new FormData();
-                            formData.append("file", file);
-
-                            const response = await fetch(
-                              "/api/admin/avatars/upload",
-                              {
-                                method: "POST",
-                                body: formData,
-                              }
-                            );
-
-                            if (response.ok) {
-                              const data = await response.json();
-                              setEditingUser({
-                                ...editingUser,
-                                avatar: data.url,
-                              });
-                            } else {
-                              alert("Erreur lors de l'upload de l'image");
-                            }
-                          } catch (error) {
-                            console.error("Error uploading image:", error);
-                            alert("Erreur lors de l'upload de l'image");
-                          } finally {
-                            setUploadingAvatar(null);
-                            if (e.target) {
-                              e.target.value = "";
-                            }
-                          }
-                        }}
-                        className="hidden"
-                        id={`avatar-upload-${user.id}`}
-                      />
-                      <label
-                        htmlFor={`avatar-upload-${user.id}`}
-                        className="px-3 sm:px-4 py-1.5 border border-pixel-gold/50 bg-black/40 text-white uppercase text-[10px] sm:text-xs tracking-widest rounded hover:bg-pixel-gold/10 hover:border-pixel-gold transition cursor-pointer inline-block"
-                      >
-                        {uploadingAvatar === user.id
-                          ? "Upload en cours..."
-                          : "Upload un avatar custom"}
-                      </label>
-                    </div>
-                  </div>
-
-                  {/* HP Section */}
-                  <div>
-                    <div className="flex justify-between items-center mb-2">
-                      <label className="text-xs sm:text-sm text-gray-300">
-                        Points de Vie (HP)
-                      </label>
-                      <span className="text-[10px] sm:text-xs text-gray-400">
-                        {previewHp} / {user.maxHp}
-                      </span>
-                    </div>
-                    <div className="flex gap-1 sm:gap-2 flex-wrap">
-                      <button
-                        onClick={() =>
-                          setEditingUser({
-                            ...editingUser,
-                            hpDelta: editingUser.hpDelta - 100,
-                          })
-                        }
-                        className="px-2 sm:px-3 py-1 border border-red-500/50 bg-red-900/20 text-red-400 text-[10px] sm:text-xs rounded hover:bg-red-900/30 transition flex-shrink-0"
-                      >
-                        -100
-                      </button>
-                      <button
-                        onClick={() =>
-                          setEditingUser({
-                            ...editingUser,
-                            hpDelta: editingUser.hpDelta - 10,
-                          })
-                        }
-                        className="px-2 sm:px-3 py-1 border border-red-500/50 bg-red-900/20 text-red-400 text-[10px] sm:text-xs rounded hover:bg-red-900/30 transition flex-shrink-0"
-                      >
-                        -10
-                      </button>
-                      <input
-                        type="number"
-                        value={editingUser.hpDelta || 0}
-                        onChange={(e) =>
-                          setEditingUser({
-                            ...editingUser,
-                            hpDelta: parseInt(e.target.value) || 0,
-                          })
-                        }
-                        className="flex-1 min-w-[60px] px-2 sm:px-3 py-1 bg-black/60 border border-pixel-gold/30 rounded text-white text-xs sm:text-sm text-center"
-                      />
-                      <button
-                        onClick={() =>
-                          setEditingUser({
-                            ...editingUser,
-                            hpDelta: editingUser.hpDelta + 10,
-                          })
-                        }
-                        className="px-2 sm:px-3 py-1 border border-green-500/50 bg-green-900/20 text-green-400 text-[10px] sm:text-xs rounded hover:bg-green-900/30 transition flex-shrink-0"
-                      >
-                        +10
-                      </button>
-                      <button
-                        onClick={() =>
-                          setEditingUser({
-                            ...editingUser,
-                            hpDelta: editingUser.hpDelta + 100,
-                          })
-                        }
-                        className="px-2 sm:px-3 py-1 border border-green-500/50 bg-green-900/20 text-green-400 text-[10px] sm:text-xs rounded hover:bg-green-900/30 transition flex-shrink-0"
-                      >
-                        +100
-                      </button>
-                    </div>
-                    <div className="mt-2 h-2 bg-black/60 rounded-full overflow-hidden">
-                      <div
-                        className="h-full bg-gradient-to-r from-red-600 to-green-500 transition-all duration-300"
-                        style={{
-                          width: `${Math.min(
-                            100,
-                            (previewHp / user.maxHp) * 100
-                          )}%`,
-                        }}
-                      />
-                    </div>
-                  </div>
-
-                  {/* XP Section */}
-                  <div>
-                    <div className="flex justify-between items-center mb-2">
-                      <label className="text-xs sm:text-sm text-gray-300">
-                        Expérience (XP)
-                      </label>
-                      <span className="text-[10px] sm:text-xs text-gray-400">
-                        {formatNumber(previewXp)} / {formatNumber(user.maxXp)}
-                      </span>
-                    </div>
-                    <div className="flex gap-1 sm:gap-2 flex-wrap">
-                      <button
-                        onClick={() =>
-                          setEditingUser({
-                            ...editingUser,
-                            xpDelta: editingUser.xpDelta - 1000,
-                          })
-                        }
-                        className="px-2 sm:px-3 py-1 border border-red-500/50 bg-red-900/20 text-red-400 text-[10px] sm:text-xs rounded hover:bg-red-900/30 transition flex-shrink-0"
-                      >
-                        -1000
-                      </button>
-                      <button
-                        onClick={() =>
-                          setEditingUser({
-                            ...editingUser,
-                            xpDelta: editingUser.xpDelta - 100,
-                          })
-                        }
-                        className="px-2 sm:px-3 py-1 border border-red-500/50 bg-red-900/20 text-red-400 text-[10px] sm:text-xs rounded hover:bg-red-900/30 transition flex-shrink-0"
-                      >
-                        -100
-                      </button>
-                      <input
-                        type="number"
-                        value={editingUser.xpDelta || 0}
-                        onChange={(e) =>
-                          setEditingUser({
-                            ...editingUser,
-                            xpDelta: parseInt(e.target.value) || 0,
-                          })
-                        }
-                        className="flex-1 min-w-[60px] px-2 sm:px-3 py-1 bg-black/60 border border-pixel-gold/30 rounded text-white text-xs sm:text-sm text-center"
-                      />
-                      <button
-                        onClick={() =>
-                          setEditingUser({
-                            ...editingUser,
-                            xpDelta: editingUser.xpDelta + 100,
-                          })
-                        }
-                        className="px-2 sm:px-3 py-1 border border-green-500/50 bg-green-900/20 text-green-400 text-[10px] sm:text-xs rounded hover:bg-green-900/30 transition flex-shrink-0"
-                      >
-                        +100
-                      </button>
-                      <button
-                        onClick={() =>
-                          setEditingUser({
-                            ...editingUser,
-                            xpDelta: editingUser.xpDelta + 1000,
-                          })
-                        }
-                        className="px-2 sm:px-3 py-1 border border-green-500/50 bg-green-900/20 text-green-400 text-[10px] sm:text-xs rounded hover:bg-green-900/30 transition flex-shrink-0"
-                      >
-                        +1000
-                      </button>
-                    </div>
-                    <div className="mt-2 h-2 bg-black/60 rounded-full overflow-hidden">
-                      <div
-                        className="h-full bg-gradient-to-r from-blue-600 to-purple-500 transition-all duration-300"
-                        style={{
-                          width: `${Math.min(
-                            100,
-                            (previewXp / user.maxXp) * 100
-                          )}%`,
-                        }}
-                      />
-                    </div>
-                  </div>
-
-                  {/* Score Section */}
-                  <div>
-                    <label className="block text-xs sm:text-sm text-gray-300 mb-2">
-                      Score
-                    </label>
-                    <div className="flex gap-1 sm:gap-2 flex-wrap">
-                      <button
-                        onClick={() =>
-                          setEditingUser({
-                            ...editingUser,
-                            score: (editingUser.score || 0) - 1000,
-                          })
-                        }
-                        className="px-2 sm:px-3 py-1 border border-red-500/50 bg-red-900/20 text-red-400 text-[10px] sm:text-xs rounded hover:bg-red-900/30 transition flex-shrink-0"
-                      >
-                        -1000
-                      </button>
-                      <button
-                        onClick={() =>
-                          setEditingUser({
-                            ...editingUser,
-                            score: (editingUser.score || 0) - 100,
-                          })
-                        }
-                        className="px-2 sm:px-3 py-1 border border-red-500/50 bg-red-900/20 text-red-400 text-[10px] sm:text-xs rounded hover:bg-red-900/30 transition flex-shrink-0"
-                      >
-                        -100
-                      </button>
-                      <input
-                        type="number"
-                        value={editingUser.score ?? 0}
-                        onChange={(e) =>
-                          setEditingUser({
-                            ...editingUser,
-                            score: parseInt(e.target.value) || 0,
-                          })
-                        }
-                        className="flex-1 min-w-[60px] px-2 sm:px-3 py-1 bg-black/60 border border-pixel-gold/30 rounded text-white text-xs sm:text-sm text-center"
-                      />
-                      <button
-                        onClick={() =>
-                          setEditingUser({
-                            ...editingUser,
-                            score: (editingUser.score || 0) + 100,
-                          })
-                        }
-                        className="px-2 sm:px-3 py-1 border border-green-500/50 bg-green-900/20 text-green-400 text-[10px] sm:text-xs rounded hover:bg-green-900/30 transition flex-shrink-0"
-                      >
-                        +100
-                      </button>
-                      <button
-                        onClick={() =>
-                          setEditingUser({
-                            ...editingUser,
-                            score: (editingUser.score || 0) + 1000,
-                          })
-                        }
-                        className="px-2 sm:px-3 py-1 border border-green-500/50 bg-green-900/20 text-green-400 text-[10px] sm:text-xs rounded hover:bg-green-900/30 transition flex-shrink-0"
-                      >
-                        +1000
-                      </button>
-                    </div>
-                  </div>
-
-                  {/* Level Section */}
-                  <div>
-                    <label className="block text-xs sm:text-sm text-gray-300 mb-2">
-                      Niveau
-                    </label>
-                    <div className="flex gap-1 sm:gap-2">
-                      <button
-                        onClick={() =>
-                          setEditingUser({
-                            ...editingUser,
-                            level: Math.max(1, (editingUser.level || 1) - 1),
-                          })
-                        }
-                        className="px-2 sm:px-3 py-1 border border-red-500/50 bg-red-900/20 text-red-400 text-[10px] sm:text-xs rounded hover:bg-red-900/30 transition flex-shrink-0"
-                      >
-                        -1
-                      </button>
-                      <input
-                        type="number"
-                        min="1"
-                        value={editingUser.level ?? 1}
-                        onChange={(e) =>
-                          setEditingUser({
-                            ...editingUser,
-                            level: Math.max(1, parseInt(e.target.value) || 1),
-                          })
-                        }
-                        className="flex-1 min-w-[60px] px-2 sm:px-3 py-1 bg-black/60 border border-pixel-gold/30 rounded text-white text-xs sm:text-sm text-center"
-                      />
-                      <button
-                        onClick={() =>
-                          setEditingUser({
-                            ...editingUser,
-                            level: (editingUser.level || 1) + 1,
-                          })
-                        }
-                        className="px-2 sm:px-3 py-1 border border-green-500/50 bg-green-900/20 text-green-400 text-[10px] sm:text-xs rounded hover:bg-green-900/30 transition flex-shrink-0"
-                      >
-                        +1
-                      </button>
-                    </div>
-                  </div>
-
-                  {/* Role Section */}
-                  <div>
-                    <label className="block text-xs sm:text-sm text-gray-300 mb-2">
-                      Rôle
-                    </label>
-                    <div className="flex gap-2">
-                      <button
-                        onClick={() =>
-                          setEditingUser({
-                            ...editingUser,
-                            role: "USER",
-                          })
-                        }
-                        className={`flex-1 px-3 sm:px-4 py-2 border rounded text-[10px] sm:text-xs uppercase tracking-widest transition ${
-                          editingUser.role === "USER"
-                            ? "border-pixel-gold bg-pixel-gold/20 text-pixel-gold"
-                            : "border-gray-600/50 bg-gray-900/20 text-gray-400 hover:bg-gray-900/30"
-                        }`}
-                      >
-                        USER
-                      </button>
-                      <button
-                        onClick={() =>
-                          setEditingUser({
-                            ...editingUser,
-                            role: "ADMIN",
-                          })
-                        }
-                        className={`flex-1 px-3 sm:px-4 py-2 border rounded text-[10px] sm:text-xs uppercase tracking-widest transition ${
-                          editingUser.role === "ADMIN"
-                            ? "border-pixel-gold bg-pixel-gold/20 text-pixel-gold"
-                            : "border-gray-600/50 bg-gray-900/20 text-gray-400 hover:bg-gray-900/30"
-                        }`}
-                      >
-                        ADMIN
-                      </button>
-                    </div>
-                  </div>
-
-                  <div className="flex flex-col sm:flex-row gap-2 pt-2">
-                    <button
-                      onClick={handleSave}
-                      disabled={saving}
-                      className="px-4 py-2 border border-green-500/50 bg-green-900/20 text-green-400 uppercase text-xs tracking-widest rounded hover:bg-green-900/30 transition disabled:opacity-50"
-                    >
-                      {saving ? "Enregistrement..." : "Enregistrer"}
-                    </button>
-                    <button
-                      onClick={handleCancel}
-                      className="px-4 py-2 border border-gray-600/50 bg-gray-900/20 text-gray-400 uppercase text-xs tracking-widest rounded hover:bg-gray-900/30 transition"
-                    >
-                      Annuler
-                    </button>
-                  </div>
-                </div>
-              ) : (
-                <div className="flex flex-col sm:flex-row gap-3 sm:gap-4 text-[10px] sm:text-xs">
-                  <div className="flex-1">
-                    <div className="flex justify-between items-center mb-0.5">
-                      <span className="text-gray-400">HP</span>
-                      <span className="text-gray-400">
-                        {user.hp}/{user.maxHp}
-                      </span>
-                    </div>
-                    <div className="h-1.5 bg-black/60 rounded-full overflow-hidden">
-                      <div
-                        className="h-full bg-gradient-to-r from-red-600 to-green-500"
-                        style={{
-                          width: `${Math.min(
-                            100,
-                            (user.hp / user.maxHp) * 100
-                          )}%`,
-                        }}
-                      />
-                    </div>
-                  </div>
-                  <div className="flex-1">
-                    <div className="flex justify-between items-center mb-0.5">
-                      <span className="text-gray-400">XP</span>
-                      <span className="text-gray-400">
-                        {formatNumber(user.xp)}/{formatNumber(user.maxXp)}
-                      </span>
-                    </div>
-                    <div className="h-1.5 bg-black/60 rounded-full overflow-hidden">
-                      <div
-                        className="h-full bg-gradient-to-r from-blue-600 to-purple-500"
-                        style={{
-                          width: `${Math.min(
-                            100,
-                            (user.xp / user.maxXp) * 100
-                          )}%`,
-                        }}
-                      />
-                    </div>
-                  </div>
-                </div>
-              )}
-            </div>
-          );
-        })
-      )}
-    </div>
-  );
-}

components/admin/AdminNavigation.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { Button } from "@/components/ui";
+
+const adminSections = [
+  { id: "preferences", label: "Préférences UI", path: "/admin/preferences" },
+  { id: "users", label: "Utilisateurs", path: "/admin/users" },
+  { id: "events", label: "Événements", path: "/admin/events" },
+  { id: "feedbacks", label: "Feedbacks", path: "/admin/feedbacks" },
+  { id: "challenges", label: "Défis", path: "/admin/challenges" },
+  { id: "houses", label: "Maisons", path: "/admin/houses" },
+];
+
+export default function AdminNavigation() {
+  const pathname = usePathname();
+
+  return (
+    <div className="flex gap-4 mb-8 justify-center flex-wrap">
+      {adminSections.map((section) => {
+        const isActive = pathname === section.path || 
+          (section.path === "/admin/preferences" && pathname === "/admin");
+        
+        return (
+          <Button
+            key={section.id}
+            as={Link}
+            href={section.path}
+            variant={isActive ? "primary" : "secondary"}
+            size="md"
+            className={isActive ? "bg-pixel-gold/10" : ""}
+          >
+            {section.label}
+          </Button>
+        );
+      })}
+    </div>
+  );
+}
+

components/admin/BackgroundPreferences.tsx

@@ -1,13 +1,19 @@
 "use client";
 
 import { useState, useEffect, useMemo } from "react";
-import ImageSelector from "@/components/ImageSelector";
+import ImageSelector from "@/components/layout/ImageSelector";
+import { updateSitePreferences } from "@/actions/admin/preferences";
+import { Button, Card } from "@/components/ui";
 
 interface SitePreferences {
   id: string;
   homeBackground: string | null;
   eventsBackground: string | null;
   leaderboardBackground: string | null;
+  challengesBackground: string | null;
+  profileBackground: string | null;
+  houseBackground: string | null;
+  eventRegistrationPoints?: number;
 }
 
 interface BackgroundPreferencesProps {
@@ -18,6 +24,9 @@ const DEFAULT_IMAGES = {
   home: "/got-2.jpg",
   events: "/got-2.jpg",
   leaderboard: "/leaderboard-bg.jpg",
+  challenges: "/got-2.jpg",
+  profile: "/got-background.jpg",
+  houses: "/got-2.jpg",
 };
 
 export default function BackgroundPreferences({
@@ -55,6 +64,18 @@ export default function BackgroundPreferences({
         initialPreferences.leaderboardBackground,
         DEFAULT_IMAGES.leaderboard
       ),
+      challengesBackground: getFormValue(
+        initialPreferences.challengesBackground,
+        DEFAULT_IMAGES.challenges
+      ),
+      profileBackground: getFormValue(
+        initialPreferences.profileBackground,
+        DEFAULT_IMAGES.profile
+      ),
+      houseBackground: getFormValue(
+        initialPreferences.houseBackground,
+        DEFAULT_IMAGES.houses
+      ),
     }),
     [initialPreferences]
   );
@@ -88,42 +109,59 @@ export default function BackgroundPreferences({
           formData.leaderboardBackground,
           DEFAULT_IMAGES.leaderboard
         ),
+        challengesBackground: getApiValue(
+          formData.challengesBackground,
+          DEFAULT_IMAGES.challenges
+        ),
+        profileBackground: getApiValue(
+          formData.profileBackground,
+          DEFAULT_IMAGES.profile
+        ),
+        houseBackground: getApiValue(
+          formData.houseBackground,
+          DEFAULT_IMAGES.houses
+        ),
       };
 
-      const response = await fetch("/api/admin/preferences", {
-        method: "PUT",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify(apiData),
-      });
+      const result = await updateSitePreferences(apiData);
 
-      if (response.ok) {
-        const data = await response.json();
-        setPreferences(data);
+      if (result.success && result.data) {
+        setPreferences(result.data);
         // Réinitialiser formData avec les nouvelles valeurs (ou images par défaut)
         setFormData({
           homeBackground: getFormValue(
-            data.homeBackground,
+            result.data.homeBackground,
             DEFAULT_IMAGES.home
           ),
           eventsBackground: getFormValue(
-            data.eventsBackground,
+            result.data.eventsBackground,
             DEFAULT_IMAGES.events
           ),
           leaderboardBackground: getFormValue(
-            data.leaderboardBackground,
+            result.data.leaderboardBackground,
             DEFAULT_IMAGES.leaderboard
           ),
+          challengesBackground: getFormValue(
+            result.data.challengesBackground,
+            DEFAULT_IMAGES.challenges
+          ),
+          profileBackground: getFormValue(
+            result.data.profileBackground,
+            DEFAULT_IMAGES.profile
+          ),
+          houseBackground: getFormValue(
+            result.data.houseBackground,
+            DEFAULT_IMAGES.houses
+          ),
         });
         setIsEditing(false);
       } else {
-        const errorData = await response.json();
-        console.error("Error updating preferences:", errorData);
-        alert(errorData.error || "Erreur lors de la mise à jour");
+        console.error("Error updating preferences:", result.error);
+        alert(result.error || "Erreur lors de la mise à jour");
       }
     } catch (error) {
       console.error("Error updating preferences:", error);
+      alert("Erreur lors de la mise à jour");
     }
   };
 
@@ -143,12 +181,24 @@ export default function BackgroundPreferences({
           preferences.leaderboardBackground,
           DEFAULT_IMAGES.leaderboard
         ),
+        challengesBackground: getFormValue(
+          preferences.challengesBackground,
+          DEFAULT_IMAGES.challenges
+        ),
+        profileBackground: getFormValue(
+          preferences.profileBackground,
+          DEFAULT_IMAGES.profile
+        ),
+        houseBackground: getFormValue(
+          preferences.houseBackground,
+          DEFAULT_IMAGES.houses
+        ),
       });
     }
   };
 
   return (
-    <div className="bg-black/60 border border-pixel-gold/20 rounded p-3 sm:p-4">
+    <Card variant="default" className="p-3 sm:p-4">
       <div className="flex flex-col sm:flex-row sm:justify-between sm:items-start gap-3 mb-4">
         <div className="min-w-0 flex-1">
           <h3 className="text-pixel-gold font-bold text-base sm:text-lg break-words">
@@ -159,12 +209,14 @@ export default function BackgroundPreferences({
           </p>
         </div>
         {!isEditing && (
-          <button
+          <Button
             onClick={handleEdit}
-            className="px-3 sm:px-4 py-2 border border-pixel-gold/50 bg-black/60 text-white uppercase text-[10px] sm:text-xs tracking-widest rounded hover:bg-pixel-gold/10 transition whitespace-nowrap flex-shrink-0"
+            variant="primary"
+            size="sm"
+            className="whitespace-nowrap flex-shrink-0"
           >
             Modifier
-          </button>
+          </Button>
         )}
       </div>
 
@@ -200,19 +252,43 @@ export default function BackgroundPreferences({
             }
             label="Background Leaderboard"
           />
+          <ImageSelector
+            value={formData.challengesBackground}
+            onChange={(url) =>
+              setFormData({
+                ...formData,
+                challengesBackground: url,
+              })
+            }
+            label="Background Challenges"
+          />
+          <ImageSelector
+            value={formData.profileBackground}
+            onChange={(url) =>
+              setFormData({
+                ...formData,
+                profileBackground: url,
+              })
+            }
+            label="Background Profile"
+          />
+          <ImageSelector
+            value={formData.houseBackground}
+            onChange={(url) =>
+              setFormData({
+                ...formData,
+                houseBackground: url,
+              })
+            }
+            label="Background Houses"
+          />
           <div className="flex flex-col sm:flex-row gap-2 pt-4">
-            <button
-              onClick={handleSave}
-              className="px-4 py-2 border border-green-500/50 bg-green-900/20 text-green-400 uppercase text-xs tracking-widest rounded hover:bg-green-900/30 transition"
-            >
+            <Button onClick={handleSave} variant="success" size="md">
               Enregistrer
-            </button>
-            <button
-              onClick={handleCancel}
-              className="px-4 py-2 border border-gray-600/50 bg-gray-900/20 text-gray-400 uppercase text-xs tracking-widest rounded hover:bg-gray-900/30 transition"
-            >
+            </Button>
+            <Button onClick={handleCancel} variant="secondary" size="md">
               Annuler
-            </button>
+            </Button>
           </div>
         </div>
       ) : (
@@ -385,8 +461,176 @@ export default function BackgroundPreferences({
               );
             })()}
           </div>
+          <div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4">
+            <span className="text-pixel-gold font-bold text-sm sm:text-base min-w-0 sm:min-w-[120px] flex-shrink-0">
+              Challenges:
+            </span>
+            {(() => {
+              const currentImage =
+                preferences?.challengesBackground &&
+                preferences.challengesBackground.trim() !== ""
+                  ? preferences.challengesBackground
+                  : DEFAULT_IMAGES.challenges;
+              const isDefault =
+                !preferences?.challengesBackground ||
+                preferences.challengesBackground.trim() === "";
+
+              return (
+                <div className="flex items-center gap-2 sm:gap-3 min-w-0 flex-1">
+                  <div className="relative w-16 h-10 sm:w-20 sm:h-12 rounded border border-pixel-gold/30 overflow-hidden bg-black/60 flex-shrink-0">
+                    <img
+                      src={currentImage}
+                      alt="Challenges background"
+                      className="w-full h-full object-cover"
+                      onError={(e) => {
+                        const target = e.currentTarget;
+                        const currentSrc = target.src;
+                        const fallbackSrc = "/got-2.jpg";
+                        if (!currentSrc.includes(fallbackSrc)) {
+                          target.src = fallbackSrc;
+                        } else {
+                          target.style.display = "none";
+                          const fallbackDiv =
+                            target.nextElementSibling as HTMLElement;
+                          if (fallbackDiv) {
+                            fallbackDiv.classList.remove("hidden");
+                          }
+                        }
+                      }}
+                    />
+                    <div className="absolute inset-0 flex items-center justify-center bg-black/60 text-gray-500 text-xs hidden">
+                      No image
+                    </div>
+                  </div>
+                  <div className="flex flex-col min-w-0 flex-1">
+                    <span className="text-xs text-gray-400 truncate min-w-0">
+                      {isDefault ? "Par défaut: " : ""}
+                      {currentImage}
+                    </span>
+                    {isDefault && (
+                      <span className="text-[10px] text-gray-500 italic">
+                        (Image par défaut)
+                      </span>
+                    )}
+                  </div>
+                </div>
+              );
+            })()}
+          </div>
+          <div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4">
+            <span className="text-pixel-gold font-bold text-sm sm:text-base min-w-0 sm:min-w-[120px] flex-shrink-0">
+              Profile:
+            </span>
+            {(() => {
+              const currentImage =
+                preferences?.profileBackground &&
+                preferences.profileBackground.trim() !== ""
+                  ? preferences.profileBackground
+                  : DEFAULT_IMAGES.profile;
+              const isDefault =
+                !preferences?.profileBackground ||
+                preferences.profileBackground.trim() === "";
+
+              return (
+                <div className="flex items-center gap-2 sm:gap-3 min-w-0 flex-1">
+                  <div className="relative w-16 h-10 sm:w-20 sm:h-12 rounded border border-pixel-gold/30 overflow-hidden bg-black/60 flex-shrink-0">
+                    <img
+                      src={currentImage}
+                      alt="Profile background"
+                      className="w-full h-full object-cover"
+                      onError={(e) => {
+                        const target = e.currentTarget;
+                        const currentSrc = target.src;
+                        const fallbackSrc = "/got-background.jpg";
+                        if (!currentSrc.includes(fallbackSrc)) {
+                          target.src = fallbackSrc;
+                        } else {
+                          target.style.display = "none";
+                          const fallbackDiv =
+                            target.nextElementSibling as HTMLElement;
+                          if (fallbackDiv) {
+                            fallbackDiv.classList.remove("hidden");
+                          }
+                        }
+                      }}
+                    />
+                    <div className="absolute inset-0 flex items-center justify-center bg-black/60 text-gray-500 text-xs hidden">
+                      No image
+                    </div>
+                  </div>
+                  <div className="flex flex-col min-w-0 flex-1">
+                    <span className="text-xs text-gray-400 truncate min-w-0">
+                      {isDefault ? "Par défaut: " : ""}
+                      {currentImage}
+                    </span>
+                    {isDefault && (
+                      <span className="text-[10px] text-gray-500 italic">
+                        (Image par défaut)
+                      </span>
+                    )}
+                  </div>
+                </div>
+              );
+            })()}
+          </div>
+          <div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4">
+            <span className="text-pixel-gold font-bold text-sm sm:text-base min-w-0 sm:min-w-[120px] flex-shrink-0">
+              Houses:
+            </span>
+            {(() => {
+              const currentImage =
+                preferences?.houseBackground &&
+                preferences.houseBackground.trim() !== ""
+                  ? preferences.houseBackground
+                  : DEFAULT_IMAGES.houses;
+              const isDefault =
+                !preferences?.houseBackground ||
+                preferences.houseBackground.trim() === "";
+
+              return (
+                <div className="flex items-center gap-2 sm:gap-3 min-w-0 flex-1">
+                  <div className="relative w-16 h-10 sm:w-20 sm:h-12 rounded border border-pixel-gold/30 overflow-hidden bg-black/60 flex-shrink-0">
+                    <img
+                      src={currentImage}
+                      alt="Houses background"
+                      className="w-full h-full object-cover"
+                      onError={(e) => {
+                        const target = e.currentTarget;
+                        const currentSrc = target.src;
+                        const fallbackSrc = "/got-2.jpg";
+                        if (!currentSrc.includes(fallbackSrc)) {
+                          target.src = fallbackSrc;
+                        } else {
+                          target.style.display = "none";
+                          const fallbackDiv =
+                            target.nextElementSibling as HTMLElement;
+                          if (fallbackDiv) {
+                            fallbackDiv.classList.remove("hidden");
+                          }
+                        }
+                      }}
+                    />
+                    <div className="absolute inset-0 flex items-center justify-center bg-black/60 text-gray-500 text-xs hidden">
+                      No image
+                    </div>
+                  </div>
+                  <div className="flex flex-col min-w-0 flex-1">
+                    <span className="text-xs text-gray-400 truncate min-w-0">
+                      {isDefault ? "Par défaut: " : ""}
+                      {currentImage}
+                    </span>
+                    {isDefault && (
+                      <span className="text-[10px] text-gray-500 italic">
+                        (Image par défaut)
+                      </span>
+                    )}
+                  </div>
+                </div>
+              );
+            })()}
+          </div>
         </div>
       )}
-    </div>
+    </Card>
   );
 }

components/admin/ChallengeManagement.tsx

@@ -0,0 +1,696 @@
+"use client";
+
+import { useState, useTransition } from "react";
+import {
+  validateChallenge,
+  rejectChallenge,
+  updateChallenge,
+  deleteChallenge,
+  adminCancelChallenge,
+  reactivateChallenge,
+  adminAcceptChallenge,
+} from "@/actions/admin/challenges";
+import {
+  Button,
+  Card,
+  Input,
+  Textarea,
+  Alert,
+  Modal,
+  CloseButton,
+} from "@/components/ui";
+import { Avatar } from "@/components/ui";
+
+interface Challenge {
+  id: string;
+  challenger: {
+    id: string;
+    username: string;
+    avatar: string | null;
+  };
+  challenged: {
+    id: string;
+    username: string;
+    avatar: string | null;
+  };
+  title: string;
+  description: string;
+  pointsReward: number;
+  status: string;
+  adminComment: string | null;
+  createdAt: string;
+  acceptedAt: string | null;
+}
+
+interface ChallengeManagementProps {
+  initialChallenges: Challenge[];
+}
+
+export default function ChallengeManagement({ initialChallenges }: ChallengeManagementProps) {
+  const [challenges, setChallenges] = useState<Challenge[]>(initialChallenges);
+  const [selectedChallenge, setSelectedChallenge] = useState<Challenge | null>(
+    null
+  );
+  const [editingChallenge, setEditingChallenge] = useState<Challenge | null>(
+    null
+  );
+  const [winnerId, setWinnerId] = useState<string>("");
+  const [adminComment, setAdminComment] = useState("");
+  const [editTitle, setEditTitle] = useState("");
+  const [editDescription, setEditDescription] = useState("");
+  const [editPointsReward, setEditPointsReward] = useState<number>(0);
+  const [isPending, startTransition] = useTransition();
+  const [successMessage, setSuccessMessage] = useState<string | null>(null);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+
+  const fetchChallenges = async () => {
+    try {
+      const response = await fetch("/api/admin/challenges");
+      if (response.ok) {
+        const data = await response.json();
+        setChallenges(data);
+      }
+    } catch (error) {
+      console.error("Error fetching challenges:", error);
+    }
+  };
+
+  const handleValidate = async () => {
+    if (!selectedChallenge || !winnerId) {
+      setErrorMessage("Veuillez sélectionner un gagnant");
+      setTimeout(() => setErrorMessage(null), 5000);
+      return;
+    }
+
+    startTransition(async () => {
+      const result = await validateChallenge(
+        selectedChallenge.id,
+        winnerId,
+        adminComment || undefined
+      );
+
+      if (result.success) {
+        setSuccessMessage(
+          "Défi validé avec succès ! Les points ont été attribués."
+        );
+        setSelectedChallenge(null);
+        setWinnerId("");
+        setAdminComment("");
+        fetchChallenges();
+        // Rafraîchir le badge des défis
+        window.dispatchEvent(new Event("refreshChallenges"));
+        setTimeout(() => setSuccessMessage(null), 5000);
+      } else {
+        setErrorMessage(result.error || "Erreur lors de la validation");
+        setTimeout(() => setErrorMessage(null), 5000);
+      }
+    });
+  };
+
+  const handleReject = async () => {
+    if (!selectedChallenge) return;
+
+    if (!confirm("Êtes-vous sûr de vouloir rejeter ce défi ?")) {
+      return;
+    }
+
+    startTransition(async () => {
+      const result = await rejectChallenge(
+        selectedChallenge.id,
+        adminComment || undefined
+      );
+
+      if (result.success) {
+        setSuccessMessage("Défi rejeté");
+        setSelectedChallenge(null);
+        setAdminComment("");
+        fetchChallenges();
+        // Rafraîchir le badge des défis
+        window.dispatchEvent(new Event("refreshChallenges"));
+        setTimeout(() => setSuccessMessage(null), 5000);
+      } else {
+        setErrorMessage(result.error || "Erreur lors du rejet");
+        setTimeout(() => setErrorMessage(null), 5000);
+      }
+    });
+  };
+
+  const handleEdit = (challenge: Challenge) => {
+    setEditingChallenge(challenge);
+    setEditTitle(challenge.title);
+    setEditDescription(challenge.description);
+    setEditPointsReward(challenge.pointsReward);
+  };
+
+  const handleUpdate = async () => {
+    if (!editingChallenge) return;
+
+    startTransition(async () => {
+      const result = await updateChallenge(editingChallenge.id, {
+        title: editTitle,
+        description: editDescription,
+        pointsReward: editPointsReward,
+      });
+
+      if (result.success) {
+        setSuccessMessage("Défi mis à jour avec succès");
+        setEditingChallenge(null);
+        setEditTitle("");
+        setEditDescription("");
+        setEditPointsReward(0);
+        fetchChallenges();
+        setTimeout(() => setSuccessMessage(null), 5000);
+      } else {
+        setErrorMessage(result.error || "Erreur lors de la mise à jour");
+        setTimeout(() => setErrorMessage(null), 5000);
+      }
+    });
+  };
+
+  const handleDelete = async (challengeId: string) => {
+    if (
+      !confirm(
+        "Êtes-vous sûr de vouloir supprimer ce défi ? Cette action est irréversible."
+      )
+    ) {
+      return;
+    }
+
+    startTransition(async () => {
+      const result = await deleteChallenge(challengeId);
+
+      if (result.success) {
+        setSuccessMessage("Défi supprimé avec succès");
+        fetchChallenges();
+        // Rafraîchir le badge des défis
+        window.dispatchEvent(new Event("refreshChallenges"));
+        setTimeout(() => setSuccessMessage(null), 5000);
+      } else {
+        setErrorMessage(result.error || "Erreur lors de la suppression");
+        setTimeout(() => setErrorMessage(null), 5000);
+      }
+    });
+  };
+
+  const handleCancel = async (challengeId: string) => {
+    if (!confirm("Êtes-vous sûr de vouloir annuler ce défi ?")) {
+      return;
+    }
+
+    startTransition(async () => {
+      const result = await adminCancelChallenge(challengeId);
+
+      if (result.success) {
+        setSuccessMessage("Défi annulé avec succès");
+        fetchChallenges();
+        // Rafraîchir le badge des défis
+        window.dispatchEvent(new Event("refreshChallenges"));
+        setTimeout(() => setSuccessMessage(null), 5000);
+      } else {
+        setErrorMessage(result.error || "Erreur lors de l'annulation");
+        setTimeout(() => setErrorMessage(null), 5000);
+      }
+    });
+  };
+
+  const handleReactivate = async (challengeId: string) => {
+    if (!confirm("Êtes-vous sûr de vouloir réactiver ce défi ?")) {
+      return;
+    }
+
+    startTransition(async () => {
+      const result = await reactivateChallenge(challengeId);
+
+      if (result.success) {
+        setSuccessMessage("Défi réactivé avec succès");
+        fetchChallenges();
+        // Rafraîchir le badge des défis
+        window.dispatchEvent(new Event("refreshChallenges"));
+        setTimeout(() => setSuccessMessage(null), 5000);
+      } else {
+        setErrorMessage(result.error || "Erreur lors de la réactivation");
+        setTimeout(() => setErrorMessage(null), 5000);
+      }
+    });
+  };
+
+  const handleAdminAccept = async (challengeId: string) => {
+    if (
+      !confirm(
+        "Êtes-vous sûr de vouloir accepter ce défi à la place de l'utilisateur ?"
+      )
+    ) {
+      return;
+    }
+
+    startTransition(async () => {
+      const result = await adminAcceptChallenge(challengeId);
+
+      if (result.success) {
+        setSuccessMessage("Défi accepté avec succès");
+        fetchChallenges();
+        // Rafraîchir le badge des défis
+        window.dispatchEvent(new Event("refreshChallenges"));
+        setTimeout(() => setSuccessMessage(null), 5000);
+      } else {
+        setErrorMessage(result.error || "Erreur lors de l'acceptation");
+        setTimeout(() => setErrorMessage(null), 5000);
+      }
+    });
+  };
+
+  if (challenges.length === 0) {
+    return <div className="text-center text-gray-400 py-8">Aucun défi</div>;
+  }
+
+  const acceptedChallenges = challenges.filter((c) => c.status === "ACCEPTED");
+  const pendingChallenges = challenges.filter((c) => c.status === "PENDING");
+  const cancelledChallenges = challenges.filter(
+    (c) => c.status === "CANCELLED"
+  );
+  const completedChallenges = challenges.filter(
+    (c) => c.status === "COMPLETED"
+  );
+  const rejectedChallenges = challenges.filter((c) => c.status === "REJECTED");
+
+  return (
+    <div className="space-y-4">
+      {successMessage && (
+        <Alert variant="success" className="mb-4">
+          {successMessage}
+        </Alert>
+      )}
+      {errorMessage && (
+        <Alert variant="error" className="mb-4">
+          {errorMessage}
+        </Alert>
+      )}
+      <div className="text-sm text-gray-400 mb-4">
+        {acceptedChallenges.length > 0 && (
+          <span>
+            {acceptedChallenges.length} défi
+            {acceptedChallenges.length > 1 ? "s" : ""} en attente de désignation
+            du gagnant
+          </span>
+        )}
+        {pendingChallenges.length > 0 && (
+          <span className={acceptedChallenges.length > 0 ? "ml-2" : ""}>
+            • {pendingChallenges.length} défi
+            {pendingChallenges.length > 1 ? "s" : ""} en attente
+            d&apos;acceptation
+          </span>
+        )}
+        {cancelledChallenges.length > 0 && (
+          <span className="ml-2">
+            • {cancelledChallenges.length} défi
+            {cancelledChallenges.length > 1 ? "s" : ""} annulé
+            {cancelledChallenges.length > 1 ? "s" : ""}
+          </span>
+        )}
+        {completedChallenges.length > 0 && (
+          <span className="ml-2">
+            • {completedChallenges.length} défi
+            {completedChallenges.length > 1 ? "s" : ""} complété
+            {completedChallenges.length > 1 ? "s" : ""}
+          </span>
+        )}
+        {rejectedChallenges.length > 0 && (
+          <span className="ml-2">
+            • {rejectedChallenges.length} défi
+            {rejectedChallenges.length > 1 ? "s" : ""} rejeté
+            {rejectedChallenges.length > 1 ? "s" : ""}
+          </span>
+        )}
+      </div>
+
+      {challenges.map((challenge) => (
+        <Card key={challenge.id} variant="dark" className="p-4">
+          <div className="flex items-start justify-between gap-4">
+            <div className="flex-1">
+              <h3 className="text-lg font-bold text-pixel-gold mb-2">
+                {challenge.title}
+              </h3>
+              <p className="text-gray-300 mb-4">{challenge.description}</p>
+
+              <div className="flex items-center gap-4 mb-4">
+                <div className="flex items-center gap-2">
+                  <Avatar
+                    src={challenge.challenger.avatar}
+                    username={challenge.challenger.username}
+                    size="sm"
+                  />
+                  <span className="text-sm text-gray-300">
+                    {challenge.challenger.username}
+                  </span>
+                  <span className="text-xs text-gray-500">VS</span>
+                  <Avatar
+                    src={challenge.challenged.avatar}
+                    username={challenge.challenged.username}
+                    size="sm"
+                  />
+                  <span className="text-sm text-gray-300">
+                    {challenge.challenged.username}
+                  </span>
+                </div>
+              </div>
+
+              <div className="text-sm text-gray-400">
+                Récompense:{" "}
+                <span className="text-pixel-gold font-bold">
+                  {challenge.pointsReward} points
+                </span>
+              </div>
+              <div className="text-xs mt-2">
+                <span
+                  className={`px-2 py-1 rounded ${
+                    challenge.status === "ACCEPTED"
+                      ? "bg-blue-500/20 text-blue-400"
+                      : challenge.status === "COMPLETED"
+                        ? "bg-green-500/20 text-green-400"
+                        : challenge.status === "CANCELLED"
+                          ? "bg-gray-500/20 text-gray-400"
+                          : challenge.status === "REJECTED"
+                            ? "bg-red-500/20 text-red-400"
+                            : "bg-yellow-500/20 text-yellow-400"
+                  }`}
+                >
+                  {challenge.status === "PENDING"
+                    ? "En attente d'acceptation"
+                    : challenge.status === "ACCEPTED"
+                      ? "En cours - En attente de désignation du gagnant"
+                      : challenge.status === "COMPLETED"
+                        ? "Complété"
+                        : challenge.status === "CANCELLED"
+                          ? "Annulé"
+                          : challenge.status === "REJECTED"
+                            ? "Rejeté"
+                            : challenge.status}
+                </span>
+              </div>
+              {challenge.acceptedAt && (
+                <div className="text-xs text-gray-500 mt-2">
+                  Accepté le:{" "}
+                  {new Date(challenge.acceptedAt).toLocaleDateString("fr-FR")}
+                </div>
+              )}
+            </div>
+
+            <div className="flex flex-col gap-2">
+              <Button
+                onClick={() => handleEdit(challenge)}
+                variant="secondary"
+                size="sm"
+              >
+                Modifier
+              </Button>
+              {challenge.status === "PENDING" && (
+                <Button
+                  onClick={() => handleAdminAccept(challenge.id)}
+                  variant="primary"
+                  size="sm"
+                  disabled={isPending}
+                >
+                  Accepter le défi
+                </Button>
+              )}
+              {challenge.status === "ACCEPTED" && (
+                <Button
+                  onClick={() => setSelectedChallenge(challenge)}
+                  variant="primary"
+                  size="sm"
+                >
+                  Désigner le gagnant
+                </Button>
+              )}
+              {challenge.status !== "CANCELLED" &&
+                challenge.status !== "COMPLETED" && (
+                  <Button
+                    onClick={() => handleCancel(challenge.id)}
+                    variant="secondary"
+                    size="sm"
+                    disabled={isPending}
+                  >
+                    Annuler
+                  </Button>
+                )}
+              {challenge.status === "CANCELLED" && (
+                <Button
+                  onClick={() => handleReactivate(challenge.id)}
+                  variant="primary"
+                  size="sm"
+                  disabled={isPending}
+                >
+                  Réactiver
+                </Button>
+              )}
+              <Button
+                onClick={() => handleDelete(challenge.id)}
+                variant="secondary"
+                size="sm"
+                className="text-destructive hover:text-destructive"
+                style={{
+                  color: "var(--destructive)",
+                  borderColor: "var(--destructive)",
+                }}
+              >
+                Supprimer
+              </Button>
+            </div>
+          </div>
+        </Card>
+      ))}
+
+      {/* Modal de validation */}
+      {selectedChallenge && (
+        <Modal
+          isOpen={!!selectedChallenge}
+          onClose={() => {
+            setSelectedChallenge(null);
+            setWinnerId("");
+            setAdminComment("");
+          }}
+          size="lg"
+        >
+          <div className="p-6">
+            <div className="flex items-center justify-between mb-4">
+              <h2 className="text-2xl font-bold text-pixel-gold">
+                Désigner le gagnant
+              </h2>
+              <CloseButton
+                onClick={() => {
+                  setSelectedChallenge(null);
+                  setWinnerId("");
+                  setAdminComment("");
+                }}
+                size="lg"
+              />
+            </div>
+
+            <div className="mb-6">
+              <h3 className="text-lg font-bold text-gray-300 mb-2">
+                {selectedChallenge.title}
+              </h3>
+              <p className="text-gray-400 mb-4">
+                {selectedChallenge.description}
+              </p>
+
+              <div className="flex items-center gap-4 mb-4">
+                <div className="flex items-center gap-2">
+                  <Avatar
+                    src={selectedChallenge.challenger.avatar}
+                    username={selectedChallenge.challenger.username}
+                    size="md"
+                  />
+                  <span className="text-gray-300">
+                    {selectedChallenge.challenger.username}
+                  </span>
+                </div>
+                <span className="text-gray-500">VS</span>
+                <div className="flex items-center gap-2">
+                  <Avatar
+                    src={selectedChallenge.challenged.avatar}
+                    username={selectedChallenge.challenged.username}
+                    size="md"
+                  />
+                  <span className="text-gray-300">
+                    {selectedChallenge.challenged.username}
+                  </span>
+                </div>
+              </div>
+            </div>
+
+            <div className="mb-4">
+              <label className="block text-sm font-bold text-pixel-gold mb-2">
+                Sélectionner le gagnant
+              </label>
+              <div className="flex gap-4">
+                <label className="flex items-center gap-2 cursor-pointer">
+                  <input
+                    type="radio"
+                    name="winner"
+                    value={selectedChallenge.challenger.id}
+                    checked={winnerId === selectedChallenge.challenger.id}
+                    onChange={(e) => setWinnerId(e.target.value)}
+                    className="w-4 h-4"
+                  />
+                  <span className="text-gray-300">
+                    {selectedChallenge.challenger.username}
+                  </span>
+                </label>
+                <label className="flex items-center gap-2 cursor-pointer">
+                  <input
+                    type="radio"
+                    name="winner"
+                    value={selectedChallenge.challenged.id}
+                    checked={winnerId === selectedChallenge.challenged.id}
+                    onChange={(e) => setWinnerId(e.target.value)}
+                    className="w-4 h-4"
+                  />
+                  <span className="text-gray-300">
+                    {selectedChallenge.challenged.username}
+                  </span>
+                </label>
+              </div>
+            </div>
+
+            <div className="mb-4">
+              <label className="block text-sm font-bold text-pixel-gold mb-2">
+                Commentaire (optionnel)
+              </label>
+              <textarea
+                value={adminComment}
+                onChange={(e) => setAdminComment(e.target.value)}
+                className="w-full p-2 bg-black/60 border border-pixel-gold/30 rounded text-gray-300"
+                rows={3}
+                placeholder="Commentaire pour les joueurs..."
+              />
+            </div>
+
+            <div className="flex gap-4">
+              <Button
+                onClick={handleValidate}
+                variant="primary"
+                disabled={!winnerId || isPending}
+                className="flex-1"
+              >
+                {isPending ? "Enregistrement..." : "Confirmer le gagnant"}
+              </Button>
+              <Button
+                onClick={handleReject}
+                variant="secondary"
+                disabled={isPending}
+                className="flex-1"
+              >
+                {isPending ? "Rejet..." : "Rejeter le défi"}
+              </Button>
+              <Button
+                onClick={() => {
+                  setSelectedChallenge(null);
+                  setWinnerId("");
+                  setAdminComment("");
+                }}
+                variant="secondary"
+                disabled={isPending}
+              >
+                Annuler
+              </Button>
+            </div>
+          </div>
+        </Modal>
+      )}
+
+      {/* Modal d'édition */}
+      {editingChallenge && (
+        <Modal
+          isOpen={!!editingChallenge}
+          onClose={() => {
+            setEditingChallenge(null);
+            setEditTitle("");
+            setEditDescription("");
+            setEditPointsReward(0);
+          }}
+          size="lg"
+        >
+          <div className="p-6">
+            <div className="flex items-center justify-between mb-4">
+              <h2 className="text-2xl font-bold text-pixel-gold">
+                Modifier le défi
+              </h2>
+              <CloseButton
+                onClick={() => {
+                  setEditingChallenge(null);
+                  setEditTitle("");
+                  setEditDescription("");
+                  setEditPointsReward(0);
+                }}
+                size="lg"
+              />
+            </div>
+
+            <div className="space-y-4">
+              <Input
+                id="edit-title"
+                label="Titre"
+                value={editTitle}
+                onChange={(e) => setEditTitle(e.target.value)}
+                required
+                placeholder="Titre du défi"
+              />
+
+              <Textarea
+                id="edit-description"
+                label="Description"
+                value={editDescription}
+                onChange={(e) => setEditDescription(e.target.value)}
+                required
+                rows={4}
+                placeholder="Description du défi"
+              />
+
+              <Input
+                id="edit-points"
+                label="Récompense (points)"
+                type="number"
+                min="1"
+                value={editPointsReward}
+                onChange={(e) =>
+                  setEditPointsReward(parseInt(e.target.value) || 0)
+                }
+                required
+                placeholder="100"
+              />
+
+              <div className="flex gap-4 pt-4">
+                <Button
+                  onClick={handleUpdate}
+                  variant="primary"
+                  disabled={
+                    isPending ||
+                    !editTitle ||
+                    !editDescription ||
+                    editPointsReward <= 0
+                  }
+                  className="flex-1"
+                >
+                  {isPending ? "Mise à jour..." : "Enregistrer"}
+                </Button>
+                <Button
+                  onClick={() => {
+                    setEditingChallenge(null);
+                    setEditTitle("");
+                    setEditDescription("");
+                    setEditPointsReward(0);
+                  }}
+                  variant="secondary"
+                  disabled={isPending}
+                >
+                  Annuler
+                </Button>
+              </div>
+            </div>
+          </div>
+        </Modal>
+      )}
+    </div>
+  );
+}

components/admin/EventFeedbackPointsPreferences.tsx

@@ -0,0 +1,166 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { updateSitePreferences } from "@/actions/admin/preferences";
+import { Button, Card, Input } from "@/components/ui";
+
+interface SitePreferences {
+  id: string;
+  eventFeedbackPoints: number;
+}
+
+interface EventFeedbackPointsPreferencesProps {
+  initialPreferences: SitePreferences;
+}
+
+export default function EventFeedbackPointsPreferences({
+  initialPreferences,
+}: EventFeedbackPointsPreferencesProps) {
+  const [preferences, setPreferences] = useState<SitePreferences | null>(
+    initialPreferences
+  );
+  const [isEditing, setIsEditing] = useState(false);
+  const [formData, setFormData] = useState({
+    eventFeedbackPoints: initialPreferences.eventFeedbackPoints.toString(),
+  });
+  const [isSaving, setIsSaving] = useState(false);
+
+  // Synchroniser les préférences quand initialPreferences change
+  useEffect(() => {
+    setPreferences(initialPreferences);
+    setFormData({
+      eventFeedbackPoints: initialPreferences.eventFeedbackPoints.toString(),
+    });
+  }, [initialPreferences]);
+
+  const handleEdit = () => {
+    setIsEditing(true);
+  };
+
+  const handleSave = async () => {
+    const points = parseInt(formData.eventFeedbackPoints, 10);
+    
+    if (isNaN(points) || points < 0) {
+      alert("Le nombre de points doit être un nombre positif");
+      return;
+    }
+
+    setIsSaving(true);
+    try {
+      const result = await updateSitePreferences({
+        eventFeedbackPoints: points,
+      });
+
+      if (result.success && result.data) {
+        setPreferences(result.data);
+        setFormData({
+          eventFeedbackPoints: result.data.eventFeedbackPoints.toString(),
+        });
+        setIsEditing(false);
+      } else {
+        console.error("Error updating preferences:", result.error);
+        alert(result.error || "Erreur lors de la mise à jour");
+      }
+    } catch (error) {
+      console.error("Error updating preferences:", error);
+      alert("Erreur lors de la mise à jour");
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const handleCancel = () => {
+    setIsEditing(false);
+    if (preferences) {
+      setFormData({
+        eventFeedbackPoints: preferences.eventFeedbackPoints.toString(),
+      });
+    }
+  };
+
+  return (
+    <Card variant="default" className="p-3 sm:p-4">
+      <div className="flex flex-col sm:flex-row sm:justify-between sm:items-start gap-3 mb-4">
+        <div className="min-w-0 flex-1">
+          <h3 className="text-pixel-gold font-bold text-base sm:text-lg break-words">
+            Points de feedback sur les événements
+          </h3>
+          <p className="text-gray-400 text-xs sm:text-sm">
+            Nombre de points attribués lorsqu&apos;un utilisateur donne un feedback à un événement (première fois uniquement)
+          </p>
+        </div>
+        {!isEditing && (
+          <Button
+            onClick={handleEdit}
+            variant="primary"
+            size="sm"
+            className="whitespace-nowrap flex-shrink-0"
+          >
+            Modifier
+          </Button>
+        )}
+      </div>
+
+      {isEditing ? (
+        <div className="space-y-4">
+          <div>
+            <label
+              htmlFor="eventFeedbackPoints"
+              className="block text-sm font-medium text-pixel-gold mb-2"
+            >
+              Points de feedback
+            </label>
+            <Input
+              id="eventFeedbackPoints"
+              type="number"
+              min="0"
+              value={formData.eventFeedbackPoints}
+              onChange={(e) =>
+                setFormData({
+                  ...formData,
+                  eventFeedbackPoints: e.target.value,
+                })
+              }
+              placeholder="100"
+              className="w-full"
+            />
+            <p className="text-xs text-gray-400 mt-1">
+              Les utilisateurs gagneront ce nombre de points lors de leur premier feedback sur un événement
+            </p>
+          </div>
+          <div className="flex flex-col sm:flex-row gap-2 pt-4">
+            <Button
+              onClick={handleSave}
+              variant="success"
+              size="md"
+              disabled={isSaving}
+            >
+              {isSaving ? "Enregistrement..." : "Enregistrer"}
+            </Button>
+            <Button
+              onClick={handleCancel}
+              variant="secondary"
+              size="md"
+              disabled={isSaving}
+            >
+              Annuler
+            </Button>
+          </div>
+        </div>
+      ) : (
+        <div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4">
+          <span className="text-pixel-gold font-bold text-sm sm:text-base min-w-0 sm:min-w-[200px] flex-shrink-0">
+            Points actuels:
+          </span>
+          <div className="flex items-center gap-2">
+            <span className="text-lg sm:text-xl font-bold text-white">
+              {preferences?.eventFeedbackPoints ?? 100}
+            </span>
+            <span className="text-xs sm:text-sm text-gray-400">points</span>
+          </div>
+        </div>
+      )}
+    </Card>
+  );
+}
+

components/admin/EventManagement.tsx

@@ -0,0 +1,650 @@
+"use client";
+
+import { useState, useTransition } from "react";
+import { calculateEventStatus } from "@/lib/eventStatus";
+import { createEvent, updateEvent, deleteEvent } from "@/actions/admin/events";
+import {
+  Input,
+  Textarea,
+  Button,
+  Card,
+  Badge,
+  Modal,
+  CloseButton,
+  Avatar,
+} from "@/components/ui";
+import { updateUser } from "@/actions/admin/users";
+
+interface Event {
+  id: string;
+  date: string;
+  name: string;
+  description: string;
+  type: "ATELIER" | "KATA" | "PRESENTATION" | "LEARNING_HOUR";
+  status: "UPCOMING" | "LIVE" | "PAST";
+  room?: string | null;
+  time?: string | null;
+  maxPlaces?: number | null;
+  createdAt: string;
+  updatedAt: string;
+  registrationsCount?: number;
+}
+
+interface EventRegistration {
+  id: string;
+  userId: string;
+  eventId: string;
+  createdAt: string;
+  user: {
+    id: string;
+    username: string;
+    avatar: string | null;
+    score: number;
+    level: number;
+    hp: number;
+    maxHp: number;
+    xp: number;
+    maxXp: number;
+  };
+}
+
+interface EventFormData {
+  date: string;
+  name: string;
+  description: string;
+  type: "ATELIER" | "KATA" | "PRESENTATION" | "LEARNING_HOUR";
+  room?: string;
+  time?: string;
+  maxPlaces?: number;
+}
+
+const eventTypes: Event["type"][] = [
+  "ATELIER",
+  "KATA",
+  "PRESENTATION",
+  "LEARNING_HOUR",
+];
+const getEventTypeLabel = (type: Event["type"]) => {
+  switch (type) {
+    case "ATELIER":
+      return "Atelier";
+    case "KATA":
+      return "Kata";
+    case "PRESENTATION":
+      return "Présentation";
+    case "LEARNING_HOUR":
+      return "Learning Hour";
+    default:
+      return type;
+  }
+};
+
+const getStatusLabel = (status: Event["status"]) => {
+  switch (status) {
+    case "UPCOMING":
+      return "À venir";
+    case "LIVE":
+      return "En cours";
+    case "PAST":
+      return "Passé";
+    default:
+      return status;
+  }
+};
+
+interface EventManagementProps {
+  initialEvents: Event[];
+}
+
+export default function EventManagement({ initialEvents }: EventManagementProps) {
+  const [events, setEvents] = useState<Event[]>(initialEvents);
+  const [editingEvent, setEditingEvent] = useState<Event | null>(null);
+  const [isCreating, setIsCreating] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [viewingRegistrations, setViewingRegistrations] =
+    useState<Event | null>(null);
+  const [registrations, setRegistrations] = useState<EventRegistration[]>([]);
+  const [loadingRegistrations, setLoadingRegistrations] = useState(false);
+  const [editingScores, setEditingScores] = useState<Record<string, number>>(
+    {}
+  );
+  const [savingScore, setSavingScore] = useState<string | null>(null);
+  const [formData, setFormData] = useState<EventFormData>({
+    date: "",
+    name: "",
+    description: "",
+    type: "ATELIER",
+    room: "",
+    time: "",
+    maxPlaces: undefined,
+  });
+
+  const fetchEvents = async () => {
+    try {
+      const response = await fetch("/api/admin/events");
+      if (response.ok) {
+        const data = await response.json();
+        setEvents(data);
+      }
+    } catch (error) {
+      console.error("Error fetching events:", error);
+    }
+  };
+
+  const handleCreate = () => {
+    setIsCreating(true);
+    setEditingEvent(null);
+    setFormData({
+      date: "",
+      name: "",
+      description: "",
+      type: "ATELIER",
+      room: "",
+      time: "",
+      maxPlaces: undefined,
+    });
+  };
+
+  const handleEdit = (event: Event) => {
+    setEditingEvent(event);
+    setIsCreating(false);
+    // Convertir la date ISO en format YYYY-MM-DD pour l'input date
+    const dateValue = event.date ? new Date(event.date).toISOString().split('T')[0] : "";
+    setFormData({
+      date: dateValue,
+      name: event.name,
+      description: event.description,
+      type: event.type,
+      room: event.room || "",
+      time: event.time || "",
+      maxPlaces: event.maxPlaces || undefined,
+    });
+  };
+
+  const [, startTransition] = useTransition();
+
+  const handleSave = async () => {
+    setSaving(true);
+    startTransition(async () => {
+      try {
+        let result;
+        if (isCreating) {
+          result = await createEvent(formData);
+        } else if (editingEvent) {
+          result = await updateEvent(editingEvent.id, formData);
+        }
+
+        if (result?.success) {
+          await fetchEvents();
+          setEditingEvent(null);
+          setIsCreating(false);
+          setFormData({
+            date: "",
+            name: "",
+            description: "",
+            type: "ATELIER",
+            room: "",
+            time: "",
+            maxPlaces: undefined,
+          });
+        } else {
+          alert(result?.error || "Erreur lors de la sauvegarde");
+        }
+      } catch (error) {
+        console.error("Error saving event:", error);
+        alert("Erreur lors de la sauvegarde");
+      } finally {
+        setSaving(false);
+      }
+    });
+  };
+
+  const handleDelete = async (eventId: string) => {
+    if (!confirm("Êtes-vous sûr de vouloir supprimer cet événement ?")) {
+      return;
+    }
+
+    startTransition(async () => {
+      try {
+        const result = await deleteEvent(eventId);
+
+        if (result.success) {
+          await fetchEvents();
+        } else {
+          alert(result.error || "Erreur lors de la suppression");
+        }
+      } catch (error) {
+        console.error("Error deleting event:", error);
+        alert("Erreur lors de la suppression");
+      }
+    });
+  };
+
+  const handleCancel = () => {
+    setEditingEvent(null);
+    setIsCreating(false);
+    setFormData({
+      date: "",
+      name: "",
+      description: "",
+      type: "ATELIER",
+      room: "",
+      time: "",
+      maxPlaces: undefined,
+    });
+  };
+
+  const handleViewRegistrations = async (event: Event) => {
+    setViewingRegistrations(event);
+    setLoadingRegistrations(true);
+    try {
+      const response = await fetch(
+        `/api/admin/events/${event.id}/registrations`
+      );
+      if (response.ok) {
+        const data = await response.json();
+        setRegistrations(data);
+        // Initialiser les scores d'édition avec les scores actuels
+        const scoresMap: Record<string, number> = {};
+        data.forEach((reg: EventRegistration) => {
+          scoresMap[reg.user.id] = reg.user.score;
+        });
+        setEditingScores(scoresMap);
+      } else {
+        alert("Erreur lors de la récupération des inscrits");
+      }
+    } catch (error) {
+      console.error("Error fetching registrations:", error);
+      alert("Erreur lors de la récupération des inscrits");
+    } finally {
+      setLoadingRegistrations(false);
+    }
+  };
+
+  const handleCloseRegistrations = () => {
+    setViewingRegistrations(null);
+    setRegistrations([]);
+    setEditingScores({});
+  };
+
+  const handleScoreChange = (userId: string, newScore: number) => {
+    setEditingScores({
+      ...editingScores,
+      [userId]: newScore,
+    });
+  };
+
+  const handleSaveScore = async (userId: string) => {
+    const newScore = editingScores[userId];
+    if (newScore === undefined) return;
+
+    setSavingScore(userId);
+    startTransition(async () => {
+      try {
+        const result = await updateUser(userId, { score: newScore });
+        if (result.success) {
+          // Mettre à jour le score dans la liste locale
+          setRegistrations((prev) =>
+            prev.map((reg) =>
+              reg.user.id === userId
+                ? { ...reg, user: { ...reg.user, score: newScore } }
+                : reg
+            )
+          );
+        } else {
+          alert(result.error || "Erreur lors de la mise à jour du score");
+        }
+      } catch (error) {
+        console.error("Error updating score:", error);
+        alert("Erreur lors de la mise à jour du score");
+      } finally {
+        setSavingScore(null);
+      }
+    });
+  };
+
+  return (
+    <div className="space-y-4">
+      <div className="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-3 mb-4">
+        <h3 className="text-lg sm:text-xl font-gaming font-bold text-pixel-gold break-words">
+          Événements ({events.length})
+        </h3>
+        {!isCreating && !editingEvent && (
+          <Button
+            onClick={handleCreate}
+            variant="success"
+            size="sm"
+            className="whitespace-nowrap flex-shrink-0"
+          >
+            + Nouvel événement
+          </Button>
+        )}
+      </div>
+
+      {/* Modal de création/édition */}
+      {(isCreating || editingEvent) && (
+        <Modal
+          isOpen={isCreating || !!editingEvent}
+          onClose={handleCancel}
+          size="lg"
+        >
+          <div className="p-6">
+            <div className="flex items-center justify-between mb-4">
+              <h4 className="text-pixel-gold font-bold text-base sm:text-lg break-words">
+                {isCreating ? "Créer un événement" : "Modifier l'événement"}
+              </h4>
+              <CloseButton onClick={handleCancel} size="lg" />
+            </div>
+            <div className="space-y-4">
+              <Input
+                type="date"
+                label="Date"
+                value={formData.date}
+                onChange={(e) =>
+                  setFormData({ ...formData, date: e.target.value })
+                }
+                className="text-xs sm:text-sm px-3 py-2"
+              />
+              <Input
+                type="text"
+                label="Nom"
+                value={formData.name}
+                onChange={(e) =>
+                  setFormData({ ...formData, name: e.target.value })
+                }
+                placeholder="Nom de l'événement"
+                className="text-xs sm:text-sm px-3 py-2"
+              />
+              <Textarea
+                label="Description"
+                value={formData.description}
+                onChange={(e) =>
+                  setFormData({ ...formData, description: e.target.value })
+                }
+                placeholder="Description de l'événement"
+                rows={4}
+                className="text-xs sm:text-sm px-3 py-2"
+              />
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                <div>
+                  <label className="block text-xs sm:text-sm text-gray-300 mb-1">
+                    Type
+                  </label>
+                  <select
+                    value={formData.type}
+                    onChange={(e) =>
+                      setFormData({
+                        ...formData,
+                        type: e.target.value as Event["type"],
+                      })
+                    }
+                    className="w-full px-3 py-2 bg-black/60 border border-pixel-gold/30 rounded text-white text-xs sm:text-sm"
+                  >
+                    {eventTypes.map((type) => (
+                      <option key={type} value={type}>
+                        {getEventTypeLabel(type)}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+              </div>
+              <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
+                <Input
+                  type="text"
+                  label="Salle"
+                  value={formData.room || ""}
+                  onChange={(e) =>
+                    setFormData({ ...formData, room: e.target.value })
+                  }
+                  placeholder="Ex: Nautilus"
+                  className="text-xs sm:text-sm px-3 py-2"
+                />
+                <Input
+                  type="text"
+                  label="Heure"
+                  value={formData.time || ""}
+                  onChange={(e) =>
+                    setFormData({ ...formData, time: e.target.value })
+                  }
+                  placeholder="Ex: 11h-12h"
+                  className="text-xs sm:text-sm px-3 py-2"
+                />
+                <Input
+                  type="number"
+                  label="Places max"
+                  value={formData.maxPlaces || ""}
+                  onChange={(e) =>
+                    setFormData({
+                      ...formData,
+                      maxPlaces: e.target.value
+                        ? parseInt(e.target.value)
+                        : undefined,
+                    })
+                  }
+                  placeholder="Ex: 25"
+                  className="text-xs sm:text-sm px-3 py-2"
+                />
+              </div>
+              <div className="flex flex-col sm:flex-row gap-2">
+                <Button
+                  onClick={handleSave}
+                  variant="success"
+                  size="md"
+                  disabled={saving}
+                >
+                  {saving ? "Enregistrement..." : "Enregistrer"}
+                </Button>
+                <Button onClick={handleCancel} variant="secondary" size="md">
+                  Annuler
+                </Button>
+              </div>
+            </div>
+          </div>
+        </Modal>
+      )}
+
+      {events.length === 0 ? (
+        <div className="text-center text-gray-400 py-8">
+          Aucun événement trouvé
+        </div>
+      ) : (
+        <div className="space-y-3">
+          {events.map((event) => {
+            const status = calculateEventStatus(event.date);
+            const statusVariant =
+              status === "UPCOMING"
+                ? "success"
+                : status === "LIVE"
+                  ? "warning"
+                  : "default";
+
+            return (
+              <Card key={event.id} variant="default" className="p-3 sm:p-4">
+                <div className="flex flex-col sm:flex-row sm:justify-between sm:items-start gap-3">
+                  <div className="flex-1 min-w-0">
+                    <div className="flex flex-wrap items-center gap-2 sm:gap-3 mb-2">
+                      <h4 className="text-pixel-gold font-bold text-base sm:text-lg break-words">
+                        {event.name}
+                      </h4>
+                      <Badge variant="default" size="sm">
+                        {getEventTypeLabel(event.type)}
+                      </Badge>
+                      <Badge variant={statusVariant} size="sm">
+                        {getStatusLabel(status)}
+                      </Badge>
+                    </div>
+                    <p className="text-gray-400 text-xs sm:text-sm mb-2 break-words">
+                      {event.description}
+                    </p>
+                    <div className="flex flex-wrap items-center gap-2 sm:gap-4 mt-2">
+                      <p className="text-gray-500 text-[10px] sm:text-xs whitespace-nowrap">
+                        Date: {new Date(event.date).toLocaleDateString("fr-FR")}
+                      </p>
+                      {event.room && (
+                        <p className="text-gray-500 text-[10px] sm:text-xs whitespace-nowrap">
+                          📍 Salle: {event.room}
+                        </p>
+                      )}
+                      {event.time && (
+                        <p className="text-gray-500 text-[10px] sm:text-xs whitespace-nowrap">
+                          🕐 Heure: {event.time}
+                        </p>
+                      )}
+                      {event.maxPlaces && (
+                        <p className="text-gray-500 text-[10px] sm:text-xs whitespace-nowrap">
+                          👥 Places: {event.maxPlaces}
+                        </p>
+                      )}
+                      <Badge variant="info" size="sm">
+                        {event.registrationsCount || 0} inscrit
+                        {event.registrationsCount !== 1 ? "s" : ""}
+                      </Badge>
+                    </div>
+                  </div>
+                  {!isCreating && !editingEvent && (
+                    <div className="flex gap-2 sm:ml-4 flex-shrink-0 flex-wrap">
+                      <Button
+                        onClick={() => handleViewRegistrations(event)}
+                        variant="primary"
+                        size="sm"
+                        className="whitespace-nowrap"
+                      >
+                        Inscrits ({event.registrationsCount || 0})
+                      </Button>
+                      <Button
+                        onClick={() => handleEdit(event)}
+                        variant="primary"
+                        size="sm"
+                        className="whitespace-nowrap"
+                      >
+                        Modifier
+                      </Button>
+                      <Button
+                        onClick={() => handleDelete(event.id)}
+                        variant="danger"
+                        size="sm"
+                        className="whitespace-nowrap"
+                      >
+                        Supprimer
+                      </Button>
+                    </div>
+                  )}
+                </div>
+              </Card>
+            );
+          })}
+        </div>
+      )}
+
+      {/* Modal des inscrits */}
+      {viewingRegistrations && (
+        <Modal
+          isOpen={!!viewingRegistrations}
+          onClose={handleCloseRegistrations}
+          size="lg"
+        >
+          <div className="p-6">
+            <div className="flex items-center justify-between mb-4">
+              <h4 className="text-pixel-gold font-bold text-base sm:text-lg break-words">
+                Inscrits à &quot;{viewingRegistrations.name}&quot;
+              </h4>
+              <CloseButton onClick={handleCloseRegistrations} size="lg" />
+            </div>
+
+            {loadingRegistrations ? (
+              <div className="text-center text-gray-400 py-8">
+                Chargement...
+              </div>
+            ) : registrations.length === 0 ? (
+              <div className="text-center text-gray-400 py-8">
+                Aucun inscrit pour cet événement
+              </div>
+            ) : (
+              <div className="space-y-3 max-h-[60vh] overflow-y-auto">
+                {registrations.map((registration) => {
+                  const user = registration.user;
+                  const currentScore = editingScores[user.id] ?? user.score;
+                  const isSaving = savingScore === user.id;
+
+                  return (
+                    <Card
+                      key={registration.id}
+                      variant="default"
+                      className="p-3 sm:p-4"
+                    >
+                      <div className="flex flex-col sm:flex-row sm:items-center gap-3">
+                        <div className="flex items-center gap-3 flex-1 min-w-0">
+                          <Avatar
+                            src={user.avatar}
+                            username={user.username}
+                            size="md"
+                            borderClassName="border-2 border-pixel-gold/50"
+                          />
+                          <div className="flex-1 min-w-0">
+                            <h5 className="text-pixel-gold font-bold text-sm sm:text-base break-words">
+                              {user.username}
+                            </h5>
+                            <p className="text-gray-400 text-xs sm:text-sm">
+                              Niveau {user.level} • HP: {user.hp}/{user.maxHp} •
+                              XP: {user.xp}/{user.maxXp}
+                            </p>
+                          </div>
+                        </div>
+                        <div className="flex flex-col sm:flex-row items-start sm:items-center gap-2 sm:gap-3 flex-shrink-0">
+                          <div className="flex items-center gap-2">
+                            <label className="text-xs sm:text-sm text-gray-300 whitespace-nowrap">
+                              Score:
+                            </label>
+                            <input
+                              type="number"
+                              value={currentScore}
+                              onChange={(e) =>
+                                handleScoreChange(
+                                  user.id,
+                                  parseInt(e.target.value) || 0
+                                )
+                              }
+                              disabled={isSaving}
+                              className="w-24 px-2 sm:px-3 py-1 bg-black/60 border border-pixel-gold/30 rounded text-white text-xs sm:text-sm text-center disabled:opacity-50"
+                            />
+                          </div>
+                          <div className="flex gap-1 sm:gap-2">
+                            <button
+                              onClick={() =>
+                                handleScoreChange(user.id, currentScore - 100)
+                              }
+                              disabled={isSaving}
+                              className="px-2 sm:px-3 py-1 border border-red-500/50 bg-red-900/20 text-red-400 text-[10px] sm:text-xs rounded hover:bg-red-900/30 transition flex-shrink-0 disabled:opacity-50"
+                            >
+                              -100
+                            </button>
+                            <button
+                              onClick={() =>
+                                handleScoreChange(user.id, currentScore + 100)
+                              }
+                              disabled={isSaving}
+                              className="px-2 sm:px-3 py-1 border border-green-500/50 bg-green-900/20 text-green-400 text-[10px] sm:text-xs rounded hover:bg-green-900/30 transition flex-shrink-0 disabled:opacity-50"
+                            >
+                              +100
+                            </button>
+                            <button
+                              onClick={() => handleSaveScore(user.id)}
+                              disabled={isSaving || currentScore === user.score}
+                              className="px-2 sm:px-3 py-1 border border-pixel-gold/50 bg-pixel-gold/20 text-pixel-gold text-[10px] sm:text-xs rounded hover:bg-pixel-gold/30 transition flex-shrink-0 disabled:opacity-50 disabled:cursor-not-allowed"
+                            >
+                              {isSaving ? "..." : "Sauver"}
+                            </button>
+                          </div>
+                        </div>
+                      </div>
+                    </Card>
+                  );
+                })}
+              </div>
+            )}
+          </div>
+        </Modal>
+      )}
+    </div>
+  );
+}

components/admin/EventPointsPreferences.tsx

@@ -0,0 +1,166 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { updateSitePreferences } from "@/actions/admin/preferences";
+import { Button, Card, Input } from "@/components/ui";
+
+interface SitePreferences {
+  id: string;
+  eventRegistrationPoints: number;
+}
+
+interface EventPointsPreferencesProps {
+  initialPreferences: SitePreferences;
+}
+
+export default function EventPointsPreferences({
+  initialPreferences,
+}: EventPointsPreferencesProps) {
+  const [preferences, setPreferences] = useState<SitePreferences | null>(
+    initialPreferences
+  );
+  const [isEditing, setIsEditing] = useState(false);
+  const [formData, setFormData] = useState({
+    eventRegistrationPoints: initialPreferences.eventRegistrationPoints.toString(),
+  });
+  const [isSaving, setIsSaving] = useState(false);
+
+  // Synchroniser les préférences quand initialPreferences change
+  useEffect(() => {
+    setPreferences(initialPreferences);
+    setFormData({
+      eventRegistrationPoints: initialPreferences.eventRegistrationPoints.toString(),
+    });
+  }, [initialPreferences]);
+
+  const handleEdit = () => {
+    setIsEditing(true);
+  };
+
+  const handleSave = async () => {
+    const points = parseInt(formData.eventRegistrationPoints, 10);
+    
+    if (isNaN(points) || points < 0) {
+      alert("Le nombre de points doit être un nombre positif");
+      return;
+    }
+
+    setIsSaving(true);
+    try {
+      const result = await updateSitePreferences({
+        eventRegistrationPoints: points,
+      });
+
+      if (result.success && result.data) {
+        setPreferences(result.data);
+        setFormData({
+          eventRegistrationPoints: result.data.eventRegistrationPoints.toString(),
+        });
+        setIsEditing(false);
+      } else {
+        console.error("Error updating preferences:", result.error);
+        alert(result.error || "Erreur lors de la mise à jour");
+      }
+    } catch (error) {
+      console.error("Error updating preferences:", error);
+      alert("Erreur lors de la mise à jour");
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const handleCancel = () => {
+    setIsEditing(false);
+    if (preferences) {
+      setFormData({
+        eventRegistrationPoints: preferences.eventRegistrationPoints.toString(),
+      });
+    }
+  };
+
+  return (
+    <Card variant="default" className="p-3 sm:p-4">
+      <div className="flex flex-col sm:flex-row sm:justify-between sm:items-start gap-3 mb-4">
+        <div className="min-w-0 flex-1">
+          <h3 className="text-pixel-gold font-bold text-base sm:text-lg break-words">
+            Points d&apos;inscription aux événements
+          </h3>
+          <p className="text-gray-400 text-xs sm:text-sm">
+            Nombre de points attribués lorsqu&apos;un utilisateur s&apos;inscrit à un événement
+          </p>
+        </div>
+        {!isEditing && (
+          <Button
+            onClick={handleEdit}
+            variant="primary"
+            size="sm"
+            className="whitespace-nowrap flex-shrink-0"
+          >
+            Modifier
+          </Button>
+        )}
+      </div>
+
+      {isEditing ? (
+        <div className="space-y-4">
+          <div>
+            <label
+              htmlFor="eventRegistrationPoints"
+              className="block text-sm font-medium text-pixel-gold mb-2"
+            >
+              Points d&apos;inscription
+            </label>
+            <Input
+              id="eventRegistrationPoints"
+              type="number"
+              min="0"
+              value={formData.eventRegistrationPoints}
+              onChange={(e) =>
+                setFormData({
+                  ...formData,
+                  eventRegistrationPoints: e.target.value,
+                })
+              }
+              placeholder="100"
+              className="w-full"
+            />
+            <p className="text-xs text-gray-400 mt-1">
+              Les utilisateurs gagneront ce nombre de points lors de leur inscription à un événement
+            </p>
+          </div>
+          <div className="flex flex-col sm:flex-row gap-2 pt-4">
+            <Button
+              onClick={handleSave}
+              variant="success"
+              size="md"
+              disabled={isSaving}
+            >
+              {isSaving ? "Enregistrement..." : "Enregistrer"}
+            </Button>
+            <Button
+              onClick={handleCancel}
+              variant="secondary"
+              size="md"
+              disabled={isSaving}
+            >
+              Annuler
+            </Button>
+          </div>
+        </div>
+      ) : (
+        <div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4">
+          <span className="text-pixel-gold font-bold text-sm sm:text-base min-w-0 sm:min-w-[200px] flex-shrink-0">
+            Points actuels:
+          </span>
+          <div className="flex items-center gap-2">
+            <span className="text-lg sm:text-xl font-bold text-white">
+              {preferences?.eventRegistrationPoints ?? 100}
+            </span>
+            <span className="text-xs sm:text-sm text-gray-400">points</span>
+          </div>
+        </div>
+      )}
+    </Card>
+  );
+}
+

components/admin/FeedbackManagement.tsx

@@ -1,11 +1,18 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import { useState } from "react";
+import {
+  addFeedbackBonusPoints,
+  markFeedbackAsRead,
+} from "@/actions/admin/feedback";
+import { Button } from "@/components/ui";
+import Avatar from "@/components/ui/Avatar";
 
 interface Feedback {
   id: string;
   rating: number;
   comment: string | null;
+  isRead: boolean;
   createdAt: string;
   event: {
     id: string;
@@ -17,6 +24,8 @@ interface Feedback {
     id: string;
     username: string;
     email: string;
+    avatar: string | null;
+    score: number;
   };
 }
 
@@ -29,16 +38,23 @@ interface EventStatistics {
   feedbackCount: number;
 }
 
-export default function FeedbackManagement() {
-  const [feedbacks, setFeedbacks] = useState<Feedback[]>([]);
-  const [statistics, setStatistics] = useState<EventStatistics[]>([]);
-  const [loading, setLoading] = useState(true);
+interface FeedbackManagementProps {
+  initialFeedbacks: Feedback[];
+  initialStatistics: EventStatistics[];
+}
+
+export default function FeedbackManagement({
+  initialFeedbacks,
+  initialStatistics,
+}: FeedbackManagementProps) {
+  const [feedbacks, setFeedbacks] = useState<Feedback[]>(initialFeedbacks);
+  const [statistics, setStatistics] = useState<EventStatistics[]>(initialStatistics);
   const [error, setError] = useState("");
   const [selectedEvent, setSelectedEvent] = useState<string | null>(null);
-
-  useEffect(() => {
-    fetchFeedbacks();
-  }, []);
+  const [addingPoints, setAddingPoints] = useState<Record<string, boolean>>(
+    {}
+  );
+  const [markingRead, setMarkingRead] = useState<Record<string, boolean>>({});
 
   const fetchFeedbacks = async () => {
     try {
@@ -52,8 +68,6 @@ export default function FeedbackManagement() {
       setStatistics(data.statistics || []);
     } catch {
       setError("Erreur lors du chargement des feedbacks");
-    } finally {
-      setLoading(false);
     }
   };
 
@@ -92,17 +106,59 @@ export default function FeedbackManagement() {
     );
   };
 
-  const filteredFeedbacks = selectedEvent
-    ? feedbacks.filter((f) => f.event.id === selectedEvent)
-    : feedbacks;
+  const handleAddPoints = async (userId: string, points: number) => {
+    const key = `${userId}-${points}`;
+    setAddingPoints((prev) => ({ ...prev, [key]: true }));
+    setError("");
 
-  if (loading) {
+    try {
+      const result = await addFeedbackBonusPoints(userId, points);
+      if (result.success) {
+        // Rafraîchir les données pour voir les nouveaux scores
+        await fetchFeedbacks();
+        // Rafraîchir le score dans le header si l'utilisateur est connecté
+        window.dispatchEvent(new Event("refreshUserScore"));
+      } else {
+        setError(result.error || "Erreur lors de l'ajout des points");
+      }
+    } catch {
+      setError("Erreur lors de l'ajout des points");
+    } finally {
+      setAddingPoints((prev) => ({ ...prev, [key]: false }));
+    }
+  };
+
+  const handleMarkAsRead = async (feedbackId: string, isRead: boolean) => {
+    setMarkingRead((prev) => ({ ...prev, [feedbackId]: true }));
+    setError("");
+
+    try {
+      const result = await markFeedbackAsRead(feedbackId, isRead);
+      if (result.success) {
+        // Rafraîchir les données pour voir le nouveau statut
+        await fetchFeedbacks();
+      } else {
+        setError(result.error || "Erreur lors de la mise à jour");
+      }
+    } catch {
+      setError("Erreur lors de la mise à jour");
+    } finally {
+      setMarkingRead((prev) => ({ ...prev, [feedbackId]: false }));
+    }
+  };
+
+  const filteredFeedbacks = (selectedEvent
+    ? feedbacks.filter((f) => f.event.id === selectedEvent)
+    : feedbacks
+  ).sort((a, b) => {
+    // Trier : non lus en premier, puis par date décroissante
+    if (a.isRead !== b.isRead) {
+      return a.isRead ? 1 : -1;
+    }
     return (
-      <div className="bg-black/60 border border-pixel-gold/30 rounded-lg p-4 sm:p-8">
-        <p className="text-gray-400 text-center text-sm">Chargement...</p>
-      </div>
+      new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
     );
-  }
+  });
 
   return (
     <div className="space-y-4 sm:space-y-6">
@@ -184,20 +240,45 @@ export default function FeedbackManagement() {
             {filteredFeedbacks.map((feedback) => (
               <div
                 key={feedback.id}
-                className="bg-black/40 border border-pixel-gold/20 rounded p-3 sm:p-4"
+                className={`bg-black/40 border rounded p-3 sm:p-4 ${
+                  feedback.isRead
+                    ? "border-pixel-gold/20 opacity-75"
+                    : "border-pixel-gold/50 bg-pixel-gold/5"
+                }`}
               >
                 <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3 mb-3">
                   <div className="flex-1 min-w-0">
-                    <div className="flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-3 mb-2">
-                      <h4 className="text-white font-semibold text-sm sm:text-base break-words">
-                        {feedback.user.username}
-                      </h4>
-                      <span className="text-gray-500 text-[10px] sm:text-xs break-all">
-                        {feedback.user.email}
-                      </span>
+                    {/* En-tête utilisateur avec avatar */}
+                    <div className="flex items-center gap-2 sm:gap-3 mb-3">
+                      <Avatar
+                        src={feedback.user.avatar}
+                        username={feedback.user.username}
+                        size="md"
+                        borderClassName="border-pixel-gold/30"
+                      />
+                      <div className="flex-1 min-w-0">
+                        <div className="flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-2 mb-1">
+                          <h4 className="text-white font-semibold text-sm sm:text-base break-words">
+                            {feedback.user.username}
+                          </h4>
+                          <span className="text-pixel-gold font-bold text-xs sm:text-sm">
+                            {feedback.user.score.toLocaleString("fr-FR")} pts
+                          </span>
+                        </div>
+                        <span className="text-gray-500 text-[10px] sm:text-xs break-all">
+                          {feedback.user.email}
+                        </span>
+                      </div>
                     </div>
-                    <div className="text-pixel-gold text-xs sm:text-sm font-semibold mb-2 break-words">
-                      {feedback.event.name}
+                    <div className="flex items-center gap-2 mb-2">
+                      <div className="text-pixel-gold text-xs sm:text-sm font-semibold break-words">
+                        {feedback.event.name}
+                      </div>
+                      {!feedback.isRead && (
+                        <span className="bg-pixel-gold/20 text-pixel-gold text-[10px] px-1.5 py-0.5 rounded uppercase font-semibold">
+                          Non lu
+                        </span>
+                      )}
                     </div>
                     <div className="text-gray-500 text-[10px] sm:text-xs mb-2">
                       {new Date(feedback.createdAt).toLocaleDateString(
@@ -212,8 +293,23 @@ export default function FeedbackManagement() {
                       )}
                     </div>
                   </div>
-                  <div className="flex-shrink-0">
+                  <div className="flex flex-col items-end gap-2 flex-shrink-0">
                     {renderStars(feedback.rating)}
+                    <Button
+                      variant={feedback.isRead ? "secondary" : "success"}
+                      size="sm"
+                      onClick={() =>
+                        handleMarkAsRead(feedback.id, !feedback.isRead)
+                      }
+                      disabled={markingRead[feedback.id]}
+                      className="text-xs whitespace-nowrap"
+                    >
+                      {markingRead[feedback.id]
+                        ? "..."
+                        : feedback.isRead
+                          ? "Marquer non lu"
+                          : "Marquer lu"}
+                    </Button>
                   </div>
                 </div>
                 {feedback.comment && (
@@ -223,6 +319,39 @@ export default function FeedbackManagement() {
                     </p>
                   </div>
                 )}
+                {/* Boutons pour ajouter des points bonus */}
+                <div className="mt-3 pt-3 border-t border-pixel-gold/20 flex flex-wrap gap-2">
+                  <span className="text-gray-400 text-xs sm:text-sm mr-2">
+                    Points bonus:
+                  </span>
+                  <Button
+                    variant="primary"
+                    size="sm"
+                    onClick={() => handleAddPoints(feedback.user.id, 10)}
+                    disabled={addingPoints[`${feedback.user.id}-10`]}
+                    className="text-xs"
+                  >
+                    {addingPoints[`${feedback.user.id}-10`] ? "..." : "+10"}
+                  </Button>
+                  <Button
+                    variant="primary"
+                    size="sm"
+                    onClick={() => handleAddPoints(feedback.user.id, 100)}
+                    disabled={addingPoints[`${feedback.user.id}-100`]}
+                    className="text-xs"
+                  >
+                    {addingPoints[`${feedback.user.id}-100`] ? "..." : "+100"}
+                  </Button>
+                  <Button
+                    variant="primary"
+                    size="sm"
+                    onClick={() => handleAddPoints(feedback.user.id, 1000)}
+                    disabled={addingPoints[`${feedback.user.id}-1000`]}
+                    className="text-xs"
+                  >
+                    {addingPoints[`${feedback.user.id}-1000`] ? "..." : "+1000"}
+                  </Button>
+                </div>
               </div>
             ))}
           </div>