GTARH_Fonctionnel_V1

2025-12-02 17:57:33 +01:00
parent 721c02759f
commit bbebf6f44a
96 changed files with 27158 additions and 0 deletions
--- a/Backend/.env
+++ b/Backend/.env
@@ -0,0 +1,31 @@
+# Configuration Base de données MySQL
+DB_SERVER=192.168.0.4
+DB_DATABASE=DemandeConge
+DB_PASSWORD=-2b/)ru5/Bi8P[7_
+DB_ENCRYPT=true
+DB_TRUST_SERVER_CERTIFICATE=true
+PORT=3000
+
+COLLABORATEURS_URL=http://localhost:3000
+RH_URL=http://localhost:3001
+WEBHOOK_SECRET=secret-rh-2025
+
+
+
+# Configuration Serveur
+PORT=3001
+NODE_ENV=development
+
+# Configuration Azure AD (Microsoft Graph)
+AZURE_TENANT_ID=9840a2a0-6ae1-4688-b03d-d2ec291be0f9
+AZURE_CLIENT_ID=4bb4cc24-bac3-427c-b02c-5d14fc67b561
+AZURE_CLIENT_SECRET=o2q8Q~nGLCkry6XOriVFBMvKUk.5cXtFutAQVdx9
+AZURE_GROUP_ID=c1ea877c-6bca-4f47-bfad-f223640813a0
+JWT_SECRET=o2q8Q~nGLCkry6XOriVFBMvKUk.5cXtFutAQVdx9
+
+# Email configuration
+EMAIL_FROM=gtanoreply@ensup.eu
+
+# Upload configuration
+UPLOAD_DIR=./uploads
+MAX_FILE_SIZE=5242880
--- a/Backend/DockerFileGTARH.backend
+++ b/Backend/DockerFileGTARH.backend
@@ -0,0 +1,8 @@
+FROM node:18-alpine
+RUN apk add --no-cache curl mysql-client python3 make g++
+WORKDIR /app
+COPY package*.json ./
+RUN npm install --production
+COPY . .
+EXPOSE 3000
+CMD ["node", "server.js"]
--- a/Backend/package-lock.json
+++ b/Backend/package-lock.json
--- a/Backend/package.json
+++ b/Backend/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "gtarh-backend",
+  "version": "1.0.0",
+  "main": "server.js",
+  "scripts": {
+    "start": "node server.js",
+    "dev": "nodemon server.js"
+  },
+  "dependencies": {
+    "@azure/msal-node": "^3.8.0",
+    "axios": "^1.12.2",
+    "cors": "^2.8.5",
+    "crypto": "^1.0.1",
+    "dotenv": "^17.2.3",
+    "express": "^5.1.0",
+    "jsonwebtoken": "^9.0.2",
+    "mysql2": "^3.15.1",
+    "node-fetch": "^2.7.0",
+    "pdfkit": "^0.17.2"
+  },
+  "devDependencies": {
+    "nodemon": "^3.1.10"
+  }
+}
--- a/Backend/server.js
+++ b/Backend/server.js
--- a/Backend/webhook-config.js
+++ b/Backend/webhook-config.js
@@ -0,0 +1,18 @@
+// Configuration des webhooks
+const WEBHOOKS = {
+    COLLABORATEURS_URL: process.env.COLLABORATEURS_URL || 'http://localhost:3000',
+    RH_URL: process.env.RH_URL || 'http://localhost:3001',
+    SECRET_KEY: process.env.WEBHOOK_SECRET || 'secret-key-securise'
+};
+
+// Types d'événements
+const EVENTS = {
+    DEMANDE_VALIDATED: 'demande.validated',
+    DEMANDE_CREATED: 'demande.created',
+    DEMANDE_UPDATED: 'demande.updated',
+    DEMANDE_CANCELLED: 'demande.cancelled',
+    DEMANDE_DELETED: 'demande.deleted',
+    COMPTEUR_UPDATED: 'compteur.updated'
+};
+
+module.exports = { WEBHOOKS, EVENTS };
--- a/Backend/webhook-utils.js
+++ b/Backend/webhook-utils.js
@@ -0,0 +1,111 @@
+// webhook-utils.js (VERSION COMMONJS)
+const axios = require('axios');
+const crypto = require('crypto');
+
+class WebhookManager {
+    constructor(secretKey) {
+        this.secretKey = secretKey;
+    }
+
+    /**
+     * Génère une signature HMAC SHA-256 pour sécuriser le webhook
+     * @param {Object} payload - Les données à signer
+     * @returns {string} La signature hexadécimale
+     */
+    generateSignature(payload) {
+        return crypto
+            .createHmac('sha256', this.secretKey)
+            .update(JSON.stringify(payload))
+            .digest('hex');
+    }
+
+    /**
+     * Vérifie la signature d'un webhook reçu
+     * @param {Object} payload - Les données reçues
+     * @param {string} receivedSignature - La signature reçue dans le header
+     * @returns {boolean} True si la signature est valide
+     */
+    verifySignature(payload, receivedSignature) {
+        if (!receivedSignature) {
+            console.error('❌ Aucune signature fournie');
+            return false;
+        }
+
+        try {
+            const expectedSignature = this.generateSignature(payload);
+            return crypto.timingSafeEqual(
+                Buffer.from(expectedSignature),
+                Buffer.from(receivedSignature)
+            );
+        } catch (error) {
+            console.error('❌ Erreur vérification signature:', error);
+            return false;
+        }
+    }
+
+    /**
+     * Envoie un webhook à une URL cible avec retry automatique
+     * @param {string} targetUrl - URL du serveur cible
+     * @param {string} eventType - Type d'événement (ex: 'demande.validated')
+     * @param {Object} data - Données de l'événement
+     * @param {number} retries - Nombre de tentatives (défaut: 3)
+     * @returns {Promise<Object>} La réponse du serveur
+     */
+    async sendWebhook(targetUrl, eventType, data, retries = 3) {
+        const payload = {
+            event: eventType,
+            data: data,
+            timestamp: new Date().toISOString()
+        };
+
+        const signature = this.generateSignature(payload);
+
+        for (let attempt = 1; attempt <= retries; attempt++) {
+            try {
+                console.log(`📤 Envoi webhook: ${eventType} vers ${targetUrl} (tentative ${attempt}/${retries})`);
+
+                const response = await axios.post(
+                    `${targetUrl}/api/webhook/receive`,
+                    payload,
+                    {
+                        headers: {
+                            'Content-Type': 'application/json',
+                            'X-Webhook-Signature': signature
+                        },
+                        timeout: 5000
+                    }
+                );
+
+                console.log(`✅ Webhook envoyé avec succès: ${eventType}`);
+                return response.data;
+
+            } catch (error) {
+                console.error(`❌ Erreur envoi webhook (tentative ${attempt}/${retries}):`, error.message);
+
+                if (attempt === retries) {
+                    console.error(`❌ Échec définitif du webhook après ${retries} tentatives`);
+                    throw error;
+                }
+
+                const waitTime = 1000 * attempt;
+                console.log(`⏳ Nouvelle tentative dans ${waitTime}ms...`);
+                await new Promise(resolve => setTimeout(resolve, waitTime));
+            }
+        }
+    }
+
+    /**
+     * Envoie un webhook sans attendre la réponse (fire and forget)
+     * @param {string} targetUrl - URL du serveur cible
+     * @param {string} eventType - Type d'événement
+     * @param {Object} data - Données de l'événement
+     */
+    sendWebhookAsync(targetUrl, eventType, data) {
+        this.sendWebhook(targetUrl, eventType, data)
+            .catch(error => {
+                console.error('❌ Webhook async échoué (non bloquant):', error.message);
+            });
+    }
+}
+
+module.exports = WebhookManager;
--- a/components.json
+++ b/components.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "src/index.css",
+    "baseColor": "slate",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  }
+}
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -0,0 +1,46 @@
+version: '3.8'  # ← AJOUTÉ (manquant !)
+services:
+  backend:
+    build:
+      context: ./Backend
+      dockerfile: DockerFileGTARH.backend
+    container_name: gtarh-backend
+    ports:
+      - "8013:3000"
+    env_file:
+      - ./Backend/.env
+    environment:
+      - DB_HOST=192.168.0.3
+      - NODE_ENV=production
+      - PORT=3000
+      - COLLABORATEURS_URL=http://gtarh-backend:3000
+      - RH_URL=http://gtarh-backend:3000
+      - WEBHOOK_SECRET=secret-rh-2025
+    networks:
+      - gtarh-network
+    restart: unless-stopped
+
+  frontend:
+    build:
+      context: .
+      dockerfile: ./src/DockerFileGTARH.Frontend
+      args:
+        - VITE_API_URL=https://mygta-rh.ensup-adm.net:8013
+    container_name: gtarh-frontend
+    ports:
+      - "3014:3014"
+    environment:
+      - NODE_ENV=production
+    depends_on:
+      - backend
+    networks:
+      - gtarh-network
+    restart: unless-stopped
+
+networks:
+  gtarh-network:
+    driver: bridge
+
+volumes:
+  mysql-data:
+    driver: local
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -0,0 +1,26 @@
+import js from "@eslint/js";
+import globals from "globals";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import tseslint from "typescript-eslint";
+
+export default tseslint.config(
+  { ignores: ["dist"] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ["**/*.{ts,tsx}"],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      "react-hooks": reactHooks,
+      "react-refresh": reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      "react-refresh/only-export-components": ["warn", { allowConstantExport: true }],
+      "@typescript-eslint/no-unused-vars": "off",
+    },
+  },
+);
--- a/index.html
+++ b/index.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>RH - Gestion des absences</title>
+    <meta name="description" content="Système de gestion des absences, récupérations et congés pour les ressources humaines" />
+    <meta name="author" content="RH Manager" />
+
+    <meta property="og:title" content="RH Manager - Gestion des absences" />
+    <meta property="og:description" content="Système de gestion de suivi des absences, récupérations et congés pour les ressources humaines" />
+    <meta property="og:type" content="website" />
+    
+
+
+  </head>
+
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,96 @@
+{
+  "name": "vite_react_shadcn_ts",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "build:dev": "vite build --mode development",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@azure/msal-browser": "^4.24.1",
+    "@azure/msal-react": "^3.0.20",
+    "@hookform/resolvers": "^3.10.0",
+    "@radix-ui/react-accordion": "^1.2.11",
+    "@radix-ui/react-alert-dialog": "^1.1.14",
+    "@radix-ui/react-aspect-ratio": "^1.1.7",
+    "@radix-ui/react-avatar": "^1.1.10",
+    "@radix-ui/react-checkbox": "^1.3.2",
+    "@radix-ui/react-collapsible": "^1.1.11",
+    "@radix-ui/react-context-menu": "^2.2.15",
+    "@radix-ui/react-dialog": "^1.1.14",
+    "@radix-ui/react-dropdown-menu": "^2.1.15",
+    "@radix-ui/react-hover-card": "^1.1.14",
+    "@radix-ui/react-label": "^2.1.7",
+    "@radix-ui/react-menubar": "^1.1.15",
+    "@radix-ui/react-navigation-menu": "^1.2.13",
+    "@radix-ui/react-popover": "^1.1.14",
+    "@radix-ui/react-progress": "^1.1.7",
+    "@radix-ui/react-radio-group": "^1.3.7",
+    "@radix-ui/react-scroll-area": "^1.2.9",
+    "@radix-ui/react-select": "^2.2.5",
+    "@radix-ui/react-separator": "^1.1.7",
+    "@radix-ui/react-slider": "^1.3.5",
+    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-switch": "^1.2.5",
+    "@radix-ui/react-tabs": "^1.1.12",
+    "@radix-ui/react-toast": "^1.2.14",
+    "@radix-ui/react-toggle": "^1.1.9",
+    "@radix-ui/react-toggle-group": "^1.1.10",
+    "@radix-ui/react-tooltip": "^1.2.7",
+    "@supabase/supabase-js": "^2.58.0",
+    "@tanstack/react-query": "^5.90.2",
+    "bcryptjs": "^3.0.2",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "cors": "^2.8.5",
+    "date-fns": "^3.6.0",
+    "dotenv": "^17.2.3",
+    "embla-carousel-react": "^8.6.0",
+    "exceljs": "^4.4.0",
+    "express": "^5.1.0",
+    "input-otp": "^1.4.2",
+    "jsonwebtoken": "^9.0.2",
+    "lucide-react": "^0.462.0",
+    "mysql2": "^3.15.1",
+    "next-themes": "^0.3.0",
+    "react": "^18.3.1",
+    "react-day-picker": "^8.10.1",
+    "react-dom": "^18.3.1",
+    "react-hook-form": "^7.61.1",
+    "react-resizable-panels": "^2.1.9",
+    "react-router-dom": "^6.30.1",
+    "recharts": "^2.15.4",
+    "sonner": "^1.7.4",
+    "tailwind-merge": "^2.6.0",
+    "tailwindcss-animate": "^1.0.7",
+    "vaul": "^0.9.9",
+    "xlsx": "^0.18.5",
+    "zod": "^3.25.76"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.32.0",
+    "@tailwindcss/typography": "^0.5.16",
+    "@types/node": "^22.16.5",
+    "@types/react": "^18.3.23",
+    "@types/react-dom": "^18.3.7",
+    "@vitejs/plugin-react": "^5.1.1",
+    "@vitejs/plugin-react-swc": "^3.11.0",
+    "autoprefixer": "^10.4.21",
+    "eslint": "^9.32.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.20",
+    "globals": "^15.15.0",
+    "lovable-tagger": "^1.1.10",
+    "nodemon": "^3.1.10",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^3.4.17",
+    "typescript": "^5.8.3",
+    "typescript-eslint": "^8.38.0",
+    "vite": "^5.4.19"
+  }
+}
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
--- a/src/App.css
+++ b/src/App.css
@@ -0,0 +1,42 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -0,0 +1,163 @@
+import { Toaster } from "@/components/ui/toaster";
+import { Toaster as Sonner } from "@/components/ui/sonner";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
+import NotFound from "./pages/NotFound";
+import AuthMicrosoft from "./pages/AuthMicrosoft";
+import Dashboard from "./pages/Dashboard";
+import Teams from "./pages/Teams";
+import TeamDetail from "./pages/TeamDetail";
+import ValidationDemandes from "./pages/ValidationDemandes";
+import SaisieManuelle from "./pages/SaisieManuelle";
+import ExportPaie from "./pages/ExportPaie";
+import GestionCompteurs from "./pages/GestionCompteurs";
+import ModificationDemande from "./pages/ModificationDemande";
+import Historique from "./pages/Historique";
+import GestionRecuperation from "./pages/GestionRecuperation";
+import CompteRenduRH from "./pages/CompteRenduRH";
+
+const queryClient = new QueryClient();
+
+// Composant de protection des routes
+const ProtectedRoute = ({ children }: { children: React.ReactNode }) => {
+    const token = localStorage.getItem('token');
+
+    if (!token) {
+        return <Navigate to="/" replace />;
+    }
+
+    return <>{children}</>;
+};
+
+const App = () => (
+    <QueryClientProvider client={queryClient}>
+        <TooltipProvider>
+            <Toaster />
+            <Sonner />
+            <BrowserRouter>
+                <Routes>
+                    {/* Route publique - Authentification Microsoft */}
+                    <Route path="/" element={<AuthMicrosoft />} />
+                    {/* <Route path="/" element={<LoginDev />} />*/}
+
+                    {/* Routes protégées */}
+                    <Route
+                        path="/dashboard"
+                        element={
+                            <ProtectedRoute>
+                                <Dashboard />
+                            </ProtectedRoute>
+                        }
+                    />
+
+                    <Route
+                        path="/modification-demande/:id"
+                        element={
+                            <ProtectedRoute>
+                                <ModificationDemande />
+                            </ProtectedRoute>
+                        }
+                    />
+
+                    <Route
+                        path="/validation"
+                        element={
+                            <ProtectedRoute>
+                                <ValidationDemandes />
+                            </ProtectedRoute>
+                        }
+                    />
+
+                    <Route
+                        path="/saisie-manuelle"
+                        element={
+                            <ProtectedRoute>
+                                <SaisieManuelle />
+                            </ProtectedRoute>
+                        }
+                    />
+
+                    <Route
+                        path="/export-paie"
+                        element={
+                            <ProtectedRoute>
+                                <ExportPaie />
+                            </ProtectedRoute>
+                        }
+                    />
+
+                    <Route
+                        path="/compteurs"
+                        element={
+                            <ProtectedRoute>
+                                <GestionCompteurs />
+                            </ProtectedRoute>
+                        }
+                    />
+
+                    <Route
+                        path="/teams"
+                        element={
+                            <ProtectedRoute>
+                                <Teams />
+                            </ProtectedRoute>
+                        }
+                    />
+
+                    <Route
+                        path="/teams/:id"
+                        element={
+                            <ProtectedRoute>
+                                <TeamDetail />
+                            </ProtectedRoute>
+                        }
+                    />
+
+                    <Route
+                        path="/demandes/:id"
+                        element={
+                            <ProtectedRoute>
+                                <ModificationDemande />
+                            </ProtectedRoute>
+                        }
+                    />
+
+                    <Route
+                        path="/historique"
+                        element={
+                            <ProtectedRoute>
+                                <Historique />
+                            </ProtectedRoute>
+                        }
+                    />
+
+                    {/* ✅ ROUTE COMPTE-RENDU RH - BIEN PROTÉGÉE */}
+                    <Route
+                        path="/compte-rendu-rh"
+                        element={
+                            <ProtectedRoute>
+                                <CompteRenduRH />
+                            </ProtectedRoute>
+                        }
+                    />
+
+                    {/* ✅ ROUTE GESTION RÉCUPÉRATION - BIEN PROTÉGÉE */}
+                    <Route
+                        path="/gestion-recuperation"
+                        element={
+                            <ProtectedRoute>
+                                <GestionRecuperation />
+                            </ProtectedRoute>
+                        }
+                    />
+
+                    {/* Route 404 */}
+                    <Route path="*" element={<NotFound />} />
+                </Routes>
+            </BrowserRouter>
+        </TooltipProvider>
+    </QueryClientProvider>
+);
+
+export default App;
--- a/src/DockerFileGTARH.Frontend
+++ b/src/DockerFileGTARH.Frontend
@@ -0,0 +1,15 @@
+FROM node:18-alpine
+
+WORKDIR /app
+
+COPY package.json package-lock.json ./
+
+# ✅ FORCE l'installation du plugin React manquant
+RUN npm install @vitejs/plugin-react --save-dev
+RUN npm ci --legacy-peer-deps
+
+COPY . .
+
+EXPOSE 3014
+
+CMD ["npx", "vite", "--host", "0.0.0.0", "--port", "3014"]
--- a/src/assets/GTARH.png
+++ b/src/assets/GTARH.png
--- a/src/components/ui/accordion.tsx
+++ b/src/components/ui/accordion.tsx
@@ -0,0 +1,52 @@
+import * as React from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDown } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const Accordion = AccordionPrimitive.Root;
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item ref={ref} className={cn("border-b", className)} {...props} />
+));
+AccordionItem.displayName = "AccordionItem";
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn("pb-4 pt-0", className)}>{children}</div>
+  </AccordionPrimitive.Content>
+));
+
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
--- a/src/components/ui/alert-dialog.tsx
+++ b/src/components/ui/alert-dialog.tsx
@@ -0,0 +1,104 @@
+import * as React from "react";
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+
+import { cn } from "@/lib/utils";
+import { buttonVariants } from "@/components/ui/button";
+
+const AlertDialog = AlertDialogPrimitive.Root;
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className,
+    )}
+    {...props}
+    ref={ref}
+  />
+));
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
+
+const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className,
+      )}
+      {...props}
+    />
+  </AlertDialogPortal>
+));
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
+
+const AlertDialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...props} />
+);
+AlertDialogHeader.displayName = "AlertDialogHeader";
+
+const AlertDialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)} {...props} />
+);
+AlertDialogFooter.displayName = "AlertDialogFooter";
+
+const AlertDialogTitle = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title ref={ref} className={cn("text-lg font-semibold", className)} {...props} />
+));
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
+
+const AlertDialogDescription = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
+));
+AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
+
+const AlertDialogAction = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action ref={ref} className={cn(buttonVariants(), className)} {...props} />
+));
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
+
+const AlertDialogCancel = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className)}
+    {...props}
+  />
+));
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+};
--- a/src/components/ui/alert.tsx
+++ b/src/components/ui/alert.tsx
@@ -0,0 +1,43 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive: "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div ref={ref} role="alert" className={cn(alertVariants({ variant }), className)} {...props} />
+));
+Alert.displayName = "Alert";
+
+const AlertTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h5 ref={ref} className={cn("mb-1 font-medium leading-none tracking-tight", className)} {...props} />
+  ),
+);
+AlertTitle.displayName = "AlertTitle";
+
+const AlertDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("text-sm [&_p]:leading-relaxed", className)} {...props} />
+  ),
+);
+AlertDescription.displayName = "AlertDescription";
+
+export { Alert, AlertTitle, AlertDescription };
--- a/src/components/ui/aspect-ratio.tsx
+++ b/src/components/ui/aspect-ratio.tsx
@@ -0,0 +1,5 @@
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
+
+const AspectRatio = AspectRatioPrimitive.Root;
+
+export { AspectRatio };
--- a/src/components/ui/avatar.tsx
+++ b/src/components/ui/avatar.tsx
@@ -0,0 +1,38 @@
+import * as React from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+
+import { cn } from "@/lib/utils";
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className)}
+    {...props}
+  />
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image ref={ref} className={cn("aspect-square h-full w-full", className)} {...props} />
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn("flex h-full w-full items-center justify-center rounded-full bg-muted", className)}
+    {...props}
+  />
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+
+export { Avatar, AvatarImage, AvatarFallback };
--- a/src/components/ui/badge.tsx
+++ b/src/components/ui/badge.tsx
@@ -0,0 +1,29 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
+}
+
+export { Badge, badgeVariants };
--- a/src/components/ui/breadcrumb.tsx
+++ b/src/components/ui/breadcrumb.tsx
@@ -0,0 +1,90 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { ChevronRight, MoreHorizontal } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const Breadcrumb = React.forwardRef<
+  HTMLElement,
+  React.ComponentPropsWithoutRef<"nav"> & {
+    separator?: React.ReactNode;
+  }
+>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />);
+Breadcrumb.displayName = "Breadcrumb";
+
+const BreadcrumbList = React.forwardRef<HTMLOListElement, React.ComponentPropsWithoutRef<"ol">>(
+  ({ className, ...props }, ref) => (
+    <ol
+      ref={ref}
+      className={cn(
+        "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+BreadcrumbList.displayName = "BreadcrumbList";
+
+const BreadcrumbItem = React.forwardRef<HTMLLIElement, React.ComponentPropsWithoutRef<"li">>(
+  ({ className, ...props }, ref) => (
+    <li ref={ref} className={cn("inline-flex items-center gap-1.5", className)} {...props} />
+  ),
+);
+BreadcrumbItem.displayName = "BreadcrumbItem";
+
+const BreadcrumbLink = React.forwardRef<
+  HTMLAnchorElement,
+  React.ComponentPropsWithoutRef<"a"> & {
+    asChild?: boolean;
+  }
+>(({ asChild, className, ...props }, ref) => {
+  const Comp = asChild ? Slot : "a";
+
+  return <Comp ref={ref} className={cn("transition-colors hover:text-foreground", className)} {...props} />;
+});
+BreadcrumbLink.displayName = "BreadcrumbLink";
+
+const BreadcrumbPage = React.forwardRef<HTMLSpanElement, React.ComponentPropsWithoutRef<"span">>(
+  ({ className, ...props }, ref) => (
+    <span
+      ref={ref}
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn("font-normal text-foreground", className)}
+      {...props}
+    />
+  ),
+);
+BreadcrumbPage.displayName = "BreadcrumbPage";
+
+const BreadcrumbSeparator = ({ children, className, ...props }: React.ComponentProps<"li">) => (
+  <li role="presentation" aria-hidden="true" className={cn("[&>svg]:size-3.5", className)} {...props}>
+    {children ?? <ChevronRight />}
+  </li>
+);
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
+
+const BreadcrumbEllipsis = ({ className, ...props }: React.ComponentProps<"span">) => (
+  <span
+    role="presentation"
+    aria-hidden="true"
+    className={cn("flex h-9 w-9 items-center justify-center", className)}
+    {...props}
+  >
+    <MoreHorizontal className="h-4 w-4" />
+    <span className="sr-only">More</span>
+  </span>
+);
+BreadcrumbEllipsis.displayName = "BreadcrumbElipssis";
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+};
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -0,0 +1,47 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />;
+  },
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };
--- a/src/components/ui/calendar.tsx
+++ b/src/components/ui/calendar.tsx
@@ -0,0 +1,54 @@
+import * as React from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { DayPicker } from "react-day-picker";
+
+import { cn } from "@/lib/utils";
+import { buttonVariants } from "@/components/ui/button";
+
+export type CalendarProps = React.ComponentProps<typeof DayPicker>;
+
+function Calendar({ className, classNames, showOutsideDays = true, ...props }: CalendarProps) {
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn("p-3", className)}
+      classNames={{
+        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
+        month: "space-y-4",
+        caption: "flex justify-center pt-1 relative items-center",
+        caption_label: "text-sm font-medium",
+        nav: "space-x-1 flex items-center",
+        nav_button: cn(
+          buttonVariants({ variant: "outline" }),
+          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+        ),
+        nav_button_previous: "absolute left-1",
+        nav_button_next: "absolute right-1",
+        table: "w-full border-collapse space-y-1",
+        head_row: "flex",
+        head_cell: "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
+        row: "flex w-full mt-2",
+        cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
+        day: cn(buttonVariants({ variant: "ghost" }), "h-9 w-9 p-0 font-normal aria-selected:opacity-100"),
+        day_range_end: "day-range-end",
+        day_selected:
+          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+        day_today: "bg-accent text-accent-foreground",
+        day_outside:
+          "day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
+        day_disabled: "text-muted-foreground opacity-50",
+        day_range_middle: "aria-selected:bg-accent aria-selected:text-accent-foreground",
+        day_hidden: "invisible",
+        ...classNames,
+      }}
+      components={{
+        IconLeft: ({ ..._props }) => <ChevronLeft className="h-4 w-4" />,
+        IconRight: ({ ..._props }) => <ChevronRight className="h-4 w-4" />,
+      }}
+      {...props}
+    />
+  );
+}
+Calendar.displayName = "Calendar";
+
+export { Calendar };
--- a/src/components/ui/card.tsx
+++ b/src/components/ui/card.tsx
@@ -0,0 +1,43 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("rounded-lg border bg-card text-card-foreground shadow-sm", className)} {...props} />
+));
+Card.displayName = "Card";
+
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
+  ),
+);
+CardHeader.displayName = "CardHeader";
+
+const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h3 ref={ref} className={cn("text-2xl font-semibold leading-none tracking-tight", className)} {...props} />
+  ),
+);
+CardTitle.displayName = "CardTitle";
+
+const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => (
+    <p ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
+  ),
+);
+CardDescription.displayName = "CardDescription";
+
+const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />,
+);
+CardContent.displayName = "CardContent";
+
+const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("flex items-center p-6 pt-0", className)} {...props} />
+  ),
+);
+CardFooter.displayName = "CardFooter";
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };
--- a/src/components/ui/carousel.tsx
+++ b/src/components/ui/carousel.tsx
@@ -0,0 +1,224 @@
+import * as React from "react";
+import useEmblaCarousel, { type UseEmblaCarouselType } from "embla-carousel-react";
+import { ArrowLeft, ArrowRight } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+
+type CarouselApi = UseEmblaCarouselType[1];
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
+type CarouselOptions = UseCarouselParameters[0];
+type CarouselPlugin = UseCarouselParameters[1];
+
+type CarouselProps = {
+  opts?: CarouselOptions;
+  plugins?: CarouselPlugin;
+  orientation?: "horizontal" | "vertical";
+  setApi?: (api: CarouselApi) => void;
+};
+
+type CarouselContextProps = {
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0];
+  api: ReturnType<typeof useEmblaCarousel>[1];
+  scrollPrev: () => void;
+  scrollNext: () => void;
+  canScrollPrev: boolean;
+  canScrollNext: boolean;
+} & CarouselProps;
+
+const CarouselContext = React.createContext<CarouselContextProps | null>(null);
+
+function useCarousel() {
+  const context = React.useContext(CarouselContext);
+
+  if (!context) {
+    throw new Error("useCarousel must be used within a <Carousel />");
+  }
+
+  return context;
+}
+
+const Carousel = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement> & CarouselProps>(
+  ({ orientation = "horizontal", opts, setApi, plugins, className, children, ...props }, ref) => {
+    const [carouselRef, api] = useEmblaCarousel(
+      {
+        ...opts,
+        axis: orientation === "horizontal" ? "x" : "y",
+      },
+      plugins,
+    );
+    const [canScrollPrev, setCanScrollPrev] = React.useState(false);
+    const [canScrollNext, setCanScrollNext] = React.useState(false);
+
+    const onSelect = React.useCallback((api: CarouselApi) => {
+      if (!api) {
+        return;
+      }
+
+      setCanScrollPrev(api.canScrollPrev());
+      setCanScrollNext(api.canScrollNext());
+    }, []);
+
+    const scrollPrev = React.useCallback(() => {
+      api?.scrollPrev();
+    }, [api]);
+
+    const scrollNext = React.useCallback(() => {
+      api?.scrollNext();
+    }, [api]);
+
+    const handleKeyDown = React.useCallback(
+      (event: React.KeyboardEvent<HTMLDivElement>) => {
+        if (event.key === "ArrowLeft") {
+          event.preventDefault();
+          scrollPrev();
+        } else if (event.key === "ArrowRight") {
+          event.preventDefault();
+          scrollNext();
+        }
+      },
+      [scrollPrev, scrollNext],
+    );
+
+    React.useEffect(() => {
+      if (!api || !setApi) {
+        return;
+      }
+
+      setApi(api);
+    }, [api, setApi]);
+
+    React.useEffect(() => {
+      if (!api) {
+        return;
+      }
+
+      onSelect(api);
+      api.on("reInit", onSelect);
+      api.on("select", onSelect);
+
+      return () => {
+        api?.off("select", onSelect);
+      };
+    }, [api, onSelect]);
+
+    return (
+      <CarouselContext.Provider
+        value={{
+          carouselRef,
+          api: api,
+          opts,
+          orientation: orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+          scrollPrev,
+          scrollNext,
+          canScrollPrev,
+          canScrollNext,
+        }}
+      >
+        <div
+          ref={ref}
+          onKeyDownCapture={handleKeyDown}
+          className={cn("relative", className)}
+          role="region"
+          aria-roledescription="carousel"
+          {...props}
+        >
+          {children}
+        </div>
+      </CarouselContext.Provider>
+    );
+  },
+);
+Carousel.displayName = "Carousel";
+
+const CarouselContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    const { carouselRef, orientation } = useCarousel();
+
+    return (
+      <div ref={carouselRef} className="overflow-hidden">
+        <div
+          ref={ref}
+          className={cn("flex", orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col", className)}
+          {...props}
+        />
+      </div>
+    );
+  },
+);
+CarouselContent.displayName = "CarouselContent";
+
+const CarouselItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    const { orientation } = useCarousel();
+
+    return (
+      <div
+        ref={ref}
+        role="group"
+        aria-roledescription="slide"
+        className={cn("min-w-0 shrink-0 grow-0 basis-full", orientation === "horizontal" ? "pl-4" : "pt-4", className)}
+        {...props}
+      />
+    );
+  },
+);
+CarouselItem.displayName = "CarouselItem";
+
+const CarouselPrevious = React.forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(
+  ({ className, variant = "outline", size = "icon", ...props }, ref) => {
+    const { orientation, scrollPrev, canScrollPrev } = useCarousel();
+
+    return (
+      <Button
+        ref={ref}
+        variant={variant}
+        size={size}
+        className={cn(
+          "absolute h-8 w-8 rounded-full",
+          orientation === "horizontal"
+            ? "-left-12 top-1/2 -translate-y-1/2"
+            : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+          className,
+        )}
+        disabled={!canScrollPrev}
+        onClick={scrollPrev}
+        {...props}
+      >
+        <ArrowLeft className="h-4 w-4" />
+        <span className="sr-only">Previous slide</span>
+      </Button>
+    );
+  },
+);
+CarouselPrevious.displayName = "CarouselPrevious";
+
+const CarouselNext = React.forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(
+  ({ className, variant = "outline", size = "icon", ...props }, ref) => {
+    const { orientation, scrollNext, canScrollNext } = useCarousel();
+
+    return (
+      <Button
+        ref={ref}
+        variant={variant}
+        size={size}
+        className={cn(
+          "absolute h-8 w-8 rounded-full",
+          orientation === "horizontal"
+            ? "-right-12 top-1/2 -translate-y-1/2"
+            : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+          className,
+        )}
+        disabled={!canScrollNext}
+        onClick={scrollNext}
+        {...props}
+      >
+        <ArrowRight className="h-4 w-4" />
+        <span className="sr-only">Next slide</span>
+      </Button>
+    );
+  },
+);
+CarouselNext.displayName = "CarouselNext";
+
+export { type CarouselApi, Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext };
--- a/src/components/ui/chart.tsx
+++ b/src/components/ui/chart.tsx
@@ -0,0 +1,303 @@
+import * as React from "react";
+import * as RechartsPrimitive from "recharts";
+
+import { cn } from "@/lib/utils";
+
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = { light: "", dark: ".dark" } as const;
+
+export type ChartConfig = {
+  [k in string]: {
+    label?: React.ReactNode;
+    icon?: React.ComponentType;
+  } & ({ color?: string; theme?: never } | { color?: never; theme: Record<keyof typeof THEMES, string> });
+};
+
+type ChartContextProps = {
+  config: ChartConfig;
+};
+
+const ChartContext = React.createContext<ChartContextProps | null>(null);
+
+function useChart() {
+  const context = React.useContext(ChartContext);
+
+  if (!context) {
+    throw new Error("useChart must be used within a <ChartContainer />");
+  }
+
+  return context;
+}
+
+const ChartContainer = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    config: ChartConfig;
+    children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];
+  }
+>(({ id, className, children, config, ...props }, ref) => {
+  const uniqueId = React.useId();
+  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
+
+  return (
+    <ChartContext.Provider value={{ config }}>
+      <div
+        data-chart={chartId}
+        ref={ref}
+        className={cn(
+          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
+          className,
+        )}
+        {...props}
+      >
+        <ChartStyle id={chartId} config={config} />
+        <RechartsPrimitive.ResponsiveContainer>{children}</RechartsPrimitive.ResponsiveContainer>
+      </div>
+    </ChartContext.Provider>
+  );
+});
+ChartContainer.displayName = "Chart";
+
+const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
+  const colorConfig = Object.entries(config).filter(([_, config]) => config.theme || config.color);
+
+  if (!colorConfig.length) {
+    return null;
+  }
+
+  return (
+    <style
+      dangerouslySetInnerHTML={{
+        __html: Object.entries(THEMES)
+          .map(
+            ([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+  .map(([key, itemConfig]) => {
+    const color = itemConfig.theme?.[theme as keyof typeof itemConfig.theme] || itemConfig.color;
+    return color ? `  --color-${key}: ${color};` : null;
+  })
+  .join("\n")}
+}
+`,
+          )
+          .join("\n"),
+      }}
+    />
+  );
+};
+
+const ChartTooltip = RechartsPrimitive.Tooltip;
+
+const ChartTooltipContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
+    React.ComponentProps<"div"> & {
+      hideLabel?: boolean;
+      hideIndicator?: boolean;
+      indicator?: "line" | "dot" | "dashed";
+      nameKey?: string;
+      labelKey?: string;
+    }
+>(
+  (
+    {
+      active,
+      payload,
+      className,
+      indicator = "dot",
+      hideLabel = false,
+      hideIndicator = false,
+      label,
+      labelFormatter,
+      labelClassName,
+      formatter,
+      color,
+      nameKey,
+      labelKey,
+    },
+    ref,
+  ) => {
+    const { config } = useChart();
+
+    const tooltipLabel = React.useMemo(() => {
+      if (hideLabel || !payload?.length) {
+        return null;
+      }
+
+      const [item] = payload;
+      const key = `${labelKey || item.dataKey || item.name || "value"}`;
+      const itemConfig = getPayloadConfigFromPayload(config, item, key);
+      const value =
+        !labelKey && typeof label === "string"
+          ? config[label as keyof typeof config]?.label || label
+          : itemConfig?.label;
+
+      if (labelFormatter) {
+        return <div className={cn("font-medium", labelClassName)}>{labelFormatter(value, payload)}</div>;
+      }
+
+      if (!value) {
+        return null;
+      }
+
+      return <div className={cn("font-medium", labelClassName)}>{value}</div>;
+    }, [label, labelFormatter, payload, hideLabel, labelClassName, config, labelKey]);
+
+    if (!active || !payload?.length) {
+      return null;
+    }
+
+    const nestLabel = payload.length === 1 && indicator !== "dot";
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
+          className,
+        )}
+      >
+        {!nestLabel ? tooltipLabel : null}
+        <div className="grid gap-1.5">
+          {payload.map((item, index) => {
+            const key = `${nameKey || item.name || item.dataKey || "value"}`;
+            const itemConfig = getPayloadConfigFromPayload(config, item, key);
+            const indicatorColor = color || item.payload.fill || item.color;
+
+            return (
+              <div
+                key={item.dataKey}
+                className={cn(
+                  "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
+                  indicator === "dot" && "items-center",
+                )}
+              >
+                {formatter && item?.value !== undefined && item.name ? (
+                  formatter(item.value, item.name, item, index, item.payload)
+                ) : (
+                  <>
+                    {itemConfig?.icon ? (
+                      <itemConfig.icon />
+                    ) : (
+                      !hideIndicator && (
+                        <div
+                          className={cn("shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]", {
+                            "h-2.5 w-2.5": indicator === "dot",
+                            "w-1": indicator === "line",
+                            "w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed",
+                            "my-0.5": nestLabel && indicator === "dashed",
+                          })}
+                          style={
+                            {
+                              "--color-bg": indicatorColor,
+                              "--color-border": indicatorColor,
+                            } as React.CSSProperties
+                          }
+                        />
+                      )
+                    )}
+                    <div
+                      className={cn(
+                        "flex flex-1 justify-between leading-none",
+                        nestLabel ? "items-end" : "items-center",
+                      )}
+                    >
+                      <div className="grid gap-1.5">
+                        {nestLabel ? tooltipLabel : null}
+                        <span className="text-muted-foreground">{itemConfig?.label || item.name}</span>
+                      </div>
+                      {item.value && (
+                        <span className="font-mono font-medium tabular-nums text-foreground">
+                          {item.value.toLocaleString()}
+                        </span>
+                      )}
+                    </div>
+                  </>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    );
+  },
+);
+ChartTooltipContent.displayName = "ChartTooltip";
+
+const ChartLegend = RechartsPrimitive.Legend;
+
+const ChartLegendContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> &
+    Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
+      hideIcon?: boolean;
+      nameKey?: string;
+    }
+>(({ className, hideIcon = false, payload, verticalAlign = "bottom", nameKey }, ref) => {
+  const { config } = useChart();
+
+  if (!payload?.length) {
+    return null;
+  }
+
+  return (
+    <div
+      ref={ref}
+      className={cn("flex items-center justify-center gap-4", verticalAlign === "top" ? "pb-3" : "pt-3", className)}
+    >
+      {payload.map((item) => {
+        const key = `${nameKey || item.dataKey || "value"}`;
+        const itemConfig = getPayloadConfigFromPayload(config, item, key);
+
+        return (
+          <div
+            key={item.value}
+            className={cn("flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground")}
+          >
+            {itemConfig?.icon && !hideIcon ? (
+              <itemConfig.icon />
+            ) : (
+              <div
+                className="h-2 w-2 shrink-0 rounded-[2px]"
+                style={{
+                  backgroundColor: item.color,
+                }}
+              />
+            )}
+            {itemConfig?.label}
+          </div>
+        );
+      })}
+    </div>
+  );
+});
+ChartLegendContent.displayName = "ChartLegend";
+
+// Helper to extract item config from a payload.
+function getPayloadConfigFromPayload(config: ChartConfig, payload: unknown, key: string) {
+  if (typeof payload !== "object" || payload === null) {
+    return undefined;
+  }
+
+  const payloadPayload =
+    "payload" in payload && typeof payload.payload === "object" && payload.payload !== null
+      ? payload.payload
+      : undefined;
+
+  let configLabelKey: string = key;
+
+  if (key in payload && typeof payload[key as keyof typeof payload] === "string") {
+    configLabelKey = payload[key as keyof typeof payload] as string;
+  } else if (
+    payloadPayload &&
+    key in payloadPayload &&
+    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
+  ) {
+    configLabelKey = payloadPayload[key as keyof typeof payloadPayload] as string;
+  }
+
+  return configLabelKey in config ? config[configLabelKey] : config[key as keyof typeof config];
+}
+
+export { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, ChartStyle };
--- a/src/components/ui/checkbox.tsx
+++ b/src/components/ui/checkbox.tsx
@@ -0,0 +1,26 @@
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { Check } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+      className,
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator className={cn("flex items-center justify-center text-current")}>
+      <Check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+
+export { Checkbox };
--- a/src/components/ui/collapsible.tsx
+++ b/src/components/ui/collapsible.tsx
@@ -0,0 +1,9 @@
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+
+const Collapsible = CollapsiblePrimitive.Root;
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
+
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };
--- a/src/components/ui/command.tsx
+++ b/src/components/ui/command.tsx
@@ -0,0 +1,132 @@
+import * as React from "react";
+import { type DialogProps } from "@radix-ui/react-dialog";
+import { Command as CommandPrimitive } from "cmdk";
+import { Search } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+import { Dialog, DialogContent } from "@/components/ui/dialog";
+
+const Command = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive
+    ref={ref}
+    className={cn(
+      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+      className,
+    )}
+    {...props}
+  />
+));
+Command.displayName = CommandPrimitive.displayName;
+
+interface CommandDialogProps extends DialogProps {}
+
+const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
+  return (
+    <Dialog {...props}>
+      <DialogContent className="overflow-hidden p-0 shadow-lg">
+        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+const CommandInput = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Input>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ className, ...props }, ref) => (
+  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
+    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <CommandPrimitive.Input
+      ref={ref}
+      className={cn(
+        "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    />
+  </div>
+));
+
+CommandInput.displayName = CommandPrimitive.Input.displayName;
+
+const CommandList = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.List
+    ref={ref}
+    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+    {...props}
+  />
+));
+
+CommandList.displayName = CommandPrimitive.List.displayName;
+
+const CommandEmpty = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Empty>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>((props, ref) => <CommandPrimitive.Empty ref={ref} className="py-6 text-center text-sm" {...props} />);
+
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
+
+const CommandGroup = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Group>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Group
+    ref={ref}
+    className={cn(
+      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+      className,
+    )}
+    {...props}
+  />
+));
+
+CommandGroup.displayName = CommandPrimitive.Group.displayName;
+
+const CommandSeparator = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Separator ref={ref} className={cn("-mx-1 h-px bg-border", className)} {...props} />
+));
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
+
+const CommandItem = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50",
+      className,
+    )}
+    {...props}
+  />
+));
+
+CommandItem.displayName = CommandPrimitive.Item.displayName;
+
+const CommandShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
+  return <span className={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)} {...props} />;
+};
+CommandShortcut.displayName = "CommandShortcut";
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+};
--- a/src/components/ui/context-menu.tsx
+++ b/src/components/ui/context-menu.tsx
@@ -0,0 +1,178 @@
+import * as React from "react";
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
+import { Check, ChevronRight, Circle } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const ContextMenu = ContextMenuPrimitive.Root;
+
+const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
+
+const ContextMenuGroup = ContextMenuPrimitive.Group;
+
+const ContextMenuPortal = ContextMenuPrimitive.Portal;
+
+const ContextMenuSub = ContextMenuPrimitive.Sub;
+
+const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
+
+const ContextMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <ContextMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[state=open]:bg-accent data-[state=open]:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
+      inset && "pl-8",
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </ContextMenuPrimitive.SubTrigger>
+));
+ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
+
+const ContextMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className,
+    )}
+    {...props}
+  />
+));
+ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
+
+const ContextMenuContent = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Portal>
+    <ContextMenuPrimitive.Content
+      ref={ref}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className,
+      )}
+      {...props}
+    />
+  </ContextMenuPrimitive.Portal>
+));
+ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
+
+const ContextMenuItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground",
+      inset && "pl-8",
+      className,
+    )}
+    {...props}
+  />
+));
+ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
+
+const ContextMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <ContextMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground",
+      className,
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.CheckboxItem>
+));
+ContextMenuCheckboxItem.displayName = ContextMenuPrimitive.CheckboxItem.displayName;
+
+const ContextMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <ContextMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground",
+      className,
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.RadioItem>
+));
+ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
+
+const ContextMenuLabel = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.Label
+    ref={ref}
+    className={cn("px-2 py-1.5 text-sm font-semibold text-foreground", inset && "pl-8", className)}
+    {...props}
+  />
+));
+ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
+
+const ContextMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Separator ref={ref} className={cn("-mx-1 my-1 h-px bg-border", className)} {...props} />
+));
+ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;
+
+const ContextMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
+  return <span className={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)} {...props} />;
+};
+ContextMenuShortcut.displayName = "ContextMenuShortcut";
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuGroup,
+  ContextMenuPortal,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuRadioGroup,
+};
--- a/src/components/ui/dialog.tsx
+++ b/src/components/ui/dialog.tsx
@@ -0,0 +1,95 @@
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const Dialog = DialogPrimitive.Root;
+
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogPortal = DialogPrimitive.Portal;
+
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className,
+    )}
+    {...props}
+  />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity data-[state=open]:bg-accent data-[state=open]:text-muted-foreground hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)} {...props} />
+);
+DialogHeader.displayName = "DialogHeader";
+
+const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)} {...props} />
+);
+DialogFooter.displayName = "DialogFooter";
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogClose,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+};
--- a/src/components/ui/drawer.tsx
+++ b/src/components/ui/drawer.tsx
@@ -0,0 +1,87 @@
+import * as React from "react";
+import { Drawer as DrawerPrimitive } from "vaul";
+
+import { cn } from "@/lib/utils";
+
+const Drawer = ({ shouldScaleBackground = true, ...props }: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
+  <DrawerPrimitive.Root shouldScaleBackground={shouldScaleBackground} {...props} />
+);
+Drawer.displayName = "Drawer";
+
+const DrawerTrigger = DrawerPrimitive.Trigger;
+
+const DrawerPortal = DrawerPrimitive.Portal;
+
+const DrawerClose = DrawerPrimitive.Close;
+
+const DrawerOverlay = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Overlay ref={ref} className={cn("fixed inset-0 z-50 bg-black/80", className)} {...props} />
+));
+DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
+
+const DrawerContent = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DrawerPortal>
+    <DrawerOverlay />
+    <DrawerPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
+        className,
+      )}
+      {...props}
+    >
+      <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
+      {children}
+    </DrawerPrimitive.Content>
+  </DrawerPortal>
+));
+DrawerContent.displayName = "DrawerContent";
+
+const DrawerHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)} {...props} />
+);
+DrawerHeader.displayName = "DrawerHeader";
+
+const DrawerFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("mt-auto flex flex-col gap-2 p-4", className)} {...props} />
+);
+DrawerFooter.displayName = "DrawerFooter";
+
+const DrawerTitle = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+));
+DrawerTitle.displayName = DrawerPrimitive.Title.displayName;
+
+const DrawerDescription = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Description ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
+));
+DrawerDescription.displayName = DrawerPrimitive.Description.displayName;
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+};
--- a/src/components/ui/dropdown-menu.tsx
+++ b/src/components/ui/dropdown-menu.tsx
@@ -0,0 +1,179 @@
+import * as React from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { Check, ChevronRight, Circle } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const DropdownMenu = DropdownMenuPrimitive.Root;
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[state=open]:bg-accent focus:bg-accent",
+      inset && "pl-8",
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </DropdownMenuPrimitive.SubTrigger>
+));
+DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className,
+    )}
+    {...props}
+  />
+));
+DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className,
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground",
+      inset && "pl-8",
+      className,
+    )}
+    {...props}
+  />
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground",
+      className,
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+));
+DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground",
+      className,
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
+    {...props}
+  />
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator ref={ref} className={cn("-mx-1 my-1 h-px bg-muted", className)} {...props} />
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+
+const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
+  return <span className={cn("ml-auto text-xs tracking-widest opacity-60", className)} {...props} />;
+};
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+};
--- a/src/components/ui/form.tsx
+++ b/src/components/ui/form.tsx
@@ -0,0 +1,129 @@
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { Slot } from "@radix-ui/react-slot";
+import { Controller, ControllerProps, FieldPath, FieldValues, FormProvider, useFormContext } from "react-hook-form";
+
+import { cn } from "@/lib/utils";
+import { Label } from "@/components/ui/label";
+
+const Form = FormProvider;
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
+  name: TName;
+};
+
+const FormFieldContext = React.createContext<FormFieldContextValue>({} as FormFieldContextValue);
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  );
+};
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext);
+  const itemContext = React.useContext(FormItemContext);
+  const { getFieldState, formState } = useFormContext();
+
+  const fieldState = getFieldState(fieldContext.name, formState);
+
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>");
+  }
+
+  const { id } = itemContext;
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  };
+};
+
+type FormItemContextValue = {
+  id: string;
+};
+
+const FormItemContext = React.createContext<FormItemContextValue>({} as FormItemContextValue);
+
+const FormItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    const id = React.useId();
+
+    return (
+      <FormItemContext.Provider value={{ id }}>
+        <div ref={ref} className={cn("space-y-2", className)} {...props} />
+      </FormItemContext.Provider>
+    );
+  },
+);
+FormItem.displayName = "FormItem";
+
+const FormLabel = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField();
+
+  return <Label ref={ref} className={cn(error && "text-destructive", className)} htmlFor={formItemId} {...props} />;
+});
+FormLabel.displayName = "FormLabel";
+
+const FormControl = React.forwardRef<React.ElementRef<typeof Slot>, React.ComponentPropsWithoutRef<typeof Slot>>(
+  ({ ...props }, ref) => {
+    const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+
+    return (
+      <Slot
+        ref={ref}
+        id={formItemId}
+        aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}
+        aria-invalid={!!error}
+        {...props}
+      />
+    );
+  },
+);
+FormControl.displayName = "FormControl";
+
+const FormDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => {
+    const { formDescriptionId } = useFormField();
+
+    return <p ref={ref} id={formDescriptionId} className={cn("text-sm text-muted-foreground", className)} {...props} />;
+  },
+);
+FormDescription.displayName = "FormDescription";
+
+const FormMessage = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, children, ...props }, ref) => {
+    const { error, formMessageId } = useFormField();
+    const body = error ? String(error?.message) : children;
+
+    if (!body) {
+      return null;
+    }
+
+    return (
+      <p ref={ref} id={formMessageId} className={cn("text-sm font-medium text-destructive", className)} {...props}>
+        {body}
+      </p>
+    );
+  },
+);
+FormMessage.displayName = "FormMessage";
+
+export { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField };
--- a/src/components/ui/hover-card.tsx
+++ b/src/components/ui/hover-card.tsx
@@ -0,0 +1,27 @@
+import * as React from "react";
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
+
+import { cn } from "@/lib/utils";
+
+const HoverCard = HoverCardPrimitive.Root;
+
+const HoverCardTrigger = HoverCardPrimitive.Trigger;
+
+const HoverCardContent = React.forwardRef<
+  React.ElementRef<typeof HoverCardPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <HoverCardPrimitive.Content
+    ref={ref}
+    align={align}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className,
+    )}
+    {...props}
+  />
+));
+HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
+
+export { HoverCard, HoverCardTrigger, HoverCardContent };
--- a/src/components/ui/input-otp.tsx
+++ b/src/components/ui/input-otp.tsx
@@ -0,0 +1,61 @@
+import * as React from "react";
+import { OTPInput, OTPInputContext } from "input-otp";
+import { Dot } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const InputOTP = React.forwardRef<React.ElementRef<typeof OTPInput>, React.ComponentPropsWithoutRef<typeof OTPInput>>(
+  ({ className, containerClassName, ...props }, ref) => (
+    <OTPInput
+      ref={ref}
+      containerClassName={cn("flex items-center gap-2 has-[:disabled]:opacity-50", containerClassName)}
+      className={cn("disabled:cursor-not-allowed", className)}
+      {...props}
+    />
+  ),
+);
+InputOTP.displayName = "InputOTP";
+
+const InputOTPGroup = React.forwardRef<React.ElementRef<"div">, React.ComponentPropsWithoutRef<"div">>(
+  ({ className, ...props }, ref) => <div ref={ref} className={cn("flex items-center", className)} {...props} />,
+);
+InputOTPGroup.displayName = "InputOTPGroup";
+
+const InputOTPSlot = React.forwardRef<
+  React.ElementRef<"div">,
+  React.ComponentPropsWithoutRef<"div"> & { index: number }
+>(({ index, className, ...props }, ref) => {
+  const inputOTPContext = React.useContext(OTPInputContext);
+  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index];
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "relative flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
+        isActive && "z-10 ring-2 ring-ring ring-offset-background",
+        className,
+      )}
+      {...props}
+    >
+      {char}
+      {hasFakeCaret && (
+        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <div className="animate-caret-blink h-4 w-px bg-foreground duration-1000" />
+        </div>
+      )}
+    </div>
+  );
+});
+InputOTPSlot.displayName = "InputOTPSlot";
+
+const InputOTPSeparator = React.forwardRef<React.ElementRef<"div">, React.ComponentPropsWithoutRef<"div">>(
+  ({ ...props }, ref) => (
+    <div ref={ref} role="separator" {...props}>
+      <Dot />
+    </div>
+  ),
+);
+InputOTPSeparator.displayName = "InputOTPSeparator";
+
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };
--- a/src/components/ui/input.tsx
+++ b/src/components/ui/input.tsx
@@ -0,0 +1,22 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          className,
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Input.displayName = "Input";
+
+export { Input };
--- a/src/components/ui/label.tsx
+++ b/src/components/ui/label.tsx
@@ -0,0 +1,17 @@
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const labelVariants = cva("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70");
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+export { Label };
--- a/src/components/ui/menubar.tsx
+++ b/src/components/ui/menubar.tsx
@@ -0,0 +1,207 @@
+import * as React from "react";
+import * as MenubarPrimitive from "@radix-ui/react-menubar";
+import { Check, ChevronRight, Circle } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const MenubarMenu = MenubarPrimitive.Menu;
+
+const MenubarGroup = MenubarPrimitive.Group;
+
+const MenubarPortal = MenubarPrimitive.Portal;
+
+const MenubarSub = MenubarPrimitive.Sub;
+
+const MenubarRadioGroup = MenubarPrimitive.RadioGroup;
+
+const Menubar = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Root
+    ref={ref}
+    className={cn("flex h-10 items-center space-x-1 rounded-md border bg-background p-1", className)}
+    {...props}
+  />
+));
+Menubar.displayName = MenubarPrimitive.Root.displayName;
+
+const MenubarTrigger = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none data-[state=open]:bg-accent data-[state=open]:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
+      className,
+    )}
+    {...props}
+  />
+));
+MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName;
+
+const MenubarSubTrigger = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {
+    inset?: boolean;
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <MenubarPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[state=open]:bg-accent data-[state=open]:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
+      inset && "pl-8",
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </MenubarPrimitive.SubTrigger>
+));
+MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName;
+
+const MenubarSubContent = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className,
+    )}
+    {...props}
+  />
+));
+MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName;
+
+const MenubarContent = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>
+>(({ className, align = "start", alignOffset = -4, sideOffset = 8, ...props }, ref) => (
+  <MenubarPrimitive.Portal>
+    <MenubarPrimitive.Content
+      ref={ref}
+      align={align}
+      alignOffset={alignOffset}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className,
+      )}
+      {...props}
+    />
+  </MenubarPrimitive.Portal>
+));
+MenubarContent.displayName = MenubarPrimitive.Content.displayName;
+
+const MenubarItem = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <MenubarPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground",
+      inset && "pl-8",
+      className,
+    )}
+    {...props}
+  />
+));
+MenubarItem.displayName = MenubarPrimitive.Item.displayName;
+
+const MenubarCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <MenubarPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground",
+      className,
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <MenubarPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </MenubarPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </MenubarPrimitive.CheckboxItem>
+));
+MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName;
+
+const MenubarRadioItem = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <MenubarPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground",
+      className,
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <MenubarPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </MenubarPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </MenubarPrimitive.RadioItem>
+));
+MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName;
+
+const MenubarLabel = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <MenubarPrimitive.Label
+    ref={ref}
+    className={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
+    {...props}
+  />
+));
+MenubarLabel.displayName = MenubarPrimitive.Label.displayName;
+
+const MenubarSeparator = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Separator ref={ref} className={cn("-mx-1 my-1 h-px bg-muted", className)} {...props} />
+));
+MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName;
+
+const MenubarShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
+  return <span className={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)} {...props} />;
+};
+MenubarShortcut.displayname = "MenubarShortcut";
+
+export {
+  Menubar,
+  MenubarMenu,
+  MenubarTrigger,
+  MenubarContent,
+  MenubarItem,
+  MenubarSeparator,
+  MenubarLabel,
+  MenubarCheckboxItem,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarPortal,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarGroup,
+  MenubarSub,
+  MenubarShortcut,
+};
--- a/src/components/ui/navigation-menu.tsx
+++ b/src/components/ui/navigation-menu.tsx
@@ -0,0 +1,120 @@
+import * as React from "react";
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
+import { cva } from "class-variance-authority";
+import { ChevronDown } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const NavigationMenu = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <NavigationMenuPrimitive.Root
+    ref={ref}
+    className={cn("relative z-10 flex max-w-max flex-1 items-center justify-center", className)}
+    {...props}
+  >
+    {children}
+    <NavigationMenuViewport />
+  </NavigationMenuPrimitive.Root>
+));
+NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName;
+
+const NavigationMenuList = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.List
+    ref={ref}
+    className={cn("group flex flex-1 list-none items-center justify-center space-x-1", className)}
+    {...props}
+  />
+));
+NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
+
+const NavigationMenuItem = NavigationMenuPrimitive.Item;
+
+const navigationMenuTriggerStyle = cva(
+  "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50",
+);
+
+const NavigationMenuTrigger = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <NavigationMenuPrimitive.Trigger
+    ref={ref}
+    className={cn(navigationMenuTriggerStyle(), "group", className)}
+    {...props}
+  >
+    {children}{" "}
+    <ChevronDown
+      className="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
+      aria-hidden="true"
+    />
+  </NavigationMenuPrimitive.Trigger>
+));
+NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName;
+
+const NavigationMenuContent = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.Content
+    ref={ref}
+    className={cn(
+      "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto",
+      className,
+    )}
+    {...props}
+  />
+));
+NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName;
+
+const NavigationMenuLink = NavigationMenuPrimitive.Link;
+
+const NavigationMenuViewport = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
+>(({ className, ...props }, ref) => (
+  <div className={cn("absolute left-0 top-full flex justify-center")}>
+    <NavigationMenuPrimitive.Viewport
+      className={cn(
+        "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
+        className,
+      )}
+      ref={ref}
+      {...props}
+    />
+  </div>
+));
+NavigationMenuViewport.displayName = NavigationMenuPrimitive.Viewport.displayName;
+
+const NavigationMenuIndicator = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.Indicator
+    ref={ref}
+    className={cn(
+      "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
+      className,
+    )}
+    {...props}
+  >
+    <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
+  </NavigationMenuPrimitive.Indicator>
+));
+NavigationMenuIndicator.displayName = NavigationMenuPrimitive.Indicator.displayName;
+
+export {
+  navigationMenuTriggerStyle,
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuContent,
+  NavigationMenuTrigger,
+  NavigationMenuLink,
+  NavigationMenuIndicator,
+  NavigationMenuViewport,
+};
--- a/src/components/ui/pagination.tsx
+++ b/src/components/ui/pagination.tsx
@@ -0,0 +1,81 @@
+import * as React from "react";
+import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+import { ButtonProps, buttonVariants } from "@/components/ui/button";
+
+const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
+  <nav
+    role="navigation"
+    aria-label="pagination"
+    className={cn("mx-auto flex w-full justify-center", className)}
+    {...props}
+  />
+);
+Pagination.displayName = "Pagination";
+
+const PaginationContent = React.forwardRef<HTMLUListElement, React.ComponentProps<"ul">>(
+  ({ className, ...props }, ref) => (
+    <ul ref={ref} className={cn("flex flex-row items-center gap-1", className)} {...props} />
+  ),
+);
+PaginationContent.displayName = "PaginationContent";
+
+const PaginationItem = React.forwardRef<HTMLLIElement, React.ComponentProps<"li">>(({ className, ...props }, ref) => (
+  <li ref={ref} className={cn("", className)} {...props} />
+));
+PaginationItem.displayName = "PaginationItem";
+
+type PaginationLinkProps = {
+  isActive?: boolean;
+} & Pick<ButtonProps, "size"> &
+  React.ComponentProps<"a">;
+
+const PaginationLink = ({ className, isActive, size = "icon", ...props }: PaginationLinkProps) => (
+  <a
+    aria-current={isActive ? "page" : undefined}
+    className={cn(
+      buttonVariants({
+        variant: isActive ? "outline" : "ghost",
+        size,
+      }),
+      className,
+    )}
+    {...props}
+  />
+);
+PaginationLink.displayName = "PaginationLink";
+
+const PaginationPrevious = ({ className, ...props }: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink aria-label="Go to previous page" size="default" className={cn("gap-1 pl-2.5", className)} {...props}>
+    <ChevronLeft className="h-4 w-4" />
+    <span>Previous</span>
+  </PaginationLink>
+);
+PaginationPrevious.displayName = "PaginationPrevious";
+
+const PaginationNext = ({ className, ...props }: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink aria-label="Go to next page" size="default" className={cn("gap-1 pr-2.5", className)} {...props}>
+    <span>Next</span>
+    <ChevronRight className="h-4 w-4" />
+  </PaginationLink>
+);
+PaginationNext.displayName = "PaginationNext";
+
+const PaginationEllipsis = ({ className, ...props }: React.ComponentProps<"span">) => (
+  <span aria-hidden className={cn("flex h-9 w-9 items-center justify-center", className)} {...props}>
+    <MoreHorizontal className="h-4 w-4" />
+    <span className="sr-only">More pages</span>
+  </span>
+);
+PaginationEllipsis.displayName = "PaginationEllipsis";
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+};
--- a/src/components/ui/popover.tsx
+++ b/src/components/ui/popover.tsx
@@ -0,0 +1,29 @@
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+
+import { cn } from "@/lib/utils";
+
+const Popover = PopoverPrimitive.Root;
+
+const PopoverTrigger = PopoverPrimitive.Trigger;
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className,
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+export { Popover, PopoverTrigger, PopoverContent };
--- a/src/components/ui/progress.tsx
+++ b/src/components/ui/progress.tsx
@@ -0,0 +1,23 @@
+import * as React from "react";
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+
+import { cn } from "@/lib/utils";
+
+const Progress = React.forwardRef<
+  React.ElementRef<typeof ProgressPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
+>(({ className, value, ...props }, ref) => (
+  <ProgressPrimitive.Root
+    ref={ref}
+    className={cn("relative h-4 w-full overflow-hidden rounded-full bg-secondary", className)}
+    {...props}
+  >
+    <ProgressPrimitive.Indicator
+      className="h-full w-full flex-1 bg-primary transition-all"
+      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+    />
+  </ProgressPrimitive.Root>
+));
+Progress.displayName = ProgressPrimitive.Root.displayName;
+
+export { Progress };
--- a/src/components/ui/radio-group.tsx
+++ b/src/components/ui/radio-group.tsx
@@ -0,0 +1,36 @@
+import * as React from "react";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { Circle } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const RadioGroup = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  return <RadioGroupPrimitive.Root className={cn("grid gap-2", className)} {...props} ref={ref} />;
+});
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
+
+const RadioGroupItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+        <Circle className="h-2.5 w-2.5 fill-current text-current" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  );
+});
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
+
+export { RadioGroup, RadioGroupItem };
--- a/src/components/ui/resizable.tsx
+++ b/src/components/ui/resizable.tsx
@@ -0,0 +1,37 @@
+import { GripVertical } from "lucide-react";
+import * as ResizablePrimitive from "react-resizable-panels";
+
+import { cn } from "@/lib/utils";
+
+const ResizablePanelGroup = ({ className, ...props }: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
+  <ResizablePrimitive.PanelGroup
+    className={cn("flex h-full w-full data-[panel-group-direction=vertical]:flex-col", className)}
+    {...props}
+  />
+);
+
+const ResizablePanel = ResizablePrimitive.Panel;
+
+const ResizableHandle = ({
+  withHandle,
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+  withHandle?: boolean;
+}) => (
+  <ResizablePrimitive.PanelResizeHandle
+    className={cn(
+      "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+      className,
+    )}
+    {...props}
+  >
+    {withHandle && (
+      <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
+        <GripVertical className="h-2.5 w-2.5" />
+      </div>
+    )}
+  </ResizablePrimitive.PanelResizeHandle>
+);
+
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle };
--- a/src/components/ui/scroll-area.tsx
+++ b/src/components/ui/scroll-area.tsx
@@ -0,0 +1,38 @@
+import * as React from "react";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+
+import { cn } from "@/lib/utils";
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root ref={ref} className={cn("relative overflow-hidden", className)} {...props}>
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">{children}</ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = "vertical", ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      className,
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+
+export { ScrollArea, ScrollBar };
--- a/src/components/ui/select.tsx
+++ b/src/components/ui/select.tsx
@@ -0,0 +1,143 @@
+import * as React from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { Check, ChevronDown, ChevronUp } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const Select = SelectPrimitive.Root;
+
+const SelectGroup = SelectPrimitive.Group;
+
+const SelectValue = SelectPrimitive.Value;
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn("flex cursor-default items-center justify-center py-1", className)}
+    {...props}
+  >
+    <ChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn("flex cursor-default items-center justify-center py-1", className)}
+    {...props}
+  >
+    <ChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+));
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        position === "popper" &&
+          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className,
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          "p-1",
+          position === "popper" &&
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label ref={ref} className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)} {...props} />
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground",
+      className,
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator ref={ref} className={cn("-mx-1 my-1 h-px bg-muted", className)} {...props} />
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+};
--- a/src/components/ui/separator.tsx
+++ b/src/components/ui/separator.tsx
@@ -0,0 +1,20 @@
+import * as React from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+
+import { cn } from "@/lib/utils";
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => (
+  <SeparatorPrimitive.Root
+    ref={ref}
+    decorative={decorative}
+    orientation={orientation}
+    className={cn("shrink-0 bg-border", orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]", className)}
+    {...props}
+  />
+));
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+
+export { Separator };
--- a/src/components/ui/sheet.tsx
+++ b/src/components/ui/sheet.tsx
@@ -0,0 +1,107 @@
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { cva, type VariantProps } from "class-variance-authority";
+import { X } from "lucide-react";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Sheet = SheetPrimitive.Root;
+
+const SheetTrigger = SheetPrimitive.Trigger;
+
+const SheetClose = SheetPrimitive.Close;
+
+const SheetPortal = SheetPrimitive.Portal;
+
+const SheetOverlay = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className,
+    )}
+    {...props}
+    ref={ref}
+  />
+));
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
+
+const sheetVariants = cva(
+  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+  {
+    variants: {
+      side: {
+        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom:
+          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+        right:
+          "inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+      },
+    },
+    defaultVariants: {
+      side: "right",
+    },
+  },
+);
+
+interface SheetContentProps
+  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+    VariantProps<typeof sheetVariants> {}
+
+const SheetContent = React.forwardRef<React.ElementRef<typeof SheetPrimitive.Content>, SheetContentProps>(
+  ({ side = "right", className, children, ...props }, ref) => (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Content ref={ref} className={cn(sheetVariants({ side }), className)} {...props}>
+        {children}
+        <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity data-[state=open]:bg-secondary hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none">
+          <X className="h-4 w-4" />
+          <span className="sr-only">Close</span>
+        </SheetPrimitive.Close>
+      </SheetPrimitive.Content>
+    </SheetPortal>
+  ),
+);
+SheetContent.displayName = SheetPrimitive.Content.displayName;
+
+const SheetHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...props} />
+);
+SheetHeader.displayName = "SheetHeader";
+
+const SheetFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)} {...props} />
+);
+SheetFooter.displayName = "SheetFooter";
+
+const SheetTitle = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Title ref={ref} className={cn("text-lg font-semibold text-foreground", className)} {...props} />
+));
+SheetTitle.displayName = SheetPrimitive.Title.displayName;
+
+const SheetDescription = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Description ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
+));
+SheetDescription.displayName = SheetPrimitive.Description.displayName;
+
+export {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetOverlay,
+  SheetPortal,
+  SheetTitle,
+  SheetTrigger,
+};
--- a/src/components/ui/sidebar.tsx
+++ b/src/components/ui/sidebar.tsx
@@ -0,0 +1,637 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { VariantProps, cva } from "class-variance-authority";
+import { PanelLeft } from "lucide-react";
+
+import { useIsMobile } from "@/hooks/use-mobile";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Separator } from "@/components/ui/separator";
+import { Sheet, SheetContent } from "@/components/ui/sheet";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+
+const SIDEBAR_COOKIE_NAME = "sidebar:state";
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+const SIDEBAR_WIDTH = "16rem";
+const SIDEBAR_WIDTH_MOBILE = "18rem";
+const SIDEBAR_WIDTH_ICON = "3rem";
+const SIDEBAR_KEYBOARD_SHORTCUT = "b";
+
+type SidebarContext = {
+  state: "expanded" | "collapsed";
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  openMobile: boolean;
+  setOpenMobile: (open: boolean) => void;
+  isMobile: boolean;
+  toggleSidebar: () => void;
+};
+
+const SidebarContext = React.createContext<SidebarContext | null>(null);
+
+function useSidebar() {
+  const context = React.useContext(SidebarContext);
+  if (!context) {
+    throw new Error("useSidebar must be used within a SidebarProvider.");
+  }
+
+  return context;
+}
+
+const SidebarProvider = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+  }
+>(({ defaultOpen = true, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }, ref) => {
+  const isMobile = useIsMobile();
+  const [openMobile, setOpenMobile] = React.useState(false);
+
+  // This is the internal state of the sidebar.
+  // We use openProp and setOpenProp for control from outside the component.
+  const [_open, _setOpen] = React.useState(defaultOpen);
+  const open = openProp ?? _open;
+  const setOpen = React.useCallback(
+    (value: boolean | ((value: boolean) => boolean)) => {
+      const openState = typeof value === "function" ? value(open) : value;
+      if (setOpenProp) {
+        setOpenProp(openState);
+      } else {
+        _setOpen(openState);
+      }
+
+      // This sets the cookie to keep the sidebar state.
+      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+    },
+    [setOpenProp, open],
+  );
+
+  // Helper to toggle the sidebar.
+  const toggleSidebar = React.useCallback(() => {
+    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);
+  }, [isMobile, setOpen, setOpenMobile]);
+
+  // Adds a keyboard shortcut to toggle the sidebar.
+  React.useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
+        event.preventDefault();
+        toggleSidebar();
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [toggleSidebar]);
+
+  // We add a state so that we can do data-state="expanded" or "collapsed".
+  // This makes it easier to style the sidebar with Tailwind classes.
+  const state = open ? "expanded" : "collapsed";
+
+  const contextValue = React.useMemo<SidebarContext>(
+    () => ({
+      state,
+      open,
+      setOpen,
+      isMobile,
+      openMobile,
+      setOpenMobile,
+      toggleSidebar,
+    }),
+    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar],
+  );
+
+  return (
+    <SidebarContext.Provider value={contextValue}>
+      <TooltipProvider delayDuration={0}>
+        <div
+          style={
+            {
+              "--sidebar-width": SIDEBAR_WIDTH,
+              "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+              ...style,
+            } as React.CSSProperties
+          }
+          className={cn("group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar", className)}
+          ref={ref}
+          {...props}
+        >
+          {children}
+        </div>
+      </TooltipProvider>
+    </SidebarContext.Provider>
+  );
+});
+SidebarProvider.displayName = "SidebarProvider";
+
+const Sidebar = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    side?: "left" | "right";
+    variant?: "sidebar" | "floating" | "inset";
+    collapsible?: "offcanvas" | "icon" | "none";
+  }
+>(({ side = "left", variant = "sidebar", collapsible = "offcanvas", className, children, ...props }, ref) => {
+  const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+
+  if (collapsible === "none") {
+    return (
+      <div
+        className={cn("flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground", className)}
+        ref={ref}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+
+  if (isMobile) {
+    return (
+      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+        <SheetContent
+          data-sidebar="sidebar"
+          data-mobile="true"
+          className="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
+          style={
+            {
+              "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
+            } as React.CSSProperties
+          }
+          side={side}
+        >
+          <div className="flex h-full w-full flex-col">{children}</div>
+        </SheetContent>
+      </Sheet>
+    );
+  }
+
+  return (
+    <div
+      ref={ref}
+      className="group peer hidden text-sidebar-foreground md:block"
+      data-state={state}
+      data-collapsible={state === "collapsed" ? collapsible : ""}
+      data-variant={variant}
+      data-side={side}
+    >
+      {/* This is what handles the sidebar gap on desktop */}
+      <div
+        className={cn(
+          "relative h-svh w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear",
+          "group-data-[collapsible=offcanvas]:w-0",
+          "group-data-[side=right]:rotate-180",
+          variant === "floating" || variant === "inset"
+            ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]"
+            : "group-data-[collapsible=icon]:w-[--sidebar-width-icon]",
+        )}
+      />
+      <div
+        className={cn(
+          "fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex",
+          side === "left"
+            ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
+            : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
+          // Adjust the padding for floating and inset variants.
+          variant === "floating" || variant === "inset"
+            ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]"
+            : "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l",
+          className,
+        )}
+        {...props}
+      >
+        <div
+          data-sidebar="sidebar"
+          className="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow"
+        >
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+});
+Sidebar.displayName = "Sidebar";
+
+const SidebarTrigger = React.forwardRef<React.ElementRef<typeof Button>, React.ComponentProps<typeof Button>>(
+  ({ className, onClick, ...props }, ref) => {
+    const { toggleSidebar } = useSidebar();
+
+    return (
+      <Button
+        ref={ref}
+        data-sidebar="trigger"
+        variant="ghost"
+        size="icon"
+        className={cn("h-7 w-7", className)}
+        onClick={(event) => {
+          onClick?.(event);
+          toggleSidebar();
+        }}
+        {...props}
+      >
+        <PanelLeft />
+        <span className="sr-only">Toggle Sidebar</span>
+      </Button>
+    );
+  },
+);
+SidebarTrigger.displayName = "SidebarTrigger";
+
+const SidebarRail = React.forwardRef<HTMLButtonElement, React.ComponentProps<"button">>(
+  ({ className, ...props }, ref) => {
+    const { toggleSidebar } = useSidebar();
+
+    return (
+      <button
+        ref={ref}
+        data-sidebar="rail"
+        aria-label="Toggle Sidebar"
+        tabIndex={-1}
+        onClick={toggleSidebar}
+        title="Toggle Sidebar"
+        className={cn(
+          "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] group-data-[side=left]:-right-4 group-data-[side=right]:left-0 hover:after:bg-sidebar-border sm:flex",
+          "[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize",
+          "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+          "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar",
+          "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+          "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);
+SidebarRail.displayName = "SidebarRail";
+
+const SidebarInset = React.forwardRef<HTMLDivElement, React.ComponentProps<"main">>(({ className, ...props }, ref) => {
+  return (
+    <main
+      ref={ref}
+      className={cn(
+        "relative flex min-h-svh flex-1 flex-col bg-background",
+        "peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+SidebarInset.displayName = "SidebarInset";
+
+const SidebarInput = React.forwardRef<React.ElementRef<typeof Input>, React.ComponentProps<typeof Input>>(
+  ({ className, ...props }, ref) => {
+    return (
+      <Input
+        ref={ref}
+        data-sidebar="input"
+        className={cn(
+          "h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);
+SidebarInput.displayName = "SidebarInput";
+
+const SidebarHeader = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>(({ className, ...props }, ref) => {
+  return <div ref={ref} data-sidebar="header" className={cn("flex flex-col gap-2 p-2", className)} {...props} />;
+});
+SidebarHeader.displayName = "SidebarHeader";
+
+const SidebarFooter = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>(({ className, ...props }, ref) => {
+  return <div ref={ref} data-sidebar="footer" className={cn("flex flex-col gap-2 p-2", className)} {...props} />;
+});
+SidebarFooter.displayName = "SidebarFooter";
+
+const SidebarSeparator = React.forwardRef<React.ElementRef<typeof Separator>, React.ComponentProps<typeof Separator>>(
+  ({ className, ...props }, ref) => {
+    return (
+      <Separator
+        ref={ref}
+        data-sidebar="separator"
+        className={cn("mx-2 w-auto bg-sidebar-border", className)}
+        {...props}
+      />
+    );
+  },
+);
+SidebarSeparator.displayName = "SidebarSeparator";
+
+const SidebarContent = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-sidebar="content"
+      className={cn(
+        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+SidebarContent.displayName = "SidebarContent";
+
+const SidebarGroup = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-sidebar="group"
+      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
+      {...props}
+    />
+  );
+});
+SidebarGroup.displayName = "SidebarGroup";
+
+const SidebarGroupLabel = React.forwardRef<HTMLDivElement, React.ComponentProps<"div"> & { asChild?: boolean }>(
+  ({ className, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "div";
+
+    return (
+      <Comp
+        ref={ref}
+        data-sidebar="group-label"
+        className={cn(
+          "flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+          "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);
+SidebarGroupLabel.displayName = "SidebarGroupLabel";
+
+const SidebarGroupAction = React.forwardRef<HTMLButtonElement, React.ComponentProps<"button"> & { asChild?: boolean }>(
+  ({ className, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+
+    return (
+      <Comp
+        ref={ref}
+        data-sidebar="group-action"
+        className={cn(
+          "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+          // Increases the hit area of the button on mobile.
+          "after:absolute after:-inset-2 after:md:hidden",
+          "group-data-[collapsible=icon]:hidden",
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);
+SidebarGroupAction.displayName = "SidebarGroupAction";
+
+const SidebarGroupContent = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} data-sidebar="group-content" className={cn("w-full text-sm", className)} {...props} />
+  ),
+);
+SidebarGroupContent.displayName = "SidebarGroupContent";
+
+const SidebarMenu = React.forwardRef<HTMLUListElement, React.ComponentProps<"ul">>(({ className, ...props }, ref) => (
+  <ul ref={ref} data-sidebar="menu" className={cn("flex w-full min-w-0 flex-col gap-1", className)} {...props} />
+));
+SidebarMenu.displayName = "SidebarMenu";
+
+const SidebarMenuItem = React.forwardRef<HTMLLIElement, React.ComponentProps<"li">>(({ className, ...props }, ref) => (
+  <li ref={ref} data-sidebar="menu-item" className={cn("group/menu-item relative", className)} {...props} />
+));
+SidebarMenuItem.displayName = "SidebarMenuItem";
+
+const sidebarMenuButtonVariants = cva(
+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+        outline:
+          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+      },
+      size: {
+        default: "h-8 text-sm",
+        sm: "h-7 text-xs",
+        lg: "h-12 text-sm group-data-[collapsible=icon]:!p-0",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+const SidebarMenuButton = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button"> & {
+    asChild?: boolean;
+    isActive?: boolean;
+    tooltip?: string | React.ComponentProps<typeof TooltipContent>;
+  } & VariantProps<typeof sidebarMenuButtonVariants>
+>(({ asChild = false, isActive = false, variant = "default", size = "default", tooltip, className, ...props }, ref) => {
+  const Comp = asChild ? Slot : "button";
+  const { isMobile, state } = useSidebar();
+
+  const button = (
+    <Comp
+      ref={ref}
+      data-sidebar="menu-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
+      {...props}
+    />
+  );
+
+  if (!tooltip) {
+    return button;
+  }
+
+  if (typeof tooltip === "string") {
+    tooltip = {
+      children: tooltip,
+    };
+  }
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>{button}</TooltipTrigger>
+      <TooltipContent side="right" align="center" hidden={state !== "collapsed" || isMobile} {...tooltip} />
+    </Tooltip>
+  );
+});
+SidebarMenuButton.displayName = "SidebarMenuButton";
+
+const SidebarMenuAction = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button"> & {
+    asChild?: boolean;
+    showOnHover?: boolean;
+  }
+>(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : "button";
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="menu-action"
+      className={cn(
+        "absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform peer-hover/menu-button:text-sidebar-accent-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:absolute after:-inset-2 after:md:hidden",
+        "peer-data-[size=sm]/menu-button:top-1",
+        "peer-data-[size=default]/menu-button:top-1.5",
+        "peer-data-[size=lg]/menu-button:top-2.5",
+        "group-data-[collapsible=icon]:hidden",
+        showOnHover &&
+          "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+SidebarMenuAction.displayName = "SidebarMenuAction";
+
+const SidebarMenuBadge = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-sidebar="menu-badge"
+      className={cn(
+        "pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground",
+        "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
+        "peer-data-[size=sm]/menu-button:top-1",
+        "peer-data-[size=default]/menu-button:top-1.5",
+        "peer-data-[size=lg]/menu-button:top-2.5",
+        "group-data-[collapsible=icon]:hidden",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+SidebarMenuBadge.displayName = "SidebarMenuBadge";
+
+const SidebarMenuSkeleton = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    showIcon?: boolean;
+  }
+>(({ className, showIcon = false, ...props }, ref) => {
+  // Random width between 50 to 90%.
+  const width = React.useMemo(() => {
+    return `${Math.floor(Math.random() * 40) + 50}%`;
+  }, []);
+
+  return (
+    <div
+      ref={ref}
+      data-sidebar="menu-skeleton"
+      className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
+      {...props}
+    >
+      {showIcon && <Skeleton className="size-4 rounded-md" data-sidebar="menu-skeleton-icon" />}
+      <Skeleton
+        className="h-4 max-w-[--skeleton-width] flex-1"
+        data-sidebar="menu-skeleton-text"
+        style={
+          {
+            "--skeleton-width": width,
+          } as React.CSSProperties
+        }
+      />
+    </div>
+  );
+});
+SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton";
+
+const SidebarMenuSub = React.forwardRef<HTMLUListElement, React.ComponentProps<"ul">>(
+  ({ className, ...props }, ref) => (
+    <ul
+      ref={ref}
+      data-sidebar="menu-sub"
+      className={cn(
+        "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5",
+        "group-data-[collapsible=icon]:hidden",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+SidebarMenuSub.displayName = "SidebarMenuSub";
+
+const SidebarMenuSubItem = React.forwardRef<HTMLLIElement, React.ComponentProps<"li">>(({ ...props }, ref) => (
+  <li ref={ref} {...props} />
+));
+SidebarMenuSubItem.displayName = "SidebarMenuSubItem";
+
+const SidebarMenuSubButton = React.forwardRef<
+  HTMLAnchorElement,
+  React.ComponentProps<"a"> & {
+    asChild?: boolean;
+    size?: "sm" | "md";
+    isActive?: boolean;
+  }
+>(({ asChild = false, size = "md", isActive, className, ...props }, ref) => {
+  const Comp = asChild ? Slot : "a";
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="menu-sub-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(
+        "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
+        "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
+        size === "sm" && "text-xs",
+        size === "md" && "text-sm",
+        "group-data-[collapsible=icon]:hidden",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+SidebarMenuSubButton.displayName = "SidebarMenuSubButton";
+
+export {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarSeparator,
+  SidebarTrigger,
+  useSidebar,
+};
--- a/src/components/ui/skeleton.tsx
+++ b/src/components/ui/skeleton.tsx
@@ -0,0 +1,7 @@
+import { cn } from "@/lib/utils";
+
+function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("animate-pulse rounded-md bg-muted", className)} {...props} />;
+}
+
+export { Skeleton };
--- a/src/components/ui/slider.tsx
+++ b/src/components/ui/slider.tsx
@@ -0,0 +1,23 @@
+import * as React from "react";
+import * as SliderPrimitive from "@radix-ui/react-slider";
+
+import { cn } from "@/lib/utils";
+
+const Slider = React.forwardRef<
+  React.ElementRef<typeof SliderPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <SliderPrimitive.Root
+    ref={ref}
+    className={cn("relative flex w-full touch-none select-none items-center", className)}
+    {...props}
+  >
+    <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
+      <SliderPrimitive.Range className="absolute h-full bg-primary" />
+    </SliderPrimitive.Track>
+    <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
+  </SliderPrimitive.Root>
+));
+Slider.displayName = SliderPrimitive.Root.displayName;
+
+export { Slider };
--- a/src/components/ui/sonner.tsx
+++ b/src/components/ui/sonner.tsx
@@ -0,0 +1,27 @@
+import { useTheme } from "next-themes";
+import { Toaster as Sonner, toast } from "sonner";
+
+type ToasterProps = React.ComponentProps<typeof Sonner>;
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme();
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      toastOptions={{
+        classNames: {
+          toast:
+            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+          description: "group-[.toast]:text-muted-foreground",
+          actionButton: "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+          cancelButton: "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+        },
+      }}
+      {...props}
+    />
+  );
+};
+
+export { Toaster, toast };
--- a/src/components/ui/switch.tsx
+++ b/src/components/ui/switch.tsx
@@ -0,0 +1,27 @@
+import * as React from "react";
+import * as SwitchPrimitives from "@radix-ui/react-switch";
+
+import { cn } from "@/lib/utils";
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50",
+      className,
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",
+      )}
+    />
+  </SwitchPrimitives.Root>
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
+
+export { Switch };
--- a/src/components/ui/table.tsx
+++ b/src/components/ui/table.tsx
@@ -0,0 +1,72 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
+  ({ className, ...props }, ref) => (
+    <div className="relative w-full overflow-auto">
+      <table ref={ref} className={cn("w-full caption-bottom text-sm", className)} {...props} />
+    </div>
+  ),
+);
+Table.displayName = "Table";
+
+const TableHeader = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
+  ({ className, ...props }, ref) => <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />,
+);
+TableHeader.displayName = "TableHeader";
+
+const TableBody = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
+  ({ className, ...props }, ref) => (
+    <tbody ref={ref} className={cn("[&_tr:last-child]:border-0", className)} {...props} />
+  ),
+);
+TableBody.displayName = "TableBody";
+
+const TableFooter = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
+  ({ className, ...props }, ref) => (
+    <tfoot ref={ref} className={cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className)} {...props} />
+  ),
+);
+TableFooter.displayName = "TableFooter";
+
+const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
+  ({ className, ...props }, ref) => (
+    <tr
+      ref={ref}
+      className={cn("border-b transition-colors data-[state=selected]:bg-muted hover:bg-muted/50", className)}
+      {...props}
+    />
+  ),
+);
+TableRow.displayName = "TableRow";
+
+const TableHead = React.forwardRef<HTMLTableCellElement, React.ThHTMLAttributes<HTMLTableCellElement>>(
+  ({ className, ...props }, ref) => (
+    <th
+      ref={ref}
+      className={cn(
+        "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+TableHead.displayName = "TableHead";
+
+const TableCell = React.forwardRef<HTMLTableCellElement, React.TdHTMLAttributes<HTMLTableCellElement>>(
+  ({ className, ...props }, ref) => (
+    <td ref={ref} className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)} {...props} />
+  ),
+);
+TableCell.displayName = "TableCell";
+
+const TableCaption = React.forwardRef<HTMLTableCaptionElement, React.HTMLAttributes<HTMLTableCaptionElement>>(
+  ({ className, ...props }, ref) => (
+    <caption ref={ref} className={cn("mt-4 text-sm text-muted-foreground", className)} {...props} />
+  ),
+);
+TableCaption.displayName = "TableCaption";
+
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };
--- a/src/components/ui/tabs.tsx
+++ b/src/components/ui/tabs.tsx
@@ -0,0 +1,53 @@
+import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+
+import { cn } from "@/lib/utils";
+
+const Tabs = TabsPrimitive.Root;
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+      className,
+    )}
+    {...props}
+  />
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+      className,
+    )}
+    {...props}
+  />
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className,
+    )}
+    {...props}
+  />
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };
--- a/src/components/ui/textarea.tsx
+++ b/src/components/ui/textarea.tsx
@@ -0,0 +1,21 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({ className, ...props }, ref) => {
+  return (
+    <textarea
+      className={cn(
+        "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+Textarea.displayName = "Textarea";
+
+export { Textarea };
--- a/src/components/ui/toast.tsx
+++ b/src/components/ui/toast.tsx
@@ -0,0 +1,111 @@
+import * as React from "react";
+import * as ToastPrimitives from "@radix-ui/react-toast";
+import { cva, type VariantProps } from "class-variance-authority";
+import { X } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const ToastProvider = ToastPrimitives.Provider;
+
+const ToastViewport = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Viewport>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Viewport
+    ref={ref}
+    className={cn(
+      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
+      className,
+    )}
+    {...props}
+  />
+));
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
+
+const toastVariants = cva(
+  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
+  {
+    variants: {
+      variant: {
+        default: "border bg-background text-foreground",
+        destructive: "destructive group border-destructive bg-destructive text-destructive-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+const Toast = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> & VariantProps<typeof toastVariants>
+>(({ className, variant, ...props }, ref) => {
+  return <ToastPrimitives.Root ref={ref} className={cn(toastVariants({ variant }), className)} {...props} />;
+});
+Toast.displayName = ToastPrimitives.Root.displayName;
+
+const ToastAction = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Action>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Action
+    ref={ref}
+    className={cn(
+      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors group-[.destructive]:border-muted/40 hover:bg-secondary group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 group-[.destructive]:focus:ring-destructive disabled:pointer-events-none disabled:opacity-50",
+      className,
+    )}
+    {...props}
+  />
+));
+ToastAction.displayName = ToastPrimitives.Action.displayName;
+
+const ToastClose = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Close>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Close
+    ref={ref}
+    className={cn(
+      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity group-hover:opacity-100 group-[.destructive]:text-red-300 hover:text-foreground group-[.destructive]:hover:text-red-50 focus:opacity-100 focus:outline-none focus:ring-2 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
+      className,
+    )}
+    toast-close=""
+    {...props}
+  >
+    <X className="h-4 w-4" />
+  </ToastPrimitives.Close>
+));
+ToastClose.displayName = ToastPrimitives.Close.displayName;
+
+const ToastTitle = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Title>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Title ref={ref} className={cn("text-sm font-semibold", className)} {...props} />
+));
+ToastTitle.displayName = ToastPrimitives.Title.displayName;
+
+const ToastDescription = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Description>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Description ref={ref} className={cn("text-sm opacity-90", className)} {...props} />
+));
+ToastDescription.displayName = ToastPrimitives.Description.displayName;
+
+type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;
+
+type ToastActionElement = React.ReactElement<typeof ToastAction>;
+
+export {
+  type ToastProps,
+  type ToastActionElement,
+  ToastProvider,
+  ToastViewport,
+  Toast,
+  ToastTitle,
+  ToastDescription,
+  ToastClose,
+  ToastAction,
+};
--- a/src/components/ui/toaster.tsx
+++ b/src/components/ui/toaster.tsx
@@ -0,0 +1,24 @@
+import { useToast } from "@/hooks/use-toast";
+import { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from "@/components/ui/toast";
+
+export function Toaster() {
+  const { toasts } = useToast();
+
+  return (
+    <ToastProvider>
+      {toasts.map(function ({ id, title, description, action, ...props }) {
+        return (
+          <Toast key={id} {...props}>
+            <div className="grid gap-1">
+              {title && <ToastTitle>{title}</ToastTitle>}
+              {description && <ToastDescription>{description}</ToastDescription>}
+            </div>
+            {action}
+            <ToastClose />
+          </Toast>
+        );
+      })}
+      <ToastViewport />
+    </ToastProvider>
+  );
+}
--- a/src/components/ui/toggle-group.tsx
+++ b/src/components/ui/toggle-group.tsx
@@ -0,0 +1,49 @@
+import * as React from "react";
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
+import { type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+import { toggleVariants } from "@/components/ui/toggle";
+
+const ToggleGroupContext = React.createContext<VariantProps<typeof toggleVariants>>({
+  size: "default",
+  variant: "default",
+});
+
+const ToggleGroup = React.forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> & VariantProps<typeof toggleVariants>
+>(({ className, variant, size, children, ...props }, ref) => (
+  <ToggleGroupPrimitive.Root ref={ref} className={cn("flex items-center justify-center gap-1", className)} {...props}>
+    <ToggleGroupContext.Provider value={{ variant, size }}>{children}</ToggleGroupContext.Provider>
+  </ToggleGroupPrimitive.Root>
+));
+
+ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
+
+const ToggleGroupItem = React.forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> & VariantProps<typeof toggleVariants>
+>(({ className, children, variant, size, ...props }, ref) => {
+  const context = React.useContext(ToggleGroupContext);
+
+  return (
+    <ToggleGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size,
+        }),
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </ToggleGroupPrimitive.Item>
+  );
+});
+
+ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
+
+export { ToggleGroup, ToggleGroupItem };
--- a/src/components/ui/toggle.tsx
+++ b/src/components/ui/toggle.tsx
@@ -0,0 +1,37 @@
+import * as React from "react";
+import * as TogglePrimitive from "@radix-ui/react-toggle";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const toggleVariants = cva(
+  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline: "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
+      },
+      size: {
+        default: "h-10 px-3",
+        sm: "h-9 px-2.5",
+        lg: "h-11 px-5",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+const Toggle = React.forwardRef<
+  React.ElementRef<typeof TogglePrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>
+>(({ className, variant, size, ...props }, ref) => (
+  <TogglePrimitive.Root ref={ref} className={cn(toggleVariants({ variant, size, className }))} {...props} />
+));
+
+Toggle.displayName = TogglePrimitive.Root.displayName;
+
+export { Toggle, toggleVariants };
--- a/src/components/ui/tooltip.tsx
+++ b/src/components/ui/tooltip.tsx
@@ -0,0 +1,28 @@
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+
+import { cn } from "@/lib/utils";
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+const Tooltip = TooltipPrimitive.Root;
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className,
+    )}
+    {...props}
+  />
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
--- a/src/components/ui/use-toast.ts
+++ b/src/components/ui/use-toast.ts
@@ -0,0 +1,3 @@
+import { useToast, toast } from "@/hooks/use-toast";
+
+export { useToast, toast };
--- a/src/hooks/use-mobile.tsx
+++ b/src/hooks/use-mobile.tsx
@@ -0,0 +1,19 @@
+import * as React from "react";
+
+const MOBILE_BREAKPOINT = 768;
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined);
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    mql.addEventListener("change", onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+
+  return !!isMobile;
+}
--- a/src/hooks/use-toast.ts
+++ b/src/hooks/use-toast.ts
@@ -0,0 +1,186 @@
+import * as React from "react";
+
+import type { ToastActionElement, ToastProps } from "@/components/ui/toast";
+
+const TOAST_LIMIT = 1;
+const TOAST_REMOVE_DELAY = 1000000;
+
+type ToasterToast = ToastProps & {
+  id: string;
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  action?: ToastActionElement;
+};
+
+const actionTypes = {
+  ADD_TOAST: "ADD_TOAST",
+  UPDATE_TOAST: "UPDATE_TOAST",
+  DISMISS_TOAST: "DISMISS_TOAST",
+  REMOVE_TOAST: "REMOVE_TOAST",
+} as const;
+
+let count = 0;
+
+function genId() {
+  count = (count + 1) % Number.MAX_SAFE_INTEGER;
+  return count.toString();
+}
+
+type ActionType = typeof actionTypes;
+
+type Action =
+  | {
+      type: ActionType["ADD_TOAST"];
+      toast: ToasterToast;
+    }
+  | {
+      type: ActionType["UPDATE_TOAST"];
+      toast: Partial<ToasterToast>;
+    }
+  | {
+      type: ActionType["DISMISS_TOAST"];
+      toastId?: ToasterToast["id"];
+    }
+  | {
+      type: ActionType["REMOVE_TOAST"];
+      toastId?: ToasterToast["id"];
+    };
+
+interface State {
+  toasts: ToasterToast[];
+}
+
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();
+
+const addToRemoveQueue = (toastId: string) => {
+  if (toastTimeouts.has(toastId)) {
+    return;
+  }
+
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId);
+    dispatch({
+      type: "REMOVE_TOAST",
+      toastId: toastId,
+    });
+  }, TOAST_REMOVE_DELAY);
+
+  toastTimeouts.set(toastId, timeout);
+};
+
+export const reducer = (state: State, action: Action): State => {
+  switch (action.type) {
+    case "ADD_TOAST":
+      return {
+        ...state,
+        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
+      };
+
+    case "UPDATE_TOAST":
+      return {
+        ...state,
+        toasts: state.toasts.map((t) => (t.id === action.toast.id ? { ...t, ...action.toast } : t)),
+      };
+
+    case "DISMISS_TOAST": {
+      const { toastId } = action;
+
+      // ! Side effects ! - This could be extracted into a dismissToast() action,
+      // but I'll keep it here for simplicity
+      if (toastId) {
+        addToRemoveQueue(toastId);
+      } else {
+        state.toasts.forEach((toast) => {
+          addToRemoveQueue(toast.id);
+        });
+      }
+
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === toastId || toastId === undefined
+            ? {
+                ...t,
+                open: false,
+              }
+            : t,
+        ),
+      };
+    }
+    case "REMOVE_TOAST":
+      if (action.toastId === undefined) {
+        return {
+          ...state,
+          toasts: [],
+        };
+      }
+      return {
+        ...state,
+        toasts: state.toasts.filter((t) => t.id !== action.toastId),
+      };
+  }
+};
+
+const listeners: Array<(state: State) => void> = [];
+
+let memoryState: State = { toasts: [] };
+
+function dispatch(action: Action) {
+  memoryState = reducer(memoryState, action);
+  listeners.forEach((listener) => {
+    listener(memoryState);
+  });
+}
+
+type Toast = Omit<ToasterToast, "id">;
+
+function toast({ ...props }: Toast) {
+  const id = genId();
+
+  const update = (props: ToasterToast) =>
+    dispatch({
+      type: "UPDATE_TOAST",
+      toast: { ...props, id },
+    });
+  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id });
+
+  dispatch({
+    type: "ADD_TOAST",
+    toast: {
+      ...props,
+      id,
+      open: true,
+      onOpenChange: (open) => {
+        if (!open) dismiss();
+      },
+    },
+  });
+
+  return {
+    id: id,
+    dismiss,
+    update,
+  };
+}
+
+function useToast() {
+  const [state, setState] = React.useState<State>(memoryState);
+
+  React.useEffect(() => {
+    listeners.push(setState);
+    return () => {
+      const index = listeners.indexOf(setState);
+      if (index > -1) {
+        listeners.splice(index, 1);
+      }
+    };
+  }, [state]);
+
+  return {
+    ...state,
+    toast,
+    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
+  };
+}
+
+export { useToast, toast };
--- a/src/hooks/useSSE.tsx
+++ b/src/hooks/useSSE.tsx
@@ -0,0 +1,128 @@
+import { useEffect, useRef, useCallback } from 'react';
+
+type SSEEventHandler = (event: any) => void;
+
+export const useSSE = (onEvent: SSEEventHandler) => {
+    const eventSourceRef = useRef<EventSource | null>(null);
+    const reconnectTimeoutRef = useRef<NodeJS.Timeout>();
+    const reconnectAttemptsRef = useRef(0);
+    const maxReconnectAttempts = 5;
+    const isConnectedRef = useRef(false);
+
+    const connect = useCallback(() => {
+        // Récupérer le token ET décoder pour obtenir l'userId
+        const token = localStorage.getItem('token');
+        if (!token) {
+            console.warn('⚠️ Pas de token, connexion SSE annulée');
+            return;
+        }
+
+        // Décoder le token pour extraire l'userId
+        let userId: string | null = null;
+        try {
+            const payload = JSON.parse(atob(token.split('.')[1]));
+            userId = payload.id;
+            console.log('🔓 UserId extrait du token:', userId);
+        } catch (error) {
+            console.error('❌ Erreur décodage token:', error);
+            return;
+        }
+
+        if (!userId) {
+            console.error('❌ Pas d\'userId dans le token');
+            return;
+        }
+
+        // Éviter les connexions multiples
+        if (isConnectedRef.current) {
+            console.log('🔄 Connexion SSE déjà active');
+            return;
+        }
+
+        console.log(`🔔 Connexion au serveur SSE... (tentative ${reconnectAttemptsRef.current + 1})`);
+
+        // ✅ CORRECTION : Passer userid au lieu de token
+        const eventSource = new EventSource(
+            `/api/events?userid=${userId}`
+        );
+
+        eventSourceRef.current = eventSource;
+        isConnectedRef.current = true;
+
+        // Gestion des messages
+        eventSource.onmessage = (event) => {
+            try {
+                const data = JSON.parse(event.data);
+
+                // Ignorer les pings
+                if (data.type === 'ping') {
+                    console.log('💓 Heartbeat SSE');
+                    return;
+                }
+
+                console.log('📩 Événement SSE reçu:', data);
+
+                if (onEvent) {
+                    onEvent(data);
+                }
+            } catch (error) {
+                console.error('❌ Erreur parsing SSE:', error);
+            }
+        };
+
+        // Gestion de la connexion
+        eventSource.onopen = () => {
+            console.log('✅ Connexion SSE établie');
+            isConnectedRef.current = true;
+            reconnectAttemptsRef.current = 0; // Reset compteur
+        };
+
+        // Gestion des erreurs
+        eventSource.onerror = (error) => {
+            console.error('❌ Erreur SSE:', error);
+            isConnectedRef.current = false;
+
+            // Fermer proprement
+            if (eventSourceRef.current) {
+                eventSourceRef.current.close();
+                eventSourceRef.current = null;
+            }
+
+            // Limiter les tentatives de reconnexion
+            if (reconnectAttemptsRef.current < maxReconnectAttempts) {
+                const delay = Math.min(1000 * Math.pow(2, reconnectAttemptsRef.current), 30000);
+                console.log(`🔌 Tentative de reconnexion dans ${delay / 1000}s...`);
+
+                reconnectTimeoutRef.current = setTimeout(() => {
+                    reconnectAttemptsRef.current++;
+                    connect();
+                }, delay);
+            } else {
+                console.error('❌ Nombre maximum de tentatives de reconnexion atteint');
+            }
+        };
+    }, [onEvent]);
+
+    useEffect(() => {
+        connect();
+
+        // Nettoyage à la déconnexion
+        return () => {
+            console.log('🔌 Fermeture connexion SSE');
+
+            if (reconnectTimeoutRef.current) {
+                clearTimeout(reconnectTimeoutRef.current);
+            }
+
+            if (eventSourceRef.current) {
+                eventSourceRef.current.close();
+                eventSourceRef.current = null;
+            }
+
+            isConnectedRef.current = false;
+            reconnectAttemptsRef.current = 0;
+        };
+    }, [connect]);
+
+    return eventSourceRef;
+};
--- a/src/index.css
+++ b/src/index.css
@@ -0,0 +1,111 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Definition of the design system. All colors, gradients, fonts, etc should be defined here. 
+All colors MUST be HSL.
+*/
+
+@layer base {
+  :root {
+    --background: 220 25% 97%;
+    --foreground: 222 47% 11%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 222 47% 11%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 222 47% 11%;
+
+    --primary: 243 75% 59%;
+    --primary-foreground: 0 0% 100%;
+    --primary-glow: 250 85% 68%;
+
+    --secondary: 220 17% 93%;
+    --secondary-foreground: 222 47% 11%;
+
+    --muted: 220 17% 93%;
+    --muted-foreground: 220 9% 46%;
+
+    --accent: 262 83% 65%;
+    --accent-foreground: 0 0% 100%;
+
+    --destructive: 0 84% 60%;
+    --destructive-foreground: 0 0% 100%;
+
+    --success: 142 71% 45%;
+    --success-foreground: 0 0% 100%;
+
+    --warning: 38 92% 50%;
+    --warning-foreground: 0 0% 100%;
+
+    --border: 220 17% 88%;
+    --input: 220 17% 88%;
+    --ring: 243 75% 59%;
+
+    --radius: 0.75rem;
+
+    --gradient-primary: linear-gradient(135deg, hsl(243 75% 59%), hsl(262 83% 65%));
+    --gradient-subtle: linear-gradient(180deg, hsl(220 25% 97%), hsl(220 30% 99%));
+    --gradient-card: linear-gradient(145deg, hsl(0 0% 100%), hsl(220 25% 99%));
+    
+    --shadow-elegant: 0 4px 20px -2px hsl(243 75% 59% / 0.12);
+    --shadow-card: 0 2px 8px -1px hsl(220 17% 88% / 0.3);
+    
+    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .dark {
+    --background: 222 47% 7%;
+    --foreground: 210 40% 98%;
+
+    --card: 222 47% 9%;
+    --card-foreground: 210 40% 98%;
+
+    --popover: 222 47% 9%;
+    --popover-foreground: 210 40% 98%;
+
+    --primary: 243 75% 59%;
+    --primary-foreground: 0 0% 100%;
+    --primary-glow: 250 85% 68%;
+
+    --secondary: 217 33% 17%;
+    --secondary-foreground: 210 40% 98%;
+
+    --muted: 217 33% 17%;
+    --muted-foreground: 215 20% 65%;
+
+    --accent: 262 83% 65%;
+    --accent-foreground: 0 0% 100%;
+
+    --destructive: 0 63% 31%;
+    --destructive-foreground: 210 40% 98%;
+
+    --success: 142 71% 45%;
+    --success-foreground: 0 0% 100%;
+
+    --warning: 38 92% 50%;
+    --warning-foreground: 0 0% 100%;
+
+    --border: 217 33% 17%;
+    --input: 217 33% 17%;
+    --ring: 243 75% 59%;
+
+    --gradient-primary: linear-gradient(135deg, hsl(243 75% 59%), hsl(262 83% 65%));
+    --gradient-subtle: linear-gradient(180deg, hsl(222 47% 7%), hsl(222 47% 10%));
+    --gradient-card: linear-gradient(145deg, hsl(222 47% 9%), hsl(222 47% 11%));
+    
+    --shadow-elegant: 0 4px 20px -2px hsl(243 75% 59% / 0.25);
+    --shadow-card: 0 2px 8px -1px hsl(0 0% 0% / 0.4);
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+  }
+}
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -0,0 +1,5 @@
+import { createRoot } from "react-dom/client";
+import App from "./App";
+import "./index.css";
+
+createRoot(document.getElementById("root")!).render(<App />);
--- a/src/pages/AuthMicrosoft.tsx
+++ b/src/pages/AuthMicrosoft.tsx
@@ -0,0 +1,172 @@
+import { useState, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardHeader,
+    CardTitle,
+} from "@/components/ui/card";
+import { Shield, AlertCircle } from "lucide-react";
+import { useNavigate } from "react-router-dom";
+import { PublicClientApplication } from "@azure/msal-browser";
+import { toast } from "sonner";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import gtarhLogo from "@/assets/GTARH.png";
+
+const msalConfig = {
+    auth: {
+        clientId: "4bb4cc24-bac3-427c-b02c-5d14fc67b561",
+        authority: "https://login.microsoftonline.com/9840a2a0-6ae1-4688-b03d-d2ec291be0f9", // ⚠️  tenantId
+        redirectUri: "https://mygta-rh.ensup-adm.net", //  URL frontend
+    },
+    cache: {
+        cacheLocation: "sessionStorage",
+        storeAuthStateInCookie: false,
+    },
+};
+
+const msalInstance = new PublicClientApplication(msalConfig);
+
+const AuthMicrosoft = () => {
+    const navigate = useNavigate();
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState("");
+
+    useEffect(() => {
+        msalInstance.initialize().then(() => {
+            handleRedirect();
+        });
+    }, []);
+
+    const handleRedirect = async () => {
+        try {
+            const response = await msalInstance.handleRedirectPromise();
+            if (response && response.accessToken) {
+                await authenticateWithBackend(response.accessToken);
+            }
+        } catch (err: any) {
+            console.error(err);
+            setError("Erreur lors de l'authentification Microsoft");
+        }
+    };
+
+    // 🔑 Envoie accessToken au backend
+    const authenticateWithBackend = async (accessToken: string) => {
+        try {
+            const response = await fetch('/api/login-dev', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({ accessToken: accessToken })  // ✅ Changer 'code' en 'accessToken'
+            });
+
+            if (!response.ok) {
+                const data = await response.json();
+                throw new Error(data.error || 'Authentification échouée');
+            }
+
+            const data = await response.json();
+
+            localStorage.setItem('token', data.token);
+            localStorage.setItem('user', JSON.stringify(data.user));
+
+            toast.success(`Bienvenue ${data.user.prenom} ${data.user.nom}`);
+            navigate("/dashboard");
+        } catch (err: any) {
+            setError(err.message);
+            toast.error(err.message);
+        }
+    };
+
+    const handleLogin = async () => {
+        setLoading(true);
+        setError("");
+
+        try {
+            const loginRequest = {
+                scopes: ["User.Read", "email", "profile", "openid"],
+                prompt: "select_account",
+            };
+
+            await msalInstance.loginRedirect(loginRequest);
+        } catch (err: any) {
+            console.error(err);
+            setError("Erreur lors de la connexion à Microsoft");
+            setLoading(false);
+        }
+    };
+
+    return (
+        <div className="min-h-screen bg-gradient-subtle flex items-center justify-center p-4">
+            <div className="w-full max-w-md space-y-6 animate-in fade-in duration-500">
+                <div className="flex justify-center mb-8">
+                    <img
+                        src={gtarhLogo}
+                        alt="GTARH Logo"
+                        className="w- h-auto object-contain"
+                    />
+                </div>
+
+                <Card className="shadow-elegant border-0" style={{ marginTop: '-147px' }}>
+                    <CardHeader>
+                        <CardTitle className="flex items-center gap-2 text-[#7e5aa2]" >
+                            <Shield className="w-5 h-5 text-[#7e5aa2]" />
+                            Connexion sécurisée
+                        </CardTitle>
+                        <CardDescription>Réservé aux collaborateurs RH</CardDescription>
+                    </CardHeader>
+
+                    <CardContent className="space-y-4">
+                        {error && (
+                            <Alert variant="destructive">
+                                <AlertCircle className="h-4 w-4 text-[#7e5aa2]" />
+                                <AlertDescription>{error}</AlertDescription>
+                            </Alert>
+                        )}
+
+                        <Button
+                            onClick={handleLogin}
+                            disabled={loading}
+                            className="w-full h-12 bg-[#7e5aa2] hover:bg-[#6b4891] text-white transition-smooth shadow-elegant"
+                        >
+                            {loading ? (
+                                <>
+                                    <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin mr-2" />
+                                    Connexion en cours...
+                                </>
+                            ) : (
+                                <>
+                                    <svg
+                                        className="w-5 h-5 mr-2"
+                                        viewBox="0 0 21 21"
+                                        fill="none"
+                                    >
+                                        <rect x="1" y="1" width="9" height="9" fill="#f25022" />
+                                        <rect x="1" y="11" width="9" height="9" fill="#00a4ef" />
+                                        <rect x="11" y="1" width="9" height="9" fill="#7fba00" />
+                                        <rect x="11" y="11" width="9" height="9" fill="#ffb900" />
+                                    </svg>
+                                    Se connecter avec Microsoft
+                                </>
+                            )}
+                        </Button>
+
+                        <div className="pt-4 border-t text-center">
+                            <p className="text-xs text-muted-foreground">
+                                Accès restreint aux comptes autorisés uniquement
+                            </p>
+                        </div>
+                    </CardContent>
+                </Card>
+
+                <div className="text-center text-sm text-muted-foreground">
+                    <p>En vous connectant, vous acceptez les conditions d'utilisation</p>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default AuthMicrosoft;
--- a/src/pages/CompteRenduRH.tsx
+++ b/src/pages/CompteRenduRH.tsx
@@ -0,0 +1,903 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import {
+    Calendar, Lock, Unlock, Download, Menu, AlertCircle,
+    ChevronLeft, ChevronRight, FileText, RefreshCw,
+    Eye, Search, Users, CheckCircle, XCircle, Clock, LogOut, ArrowLeft, Filter
+} from 'lucide-react';
+import { useNavigate } from 'react-router-dom';
+import { toast } from 'sonner';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader } from '@/components/ui/card';
+
+const CompteRenduRH = () => {
+    const navigate = useNavigate();
+    const [user, setUser] = useState<any>(null);
+    const [token, setToken] = useState<string>('');
+
+    // États
+    const [currentDate, setCurrentDate] = useState(new Date());
+    const [viewMode, setViewMode] = useState('mois');
+    const [isLoading, setIsLoading] = useState(true);
+    const [collaborateurs, setCollaborateurs] = useState<any[]>([]);
+    const [selectedCollab, setSelectedCollab] = useState<any>(null);
+    const [compteRenduData, setCompteRenduData] = useState<any[]>([]);
+    const [mensuelData, setMensuelData] = useState<any>(null);
+    const [statsGlobales, setStatsGlobales] = useState<any>(null);
+    const [searchTerm, setSearchTerm] = useState('');
+    const [showDetailModal, setShowDetailModal] = useState(false);
+    const [selectedJour, setSelectedJour] = useState<any>(null);
+
+    // 🆕 NOUVEAUX ÉTATS POUR LE FILTRE
+    const [services, setServices] = useState<any[]>([]);
+    const [selectedService, setSelectedService] = useState<string>('all');
+    const [showServiceFilter, setShowServiceFilter] = useState(false);
+
+    const annee = currentDate.getFullYear();
+    const mois = currentDate.getMonth() + 1;
+
+    // ✅ ÉTAPE 1 : Charger l'utilisateur et vérifier l'accès
+    useEffect(() => {
+        const userData = localStorage.getItem('user');
+        const userToken = localStorage.getItem('token');
+
+        if (!userData || !userToken) {
+            toast.error("Session expirée, reconnexion nécessaire");
+            navigate('/');
+            return;
+        }
+
+        const parsedUser = JSON.parse(userData);
+
+        if (!['RH', 'Admin'].includes(parsedUser?.role)) {
+            toast.error("Accès réservé aux RH et Administrateurs");
+            navigate('/dashboard');
+            return;
+        }
+
+        setUser(parsedUser);
+        setToken(userToken);
+    }, [navigate]);
+
+    // 🆕 ÉTAPE 1.5 : Charger la liste des services
+    useEffect(() => {
+        if (!token) return;
+
+        const loadServices = async () => {
+            try {
+                const response = await fetch('/api/compte-rendu/services', {
+                    headers: {
+                        'Authorization': `Bearer ${token}`
+                    }
+                });
+
+                if (response.ok) {
+                    const data = await response.json();
+                    console.log('📋 Services disponibles:', data);
+                    setServices(data);
+                }
+            } catch (error) {
+                console.error('❌ Erreur chargement services:', error);
+            }
+        };
+
+        loadServices();
+    }, [token]);
+
+    // ✅ ÉTAPE 2 : Charger les collaborateurs (avec filtre service optionnel)
+    useEffect(() => {
+        if (!token) return;
+
+        const loadCollaborateurs = async () => {
+            console.log('📥 Chargement des collaborateurs...');
+            setIsLoading(true);
+
+            try {
+                // 🆕 Construire l'URL avec le filtre service
+                let url = '/api/employes';
+                if (selectedService && selectedService !== 'all') {
+                    url += `?service_id=${selectedService}`;
+                }
+
+                const response = await fetch(url, {
+                    headers: {
+                        'Authorization': `Bearer ${token}`
+                    }
+                });
+
+                console.log('📊 Réponse API employes:', response.status);
+
+                if (!response.ok) {
+                    const errorText = await response.text();
+                    console.error('❌ Erreur API:', errorText);
+                    throw new Error(`Erreur ${response.status}: ${errorText}`);
+                }
+
+                const data = await response.json();
+                console.log('📋 Collaborateurs reçus:', data.length);
+
+                // Filtrer uniquement les forfaits jour actifs
+                const forfaitJour = data.filter((emp: any) => {
+                    const isForfaitJour = emp.TypeContrat === 'forfait_jour';
+                    const isActif = emp.Actif === 1 || emp.Actif === true || emp.Actif === null;
+                    return isForfaitJour && isActif;
+                });
+
+                console.log('✅ Forfaits jour actifs:', forfaitJour.length);
+                setCollaborateurs(forfaitJour);
+
+            } catch (error: any) {
+                console.error('❌ Erreur chargement collaborateurs:', error);
+                toast.error('Erreur lors du chargement des collaborateurs: ' + error.message);
+                setCollaborateurs([]);
+            } finally {
+                setIsLoading(false);
+            }
+        };
+
+        loadCollaborateurs();
+    }, [token, selectedService]); // 🆕 Recharger quand le service change
+
+    // ✅ ÉTAPE 3 : Charger les stats globales (avec filtre service)
+    useEffect(() => {
+        if (!token || collaborateurs.length === 0) return;
+
+        const loadStatsGlobales = async () => {
+            console.log('📊 Chargement stats globales...');
+
+            try {
+                // 🆕 Ajouter le filtre service aux stats
+                let url = `/api/compte-rendu/stats?annee=${annee}&mois=${mois}`;
+                if (selectedService && selectedService !== 'all') {
+                    url += `&service_id=${selectedService}`;
+                }
+
+                const response = await fetch(url, {
+                    headers: {
+                        'Authorization': `Bearer ${token}`
+                    }
+                });
+
+                if (response.ok) {
+                    const data = await response.json();
+                    console.log('✅ Stats globales:', data);
+                    setStatsGlobales(data);
+                } else {
+                    console.warn('⚠️ Stats non disponibles, utilisation valeurs par défaut');
+                    setStatsGlobales({
+                        totalCollaborateurs: collaborateurs.length,
+                        mensuelsValides: 0,
+                        mensuelsEnAttente: collaborateurs.length
+                    });
+                }
+            } catch (error) {
+                console.error('❌ Erreur stats globales:', error);
+                setStatsGlobales({
+                    totalCollaborateurs: collaborateurs.length,
+                    mensuelsValides: 0,
+                    mensuelsEnAttente: collaborateurs.length
+                });
+            }
+        };
+
+        loadStatsGlobales();
+    }, [token, collaborateurs.length, annee, mois, selectedService]); // 🆕 Recharger quand le service change
+
+    // ✅ ÉTAPE 4 : Charger le compte-rendu quand on sélectionne un collaborateur
+    useEffect(() => {
+        if (!selectedCollab || !token) return;
+
+        const loadCompteRendu = async () => {
+            setIsLoading(true);
+            console.log(`📥 Chargement compte-rendu pour collaborateur ${selectedCollab.id}`);
+
+            try {
+                const response = await fetch(
+                    `/api/compte-rendu-activites?user_id=${selectedCollab.id}&annee=${annee}&mois=${mois}`,
+                    {
+                        headers: {
+                            'Authorization': `Bearer ${token}`
+                        }
+                    }
+                );
+
+                if (!response.ok) {
+                    throw new Error(`Erreur ${response.status}`);
+                }
+
+                const data = await response.json();
+
+                if (data.success) {
+                    setCompteRenduData(data.jours || []);
+                    setMensuelData(data.mensuel);
+                    console.log('✅ Compte-rendu chargé:', data.jours?.length, 'jours');
+                } else {
+                    toast.error(data.message || 'Erreur lors du chargement');
+                }
+            } catch (error: any) {
+                console.error('❌ Erreur chargement compte-rendu:', error);
+                toast.error('Erreur lors du chargement du compte-rendu');
+                setCompteRenduData([]);
+                setMensuelData(null);
+            } finally {
+                setIsLoading(false);
+            }
+        };
+
+        loadCompteRendu();
+    }, [selectedCollab, annee, mois, token]);
+
+    // Verrouiller/Déverrouiller un mois
+    const handleToggleLock = async (unlock = false) => {
+        if (!selectedCollab || !token) return;
+
+        const action = unlock ? 'déverrouiller' : 'verrouiller';
+        const monthNames = ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin',
+            'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'];
+
+        if (!confirm(`Confirmer ${action} le mois de ${monthNames[mois - 1]} ${annee} pour ${selectedCollab.nom} ?`)) {
+            return;
+        }
+
+        try {
+            const endpoint = unlock
+                ? '/api/compte-rendu/deverrouiller'
+                : '/api/compte-rendu/verrouiller';
+
+            const response = await fetch(endpoint, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Authorization': `Bearer ${token}`
+                },
+                body: JSON.stringify({
+                    collaborateur_id: selectedCollab.id,
+                    annee: annee,
+                    mois: mois
+                })
+            });
+
+            const data = await response.json();
+
+            if (data.success) {
+                toast.success(`Mois ${action === 'verrouiller' ? 'verrouillé' : 'déverrouillé'} avec succès`);
+
+                // Recharger les données
+                const reloadResponse = await fetch(
+                    `/api/compte-rendu-activites?user_id=${selectedCollab.id}&annee=${annee}&mois=${mois}`,
+                    { headers: { 'Authorization': `Bearer ${token}` } }
+                );
+                const reloadData = await reloadResponse.json();
+                if (reloadData.success) {
+                    setCompteRenduData(reloadData.jours || []);
+                    setMensuelData(reloadData.mensuel);
+                }
+
+                // Recharger les stats
+                let statsUrl = `/api/compte-rendu/stats?annee=${annee}&mois=${mois}`;
+                if (selectedService && selectedService !== 'all') {
+                    statsUrl += `&service_id=${selectedService}`;
+                }
+                const statsResponse = await fetch(statsUrl, {
+                    headers: { 'Authorization': `Bearer ${token}` }
+                });
+                if (statsResponse.ok) {
+                    const statsData = await statsResponse.json();
+                    setStatsGlobales(statsData);
+                }
+            } else {
+                toast.error(data.message || 'Erreur');
+            }
+        } catch (error) {
+            console.error(`Erreur ${action}:`, error);
+            toast.error('Erreur serveur');
+        }
+    };
+
+    // Export PDF
+    const handleExportPDF = async () => {
+        if (!selectedCollab || !token) return;
+
+        try {
+            // Option 1 : Télécharger le PDF via fetch avec token
+            const response = await fetch(
+                `/api/export-compte-rendu-pdf?user_id=${selectedCollab.id}&annee=${annee}&mois=${mois}`,
+                {
+                    headers: {
+                        'Authorization': `Bearer ${token}`
+                    }
+                }
+            );
+
+            if (!response.ok) {
+                throw new Error('Erreur lors de l\'export PDF');
+            }
+
+            // Si c'est un JSON (en attendant la vraie génération PDF)
+            const contentType = response.headers.get('content-type');
+            if (contentType && contentType.includes('application/json')) {
+                const data = await response.json();
+                console.log('📄 Données PDF:', data);
+                toast.info(data.message || 'Export PDF en cours de développement');
+
+                // Afficher les données dans une nouvelle fenêtre temporairement
+                const dataWindow = window.open('', '_blank');
+                if (dataWindow) {
+                    dataWindow.document.write(`
+                        <html>
+                        <head>
+                            <title>Compte-rendu - ${selectedCollab.prenom} ${selectedCollab.nom}</title>
+                            <style>
+                                body { font-family: Arial, sans-serif; padding: 20px; }
+                                h1 { color: #0ea5e9; }
+                                .info { background: #f0f9ff; padding: 15px; border-radius: 8px; margin: 10px 0; }
+                                .label { font-weight: bold; }
+                            </style>
+                        </head>
+                        <body>
+                            <h1>Compte-rendu d'activités</h1>
+                            <div class="info">
+                                <p><span class="label">Collaborateur:</span> ${data.data?.collaborateur?.prenom} ${data.data?.collaborateur?.nom}</p>
+                                <p><span class="label">Email:</span> ${data.data?.collaborateur?.email}</p>
+                                <p><span class="label">Service:</span> ${data.data?.collaborateur?.service || 'Non défini'}</p>
+                                <p><span class="label">Période:</span> ${data.data?.periode}</p>
+                            </div>
+                            <h2>Résumé</h2>
+                            <div class="info">
+                                <p><span class="label">Jours travaillés:</span> ${data.data?.mensuel?.NbJoursTravailles || 0}</p>
+                                <p><span class="label">Non-respect repos quotidien:</span> ${data.data?.mensuel?.NbJoursNonRespectsReposQuotidien || 0}</p>
+                                <p><span class="label">Non-respect repos hebdo:</span> ${data.data?.mensuel?.NbJoursNonRespectsReposHebdo || 0}</p>
+                                <p><span class="label">Statut:</span> ${data.data?.mensuel?.Verrouille ? '🔒 Verrouillé' : '🔓 Ouvert'}</p>
+                            </div>
+                            <p style="color: #6b7280; font-size: 12px; margin-top: 20px;">
+                                Export généré le ${data.data?.dateExport}<br>
+                                Note: La génération PDF sera implémentée prochainement
+                            </p>
+                        </body>
+                        </html>
+                    `);
+                }
+            } else {
+                // Si c'est un vrai PDF (quand implémenté)
+                const blob = await response.blob();
+                const url = window.URL.createObjectURL(blob);
+                const link = document.createElement('a');
+                link.href = url;
+                link.download = `compte-rendu-${selectedCollab.nom}-${annee}-${String(mois).padStart(2, '0')}.pdf`;
+                document.body.appendChild(link);
+                link.click();
+                document.body.removeChild(link);
+                window.URL.revokeObjectURL(url);
+                toast.success('PDF téléchargé avec succès');
+            }
+        } catch (error: any) {
+            console.error('❌ Erreur export PDF:', error);
+            toast.error('Erreur lors de l\'export PDF: ' + error.message);
+        }
+    };
+
+    // Navigation mois
+    const navigateMonth = (direction: string) => {
+        setCurrentDate(prev => {
+            const newDate = new Date(prev);
+            if (direction === 'prev') {
+                newDate.setMonth(prev.getMonth() - 1);
+            } else {
+                newDate.setMonth(prev.getMonth() + 1);
+            }
+            return newDate;
+        });
+    };
+
+    // Ouvrir le détail d'un jour
+    const handleViewDetail = (jourData: any) => {
+        setSelectedJour(jourData);
+        setShowDetailModal(true);
+    };
+
+    // 🆕 Gérer le changement de service
+    const handleServiceChange = (serviceId: string) => {
+        setSelectedService(serviceId);
+        setSelectedCollab(null); // Réinitialiser le collaborateur sélectionné
+        setShowServiceFilter(false);
+    };
+
+    // Filtrer les collaborateurs par recherche
+    const filteredCollaborateurs = collaborateurs.filter(collab =>
+        collab.nom?.toLowerCase().includes(searchTerm.toLowerCase()) ||
+        collab.prenom?.toLowerCase().includes(searchTerm.toLowerCase()) ||
+        collab.email?.toLowerCase().includes(searchTerm.toLowerCase())
+    );
+
+    const monthNames = ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin',
+        'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'];
+
+    const formatDate = (dateStr: string) => {
+        if (!dateStr) return '';
+        return new Date(dateStr).toLocaleDateString('fr-FR');
+    };
+
+    const isVerrouille = () => {
+        return mensuelData?.Verrouille === true || mensuelData?.Verrouille === 1;
+    };
+
+    // ✅ Affichage du loader pendant le chargement initial
+    if (isLoading && collaborateurs.length === 0) {
+        return (
+            <div className="min-h-screen bg-gradient-subtle flex items-center justify-center">
+                <div className="text-center">
+                    <RefreshCw className="w-12 h-12 animate-spin text-cyan-600 mx-auto mb-4" />
+                    <p className="text-gray-600">Chargement des collaborateurs...</p>
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <div className="min-h-screen bg-gradient-subtle">
+            {/* Header */}
+            <header className="bg-card border-b border-border shadow-card">
+                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
+                    <div className="flex items-center justify-between">
+                        <div className="flex items-center space-x-3">
+                            <Button
+                                variant="ghost"
+                                size="sm"
+                                onClick={() => navigate('/dashboard')}
+                            >
+                                <ArrowLeft className="w-4 h-4 mr-2" />
+                                Retour
+                            </Button>
+                            <div>
+                                <h1 className="text-2xl font-bold text-foreground">
+                                    Gestion des Comptes-Rendus d'Activités
+                                </h1>
+                                <p className="text-sm text-muted-foreground">
+                                    Suivi et validation des forfaits jour
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </header>
+
+            <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+                {/* 🆕 FILTRE PAR SERVICE */}
+                <Card className="shadow-card mb-6">
+                    <CardContent className="p-4">
+                        <div className="flex items-center gap-4">
+                            <Filter className="w-5 h-5 text-gray-600" />
+                            <div className="flex-1">
+                                <label className="text-sm font-medium text-gray-700 mb-2 block">
+                                    Filtrer par service
+                                </label>
+                                <select
+                                    value={selectedService}
+                                    onChange={(e) => handleServiceChange(e.target.value)}
+                                    className="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500"
+                                >
+                                    <option value="all">Tous les services</option>
+                                    {services.map(service => (
+                                        <option key={service.Id} value={service.Id}>
+                                            {service.Nom} ({service.nombreForfaitJour} forfait{service.nombreForfaitJour > 1 ? 's' : ''} jour)
+                                        </option>
+                                    ))}
+                                </select>
+                            </div>
+                        </div>
+                    </CardContent>
+                </Card>
+
+                {/* Stats globales */}
+                {statsGlobales && (
+                    <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
+                        <Card className="shadow-card">
+                            <CardContent className="p-6">
+                                <div className="flex items-center gap-3">
+                                    <div className="p-3 bg-blue-100 rounded-lg">
+                                        <Users className="w-6 h-6 text-blue-600" />
+                                    </div>
+                                    <div>
+                                        <p className="text-sm text-muted-foreground">
+                                            Forfaits jour
+                                            {selectedService !== 'all' && (
+                                                <span className="ml-1 text-xs text-blue-600">(filtré)</span>
+                                            )}
+                                        </p>
+                                        <p className="text-2xl font-bold text-foreground">
+                                            {statsGlobales.totalCollaborateurs}
+                                        </p>
+                                    </div>
+                                </div>
+                            </CardContent>
+                        </Card>
+
+                        <Card className="shadow-card">
+                            <CardContent className="p-6">
+                                <div className="flex items-center gap-3">
+                                    <div className="p-3 bg-green-100 rounded-lg">
+                                        <CheckCircle className="w-6 h-6 text-green-600" />
+                                    </div>
+                                    <div>
+                                        <p className="text-sm text-muted-foreground">Mois validés</p>
+                                        <p className="text-2xl font-bold text-foreground">
+                                            {statsGlobales.mensuelsValides}
+                                        </p>
+                                    </div>
+                                </div>
+                            </CardContent>
+                        </Card>
+
+                        <Card className="shadow-card">
+                            <CardContent className="p-6">
+                                <div className="flex items-center gap-3">
+                                    <div className="p-3 bg-orange-100 rounded-lg">
+                                        <Clock className="w-6 h-6 text-orange-600" />
+                                    </div>
+                                    <div>
+                                        <p className="text-sm text-muted-foreground">En attente</p>
+                                        <p className="text-2xl font-bold text-foreground">
+                                            {statsGlobales.mensuelsEnAttente}
+                                        </p>
+                                    </div>
+                                </div>
+                            </CardContent>
+                        </Card>
+                    </div>
+                )}
+
+                <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+                    {/* Liste des collaborateurs */}
+                    <div className="lg:col-span-1">
+                        <Card className="shadow-card">
+                            <CardHeader className="bg-gradient-to-r from-cyan-500 to-blue-500 text-white">
+                                <h2 className="text-lg font-bold flex items-center gap-2">
+                                    <Users className="w-5 h-5" />
+                                    Collaborateurs ({collaborateurs.length})
+                                    {selectedService !== 'all' && (
+                                        <span className="text-xs bg-white/20 px-2 py-1 rounded">
+                                            Filtré
+                                        </span>
+                                    )}
+                                </h2>
+                            </CardHeader>
+
+                            {/* Recherche */}
+                            <CardContent className="p-4 border-b">
+                                <div className="relative">
+                                    <Search className="w-5 h-5 absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
+                                    <input
+                                        type="text"
+                                        placeholder="Rechercher..."
+                                        value={searchTerm}
+                                        onChange={(e) => setSearchTerm(e.target.value)}
+                                        className="w-full pl-10 pr-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500"
+                                    />
+                                </div>
+                            </CardContent>
+
+                            {/* Liste */}
+                            <div className="overflow-y-auto max-h-[600px]">
+                                {filteredCollaborateurs.length === 0 ? (
+                                    <div className="p-4 text-center text-muted-foreground">
+                                        {searchTerm ? 'Aucun résultat' : 'Aucun collaborateur en forfait jour'}
+                                    </div>
+                                ) : (
+                                    filteredCollaborateurs.map(collab => (
+                                        <div
+                                            key={collab.id}
+                                            onClick={() => setSelectedCollab(collab)}
+                                            className={`
+                                                p-4 border-b cursor-pointer transition-all
+                                                hover:bg-gray-50
+                                                ${selectedCollab?.id === collab.id ? 'bg-blue-50 border-l-4 border-blue-500' : ''}
+                                            `}
+                                        >
+                                            <div className="flex items-start justify-between">
+                                                <div className="flex-1">
+                                                    <p className="font-semibold text-foreground">
+                                                        {collab.prenom} {collab.nom}
+                                                    </p>
+                                                    <p className="text-sm text-muted-foreground">
+                                                        {collab.email}
+                                                    </p>
+                                                    <p className="text-xs text-muted-foreground mt-1">
+                                                        {collab.service || 'Service non défini'}
+                                                    </p>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    ))
+                                )}
+                            </div>
+                        </Card>
+                    </div>
+
+                    {/* Détails du compte-rendu */}
+                    <div className="lg:col-span-2">
+                        {!selectedCollab ? (
+                            <Card className="shadow-card p-8 text-center">
+                                <Users className="w-16 h-16 text-gray-300 mx-auto mb-4" />
+                                <p className="text-muted-foreground">
+                                    Sélectionnez un collaborateur pour voir ses comptes-rendus
+                                </p>
+                            </Card>
+                        ) : (
+                            <div className="space-y-6">
+                                {/* En-tête collaborateur */}
+                                <Card className="shadow-card">
+                                    <CardContent className="p-6">
+                                        <div className="flex items-center justify-between mb-4">
+                                            <div>
+                                                <h2 className="text-xl font-bold text-foreground">
+                                                    {selectedCollab.prenom} {selectedCollab.nom}
+                                                </h2>
+                                                <p className="text-sm text-muted-foreground">
+                                                    {selectedCollab.email}
+                                                </p>
+                                            </div>
+
+                                            <div className="flex items-center gap-2">
+                                                {isVerrouille() ? (
+                                                    <span className="flex items-center gap-2 px-3 py-1.5 bg-red-100 text-red-700 rounded-lg text-sm font-medium">
+                                                        <Lock className="w-4 h-4" />
+                                                        Verrouillé
+                                                    </span>
+                                                ) : (
+                                                    <span className="flex items-center gap-2 px-3 py-1.5 bg-green-100 text-green-700 rounded-lg text-sm font-medium">
+                                                        <Unlock className="w-4 h-4" />
+                                                        Ouvert
+                                                    </span>
+                                                )}
+                                            </div>
+                                        </div>
+
+                                        {/* Navigation mois */}
+                                        <div className="flex items-center justify-between mb-4">
+                                            <button
+                                                onClick={() => navigateMonth('prev')}
+                                                className="p-2 hover:bg-gray-100 rounded"
+                                            >
+                                                <ChevronLeft className="w-5 h-5 text-blue-600" />
+                                            </button>
+
+                                            <h3 className="text-lg font-semibold">
+                                                {monthNames[currentDate.getMonth()]} {currentDate.getFullYear()}
+                                            </h3>
+
+                                            <button
+                                                onClick={() => navigateMonth('next')}
+                                                className="p-2 hover:bg-gray-100 rounded"
+                                            >
+                                                <ChevronRight className="w-5 h-5 text-blue-600" />
+                                            </button>
+                                        </div>
+
+                                        {/* Actions */}
+                                        <div className="flex gap-3">
+                                            {isVerrouille() ? (
+                                                <Button
+                                                    onClick={() => handleToggleLock(true)}
+                                                    className="flex-1 bg-orange-600 hover:bg-orange-700"
+                                                    title="Permettre au collaborateur de modifier ses saisies"
+                                                >
+                                                    <Unlock className="w-4 h-4 mr-2" />
+                                                    Déverrouiller pour modification
+                                                </Button>
+                                            ) : (
+                                                <Button
+                                                    onClick={() => handleToggleLock(false)}
+                                                    className="flex-1 bg-green-600 hover:bg-green-700"
+                                                    title="Reverrouiller le mois"
+                                                >
+                                                    <Lock className="w-4 h-4 mr-2" />
+                                                    Reverrouiller
+                                                </Button>
+                                            )}
+
+                                            <Button
+                                                onClick={handleExportPDF}
+                                                className="flex-1 bg-purple-600 hover:bg-purple-700"
+                                            >
+                                                <Download className="w-4 h-4 mr-2" />
+                                                Export PDF
+                                            </Button>
+                                        </div>
+                                    </CardContent>
+                                </Card>
+
+                                {/* Stats du mois */}
+                                {mensuelData && (
+                                    <Card className="shadow-card">
+                                        <CardContent className="p-6">
+                                            <h3 className="text-lg font-bold text-foreground mb-4">
+                                                Statistiques du mois
+                                            </h3>
+
+                                            <div className="grid grid-cols-3 gap-4">
+                                                <div className="text-center">
+                                                    <p className="text-2xl font-bold text-blue-600">
+                                                        {mensuelData.NbJoursTravailles || 0}
+                                                    </p>
+                                                    <p className="text-sm text-muted-foreground">Jours travaillés</p>
+                                                </div>
+
+                                                <div className="text-center">
+                                                    <p className="text-2xl font-bold text-orange-600">
+                                                        {mensuelData.NbJoursNonRespectsReposQuotidien || 0}
+                                                    </p>
+                                                    <p className="text-sm text-muted-foreground">Non-respect repos quotidien</p>
+                                                </div>
+
+                                                <div className="text-center">
+                                                    <p className="text-2xl font-bold text-red-600">
+                                                        {mensuelData.NbJoursNonRespectsReposHebdo || 0}
+                                                    </p>
+                                                    <p className="text-sm text-muted-foreground">Non-respect repos hebdo</p>
+                                                </div>
+                                            </div>
+                                        </CardContent>
+                                    </Card>
+                                )}
+
+                                {/* Liste des jours */}
+                                <Card className="shadow-card">
+                                    <CardHeader className="bg-gray-50 border-b">
+                                        <h3 className="font-bold text-foreground">
+                                            Jours saisis ({compteRenduData.length})
+                                        </h3>
+                                    </CardHeader>
+
+                                    <div className="divide-y max-h-[500px] overflow-y-auto">
+                                        {compteRenduData.length === 0 ? (
+                                            <div className="p-8 text-center text-muted-foreground">
+                                                <FileText className="w-12 h-12 mx-auto mb-3 opacity-30" />
+                                                <p>Aucune saisie pour ce mois</p>
+                                            </div>
+                                        ) : (
+                                            compteRenduData.map((jour, index) => (
+                                                <div
+                                                    key={index}
+                                                    className="p-4 hover:bg-gray-50 transition-all"
+                                                >
+                                                    <div className="flex items-center justify-between">
+                                                        <div className="flex-1">
+                                                            <div className="flex items-center gap-3">
+                                                                <p className="font-semibold text-foreground">
+                                                                    {formatDate(jour.JourDate)}
+                                                                </p>
+
+                                                                {jour.JourTravaille ? (
+                                                                    <span className="px-2 py-1 bg-green-100 text-green-700 text-xs rounded">
+                                                                        Travaillé
+                                                                    </span>
+                                                                ) : (
+                                                                    <span className="px-2 py-1 bg-gray-100 text-gray-700 text-xs rounded">
+                                                                        Non travaillé
+                                                                    </span>
+                                                                )}
+                                                            </div>
+
+                                                            <div className="flex items-center gap-4 mt-2 text-sm">
+                                                                <div className="flex items-center gap-1">
+                                                                    {jour.ReposQuotidienRespect ? (
+                                                                        <CheckCircle className="w-4 h-4 text-green-600" />
+                                                                    ) : (
+                                                                        <XCircle className="w-4 h-4 text-red-600" />
+                                                                    )}
+                                                                    <span className="text-muted-foreground">Repos quotidien</span>
+                                                                </div>
+
+                                                                <div className="flex items-center gap-1">
+                                                                    {jour.ReposHebdomadaireRespect ? (
+                                                                        <CheckCircle className="w-4 h-4 text-green-600" />
+                                                                    ) : (
+                                                                        <XCircle className="w-4 h-4 text-red-600" />
+                                                                    )}
+                                                                    <span className="text-muted-foreground">Repos hebdo</span>
+                                                                </div>
+                                                            </div>
+
+                                                            {jour.CommentaireRepos && (
+                                                                <div className="mt-2 p-2 bg-orange-50 rounded text-sm text-orange-800">
+                                                                    <p className="font-medium">Commentaire:</p>
+                                                                    <p className="mt-1">{jour.CommentaireRepos}</p>
+                                                                </div>
+                                                            )}
+                                                        </div>
+
+                                                        <button
+                                                            onClick={() => handleViewDetail(jour)}
+                                                            className="p-2 hover:bg-gray-100 rounded"
+                                                        >
+                                                            <Eye className="w-5 h-5 text-gray-600" />
+                                                        </button>
+                                                    </div>
+                                                </div>
+                                            ))
+                                        )}
+                                    </div>
+                                </Card>
+                            </div>
+                        )}
+                    </div>
+                </div>
+            </main>
+
+            {/* Modal détail jour */}
+            {showDetailModal && selectedJour && (
+                <div className="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
+                    <Card className="max-w-2xl w-full">
+                        <CardHeader>
+                            <h3 className="text-xl font-bold text-foreground">
+                                Détails du {formatDate(selectedJour.JourDate)}
+                            </h3>
+                        </CardHeader>
+                        <CardContent className="space-y-4">
+                            <div className="p-4 bg-gray-50 rounded-lg">
+                                <p className="text-sm font-medium text-muted-foreground mb-2">Statut du jour</p>
+                                <p className="text-lg font-semibold">
+                                    {selectedJour.JourTravaille ? '✅ Jour travaillé' : '❌ Jour non travaillé'}
+                                </p>
+                            </div>
+
+                            <div className="grid grid-cols-2 gap-4">
+                                <div className="p-4 bg-gray-50 rounded-lg">
+                                    <p className="text-sm font-medium text-muted-foreground mb-2">Repos quotidien</p>
+                                    <p className="text-lg font-semibold">
+                                        {selectedJour.ReposQuotidienRespect ? (
+                                            <span className="text-green-600">✅ Respecté</span>
+                                        ) : (
+                                            <span className="text-red-600">❌ Non respecté</span>
+                                        )}
+                                    </p>
+                                    <p className="text-xs text-muted-foreground mt-1">11h consécutives minimum</p>
+                                </div>
+
+                                <div className="p-4 bg-gray-50 rounded-lg">
+                                    <p className="text-sm font-medium text-muted-foreground mb-2">Repos hebdomadaire</p>
+                                    <p className="text-lg font-semibold">
+                                        {selectedJour.ReposHebdomadaireRespect ? (
+                                            <span className="text-green-600">✅ Respecté</span>
+                                        ) : (
+                                            <span className="text-red-600">❌ Non respecté</span>
+                                        )}
+                                    </p>
+                                    <p className="text-xs text-muted-foreground mt-1">35h consécutives minimum</p>
+                                </div>
+                            </div>
+
+                            {selectedJour.CommentaireRepos && (
+                                <div className="p-4 bg-orange-50 border border-orange-200 rounded-lg">
+                                    <p className="text-sm font-medium text-orange-800 mb-2">Commentaire</p>
+                                    <p className="text-gray-700">{selectedJour.CommentaireRepos}</p>
+                                </div>
+                            )}
+
+                            <div className="p-4 bg-blue-50 rounded-lg">
+                                <p className="text-sm font-medium text-blue-800 mb-2">Informations de saisie</p>
+                                <div className="space-y-1 text-sm text-gray-700">
+                                    <p><span className="font-medium">Date de saisie:</span> {formatDate(selectedJour.DateSaisie)}</p>
+                                    {selectedJour.DateModification && (
+                                        <p><span className="font-medium">Dernière modification:</span> {formatDate(selectedJour.DateModification)}</p>
+                                    )}
+                                </div>
+                            </div>
+
+                            <div className="flex gap-3">
+                                <Button
+                                    onClick={() => setShowDetailModal(false)}
+                                    variant="outline"
+                                    className="flex-1"
+                                >
+                                    Fermer
+                                </Button>
+                            </div>
+                        </CardContent>
+                    </Card>
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default CompteRenduRH;
--- a/src/pages/Dashboard.tsx
+++ b/src/pages/Dashboard.tsx
@@ -0,0 +1,563 @@
+import { useState, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import {
+    Calendar, Users, Clock, CheckCircle, XCircle, AlertCircle,
+    Plus, LogOut, FileSpreadsheet, RefreshCw, Edit, ClipboardList, FileText
+} from "lucide-react";
+import { useNavigate } from "react-router-dom";
+import { toast } from "sonner";
+import { useSSE } from "@/hooks/useSSE";
+import { PublicClientApplication } from "@azure/msal-browser";
+
+// Configuration MSAL
+const msalConfig = {
+    auth: {
+        clientId: "4bb4cc24-bac3-427c-b02c-5d14fc67b561",
+        authority: "https://login.microsoftonline.com/9840a2a0-6ae1-4688-b03d-d2ec291be0f9",
+        redirectUri: "https://mygta-rh.ensup-adm.net",
+    },
+    cache: {
+        cacheLocation: "sessionStorage",
+        storeAuthStateInCookie: false,
+    },
+};
+
+interface Stats {
+    enAttente: number;
+    valideeCeMois: number;
+    nombreEquipes: number;
+}
+
+interface Demande {
+    Id: number;
+    nomEmploye: string;
+    typesConge: string;
+    DateDebut: string;
+    Statut: string;
+}
+
+const Dashboard = () => {
+    const navigate = useNavigate();
+    const [stats, setStats] = useState<Stats>({ enAttente: 0, valideeCeMois: 0, nombreEquipes: 0 });
+    const [recentRequests, setRecentRequests] = useState<Demande[]>([]);
+    const [user, setUser] = useState<any>(null);
+    const [token, setToken] = useState<string>('');
+    const [isLoading, setIsLoading] = useState(true);
+
+    // ✅ Chargement initial de l'utilisateur
+    useEffect(() => {
+        const userData = localStorage.getItem('user');
+        const userToken = localStorage.getItem('token');
+
+        if (!userData || !userToken) {
+            toast.error("Session expirée, reconnexion nécessaire");
+            navigate('/');
+            return;
+        }
+
+        try {
+            const parsedUser = JSON.parse(userData);
+            setUser(parsedUser);
+            setToken(userToken);
+        } catch (error) {
+            console.error('Erreur parsing user:', error);
+            toast.error("Erreur lors de la récupération des données utilisateur");
+            navigate('/');
+        }
+    }, [navigate]);
+
+    // ✅ Fonction de chargement des données
+    const chargerDonnees = async () => {
+        if (!token) {
+            console.log('⏳ Pas de token, attente...');
+            return;
+        }
+
+        console.log('📥 Chargement des données du dashboard...');
+        setIsLoading(true);
+
+        try {
+            // Charger les stats
+            const respStats = await fetch('/api/stats', {
+                headers: { 'Authorization': `Bearer ${token}` }
+            });
+
+            if (!respStats.ok) {
+                throw new Error(`Erreur stats: ${respStats.status}`);
+            }
+
+            const dataStats = await respStats.json();
+            console.log('📊 Stats reçues:', dataStats);
+            setStats(dataStats);
+
+            // Charger les demandes récentes
+            const respDemandes = await fetch('/api/demandes?limit=5', {
+                headers: { 'Authorization': `Bearer ${token}` }
+            });
+
+            if (!respDemandes.ok) {
+                throw new Error(`Erreur demandes: ${respDemandes.status}`);
+            }
+
+            const dataDemandes = await respDemandes.json();
+            console.log('📋 Demandes reçues:', dataDemandes.length);
+            setRecentRequests(dataDemandes);
+
+        } catch (error: any) {
+            console.error("❌ Erreur chargement données:", error);
+            toast.error("Erreur lors du chargement des données: " + error.message);
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    // ✅ Charger les données quand le token est disponible
+    useEffect(() => {
+        if (token) {
+            chargerDonnees();
+        }
+    }, [token]);
+
+    // 🔔 CONNEXION SSE
+    useSSE((event) => {
+        console.log('🔔 Événement SSE reçu dans Dashboard:', event.type);
+
+        switch (event.type) {
+            case 'connected':
+                console.log('✅ Dashboard connecté au serveur temps réel');
+                toast.success("Connexion temps réel établie", { duration: 2000 });
+                break;
+
+            case 'demande-created':
+                console.log('🆕 Nouvelle demande créée');
+                toast.info("Nouvelle demande de congé", { duration: 3000 });
+                if (token) chargerDonnees();
+                break;
+
+            case 'demande-updated':
+                console.log('🔄 Demande mise à jour');
+                if (token) chargerDonnees();
+                break;
+
+            case 'demande-validated':
+                console.log('✅ Demande validée/refusée');
+                toast.info("Une demande a été traitée", { duration: 3000 });
+                if (token) chargerDonnees();
+                break;
+
+            // 🆕 GESTION DES ANNULATIONS
+            case 'demande-cancelled':
+                console.log('🚫 Demande annulée');
+                toast.warning("Une demande a été annulée", {
+                    description: "La liste a été mise à jour",
+                    duration: 4000
+                });
+                if (token) chargerDonnees();
+                break;
+
+            case 'demande-deleted':
+                console.log('🗑️ Demande supprimée');
+                if (token) chargerDonnees();
+                break;
+
+            case 'demande-list-updated':
+                console.log('📋 Liste des demandes mise à jour');
+                if (token) chargerDonnees();
+                break;
+
+            case 'heartbeat':
+                // Heartbeat pour garder la connexion
+                break;
+
+            default:
+                console.log('❓ Type d\'événement inconnu:', event.type);
+        }
+    });
+
+    const handleLogout = async () => {
+        try {
+            const msalInstance = new PublicClientApplication(msalConfig);
+            await msalInstance.initialize();
+
+            const accounts = msalInstance.getAllAccounts();
+
+            if (accounts.length > 0) {
+                // Déconnexion popup au lieu de redirect
+                await msalInstance.logoutPopup({
+                    account: accounts[0],
+                    mainWindowRedirectUri: "https://mygta-rh.ensup-adm.net"
+                });
+            }
+
+            // Nettoyer tout le stockage
+            localStorage.removeItem('token');
+            localStorage.removeItem('user');
+            sessionStorage.clear();
+
+            toast.success("Déconnexion réussie");
+            navigate("/");
+        } catch (error) {
+            console.error("Erreur déconnexion:", error);
+            // Forcer la déconnexion locale même en cas d'erreur
+            localStorage.removeItem('token');
+            localStorage.removeItem('user');
+            sessionStorage.clear();
+            toast.success("Déconnexion réussie");
+            navigate("/");
+        }
+    };
+
+    // ✅ FONCTION MISE À JOUR AVEC LE STATUT "ANNULÉE"
+    const getStatusBadge = (status: string) => {
+        switch (status) {
+            case "En attente":
+                return <Badge variant="outline" className="bg-warning/10 text-warning border-warning/20">
+                    <Clock className="w-3 h-3 mr-1" />
+                    En attente
+                </Badge>;
+            case "Validée":
+                return <Badge variant="outline" className="bg-success/10 text-success border-success/20">
+                    <CheckCircle className="w-3 h-3 mr-1" />
+                    Validée
+                </Badge>;
+            case "Refusée":
+                return <Badge variant="outline" className="bg-destructive/10 text-destructive border-destructive/20">
+                    <XCircle className="w-3 h-3 mr-1" />
+                    Refusée
+                </Badge>;
+            case "Annulée":
+                return <Badge variant="outline" className="bg-gray-100 text-gray-700 border-gray-300 dark:bg-gray-800 dark:text-gray-300">
+                    <AlertCircle className="w-3 h-3 mr-1" />
+                    Annulée
+                </Badge>;
+            default:
+                return <Badge variant="outline" className="bg-gray-100 text-gray-700">
+                    {status}
+                </Badge>;
+        }
+    };
+
+    const formatDate = (dateString: string) => {
+        if (!dateString) return '';
+        try {
+            return new Date(dateString).toLocaleDateString('fr-FR', {
+                day: '2-digit',
+                month: '2-digit',
+                year: 'numeric'
+            });
+        } catch (error) {
+            console.error('Erreur formatage date:', error);
+            return dateString;
+        }
+    };
+
+    const statsCards = [
+        {
+            title: "Demandes en attente",
+            value: stats.enAttente,
+            icon: Clock,
+            color: "text-warning",
+            bg: "bg-warning/10",
+            action: () => navigate("/validation")
+        },
+        {
+            title: "Validées ce mois",
+            value: stats.valideeCeMois,
+            icon: CheckCircle,
+            color: "text-success",
+            bg: "bg-success/10",
+            action: () => navigate("/validation")
+        },
+        {
+            title: "Total équipes",
+            value: stats.nombreEquipes,
+            icon: Users,
+            color: "text-primary",
+            bg: "bg-primary/10",
+            action: () => navigate("/teams")
+        },
+    ];
+
+    const actionCards = [
+        {
+            title: "Saisie manuelle",
+            description: "Enregistrer une demande",
+            icon: Plus,
+            color: "bg-[#7e5aa2]",
+            action: () => navigate("/saisie-manuelle")
+        },
+        {
+            title: "Validation",
+            description: "Valider les demandes",
+            icon: CheckCircle,
+            color: "bg-[#7e5aa2]", // Mauve GTARH comme les autres
+            action: () => navigate("/validation")
+        },
+
+        {
+            title: "Récupération",
+            description: "Gérer les samedis travaillés",
+            icon: Clock,
+            color: "bg-purple-600",
+            action: () => navigate("/gestion-recuperation")
+        },
+        {
+            title: "Export paie",
+            description: "Générer un rapport",
+            icon: FileSpreadsheet,
+            color: "bg-blue-600",
+            action: () => navigate("/export-paie")
+        },
+        {
+            title: "Compteurs",
+            description: "Gérer les soldes",
+            icon: RefreshCw,
+            color: "bg-purple-600",
+            action: () => navigate("/compteurs")
+        },
+        {
+            title: "Équipes",
+            description: "Voir toutes les équipes",
+            icon: Users,
+            color: "bg-indigo-600",
+            action: () => navigate("/teams")
+        },
+        {
+            title: "Historique",
+            description: "Consulter l'historique",
+            icon: ClipboardList,
+            color: "bg-orange-600",
+            action: () => navigate("/historique")
+        },
+        {
+            title: "Comptes-Rendus RH",
+            description: "Gérer les forfaits jour",
+            icon: FileText,
+            color: "bg-cyan-600",
+            action: () => navigate("/compte-rendu-rh")
+        }
+    ];
+
+    const handleDeleteRequest = async (id: number) => {
+        if (!confirm("Voulez-vous vraiment supprimer cette demande ?")) return;
+
+        if (!token) {
+            toast.error("Utilisateur non authentifié");
+            return;
+        }
+
+        try {
+            console.log('🗑️ Suppression demande:', id);
+
+            const resp = await fetch(`/api/demandes/${id}`, {
+                method: "DELETE",
+                headers: {
+                    'Authorization': `Bearer ${token}`,
+                    'Content-Type': 'application/json',
+                },
+            });
+
+            const data = await resp.json();
+
+            if (resp.ok) {
+                toast.success("Demande supprimée avec succès");
+                // Le SSE rechargera automatiquement, mais on peut forcer un rechargement immédiat
+                await chargerDonnees();
+            } else {
+                toast.error(data.error || "Erreur lors de la suppression");
+            }
+        } catch (error: any) {
+            console.error("❌ Erreur suppression:", error);
+            toast.error("Erreur lors de la suppression: " + error.message);
+        }
+    };
+
+    // ✅ Affichage du loader pendant le chargement initial
+    if (isLoading && !user) {
+        return (
+            <div className="min-h-screen bg-gradient-subtle flex items-center justify-center">
+                <div className="text-center">
+                    <RefreshCw className="w-12 h-12 animate-spin text-[#7e5aa2] mx-auto mb-4" />
+                    <p className="text-gray-600">Chargement du tableau de bord...</p>
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <div className="min-h-screen bg-gradient-subtle">
+            <header className="bg-card border-b border-border shadow-card">
+                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
+                    <div className="flex items-center justify-between">
+                        <div className="flex items-center space-x-3">
+                            <div className="w-10 h-10 rounded-xl flex items-center justify-center" style={{ backgroundColor: "#7e5aa2" }}>
+                                <Calendar className="w-5 h-5 text-white" />
+                            </div>
+                            <div>
+                                <h1 className="text-2xl font-bold text-foreground">GTARH</h1>
+                                {user && (
+                                    <p className="text-sm text-muted-foreground">
+                                        {user.prenom} {user.nom} - {user.role}
+                                    </p>
+                                )}
+                            </div>
+                        </div>
+                        <Button
+                            variant="outline"
+                            size="sm"
+                            onClick={handleLogout}
+                            className="transition-smooth"
+                        >
+                            <LogOut className="w-4 h-4 mr-2" />
+                            Déconnexion
+                        </Button>
+                    </div>
+                </div>
+            </header>
+
+            <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+                {/* Stats Cards */}
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
+                    {statsCards.map((stat, index) => (
+                        <Card
+                            key={index}
+                            className="shadow-card border-0 bg-gradient-card transition-smooth hover:shadow-elegant cursor-pointer"
+                            onClick={stat.action}
+                        >
+                            <CardContent className="p-6">
+                                <div className="flex items-center justify-between">
+                                    <div>
+                                        <p className="text-sm text-muted-foreground mb-1">{stat.title}</p>
+                                        <p className="text-3xl font-bold text-foreground">{stat.value}</p>
+                                    </div>
+                                    <div className={`w-12 h-12 rounded-xl ${stat.bg} flex items-center justify-center`}>
+                                        <stat.icon className={`w-6 h-6 ${stat.color}`} />
+                                    </div>
+                                </div>
+                            </CardContent>
+                        </Card>
+                    ))}
+                </div>
+
+                {/* Action Cards */}
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+                    {actionCards.map((action, index) => (
+                        <Card
+                            key={index}
+                            className="shadow-card border-0 hover:shadow-elegant transition-smooth cursor-pointer group"
+                            onClick={action.action}
+                        >
+                            <CardContent className="p-6">
+                                <div className="flex items-start gap-4">
+                                    <div className={`w-12 h-12 rounded-xl ${action.color} flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform`}>
+                                        <action.icon className="w-6 h-6 text-white" />
+                                    </div>
+                                    <div className="flex-1">
+                                        <h3 className="font-semibold text-lg mb-1">{action.title}</h3>
+                                        <p className="text-sm text-muted-foreground">{action.description}</p>
+                                    </div>
+                                </div>
+                            </CardContent>
+                        </Card>
+                    ))}
+                </div>
+
+                {/* Recent Requests */}
+                <Card className="shadow-card border-0">
+                    <CardHeader>
+                        <div className="flex items-center justify-between">
+                            <div>
+                                <CardTitle>Demandes récentes</CardTitle>
+                                <CardDescription>Les dernières demandes soumises</CardDescription>
+                            </div>
+                            <div className="flex gap-2">
+                                <Button
+                                    variant="outline"
+                                    size="sm"
+                                    onClick={() => chargerDonnees()}
+                                    disabled={isLoading}
+                                >
+                                    <RefreshCw className={`w-4 h-4 mr-2 ${isLoading ? 'animate-spin' : ''}`} />
+                                    Actualiser
+                                </Button>
+                                <Button
+                                    variant="outline"
+                                    size="sm"
+                                    onClick={() => navigate("/validation")}
+                                >
+                                    Voir tout
+                                </Button>
+                            </div>
+                        </div>
+                    </CardHeader>
+                    <CardContent>
+                        {isLoading && recentRequests.length === 0 ? (
+                            <div className="text-center py-12">
+                                <RefreshCw className="w-12 h-12 animate-spin text-[#7e5aa2] mx-auto mb-4" />
+                                <p className="text-muted-foreground">Chargement des demandes...</p>
+                            </div>
+                        ) : recentRequests.length > 0 ? (
+                            <div className="space-y-4">
+                                {recentRequests.map((request) => (
+                                    <div
+                                        key={request.Id}
+                                        className="flex items-center justify-between p-4 rounded-lg border border-border bg-gradient-card hover:shadow-card transition-smooth cursor-pointer group"
+                                        onClick={() => navigate(`/modification-demande/${request.Id}`)}
+                                    >
+                                        <div className="flex-1">
+                                            <div className="flex items-center gap-3 mb-1">
+                                                <p className="font-medium text-foreground">{request.nomEmploye}</p>
+                                                <Badge variant="secondary" className="text-xs">{request.typesConge}</Badge>
+                                            </div>
+                                            <p className="text-sm text-muted-foreground">
+                                                À partir du {formatDate(request.DateDebut)}
+                                            </p>
+                                        </div>
+                                        <div className="flex items-center gap-2">
+                                            {getStatusBadge(request.Statut)}
+
+                                            {/* Bouton Edit */}
+                                            <Button
+                                                variant="ghost"
+                                                size="sm"
+                                                className="opacity-0 group-hover:opacity-100 transition-opacity"
+                                                onClick={(e) => {
+                                                    e.stopPropagation();
+                                                    navigate(`/modification-demande/${request.Id}`);
+                                                }}
+                                            >
+                                                <Edit className="w-4 h-4" />
+                                            </Button>
+
+                                            {/* Bouton Supprimer */}
+                                            <Button
+                                                variant="destructive"
+                                                size="sm"
+                                                className="opacity-0 group-hover:opacity-100 transition-opacity"
+                                                onClick={(e) => {
+                                                    e.stopPropagation();
+                                                    handleDeleteRequest(request.Id);
+                                                }}
+                                            >
+                                                <XCircle className="w-4 h-4" />
+                                            </Button>
+                                        </div>
+                                    </div>
+                                ))}
+                            </div>
+                        ) : (
+                            <div className="text-center py-12">
+                                <AlertCircle className="w-16 h-16 text-muted-foreground mx-auto mb-4 opacity-50" />
+                                <p className="text-muted-foreground text-lg">Aucune demande récente</p>
+                            </div>
+                        )}
+                    </CardContent>
+                </Card>
+            </main>
+        </div>
+    );
+};
+
+export default Dashboard;
--- a/src/pages/ExportPaie.tsx
+++ b/src/pages/ExportPaie.tsx
@@ -0,0 +1,564 @@
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Label } from "@/components/ui/label";
+import { ArrowLeft, Download, FileSpreadsheet } from "lucide-react";
+import { useNavigate } from "react-router-dom";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { toast } from "sonner";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import ExcelJS from 'exceljs';
+
+interface CongeDetail {
+    nb: number;
+    dates: string;
+}
+
+interface AutreConge {
+    type: string;
+    nb: number;
+    dates: string;
+}
+
+interface DataPaie {
+    employe: string;
+    email: string;
+    service: string;
+    rtt: CongeDetail;
+    cp: CongeDetail;
+    aap: CongeDetail;
+    am: CongeDetail;
+    autres: AutreConge[];
+}
+
+const ExportPaie = () => {
+    const navigate = useNavigate();
+    const [mois, setMois] = useState(new Date().getMonth() + 1);
+    const [annee, setAnnee] = useState(new Date().getFullYear());
+    const [dataPaie, setDataPaie] = useState<DataPaie[]>([]);
+    const [loading, setLoading] = useState(false);
+
+    const moisOptions = [
+        { value: 1, label: 'Janvier' }, { value: 2, label: 'Février' },
+        { value: 3, label: 'Mars' }, { value: 4, label: 'Avril' },
+        { value: 5, label: 'Mai' }, { value: 6, label: 'Juin' },
+        { value: 7, label: 'Juillet' }, { value: 8, label: 'Août' },
+        { value: 9, label: 'Septembre' }, { value: 10, label: 'Octobre' },
+        { value: 11, label: 'Novembre' }, { value: 12, label: 'Décembre' }
+    ];
+
+    const genererRapport = async () => {
+        setLoading(true);
+        try {
+            const token = localStorage.getItem('token');
+            const response = await fetch(
+                `/api/export/paie?mois=${mois}&annee=${annee}`,
+                { headers: { 'Authorization': `Bearer ${token}` } }
+            );
+            const data = await response.json();
+
+            console.log('📊 Données reçues:', data);
+
+            setDataPaie(data);
+            toast.success(`Rapport généré avec succès (${data.length} employé${data.length > 1 ? 's' : ''})`);
+        } catch (error) {
+            console.error('❌ Erreur:', error);
+            toast.error("Erreur lors de la génération du rapport");
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const exporterExcel = async () => {
+        if (dataPaie.length === 0) return toast.error("Aucune donnée à exporter");
+
+        const moisLabel = moisOptions.find(m => m.value === mois)?.label || 'Inconnu';
+
+        try {
+            const workbook = new ExcelJS.Workbook();
+            const worksheet = workbook.addWorksheet(`Congés ${moisLabel}`);
+
+            // ✅ MODIFICATION : Colonnes sans Email
+            worksheet.columns = [
+                { header: 'Collaborateur', key: 'collaborateur', width: 20 },
+                { header: 'Service', key: 'service', width: 20 },
+                { header: 'RTT Nb', key: 'rtt_nb', width: 10 },
+                { header: 'RTT Dates', key: 'rtt_dates', width: 25 },
+                { header: 'CP Nb', key: 'cp_nb', width: 10 },
+                { header: 'CP Dates', key: 'cp_dates', width: 25 },
+                { header: 'AAP Nb', key: 'aap_nb', width: 10 },
+                { header: 'AAP Dates', key: 'aap_dates', width: 25 },
+                { header: 'AM Nb', key: 'am_nb', width: 10 },
+                { header: 'AM Dates', key: 'am_dates', width: 25 },
+                { header: 'Autres Type', key: 'autres_type', width: 20 },
+                { header: 'Autres Nb', key: 'autres_nb', width: 10 },
+                { header: 'Autres Dates', key: 'autres_dates', width: 30 }
+            ];
+
+            // Style de l'en-tête
+            worksheet.getRow(1).height = 35;
+            worksheet.getRow(1).font = { bold: true, color: { argb: 'FFFFFFFF' }, size: 12 };
+            worksheet.getRow(1).alignment = { vertical: 'middle', horizontal: 'center', wrapText: true };
+            worksheet.getRow(1).fill = {
+                type: 'pattern',
+                pattern: 'solid',
+                fgColor: { argb: 'FF7e5aa2' }
+            };
+
+            // Bordures ÉPAISSES pour l'en-tête
+            worksheet.getRow(1).eachCell((cell) => {
+                cell.border = {
+                    top: { style: 'medium', color: { argb: 'FF000000' } },
+                    left: { style: 'medium', color: { argb: 'FF000000' } },
+                    bottom: { style: 'medium', color: { argb: 'FF000000' } },
+                    right: { style: 'medium', color: { argb: 'FF000000' } }
+                };
+            });
+
+            let currentRow = 2;
+
+            // Ajouter les données avec fusion de cellules
+            dataPaie.forEach((row, employeIndex) => {
+                const startRow = currentRow;
+
+                // ✅ MODIFICATION : Extraire uniquement le nom (dernier mot)
+                const nomComplet = row.employe.split(' ');
+                const nomSeul = nomComplet[nomComplet.length - 1]; // Prend le dernier mot (le nom)
+
+                // Calculer le nombre maximum de lignes nécessaires pour cet employé
+                const rttDatesArray = row.rtt?.dates ? row.rtt.dates.split(' ; ') : [];
+                const cpDatesArray = row.cp?.dates ? row.cp.dates.split(' ; ') : [];
+                const aapDatesArray = row.aap?.dates ? row.aap.dates.split(' ; ') : [];
+                const amDatesArray = row.am?.dates ? row.am.dates.split(' ; ') : [];
+
+                // Gérer les "Autres"
+                let autresDatesArray: string[][] = [];
+                if (row.autres && row.autres.length > 0) {
+                    autresDatesArray = row.autres.map(a => a.dates.split(' ; '));
+                }
+                const maxAutresDates = Math.max(...autresDatesArray.map(arr => arr.length), 1);
+
+                const maxRows = Math.max(
+                    rttDatesArray.length || 1,
+                    cpDatesArray.length || 1,
+                    aapDatesArray.length || 1,
+                    amDatesArray.length || 1,
+                    maxAutresDates
+                );
+
+                // Ajouter les lignes nécessaires
+                for (let i = 0; i < maxRows; i++) {
+                    const rowData: any = {};
+
+                    // Première ligne : inclure nom et service (sans email)
+                    if (i === 0) {
+                        rowData.collaborateur = nomSeul; // ✅ Uniquement le nom
+                        rowData.service = row.service;
+                        rowData.rtt_nb = row.rtt?.nb || 0;
+                        rowData.cp_nb = row.cp?.nb || 0;
+                        rowData.aap_nb = row.aap?.nb || 0;
+                        rowData.am_nb = row.am?.nb || 0;
+
+                        // Autres (première ligne)
+                        if (row.autres && row.autres.length > 0) {
+                            rowData.autres_type = row.autres.map(a => a.type).join('\n');
+                            rowData.autres_nb = row.autres.map(a => a.nb).join('\n');
+                        }
+                    } else {
+                        rowData.collaborateur = '';
+                        rowData.service = '';
+                        rowData.rtt_nb = '';
+                        rowData.cp_nb = '';
+                        rowData.aap_nb = '';
+                        rowData.am_nb = '';
+                        rowData.autres_type = '';
+                        rowData.autres_nb = '';
+                    }
+
+                    // Dates RTT
+                    rowData.rtt_dates = rttDatesArray[i] || '';
+
+                    // Dates CP
+                    rowData.cp_dates = cpDatesArray[i] || '';
+
+                    // Dates AAP
+                    rowData.aap_dates = aapDatesArray[i] || '';
+
+                    // Dates AM
+                    rowData.am_dates = amDatesArray[i] || '';
+
+                    // Dates Autres
+                    if (row.autres && row.autres.length > 0) {
+                        const allAutresDates = row.autres.map(a => {
+                            const dates = a.dates.split(' ; ');
+                            return dates[i] || '';
+                        }).filter(d => d !== '').join(' | ');
+                        rowData.autres_dates = allAutresDates;
+                    } else {
+                        rowData.autres_dates = '';
+                    }
+
+                    worksheet.addRow(rowData);
+                    currentRow++;
+                }
+
+                const endRow = currentRow - 1;
+
+                // ✅ MODIFICATION : Fusionner les cellules (ajusté pour la nouvelle structure)
+                if (maxRows > 1) {
+                    worksheet.mergeCells(`A${startRow}:A${endRow}`); // Collaborateur
+                    worksheet.mergeCells(`B${startRow}:B${endRow}`); // Service
+                    worksheet.mergeCells(`C${startRow}:C${endRow}`); // RTT Nb
+                    worksheet.mergeCells(`E${startRow}:E${endRow}`); // CP Nb
+                    worksheet.mergeCells(`G${startRow}:G${endRow}`); // AAP Nb
+                    worksheet.mergeCells(`I${startRow}:I${endRow}`); // AM Nb
+                    worksheet.mergeCells(`K${startRow}:K${endRow}`); // Autres Type
+                    worksheet.mergeCells(`L${startRow}:L${endRow}`); // Autres Nb
+                }
+
+                // Appliquer les styles pour ce groupe de lignes
+                for (let r = startRow; r <= endRow; r++) {
+                    const currentRowObj = worksheet.getRow(r);
+                    currentRowObj.alignment = { vertical: 'middle', horizontal: 'center', wrapText: true };
+
+                    // Hauteur de ligne
+                    currentRowObj.height = 25;
+
+                    // ✅ MODIFICATION : Couleurs ajustées (colonnes décalées)
+                    currentRowObj.getCell(3).fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: 'FFE9D5FF' } }; // RTT Nb
+                    currentRowObj.getCell(4).fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: 'FFE9D5FF' } }; // RTT Dates
+
+                    currentRowObj.getCell(5).fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: 'FFDBEAFE' } }; // CP Nb
+                    currentRowObj.getCell(6).fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: 'FFDBEAFE' } }; // CP Dates
+
+                    currentRowObj.getCell(7).fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: 'FFD1FAE5' } }; // AAP Nb
+                    currentRowObj.getCell(8).fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: 'FFD1FAE5' } }; // AAP Dates
+
+                    currentRowObj.getCell(9).fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: 'FFFEE2E2' } }; // AM Nb
+                    currentRowObj.getCell(10).fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: 'FFFEE2E2' } }; // AM Dates
+
+                    currentRowObj.getCell(11).fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: 'FFFEF3C7' } }; // Autres Type
+                    currentRowObj.getCell(12).fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: 'FFFEF3C7' } }; // Autres Nb
+                    currentRowObj.getCell(13).fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: 'FFFEF3C7' } }; // Autres Dates
+
+                    // Bordures ÉPAISSES pour toutes les cellules
+                    currentRowObj.eachCell((cell) => {
+                        cell.border = {
+                            top: { style: 'medium', color: { argb: 'FF000000' } },
+                            left: { style: 'medium', color: { argb: 'FF000000' } },
+                            bottom: { style: 'medium', color: { argb: 'FF000000' } },
+                            right: { style: 'medium', color: { argb: 'FF000000' } }
+                        };
+                    });
+                }
+            });
+
+            // Générer le fichier Excel
+            const buffer = await workbook.xlsx.writeBuffer();
+            const blob = new Blob([buffer], {
+                type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+            });
+
+            const link = document.createElement('a');
+            link.href = URL.createObjectURL(blob);
+            link.download = `conges_paie_${moisLabel}_${annee}.xlsx`;
+            link.click();
+
+            toast.success("Export Excel réussi avec fusion de cellules !");
+        } catch (error) {
+            console.error('Erreur export Excel:', error);
+            toast.error("Erreur lors de l'export Excel");
+        }
+    };
+    const exporterCSV = () => {
+        if (dataPaie.length === 0) return toast.error("Aucune donnée à exporter");
+
+        const headers = [
+            'Employé', 'Email', 'Service',
+            'RTT Nb', 'RTT Dates',
+            'CP Nb', 'CP Dates',
+            'AAP Nb', 'AAP Dates',
+            'AM Nb', 'AM Dates',
+            'Autres Type', 'Autres Nb', 'Autres Dates'
+        ];
+
+        const rows = dataPaie.map(row => {
+            const baseData = [
+                row.employe,
+                row.email,
+                row.service,
+                row.rtt?.nb || 0,
+                row.rtt?.dates || '',
+                row.cp?.nb || 0,
+                row.cp?.dates || '',
+                row.aap?.nb || 0,
+                row.aap?.dates || '',
+                row.am?.nb || 0,
+                row.am?.dates || ''
+            ];
+
+            if (row.autres && row.autres.length > 0) {
+                const autresTypes = row.autres.map(a => a.type).join(' | ');
+                const autresNb = row.autres.map(a => a.nb).join(' | ');
+                const autresDates = row.autres.map(a => a.dates).join(' | ');
+                return [...baseData, autresTypes, autresNb, autresDates];
+            } else {
+                return [...baseData, '', '', ''];
+            }
+        });
+
+        const csvContent = [
+            headers.join(';'),
+            ...rows.map(row => row.join(';'))
+        ].join('\n');
+
+        const blob = new Blob(['\ufeff' + csvContent], { type: 'text/csv;charset=utf-8;' });
+        const link = document.createElement('a');
+        link.href = URL.createObjectURL(blob);
+        link.download = `conges_paie_${moisOptions.find(m => m.value === mois)?.label}_${annee}.csv`;
+        link.click();
+        toast.success("Export CSV réussi");
+    };
+
+    return (
+        <div className="min-h-screen bg-gradient-subtle">
+            <header className="bg-card border-b border-border shadow-card">
+                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
+                    <div className="flex items-center justify-between">
+                        <div className="flex items-center space-x-4">
+                            <Button variant="ghost" size="sm" onClick={() => navigate("/dashboard")}>
+                                <ArrowLeft className="w-4 h-4 mr-2" />
+                                Retour
+                            </Button>
+
+                            <div className="flex items-center space-x-3">
+                                <div className="w-10 h-10 rounded-xl flex items-center justify-center" style={{ backgroundColor: "#7e5aa2" }}>
+                                    <FileSpreadsheet className="w-5 h-5 text-primary-foreground" />
+                                </div>
+                                <h1 className="text-2xl font-bold text-foreground">Export pour fiche de paie</h1>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </header>
+
+            <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+                <Card className="shadow-elegant border-0 mb-8">
+                    <CardHeader>
+                        <CardTitle>Paramètres d'export</CardTitle>
+                        <CardDescription>Sélectionnez la période pour générer le rapport</CardDescription>
+                    </CardHeader>
+                    <CardContent>
+                        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+                            <div className="space-y-2">
+                                <Label>Mois</Label>
+                                <Select value={mois.toString()} onValueChange={(value) => setMois(parseInt(value))}>
+                                    <SelectTrigger><SelectValue /></SelectTrigger>
+                                    <SelectContent>
+                                        {moisOptions.map(option => (
+                                            <SelectItem key={option.value} value={option.value.toString()}>
+                                                {option.label}
+                                            </SelectItem>
+                                        ))}
+                                    </SelectContent>
+                                </Select>
+                            </div>
+                            <div className="space-y-2">
+                                <Label>Année</Label>
+                                <Select value={annee.toString()} onValueChange={(value) => setAnnee(parseInt(value))}>
+                                    <SelectTrigger><SelectValue /></SelectTrigger>
+                                    <SelectContent>
+                                        {[2023, 2024, 2025, 2026].map(year => (
+                                            <SelectItem key={year} value={year.toString()}>{year}</SelectItem>
+                                        ))}
+                                    </SelectContent>
+                                </Select>
+                            </div>
+                            {/* Bouton Générer le rapport toujours affiché avec fond mauve */}
+                            <div className="flex items-end">
+                                <Button
+                                    onClick={genererRapport}
+                                    disabled={loading}
+                                    className="w-full bg-[#7e5aa2] hover:bg-[#6b4891] text-white transition-smooth shadow-elegant"
+                                >
+                                    {loading ? 'Génération...' : 'Générer le rapport'}
+                                </Button>
+                            </div>
+                        </div>
+                    </CardContent>
+                </Card>
+
+                {/* Bouton Export Excel toujours affiché, grisé s’il n’y a pas de données */}
+                <div className="flex gap-4 mb-6">
+                    <Button
+                        onClick={exporterExcel}
+                        disabled={dataPaie.length === 0}
+                        variant="default"
+                        className="bg-[#7e5aa2] hover:bg-[#6b4891] text-white transition-smooth shadow-elegant"
+                    >
+                        <Download className="w-4 h-4 mr-2" />Export Excel (avec couleurs)
+                    </Button>
+                </div>
+
+                {/* Tableau des données uniquement si data présente */}
+                {dataPaie.length > 0 ? (
+                    <Card className="shadow-card border-0">
+                        <CardHeader>
+                            <CardTitle>Rapport des congés - {moisOptions.find(m => m.value === mois)?.label} {annee}</CardTitle>
+                            <CardDescription>
+                                AAP = Absence autorisée payée (ex : enfant malade, récup de JPOFS, etc) • AM = Arrêt maladie
+                            </CardDescription>
+                        </CardHeader>
+                        <CardContent>
+                            <div className="overflow-x-auto">
+                                <div className="border-[2px] border-black rounded-lg overflow-hidden">
+                                    <table className="w-full border-collapse">
+                                        <thead>
+                                            <tr className="border-b-[2px] border-black bg-gray-100">
+                                                <th className="font-bold text-black border-r-[2px] border-black p-4 text-left">
+                                                    Collaborateur
+                                                </th>
+                                                <th className="font-bold text-black border-r-[2px] border-black p-4 text-left">
+                                                    Service
+                                                </th>
+                                                <th className="font-bold text-black border-r-[2px] border-black p-4 text-center">
+                                                    RTT<br />
+                                                    <span className="text-xs font-normal">(Nb / Dates)</span>
+                                                </th>
+                                                <th className="font-bold text-black border-r-[2px] border-black p-4 text-center">
+                                                    CP<br />
+                                                    <span className="text-xs font-normal">(Nb / Dates)</span>
+                                                </th>
+                                                <th className="font-bold text-black border-r-[2px] border-black p-4 text-center">
+                                                    AAP<br />
+                                                    <span className="text-xs font-normal">(Nb / Dates)</span>
+                                                </th>
+                                                <th className="font-bold text-black border-r-[2px] border-black p-4 text-center">
+                                                    AM<br />
+                                                    <span className="text-xs font-normal">(Nb / Dates)</span>
+                                                </th>
+                                                <th className="font-bold text-black p-4 text-center">
+                                                    Autres<br />
+                                                    <span className="text-xs font-normal">(Type / Nb / Dates)</span>
+                                                </th>
+                                            </tr>
+                                        </thead>
+                                        <tbody>
+                                            {dataPaie.map((row, index) => (
+                                                <tr
+                                                    key={index}
+                                                    className="border-b-[2px] border-black last:border-b-0 hover:bg-gray-50"
+                                                >
+                                                    <td className="font-medium border-r-[2px] border-black p-4 align-top bg-white">
+                                                        {row.employe}
+                                                    </td>
+                                                    <td className="border-r-[2px] border-black p-4 align-top bg-white">
+                                                        {row.service}
+                                                    </td>
+                                                    <td className="text-center bg-white border-r-[2px] border-black p-4 align-top">
+                                                        {row.rtt && row.rtt.nb > 0 ? (
+                                                            <div className="space-y-2">
+                                                                <div className="font-semibold text-lg">{row.rtt.nb}</div>
+                                                                <div className="text-xs text-gray-600 space-y-1">
+                                                                    {row.rtt.dates.split(' ; ').map((date, idx) => (
+                                                                        <div key={idx} className="py-1 border-t border-gray-300 first:border-t-0">
+                                                                            {date}
+                                                                        </div>
+                                                                    ))}
+                                                                </div>
+                                                            </div>
+                                                        ) : (
+                                                            <span className="text-gray-400">-</span>
+                                                        )}
+                                                    </td>
+                                                    <td className="text-center bg-white border-r-[2px] border-black p-4 align-top">
+                                                        {row.cp && row.cp.nb > 0 ? (
+                                                            <div className="space-y-2">
+                                                                <div className="font-semibold text-lg">{row.cp.nb}</div>
+                                                                <div className="text-xs text-gray-600 space-y-1">
+                                                                    {row.cp.dates.split(' ; ').map((date, idx) => (
+                                                                        <div key={idx} className="py-1 border-t border-gray-300 first:border-t-0">
+                                                                            {date}
+                                                                        </div>
+                                                                    ))}
+                                                                </div>
+                                                            </div>
+                                                        ) : (
+                                                            <span className="text-gray-400">-</span>
+                                                        )}
+                                                    </td>
+                                                    <td className="text-center bg-white border-r-[2px] border-black p-4 align-top">
+                                                        {row.aap && row.aap.nb > 0 ? (
+                                                            <div className="space-y-2">
+                                                                <div className="font-semibold text-lg">{row.aap.nb}</div>
+                                                                <div className="text-xs text-gray-600 space-y-1">
+                                                                    {row.aap.dates.split(' ; ').map((date, idx) => (
+                                                                        <div key={idx} className="py-1 border-t border-gray-300 first:border-t-0">
+                                                                            {date}
+                                                                        </div>
+                                                                    ))}
+                                                                </div>
+                                                            </div>
+                                                        ) : (
+                                                            <span className="text-gray-400">-</span>
+                                                        )}
+                                                    </td>
+                                                    <td className="text-center bg-white border-r-[2px] border-black p-4 align-top">
+                                                        {row.am && row.am.nb > 0 ? (
+                                                            <div className="space-y-2">
+                                                                <div className="font-semibold text-lg">{row.am.nb}</div>
+                                                                <div className="text-xs text-gray-600 space-y-1">
+                                                                    {row.am.dates.split(' ; ').map((date, idx) => (
+                                                                        <div key={idx} className="py-1 border-t border-gray-300 first:border-t-0">
+                                                                            {date}
+                                                                        </div>
+                                                                    ))}
+                                                                </div>
+                                                            </div>
+                                                        ) : (
+                                                            <span className="text-gray-400">-</span>
+                                                        )}
+                                                    </td>
+                                                    <td className="text-center bg-white p-4 align-top">
+                                                        {row.autres && row.autres.length > 0 ? (
+                                                            <div className="space-y-3">
+                                                                {row.autres.map((autre, idx) => (
+                                                                    <div key={idx} className="space-y-2 pb-3 border-b-[2px] border-gray-300 last:border-0 last:pb-0">
+                                                                        <div className="text-xs font-medium text-gray-700">{autre.type}</div>
+                                                                        <div className="font-semibold text-lg">{autre.nb}</div>
+                                                                        <div className="text-xs text-gray-600 space-y-1">
+                                                                            {autre.dates.split(' ; ').map((date, dateIdx) => (
+                                                                                <div key={dateIdx} className="py-1 border-t border-gray-300 first:border-t-0">
+                                                                                    {date}
+                                                                                </div>
+                                                                            ))}
+                                                                        </div>
+                                                                    </div>
+                                                                ))}
+                                                            </div>
+                                                        ) : (
+                                                            <span className="text-gray-400">-</span>
+                                                        )}
+                                                    </td>
+                                                </tr>
+                                            ))}
+                                        </tbody>
+                                    </table>
+                                </div>
+                            </div>
+                        </CardContent>
+                    </Card>
+                ) : (
+                    <Card className="shadow-card border-0">
+                        <CardContent className="p-12 text-center">
+                            <FileSpreadsheet className="w-16 h-16 text-muted-foreground mx-auto mb-4 opacity-50" />
+                            <p className="text-muted-foreground text-lg">Sélectionnez une période et cliquez sur "Générer le rapport"</p>
+                        </CardContent>
+                    </Card>
+                )}
+            </main>
+        </div>
+    );
+};
+
+export default ExportPaie;
--- a/src/pages/GestionCompteurs.tsx
+++ b/src/pages/GestionCompteurs.tsx
@@ -0,0 +1,713 @@
+import { useState, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Badge } from "@/components/ui/badge";
+import { ArrowLeft, RefreshCw, Search, AlertTriangle, Settings, Edit } from "lucide-react";
+import { useNavigate } from "react-router-dom";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { toast } from "sonner";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger, DialogFooter } from "@/components/ui/dialog";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+
+interface Compteur {
+    id: number;
+    collaborateurId: number;
+    typeCongeId: number;
+    employe: string;
+    email: string;
+    service: string;
+    typeConge: string; // e.g. "Congé payé" or "RTT" or "CP"/"RTT"
+    annee: number;
+    total: number;
+    solde: number;
+    soldeReporte: number;
+    consomme: number;
+    typeContrat?: string;
+    role?: string;
+    estApprenti?: boolean;
+}
+
+const GestionCompteurs = () => {
+    const navigate = useNavigate();
+    const [compteurs, setCompteurs] = useState<Compteur[]>([]);
+    const [recherche, setRecherche] = useState("");
+    const [filtreService, setFiltreService] = useState("all");
+    const [filtreType, setFiltreType] = useState("all");
+    const [filtreAnnee, setFiltreAnnee] = useState("all");
+    const [selectedCompteur, setSelectedCompteur] = useState<Compteur | null>(null);
+    const [loading, setLoading] = useState(false);
+    const [showInitDialog, setShowInitDialog] = useState(false);
+    const [showEditDialog, setShowEditDialog] = useState(false);
+
+    const currentYear = new Date().getFullYear();
+    const [initForm, setInitForm] = useState({
+        anneeActuelle: currentYear,
+        cpActuel: 25,
+        rttActuel: 10,
+        anneePrecedente: currentYear - 1,
+        cpPrecedent: 25,
+        rttPrecedent: 10
+    });
+
+    const [editForm, setEditForm] = useState({
+        total: 0,
+        solde: 0
+    });
+
+    useEffect(() => {
+        chargerCompteurs();
+    }, []);
+
+    /**
+     * Utilitaire : fournit le token auth si présent
+     */
+    const getAuthHeaders = () => {
+        const token = localStorage.getItem('token');
+        return token ? { Authorization: `Bearer ${token}` } : {};
+    };
+
+    /**
+     * Charger la liste des compteurs (V2)
+     */
+    // Fonction actuelle (qui utilise l'API V2 du serveur RH)
+    const chargerCompteurs = async () => {
+        setLoading(true);
+        try {
+            const response = await fetch(`/api/getAllDetailedCounters?ts=${Date.now()}`)
+
+            if (!response.ok) {
+                throw new Error('Erreur lors du chargement');
+            }
+
+            const data = await response.json();
+            setCompteurs(data);
+        } catch (error: any) {
+            console.error('Erreur:', error);
+            toast.error(error.message || "Erreur lors du chargement des compteurs");
+        } finally {
+            setLoading(false);
+        }
+    };
+
+
+    /**
+     * Réinitialiser les compteurs côté V2.
+     * Ce endpoint supporte un paramètre facultatif `collaborateurId` pour ne recalculer qu'un collaborateur.
+     */
+    const reinitialiserCompteur = async (compteur: Compteur) => {
+        setLoading(true);
+        try {
+            console.log('🔄 Réinitialisation V2 pour collaborateur:', compteur.collaborateurId);
+
+            const payload: any = {
+                dateReference: new Date().toISOString().split('T')[0]
+            };
+
+            // On envoie le collaborateur pour limiter la réinitialisation si le backend le supporte
+            if (compteur?.collaborateurId) {
+                payload.collaborateurId = compteur.collaborateurId;
+            }
+
+            const response = await fetch('/api/v2/compteurs/reinitialiser', {
+                method: 'POST',
+                headers: {
+                    ...getAuthHeaders(),
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(payload)
+            });
+
+            const data = await response.json().catch(() => ({}));
+
+            if (!response.ok) {
+                throw new Error(data.message || 'Erreur serveur lors de la réinitialisation V2');
+            }
+
+            toast.success("Réinitialisation V2 lancée", {
+                description: data.message || "Les compteurs seront recalculés selon les règles V2."
+            });
+            setSelectedCompteur(null);
+            await chargerCompteurs();
+        } catch (error: any) {
+            console.error('❌ Erreur réinitialisation V2:', error);
+            toast.error(error.message || "Erreur lors de la réinitialisation V2");
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    /**
+     * Ouvrir le dialogue d'édition d'un compteur
+     */
+    const ouvrirEditionCompteur = (compteur: Compteur) => {
+        setSelectedCompteur(compteur);
+        setEditForm({
+            total: compteur.total,
+            solde: compteur.solde
+        });
+        setShowEditDialog(true);
+    };
+
+    /**
+     * Détermine le code du type de congé à envoyer au backend V2.
+     * Le backend V2 attend (dans notre convention) 'CP' ou 'RTT'.
+     */
+    const determinerCodeType = (typeConge: string) => {
+        if (!typeConge) return 'CP';
+        const t = typeConge.toLowerCase();
+        if (t.includes('rt') || t.includes('rtt')) return 'RTT';
+        if (t.includes('cong') || t.includes('cp')) return 'CP';
+        // fallback
+        return 'CP';
+    };
+
+    /**
+     * Modifier un compteur individuellement via l'API V2.
+     * Endpoint V2 attendu : PUT /api/v2/compteurs/update
+     * Payload envoyé : { collaborateurId, typeConge: 'CP'|'RTT', annee, nouveauTotal, nouveauSolde, source: 'RH_UI' }
+     */
+    const modifierCompteur = async () => {
+        if (!selectedCompteur) return;
+
+        if (editForm.solde > editForm.total) {
+            toast.error("Le solde ne peut pas être supérieur au total");
+            return;
+        }
+
+        setLoading(true);
+        try {
+            const payload = {
+                collaborateurId: selectedCompteur.collaborateurId,
+                // envoi d'un code simple pour la V2 ('CP' ou 'RTT')
+                typeConge: determinerCodeType(selectedCompteur.typeConge),
+                annee: selectedCompteur.annee,
+                nouveauTotal: parseFloat((editForm.total || 0).toString()),
+                nouveauSolde: parseFloat((editForm.solde || 0).toString()),
+                source: 'RH_UI' // utile pour l'historique côté backend
+            };
+
+            console.log('✏️ Envoi modification compteur V2:', payload);
+
+            const response = await fetch('/api/v2/compteurs/update', {
+                method: 'PUT',
+                headers: {
+                    ...getAuthHeaders(),
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(payload)
+            });
+
+            const data = await response.json().catch(() => ({}));
+
+            if (!response.ok) {
+                throw new Error(data.message || 'Erreur lors de la mise à jour V2');
+            }
+
+            toast.success("Compteur modifié (V2)");
+            setShowEditDialog(false);
+            setSelectedCompteur(null);
+            await chargerCompteurs();
+        } catch (error: any) {
+            console.error('❌ Erreur modifierCompteur V2:', error);
+            toast.error(error.message || "Erreur lors de la modification du compteur (V2)");
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    /**
+     * Initialiser tous les compteurs manuellement via V2.
+     * Endpoint V2 attendu : POST /api/v2/compteurs/initialiser-tous-manuel
+     * Payload : initForm
+     */
+    const initialiserTous = async () => {
+        setLoading(true);
+        try {
+            console.log('🔄 Initialisation manuelle V2 pour tous:', initForm);
+
+            const response = await fetch('/api/v2/compteurs/initialiser-tous-manuel', {
+                method: 'POST',
+                headers: {
+                    ...getAuthHeaders(),
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(initForm)
+            });
+
+            const data = await response.json().catch(() => ({}));
+
+            if (!response.ok) {
+                throw new Error(data.message || 'Erreur initialisation V2');
+            }
+
+            const apprentisMessage = data.apprentisTraites > 0
+                ? ` (${data.apprentisTraites} apprentis : CP uniquement)`
+                : '';
+
+            toast.success(`Compteurs initialisés (V2) pour ${data.totalEmployes || 'tous'} employés${apprentisMessage}`, {
+                description: `${data.compteursCrees || 0} créés, ${data.compteursMAJ || 0} mis à jour`,
+                duration: 5000
+            });
+
+            setShowInitDialog(false);
+            await chargerCompteurs();
+        } catch (error: any) {
+            console.error('❌ Erreur initialisation V2:', error);
+            toast.error(error.message || "Erreur lors de l'initialisation (V2)");
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const compteursFiltres = compteurs.filter(c => {
+        const matchRecherche = (c.employe?.toLowerCase() || '').includes(recherche.toLowerCase()) ||
+            (c.email?.toLowerCase() || '').includes(recherche.toLowerCase());
+        const matchService = filtreService === 'all' || c.service === filtreService;
+        const matchType = filtreType === 'all' || c.typeConge === filtreType;
+        const matchAnnee = filtreAnnee === 'all' || c.annee?.toString() === filtreAnnee;
+        return matchRecherche && matchService && matchType && matchAnnee;
+    }).sort((a, b) => {
+        if (a.annee !== b.annee) return b.annee - a.annee;
+        if (a.employe !== b.employe) return (a.employe || '').localeCompare(b.employe || '');
+        return (a.typeConge || '').localeCompare(b.typeConge || '');
+    });
+
+
+    const getStatutBadge = (compteur: Compteur) => {
+        const pourcentage = compteur.total > 0 ? (compteur.solde / compteur.total) * 100 : 0;
+
+        if (compteur.solde <= 0) {
+            return <Badge variant="destructive">Épuisé</Badge>;
+        } else if (pourcentage <= 20) {
+            return <Badge variant="outline" className="bg-orange-100 text-orange-700 border-orange-300">
+                Critique
+            </Badge>;
+        } else if (pourcentage <= 50) {
+            return <Badge variant="outline" className="bg-yellow-100 text-yellow-700 border-yellow-300">
+                Attention
+            </Badge>;
+        } else {
+            return <Badge variant="outline" className="bg-green-100 text-green-700 border-green-300">
+                Disponible
+            </Badge>;
+        }
+    };
+
+    const services = [...new Set(compteurs.map(c => c.service))];
+    const typesConge = [...new Set(compteurs.map(c => c.typeConge))];
+    const annees = [...new Set(compteurs.map(c => c.annee))].sort((a, b) => b - a);
+
+    return (
+        <div className="min-h-screen bg-gradient-subtle">
+            <header className="bg-card border-b border-border shadow-card">
+                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
+                    <div className="flex items-center justify-between">
+                        <div className="flex items-center space-x-4">
+                            <Button variant="ghost" size="sm" onClick={() => navigate("/dashboard")}>
+                                <ArrowLeft className="w-4 h-4 mr-2" />
+                                Retour
+                            </Button>
+                            <div className="flex items-center space-x-3">
+                                <div className="w-10 h-10 rounded-xl flex items-center justify-center" style={{ backgroundColor: "#7e5aa2" }}>
+                                    <RefreshCw className="w-5 h-5 text-primary-foreground" />
+                                </div>
+                                <h1 className="text-2xl font-bold text-foreground">Gestion des compteurs</h1>
+                            </div>
+                        </div>
+
+                        <Dialog open={showInitDialog} onOpenChange={setShowInitDialog}>
+                            <DialogTrigger asChild>
+                                <Button className="bg-gradient-primary">
+                                    <Settings className="w-4 h-4 mr-2" />
+                                    Initialiser tous les compteurs
+                                </Button>
+                            </DialogTrigger>
+                            <DialogContent className="max-w-2xl">
+                                <DialogHeader>
+                                    <DialogTitle>Initialisation manuelle des compteurs </DialogTitle>
+                                    <DialogDescription>
+                                        Définir les valeurs pour l'année en cours et l'année précédente (demi-journées acceptées : ex. 25.5)
+                                    </DialogDescription>
+                                </DialogHeader>
+
+                                <div className="space-y-6 py-4">
+                                    <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 flex items-start gap-3">
+                                        <AlertTriangle className="w-5 h-5 text-blue-600 flex-shrink-0 mt-0.5" />
+                                        <div className="text-sm">
+                                            <p className="font-semibold text-blue-900 mb-1">Information</p>
+                                            <p className="text-blue-700">
+                                                Les <strong>apprentis</strong> recevront uniquement des <strong>Congés Payés</strong>.
+                                                Les RTT ne seront pas créés pour eux.
+                                            </p>
+                                        </div>
+                                    </div>
+
+                                    <div className="border rounded-lg p-4 bg-primary/5">
+                                        <h3 className="font-semibold mb-4 text-lg">Année {initForm.anneeActuelle}</h3>
+                                        <div className="grid grid-cols-2 gap-4">
+                                            <div className="space-y-2">
+                                                <Label htmlFor="cpActuel">Congés Payés (CP)</Label>
+                                                <Input
+                                                    id="cpActuel"
+                                                    type="number"
+                                                    step="0.5"
+                                                    value={initForm.cpActuel}
+                                                    onChange={(e) => setInitForm({ ...initForm, cpActuel: parseFloat(e.target.value) || 0 })}
+                                                    min={0}
+                                                />
+                                                <p className="text-xs text-muted-foreground">Pour tous les collaborateurs</p>
+                                            </div>
+                                            <div className="space-y-2">
+                                                <Label htmlFor="rttActuel">RTT</Label>
+                                                <Input
+                                                    id="rttActuel"
+                                                    type="number"
+                                                    step="0.5"
+                                                    value={initForm.rttActuel}
+                                                    onChange={(e) => setInitForm({ ...initForm, rttActuel: parseFloat(e.target.value) || 0 })}
+                                                    min={0}
+                                                />
+                                                <p className="text-xs text-muted-foreground">Sauf apprentis</p>
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                    <div className="border rounded-lg p-4 bg-muted/30">
+                                        <h3 className="font-semibold mb-4 text-lg">Année {initForm.anneePrecedente} (N-1)</h3>
+                                        <div className="grid grid-cols-2 gap-4">
+                                            <div className="space-y-2">
+                                                <Label htmlFor="cpPrecedent">Congés Payés (CP)</Label>
+                                                <Input
+                                                    id="cpPrecedent"
+                                                    type="number"
+                                                    step="0.5"
+                                                    value={initForm.cpPrecedent}
+                                                    onChange={(e) => setInitForm({ ...initForm, cpPrecedent: parseFloat(e.target.value) || 0 })}
+                                                    min={0}
+                                                />
+                                            </div>
+                                            <div className="space-y-2">
+                                                <Label htmlFor="rttPrecedent">RTT</Label>
+                                                <Input
+                                                    id="rttPrecedent"
+                                                    type="number"
+                                                    step="0.5"
+                                                    value={initForm.rttPrecedent}
+                                                    onChange={(e) => setInitForm({ ...initForm, rttPrecedent: parseFloat(e.target.value) || 0 })}
+                                                    min={0}
+                                                />
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                    <div className="bg-warning/10 border border-warning/20 rounded-lg p-4 flex items-start gap-3">
+                                        <AlertTriangle className="w-5 h-5 text-warning flex-shrink-0 mt-0.5" />
+                                        <div className="text-sm">
+                                            <p className="font-semibold text-warning mb-1">Attention</p>
+                                            <p className="text-muted-foreground">
+                                                Cette opération va initialiser ou mettre à jour les compteurs pour <strong>TOUS les collaborateurs actifs</strong>.
+                                            </p>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <DialogFooter>
+                                    <Button variant="outline" onClick={() => setShowInitDialog(false)}>
+                                        Annuler
+                                    </Button>
+                                    <Button
+                                        onClick={initialiserTous}
+                                        disabled={loading}
+                                        className="bg-gradient-primary"
+                                    >
+                                        {loading ? 'Initialisation...' : 'Confirmer l\'initialisation (V2)'}
+                                    </Button>
+                                </DialogFooter>
+                            </DialogContent>
+                        </Dialog>
+                    </div>
+                </div>
+            </header>
+
+            <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+                <Card className="shadow-card border-0 mb-8">
+                    <CardContent className="p-6">
+                        <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+                            <div className="relative">
+                                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+                                <Input
+                                    placeholder="Rechercher un employé..."
+                                    value={recherche}
+                                    onChange={(e) => setRecherche(e.target.value)}
+                                    className="pl-10"
+                                />
+                            </div>
+                            <Select value={filtreService} onValueChange={setFiltreService}>
+                                <SelectTrigger><SelectValue placeholder="Service" /></SelectTrigger>
+                                <SelectContent>
+                                    <SelectItem value="all">Tous les services</SelectItem>
+                                    {services.map(service => (
+                                        <SelectItem key={service} value={service}>{service}</SelectItem>
+                                    ))}
+                                </SelectContent>
+                            </Select>
+                            <Select value={filtreType} onValueChange={setFiltreType}>
+                                <SelectTrigger><SelectValue placeholder="Type de congé" /></SelectTrigger>
+                                <SelectContent>
+                                    <SelectItem value="all">Tous les types</SelectItem>
+                                    {typesConge.map(type => (
+                                        <SelectItem key={type} value={type}>{type}</SelectItem>
+                                    ))}
+                                </SelectContent>
+                            </Select>
+                            <Select value={filtreAnnee} onValueChange={setFiltreAnnee}>
+                                <SelectTrigger><SelectValue placeholder="Année" /></SelectTrigger>
+                                <SelectContent>
+                                    <SelectItem value="all">Toutes les années</SelectItem>
+                                    {annees.map(annee => (
+                                        <SelectItem key={annee} value={annee.toString()}>
+                                            {annee} {annee === currentYear && '(en cours)'}
+                                        </SelectItem>
+                                    ))}
+                                </SelectContent>
+                            </Select>
+                        </div>
+                    </CardContent>
+                </Card>
+
+                <Card className="shadow-card border-0">
+                    <CardHeader>
+                        <CardTitle>Compteurs de congés</CardTitle>
+                        <CardDescription>
+                            {compteursFiltres.length} compteur{compteursFiltres.length > 1 ? 's' : ''} affiché{compteursFiltres.length > 1 ? 's' : ''}
+                        </CardDescription>
+                    </CardHeader>
+                    <CardContent>
+                        <div className="overflow-x-auto">
+                            <Table>
+                                <TableHeader>
+                                    <TableRow>
+                                        <TableHead>Collaborateur</TableHead>
+                                        <TableHead>Service</TableHead>
+                                        <TableHead>Type</TableHead>
+                                        <TableHead className="text-center">Année</TableHead>
+                                        <TableHead className="text-right">Total</TableHead>
+                                        <TableHead className="text-right">Consommé</TableHead>
+                                        <TableHead className="text-right">Solde</TableHead>
+                                        <TableHead className="text-center">Statut</TableHead>
+                                        <TableHead className="text-center">Actions</TableHead>
+                                    </TableRow>
+                                </TableHeader>
+                                <TableBody>
+                                    {compteursFiltres.map((compteur, index) => {
+                                        const estApprenti = compteur.estApprenti ||
+                                            compteur.typeContrat === 'Apprentissage' ||
+                                            compteur.role === 'Apprenti' ||
+                                            compteur.role?.toLowerCase().includes('apprenti');
+
+                                        const estRTTApprenti = estApprenti && (compteur.typeConge.toLowerCase().includes('rtt') || compteur.typeConge === 'RTT');
+
+                                        return (
+                                            <TableRow
+                                                key={index}
+                                                className={estRTTApprenti ? 'bg-orange-50/50' : ''}
+                                            >
+                                                <TableCell>
+                                                    <div>
+                                                        <div className="flex items-center gap-2">
+                                                            <p className="font-medium">{compteur.employe}</p>
+                                                            {estApprenti && (
+                                                                <Badge variant="outline" className="bg-blue-100 text-blue-700 border-blue-300 text-xs">
+                                                                    Apprenti
+                                                                </Badge>
+                                                            )}
+                                                        </div>
+                                                        <p className="text-sm text-muted-foreground">{compteur.email}</p>
+                                                        {estRTTApprenti && (
+                                                            <p className="text-xs text-orange-600 font-medium mt-1">
+                                                                ⚠️ Apprenti - Pas de RTT normalement
+                                                            </p>
+                                                        )}
+                                                    </div>
+                                                </TableCell>
+                                                <TableCell>{compteur.service}</TableCell>
+                                                <TableCell>
+                                                    <Badge
+                                                        variant="outline"
+                                                        className={estRTTApprenti ? 'border-orange-400 text-orange-700' : ''}
+                                                    >
+                                                        {compteur.typeConge}
+                                                    </Badge>
+                                                </TableCell>
+                                                <TableCell className="text-center">
+                                                    <div className="flex items-center justify-center gap-2">
+                                                        <span className="font-medium">{compteur.annee}</span>
+                                                        {compteur.annee === currentYear && (
+                                                            <Badge variant="outline" className="bg-blue-100 text-blue-700 border-blue-300 text-xs">
+                                                                En cours
+                                                            </Badge>
+                                                        )}
+                                                        {compteur.annee === currentYear - 1 && (
+                                                            <Badge variant="outline" className="bg-gray-100 text-gray-600 border-gray-300 text-xs">
+                                                                N-1
+                                                            </Badge>
+                                                        )}
+                                                    </div>
+                                                </TableCell>
+                                                <TableCell className="text-right font-medium">{compteur.total}</TableCell>
+                                                <TableCell className="text-right text-muted-foreground">{compteur.consomme}</TableCell>
+                                                <TableCell className="text-right">
+                                                    <span className={`font-bold text-lg ${compteur.solde <= 0 ? 'text-destructive' : compteur.total > 0 && compteur.solde / compteur.total <= 0.2 ? 'text-orange-600' : 'text-green-600'}`}>
+                                                        {compteur.solde}
+                                                    </span>
+                                                </TableCell>
+                                                <TableCell className="text-center">
+                                                    {getStatutBadge(compteur)}
+                                                </TableCell>
+                                                <TableCell className="text-center">
+                                                    <div className="flex gap-2 justify-center">
+                                                        <Button
+                                                            variant="outline"
+                                                            size="sm"
+                                                            onClick={() => ouvrirEditionCompteur(compteur)}
+                                                            title="Modifier le compteur"
+                                                        >
+                                                            <Edit className="w-4 h-4" />
+                                                        </Button>
+
+                                                        <Dialog>
+                                                            <DialogTrigger asChild>
+                                                                <Button
+                                                                    variant="outline"
+                                                                    size="sm"
+                                                                    onClick={() => setSelectedCompteur(compteur)}
+                                                                    title="Réinitialiser le compteur (V2)"
+                                                                >
+                                                                    <RefreshCw className="w-4 h-4" />
+                                                                </Button>
+                                                            </DialogTrigger>
+                                                            <DialogContent>
+                                                                <DialogHeader>
+                                                                    <DialogTitle>Réinitialiser (V2)</DialogTitle>
+                                                                   
+                                                                </DialogHeader>
+                                                                <div className="py-4 space-y-4">
+                                                                    {estRTTApprenti && (
+                                                                        <div className="bg-orange-50 border border-orange-200 rounded-lg p-4 flex items-start gap-3">
+                                                                            <AlertTriangle className="w-5 h-5 text-orange-600 flex-shrink-0 mt-0.5" />
+                                                                            <div className="text-sm">
+                                                                                <p className="font-semibold text-orange-900 mb-1">Attention</p>
+                                                                                <p className="text-orange-700">
+                                                                                    Ce collaborateur est <strong>apprenti</strong> et ne devrait normalement pas avoir de compteur RTT.
+                                                                                </p>
+                                                                            </div>
+                                                                        </div>
+                                                                    )}
+                                                                    <div className="bg-warning/10 border border-warning/20 rounded-lg p-4 flex items-start gap-3">
+                                                                        <AlertTriangle className="w-5 h-5 text-warning flex-shrink-0 mt-0.5" />
+                                                                        <div className="text-sm">
+                                                                            <p className="font-semibold text-warning mb-1">Note</p>
+                                                                            <p className="text-muted-foreground">
+                                                                                La réinitialisation V2 applique les règles d'acquisition, d'arrêtés et de report. Pour modifier un compteur individuellement, utilisez le bouton "Modifier".
+                                                                            </p>
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                                <DialogFooter>
+                                                                    <Button variant="outline" onClick={() => setSelectedCompteur(null)}>
+                                                                        Annuler
+                                                                    </Button>
+                                                                    <Button
+                                                                        onClick={() => reinitialiserCompteur(compteur)}
+                                                                        disabled={loading}
+                                                                        className="bg-gradient-primary"
+                                                                    >
+                                                                        {loading ? 'Réinitialisation...' : 'Réinitialiser (V2)'}
+                                                                    </Button>
+                                                                </DialogFooter>
+                                                            </DialogContent>
+                                                        </Dialog>
+                                                    </div>
+                                                </TableCell>
+                                            </TableRow>
+                                        );
+                                    })}
+                                </TableBody>
+                            </Table>
+                        </div>
+                    </CardContent>
+                </Card>
+            </main>
+
+            <Dialog open={showEditDialog} onOpenChange={setShowEditDialog}>
+                <DialogContent>
+                    <DialogHeader>
+                        <DialogTitle>Modifier le compteur (V2)</DialogTitle>
+                        <DialogDescription>
+                            {selectedCompteur && `${selectedCompteur.employe} - ${selectedCompteur.typeConge} ${selectedCompteur.annee}`}
+                        </DialogDescription>
+                    </DialogHeader>
+
+                    <div className="space-y-4 py-4">
+                        <div className="space-y-2">
+                            <Label htmlFor="editTotal">Total de jours</Label>
+                            <Input
+                                id="editTotal"
+                                type="number"
+                                step="0.5"
+                                value={editForm.total}
+                                onChange={(e) => setEditForm({ ...editForm, total: parseFloat(e.target.value) || 0 })}
+                                min={0}
+                            />
+                            <p className="text-xs text-muted-foreground">Accepte les demi-journées (ex: 25.5)</p>
+                        </div>
+
+                        <div className="space-y-2">
+                            <Label htmlFor="editSolde">Solde disponible</Label>
+                            <Input
+                                id="editSolde"
+                                type="number"
+                                step="0.5"
+                                value={editForm.solde}
+                                onChange={(e) => setEditForm({ ...editForm, solde: parseFloat(e.target.value) || 0 })}
+                                min={0}
+                                max={editForm.total}
+                            />
+                            <p className="text-xs text-muted-foreground">
+                                Le solde ne peut pas dépasser le total
+                            </p>
+                        </div>
+
+                        {selectedCompteur && (
+                            <div className="bg-muted/30 rounded-lg p-3 text-sm">
+                                <p className="font-semibold mb-2">Informations actuelles</p>
+                                <div className="space-y-1 text-muted-foreground">
+                                    <p>Total actuel: <span className="font-medium text-foreground">{selectedCompteur.total} jours</span></p>
+                                    <p>Solde actuel: <span className="font-medium text-foreground">{selectedCompteur.solde} jours</span></p>
+                                    <p>Consommé: <span className="font-medium text-foreground">{selectedCompteur.consomme} jours</span></p>
+                                </div>
+                            </div>
+                        )}
+                    </div>
+
+                    <DialogFooter>
+                        <Button variant="outline" onClick={() => setShowEditDialog(false)}>
+                            Annuler
+                        </Button>
+                        <Button
+                            onClick={modifierCompteur}
+                            disabled={loading}
+                            className="bg-gradient-primary"
+                        >
+                            {loading ? 'Modification...' : 'Enregistrer (V2)'}
+                        </Button>
+                    </DialogFooter>
+                </DialogContent>
+            </Dialog>
+        </div>
+    );
+};
+
+export default GestionCompteurs;
--- a/src/pages/GestionRecuperation.tsx
+++ b/src/pages/GestionRecuperation.tsx
@@ -0,0 +1,748 @@
+import { useState, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Badge } from "@/components/ui/badge";
+import { ArrowLeft, Plus, Minus, Search, Clock } from "lucide-react";
+import { useNavigate } from "react-router-dom";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { toast } from "sonner";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Textarea } from "@/components/ui/textarea";
+
+interface Employe {
+    id: number;
+    nomComplet: string;
+    email: string;
+    service: string;
+    serviceId?: number;
+    campus?: string;
+    campusId?: number;
+    role: string;
+    Actif: number;
+}
+
+interface CompteurRecup {
+    id: number;
+    collaborateurId: number;
+    employe: string;
+    email: string;
+    service: string;
+    annee: number;
+    total: number;
+    solde: number;
+    consomme: number;
+}
+
+const GestionRecuperation = () => {
+    const navigate = useNavigate();
+    const [employes, setEmployes] = useState<Employe[]>([]);
+    const [compteursRecup, setCompteursRecup] = useState<CompteurRecup[]>([]);
+    const [selectedEmployeId, setSelectedEmployeId] = useState<string>("");
+    const [nombreJours, setNombreJours] = useState<string>("1");
+    const [commentaire, setCommentaire] = useState("");
+    const [loading, setLoading] = useState(false);
+    const [recherche, setRecherche] = useState("");
+    const [showAddDialog, setShowAddDialog] = useState(false);
+    const [showRemoveDialog, setShowRemoveDialog] = useState(false);
+    const [selectedCompteur, setSelectedCompteur] = useState<CompteurRecup | null>(null);
+    const [selectedDate, setSelectedDate] = useState<string>("");
+    const [periodeJournee, setPeriodeJournee] = useState<string>("");
+
+    // ⭐ FILTRES POUR LA POP-UP
+    const [selectedCampus, setSelectedCampus] = useState<string>("");
+    const [selectedService, setSelectedService] = useState<string>("");
+
+    const currentYear = new Date().getFullYear();
+
+    // ⭐ FONCTION HELPER POUR FORMATER LES NOMBRES
+    const formatNumber = (value: any): string => {
+        const num = parseFloat(value?.toString() || '0');
+        return isNaN(num) ? '0.0' : num.toFixed(1);
+    };
+
+    // ⭐ FONCTION HELPER POUR PARSER LES NOMBRES
+    const parseNumber = (value: any): number => {
+        const num = parseFloat(value?.toString() || '0');
+        return isNaN(num) ? 0 : num;
+    };
+
+    useEffect(() => {
+        chargerEmployes();
+        chargerCompteursRecup();
+    }, []);
+
+    const chargerEmployes = async () => {
+        try {
+            const token = localStorage.getItem('token');
+            const response = await fetch('/api/employes', {
+                headers: { 'Authorization': `Bearer ${token}` }
+            });
+            const data = await response.json();
+
+            // ⭐ Enrichir avec les infos de campus si nécessaire
+            const employesAvecCampus = await Promise.all(
+                data
+                    .filter((e: any) => e.Actif === 1 || e.Actif === null)
+                    .map(async (e: any) => {
+                        // Si le campus n'est pas déjà dans les données
+                        if (!e.campus && e.serviceId) {
+                            try {
+                                // Récupérer les infos du service pour avoir le campus
+                                const serviceResp = await fetch(
+                                    `/api/services/${e.serviceId}`,
+                                    { headers: { 'Authorization': `Bearer ${token}` } }
+                                );
+                                const serviceData = await serviceResp.json();
+                                return {
+                                    ...e,
+                                    campus: serviceData.campus || 'Sans campus'
+                                };
+                            } catch {
+                                return { ...e, campus: 'Sans campus' };
+                            }
+                        }
+                        return { ...e, campus: e.campus || 'Sans campus' };
+                    })
+            );
+
+            setEmployes(employesAvecCampus);
+        } catch (error) {
+            toast.error("Erreur lors du chargement des collaborateurs");
+        }
+    };
+
+    const chargerCompteursRecup = async () => {
+        try {
+            const token = localStorage.getItem('token');
+            const response = await fetch('/api/compteurs', {
+                headers: { 'Authorization': `Bearer ${token}` }
+            });
+            const data = await response.json();
+
+            // Filtrer uniquement les compteurs de récupération de l'année en cours
+            const compteursRecupFiltres = data
+                .filter((c: any) => c.typeConge === 'Récupération' && c.annee === currentYear)
+                .map((c: any) => ({
+                    ...c,
+                    total: parseNumber(c.total),
+                    solde: parseNumber(c.solde),
+                    consomme: parseNumber(c.consomme)
+                }));
+
+            setCompteursRecup(compteursRecupFiltres);
+        } catch (error) {
+            toast.error("Erreur lors du chargement des compteurs");
+        }
+    };
+    const ajouterRecuperation = async () => {
+        if (!selectedEmployeId || !selectedDate || !periodeJournee) {
+            toast.error("Veuillez remplir tous les champs obligatoires");
+            return;
+        }
+
+        // ⭐ Validation avec confirmation
+        const dateObj = new Date(selectedDate);
+        const dayOfWeek = dateObj.getDay();
+
+        if (dayOfWeek !== 6) {
+            const dayNames = ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'];
+            const confirmer = window.confirm(
+                `⚠️ ATTENTION\n\n` +
+                `Le jour sélectionné est un ${dayNames[dayOfWeek]}, pas un samedi.\n\n` +
+                `Les récupérations sont normalement réservées aux samedis travaillés.\n\n` +
+                `Êtes-vous sûr de vouloir continuer ?`
+            );
+
+            if (!confirmer) {
+                setLoading(false);
+                return;
+            }
+        }
+
+        setLoading(true);
+        try {
+            const token = localStorage.getItem('token');
+            const response = await fetch('/api/compteurs/saisir-recup-collaborateur', {
+                method: 'POST',
+                headers: {
+                    'Authorization': `Bearer ${token}`,
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                    collaborateur_id: parseInt(selectedEmployeId),
+                    date: selectedDate,
+                    periode_journee: periodeJournee,
+                    commentaire: commentaire.trim() || undefined
+                })
+            });
+
+            if (response.status === 403) {
+                toast.error("Accès non autorisé", {
+                    description: "Seuls les administrateurs et RH peuvent gérer les récupérations"
+                });
+                setLoading(false);
+                return;
+            }
+
+            const data = await response.json();
+
+            if (data.success) {
+                toast.success(`Récupération enregistrée pour ${data.collaborateur}`, {
+                    description: `${data.date} (${data.periode}) : +${data.jours_ajoutes}j`
+                });
+                setShowAddDialog(false);
+                resetForm();
+                chargerCompteursRecup();
+            } else {
+                toast.error(data.message || 'Erreur lors de l\'enregistrement', {
+                    description: "Vérifiez que la date sélectionnée est bien un samedi",
+                    duration: 5000
+                });
+            }
+        } catch (error: any) {
+            toast.error("Erreur lors de l'ajout", {
+                description: error.message || "Une erreur est survenue"
+            });
+        } finally {
+            setLoading(false);
+        }
+    };
+    const retirerRecuperation = async () => {
+        if (!selectedCompteur || !nombreJours || parseFloat(nombreJours) <= 0) {
+            toast.error("Veuillez remplir tous les champs obligatoires");
+            return;
+        }
+
+        if (parseFloat(nombreJours) > selectedCompteur.solde) {
+            toast.error("Le nombre de jours à retirer ne peut pas dépasser le solde disponible");
+            return;
+        }
+
+        setLoading(true);
+        try {
+            const token = localStorage.getItem('token');
+            const response = await fetch('/api/compteurs/retirer-recup', {
+                method: 'POST',
+                headers: {
+                    'Authorization': `Bearer ${token}`,
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                    collaborateurId: selectedCompteur.collaborateurId,
+                    nombreJours: parseFloat(nombreJours),
+                    commentaire: commentaire.trim() || undefined
+                })
+            });
+
+            if (response.status === 403) {
+                toast.error("Accès non autorisé", {
+                    description: "Seuls les administrateurs et RH peuvent gérer les récupérations"
+                });
+                setLoading(false);
+                return;
+            }
+
+            const data = await response.json();
+
+            if (data.success) {
+                toast.success(`${nombreJours}j de récupération retirés pour ${data.collaborateur}`, {
+                    description: commentaire ? `Motif: ${commentaire}` : undefined
+                });
+                setShowRemoveDialog(false);
+                resetForm();
+                chargerCompteursRecup();
+            } else {
+                throw new Error(data.message || 'Erreur serveur');
+            }
+        } catch (error: any) {
+            toast.error(error.message || "Erreur lors du retrait");
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const resetForm = () => {
+        setSelectedEmployeId("");
+        setSelectedDate("");
+        setPeriodeJournee("");
+        setCommentaire("");
+        setSelectedCompteur(null);
+        setSelectedCampus("");
+        setSelectedService("");
+    };
+
+    const ouvrirDialogAjout = () => {
+        resetForm();
+        setShowAddDialog(true);
+    };
+
+    const ouvrirDialogRetrait = (compteur: CompteurRecup) => {
+        resetForm();
+        setSelectedCompteur(compteur);
+        setShowRemoveDialog(true);
+    };
+
+    const employesFiltres = employes.filter(e =>
+        e.nomComplet.toLowerCase().includes(recherche.toLowerCase()) ||
+        e.email.toLowerCase().includes(recherche.toLowerCase())
+    );
+
+    const compteursFiltres = compteursRecup.filter(c =>
+        c.employe.toLowerCase().includes(recherche.toLowerCase()) ||
+        c.email.toLowerCase().includes(recherche.toLowerCase())
+    );
+
+    // ⭐ LOGIQUE DE FILTRAGE POUR LA POP-UP
+
+    // 1. Extraire les campus uniques
+    const campusDisponibles = Array.from(new Set(employes.map(e => e.campus || 'Sans campus')))
+        .sort();
+
+    // 2. Services filtrés par campus sélectionné
+    const servicesDisponibles = selectedCampus
+        ? Array.from(new Set(
+            employes
+                .filter(e => (e.campus || 'Sans campus') === selectedCampus)
+                .map(e => e.service || 'Sans service')
+        )).sort()
+        : Array.from(new Set(employes.map(e => e.service || 'Sans service'))).sort();
+
+    // 3. Employés filtrés par campus ET service
+    const employesFiltre = employes.filter(e => {
+        if (selectedCampus && (e.campus || 'Sans campus') !== selectedCampus) return false;
+        if (selectedService && (e.service || 'Sans service') !== selectedService) return false;
+        return true;
+    }).sort((a, b) => a.nomComplet.localeCompare(b.nomComplet));
+
+    // ⭐ CALCUL DES TOTAUX SÉCURISÉ
+    const totalJoursDisponibles = compteursRecup.reduce((sum, c) => sum + parseNumber(c.solde), 0);
+    const totalJoursConsommes = compteursRecup.reduce((sum, c) => sum + parseNumber(c.consomme), 0);
+
+    return (
+        <div className="min-h-screen bg-gradient-subtle">
+            <header className="bg-card border-b border-border shadow-card">
+                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
+                    <div className="flex items-center justify-between">
+                        <div className="flex items-center space-x-4">
+                            <Button variant="ghost" size="sm" onClick={() => navigate("/dashboard")}>
+                                <ArrowLeft className="w-4 h-4 mr-2" />
+                                Retour
+                            </Button>
+                            <div className="flex items-center space-x-3">
+                                <div className="w-10 h-10 rounded-xl bg-purple-600 flex items-center justify-center">
+                                    <Clock className="w-5 h-5 text-white" />
+                                </div>
+                                <div>
+                                    <h1 className="text-2xl font-bold text-foreground">Gestion des récupérations</h1>
+                                    <p className="text-sm text-muted-foreground">Samedis travaillés</p>
+                                </div>
+                            </div>
+                        </div>
+
+                        <Button onClick={ouvrirDialogAjout} className="bg-gradient-primary">
+                            <Plus className="w-4 h-4 mr-2" />
+                            Ajouter des jours
+                        </Button>
+                    </div>
+                </div>
+            </header>
+
+            <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+                {/* Statistiques */}
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
+                    <Card className="shadow-card border-0">
+                        <CardContent className="p-6">
+                            <div className="flex items-center justify-between">
+                                <div>
+                                    <p className="text-sm text-muted-foreground mb-1">Compteurs actifs</p>
+                                    <p className="text-3xl font-bold text-foreground">{compteursRecup.length}</p>
+                                </div>
+                                <div className="w-12 h-12 rounded-xl bg-purple-100 flex items-center justify-center">
+                                    <Clock className="w-6 h-6 text-purple-600" />
+                                </div>
+                            </div>
+                        </CardContent>
+                    </Card>
+
+                    <Card className="shadow-card border-0">
+                        <CardContent className="p-6">
+                            <div className="flex items-center justify-between">
+                                <div>
+                                    <p className="text-sm text-muted-foreground mb-1">Total jours disponibles</p>
+                                    <p className="text-3xl font-bold text-foreground">
+                                        {formatNumber(totalJoursDisponibles)}
+                                    </p>
+                                </div>
+                                <div className="w-12 h-12 rounded-xl bg-green-100 flex items-center justify-center">
+                                    <Plus className="w-6 h-6 text-green-600" />
+                                </div>
+                            </div>
+                        </CardContent>
+                    </Card>
+
+                    <Card className="shadow-card border-0">
+                        <CardContent className="p-6">
+                            <div className="flex items-center justify-between">
+                                <div>
+                                    <p className="text-sm text-muted-foreground mb-1">Total jours consommés</p>
+                                    <p className="text-3xl font-bold text-foreground">
+                                        {formatNumber(totalJoursConsommes)}
+                                    </p>
+                                </div>
+                                <div className="w-12 h-12 rounded-xl bg-orange-100 flex items-center justify-center">
+                                    <Minus className="w-6 h-6 text-orange-600" />
+                                </div>
+                            </div>
+                        </CardContent>
+                    </Card>
+                </div>
+
+                {/* Recherche */}
+                <Card className="shadow-card border-0 mb-8">
+                    <CardContent className="p-6">
+                        <div className="relative">
+                            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+                            <Input
+                                placeholder="Rechercher un collaborateur..."
+                                value={recherche}
+                                onChange={(e) => setRecherche(e.target.value)}
+                                className="pl-10"
+                            />
+                        </div>
+                    </CardContent>
+                </Card>
+
+                {/* Liste des compteurs */}
+                <Card className="shadow-card border-0">
+                    <CardHeader>
+                        <CardTitle>Compteurs de récupération {currentYear}</CardTitle>
+                        <CardDescription>
+                            {compteursFiltres.length} compteur{compteursFiltres.length > 1 ? 's' : ''} affiché{compteursFiltres.length > 1 ? 's' : ''}
+                        </CardDescription>
+                    </CardHeader>
+                    <CardContent>
+                        {compteursFiltres.length > 0 ? (
+                            <div className="overflow-x-auto">
+                                <Table>
+                                    <TableHeader>
+                                        <TableRow>
+                                            <TableHead>Collaborateur</TableHead>
+                                            <TableHead>Service</TableHead>
+                                            <TableHead className="text-right">Total accumulé</TableHead>
+                                            <TableHead className="text-right">Consommé</TableHead>
+                                            <TableHead className="text-right">Solde disponible</TableHead>
+                                            <TableHead className="text-center">Actions</TableHead>
+                                        </TableRow>
+                                    </TableHeader>
+                                    <TableBody>
+                                        {compteursFiltres.map((compteur) => (
+                                            <TableRow key={compteur.id}>
+                                                <TableCell>
+                                                    <div>
+                                                        <p className="font-medium">{compteur.employe}</p>
+                                                        <p className="text-sm text-muted-foreground">{compteur.email}</p>
+                                                    </div>
+                                                </TableCell>
+                                                <TableCell>{compteur.service}</TableCell>
+                                                <TableCell className="text-right font-medium">
+                                                    {formatNumber(compteur.total)}j
+                                                </TableCell>
+                                                <TableCell className="text-right text-muted-foreground">
+                                                    {formatNumber(compteur.consomme)}j
+                                                </TableCell>
+                                                <TableCell className="text-right">
+                                                    <span className={`font-bold text-lg ${parseNumber(compteur.solde) <= 0 ? 'text-destructive' : 'text-green-600'}`}>
+                                                        {formatNumber(compteur.solde)}j
+                                                    </span>
+                                                </TableCell>
+                                                <TableCell className="text-center">
+                                                    <div className="flex gap-2 justify-center">
+                                                        <Button
+                                                            variant="outline"
+                                                            size="sm"
+                                                            onClick={() => {
+                                                                setSelectedEmployeId(compteur.collaborateurId.toString());
+                                                                ouvrirDialogAjout();
+                                                            }}
+                                                            title="Ajouter des jours"
+                                                        >
+                                                            <Plus className="w-4 h-4" />
+                                                        </Button>
+                                                        <Button
+                                                            variant="outline"
+                                                            size="sm"
+                                                            onClick={() => ouvrirDialogRetrait(compteur)}
+                                                            disabled={parseNumber(compteur.solde) <= 0}
+                                                            title="Retirer des jours"
+                                                        >
+                                                            <Minus className="w-4 h-4" />
+                                                        </Button>
+                                                    </div>
+                                                </TableCell>
+                                            </TableRow>
+                                        ))}
+                                    </TableBody>
+                                </Table>
+                            </div>
+                        ) : (
+                            <div className="text-center py-12">
+                                <Clock className="w-16 h-16 text-muted-foreground mx-auto mb-4 opacity-50" />
+                                <p className="text-muted-foreground text-lg">Aucun compteur de récupération</p>
+                                <p className="text-sm text-muted-foreground mt-2">
+                                    Ajoutez des jours de récupération pour créer un compteur
+                                </p>
+                            </div>
+                        )}
+                    </CardContent>
+                </Card>
+            </main>
+
+            {/* Dialog Ajout */}
+            {/* Dialog Ajout - VERSION AMÉLIORÉE */}
+            <Dialog open={showAddDialog} onOpenChange={setShowAddDialog}>
+                <DialogContent className="max-w-md">
+                    <DialogHeader>
+                        <DialogTitle>Ajouter des jours de récupération</DialogTitle>
+                        <DialogDescription>
+                            Enregistrer des samedis travaillés
+                        </DialogDescription>
+                    </DialogHeader>
+
+                    <div className="space-y-4 py-4">
+                        {/* ⭐ FILTRE CAMPUS */}
+                        <div className="space-y-2">
+                            <Label htmlFor="campusFilter">Filtrer par campus</Label>
+                            <Select value={selectedCampus || "ALL_CAMPUS"} onValueChange={(val) => {
+                                setSelectedCampus(val === "ALL_CAMPUS" ? "" : val);
+                                setSelectedService("");
+                                setSelectedEmployeId("");
+                            }}>
+                                <SelectTrigger id="campusFilter">
+                                    <SelectValue placeholder="Tous les campus" />
+                                </SelectTrigger>
+                                <SelectContent>
+                                    <SelectItem value="ALL_CAMPUS">Tous les campus</SelectItem>
+                                    {campusDisponibles.map(campus => (
+                                        <SelectItem key={campus} value={campus}>
+                                            {campus}
+                                        </SelectItem>
+                                    ))}
+                                </SelectContent>
+                            </Select>
+                        </div>
+
+                        {/* ⭐ FILTRE SERVICE */}
+                        <div className="space-y-2">
+                            <Label htmlFor="serviceFilter">Filtrer par service</Label>
+                            <Select
+                                value={selectedService || "ALL_SERVICES"}
+                                onValueChange={(val) => {
+                                    setSelectedService(val === "ALL_SERVICES" ? "" : val);
+                                    setSelectedEmployeId("");
+                                }}
+                                disabled={!selectedCampus && servicesDisponibles.length === 0}
+                            >
+                                <SelectTrigger id="serviceFilter">
+                                    <SelectValue placeholder="Tous les services" />
+                                </SelectTrigger>
+                                <SelectContent>
+                                    <SelectItem value="ALL_SERVICES">Tous les services</SelectItem>
+                                    {servicesDisponibles.map(service => (
+                                        <SelectItem key={service} value={service}>
+                                            {service}
+                                        </SelectItem>
+                                    ))}
+                                </SelectContent>
+                            </Select>
+                        </div>
+
+                        {/* ⭐ SÉLECTION EMPLOYÉ */}
+                        <div className="space-y-2">
+                            <Label htmlFor="employe">Collaborateur *</Label>
+                            <Select value={selectedEmployeId} onValueChange={setSelectedEmployeId}>
+                                <SelectTrigger id="employe">
+                                    <SelectValue placeholder="Sélectionner un collaborateur" />
+                                </SelectTrigger>
+                                <SelectContent className="max-h-[300px]">
+                                    {employesFiltre.length === 0 ? (
+                                        <div className="p-4 text-center text-sm text-muted-foreground">
+                                            Aucun collaborateur trouvé
+                                        </div>
+                                    ) : (
+                                        employesFiltre.map(employe => (
+                                            <SelectItem key={employe.id} value={employe.id.toString()}>
+                                                {employe.nomComplet}
+                                                <span className="text-xs text-muted-foreground ml-2">
+                                                    ({employe.service})
+                                                </span>
+                                            </SelectItem>
+                                        ))
+                                    )}
+                                </SelectContent>
+                            </Select>
+                            <p className="text-xs text-muted-foreground">
+                                {employesFiltre.length} collaborateur{employesFiltre.length > 1 ? 's' : ''} disponible{employesFiltre.length > 1 ? 's' : ''}
+                            </p>
+                        </div>
+
+                        {/* 🆕 SÉLECTION DATE (samedi uniquement) */}
+                        {/* 🆕 SÉLECTION DATE (calendrier libre, validation serveur) */}
+                        <div className="space-y-2">
+                            <Label htmlFor="dateSamedi">Date du Samedi/Dimanche travaillé *</Label>
+                            <Input
+                                id="dateSamedi"
+                                type="date"
+                                value={selectedDate}
+                                onChange={(e) => setSelectedDate(e.target.value)}
+                            />
+                            <p className="text-xs text-muted-foreground">
+                                ℹ️ Sélectionnez un samedi. La validation se fera lors de l'enregistrement.
+                            </p>
+                            {selectedDate && (() => {
+                                const date = new Date(selectedDate);
+                                const dayOfWeek = date.getDay();
+                                const dayNames = ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'];
+                                return (
+                                    <p className={`text-xs font-medium ${dayOfWeek === 6 ? 'text-green-600' : 'text-orange-600'}`}>
+                                        {dayOfWeek === 6 ? '✅' : '⚠️'} Jour sélectionné : {dayNames[dayOfWeek]}
+                                    </p>
+                                );
+                            })()}
+                        </div>
+
+                        {/* 🆕 SÉLECTION PÉRIODE */}
+                        <div className="space-y-2">
+                            <Label htmlFor="periodeJournee">Période *</Label>
+                            <Select value={periodeJournee} onValueChange={setPeriodeJournee}>
+                                <SelectTrigger id="periodeJournee">
+                                    <SelectValue placeholder="Sélectionner une période" />
+                                </SelectTrigger>
+                                <SelectContent>
+                                    <SelectItem value="Matin">
+                                        <div className="flex items-center gap-2">
+                                            <span>☀️ Matin</span>
+                                            <span className="text-xs text-muted-foreground">(0.5j)</span>
+                                        </div>
+                                    </SelectItem>
+                                    <SelectItem value="Après-midi">
+                                        <div className="flex items-center gap-2">
+                                            <span>🌆 Après-midi</span>
+                                            <span className="text-xs text-muted-foreground">(0.5j)</span>
+                                        </div>
+                                    </SelectItem>
+                                    <SelectItem value="Journée entière">
+                                        <div className="flex items-center gap-2">
+                                            <span>🌞 Journée entière</span>
+                                            <span className="text-xs text-muted-foreground">(1j)</span>
+                                        </div>
+                                    </SelectItem>
+                                </SelectContent>
+                            </Select>
+                            {periodeJournee && (
+                                <p className="text-xs text-blue-600">
+                                    {periodeJournee === 'Journée entière' ? '1 jour' : '0.5 jour'} sera ajouté
+                                </p>
+                            )}
+                        </div>
+
+                        <div className="space-y-2">
+                            <Label htmlFor="commentaire">Commentaire (optionnel)</Label>
+                            <Textarea
+                                id="commentaire"
+                                value={commentaire}
+                                onChange={(e) => setCommentaire(e.target.value)}
+                                placeholder="Ex: Portes ouvertes, événement spécial..."
+                                rows={3}
+                            />
+                        </div>
+
+                        <div className="bg-blue-50 border border-blue-200 rounded-lg p-3 text-sm">
+                            <p className="text-blue-900">
+                                💡 <strong>Information :</strong> Les jours ajoutés seront disponibles immédiatement dans le solde du collaborateur et apparaîtront dans son calendrier.
+                            </p>
+                        </div>
+                    </div>
+
+                    <DialogFooter>
+                        <Button variant="outline" onClick={() => setShowAddDialog(false)}>
+                            Annuler
+                        </Button>
+                        <Button
+                            onClick={ajouterRecuperation}
+                            disabled={loading || !selectedEmployeId || !selectedDate || !periodeJournee}
+                            className="bg-gradient-primary"
+                        >
+                            {loading ? 'Ajout...' : 'Ajouter'}
+                        </Button>
+                    </DialogFooter>
+                </DialogContent>
+            </Dialog>
+
+            {/* Dialog Retrait */}
+            <Dialog open={showRemoveDialog} onOpenChange={setShowRemoveDialog}>
+                <DialogContent className="max-w-md">
+                    <DialogHeader>
+                        <DialogTitle>Retirer des jours de récupération</DialogTitle>
+                        <DialogDescription>
+                            {selectedCompteur && `${selectedCompteur.employe} - Solde: ${formatNumber(selectedCompteur.solde)}j`}
+                        </DialogDescription>
+                    </DialogHeader>
+
+                    <div className="space-y-4 py-4">
+                        <div className="space-y-2">
+                            <Label htmlFor="nombreJoursRetrait">Nombre de jours à retirer *</Label>
+                            <Input
+                                id="nombreJoursRetrait"
+                                type="number"
+                                step="0.5"
+                                min="0.5"
+                                max={selectedCompteur?.solde || 0}
+                                value={nombreJours}
+                                onChange={(e) => setNombreJours(e.target.value)}
+                                placeholder="Ex: 1 ou 0.5"
+                            />
+                            <p className="text-xs text-muted-foreground">
+                                Maximum disponible: {selectedCompteur ? formatNumber(selectedCompteur.solde) : '0.0'} jour(s)
+                            </p>
+                        </div>
+
+                        <div className="space-y-2">
+                            <Label htmlFor="commentaireRetrait">Motif du retrait (optionnel)</Label>
+                            <Textarea
+                                id="commentaireRetrait"
+                                value={commentaire}
+                                onChange={(e) => setCommentaire(e.target.value)}
+                                placeholder="Ex: Correction d'erreur"
+                                rows={3}
+                            />
+                        </div>
+
+                        <div className="bg-orange-50 border border-orange-200 rounded-lg p-3 text-sm">
+                            <p className="text-orange-900">
+                                ⚠️ <strong>Attention :</strong> Cette action ne peut pas être annulée.
+                            </p>
+                        </div>
+                    </div>
+
+                    <DialogFooter>
+                        <Button variant="outline" onClick={() => setShowRemoveDialog(false)}>
+                            Annuler
+                        </Button>
+                        <Button
+                            onClick={retirerRecuperation}
+                            disabled={loading || !nombreJours}
+                            variant="destructive"
+                        >
+                            {loading ? 'Retrait...' : 'Retirer'}
+                        </Button>
+                    </DialogFooter>
+                </DialogContent>
+            </Dialog>
+        </div>
+    );
+};
+
+export default GestionRecuperation;
--- a/src/pages/Historique.tsx
+++ b/src/pages/Historique.tsx
@@ -0,0 +1,341 @@
+
+
+import { useState, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Badge } from "@/components/ui/badge";
+import {
+    Calendar, ArrowLeft, Search, CheckCircle, XCircle, Edit,
+    Trash2, ClipboardList
+} from "lucide-react";
+import { useNavigate } from "react-router-dom";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { toast } from "sonner";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+
+interface HistoriqueAction {
+    Id: number;
+    collaborateur: string;
+    Action: string;
+    Details: string;
+    DateAction: string;
+    AdresseIP: string;
+    DemandeCongeId: number;
+}
+
+const Historique = () => {
+    const navigate = useNavigate();
+    const [historique, setHistorique] = useState<HistoriqueAction[]>([]);
+    const [recherche, setRecherche] = useState("");
+    const [filtreAction, setFiltreAction] = useState("all");
+    const [dateDebut, setDateDebut] = useState("");
+    const [dateFin, setDateFin] = useState("");
+    const [loading, setLoading] = useState(false);
+
+    useEffect(() => {
+        chargerHistorique();
+    }, [filtreAction, dateDebut, dateFin]);
+
+    const chargerHistorique = async () => {
+        setLoading(true);
+        try {
+            const token = localStorage.getItem('token');
+            const params = new URLSearchParams();
+
+            if (dateDebut) params.append('dateDebut', dateDebut);
+            if (dateFin) params.append('dateFin', dateFin);
+            if (filtreAction !== 'all') params.append('action', filtreAction);
+
+            const response = await fetch(
+                `/api/historique?${params.toString()}`,
+                { headers: { 'Authorization': `Bearer ${token}` } }
+            );
+            const data = await response.json();
+            setHistorique(data);
+        } catch (error) {
+            toast.error("Erreur lors du chargement de l'historique");
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const historiqueFiltré = historique.filter(h => {
+        const matchRecherche = h.collaborateur?.toLowerCase().includes(recherche.toLowerCase()) ||
+            h.Details?.toLowerCase().includes(recherche.toLowerCase());
+        return matchRecherche;
+    });
+
+    const getActionIcon = (action: string) => {
+        if (action.includes('Validation')) return <CheckCircle className="w-4 h-4 text-success" />;
+        if (action.includes('Refus')) return <XCircle className="w-4 h-4 text-destructive" />;
+        if (action.includes('Modification')) return <Edit className="w-4 h-4 text-warning" />;
+        if (action.includes('Suppression')) return <Trash2 className="w-4 h-4 text-destructive" />;
+        return <ClipboardList className="w-4 h-4 text-primary" />;
+    };
+
+    const getActionBadge = (action: string) => {
+        if (action.includes('Validation')) {
+            return <Badge variant="outline" className="bg-success/10 text-success border-success/20">
+                {action}
+            </Badge>;
+        }
+        if (action.includes('Refus')) {
+            return <Badge variant="outline" className="bg-destructive/10 text-destructive border-destructive/20">
+                {action}
+            </Badge>;
+        }
+        if (action.includes('Modification')) {
+            return <Badge variant="outline" className="bg-warning/10 text-warning border-warning/20">
+                {action}
+            </Badge>;
+        }
+        return <Badge variant="secondary">{action}</Badge>;
+    };
+
+    const formatDateTime = (dateString: string) => {
+        return new Date(dateString).toLocaleString('fr-FR', {
+            day: '2-digit',
+            month: '2-digit',
+            year: 'numeric',
+            hour: '2-digit',
+            minute: '2-digit'
+        });
+    };
+
+    const exporterHistorique = () => {
+        if (historiqueFiltré.length === 0) {
+            toast.error("Aucune donnée à exporter");
+            return;
+        }
+
+        const headers = ['Date et heure', 'Collaborateur', 'Action', 'Détails', 'Demande ID'];
+        const csvContent = [
+            headers.join(';'),
+            ...historiqueFiltré.map(row => [
+                formatDateTime(row.DateAction),
+                row.collaborateur,
+                row.Action,
+                row.Details,
+                row.DemandeCongeId || ''
+            ].join(';'))
+        ].join('\n');
+
+        const blob = new Blob(['\ufeff' + csvContent], { type: 'text/csv;charset=utf-8;' });
+        const link = document.createElement('a');
+        link.href = URL.createObjectURL(blob);
+        link.download = `historique_actions_${new Date().toISOString().split('T')[0]}.csv`;
+        link.click();
+        toast.success("Export réussi");
+    };
+
+    return (
+        <div className="min-h-screen bg-gradient-subtle">
+            <header className="bg-card border-b border-border shadow-card">
+                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
+                    <div className="flex items-center justify-between">
+                        <div className="flex items-center space-x-4">
+                            <Button
+                                variant="ghost"
+                                size="sm"
+                                onClick={() => navigate("/dashboard")}
+                                className="transition-smooth"
+                            >
+                                <ArrowLeft className="w-4 h-4 mr-2" />
+                                Retour
+                            </Button>
+                            <div className="flex items-center space-x-3">
+                                <div className="w-10 h-10 rounded-xl flex items-center justify-center" style={{ backgroundColor: "#7e5aa2" }}>
+                                    <ClipboardList className="w-5 h-5 text-primary-foreground" />
+                                </div>
+                                <h1 className="text-2xl font-bold text-foreground">Historique des actions</h1>
+                            </div>
+                        </div>
+                        <Button
+                            variant="outline"
+                            size="sm"
+                            onClick={exporterHistorique}
+                            disabled={historiqueFiltré.length === 0}
+                        >
+                            Exporter CSV
+                        </Button>
+                    </div>
+                </div>
+            </header>
+
+            <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+                <Card className="shadow-card border-0 mb-8">
+                    <CardContent className="p-6">
+                        <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+                            <div className="relative">
+                                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+                                <Input
+                                    placeholder="Rechercher..."
+                                    value={recherche}
+                                    onChange={(e) => setRecherche(e.target.value)}
+                                    className="pl-10"
+                                />
+                            </div>
+
+                            <Select value={filtreAction} onValueChange={setFiltreAction}>
+                                <SelectTrigger>
+                                    <SelectValue placeholder="Type d'action" />
+                                </SelectTrigger>
+                                <SelectContent>
+                                    <SelectItem value="all">Toutes les actions</SelectItem>
+                                    <SelectItem value="Validation congé">Validations</SelectItem>
+                                    <SelectItem value="Refus congé">Refus</SelectItem>
+                                    <SelectItem value="Création demande">Créations</SelectItem>
+                                    <SelectItem value="Modification demande">Modifications</SelectItem>
+                                    <SelectItem value="Suppression demande">Suppressions</SelectItem>
+                                </SelectContent>
+                            </Select>
+
+                            <Input
+                                type="date"
+                                value={dateDebut}
+                                onChange={(e) => setDateDebut(e.target.value)}
+                                placeholder="Date début"
+                            />
+
+                            <Input
+                                type="date"
+                                value={dateFin}
+                                onChange={(e) => setDateFin(e.target.value)}
+                                placeholder="Date fin"
+                            />
+                        </div>
+                    </CardContent>
+                </Card>
+
+                <div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
+                    <Card className="shadow-card border-0">
+                        <CardContent className="p-6">
+                            <div className="flex items-center justify-between">
+                                <div>
+                                    <p className="text-sm text-muted-foreground">Total actions</p>
+                                    <p className="text-2xl font-bold">{historiqueFiltré.length}</p>
+                                </div>
+                                <ClipboardList className="w-8 h-8 text-primary" />
+                            </div>
+                        </CardContent>
+                    </Card>
+
+                    <Card className="shadow-card border-0">
+                        <CardContent className="p-6">
+                            <div className="flex items-center justify-between">
+                                <div>
+                                    <p className="text-sm text-muted-foreground">Validations</p>
+                                    <p className="text-2xl font-bold text-success">
+                                        {historique.filter(h => h.Action.includes('Validation')).length}
+                                    </p>
+                                </div>
+                                <CheckCircle className="w-8 h-8 text-success" />
+                            </div>
+                        </CardContent>
+                    </Card>
+
+                    <Card className="shadow-card border-0">
+                        <CardContent className="p-6">
+                            <div className="flex items-center justify-between">
+                                <div>
+                                    <p className="text-sm text-muted-foreground">Refus</p>
+                                    <p className="text-2xl font-bold text-destructive">
+                                        {historique.filter(h => h.Action.includes('Refus')).length}
+                                    </p>
+                                </div>
+                                <XCircle className="w-8 h-8 text-destructive" />
+                            </div>
+                        </CardContent>
+                    </Card>
+
+                    <Card className="shadow-card border-0">
+                        <CardContent className="p-6">
+                            <div className="flex items-center justify-between">
+                                <div>
+                                    <p className="text-sm text-muted-foreground">Modifications</p>
+                                    <p className="text-2xl font-bold text-warning">
+                                        {historique.filter(h => h.Action.includes('Modification')).length}
+                                    </p>
+                                </div>
+                                <Edit className="w-8 h-8 text-warning" />
+                            </div>
+                        </CardContent>
+                    </Card>
+                </div>
+
+                <Card className="shadow-card border-0">
+                    <CardHeader>
+                        <CardTitle>Journal des actions</CardTitle>
+                        <CardDescription>
+                            Traçabilité complète de toutes les actions effectuées
+                        </CardDescription>
+                    </CardHeader>
+                    <CardContent>
+                        {loading ? (
+                            <div className="text-center py-12">
+                                <div className="w-16 h-16 border-4 border-primary border-t-transparent rounded-full animate-spin mx-auto mb-4" />
+                                <p className="text-muted-foreground">Chargement...</p>
+                            </div>
+                        ) : historiqueFiltré.length > 0 ? (
+                            <div className="overflow-x-auto">
+                                <Table>
+                                    <TableHeader>
+                                        <TableRow>
+                                            <TableHead>Date et heure</TableHead>
+                                            <TableHead>Collaborateur</TableHead>
+                                            <TableHead>Action</TableHead>
+                                            <TableHead>Détails</TableHead>
+                                            <TableHead className="text-center">Demande</TableHead>
+                                        </TableRow>
+                                    </TableHeader>
+                                    <TableBody>
+                                        {historiqueFiltré.map((action) => (
+                                            <TableRow key={action.Id}>
+                                                <TableCell className="font-medium">
+                                                    {formatDateTime(action.DateAction)}
+                                                </TableCell>
+                                                <TableCell>{action.collaborateur}</TableCell>
+                                                <TableCell>
+                                                    <div className="flex items-center gap-2">
+                                                        {getActionIcon(action.Action)}
+                                                        {getActionBadge(action.Action)}
+                                                    </div>
+                                                </TableCell>
+                                                <TableCell className="max-w-md">
+                                                    <p className="text-sm text-muted-foreground truncate">
+                                                        {action.Details}
+                                                    </p>
+                                                </TableCell>
+                                                <TableCell className="text-center">
+                                                    {action.DemandeCongeId ? (
+                                                        <Button
+                                                            variant="ghost"
+                                                            size="sm"
+                                                            onClick={() => navigate(`/demandes/${action.DemandeCongeId}`)}
+                                                        >
+                                                            #{action.DemandeCongeId}
+                                                        </Button>
+                                                    ) : (
+                                                        <span className="text-muted-foreground">-</span>
+                                                    )}
+                                                </TableCell>
+                                            </TableRow>
+                                        ))}
+                                    </TableBody>
+                                </Table>
+                            </div>
+                        ) : (
+                            <div className="text-center py-12">
+                                <ClipboardList className="w-16 h-16 text-muted-foreground mx-auto mb-4 opacity-50" />
+                                <p className="text-muted-foreground text-lg">Aucune action trouvée</p>
+                            </div>
+                        )}
+                    </CardContent>
+                </Card>
+            </main>
+        </div>
+    );
+};
+
+export default Historique;
--- a/src/pages/LoginDev.tsx
+++ b/src/pages/LoginDev.tsx
@@ -0,0 +1,162 @@
+import { useState, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Calendar, LogIn } from "lucide-react";
+import { useNavigate } from "react-router-dom";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { toast } from "sonner";
+import { Badge } from "@/components/ui/badge";
+
+interface User {
+    id: number;
+    email: string;
+    nom: string;
+    prenom: string;
+    role: string;
+    service: string;
+}
+
+const LoginDev = () => {
+    const navigate = useNavigate();
+    const [users, setUsers] = useState<User[]>([]);
+    const [selectedEmail, setSelectedEmail] = useState("");
+    const [loading, setLoading] = useState(false);
+
+    useEffect(() => {
+        chargerUtilisateurs();
+    }, []);
+
+    const chargerUtilisateurs = async () => {
+        try {
+            const response = await fetch('/api/users-dev');
+            const data = await response.json();
+            setUsers(data);
+        } catch (error) {
+            toast.error("Erreur lors du chargement des utilisateurs");
+        }
+    };
+
+    const handleLogin = async () => {
+        if (!selectedEmail) {
+            toast.error("Veuillez sélectionner un utilisateur");
+            return;
+        }
+
+        setLoading(true);
+        try {
+            const response = await fetch('/api/login-dev', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ email: selectedEmail })
+            });
+
+            const data = await response.json();
+
+            if (response.ok) {
+                localStorage.setItem('token', data.token);
+                localStorage.setItem('user', JSON.stringify(data.user));
+                toast.success(`Bienvenue ${data.user.prenom} ${data.user.nom} !`);
+                navigate('/dashboard');
+            } else {
+                toast.error(data.error || "Erreur de connexion");
+            }
+        } catch (error) {
+            toast.error("Erreur lors de la connexion");
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const getRoleBadge = (role: string) => {
+        switch (role) {
+            case 'Admin':
+                return <Badge variant="destructive">{role}</Badge>;
+            case 'RH':
+                return <Badge variant="default">{role}</Badge>;
+            case 'Validateur':
+                return <Badge variant="secondary">{role}</Badge>;
+            default:
+                return <Badge variant="outline">{role}</Badge>;
+        }
+    };
+
+    const selectedUser = users.find(u => u.email === selectedEmail);
+
+    return (
+        <div className="min-h-screen bg-gradient-subtle flex items-center justify-center p-4">
+            <Card className="w-full max-w-md shadow-elegant border-0">
+                <CardHeader className="space-y-4">
+                    <div className="flex justify-center">
+                        <div className="w-16 h-16 bg-gradient-primary rounded-2xl flex items-center justify-center">
+                            <Calendar className="w-8 h-8 text-primary-foreground" />
+                        </div>
+                    </div>
+                    <div className="text-center">
+                        <CardTitle className="text-2xl">RH Suivi - Mode Dev</CardTitle>
+                        <CardDescription>
+                            Sélectionnez un utilisateur pour vous connecter
+                        </CardDescription>
+                    </div>
+                </CardHeader>
+                <CardContent className="space-y-6">
+                    <div className="space-y-2">
+                        <label className="text-sm font-medium">Utilisateur</label>
+                        <Select value={selectedEmail} onValueChange={setSelectedEmail}>
+                            <SelectTrigger>
+                                <SelectValue placeholder="Choisir un utilisateur..." />
+                            </SelectTrigger>
+                            <SelectContent>
+                                {users.map(user => (
+                                    <SelectItem key={user.id} value={user.email}>
+                                        <div className="flex items-center gap-2">
+                                            <span>{user.prenom} {user.nom}</span>
+                                            <span className="text-xs text-muted-foreground">({user.role})</span>
+                                        </div>
+                                    </SelectItem>
+                                ))}
+                            </SelectContent>
+                        </Select>
+                    </div>
+
+                    {selectedUser && (
+                        <Card className="bg-muted/50 border-0">
+                            <CardContent className="p-4 space-y-2">
+                                <div className="flex items-center justify-between">
+                                    <span className="text-sm text-muted-foreground">Nom</span>
+                                    <span className="font-medium">{selectedUser.prenom} {selectedUser.nom}</span>
+                                </div>
+                                <div className="flex items-center justify-between">
+                                    <span className="text-sm text-muted-foreground">Email</span>
+                                    <span className="text-sm">{selectedUser.email}</span>
+                                </div>
+                                <div className="flex items-center justify-between">
+                                    <span className="text-sm text-muted-foreground">Rôle</span>
+                                    {getRoleBadge(selectedUser.role)}
+                                </div>
+                                <div className="flex items-center justify-between">
+                                    <span className="text-sm text-muted-foreground">Service</span>
+                                    <span className="text-sm">{selectedUser.service || 'Non assigné'}</span>
+                                </div>
+                            </CardContent>
+                        </Card>
+                    )}
+
+                    <Button
+                        onClick={handleLogin}
+                        disabled={loading || !selectedEmail}
+                        className="w-full bg-gradient-primary hover:opacity-90 transition-smooth"
+                    >
+                        <LogIn className="w-4 h-4 mr-2" />
+                        {loading ? 'Connexion...' : 'Se connecter'}
+                    </Button>
+
+                    <p className="text-xs text-center text-muted-foreground">
+                        ⚠️ Mode développement uniquement
+                    </p>
+                </CardContent>
+            </Card>
+        </div>
+    );
+};
+
+export default LoginDev;
--- a/src/pages/ModificationDemande.tsx
+++ b/src/pages/ModificationDemande.tsx
@@ -0,0 +1,447 @@
+import { useState, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { Badge } from "@/components/ui/badge";
+import { Calendar, ArrowLeft, Save, Trash2, Info } from "lucide-react";
+import { useNavigate, useParams } from "react-router-dom";
+import { toast } from "sonner";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger, DialogFooter } from "@/components/ui/dialog";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { useSSE } from "@/hooks/useSSE";
+
+interface Demande {
+    Id: number;
+    CollaborateurADId: number;
+    nomEmploye: string;
+    emailEmploye: string;
+    service: string;
+    DateDebut: string;
+    DateFin: string;
+    Statut: string;
+    Commentaire: string;
+    DateDemande: string;
+    typesConge: Array<{
+        typeId: number;
+        nom: string;
+        nombreJours: number;
+    }>;
+}
+
+const ModificationDemande = () => {
+    const navigate = useNavigate();
+    const { id } = useParams();
+    const [demande, setDemande] = useState<Demande | null>(null);
+    const [loading, setLoading] = useState(false);
+    const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+
+    const [formData, setFormData] = useState({
+        dateDebut: "",
+        dateFin: "",
+        commentaire: "",
+        typesConge: [] as Array<{ typeId: number; nombreJours: number }>
+    });
+
+    useEffect(() => {
+        if (id) {
+            chargerDemande(parseInt(id));
+        }
+    }, [id]);
+
+    useSSE((event) => {
+        console.log('🔔 Événement SSE reçu dans ModificationDemande:', event);
+
+        switch (event.type) {
+            case 'connected':
+                console.log('✅ ModificationDemande connecté au serveur temps réel');
+                break;
+
+            case 'demande-updated':
+            case 'demande-validated':
+                // Si c'est la demande actuelle qui a été modifiée, recharger
+                if (event.demandeId === parseInt(id || '0')) {
+                    console.log('🔄 Demande actuelle mise à jour, rechargement...');
+                    if (id) {
+                        chargerDemande(parseInt(id));
+                    }
+                }
+                break;
+
+            // 🆕 GESTION DE L'ANNULATION
+            case 'demande-cancelled':
+                // Si la demande actuelle a été annulée, recharger pour afficher le nouveau statut
+                if (event.demandeId === parseInt(id || '0')) {
+                    console.log('🚫 Demande actuelle annulée, rechargement...');
+                    toast.warning("Cette demande a été annulée", {
+                        description: "Le statut a été mis à jour",
+                        duration: 4000
+                    });
+                    if (id) {
+                        chargerDemande(parseInt(id));
+                    }
+                }
+                break;
+
+            case 'demande-deleted':
+                // Si la demande actuelle a été supprimée, retourner au dashboard
+                if (event.demandeId === parseInt(id || '0')) {
+                    toast.info("Cette demande a été supprimée");
+                    navigate("/dashboard");
+                }
+                break;
+
+            case 'heartbeat':
+                break;
+
+            default:
+                console.log('❓ Type d\'événement inconnu:', event.type);
+        }
+    });
+
+    const chargerDemande = async (demandeId: number) => {
+        try {
+            const token = localStorage.getItem('token');
+            const response = await fetch(`/api/demandes/${demandeId}`, {
+                headers: { 'Authorization': `Bearer ${token}` }
+            });
+            const data = await response.json();
+            setDemande(data);
+            setFormData({
+                dateDebut: data.DateDebut,
+                dateFin: data.DateFin,
+                commentaire: data.Commentaire || '',
+                typesConge: data.typesConge.map((t: any) => ({
+                    typeId: t.typeId,
+                    nombreJours: t.nombreJours
+                }))
+            });
+        } catch (error) {
+            toast.error("Erreur lors du chargement de la demande");
+            navigate("/dashboard");
+        }
+    };
+
+    const modifierDemande = async (e: React.FormEvent) => {
+        e.preventDefault();
+
+        if (new Date(formData.dateDebut) > new Date(formData.dateFin)) {
+            toast.error("La date de début doit être antérieure à la date de fin");
+            return;
+        }
+
+        setLoading(true);
+        try {
+            const token = localStorage.getItem('token');
+            const response = await fetch(`/api/demandes/${id}`, {
+                method: 'PUT',
+                headers: {
+                    'Authorization': `Bearer ${token}`,
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                    dateDebut: formData.dateDebut,
+                    dateFin: formData.dateFin,
+                    typesConge: formData.typesConge,
+                    commentaire: formData.commentaire
+                })
+            });
+
+            const data = await response.json();
+
+            if (response.ok) {
+                if (data.ancienStatut === 'Validée' && data.nouveauStatut === 'En attente') {
+                    toast.success("Demande modifiée et remise en attente pour re-validation", {
+                        description: "Les compteurs de congé ont été restaurés"
+                    });
+                } else if (data.ancienStatut === 'Refusée' && data.nouveauStatut === 'En attente') {
+                    toast.success("Demande modifiée et remise en attente");
+                } else if (data.ancienStatut === 'Annulée' && data.nouveauStatut === 'En attente') {
+                    toast.success("Demande modifiée et remise en attente");
+                } else {
+                    toast.success("Demande modifiée avec succès");
+                }
+                navigate("/dashboard");
+            } else {
+                throw new Error(data.error || 'Erreur lors de la modification');
+            }
+        } catch (error: any) {
+            toast.error(error.message || "Erreur lors de la modification");
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const supprimerDemande = async () => {
+        setLoading(true);
+        try {
+            const token = localStorage.getItem('token');
+            const response = await fetch(`/api/demandes/${id}`, {
+                method: 'DELETE',
+                headers: { 'Authorization': `Bearer ${token}` }
+            });
+
+            const data = await response.json();
+
+            if (response.ok) {
+                toast.success("Demande supprimée avec succès");
+                navigate("/dashboard");
+            } else {
+                throw new Error(data.error || 'Erreur lors de la suppression');
+            }
+        } catch (error: any) {
+            toast.error(error.message || "Erreur lors de la suppression");
+        } finally {
+            setLoading(false);
+            setShowDeleteDialog(false);
+        }
+    };
+
+    // ✅ FONCTION MISE À JOUR AVEC LE STATUT "ANNULÉE"
+    const getStatutBadge = (statut: string) => {
+        switch (statut) {
+            case "En attente":
+                return <Badge variant="outline" className="bg-warning/10 text-warning border-warning/20">En attente</Badge>;
+            case "Validée":
+                return <Badge variant="outline" className="bg-success/10 text-success border-success/20">Validée</Badge>;
+            case "Refusée":
+                return <Badge variant="outline" className="bg-destructive/10 text-destructive border-destructive/20">Refusée</Badge>;
+            case "Annulée":
+                return <Badge variant="outline" className="bg-gray-100 text-gray-700 border-gray-300 dark:bg-gray-800 dark:text-gray-300">Annulée</Badge>;
+            default:
+                return <Badge variant="outline" className="bg-gray-100 text-gray-700">{statut}</Badge>;
+        }
+    };
+
+    const formatDate = (dateString: string) => {
+        return new Date(dateString).toLocaleDateString('fr-FR', {
+            day: '2-digit',
+            month: '2-digit',
+            year: 'numeric'
+        });
+    };
+
+    if (!demande) {
+        return (
+            <div className="min-h-screen bg-gradient-subtle flex items-center justify-center">
+                <div className="text-center">
+                    <div className="w-16 h-16 border-4 border-primary border-t-transparent rounded-full animate-spin mx-auto mb-4" />
+                    <p className="text-muted-foreground">Chargement...</p>
+                </div>
+            </div>
+        );
+    }
+
+    const user = JSON.parse(localStorage.getItem('user') || '{}');
+    const peutModifier = ['Admin', 'RH', 'Validateur'].includes(user.role) || demande.CollaborateurADId === user.id;
+    // ✅ MISE À JOUR: Inclure "Annulée" dans les demandes traitées
+    const demandeTraitee = ['Validée', 'Refusée', 'Annulée'].includes(demande.Statut);
+
+    return (
+        <div className="min-h-screen bg-gradient-subtle">
+            <header className="bg-card border-b border-border shadow-card">
+                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
+                    <div className="flex items-center justify-between">
+                        <div className="flex items-center space-x-4">
+                            <Button variant="ghost" size="sm" onClick={() => navigate("/dashboard")}>
+                                <ArrowLeft className="w-4 h-4 mr-2" />
+                                Retour
+                            </Button>
+                            <div className="flex items-center space-x-3">
+                                <div className="w-10 h-10 bg-gradient-primary rounded-xl flex items-center justify-center">
+                                    <Calendar className="w-5 h-5 text-primary-foreground" />
+                                </div>
+                                <h1 className="text-2xl font-bold text-foreground">
+                                    Modifier la demande
+                                </h1>
+                            </div>
+                        </div>
+                        {peutModifier && demande.Statut === 'En attente' && (
+                            <Dialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
+                                <DialogTrigger asChild>
+                                    <Button variant="outline" size="sm" className="text-destructive hover:bg-destructive/10">
+                                        <Trash2 className="w-4 h-4 mr-2" />
+                                        Supprimer
+                                    </Button>
+                                </DialogTrigger>
+                                <DialogContent>
+                                    <DialogHeader>
+                                        <DialogTitle>Confirmer la suppression</DialogTitle>
+                                        <DialogDescription>
+                                            Êtes-vous sûr de vouloir supprimer cette demande ? Cette action est irréversible.
+                                        </DialogDescription>
+                                    </DialogHeader>
+                                    <DialogFooter>
+                                        <Button variant="outline" onClick={() => setShowDeleteDialog(false)}>
+                                            Annuler
+                                        </Button>
+                                        <Button variant="destructive" onClick={supprimerDemande} disabled={loading}>
+                                            {loading ? 'Suppression...' : 'Supprimer'}
+                                        </Button>
+                                    </DialogFooter>
+                                </DialogContent>
+                            </Dialog>
+                        )}
+                    </div>
+                </div>
+            </header>
+
+            <main className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+                {/* ✅ ALERTE MISE À JOUR POUR INCLURE LE STATUT "ANNULÉE" */}
+                {peutModifier && demandeTraitee && (
+                    <Alert className="mb-6 border-blue-500/50 bg-blue-500/5">
+                        <Info className="h-4 w-4 text-blue-500" />
+                        <AlertDescription className="text-blue-700 dark:text-blue-400">
+                            {demande.Statut === 'Validée'
+                                ? "⚠️ Cette demande a été validée. En la modifiant, elle sera automatiquement remise en attente et les compteurs seront restaurés."
+                                : demande.Statut === 'Refusée'
+                                    ? "ℹ️ Cette demande a été refusée. En la modifiant, elle sera automatiquement remise en attente pour re-validation."
+                                    : demande.Statut === 'Annulée'
+                                        ? "ℹ️ Cette demande a été annulée. En la modifiant, elle sera automatiquement remise en attente pour re-validation."
+                                        : ""
+                            }
+                        </AlertDescription>
+                    </Alert>
+                )}
+
+                <Card className="shadow-elegant border-0 mb-6">
+                    <CardHeader>
+                        <div className="flex items-center justify-between">
+                            <CardTitle>Informations de la demande</CardTitle>
+                            {getStatutBadge(demande.Statut)}
+                        </div>
+                        <CardDescription>
+                            Demande #{demande.Id} créée le {formatDate(demande.DateDemande)}
+                        </CardDescription>
+                    </CardHeader>
+                    <CardContent>
+                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
+                            <div>
+                                <p className="text-sm text-muted-foreground mb-1">Collaborateur</p>
+                                <p className="font-medium">{demande.nomEmploye}</p>
+                                <p className="text-sm text-muted-foreground">{demande.emailEmploye}</p>
+                            </div>
+                            <div>
+                                <p className="text-sm text-muted-foreground mb-1">Service</p>
+                                <p className="font-medium">{demande.service}</p>
+                            </div>
+                        </div>
+
+                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
+                            <div>
+                                <p className="text-sm text-muted-foreground mb-1">Date de début</p>
+                                <p className="font-medium">{formatDate(demande.DateDebut)}</p>
+                            </div>
+                            <div>
+                                <p className="text-sm text-muted-foreground mb-1">Date de fin</p>
+                                <p className="font-medium">{formatDate(demande.DateFin)}</p>
+                            </div>
+                        </div>
+
+                        <div className="space-y-2 mb-6">
+                            <p className="text-sm text-muted-foreground">Types de congé</p>
+                            <div className="flex flex-wrap gap-2">
+                                {demande.typesConge.map((type, index) => (
+                                    <Badge key={index} variant="secondary">
+                                        {type.nom}: {type.nombreJours} jour{type.nombreJours > 1 ? 's' : ''}
+                                    </Badge>
+                                ))}
+                            </div>
+                        </div>
+
+                        {demande.Commentaire && (
+                            <div className="space-y-2">
+                                <p className="text-sm text-muted-foreground">Commentaire initial</p>
+                                <p className="text-sm bg-muted/30 p-3 rounded-lg">{demande.Commentaire}</p>
+                            </div>
+                        )}
+                    </CardContent>
+                </Card>
+
+                <Card className="shadow-elegant border-0">
+                    <CardHeader>
+                        <CardTitle>Modifier les dates</CardTitle>
+                    </CardHeader>
+                    <CardContent>
+                        <form onSubmit={modifierDemande} className="space-y-6">
+                            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                                <div className="space-y-2">
+                                    <Label htmlFor="dateDebut">Date de début</Label>
+                                    <Input
+                                        id="dateDebut"
+                                        type="date"
+                                        value={formData.dateDebut}
+                                        onChange={(e) => setFormData({ ...formData, dateDebut: e.target.value })}
+                                        disabled={!peutModifier}
+                                        required
+                                    />
+                                </div>
+
+                                <div className="space-y-2">
+                                    <Label htmlFor="dateFin">Date de fin</Label>
+                                    <Input
+                                        id="dateFin"
+                                        type="date"
+                                        value={formData.dateFin}
+                                        onChange={(e) => setFormData({ ...formData, dateFin: e.target.value })}
+                                        disabled={!peutModifier}
+                                        required
+                                    />
+                                </div>
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="commentaire">Commentaire</Label>
+                                <Textarea
+                                    id="commentaire"
+                                    placeholder="Préciser le motif..."
+                                    value={formData.commentaire}
+                                    onChange={(e) => setFormData({ ...formData, commentaire: e.target.value })}
+                                    disabled={!peutModifier}
+                                    rows={4}
+                                    className="resize-none"
+                                />
+                            </div>
+
+                            {peutModifier && (
+                                <div className="flex gap-4 pt-4">
+                                    <Button
+                                        type="submit"
+                                        disabled={loading}
+                                        className="flex-1 bg-gradient-primary hover:opacity-90 transition-smooth shadow-elegant"
+                                    >
+                                        <Save className="w-4 h-4 mr-2" />
+                                        {loading ? 'Enregistrement...' : 'Enregistrer les modifications'}
+                                    </Button>
+                                    <Button
+                                        type="button"
+                                        variant="outline"
+                                        onClick={() => navigate("/dashboard")}
+                                        disabled={loading}
+                                        className="transition-smooth"
+                                    >
+                                        Annuler
+                                    </Button>
+                                </div>
+                            )}
+
+                            {!peutModifier && (
+                                <Button
+                                    type="button"
+                                    variant="outline"
+                                    onClick={() => navigate("/dashboard")}
+                                    className="w-full"
+                                >
+                                    Retour au tableau de bord
+                                </Button>
+                            )}
+                        </form>
+                    </CardContent>
+                </Card>
+            </main>
+        </div>
+    );
+};
+
+export default ModificationDemande;
--- a/src/pages/NotFound.tsx
+++ b/src/pages/NotFound.tsx
@@ -0,0 +1,24 @@
+import { useLocation } from "react-router-dom";
+import { useEffect } from "react";
+
+const NotFound = () => {
+  const location = useLocation();
+
+  useEffect(() => {
+    console.error("404 Error: User attempted to access non-existent route:", location.pathname);
+  }, [location.pathname]);
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-gray-100">
+      <div className="text-center">
+        <h1 className="mb-4 text-4xl font-bold">404</h1>
+        <p className="mb-4 text-xl text-gray-600">Oops! Page not found</p>
+        <a href="/" className="text-blue-500 underline hover:text-blue-700">
+          Return to Home
+        </a>
+      </div>
+    </div>
+  );
+};
+
+export default NotFound;
--- a/src/pages/SaisieManuelle.tsx
+++ b/src/pages/SaisieManuelle.tsx
@@ -0,0 +1,567 @@
+import { useState, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { Calendar, ArrowLeft, Save, Plus, Trash2, AlertCircle } from "lucide-react";
+import { useNavigate } from "react-router-dom";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { toast } from "sonner";
+import { Badge } from "@/components/ui/badge";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+
+interface TypeConge {
+    id: number;
+    nom: string;
+    couleur: string;
+}
+
+interface LigneConge {
+    typeId: number;
+    nombreJours: number;
+}
+
+interface Employe {
+    id: number;
+    nom: string;
+    prenom: string;
+    email: string;
+    service: string;
+    soldeCP?: number;
+    soldeRTT?: number;
+}
+
+const SaisieManuelle = () => {
+    const navigate = useNavigate();
+    const [employes, setEmployes] = useState<Employe[]>([]);
+    const [typesConge, setTypesConge] = useState<TypeConge[]>([]);
+    const [loading, setLoading] = useState(false);
+    const [employeSelectionne, setEmployeSelectionne] = useState<Employe | null>(null);
+
+    const [formData, setFormData] = useState({
+        employeId: "",
+        dateDebut: "",
+        dateFin: "",
+        commentaire: ""
+    });
+
+    const [lignesConge, setLignesConge] = useState<LigneConge[]>([
+        { typeId: 0, nombreJours: 0 }
+    ]);
+
+    useEffect(() => {
+        chargerDonnees();
+    }, []);
+
+    const chargerDonnees = async () => {
+        try {
+            const token = localStorage.getItem('token');
+
+            const respEmployes = await fetch('/api/employes', {
+                headers: { 'Authorization': `Bearer ${token}` }
+            });
+            const dataEmployes = await respEmployes.json();
+            setEmployes(dataEmployes);
+
+            const respTypes = await fetch('/api/types-conge', {
+                headers: { 'Authorization': `Bearer ${token}` }
+            });
+            const dataTypes = await respTypes.json();
+            setTypesConge(dataTypes);
+        } catch (error) {
+            toast.error("Erreur lors du chargement des données");
+        }
+    };
+
+    const ajouterLigne = () => {
+        const joursOuvres = calculerJoursOuvres(formData.dateDebut, formData.dateFin);
+        setLignesConge([...lignesConge, { typeId: 0, nombreJours: joursOuvres }]);
+    };
+
+    const supprimerLigne = (index: number) => {
+        if (lignesConge.length > 1) {
+            setLignesConge(lignesConge.filter((_, i) => i !== index));
+        }
+    };
+
+    const modifierLigne = (index: number, field: keyof LigneConge, value: any) => {
+        const nouvelles = [...lignesConge];
+        nouvelles[index] = { ...nouvelles[index], [field]: value };
+        setLignesConge(nouvelles);
+    };
+
+    // Mettre à jour automatiquement tous les nombres de jours quand les dates changent
+    const handleDateChange = (field: 'dateDebut' | 'dateFin', value: string) => {
+        const nouvellesData = { ...formData, [field]: value };
+        setFormData(nouvellesData);
+
+        // Recalculer les jours pour toutes les lignes
+        if (nouvellesData.dateDebut && nouvellesData.dateFin) {
+            const joursOuvres = calculerJoursOuvres(nouvellesData.dateDebut, nouvellesData.dateFin);
+            const nouvellesLignes = lignesConge.map(ligne => ({
+                ...ligne,
+                nombreJours: ligne.nombreJours === 0 ? joursOuvres : ligne.nombreJours
+            }));
+            setLignesConge(nouvellesLignes);
+        }
+    };
+
+    const calculerTotalJours = () => {
+        return lignesConge.reduce((total, ligne) => total + (ligne.nombreJours || 0), 0);
+    };
+
+    const calculerJoursOuvres = (debut: string, fin: string) => {
+        if (!debut || !fin) return 0;
+
+        const dateDebut = new Date(debut);
+        const dateFin = new Date(fin);
+        let jours = 0;
+
+        for (let d = new Date(dateDebut); d <= dateFin; d.setDate(d.getDate() + 1)) {
+            const jour = d.getDay();
+            if (jour !== 0 && jour !== 6) {
+                jours++;
+            }
+        }
+        return jours;
+    };
+
+    const handleEmployeChange = (employeId: string) => {
+        setFormData({ ...formData, employeId });
+        const employe = employes.find(e => e.id.toString() === employeId);
+        setEmployeSelectionne(employe || null);
+    };
+
+    const calculerJoursParType = (typeId: number) => {
+        return lignesConge
+            .filter(ligne => ligne.typeId === typeId)
+            .reduce((total, ligne) => total + (ligne.nombreJours || 0), 0);
+    };
+
+    const obtenirSoldeParType = (typeId: number): number => {
+        if (!employeSelectionne) return 0;
+        if (typeId === 1) return employeSelectionne.soldeCP ?? 0;
+        if (typeId === 2) return employeSelectionne.soldeRTT ?? 0;
+        return 0;
+    };
+
+    const obtenirNomType = (typeId: number): string => {
+        const type = typesConge.find(t => t.id === typeId);
+        return type?.nom || '';
+    };
+
+    const calculerRestantParType = (typeId: number): number => {
+        const solde = obtenirSoldeParType(typeId);
+        const saisis = calculerJoursParType(typeId);
+        return solde - saisis;
+    };
+
+    const verifierDepassement = () => {
+        if (!employeSelectionne) return false;
+
+        const joursCP = calculerJoursParType(1);
+        const joursRTT = calculerJoursParType(2);
+
+        return (joursCP > (employeSelectionne.soldeCP ?? 0)) ||
+            (joursRTT > (employeSelectionne.soldeRTT ?? 0));
+    };
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+
+        if (!formData.employeId || !formData.dateDebut || !formData.dateFin) {
+            toast.error("Veuillez remplir tous les champs obligatoires");
+            return;
+        }
+
+        // Vérifier que au moins une ligne a des données valides
+        const lignesValides = lignesConge.filter(l => l.typeId > 0 && l.nombreJours > 0);
+
+        if (lignesValides.length === 0) {
+            toast.error("Veuillez remplir au moins une ligne avec un type de congé et un nombre de jours");
+            return;
+        }
+
+        if (verifierDepassement()) {
+            toast.warning("⚠️ Attention: dépassement des compteurs disponibles");
+        }
+
+        setLoading(true);
+        try {
+            const token = localStorage.getItem('token');
+            const response = await fetch('/api/demandes', {
+                method: 'POST',
+                headers: {
+                    'Authorization': `Bearer ${token}`,
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                    collaborateurId: formData.employeId,
+                    dateDebut: formData.dateDebut,
+                    dateFin: formData.dateFin,
+                    typesConge: lignesValides.map(l => ({
+                        typeId: l.typeId,
+                        nombreJours: l.nombreJours
+                    })),
+                    commentaire: formData.commentaire
+                })
+            });
+
+            if (response.ok) {
+                toast.success("Demande enregistrée avec succès");
+                navigate("/dashboard");
+            } else {
+                throw new Error('Erreur lors de l\'enregistrement');
+            }
+        } catch (error) {
+            toast.error("Erreur lors de l'enregistrement");
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const joursOuvres = calculerJoursOuvres(formData.dateDebut, formData.dateFin);
+    const totalJours = calculerTotalJours();
+    const aDepassement = verifierDepassement();
+
+    return (
+        <div className="min-h-screen bg-gradient-subtle">
+            <header className="bg-card border-b border-border shadow-card">
+                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
+                    <div className="flex items-center justify-between">
+                        <div className="flex items-center space-x-4">
+                            <Button
+                                variant="ghost"
+                                size="sm"
+                                onClick={() => navigate("/dashboard")}
+                                className="transition-smooth"
+                            >
+                                <ArrowLeft className="w-4 h-4 mr-2" />
+                                Retour
+                            </Button>
+                            <div className="flex items-center space-x-3">
+                                <div className="w-10 h-10 bg-gradient-primary rounded-xl flex items-center justify-center">
+                                    <Calendar className="w-5 h-5 text-primary-foreground" />
+                                </div>
+                                <h1 className="text-2xl font-bold text-foreground">Saisie manuelle</h1>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </header>
+
+            <main className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+                <Card className="shadow-elegant border-0">
+                    <CardHeader>
+                        <CardTitle>Nouvelle demande de congé</CardTitle>
+                        <CardDescription>
+                            Enregistrer manuellement une demande d'absence ou de récupération
+                        </CardDescription>
+                    </CardHeader>
+                    <CardContent>
+                        <form onSubmit={handleSubmit} className="space-y-6">
+                            <div className="space-y-4">
+                                <h3 className="text-lg font-semibold">Informations générales</h3>
+
+                                <div className="space-y-2">
+                                    <Label htmlFor="employe">Collaborateur <span className="text-destructive">*</span></Label>
+                                    <Select
+                                        value={formData.employeId}
+                                        onValueChange={handleEmployeChange}
+                                    >
+                                        <SelectTrigger>
+                                            <SelectValue placeholder="Sélectionner un collaborateur" />
+                                        </SelectTrigger>
+                                        <SelectContent>
+                                            {employes.map(emp => (
+                                                <SelectItem key={emp.id} value={emp.id.toString()}>
+                                                    {emp.prenom} {emp.nom} - {emp.service}
+                                                </SelectItem>
+                                            ))}
+                                        </SelectContent>
+                                    </Select>
+                                </div>
+
+                                {employeSelectionne && (
+                                    <div className="p-4 bg-primary/5 rounded-lg border border-primary/10">
+                                        <p className="text-sm font-medium mb-3">Compteurs disponibles</p>
+                                        <div className="grid grid-cols-2 gap-4">
+                                            <div className="space-y-1">
+                                                <p className="text-xs text-muted-foreground">Congés Payés (CP)</p>
+                                                <div className="flex items-baseline gap-2">
+                                                    <p className="text-2xl font-bold text-primary">
+                                                        {employeSelectionne.soldeCP ?? 0}
+                                                    </p>
+                                                    <span className="text-sm text-muted-foreground">jours</span>
+                                                </div>
+                                                {calculerJoursParType(1) > 0 && (
+                                                    <p className="text-xs text-muted-foreground">
+                                                        Saisie en cours: <span className="font-semibold text-warning">{calculerJoursParType(1)}j</span>
+                                                        {calculerJoursParType(1) > (employeSelectionne.soldeCP ?? 0) && (
+                                                            <span className="text-destructive ml-1">⚠️ Dépassement!</span>
+                                                        )}
+                                                    </p>
+                                                )}
+                                            </div>
+                                            <div className="space-y-1">
+                                                <p className="text-xs text-muted-foreground">RTT</p>
+                                                <div className="flex items-baseline gap-2">
+                                                    <p className="text-2xl font-bold text-primary">
+                                                        {employeSelectionne.soldeRTT ?? 0}
+                                                    </p>
+                                                    <span className="text-sm text-muted-foreground">jours</span>
+                                                </div>
+                                                {calculerJoursParType(2) > 0 && (
+                                                    <p className="text-xs text-muted-foreground">
+                                                        Saisie en cours: <span className="font-semibold text-warning">{calculerJoursParType(2)}j</span>
+                                                        {calculerJoursParType(2) > (employeSelectionne.soldeRTT ?? 0) && (
+                                                            <span className="text-destructive ml-1">⚠️ Dépassement!</span>
+                                                        )}
+                                                    </p>
+                                                )}
+                                            </div>
+                                        </div>
+                                    </div>
+                                )}
+
+                                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                                    <div className="space-y-2">
+                                        <Label htmlFor="dateDebut">Date de début <span className="text-destructive">*</span></Label>
+                                        <Input
+                                            id="dateDebut"
+                                            type="date"
+                                            value={formData.dateDebut}
+                                            onChange={(e) => handleDateChange('dateDebut', e.target.value)}
+                                            required
+                                        />
+                                    </div>
+
+                                    <div className="space-y-2">
+                                        <Label htmlFor="dateFin">Date de fin <span className="text-destructive">*</span></Label>
+                                        <Input
+                                            id="dateFin"
+                                            type="date"
+                                            value={formData.dateFin}
+                                            onChange={(e) => handleDateChange('dateFin', e.target.value)}
+                                            required
+                                        />
+                                    </div>
+                                </div>
+
+                                {formData.dateDebut && formData.dateFin && joursOuvres > 0 && (
+                                    <div className="p-4 bg-primary/5 rounded-lg space-y-3">
+                                        <div className="flex items-center justify-between">
+                                            <div>
+                                                <p className="text-sm text-muted-foreground">Jours ouvrés de la période</p>
+                                                <p className="text-2xl font-bold">{joursOuvres}</p>
+                                            </div>
+                                            <div className="text-right">
+                                                <p className="text-sm text-muted-foreground">Total saisi</p>
+                                                <p className="text-2xl font-bold">{totalJours}</p>
+                                            </div>
+                                        </div>
+
+                                        {employeSelectionne && totalJours > 0 && (
+                                            <div className="pt-3 border-t space-y-2">
+                                                <p className="text-xs font-medium text-muted-foreground">Répartition par type</p>
+
+                                                {calculerJoursParType(1) > 0 && (
+                                                    <div className="flex items-center justify-between text-sm">
+                                                        <span className="text-muted-foreground">CP:</span>
+                                                        <div className="flex items-center gap-2">
+                                                            <Badge variant="outline" className="bg-blue-50 text-blue-700">
+                                                                {calculerJoursParType(1)}j
+                                                            </Badge>
+                                                            <span className="text-xs">
+                                                                Restants: <span className={calculerRestantParType(1) < 0 ? "font-bold text-destructive" : "font-bold text-success"}>
+                                                                    {calculerRestantParType(1)}j
+                                                                </span>
+                                                            </span>
+                                                        </div>
+                                                    </div>
+                                                )}
+
+                                                {calculerJoursParType(2) > 0 && (
+                                                    <div className="flex items-center justify-between text-sm">
+                                                        <span className="text-muted-foreground">RTT:</span>
+                                                        <div className="flex items-center gap-2">
+                                                            <Badge variant="outline" className="bg-purple-50 text-purple-700">
+                                                                {calculerJoursParType(2)}j
+                                                            </Badge>
+                                                            <span className="text-xs">
+                                                                Restants: <span className={calculerRestantParType(2) < 0 ? "font-bold text-destructive" : "font-bold text-success"}>
+                                                                    {calculerRestantParType(2)}j
+                                                                </span>
+                                                            </span>
+                                                        </div>
+                                                    </div>
+                                                )}
+
+                                                {lignesConge.filter(l => l.typeId > 2 && l.nombreJours > 0).map((ligne, idx) => {
+                                                    const typeNom = obtenirNomType(ligne.typeId);
+                                                    return typeNom ? (
+                                                        <div key={idx} className="flex items-center justify-between text-sm">
+                                                            <span className="text-muted-foreground">{typeNom}:</span>
+                                                            <Badge variant="outline" className="bg-green-50 text-green-700">
+                                                                {calculerJoursParType(ligne.typeId)}j
+                                                            </Badge>
+                                                        </div>
+                                                    ) : null;
+                                                })}
+                                            </div>
+                                        )}
+                                    </div>
+                                )}
+                            </div>
+
+                            <div className="space-y-4">
+                                <div className="flex items-center justify-between">
+                                    <h3 className="text-lg font-semibold">Types de congé</h3>
+                                    <Button
+                                        type="button"
+                                        variant="outline"
+                                        size="sm"
+                                        onClick={ajouterLigne}
+                                    >
+                                        <Plus className="w-4 h-4 mr-1" />
+                                        Ajouter un type
+                                    </Button>
+                                </div>
+
+                                <div className="space-y-3">
+                                    {lignesConge.map((ligne, index) => {
+                                        const soldeDisponible = obtenirSoldeParType(ligne.typeId);
+                                        const dejaSaisi = calculerJoursParType(ligne.typeId);
+                                        const restant = soldeDisponible - dejaSaisi;
+                                        const enDepassement = restant < 0;
+
+                                        return (
+                                            <div key={index} className="space-y-2">
+                                                <div className="flex gap-3 items-end">
+                                                    <div className="flex-1 space-y-2">
+                                                        <Label>Type de congé</Label>
+                                                        <Select
+                                                            value={ligne.typeId.toString()}
+                                                            onValueChange={(value) => modifierLigne(index, 'typeId', parseInt(value))}
+                                                        >
+                                                            <SelectTrigger>
+                                                                <SelectValue placeholder="Sélectionner" />
+                                                            </SelectTrigger>
+                                                            <SelectContent>
+                                                                {typesConge.map(type => (
+                                                                    <SelectItem key={type.id} value={type.id.toString()}>
+                                                                        {type.nom}
+                                                                    </SelectItem>
+                                                                ))}
+                                                            </SelectContent>
+                                                        </Select>
+                                                    </div>
+
+                                                    <div className="w-40 space-y-2">
+                                                        <Label>
+                                                            Nombre de jours
+                                                            {joursOuvres > 0 && (
+                                                                <span className="text-xs text-muted-foreground ml-1">
+                                                                    (max: {joursOuvres})
+                                                                </span>
+                                                            )}
+                                                        </Label>
+                                                        <Input
+                                                            type="number"
+                                                            step="0.5"
+                                                            min="0"
+                                                            max={joursOuvres}
+                                                            value={ligne.nombreJours || ''}
+                                                            onChange={(e) => modifierLigne(index, 'nombreJours', parseFloat(e.target.value) || 0)}
+                                                            placeholder={joursOuvres > 0 ? joursOuvres.toString() : "0"}
+                                                            className={enDepassement && ligne.nombreJours > 0 ? "border-destructive" : ""}
+                                                        />
+                                                    </div>
+
+                                                    <Button
+                                                        type="button"
+                                                        variant="ghost"
+                                                        size="icon"
+                                                        onClick={() => supprimerLigne(index)}
+                                                        disabled={lignesConge.length === 1}
+                                                        className="text-destructive hover:text-destructive hover:bg-destructive/10"
+                                                    >
+                                                        <Trash2 className="w-4 h-4" />
+                                                    </Button>
+                                                </div>
+
+                                                {/* Indicateur de solde pour cette ligne */}
+                                                {employeSelectionne && ligne.typeId > 0 && ligne.nombreJours > 0 && (
+                                                    <div className={`text-xs px-3 py-1.5 rounded-md ${enDepassement ? 'bg-destructive/10 text-destructive' : 'bg-success/10 text-success'}`}>
+                                                        {obtenirNomType(ligne.typeId)}:
+                                                        <span className="font-semibold ml-1">
+                                                            {soldeDisponible}j disponibles
+                                                        </span>
+                                                        {dejaSaisi > 0 && (
+                                                            <>
+                                                                {' '}→ {dejaSaisi}j saisis =
+                                                                <span className="font-bold ml-1">
+                                                                    {restant}j restants
+                                                                    {enDepassement && ' ⚠️'}
+                                                                </span>
+                                                            </>
+                                                        )}
+                                                    </div>
+                                                )}
+                                            </div>
+                                        );
+                                    })}
+                                </div>
+                            </div>
+
+                            {aDepassement && (
+                                <Alert variant="destructive">
+                                    <AlertCircle className="h-4 w-4" />
+                                    <AlertDescription>
+                                        <strong>Attention:</strong> La saisie dépasse les compteurs disponibles de le collaborateur.
+                                        La demande sera tout de même enregistrée mais nécessitera une validation.
+                                    </AlertDescription>
+                                </Alert>
+                            )}
+
+                            <div className="space-y-2">
+                                <Label htmlFor="commentaire">Commentaire (optionnel)</Label>
+                                <Textarea
+                                    id="commentaire"
+                                    placeholder="Préciser le motif, les circonstances..."
+                                    value={formData.commentaire}
+                                    onChange={(e) => setFormData({ ...formData, commentaire: e.target.value })}
+                                    rows={4}
+                                    className="resize-none"
+                                />
+                            </div>
+
+                            <div className="flex gap-4 pt-4">
+                                <Button
+                                    type="submit"
+                                    disabled={loading}
+                                    className="flex-1 bg-gradient-primary hover:opacity-90 transition-smooth shadow-elegant"
+                                >
+                                    <Save className="w-4 h-4 mr-2" />
+                                    {loading ? 'Enregistrement...' : 'Enregistrer la demande'}
+                                </Button>
+                                <Button
+                                    type="button"
+                                    variant="outline"
+                                    onClick={() => navigate("/dashboard")}
+                                    disabled={loading}
+                                    className="transition-smooth"
+                                >
+                                    Annuler
+                                </Button>
+                            </div>
+                        </form>
+                    </CardContent>
+                </Card>
+            </main>
+        </div>
+    );
+};
+
+export default SaisieManuelle;
--- a/src/pages/TeamDetail.tsx
+++ b/src/pages/TeamDetail.tsx
@@ -0,0 +1,298 @@
+import { useState, useEffect, useMemo } from "react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Calendar, ArrowLeft, Users } from "lucide-react";
+import { useNavigate, useParams } from "react-router-dom";
+import { toast } from "sonner";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+
+interface Membre {
+    id: number;
+    nom: string;
+    email: string;
+    role: string;
+    soldeCP: number;
+    soldeRTT: number;
+    typeContrat?: string;
+    Actif?: number;
+}
+
+interface Equipe {
+    Id: number;
+    nomService: string;
+    nombreMembres: number;
+    demandesEnAttente: number;
+    campus: string;
+}
+
+const TeamDetail = () => {
+    const navigate = useNavigate();
+    const { id } = useParams<{ id: string }>();
+    const [equipe, setEquipe] = useState<Equipe | null>(null);
+    const [membres, setMembres] = useState<Membre[]>([]);
+    const [loadingEquipe, setLoadingEquipe] = useState(true);
+    const [loadingMembres, setLoadingMembres] = useState(true);
+
+    useEffect(() => {
+        if (id) {
+            chargerEquipe(parseInt(id));
+            chargerMembres(parseInt(id));
+        }
+    }, [id]);
+
+    const chargerEquipe = async (equipeId: number) => {
+        setLoadingEquipe(true);
+        try {
+            const token = localStorage.getItem('token');
+            const response = await fetch(`/api/equipes/${equipeId}`, {
+                headers: { 'Authorization': `Bearer ${token}` }
+            });
+
+            if (!response.ok) throw new Error('Équipe non trouvée');
+
+            const data = await response.json();
+            setEquipe(data);
+        } catch (error) {
+            toast.error("Erreur lors du chargement de l'équipe");
+            setEquipe(null);
+        } finally {
+            setLoadingEquipe(false);
+        }
+    };
+
+    const chargerMembres = async (equipeId: number) => {
+        setLoadingMembres(true);
+        try {
+            const token = localStorage.getItem('token');
+            const response = await fetch(`/api/equipes/${equipeId}/membres`, {
+                headers: { 'Authorization': `Bearer ${token}` }
+            });
+            if (!response.ok) throw new Error('Impossible de récupérer les membres');
+            const data = await response.json();
+
+            console.log('📊 Données membres reçues en frontend:', data);
+            data.forEach((m: Membre) => {
+                console.log(`   - ${m.nom}: CP=${m.soldeCP} (type: ${typeof m.soldeCP}), RTT=${m.soldeRTT} (type: ${typeof m.soldeRTT})`);
+            });
+
+            setMembres(data);
+        } catch (error) {
+            console.error('❌ Erreur chargement membres:', error);
+            toast.error("Erreur lors du chargement des membres");
+            setMembres([]);
+        } finally {
+            setLoadingMembres(false);
+        }
+    };
+
+    const getRoleBadge = (role: string) => {
+        switch (role) {
+            case 'Admin':
+                return <Badge variant="destructive">{role}</Badge>;
+            case 'RH':
+                return <Badge variant="default">{role}</Badge>;
+            case 'Validateur':
+                return <Badge variant="secondary">{role}</Badge>;
+            case 'Directeur de campus':
+                return <Badge className="bg-purple-600">{role}</Badge>;
+            default:
+                return <Badge variant="outline">{role}</Badge>;
+        }
+    };
+
+    // ✅ Fonction pour détecter si un membre est apprenti
+    const estApprenti = (membre: Membre): boolean => {
+        return membre.typeContrat === 'Apprentissage' ||
+            membre.role === 'Apprenti' ||
+            membre.role?.toLowerCase().includes('apprenti');
+    };
+
+    // ✅ CORRECTION: Utiliser useMemo pour recalculer les totaux à chaque changement de membres
+    const totaux = useMemo(() => {
+        if (!membres || membres.length === 0) {
+            console.log('⚠️ Aucun membre pour calculer les totaux');
+            return { totalCP: 0, totalRTT: 0 };
+        }
+
+        console.log('🧮 Calcul des totaux pour', membres.length, 'membres');
+
+        const totalCP = membres.reduce((sum, m) => {
+            const solde = parseFloat(String(m.soldeCP)) || 0;
+            console.log(`   - ${m.nom}: CP=${m.soldeCP} (${typeof m.soldeCP}) → ajout de ${solde}`);
+            return sum + solde;
+        }, 0);
+
+        // ✅ Exclure les apprentis du calcul des RTT
+        const totalRTT = membres.reduce((sum, m) => {
+            if (estApprenti(m)) {
+                console.log(`   - ${m.nom}: RTT=0 (Apprenti - pas de RTT)`);
+                return sum;
+            }
+            const solde = parseFloat(String(m.soldeRTT)) || 0;
+            console.log(`   - ${m.nom}: RTT=${m.soldeRTT} (${typeof m.soldeRTT}) → ajout de ${solde}`);
+            return sum + solde;
+        }, 0);
+
+        console.log('✅ Totaux calculés: CP=', totalCP, 'RTT=', totalRTT);
+        return { totalCP, totalRTT };
+    }, [membres]); // ✅ Recalculer quand membres change
+
+    if (loadingEquipe) {
+        return (
+            <div className="min-h-screen flex items-center justify-center">
+                <div className="text-center">
+                    <div className="w-16 h-16 border-4 border-primary border-t-transparent rounded-full animate-spin mx-auto mb-4" />
+                    <p className="text-muted-foreground">Chargement de l'équipe...</p>
+                </div>
+            </div>
+        );
+    }
+
+    if (!equipe) {
+        return (
+            <div className="min-h-screen flex items-center justify-center">
+                <p className="text-red-500 text-lg">Équipe introuvable</p>
+            </div>
+        );
+    }
+
+    return (
+        <div className="min-h-screen bg-gradient-subtle">
+            <header className="bg-card border-b border-border shadow-card">
+                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 flex items-center justify-between">
+                    <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => navigate("/teams")}
+                        className="transition-smooth"
+                    >
+                        <ArrowLeft className="w-4 h-4 mr-2" />
+                        Retour
+                    </Button>
+                    <div className="flex items-center space-x-3">
+                        <div className="w-10 h-10 rounded-xl flex items-center justify-center" style={{ backgroundColor: "#7e5aa2" }}>
+                            <Users className="w-5 h-5 text-primary-foreground" />
+                        </div>
+                        <div>
+                            <h1 className="text-2xl font-bold text-foreground">{equipe.nomService}</h1>
+                            <p className="text-sm text-muted-foreground">{equipe.campus}</p>
+                        </div>
+                    </div>
+                </div>
+            </header>
+
+            <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+                <div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
+                    <Card className="shadow-card border-0">
+                        <CardContent className="p-6 flex justify-between items-center">
+                            <div>
+                                <p className="text-sm text-muted-foreground">Membres</p>
+                                <p className="text-2xl font-bold">{equipe.nombreMembres}</p>
+                            </div>
+                            <Users className="w-8 h-8 text-primary" />
+                        </CardContent>
+                    </Card>
+
+                    <Card className="shadow-card border-0">
+                        <CardContent className="p-6 flex justify-between items-center">
+                            <div>
+                                <p className="text-sm text-muted-foreground">Demandes en attente</p>
+                                <p className="text-2xl font-bold text-warning">{equipe.demandesEnAttente}</p>
+                            </div>
+                            <Calendar className="w-8 h-8 text-warning" />
+                        </CardContent>
+                    </Card>
+
+                    <Card className="shadow-card border-0">
+                        <CardContent className="p-6">
+                            <p className="text-sm text-muted-foreground mb-1">Total CP</p>
+                            <p className="text-2xl font-bold">{totaux.totalCP.toFixed(1)}j</p>
+                        </CardContent>
+                    </Card>
+
+                    <Card className="shadow-card border-0">
+                        <CardContent className="p-6">
+                            <p className="text-sm text-muted-foreground mb-1">Total RTT</p>
+                            <p className="text-2xl font-bold">{totaux.totalRTT.toFixed(1)}j</p>
+                        </CardContent>
+                    </Card>
+                </div>
+
+                <Card className="shadow-card border-0">
+                    <CardHeader>
+                        <CardTitle>Membres de l'équipe</CardTitle>
+                        <CardDescription>
+                            {membres.length} membre{membres.length > 1 ? 's' : ''}
+                        </CardDescription>
+                    </CardHeader>
+                    <CardContent>
+                        {loadingMembres ? (
+                            <div className="text-center py-12">
+                                <div className="w-16 h-16 border-4 border-primary border-t-transparent rounded-full animate-spin mx-auto mb-4" />
+                                <p className="text-muted-foreground">Chargement des membres...</p>
+                            </div>
+                        ) : membres.length > 0 ? (
+                            <div className="overflow-x-auto">
+                                <Table>
+                                    <TableHeader>
+                                        <TableRow>
+                                            <TableHead>Nom</TableHead>
+                                            <TableHead>Email</TableHead>
+                                            <TableHead>Rôle</TableHead>
+                                            <TableHead className="text-right">CP restants</TableHead>
+                                            <TableHead className="text-right">RTT restants</TableHead>
+                                        </TableRow>
+                                    </TableHeader>
+                                    <TableBody>
+                                        {membres.map((membre) => {
+                                            const isApprenti = estApprenti(membre);
+
+                                            return (
+                                                <TableRow key={membre.id}>
+                                                    <TableCell className="font-medium">
+                                                        <div className="flex items-center gap-2">
+                                                            {membre.nom}
+                                                            {isApprenti && (
+                                                                <Badge variant="outline" className="bg-blue-100 text-blue-700 border-blue-300 text-xs">
+                                                                    Apprenti
+                                                                </Badge>
+                                                            )}
+                                                        </div>
+                                                    </TableCell>
+                                                    <TableCell className="text-sm text-muted-foreground">{membre.email}</TableCell>
+                                                    <TableCell>{getRoleBadge(membre.role)}</TableCell>
+                                                    <TableCell className="text-right">
+                                                        <span className="font-semibold">
+                                                            {parseFloat(String(membre.soldeCP || 0)).toFixed(1)}j
+                                                        </span>
+                                                    </TableCell>
+                                                    <TableCell className="text-right">
+                                                        {isApprenti ? (
+                                                            <span className="text-muted-foreground italic">N/A</span>
+                                                        ) : (
+                                                            <span className="font-semibold">
+                                                                {parseFloat(String(membre.soldeRTT || 0)).toFixed(1)}j
+                                                            </span>
+                                                        )}
+                                                    </TableCell>
+                                                </TableRow>
+                                            );
+                                        })}
+                                    </TableBody>
+                                </Table>
+                            </div>
+                        ) : (
+                            <div className="text-center py-12">
+                                <Users className="w-16 h-16 text-muted-foreground mx-auto mb-4 opacity-50" />
+                                <p className="text-muted-foreground text-lg">Aucun membre dans cette équipe</p>
+                            </div>
+                        )}
+                    </CardContent>
+                </Card>
+            </main>
+        </div>
+    );
+};
+
+export default TeamDetail;
--- a/src/pages/Teams.tsx
+++ b/src/pages/Teams.tsx
@@ -0,0 +1,245 @@
+import { useState, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Badge } from "@/components/ui/badge";
+import { Calendar, Search, ArrowLeft, Users } from "lucide-react";
+import { useNavigate } from "react-router-dom";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { toast } from "sonner";
+
+interface Team {
+    Id: number;
+    service: string;
+    nombreMembres: number;
+    demandesEnAttente: number;
+    campus: string;
+}
+
+const Teams = () => {
+    const navigate = useNavigate();
+    const [searchQuery, setSearchQuery] = useState("");
+    const [filterDepartment, setFilterDepartment] = useState("all");
+    const [filterCampus, setFilterCampus] = useState("all");
+    const [teams, setTeams] = useState<Team[]>([]);
+    const [loading, setLoading] = useState(true);
+
+    // Mapping des campus
+    const getCampusFullName = (code: string): string => {
+        const mapping: Record<string, string> = {
+            'CGY': 'Cergy',
+            'Marseille': 'Marseille',
+            'Nantes': 'Nantes',
+            'SQY': 'Saint-Quentin-en-Yvelines',
+            'Non assigné': 'Non assigné'
+        };
+        return mapping[code] || code;
+    };
+
+    useEffect(() => {
+        chargerEquipes();
+    }, []);
+
+    const chargerEquipes = async () => {
+        setLoading(true);
+        try {
+            const token = localStorage.getItem('token');
+            const response = await fetch('/api/equipes', {
+                headers: { 'Authorization': `Bearer ${token}` }
+            });
+            const data = await response.json();
+            setTeams(data || []);
+        } catch (error) {
+            console.error('Erreur:', error);
+            toast.error("Erreur lors du chargement des équipes");
+            setTeams([]);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    // Obtenir la liste des campus d'une équipe
+    const getCampusList = (campus: string): string[] => {
+        if (!campus) return ['Non assigné'];
+        return campus.split(',').map(c => c.trim());
+    };
+
+    // Filtrage des équipes
+    const filteredTeams = teams.filter(team => {
+        const campusList = getCampusList(team.campus);
+
+        // Recherche
+        const matchesSearch = !searchQuery ||
+            team.service?.toLowerCase().includes(searchQuery.toLowerCase()) ||
+            campusList.some(c =>
+                c.toLowerCase().includes(searchQuery.toLowerCase()) ||
+                getCampusFullName(c).toLowerCase().includes(searchQuery.toLowerCase())
+            );
+
+        // Filtre département
+        const matchesDepartment = filterDepartment === "all" || team.service === filterDepartment;
+
+        // Filtre campus
+        const matchesCampus = filterCampus === "all" || campusList.includes(filterCampus);
+
+        return matchesSearch && matchesDepartment && matchesCampus;
+    });
+
+    // Tri par service
+    const sortedTeams = [...filteredTeams].sort((a, b) =>
+        (a.service || '').localeCompare(b.service || '')
+    );
+
+    // Liste unique des campus
+    const allCampus = new Set<string>();
+    teams.forEach(team => {
+        getCampusList(team.campus).forEach(c => allCampus.add(c));
+    });
+    const campusList = Array.from(allCampus).sort();
+
+    // Liste unique des services
+    const departments = Array.from(new Set(teams.map(t => t.service))).filter(Boolean).sort();
+
+    return (
+        <div className="min-h-screen bg-gradient-subtle">
+            <header className="bg-card border-b border-border shadow-card">
+                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
+                    <div className="flex items-center justify-between">
+                        <div className="flex items-center space-x-4">
+                            <Button
+                                variant="ghost"
+                                size="sm"
+                                onClick={() => navigate("/dashboard")}
+                                className="transition-smooth"
+                            >
+                                <ArrowLeft className="w-4 h-4 mr-2" />
+                                Retour
+                            </Button>
+                            <div className="flex items-center space-x-3">
+                                <div className="w-10 h-10 rounded-xl flex items-center justify-center" style={{ backgroundColor: "#7e5aa2" }}>
+                                    <Calendar className="w-5 h-5 text-primary-foreground" />
+                                </div>
+                                <h1 className="text-2xl font-bold text-foreground">Gestion des équipes</h1>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </header>
+
+            <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+                <Card className="shadow-card border-0 mb-8">
+                    <CardContent className="p-6">
+                        <div className="flex flex-col md:flex-row gap-4">
+                            {/* Recherche */}
+                            <div className="flex-1 relative">
+                                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+                                <Input
+                                    placeholder="Rechercher une équipe ou un campus..."
+                                    value={searchQuery}
+                                    onChange={(e) => setSearchQuery(e.target.value)}
+                                    className="pl-10 transition-smooth"
+                                />
+                            </div>
+
+                            {/* Filtre Campus */}
+                            <Select value={filterCampus} onValueChange={setFilterCampus}>
+                                <SelectTrigger className="w-full md:w-[250px]">
+                                    <SelectValue placeholder="Tous les campus" />
+                                </SelectTrigger>
+                                <SelectContent>
+                                    <SelectItem value="all">Tous les campus</SelectItem>
+                                    {campusList.map((campus) => (
+                                        <SelectItem key={campus} value={campus}>
+                                            {getCampusFullName(campus)}
+                                        </SelectItem>
+                                    ))}
+                                </SelectContent>
+                            </Select>
+
+                            {/* Filtre Service */}
+                            <Select value={filterDepartment} onValueChange={setFilterDepartment}>
+                                <SelectTrigger className="w-full md:w-[200px]">
+                                    <SelectValue placeholder="Tous les services" />
+                                </SelectTrigger>
+                                <SelectContent>
+                                    <SelectItem value="all">Tous les services</SelectItem>
+                                    {departments.map((dept) => (
+                                        <SelectItem key={dept} value={dept}>
+                                            {dept}
+                                        </SelectItem>
+                                    ))}
+                                </SelectContent>
+                            </Select>
+                        </div>
+                    </CardContent>
+                </Card>
+
+                {/* Contenu */}
+                {loading ? (
+                    <div className="text-center py-12">
+                        <div className="w-16 h-16 border-4 border-primary border-t-transparent rounded-full animate-spin mx-auto mb-4" />
+                        <p className="text-muted-foreground">Chargement des équipes...</p>
+                    </div>
+                ) : sortedTeams.length === 0 ? (
+                    <div className="text-center py-12">
+                        <Users className="w-16 h-16 text-muted-foreground mx-auto mb-4 opacity-50" />
+                        <p className="text-muted-foreground text-lg">Aucune équipe trouvée</p>
+                    </div>
+                ) : (
+                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                        {sortedTeams.map((team) => {
+                            const campusArray = getCampusList(team.campus);
+
+                            return (
+                                <Card
+                                    key={team.Id}
+                                    className="shadow-card border-0 bg-gradient-card hover:shadow-elegant transition-smooth cursor-pointer"
+                                    onClick={() => navigate(`/teams/${team.Id}`)}
+                                >
+                                    <CardHeader>
+                                        <div className="flex items-start justify-between">
+                                            <div className="flex-1">
+                                                <CardTitle className="text-lg mb-2">{team.service}</CardTitle>
+                                                <div className="flex flex-wrap gap-1">
+                                                    {campusArray.map((campus, idx) => (
+                                                        <Badge key={`${team.Id}-${idx}`} variant="outline" className="text-xs">
+                                                            {getCampusFullName(campus)}
+                                                        </Badge>
+                                                    ))}
+                                                </div>
+                                            </div>
+                                            <div className="w-12 h-12 bg-primary/10 rounded-xl flex items-center justify-center">
+                                                <Users className="w-6 h-6 text-primary" />
+                                            </div>
+                                        </div>
+                                    </CardHeader>
+                                    <CardContent>
+                                        <div className="space-y-3">
+                                            <div className="flex items-center justify-between text-sm">
+                                                <span className="text-muted-foreground">Membres</span>
+                                                <span className="font-medium text-foreground">{team.nombreMembres}</span>
+                                            </div>
+                                            <div className="flex items-center justify-between text-sm">
+                                                <span className="text-muted-foreground">Demandes en attente</span>
+                                                <Badge
+                                                    variant="outline"
+                                                    className={team.demandesEnAttente > 0
+                                                        ? "bg-warning/10 text-warning border-warning/20"
+                                                        : "bg-success/10 text-success border-success/20"}
+                                                >
+                                                    {team.demandesEnAttente}
+                                                </Badge>
+                                            </div>
+                                        </div>
+                                    </CardContent>
+                                </Card>
+                            );
+                        })}
+                    </div>
+                )}
+            </main>
+        </div>
+    );
+};
+
+export default Teams;
--- a/src/pages/ValidationDemandes.tsx
+++ b/src/pages/ValidationDemandes.tsx
@@ -0,0 +1,360 @@
+import { useState, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Textarea } from "@/components/ui/textarea";
+import { Label } from "@/components/ui/label";
+import { Calendar, ArrowLeft, CheckCircle, XCircle, Clock, Filter, AlertCircle } from "lucide-react";
+import { useNavigate } from "react-router-dom";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { toast } from "sonner";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
+import { useSSE } from "@/hooks/useSSE";
+
+interface Demande {
+    Id: number;
+    nomEmploye: string;
+    emailEmploye: string;
+    service: string;
+    typesConge: string;
+    DateDebut: string;
+    DateFin: string;
+    NombreJours: number;
+    Statut: string;
+    Commentaire: string;
+    DateDemande: string;
+}
+
+const ValidationDemandes = () => {
+    const navigate = useNavigate();
+    const [demandes, setDemandes] = useState<Demande[]>([]);
+    const [filtreStatut, setFiltreStatut] = useState("En attente");
+    const [selectedDemande, setSelectedDemande] = useState<Demande | null>(null);
+    const [commentaireValidation, setCommentaireValidation] = useState("");
+    const [loading, setLoading] = useState(false);
+
+    useEffect(() => {
+        chargerDemandes();
+    }, [filtreStatut]);
+
+    const chargerDemandes = async () => {
+        try {
+            const token = localStorage.getItem('token');
+            const statutFiltre = filtreStatut === "Toutes" ? "" : filtreStatut;
+
+            const response = await fetch(`/api/demandes?statut=${statutFiltre}`, {
+                headers: { 'Authorization': `Bearer ${token}` }
+            });
+
+            const data = await response.json();
+            setDemandes(data);
+        } catch (error) {
+            toast.error("Erreur lors du chargement des demandes");
+        }
+    };
+
+    // 🔔 CONNEXION SSE
+    useSSE((event) => {
+        console.log('🔔 Événement SSE reçu dans ValidationDemandes:', event);
+
+        switch (event.type) {
+            case 'connected':
+                console.log('✅ ValidationDemandes connecté au serveur temps réel');
+                break;
+
+            case 'demande-created':
+            case 'demande-updated':
+            case 'demande-validated':
+            case 'demande-deleted':
+            case 'demande-list-updated':
+                console.log('🔄 Rechargement des demandes...');
+                chargerDemandes();
+                break;
+
+            // 🆕 AJOUTER LA GESTION DES ANNULATIONS
+            case 'demande-cancelled':
+                console.log('🚫 Demande annulée - rechargement...');
+                toast.warning("Une demande a été annulée", {
+                    description: "La liste a été mise à jour",
+                    duration: 4000
+                });
+                chargerDemandes();
+                break;
+
+            case 'heartbeat':
+                // Heartbeat pour garder la connexion
+                break;
+
+            default:
+                console.log('❓ Type d\'événement inconnu:', event.type);
+        }
+    });
+
+    const validerDemande = async (id: number, statut: 'Validée' | 'Refusée') => {
+        setLoading(true);
+        try {
+            const token = localStorage.getItem('token');
+            const response = await fetch(`/api/demandes/${id}/valider`, {
+                method: 'PUT',
+                headers: {
+                    'Authorization': `Bearer ${token}`,
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({ statut, commentaire: commentaireValidation })
+            });
+
+            if (response.ok) {
+                toast.success(`Demande ${statut.toLowerCase()} avec succès`);
+                setCommentaireValidation("");
+                setSelectedDemande(null);
+                // Pas besoin d'appeler chargerDemandes() car le SSE va le faire automatiquement
+            } else {
+                throw new Error('Erreur lors de la validation');
+            }
+        } catch (error) {
+            toast.error("Erreur lors de la validation");
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    // ✅ FONCTION MISE À JOUR AVEC LE STATUT "ANNULÉE"
+    const getStatutBadge = (statut: string) => {
+        switch (statut) {
+            case "En attente":
+                return <Badge variant="outline" className="bg-warning/10 text-warning border-warning/20">
+                    <Clock className="w-3 h-3 mr-1" />
+                    En attente
+                </Badge>;
+            case "Validée":
+                return <Badge variant="outline" className="bg-success/10 text-success border-success/20">
+                    <CheckCircle className="w-3 h-3 mr-1" />
+                    Validée
+                </Badge>;
+            case "Refusée":
+                return <Badge variant="outline" className="bg-destructive/10 text-destructive border-destructive/20">
+                    <XCircle className="w-3 h-3 mr-1" />
+                    Refusée
+                </Badge>;
+            case "Annulée":
+                return <Badge variant="outline" className="bg-gray-100 text-gray-700 border-gray-300 dark:bg-gray-800 dark:text-gray-300">
+                    <AlertCircle className="w-3 h-3 mr-1" />
+                    Annulée
+                </Badge>;
+            default:
+                return <Badge variant="outline" className="bg-gray-100 text-gray-700">
+                    {statut}
+                </Badge>;
+        }
+    };
+
+    const formatDate = (dateString: string) => {
+        return new Date(dateString).toLocaleDateString('fr-FR', {
+            day: '2-digit',
+            month: '2-digit',
+            year: 'numeric'
+        });
+    };
+
+    return (
+        <div className="min-h-screen bg-gradient-subtle">
+            <header className="bg-card border-b border-border shadow-card">
+                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
+                    <div className="flex items-center justify-between">
+                        <div className="flex items-center space-x-4">
+                            <Button
+                                variant="ghost"
+                                size="sm"
+                                onClick={() => navigate("/dashboard")}
+                                className="transition-smooth"
+                            >
+                                <ArrowLeft className="w-4 h-4 mr-2" />
+                                Retour
+                            </Button>
+                            <div className="flex items-center space-x-3">
+                                <div className="w-10 h-10 rounded-xl flex items-center justify-center" style={{ backgroundColor: "#7e5aa2" }}>
+                                    <Calendar className="w-5 h-5 text-primary-foreground" />
+                                </div>
+                                <h1 className="text-2xl font-bold text-foreground">Validation des demandes</h1>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </header>
+
+            <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+                {/* ✅ FILTRE AVEC L'OPTION "ANNULÉE" */}
+                <Card className="shadow-card border-0 mb-8">
+                    <CardContent className="p-6">
+                        <div className="flex items-center gap-4">
+                            <Filter className="w-5 h-5 text-muted-foreground" />
+                            <Select value={filtreStatut} onValueChange={setFiltreStatut}>
+                                <SelectTrigger className="w-[200px]">
+                                    <SelectValue placeholder="Statut" />
+                                </SelectTrigger>
+                                <SelectContent>
+                                    <SelectItem value="En attente">En attente</SelectItem>
+                                    <SelectItem value="Validée">Validées</SelectItem>
+                                    <SelectItem value="Refusée">Refusées</SelectItem>
+                                    <SelectItem value="Annulée">Annulées</SelectItem>
+                                    <SelectItem value="Toutes">Toutes</SelectItem>
+                                </SelectContent>
+                            </Select>
+                            <Badge variant="secondary" className="ml-auto">
+                                {demandes.length} demande{demandes.length > 1 ? 's' : ''}
+                            </Badge>
+                        </div>
+                    </CardContent>
+                </Card>
+
+                <div className="space-y-4">
+                    {demandes.map((demande) => (
+                        <Card key={demande.Id} className="shadow-card border-0 bg-gradient-card hover:shadow-elegant transition-smooth">
+                            <CardContent className="p-6">
+                                <div className="flex items-start justify-between">
+                                    <div className="flex-1 space-y-3">
+                                        <div className="flex items-center gap-3">
+                                            <h3 className="text-lg font-semibold">{demande.nomEmploye}</h3>
+                                            {getStatutBadge(demande.Statut)}
+                                            <Badge variant="outline">{demande.service}</Badge>
+                                        </div>
+
+                                        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
+                                            <div>
+                                                <p className="text-muted-foreground">Type</p>
+                                                <p className="font-medium">{demande.typesConge}</p>
+                                            </div>
+                                            <div>
+                                                <p className="text-muted-foreground">Période</p>
+                                                <p className="font-medium">
+                                                    {formatDate(demande.DateDebut)} - {formatDate(demande.DateFin)}
+                                                </p>
+                                            </div>
+                                            <div>
+                                                <p className="text-muted-foreground">Durée</p>
+                                                <p className="font-medium">{demande.NombreJours} jour{demande.NombreJours > 1 ? 's' : ''}</p>
+                                            </div>
+                                            <div>
+                                                <p className="text-muted-foreground">Demandé le</p>
+                                                <p className="font-medium">{formatDate(demande.DateDemande)}</p>
+                                            </div>
+                                        </div>
+
+                                        {demande.Commentaire && (
+                                            <div className="bg-muted/50 p-3 rounded-lg">
+                                                <p className="text-sm text-muted-foreground mb-1">Commentaire :</p>
+                                                <p className="text-sm">{demande.Commentaire}</p>
+                                            </div>
+                                        )}
+                                    </div>
+
+                                    {/* ✅ AFFICHER LES BOUTONS UNIQUEMENT POUR LES DEMANDES "EN ATTENTE" */}
+                                    {demande.Statut === 'En attente' && (
+                                        <div className="flex gap-2 ml-4">
+                                            <Dialog>
+                                                <DialogTrigger asChild>
+                                                    <Button
+                                                        variant="outline"
+                                                        size="sm"
+                                                        className="bg-success/10 hover:bg-success/20 border-success/20 text-success"
+                                                        onClick={() => setSelectedDemande(demande)}
+                                                    >
+                                                        <CheckCircle className="w-4 h-4 mr-1" />
+                                                        Valider
+                                                    </Button>
+                                                </DialogTrigger>
+                                                <DialogContent>
+                                                    <DialogHeader>
+                                                        <DialogTitle>Valider la demande</DialogTitle>
+                                                        <DialogDescription>
+                                                            Demande de {demande.nomEmploye} pour {demande.typesConge}
+                                                        </DialogDescription>
+                                                    </DialogHeader>
+                                                    <div className="space-y-4 py-4">
+                                                        <div className="space-y-2">
+                                                            <Label>Commentaire (optionnel)</Label>
+                                                            <Textarea
+                                                                placeholder="Ajouter un commentaire..."
+                                                                value={commentaireValidation}
+                                                                onChange={(e) => setCommentaireValidation(e.target.value)}
+                                                                rows={3}
+                                                            />
+                                                        </div>
+                                                        <Button
+                                                            className="w-full bg-success hover:bg-success/90"
+                                                            onClick={() => validerDemande(demande.Id, 'Validée')}
+                                                            disabled={loading}
+                                                        >
+                                                            {loading ? 'Validation...' : 'Confirmer la validation'}
+                                                        </Button>
+                                                    </div>
+                                                </DialogContent>
+                                            </Dialog>
+
+                                            <Dialog>
+                                                <DialogTrigger asChild>
+                                                    <Button
+                                                        variant="outline"
+                                                        size="sm"
+                                                        className="bg-destructive/10 hover:bg-destructive/20 border-destructive/20 text-destructive"
+                                                        onClick={() => setSelectedDemande(demande)}
+                                                    >
+                                                        <XCircle className="w-4 h-4 mr-1" />
+                                                        Refuser
+                                                    </Button>
+                                                </DialogTrigger>
+                                                <DialogContent>
+                                                    <DialogHeader>
+                                                        <DialogTitle>Refuser la demande</DialogTitle>
+                                                        <DialogDescription>
+                                                            Demande de {demande.nomEmploye} pour {demande.typesConge}
+                                                        </DialogDescription>
+                                                    </DialogHeader>
+                                                    <div className="space-y-4 py-4">
+                                                        <div className="space-y-2">
+                                                            <Label>Motif du refus <span className="text-destructive">*</span></Label>
+                                                            <Textarea
+                                                                placeholder="Expliquer le motif du refus..."
+                                                                value={commentaireValidation}
+                                                                onChange={(e) => setCommentaireValidation(e.target.value)}
+                                                                rows={3}
+                                                                required
+                                                            />
+                                                        </div>
+                                                        <Button
+                                                            className="w-full bg-destructive hover:bg-destructive/90"
+                                                            onClick={() => validerDemande(demande.Id, 'Refusée')}
+                                                            disabled={loading || !commentaireValidation}
+                                                        >
+                                                            {loading ? 'Refus...' : 'Confirmer le refus'}
+                                                        </Button>
+                                                    </div>
+                                                </DialogContent>
+                                            </Dialog>
+                                        </div>
+                                    )}
+                                </div>
+                            </CardContent>
+                        </Card>
+                    ))}
+
+                    {demandes.length === 0 && (
+                        <Card className="shadow-card border-0">
+                            <CardContent className="p-12 text-center">
+                                <AlertCircle className="w-16 h-16 text-muted-foreground mx-auto mb-4 opacity-50" />
+                                <p className="text-muted-foreground text-lg">
+                                    {filtreStatut === "Toutes"
+                                        ? "Aucune demande à afficher"
+                                        : `Aucune demande ${filtreStatut.toLowerCase()}`
+                                    }
+                                </p>
+                            </CardContent>
+                        </Card>
+                    )}
+                </div>
+            </main>
+        </div>
+    );
+};
+
+export default ValidationDemandes;
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
--- a/11
+++ b/11
@@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -0,0 +1,53 @@
+
+export default {
+    darkMode: ["class"],
+    content: [
+        "./index.html",
+        "./src/**/*.{js,ts,jsx,tsx}",
+    ],
+    theme: {
+        extend: {
+            colors: {
+                border: "hsl(var(--border))",
+                input: "hsl(var(--input))",
+                ring: "hsl(var(--ring))",
+                background: "hsl(var(--background))",
+                foreground: "hsl(var(--foreground))",
+                primary: {
+                    DEFAULT: "hsl(var(--primary))",
+                    foreground: "hsl(var(--primary-foreground))",
+                },
+                secondary: {
+                    DEFAULT: "hsl(var(--secondary))",
+                    foreground: "hsl(var(--secondary-foreground))",
+                },
+                destructive: {
+                    DEFAULT: "hsl(var(--destructive))",
+                    foreground: "hsl(var(--destructive-foreground))",
+                },
+                muted: {
+                    DEFAULT: "hsl(var(--muted))",
+                    foreground: "hsl(var(--muted-foreground))",
+                },
+                accent: {
+                    DEFAULT: "hsl(var(--accent))",
+                    foreground: "hsl(var(--accent-foreground))",
+                },
+                popover: {
+                    DEFAULT: "hsl(var(--popover))",
+                    foreground: "hsl(var(--popover-foreground))",
+                },
+                card: {
+                    DEFAULT: "hsl(var(--card))",
+                    foreground: "hsl(var(--card-foreground))",
+                },
+            },
+            borderRadius: {
+                lg: "var(--radius)",
+                md: "calc(var(--radius) - 2px)",
+                sm: "calc(var(--radius) - 4px)",
+            },
+        },
+    },
+    plugins: [require("tailwindcss-animate")],
+}
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -0,0 +1,102 @@
+import type { Config } from "tailwindcss";
+
+export default {
+  darkMode: ["class"],
+  content: ["./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}"],
+  prefix: "",
+  theme: {
+    container: {
+      center: true,
+      padding: "2rem",
+      screens: {
+        "2xl": "1400px",
+      },
+    },
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+          glow: "hsl(var(--primary-glow))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        success: {
+          DEFAULT: "hsl(var(--success))",
+          foreground: "hsl(var(--success-foreground))",
+        },
+        warning: {
+          DEFAULT: "hsl(var(--warning))",
+          foreground: "hsl(var(--warning-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+      },
+      backgroundImage: {
+        'gradient-primary': 'var(--gradient-primary)',
+        'gradient-subtle': 'var(--gradient-subtle)',
+        'gradient-card': 'var(--gradient-card)',
+      },
+      boxShadow: {
+        'elegant': 'var(--shadow-elegant)',
+        'card': 'var(--shadow-card)',
+      },
+      transitionTimingFunction: {
+        'smooth': 'var(--transition-smooth)',
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      keyframes: {
+        "accordion-down": {
+          from: {
+            height: "0",
+          },
+          to: {
+            height: "var(--radix-accordion-content-height)",
+          },
+        },
+        "accordion-up": {
+          from: {
+            height: "var(--radix-accordion-content-height)",
+          },
+          to: {
+            height: "0",
+          },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+      },
+    },
+  },
+  plugins: [require("tailwindcss-animate")],
+} satisfies Config;
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": false,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noImplicitAny": false,
+    "noFallthroughCasesInSwitch": false,
+
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"]
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -0,0 +1,16 @@
+{
+  "files": [],
+  "references": [{ "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" }],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "noImplicitAny": false,
+    "noUnusedParameters": false,
+    "skipLibCheck": true,
+    "allowJs": true,
+    "noUnusedLocals": false,
+    "strictNullChecks": false
+  }
+}
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/vite.config.js
+++ b/vite.config.js
@@ -0,0 +1,34 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import path from 'path'
+import http from 'http'
+
+export default defineConfig({
+    plugins: [react()],
+    resolve: {
+        alias: {
+            '@': path.resolve(__dirname, './src'),
+        },
+    },
+    server: {
+        host: true,
+        port: 3014,
+        allowedHosts: ['mygta-rh.ensup-adm.net', 'localhost'],
+        proxy: {
+            '/api': {
+                target: 'http://gtarh-backend:3000',
+                changeOrigin: true,
+                secure: false,
+                ws: true,
+                rewrite: (path) => path.replace(/^\/api/, ''), // ✅ RETIRE /api
+                configure: (proxy, options) => {
+                    options.agent = new http.Agent({ family: 4 });
+                }
+            }
+        }
+    },
+    build: {
+        outDir: 'dist',
+        sourcemap: false,
+    }
+})
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -0,0 +1,18 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react-swc";
+import path from "path";
+import { componentTagger } from "lovable-tagger";
+
+// https://vitejs.dev/config/
+export default defineConfig(({ mode }) => ({
+  server: {
+    host: "::",
+    port: 8080,
+  },
+  plugins: [react(), mode === "development" && componentTagger()].filter(Boolean),
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+}));