create-crm-tmp 1.1.2 → 2.0.0

package/template/src/app/(dashboard)/users/list/page.tsx

@@ -3,9 +3,11 @@
 import { useSession } from '@/lib/auth-client';
 import { useEffect, useState, useMemo } from 'react';
 import { cn } from '@/lib/utils';
-import { UsersTableSkeleton } from '@/components/skeleton';
-import Link from 'next/link';
-import { ArrowLeft, Search, RefreshCw } from 'lucide-react';
+import { UsersTableSkeleton, Spinner } from '@/components/skeleton';
+import { Search, RefreshCw, Send } from 'lucide-react';
+import { useMobileMenuContext } from '@/contexts/mobile-menu-context';
+import { ProtectedPage } from '@/components/protected-page';
+import { useAppToast } from '@/contexts/app-toast-context';
 
 interface User {
   id: string;
@@ -20,6 +22,7 @@ interface User {
   emailVerified: boolean;
   active: boolean;
   createdAt: string;
+  invitationStatus: 'completed' | 'pending' | 'expired' | null;
 }
 
 interface Role {
@@ -31,6 +34,8 @@ interface Role {
 
 export default function UsersPage() {
   const { data: session } = useSession();
+  const { toggle: toggleMobileMenu, isOpen: isMobileMenuOpen } = useMobileMenuContext();
+  const toast = useAppToast();
   const [users, setUsers] = useState<User[]>([]);
   const [roles, setRoles] = useState<Role[]>([]);
   const [loading, setLoading] = useState(true);
@@ -44,6 +49,7 @@ export default function UsersPage() {
   const [search, setSearch] = useState('');
   const [error, setError] = useState('');
   const [successMessage, setSuccessMessage] = useState('');
+  const [resendingIds, setResendingIds] = useState<Set<string>>(new Set());
 
   const fetchUsers = async () => {
     try {
@@ -76,12 +82,24 @@ export default function UsersPage() {
     }
   };
 
-  // Charger les utilisateurs et les profils
   useEffect(() => {
-    fetchUsers();
-    fetchRoles();
+    Promise.all([fetchUsers(), fetchRoles()]);
   }, []);
 
+  useEffect(() => {
+    if (error) {
+      toast.error(error);
+      setError('');
+    }
+  }, [error, toast]);
+
+  useEffect(() => {
+    if (successMessage) {
+      toast.success(successMessage);
+      setSuccessMessage('');
+    }
+  }, [successMessage, toast]);
+
   const handleAddUser = async (e: React.FormEvent) => {
     e.preventDefault();
     setError('');
@@ -156,6 +174,33 @@ export default function UsersPage() {
     }
   };
 
+  const handleResendInvite = async (userId: string, userName: string) => {
+    try {
+      setResendingIds((prev) => new Set(prev).add(userId));
+      setError('');
+      const response = await fetch(`/api/users/${userId}/resend-invite`, {
+        method: 'POST',
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) {
+        throw new Error(data.error || "Erreur lors du renvoi de l'invitation");
+      }
+
+      setSuccessMessage(`Invitation renvoyée à ${userName}`);
+      fetchUsers();
+    } catch (err: any) {
+      setError(err.message);
+    } finally {
+      setResendingIds((prev) => {
+        const next = new Set(prev);
+        next.delete(userId);
+        return next;
+      });
+    }
+  };
+
   const filteredUsers = useMemo(() => {
     const term = search.trim().toLowerCase();
     if (!term) return users;
@@ -171,391 +216,352 @@ export default function UsersPage() {
   }, [users, search]);
 
   return (
-    <div className="bg-crms-bg flex h-full flex-col">
-      {/* Header */}
-      <div className="border-b border-gray-200 bg-white px-4 py-3 sm:px-6 sm:py-4 lg:px-8">
-        {/* Retour */}
-        <Link
-          href="/users"
-          className="mb-2 inline-flex items-center gap-1.5 text-sm text-gray-500 transition-colors hover:text-gray-900"
-        >
-          <ArrowLeft className="h-4 w-4" />
-          <span>Droits d&apos;accès</span>
-        </Link>
-
-        <div className="mb-3 flex items-center justify-between gap-2">
-          <div className="min-w-0 flex-1">
-            <div className="flex items-center gap-2">
-              <h1 className="text-xl font-bold text-gray-900 sm:text-2xl">Utilisateurs</h1>
-              <span className="rounded-full bg-indigo-100 px-2 py-0.5 text-xs font-semibold text-indigo-600">
-                {users.length}
-              </span>
+    <ProtectedPage requiredPermission="users.view">
+      <div className="kb-tab-scope bg-surface-page flex h-full flex-col">
+        {/* Header */}
+        <div className="border-b border-border bg-background/95 px-4 py-4 backdrop-blur-sm sm:px-6 lg:px-8">
+          <div className="mb-3 flex items-start justify-between gap-3">
+            {/* Bouton menu mobile */}
+            <button
+              onClick={toggleMobileMenu}
+              className="mt-1 shrink-0 cursor-pointer rounded-lg p-2 text-foreground/80 transition-colors duration-200 hover:bg-muted lg:hidden"
+              aria-label="Basculer le menu"
+            >
+              <svg className="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                {isMobileMenuOpen ? (
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M6 18L18 6M6 6l12 12"
+                  />
+                ) : (
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M4 6h16M4 12h16M4 18h16"
+                  />
+                )}
+              </svg>
+            </button>
+
+            {/* Titre et breadcrumbs */}
+            <div className="flex-1">
+              <div className="mb-1 flex items-center gap-2">
+                <h1 className="text-2xl font-bold text-foreground">Utilisateurs</h1>
+                <span className="rounded-full bg-primary/20 px-2.5 py-0.5 text-xs font-semibold text-primary">
+                  {users.length}
+                </span>
+              </div>
+              <p className="text-sm text-muted-foreground">Home &gt; Utilisateurs</p>
             </div>
-          </div>
-          <button
-            onClick={fetchUsers}
-            className="cursor-pointer rounded-lg p-2 text-gray-600 transition-colors hover:bg-gray-100"
-            title="Actualiser"
-          >
-            <RefreshCw className="h-5 w-5" />
-          </button>
-        </div>
 
-        {/* Barre d'outils */}
-        <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-          <div className="relative w-full sm:max-w-sm">
-            <Search className="pointer-events-none absolute top-2.5 left-3 h-4 w-4 text-gray-400" />
-            <input
-              type="text"
-              value={search}
-              onChange={(e) => setSearch(e.target.value)}
-              placeholder="Rechercher (nom, email, profil)"
-              className="w-full rounded-lg border border-gray-200 bg-gray-50 py-2 pr-3 pl-9 text-sm text-gray-900 placeholder:text-gray-400 focus:border-indigo-500 focus:bg-white focus:ring-2 focus:ring-indigo-500/30 focus:outline-none"
-            />
+            {/* Actions globales */}
+            <div className="flex items-center gap-2">
+              <button
+                onClick={fetchUsers}
+                className="cursor-pointer rounded-lg p-2 text-muted-foreground transition-colors duration-200 hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2"
+                title="Actualiser"
+              >
+                <RefreshCw className="h-5 w-5" />
+              </button>
+            </div>
           </div>
-          <button
-            onClick={() => setShowAddModal(true)}
-            className="inline-flex cursor-pointer items-center justify-center gap-2 rounded-lg bg-indigo-600 px-4 py-2 text-xs font-semibold text-white shadow-sm transition-colors hover:bg-indigo-700 sm:text-sm"
-          >
-            + Nouvel utilisateur
-          </button>
-        </div>
-      </div>
 
-      {/* Content */}
-      <div className="flex-1 overflow-y-auto p-4 sm:p-6 lg:p-8">
-        {error && <div className="mb-4 rounded-lg bg-red-50 p-4 text-sm text-red-600">{error}</div>}
-        {successMessage && (
-          <div className="mb-4 rounded-lg bg-green-50 p-4 text-sm text-green-600">
-            {successMessage}
-          </div>
-        )}
-
-        {loading ? (
-          <UsersTableSkeleton />
-        ) : filteredUsers.length === 0 ? (
-          <div className="rounded-xl border border-gray-200 bg-white p-12 text-center shadow-sm">
-            <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-gray-100 text-2xl">
-              👤
+          {/* Barre d’outils */}
+          <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+            {/* Recherche */}
+            <div className="relative w-full max-w-sm">
+              <Search className="pointer-events-none absolute top-2.5 left-3 h-4 w-4 text-muted-foreground" />
+              <input
+                type="text"
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
+                placeholder="Rechercher un utilisateur (nom, email, profil)"
+                className="w-full rounded-lg border border-border bg-muted py-2 pr-3 pl-9 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary/50 focus:bg-background focus:ring-2 focus:ring-primary/20 focus:outline-none"
+              />
             </div>
-            <h2 className="text-lg font-semibold text-gray-900">Aucun utilisateur trouvé</h2>
-            <p className="mt-1 text-sm text-gray-500">Aucun résultat pour votre recherche</p>
+
+            {/* Bouton d’ajout */}
+            <button
+              onClick={() => setShowAddModal(true)}
+              className="inline-flex cursor-pointer items-center justify-center gap-2 rounded-lg bg-primary px-4 py-2 text-xs font-semibold text-primary-foreground shadow-(--shadow-card) transition-colors duration-200 hover:bg-primary/90 focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:outline-none sm:text-sm"
+            >
+              + Nouvel utilisateur
+            </button>
           </div>
-        ) : (
-          <>
-            {/* Vue cartes — mobile & tablette */}
-            <div className="space-y-3 lg:hidden">
-              {filteredUsers.map((user) => (
-                <div
-                  key={user.id}
-                  className="rounded-xl border border-gray-200 bg-white p-4 shadow-sm"
-                >
-                  {/* En-tête utilisateur */}
-                  <div className="mb-3 flex items-center gap-3">
-                    <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-indigo-100 text-sm font-semibold text-indigo-600">
-                      {(user.name?.[0] || user.email?.[0] || '?').toUpperCase()}
-                    </div>
-                    <div className="min-w-0 flex-1">
-                      <div className="flex items-center gap-1.5">
-                        <span className="truncate text-sm font-semibold text-gray-900">
-                          {user.name}
-                        </span>
-                        {user.id === session?.user?.id && (
-                          <span className="shrink-0 rounded-full bg-indigo-50 px-1.5 py-0.5 text-[10px] font-medium text-indigo-700">
-                            Vous
-                          </span>
-                        )}
-                      </div>
-                      <p className="truncate text-xs text-gray-500">{user.email}</p>
-                    </div>
-                  </div>
-
-                  {/* Badges */}
-                  <div className="mb-3 flex flex-wrap items-center gap-1.5">
-                    <span className="rounded-full bg-gray-100 px-2 py-0.5 text-[10px] font-medium tracking-wide text-gray-700 uppercase">
-                      {user.customRole?.name || user.role.toLowerCase()}
-                    </span>
-                    {user.emailVerified ? (
-                      <span className="rounded-full bg-green-100 px-2 py-0.5 text-[10px] font-semibold text-green-800">
-                        Email vérifié
-                      </span>
-                    ) : (
-                      <span className="rounded-full bg-yellow-100 px-2 py-0.5 text-[10px] font-semibold text-yellow-800">
-                        Non vérifié
-                      </span>
-                    )}
-                  </div>
-
-                  {/* Actions */}
-                  <div className="flex items-center justify-between border-t border-gray-100 pt-3">
-                    <select
-                      value={user.customRoleId || ''}
-                      onChange={(e) => handleChangeRole(user.id, e.target.value)}
-                      disabled={user.id === session?.user?.id}
-                      className="rounded-md border border-gray-300 px-2 py-1.5 text-xs font-medium text-gray-900 disabled:cursor-not-allowed disabled:opacity-50"
-                    >
-                      <option value="">Profil...</option>
-                      {roles.map((role) => (
-                        <option key={role.id} value={role.id}>
-                          {role.name}
-                          {role.isSystem && ' (Sys.)'}
-                        </option>
-                      ))}
-                    </select>
-                    <div className="flex items-center gap-2">
-                      <button
-                        type="button"
-                        disabled={user.id === session?.user?.id}
-                        onClick={() => handleToggleActive(user.id, user.active, user.name)}
-                        className={cn(
-                          'relative inline-flex h-5 w-9 cursor-pointer items-center rounded-full transition disabled:cursor-not-allowed disabled:opacity-60',
-                          user.active ? 'bg-green-500' : 'bg-gray-300',
-                        )}
-                        aria-label={user.active ? 'Désactiver le compte' : 'Activer le compte'}
-                      >
-                        <span
-                          className={cn(
-                            'inline-block h-4 w-4 transform rounded-full bg-white shadow-md transition',
-                            user.active ? 'translate-x-4.5' : 'translate-x-0.5',
-                          )}
-                        />
-                      </button>
-                      <span className="text-xs font-medium text-gray-700">
-                        {user.active ? 'Actif' : 'Inactif'}
-                      </span>
-                    </div>
-                  </div>
-                </div>
-              ))}
-            </div>
+        </div>
 
-            {/* Vue tableau — desktop */}
-            <div className="hidden overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm lg:block">
+        {/* Content */}
+        <div className="flex-1 overflow-y-auto p-4 sm:p-6 lg:p-8">
+          {/* Table */}
+          {loading ? (
+            <UsersTableSkeleton />
+          ) : (
+            <div className="overflow-hidden rounded-xl border border-border bg-card shadow-(--shadow-card)">
               <div className="overflow-x-auto">
-                <table className="min-w-full divide-y divide-gray-100 text-sm">
-                  <thead className="bg-gray-50/60">
+                <table className="min-w-full divide-y divide-border text-sm">
+                  <thead className="bg-muted/70">
                     <tr>
-                      <th className="px-6 py-3 text-left text-xs font-medium tracking-wider text-gray-500 uppercase">
+                      <th className="px-3 py-3 text-left text-xs font-medium tracking-wider text-muted-foreground uppercase sm:px-6">
                         Utilisateur
                       </th>
-                      <th className="px-6 py-3 text-left text-xs font-medium tracking-wider text-gray-500 uppercase">
+                      <th className="px-3 py-3 text-left text-xs font-medium tracking-wider text-muted-foreground uppercase sm:px-6">
                         Email
                       </th>
-                      <th className="px-6 py-3 text-left text-xs font-medium tracking-wider text-gray-500 uppercase">
+                      <th className="px-3 py-3 text-left text-xs font-medium tracking-wider text-muted-foreground uppercase sm:px-6">
                         Profil
                       </th>
-                      <th className="px-6 py-3 text-left text-xs font-medium tracking-wider text-gray-500 uppercase">
+                      <th className="px-3 py-3 text-left text-xs font-medium tracking-wider text-muted-foreground uppercase sm:px-6">
                         Email vérifié
                       </th>
-                      <th className="px-6 py-3 text-left text-xs font-medium tracking-wider text-gray-500 uppercase">
+                      <th className="px-3 py-3 text-left text-xs font-medium tracking-wider text-muted-foreground uppercase sm:px-6">
                         Compte
                       </th>
                     </tr>
                   </thead>
-                  <tbody className="divide-y divide-gray-100 bg-white">
-                    {filteredUsers.map((user) => (
-                      <tr key={user.id} className="transition-colors hover:bg-gray-50">
-                        <td className="px-6 py-4 whitespace-nowrap">
-                          <div className="flex items-center">
-                            <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-indigo-100 text-xs font-semibold text-indigo-600">
-                              {(user.name?.[0] || user.email?.[0] || '?').toUpperCase()}
-                            </div>
-                            <div className="ml-3 min-w-0">
-                              <div className="truncate text-sm font-medium text-gray-900">
-                                {user.name}
+                  <tbody className="divide-y divide-border bg-card">
+                    {filteredUsers.length === 0 ? (
+                      <tr>
+                        <td
+                          colSpan={5}
+                          className="px-3 py-6 text-center text-sm text-muted-foreground sm:px-6"
+                        >
+                          Aucun utilisateur ne correspond à votre recherche
+                        </td>
+                      </tr>
+                    ) : (
+                      filteredUsers.map((user) => (
+                        <tr key={user.id} className="transition-colors duration-200 hover:bg-muted/70">
+                          <td className="px-3 py-4 whitespace-nowrap sm:px-6">
+                            <div className="flex items-center">
+                              <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-primary/20 text-xs font-semibold text-primary sm:h-10 sm:w-10">
+                                {(user.name?.[0] || user.email?.[0] || '?').toUpperCase()}
                               </div>
-                              <div className="mt-0.5 flex flex-wrap items-center gap-1">
-                                <span className="inline-flex items-center rounded-full bg-gray-100 px-2 py-0.5 text-[10px] font-medium tracking-wide text-gray-700 uppercase">
-                                  {user.customRole?.name || user.role.toLowerCase()}
-                                </span>
-                                {user.id === session?.user?.id && (
-                                  <span className="inline-flex items-center rounded-full bg-indigo-50 px-2 py-0.5 text-[10px] font-medium text-indigo-700">
-                                    Vous
+                              <div className="ml-3 min-w-0">
+                                <div className="truncate text-sm font-medium text-foreground sm:text-base">
+                                  {user.name}
+                                </div>
+                                <div className="mt-0.5 flex flex-wrap items-center gap-1">
+                                  <span className="inline-flex items-center rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium tracking-wide text-muted-foreground uppercase">
+                                    {user.customRole?.name || user.role.toLowerCase()}
                                   </span>
-                                )}
+                                  {user.id === session?.user?.id && (
+                                    <span className="inline-flex items-center rounded-full bg-primary/20 px-2 py-0.5 text-[10px] font-medium text-primary">
+                                      Vous
+                                    </span>
+                                  )}
+                                </div>
                               </div>
                             </div>
-                          </div>
-                        </td>
-                        <td className="px-6 py-4 text-sm whitespace-nowrap text-gray-500">
-                          <span className="block max-w-xs truncate">{user.email}</span>
-                        </td>
-                        <td className="px-6 py-4 whitespace-nowrap">
-                          <select
-                            value={user.customRoleId || ''}
-                            onChange={(e) => handleChangeRole(user.id, e.target.value)}
-                            disabled={user.id === session?.user?.id}
-                            className="w-full rounded-md border border-gray-300 px-3 py-1 text-sm font-medium text-gray-900 disabled:cursor-not-allowed disabled:opacity-50"
-                          >
-                            <option value="">Sélectionner un profil</option>
-                            {roles.map((role) => (
-                              <option key={role.id} value={role.id}>
-                                {role.name}
-                                {role.isSystem && ' (Système)'}
-                              </option>
-                            ))}
-                          </select>
-                        </td>
-                        <td className="px-6 py-4 whitespace-nowrap">
-                          {user.emailVerified ? (
-                            <span className="inline-flex rounded-full bg-green-100 px-2.5 py-0.5 text-xs font-semibold text-green-800">
-                              Vérifié
-                            </span>
-                          ) : (
-                            <span className="inline-flex rounded-full bg-yellow-100 px-2.5 py-0.5 text-xs font-semibold text-yellow-800">
-                              Non vérifié
+                          </td>
+                          <td className="px-3 py-4 text-xs whitespace-nowrap text-muted-foreground sm:px-6 sm:text-sm">
+                            <span className="block max-w-[180px] truncate sm:max-w-xs">
+                              {user.email}
                             </span>
-                          )}
-                        </td>
-                        <td className="px-6 py-4 whitespace-nowrap">
-                          <div className="flex items-center gap-2">
-                            <button
-                              type="button"
+                          </td>
+                          <td className="px-3 py-4 whitespace-nowrap sm:px-6">
+                            <select
+                              value={user.customRoleId || ''}
+                              onChange={(e) => handleChangeRole(user.id, e.target.value)}
                               disabled={user.id === session?.user?.id}
-                              onClick={() => handleToggleActive(user.id, user.active, user.name)}
-                              className={cn(
-                                'relative inline-flex h-5 w-9 cursor-pointer items-center rounded-full transition disabled:cursor-not-allowed disabled:opacity-60',
-                                user.active ? 'bg-green-500' : 'bg-gray-300',
-                              )}
-                              aria-label={
-                                user.active ? 'Désactiver le compte' : 'Activer le compte'
-                              }
+                              className="w-full rounded-md border border-border bg-background px-2 py-1 text-xs font-medium text-foreground disabled:cursor-not-allowed disabled:opacity-50 sm:px-3 sm:text-sm"
                             >
-                              <span
+                              <option value="">Sélectionner un profil</option>
+                              {roles.map((role) => (
+                                <option key={role.id} value={role.id}>
+                                  {role.name}
+                                  {role.isSystem && ' (Système)'}
+                                </option>
+                              ))}
+                            </select>
+                          </td>
+                          <td className="px-3 py-4 whitespace-nowrap sm:px-6">
+                            <div className="flex items-center gap-2">
+                              {user.emailVerified && (
+                                <span className="inline-flex rounded-full bg-green-100 px-2.5 py-0.5 text-xs font-semibold text-green-800">
+                                  Vérifié
+                                </span>
+                              )}
+                              {!user.emailVerified && user.invitationStatus === 'pending' && (
+                                <span className="inline-flex rounded-full bg-blue-100 px-2.5 py-0.5 text-xs font-semibold text-blue-800">
+                                  En attente
+                                </span>
+                              )}
+                              {!user.emailVerified && user.invitationStatus !== 'pending' && (
+                                <>
+                                  <span className="inline-flex rounded-full bg-red-100 px-2.5 py-0.5 text-xs font-semibold text-red-800">
+                                    Expiré
+                                  </span>
+                                  <button
+                                    type="button"
+                                    disabled={resendingIds.has(user.id)}
+                                    onClick={() => handleResendInvite(user.id, user.name)}
+                                    className="inline-flex cursor-pointer items-center gap-1 rounded-md bg-primary/20 px-2 py-1 text-xs font-medium text-primary transition-colors duration-200 hover:bg-primary/25 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50"
+                                    title="Renvoyer l'email d'invitation"
+                                  >
+                                    {resendingIds.has(user.id) ? (
+                                      <Spinner size="sm" className="text-primary" />
+                                    ) : (
+                                      <Send className="h-3 w-3" />
+                                    )}
+                                    <span className="hidden sm:inline">
+                                      {resendingIds.has(user.id) ? 'Envoi...' : 'Renvoyer'}
+                                    </span>
+                                  </button>
+                                </>
+                              )}
+                            </div>
+                          </td>
+                          <td className="px-3 py-4 whitespace-nowrap sm:px-6">
+                            <div className="flex items-center gap-2">
+                              <button
+                                type="button"
+                                disabled={user.id === session?.user?.id}
+                                onClick={() => handleToggleActive(user.id, user.active, user.name)}
                                 className={cn(
-                                  'inline-block h-4 w-4 transform rounded-full bg-white shadow-md transition',
-                                  user.active ? 'translate-x-4.5' : 'translate-x-0.5',
+                                  'relative inline-flex h-5 w-9 cursor-pointer items-center rounded-full transition disabled:cursor-not-allowed disabled:opacity-60',
+                                  user.active ? 'bg-emerald-500' : 'bg-muted-foreground/40',
                                 )}
-                              />
-                            </button>
-                            <span className="text-xs font-medium text-gray-700">
-                              {user.active ? 'Actif' : 'Inactif'}
-                            </span>
-                          </div>
-                        </td>
-                      </tr>
-                    ))}
+                                aria-label={
+                                  user.active ? 'Désactiver le compte' : 'Activer le compte'
+                                }
+                              >
+                                <span
+                                  className={cn(
+                                    'inline-block h-4 w-4 transform rounded-full bg-white shadow-md transition',
+                                    user.active ? 'translate-x-4.5' : 'translate-x-0.5',
+                                  )}
+                                />
+                              </button>
+                              <span className="text-xs font-medium text-muted-foreground">
+                                {user.active ? 'Actif' : 'Inactif'}
+                              </span>
+                            </div>
+                          </td>
+                        </tr>
+                      ))
+                    )}
                   </tbody>
                 </table>
               </div>
             </div>
-          </>
-        )}
-      </div>
+          )}
+        </div>
 
-      {/* Modal d'ajout */}
-      {showAddModal && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center bg-gray-500/20 p-4 backdrop-blur-sm sm:p-6">
-          <div className="flex max-h-[90vh] w-full max-w-2xl flex-col rounded-lg bg-white p-6 shadow-xl sm:p-8">
-            {/* En-tête fixe */}
-            <div className="shrink-0 border-b border-gray-100 pb-4">
-              <div className="flex items-center justify-between">
-                <h2 className="text-xl font-bold text-gray-900 sm:text-2xl">
-                  Ajouter un utilisateur
-                </h2>
-                <button
-                  type="button"
-                  onClick={() => {
-                    setShowAddModal(false);
-                    setFormData({ name: '', email: '', customRoleId: '' });
-                    setError('');
-                  }}
-                  className="cursor-pointer rounded-lg p-2 text-gray-400 transition-colors hover:bg-gray-100"
-                >
-                  <svg className="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M6 18L18 6M6 6l12 12"
-                    />
-                  </svg>
-                </button>
+        {/* Modal d'ajout */}
+        {showAddModal && (
+          <div className="fixed inset-0 z-50 flex items-center justify-center bg-foreground/10 p-4 backdrop-blur-sm sm:p-6">
+            <div className="flex max-h-[90vh] w-full max-w-2xl flex-col rounded-xl border border-border bg-card p-6 shadow-(--shadow-dropdown) sm:p-8">
+              {/* En-tête fixe */}
+              <div className="shrink-0 border-b border-border pb-4">
+                <div className="flex items-center justify-between">
+                  <h2 className="text-xl font-bold text-foreground sm:text-2xl">
+                    Ajouter un utilisateur
+                  </h2>
+                  <button
+                    type="button"
+                    onClick={() => {
+                      setShowAddModal(false);
+                      setFormData({ name: '', email: '', customRoleId: '' });
+                      setError('');
+                    }}
+                    className="cursor-pointer rounded-lg p-2 text-muted-foreground transition-colors duration-200 hover:bg-muted"
+                  >
+                    <svg className="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M6 18L18 6M6 6l12 12"
+                      />
+                    </svg>
+                  </button>
+                </div>
               </div>
-            </div>
 
-            {/* Contenu scrollable */}
-            <form
-              id="add-user-form"
-              onSubmit={handleAddUser}
-              className="flex-1 space-y-4 overflow-y-auto pt-4 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
-            >
-              <div>
-                <label className="block text-sm font-medium text-gray-700">Nom complet</label>
-                <input
-                  type="text"
-                  required
-                  value={formData.name}
-                  onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-                  className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500"
-                />
-              </div>
+              {/* Contenu scrollable */}
+              <form
+                id="add-user-form"
+                onSubmit={handleAddUser}
+                className="flex-1 space-y-4 overflow-y-auto pt-4 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+              >
+                <div>
+                  <label className="block text-sm font-medium text-foreground">Nom complet</label>
+                  <input
+                    type="text"
+                    required
+                    value={formData.name}
+                    onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+                    className="mt-1 block w-full rounded-lg border border-border bg-background px-4 py-2 focus:border-primary/50 focus:ring-2 focus:ring-primary/20"
+                  />
+                </div>
 
-              <div>
-                <label className="block text-sm font-medium text-gray-700">Email</label>
-                <input
-                  type="email"
-                  required
-                  value={formData.email}
-                  onChange={(e) => setFormData({ ...formData, email: e.target.value })}
-                  className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500"
-                />
-                <p className="mt-1 text-xs text-gray-500">
-                  Un email d&apos;invitation sera envoyé à cet utilisateur
-                </p>
-              </div>
+                <div>
+                  <label className="block text-sm font-medium text-foreground">Email</label>
+                  <input
+                    type="email"
+                    required
+                    value={formData.email}
+                    onChange={(e) => setFormData({ ...formData, email: e.target.value })}
+                    className="mt-1 block w-full rounded-lg border border-border bg-background px-4 py-2 focus:border-primary/50 focus:ring-2 focus:ring-primary/20"
+                  />
+                  <p className="mt-1 text-xs text-muted-foreground">
+                    Un email d&apos;invitation sera envoyé à cet utilisateur
+                  </p>
+                </div>
 
-              <div>
-                <label className="block text-sm font-medium text-gray-700">Profil</label>
-                <select
-                  value={formData.customRoleId}
-                  onChange={(e) => setFormData({ ...formData, customRoleId: e.target.value })}
-                  required
-                  className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500"
-                >
-                  <option value="">Sélectionner un profil</option>
-                  {roles.map((role) => (
-                    <option key={role.id} value={role.id}>
-                      {role.name}
-                      {role.isSystem && ' (Système)'}
-                    </option>
-                  ))}
-                </select>
-              </div>
-            </form>
-
-            {/* Pied de modal fixe */}
-            <div className="shrink-0 border-t border-gray-100 pt-4">
-              <div className="flex flex-col gap-3 sm:flex-row sm:justify-end">
-                <button
-                  type="button"
-                  disabled={isSubmitting}
-                  onClick={() => {
-                    if (isSubmitting) return;
-                    setShowAddModal(false);
-                    setFormData({ name: '', email: '', customRoleId: '' });
-                    setError('');
-                  }}
-                  className="w-full cursor-pointer rounded-lg border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-60 sm:w-auto"
-                >
-                  Annuler
-                </button>
-                <button
-                  type="submit"
-                  form="add-user-form"
-                  disabled={isSubmitting}
-                  className="inline-flex w-full cursor-pointer items-center justify-center gap-2 rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-indigo-700 disabled:cursor-not-allowed disabled:opacity-60 sm:w-auto"
-                >
-                  {isSubmitting && (
-                    <span className="inline-block h-4 w-4 animate-spin rounded-full border-2 border-white border-t-transparent" />
-                  )}
-                  {isSubmitting ? 'Création en cours...' : 'Créer'}
-                </button>
+                <div>
+                  <label className="block text-sm font-medium text-foreground">Profil</label>
+                  <select
+                    value={formData.customRoleId}
+                    onChange={(e) => setFormData({ ...formData, customRoleId: e.target.value })}
+                    required
+                    className="mt-1 block w-full rounded-lg border border-border bg-background px-4 py-2 focus:border-primary/50 focus:ring-2 focus:ring-primary/20"
+                  >
+                    <option value="">Sélectionner un profil</option>
+                    {roles.map((role) => (
+                      <option key={role.id} value={role.id}>
+                        {role.name}
+                        {role.isSystem && ' (Système)'}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+              </form>
+
+              {/* Pied de modal fixe */}
+              <div className="shrink-0 border-t border-border pt-4">
+                <div className="flex flex-col gap-3 sm:flex-row sm:justify-end">
+                  <button
+                    type="button"
+                    disabled={isSubmitting}
+                    onClick={() => {
+                      if (isSubmitting) return;
+                      setShowAddModal(false);
+                      setFormData({ name: '', email: '', customRoleId: '' });
+                      setError('');
+                    }}
+                    className="w-full cursor-pointer rounded-lg border border-border px-4 py-2 text-sm font-medium text-foreground transition-colors duration-200 hover:bg-muted disabled:cursor-not-allowed disabled:opacity-60 sm:w-auto"
+                  >
+                    Annuler
+                  </button>
+                  <button
+                    type="submit"
+                    form="add-user-form"
+                    disabled={isSubmitting}
+                    className="inline-flex w-full cursor-pointer items-center justify-center gap-2 rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors duration-200 hover:bg-primary/90 disabled:cursor-not-allowed disabled:opacity-60 sm:w-auto"
+                  >
+                    {isSubmitting && <Spinner size="sm" className="text-white" />}
+                    {isSubmitting ? 'Création en cours...' : 'Créer'}
+                  </button>
+                </div>
               </div>
             </div>
           </div>
-        </div>
-      )}
-    </div>
+        )}
+      </div>
+    </ProtectedPage>
   );
 }