create-crm-tmp 1.1.2 → 2.0.0

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

@@ -4,8 +4,11 @@ import { useState } from 'react';
 import Link from 'next/link';
 import { ArrowLeft, Key, Search } from 'lucide-react';
 import { PERMISSIONS_BY_CATEGORY, PERMISSION_CATEGORIES } from '@/lib/permissions';
+import { useMobileMenuContext } from '@/contexts/mobile-menu-context';
+import { ProtectedPage } from '@/components/protected-page';
 
 export default function PermissionsPage() {
+  const { toggle: toggleMobileMenu, isOpen: isMobileMenuOpen } = useMobileMenuContext();
   const [searchTerm, setSearchTerm] = useState('');
   const [selectedCategory, setSelectedCategory] = useState<string>('all');
 
@@ -54,8 +57,8 @@ export default function PermissionsPage() {
       text: 'text-orange-700',
     },
     [PERMISSION_CATEGORIES.SETTINGS]: {
-      bg: 'bg-indigo-50',
-      text: 'text-indigo-700',
+      bg: 'bg-blue-50',
+      text: 'text-blue-700',
     },
     [PERMISSION_CATEGORIES.GENERAL]: {
       bg: 'bg-gray-50',
@@ -64,116 +67,118 @@ export default function PermissionsPage() {
   };
 
   return (
-    <div className="h-full">
-      <div className="border-b border-gray-200 bg-white">
-        <div className="p-4 sm:p-6">
-          <div className="mb-4">
-            <Link
-              href="/users"
-              className="inline-flex items-center gap-2 text-sm text-gray-600 hover:text-gray-900"
-            >
-              <ArrowLeft className="h-4 w-4" />
-              Retour
-            </Link>
-          </div>
-          <div>
-            <h1 className="text-2xl font-bold text-gray-900">Gestion des permissions</h1>
-            <p className="mt-1 text-sm text-gray-500">
-              {totalPermissions} permissions disponibles dans le système
-            </p>
+    <ProtectedPage requiredPermission="users.manage_roles">
+      <div className="h-full">
+        <div className="border-b border-gray-200 bg-white">
+          <div className="p-4 sm:p-6">
+            <div className="mb-4">
+              <Link
+                href="/users"
+                className="inline-flex items-center gap-2 text-sm text-gray-600 hover:text-gray-900"
+              >
+                <ArrowLeft className="h-4 w-4" />
+                Retour
+              </Link>
+            </div>
+            <div>
+              <h1 className="text-2xl font-bold text-gray-900">Gestion des permissions</h1>
+              <p className="mt-1 text-sm text-gray-500">
+                {totalPermissions} permissions disponibles dans le système
+              </p>
+            </div>
           </div>
         </div>
-      </div>
 
-      <div className="p-4 sm:p-6">
-        {/* Barre de recherche et filtres */}
-        <div className="mb-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
-          <div className="relative flex-1 sm:max-w-md">
-            <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-gray-400" />
-            <input
-              type="text"
-              placeholder="Rechercher une permission..."
-              value={searchTerm}
-              onChange={(e) => setSearchTerm(e.target.value)}
-              className="w-full rounded-lg border border-gray-300 py-2 pr-4 pl-10 text-sm focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 focus:outline-none"
-            />
-          </div>
+        <div className="p-4 sm:p-6">
+          {/* Barre de recherche et filtres */}
+          <div className="mb-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+            <div className="relative flex-1 sm:max-w-md">
+              <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-gray-400" />
+              <input
+                type="text"
+                placeholder="Rechercher une permission..."
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+                className="w-full rounded-lg border border-gray-300 py-2 pr-4 pl-10 text-sm focus:outline-none focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+              />
+            </div>
 
-          <select
-            value={selectedCategory}
-            onChange={(e) => setSelectedCategory(e.target.value)}
-            className="rounded-lg border border-gray-300 px-4 py-2 text-sm focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 focus:outline-none"
-          >
-            <option value="all">Toutes les catégories</option>
-            {Object.values(PERMISSION_CATEGORIES).map((category) => (
-              <option key={category} value={category}>
-                {category}
-              </option>
-            ))}
-          </select>
-        </div>
+            <select
+              value={selectedCategory}
+              onChange={(e) => setSelectedCategory(e.target.value)}
+              className="rounded-lg border border-gray-300 px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+            >
+              <option value="all">Toutes les catégories</option>
+              {Object.values(PERMISSION_CATEGORIES).map((category) => (
+                <option key={category} value={category}>
+                  {category}
+                </option>
+              ))}
+            </select>
+          </div>
 
-        {/* Liste des permissions par catégorie */}
-        <div className="space-y-8">
-          {filteredPermissions.map(([category, permissions]) => {
-            if (permissions.length === 0) return null;
+          {/* Liste des permissions par catégorie */}
+          <div className="space-y-8">
+            {filteredPermissions.map(([category, permissions]) => {
+              if (permissions.length === 0) return null;
 
-            const colors = categoryColors[category] || {
-              bg: 'bg-gray-50',
-              text: 'text-gray-700',
-            };
+              const colors = categoryColors[category] || {
+                bg: 'bg-gray-50',
+                text: 'text-gray-700',
+              };
 
-            return (
-              <div key={category}>
-                <div className="mb-4 flex items-center gap-3">
-                  <div className={`rounded-lg p-2 ${colors.bg}`}>
-                    <Key className={`h-5 w-5 ${colors.text}`} />
-                  </div>
-                  <div>
-                    <h2 className="text-lg font-semibold text-gray-900">{category}</h2>
-                    <p className="text-sm text-gray-500">
-                      {permissions.length} permission
-                      {permissions.length > 1 ? 's' : ''}
-                    </p>
+              return (
+                <div key={category}>
+                  <div className="mb-4 flex items-center gap-3">
+                    <div className={`rounded-lg p-2 ${colors.bg}`}>
+                      <Key className={`h-5 w-5 ${colors.text}`} />
+                    </div>
+                    <div>
+                      <h2 className="text-lg font-semibold text-gray-900">{category}</h2>
+                      <p className="text-sm text-gray-500">
+                        {permissions.length} permission
+                        {permissions.length > 1 ? 's' : ''}
+                      </p>
+                    </div>
                   </div>
-                </div>
 
-                <div className="space-y-3">
-                  {permissions.map((permission) => (
-                    <div
-                      key={permission.code}
-                      className="rounded-lg border border-gray-200 bg-white p-4 shadow-sm"
-                    >
-                      <div className="flex items-start gap-3">
-                        <div className={`mt-0.5 rounded-lg p-2 ${colors.bg}`}>
-                          <Key className={`h-4 w-4 ${colors.text}`} />
-                        </div>
-                        <div className="flex-1">
-                          <h3 className="font-semibold text-gray-900">{permission.name}</h3>
-                          <p className="mt-1 text-sm text-gray-600">{permission.description}</p>
-                          <code className="mt-2 inline-block rounded bg-gray-100 px-2 py-1 font-mono text-xs text-gray-600">
-                            {permission.code}
-                          </code>
+                  <div className="space-y-3">
+                    {permissions.map((permission) => (
+                      <div
+                        key={permission.code}
+                        className="rounded-lg border border-gray-200 bg-white p-4 shadow-sm"
+                      >
+                        <div className="flex items-start gap-3">
+                          <div className={`mt-0.5 rounded-lg p-2 ${colors.bg}`}>
+                            <Key className={`h-4 w-4 ${colors.text}`} />
+                          </div>
+                          <div className="flex-1">
+                            <h3 className="font-semibold text-gray-900">{permission.name}</h3>
+                            <p className="mt-1 text-sm text-gray-600">{permission.description}</p>
+                            <code className="mt-2 inline-block rounded bg-gray-100 px-2 py-1 font-mono text-xs text-gray-600">
+                              {permission.code}
+                            </code>
+                          </div>
                         </div>
                       </div>
-                    </div>
-                  ))}
+                    ))}
+                  </div>
                 </div>
-              </div>
-            );
-          })}
-        </div>
-
-        {filteredPermissions.every(([, perms]) => perms.length === 0) && (
-          <div className="py-12 text-center">
-            <Key className="mx-auto h-12 w-12 text-gray-400" />
-            <h3 className="mt-4 text-sm font-medium text-gray-900">Aucune permission trouvée</h3>
-            <p className="mt-1 text-sm text-gray-500">
-              Essayez de modifier vos critères de recherche
-            </p>
+              );
+            })}
           </div>
-        )}
+
+          {filteredPermissions.every(([, perms]) => perms.length === 0) && (
+            <div className="py-12 text-center">
+              <Key className="mx-auto h-12 w-12 text-gray-400" />
+              <h3 className="mt-4 text-sm font-medium text-gray-900">Aucune permission trouvée</h3>
+              <p className="mt-1 text-sm text-gray-500">
+                Essayez de modifier vos critères de recherche
+              </p>
+            </div>
+          )}
+        </div>
       </div>
-    </div>
+    </ProtectedPage>
   );
 }

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

@@ -4,6 +4,10 @@ import { useState, useEffect } from 'react';
 import Link from 'next/link';
 import { ArrowLeft, Shield, Users as UsersIcon, Key, Plus, Edit, Trash2, X } from 'lucide-react';
 import { PERMISSIONS, PERMISSIONS_BY_CATEGORY } from '@/lib/permissions';
+import { useMobileMenuContext } from '@/contexts/mobile-menu-context';
+import { useConfirm } from '@/hooks/use-confirm';
+import { ProtectedPage } from '@/components/protected-page';
+import { useAppToast } from '@/contexts/app-toast-context';
 
 interface Role {
   id: string;
@@ -24,6 +28,7 @@ interface RoleModalProps {
 }
 
 function RoleModal({ isOpen, onClose, onSave, role }: RoleModalProps) {
+  const toast = useAppToast();
   const [formData, setFormData] = useState({
     name: role?.name || '',
     description: role?.description || '',
@@ -50,6 +55,12 @@ function RoleModal({ isOpen, onClose, onSave, role }: RoleModalProps) {
     setError('');
   }, [role, isOpen]);
 
+  useEffect(() => {
+    if (!error) return;
+    toast.error(error);
+    setError('');
+  }, [error, toast]);
+
   const togglePermission = (permissionCode: string) => {
     setFormData((prev) => ({
       ...prev,
@@ -112,9 +123,6 @@ function RoleModal({ isOpen, onClose, onSave, role }: RoleModalProps) {
 
           {/* Content */}
           <div className="max-h-[70vh] overflow-y-auto p-6">
-            {error && (
-              <div className="mb-4 rounded-lg bg-red-50 p-4 text-sm text-red-600">{error}</div>
-            )}
             <div className="space-y-6">
               {/* Nom et description */}
               <div className="grid gap-4 sm:grid-cols-2">
@@ -127,7 +135,7 @@ function RoleModal({ isOpen, onClose, onSave, role }: RoleModalProps) {
                     id="name"
                     value={formData.name}
                     onChange={(e) => setFormData((prev) => ({ ...prev, name: e.target.value }))}
-                    className="mt-1 w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 focus:outline-none"
+                    className="mt-1 w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
                     required
                   />
                 </div>
@@ -145,7 +153,7 @@ function RoleModal({ isOpen, onClose, onSave, role }: RoleModalProps) {
                       }))
                     }
                     rows={2}
-                    className="mt-1 w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 focus:outline-none"
+                    className="mt-1 w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
                   />
                 </div>
               </div>
@@ -170,7 +178,7 @@ function RoleModal({ isOpen, onClose, onSave, role }: RoleModalProps) {
                               type="checkbox"
                               checked={formData.permissions.includes(permission.code)}
                               onChange={() => togglePermission(permission.code)}
-                              className="mt-1 h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+                              className="mt-1 h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-gray-400/30"
                             />
                             <div className="flex-1">
                               <div className="font-medium text-gray-900">{permission.name}</div>
@@ -211,6 +219,9 @@ function RoleModal({ isOpen, onClose, onSave, role }: RoleModalProps) {
 }
 
 export default function RolesPage() {
+  const { toggle: toggleMobileMenu, isOpen: isMobileMenuOpen } = useMobileMenuContext();
+  const { confirm, ConfirmDialog } = useConfirm();
+  const toast = useAppToast();
   const [showModal, setShowModal] = useState(false);
   const [selectedRole, setSelectedRole] = useState<Role | null>(null);
   const [roles, setRoles] = useState<Role[]>([]);
@@ -237,6 +248,12 @@ export default function RolesPage() {
     fetchRoles();
   }, []);
 
+  useEffect(() => {
+    if (!error) return;
+    toast.error(error);
+    setError('');
+  }, [error, toast]);
+
   const handleEditRole = (roleId: string) => {
     const role = roles.find((r) => r.id === roleId);
     if (role) {
@@ -249,11 +266,20 @@ export default function RolesPage() {
     const role = roles.find((r) => r.id === roleId);
     if (!role) return;
 
+    const confirmTitle = role.isSystem ? '⚠️ Supprimer un profil système' : 'Supprimer le profil';
     const confirmMessage = role.isSystem
-      ? `⚠️ Attention : "${role.name}" est un profil système.\n\nÊtes-vous sûr de vouloir le supprimer ?`
+      ? `Attention : "${role.name}" est un profil système. Êtes-vous sûr de vouloir le supprimer ?`
       : `Êtes-vous sûr de vouloir supprimer le profil "${role.name}" ?`;
 
-    if (!confirm(confirmMessage)) {
+    const confirmed = await confirm({
+      title: confirmTitle,
+      description: confirmMessage,
+      confirmText: 'Supprimer',
+      cancelText: 'Annuler',
+      variant: 'destructive',
+    });
+
+    if (!confirmed) {
       return;
     }
 
@@ -285,148 +311,149 @@ export default function RolesPage() {
   };
 
   return (
-    <div className="h-full">
-      <div className="border-b border-gray-200 bg-white">
-        <div className="p-4 sm:p-6">
-          <div className="mb-4">
-            <Link
-              href="/users"
-              className="inline-flex items-center gap-2 text-sm text-gray-600 hover:text-gray-900"
-            >
-              <ArrowLeft className="h-4 w-4" />
-              Retour
-            </Link>
-          </div>
-          <div className="flex items-center justify-between">
-            <div>
-              <h1 className="text-2xl font-bold text-gray-900">Gestion des profils</h1>
-              <p className="mt-1 text-sm text-gray-500">
-                Créer et configurer les profils avec leurs permissions
-              </p>
+    <ProtectedPage requiredPermission="users.manage_roles">
+      <div className="h-full">
+        <div className="border-b border-gray-200 bg-white">
+          <div className="p-4 sm:p-6">
+            <div className="mb-4">
+              <Link
+                href="/users"
+                className="inline-flex items-center gap-2 text-sm text-gray-600 hover:text-gray-900"
+              >
+                <ArrowLeft className="h-4 w-4" />
+                Retour
+              </Link>
+            </div>
+            <div className="flex items-center justify-between">
+              <div>
+                <h1 className="text-2xl font-bold text-gray-900">Gestion des profils</h1>
+                <p className="mt-1 text-sm text-gray-500">
+                  Créer et configurer les profils avec leurs permissions
+                </p>
+              </div>
+              <button
+                onClick={() => {
+                  setSelectedRole(null);
+                  setShowModal(true);
+                }}
+                className="flex cursor-pointer items-center gap-2 rounded-lg bg-green-600 px-4 py-2 text-sm font-medium text-white hover:bg-green-700"
+              >
+                <Plus className="h-4 w-4" />
+                Nouveau profil
+              </button>
             </div>
-            <button
-              onClick={() => {
-                setSelectedRole(null);
-                setShowModal(true);
-              }}
-              className="flex cursor-pointer items-center gap-2 rounded-lg bg-green-600 px-4 py-2 text-sm font-medium text-white hover:bg-green-700"
-            >
-              <Plus className="h-4 w-4" />
-              Nouveau profil
-            </button>
           </div>
         </div>
-      </div>
-
-      <div className="p-4 sm:p-6">
-        {error && <div className="mb-4 rounded-lg bg-red-50 p-4 text-sm text-red-600">{error}</div>}
 
-        {loading ? (
-          <div className="grid gap-6 lg:grid-cols-2">
-            {[1, 2, 3, 4].map((i) => (
-              <div key={i} className="h-64 animate-pulse rounded-lg bg-gray-200" />
-            ))}
-          </div>
-        ) : (
-          <div className="grid gap-6 lg:grid-cols-2">
-            {roles
-              .sort((a, b) => b.permissions.length - a.permissions.length) // Trier par nombre de permissions (DESC)
-              .map((role) => {
-                const visiblePermissions = role.permissions.slice(0, 4);
-                const remainingCount = role.permissions.length - 4;
-
-                return (
-                  <div
-                    key={role.id}
-                    className="rounded-lg border border-gray-200 bg-white p-6 shadow-sm"
-                  >
-                    <div className="flex items-start justify-between">
-                      <div className="flex items-start gap-3">
-                        <div className="rounded-lg bg-green-100 p-2">
-                          <Shield className="h-5 w-5 text-green-600" />
+        <div className="p-4 sm:p-6">
+          {loading ? (
+            <div className="grid gap-6 lg:grid-cols-2">
+              {[1, 2, 3, 4].map((i) => (
+                <div key={i} className="h-64 animate-pulse rounded-lg bg-gray-200" />
+              ))}
+            </div>
+          ) : (
+            <div className="grid gap-6 lg:grid-cols-2">
+              {roles
+                .sort((a, b) => b.permissions.length - a.permissions.length) // Trier par nombre de permissions (DESC)
+                .map((role) => {
+                  const visiblePermissions = role.permissions.slice(0, 4);
+                  const remainingCount = role.permissions.length - 4;
+
+                  return (
+                    <div
+                      key={role.id}
+                      className="rounded-lg border border-gray-200 bg-white p-6 shadow-sm"
+                    >
+                      <div className="flex items-start justify-between">
+                        <div className="flex items-start gap-3">
+                          <div className="rounded-lg bg-green-100 p-2">
+                            <Shield className="h-5 w-5 text-green-600" />
+                          </div>
+                          <div>
+                            <h3 className="font-semibold text-gray-900">
+                              {role.name}
+                              {role.isSystem && (
+                                <span className="ml-2 inline-block rounded bg-blue-100 px-2 py-0.5 text-xs text-blue-800">
+                                  Système
+                                </span>
+                              )}
+                            </h3>
+                            <p className="mt-1 text-sm text-gray-600">{role.description}</p>
+                          </div>
                         </div>
-                        <div>
-                          <h3 className="font-semibold text-gray-900">
-                            {role.name}
-                            {role.isSystem && (
-                              <span className="ml-2 inline-block rounded bg-indigo-100 px-2 py-0.5 text-xs text-indigo-600">
-                                Système
-                              </span>
-                            )}
-                          </h3>
-                          <p className="mt-1 text-sm text-gray-600">{role.description}</p>
+                        <div className="flex items-center gap-2">
+                          <button
+                            onClick={() => handleEditRole(role.id)}
+                            className="cursor-pointer rounded-lg p-2 text-orange-600 hover:bg-orange-50"
+                            title="Modifier"
+                          >
+                            <Edit className="h-4 w-4" />
+                          </button>
+                          <button
+                            onClick={() => handleDeleteRole(role.id)}
+                            className="cursor-pointer rounded-lg p-2 text-red-600 hover:bg-red-50"
+                            title="Supprimer"
+                          >
+                            <Trash2 className="h-4 w-4" />
+                          </button>
                         </div>
                       </div>
-                      <div className="flex items-center gap-2">
-                        <button
-                          onClick={() => handleEditRole(role.id)}
-                          className="cursor-pointer rounded-lg p-2 text-orange-600 hover:bg-orange-50"
-                          title="Modifier"
-                        >
-                          <Edit className="h-4 w-4" />
-                        </button>
-                        <button
-                          onClick={() => handleDeleteRole(role.id)}
-                          className="cursor-pointer rounded-lg p-2 text-red-600 hover:bg-red-50"
-                          title="Supprimer"
-                        >
-                          <Trash2 className="h-4 w-4" />
-                        </button>
-                      </div>
-                    </div>
 
-                    <div className="mt-4 flex items-center gap-4 text-sm text-gray-600">
-                      <div className="flex items-center gap-1">
-                        <UsersIcon className="h-4 w-4" />
-                        <span>
-                          {role.usersCount} utilisateur{role.usersCount > 1 ? 's' : ''}
-                        </span>
-                      </div>
-                      <div className="flex items-center gap-1">
-                        <Key className="h-4 w-4" />
-                        <span>
-                          {role.permissions.length} permission
-                          {role.permissions.length > 1 ? 's' : ''}
-                        </span>
+                      <div className="mt-4 flex items-center gap-4 text-sm text-gray-600">
+                        <div className="flex items-center gap-1">
+                          <UsersIcon className="h-4 w-4" />
+                          <span>
+                            {role.usersCount} utilisateur{role.usersCount > 1 ? 's' : ''}
+                          </span>
+                        </div>
+                        <div className="flex items-center gap-1">
+                          <Key className="h-4 w-4" />
+                          <span>
+                            {role.permissions.length} permission
+                            {role.permissions.length > 1 ? 's' : ''}
+                          </span>
+                        </div>
                       </div>
-                    </div>
 
-                    <div className="mt-4">
-                      <h4 className="mb-2 text-xs font-medium tracking-wide text-gray-500 uppercase">
-                        Permissions
-                      </h4>
-                      <div className="flex flex-wrap gap-2">
-                        {visiblePermissions.map((permCode) => {
-                          const perm = PERMISSIONS.find((p) => p.code === permCode);
-                          return (
-                            <span
-                              key={permCode}
-                              className="rounded-full bg-green-100 px-3 py-1 text-xs font-medium text-green-700"
-                            >
-                              {perm?.name || permCode}
+                      <div className="mt-4">
+                        <h4 className="mb-2 text-xs font-medium tracking-wide text-gray-500 uppercase">
+                          Permissions
+                        </h4>
+                        <div className="flex flex-wrap gap-2">
+                          {visiblePermissions.map((permCode) => {
+                            const perm = PERMISSIONS.find((p) => p.code === permCode);
+                            return (
+                              <span
+                                key={permCode}
+                                className="rounded-full bg-green-100 px-3 py-1 text-xs font-medium text-green-700"
+                              >
+                                {perm?.name || permCode}
+                              </span>
+                            );
+                          })}
+                          {remainingCount > 0 && (
+                            <span className="rounded-full bg-gray-100 px-3 py-1 text-xs font-medium text-gray-700">
+                              +{remainingCount} autres
                             </span>
-                          );
-                        })}
-                        {remainingCount > 0 && (
-                          <span className="rounded-full bg-gray-100 px-3 py-1 text-xs font-medium text-gray-700">
-                            +{remainingCount} autres
-                          </span>
-                        )}
+                          )}
+                        </div>
                       </div>
                     </div>
-                  </div>
-                );
-              })}
-          </div>
-        )}
-      </div>
+                  );
+                })}
+            </div>
+          )}
+        </div>
 
-      <RoleModal
-        isOpen={showModal}
-        onClose={handleCloseModal}
-        onSave={handleSaveRole}
-        role={selectedRole || undefined}
-      />
-    </div>
+        <RoleModal
+          isOpen={showModal}
+          onClose={handleCloseModal}
+          onSave={handleSaveRole}
+          role={selectedRole || undefined}
+        />
+        <ConfirmDialog />
+      </div>
+    </ProtectedPage>
   );
 }

package/template/src/app/api/audit-logs/route.ts

@@ -15,7 +15,7 @@ export async function GET(request: NextRequest) {
     }
 
     // On réutilise la permission de vue utilisateurs pour l’instant
-    const hasPermission = await checkPermission('users.view');
+    const hasPermission = await checkPermission('audit.view_all');
     if (!hasPermission) {
       return NextResponse.json({ error: 'Accès refusé' }, { status: 403 });
     }