create-crm-tmp 1.1.2 → 2.0.0

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

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useEffect, useState } from 'react';
+import React, { useMemo } from 'react';
 import Link from 'next/link';
 import {
   Users,
@@ -13,6 +13,8 @@ import {
   ShieldX,
 } from 'lucide-react';
 import { PERMISSIONS } from '@/lib/permissions';
+import { ProtectedPage } from '@/components/protected-page';
+import { useFetch } from '@/hooks/use-fetch';
 
 interface Stats {
   activeUsers: number;
@@ -26,7 +28,7 @@ interface AuditLog {
   action: string;
   entityType: string;
   entityId?: string | null;
-  metadata?: any;
+  metadata?: Record<string, unknown>;
   createdAt: string;
   actor?: {
     id: string;
@@ -40,74 +42,31 @@ interface AuditLog {
   } | null;
 }
 
-export default function AccessControlPage() {
-  const [stats, setStats] = useState<Stats>({
-    activeUsers: 0,
-    totalUsers: 0,
-    rolesCount: 0,
-    permissionsCount: PERMISSIONS.length,
-  });
-  const [loading, setLoading] = useState(true);
-  const [auditLogs, setAuditLogs] = useState<AuditLog[]>([]);
-  const [auditLoading, setAuditLoading] = useState(true);
-
-  useEffect(() => {
-    async function fetchStats() {
-      try {
-        const [usersResponse, rolesResponse] = await Promise.all([
-          fetch('/api/users'),
-          fetch('/api/roles'),
-        ]);
-
-        if (usersResponse.ok) {
-          const users = await usersResponse.json();
-          setStats((prev) => ({
-            ...prev,
-            activeUsers: users.filter((u: { active: boolean }) => u.active).length,
-            totalUsers: users.length,
-          }));
-        }
-
-        if (rolesResponse.ok) {
-          const roles = await rolesResponse.json();
-          setStats((prev) => ({
-            ...prev,
-            rolesCount: roles.length,
-          }));
-        }
-      } catch (error) {
-        console.error('Erreur lors du chargement des stats:', error);
-      } finally {
-        setLoading(false);
-      }
-    }
+interface UserSummary {
+  active: boolean;
+}
 
-    fetchStats();
-  }, []);
+interface RoleSummary {
+  id: string;
+}
 
-  useEffect(() => {
-    async function fetchAuditLogs() {
-      try {
-        setAuditLoading(true);
-        const response = await fetch('/api/audit-logs?limit=10');
-        if (response.ok) {
-          const data = await response.json();
-          setAuditLogs(
-            data.map((log: any) => ({
-              ...log,
-              createdAt: log.createdAt,
-            })),
-          );
-        }
-      } catch (error) {
-        console.error('Erreur lors du chargement des logs d’audit:', error);
-      } finally {
-        setAuditLoading(false);
-      }
-    }
+export default function AccessControlPage() {
+  const { data: users = [], isLoading: usersLoading } = useFetch<UserSummary[]>('/api/users');
+  const { data: roles = [], isLoading: rolesLoading } = useFetch<RoleSummary[]>('/api/roles');
+  const { data: auditLogs = [], isLoading: auditLoading } = useFetch<AuditLog[]>(
+    '/api/audit-logs?limit=10',
+  );
 
-    fetchAuditLogs();
-  }, []);
+  const stats = useMemo<Stats>(
+    () => ({
+      activeUsers: users.filter((u) => u.active).length,
+      totalUsers: users.length,
+      rolesCount: roles.length,
+      permissionsCount: PERMISSIONS.length,
+    }),
+    [roles.length, users],
+  );
+  const loading = usersLoading || rolesLoading;
 
   const cards = [
     {
@@ -149,276 +108,286 @@ export default function AccessControlPage() {
   ];
 
   return (
-    <div className="h-full">
-      <div className="border-b border-gray-200 bg-white">
-        <div className="p-4 sm:p-6">
-          <h1 className="text-2xl font-bold text-gray-900">Droits d&apos;accès</h1>
-          <p className="mt-1 text-sm text-gray-500">
-            Gérer les utilisateurs, profils et permissions de votre système
-          </p>
+    <ProtectedPage requiredPermission="users.view">
+      <div className="h-full">
+        <div className="border-b border-gray-200 bg-white">
+          <div className="flex gap-3 p-4 sm:p-6">
+            <div>
+              <h1 className="text-2xl font-bold text-gray-900">Droits d&apos;accès</h1>
+              <p className="mt-1 text-sm text-gray-500">
+                Gérer les utilisateurs, profils et permissions de votre système
+              </p>
+            </div>
+          </div>
         </div>
-      </div>
 
-      <div className="space-y-8 p-4 sm:p-6">
-        <div className="grid gap-6 lg:grid-cols-3">
-          {cards.map((card) => {
-            const Icon = card.icon;
-            return (
-              <Link
-                key={card.title}
-                href={card.href}
-                className="group cursor-pointer rounded-lg border border-gray-200 bg-white p-6 shadow-sm transition-all hover:border-indigo-300 hover:shadow-md"
-              >
-                <div className="flex items-start gap-4">
-                  <div className={`rounded-lg p-3 ${card.iconBg}`}>
-                    <Icon className={`h-6 w-6 ${card.iconColor}`} />
-                  </div>
-                  <div className="flex-1">
-                    <h3 className="text-lg font-semibold text-gray-900 group-hover:text-indigo-600">
-                      {card.title}
-                    </h3>
-                    <p className="text-sm font-medium text-gray-600">{card.subtitle}</p>
+        <div className="space-y-8 p-4 sm:p-6">
+          <div className="grid gap-6 lg:grid-cols-3">
+            {cards.map((card) => {
+              const Icon = card.icon;
+              return (
+                <Link
+                  key={card.title}
+                  href={card.href}
+                  className="group cursor-pointer rounded-lg border border-gray-200 bg-white p-6 shadow-sm transition-all hover:border-blue-300 hover:shadow-md"
+                >
+                  <div className="flex items-start gap-4">
+                    <div className={`rounded-lg p-3 ${card.iconBg}`}>
+                      <Icon className={`h-6 w-6 ${card.iconColor}`} />
+                    </div>
+                    <div className="flex-1">
+                      <h3 className="text-lg font-semibold text-gray-900 group-hover:text-blue-600">
+                        {card.title}
+                      </h3>
+                      <p className="text-sm font-medium text-gray-600">{card.subtitle}</p>
+                    </div>
                   </div>
-                </div>
 
-                <p className="mt-4 text-sm text-gray-600">{card.description}</p>
+                  <p className="mt-4 text-sm text-gray-600">{card.description}</p>
 
-                <div className="mt-6 flex items-baseline gap-2">
-                  <span className="text-2xl font-bold text-gray-900">{card.stat}</span>
-                  <span className="text-sm text-gray-500">{card.statLabel}</span>
-                </div>
-              </Link>
-            );
-          })}
-        </div>
+                  <div className="mt-6 flex items-baseline gap-2">
+                    <span className="text-2xl font-bold text-gray-900">{card.stat}</span>
+                    <span className="text-sm text-gray-500">{card.statLabel}</span>
+                  </div>
+                </Link>
+              );
+            })}
+          </div>
 
-        {/* Historique des modifications récentes */}
-        <div className="rounded-lg border border-gray-200 bg-white p-6 shadow-sm">
-          <div className="mb-4 flex items-center justify-between">
-            <div>
-              <h2 className="text-base font-semibold text-gray-900">
-                Historique des modifications récentes
-              </h2>
-              <p className="text-sm text-gray-500">
-                Les 10 dernières actions effectuées sur les utilisateurs et profils
-              </p>
+          {/* Historique des modifications récentes */}
+          <div className="rounded-lg border border-gray-200 bg-white p-6 shadow-sm">
+            <div className="mb-4 flex items-center justify-between">
+              <div>
+                <h2 className="text-base font-semibold text-gray-900">
+                  Historique des modifications récentes
+                </h2>
+                <p className="text-sm text-gray-500">
+                  Les 10 dernières actions effectuées sur les utilisateurs et profils
+                </p>
+              </div>
             </div>
-          </div>
 
-          {auditLoading ? (
-            <p className="text-sm text-gray-500">Chargement de l’historique...</p>
-          ) : auditLogs.length === 0 ? (
-            <p className="text-sm text-gray-500">Aucune action récente.</p>
-          ) : (
-            <ul className="divide-y divide-gray-100">
-              {auditLogs.map((log) => {
-                const actorLabel = log.actor?.name || log.actor?.email || 'Système';
-                const dateLabel = new Date(log.createdAt).toLocaleString('fr-FR', {
-                  day: '2-digit',
-                  month: 'short',
-                  year: 'numeric',
-                  hour: '2-digit',
-                  minute: '2-digit',
-                });
+            {auditLoading ? (
+              <p className="text-sm text-gray-500">Chargement de l’historique...</p>
+            ) : auditLogs.length === 0 ? (
+              <p className="text-sm text-gray-500">Aucune action récente.</p>
+            ) : (
+              <ul className="divide-y divide-gray-100">
+                {auditLogs.map((log) => {
+                  const actorLabel = log.actor?.name || log.actor?.email || 'Système';
+                  const dateLabel = new Date(log.createdAt).toLocaleString('fr-FR', {
+                    day: '2-digit',
+                    month: 'short',
+                    year: 'numeric',
+                    hour: '2-digit',
+                    minute: '2-digit',
+                  });
 
-                // Traduction des actions et sélection de l'icône
-                let title = '';
-                let subtitle = '';
-                let details: React.ReactElement[] = [];
-                let IconComponent: React.ComponentType<{ className?: string }> = Shield;
+                  // Traduction des actions et sélection de l'icône
+                  let title = '';
+                  let subtitle = '';
+                  let details: React.ReactElement[] = [];
+                  let IconComponent: React.ComponentType<{ className?: string }> = Shield;
 
-                if (log.action === 'USER_CREATED') {
-                  title = `${actorLabel} • Ajout Utilisateur`;
-                  IconComponent = UserPlus;
-                  const metadata = log.metadata as {
-                    name?: string;
-                    email?: string;
-                    customRoleId?: string;
-                    customRoleName?: string;
-                    wasExisting?: boolean;
-                  };
-                  if (metadata?.name) {
-                    subtitle = metadata.name;
-                  }
-                  details = [
-                    metadata?.email && (
-                      <li key="email" className="text-xs text-gray-600">
-                        <span className="font-medium">Email :</span> {metadata.email}
-                      </li>
-                    ),
-                    metadata?.name && (
-                      <li key="name" className="text-xs text-gray-600">
-                        <span className="font-medium">Nom :</span> {metadata.name}
-                      </li>
-                    ),
-                    metadata?.customRoleName && (
-                      <li key="profil" className="text-xs text-gray-600">
-                        <span className="font-medium">Profil :</span> {metadata.customRoleName}
-                      </li>
-                    ),
-                  ].filter(Boolean) as React.ReactElement[];
-                } else if (log.action === 'USER_UPDATED') {
-                  title = `${actorLabel} • Modification Utilisateur`;
-                  IconComponent = UserCog;
-                  if (log.targetUser?.name) {
-                    subtitle = log.targetUser.name;
-                  }
-                  const changes = log.metadata?.changes as
-                    | Record<string, { old: any; new: any }>
-                    | undefined;
-                  if (changes) {
-                    const fieldLabels: Record<string, string> = {
-                      name: 'Nom',
-                      email: 'Email',
-                      customRoleId: 'Profil',
-                      profil: 'Profil',
-                      active: 'Statut',
-                      phone: 'Téléphone',
-                      companyId: 'Société',
-                      folderView: 'Vue des dossiers',
-                      viewUnassignedContacts: 'Voir contacts non attribués',
+                  if (log.action === 'USER_CREATED') {
+                    title = `${actorLabel} • Ajout Utilisateur`;
+                    IconComponent = UserPlus;
+                    const metadata = log.metadata as {
+                      name?: string;
+                      email?: string;
+                      customRoleId?: string;
+                      customRoleName?: string;
+                      wasExisting?: boolean;
                     };
-                    details = Object.entries(changes).map(([field, value]) => {
-                      const label = fieldLabels[field] || field;
-                      const oldValue =
-                        value.old === null || value.old === undefined || value.old === ''
-                          ? 'vide'
-                          : String(value.old);
-                      const newValue =
-                        value.new === null || value.new === undefined || value.new === ''
-                          ? 'vide'
-                          : String(value.new);
-                      return (
-                        <li key={field} className="text-xs text-gray-600">
-                          <span className="font-medium">{label} :</span>{' '}
-                          <span className="text-red-500 line-through">{oldValue}</span>{' '}
-                          <span className="text-green-600">→ {newValue}</span>
+                    if (metadata?.name) {
+                      subtitle = metadata.name;
+                    }
+                    details = [
+                      metadata?.email && (
+                        <li key="email" className="text-xs text-gray-600">
+                          <span className="font-medium">Email :</span> {metadata.email}
                         </li>
-                      );
-                    });
-                  }
-                } else if (log.action === 'ROLE_CREATED') {
-                  title = `${actorLabel} • Ajout Profil`;
-                  IconComponent = ShieldPlus;
-                  const metadata = log.metadata as {
-                    name?: string;
-                    description?: string;
-                    permissions?: string[];
-                  };
-                  if (metadata?.name) {
-                    subtitle = metadata.name;
-                  }
-                  details = [
-                    metadata?.description && (
-                      <li key="description" className="text-xs text-gray-600">
-                        <span className="font-medium">Description :</span> {metadata.description}
-                      </li>
-                    ),
-                    metadata?.permissions && (
-                      <li key="permissions" className="text-xs text-gray-600">
-                        <span className="font-medium">Permissions :</span>{' '}
-                        {metadata.permissions.length} permission
-                        {metadata.permissions.length > 1 ? 's' : ''}
-                      </li>
-                    ),
-                  ].filter(Boolean) as React.ReactElement[];
-                } else if (log.action === 'ROLE_UPDATED') {
-                  title = `${actorLabel} • Modification Profil`;
-                  IconComponent = ShieldCheck;
-                  const metadata = log.metadata as {
-                    before?: { name?: string; description?: string; permissions?: string[] };
-                    after?: { name?: string; description?: string; permissions?: string[] };
-                  };
-                  if (metadata?.after?.name) {
-                    subtitle = metadata.after.name;
-                  }
-                  if (metadata?.before && metadata?.after) {
-                    const before = metadata.before;
-                    const after = metadata.after;
-                    if (before.name !== after.name) {
-                      details.push(
+                      ),
+                      metadata?.name && (
                         <li key="name" className="text-xs text-gray-600">
-                          <span className="font-medium">Nom :</span>{' '}
-                          <span className="text-red-500 line-through">{before.name || 'vide'}</span>{' '}
-                          <span className="text-green-600">→ {after.name || 'vide'}</span>
-                        </li>,
-                      );
+                          <span className="font-medium">Nom :</span> {metadata.name}
+                        </li>
+                      ),
+                      metadata?.customRoleName && (
+                        <li key="profil" className="text-xs text-gray-600">
+                          <span className="font-medium">Profil :</span> {metadata.customRoleName}
+                        </li>
+                      ),
+                    ].filter(Boolean) as React.ReactElement[];
+                  } else if (log.action === 'USER_UPDATED') {
+                    title = `${actorLabel} • Modification Utilisateur`;
+                    IconComponent = UserCog;
+                    if (log.targetUser?.name) {
+                      subtitle = log.targetUser.name;
                     }
-                    if (before.description !== after.description) {
-                      details.push(
-                        <li key="description" className="text-xs text-gray-600">
-                          <span className="font-medium">Description :</span>{' '}
-                          <span className="text-red-500 line-through">
-                            {before.description || 'vide'}
-                          </span>{' '}
-                          <span className="text-green-600">→ {after.description || 'vide'}</span>
-                        </li>,
-                      );
+                    const changes = log.metadata?.changes as
+                      | Record<string, { old: unknown; new: unknown }>
+                      | undefined;
+                    if (changes) {
+                      const fieldLabels: Record<string, string> = {
+                        name: 'Nom',
+                        email: 'Email',
+                        customRoleId: 'Profil',
+                        profil: 'Profil',
+                        active: 'Statut',
+                        phone: 'Téléphone',
+                        companyId: 'Société',
+                        folderView: 'Vue des dossiers',
+                        viewUnassignedContacts: 'Voir contacts non attribués',
+                      };
+                      details = Object.entries(changes).map(([field, value]) => {
+                        const label = fieldLabels[field] || field;
+                        const oldValue =
+                          value.old === null || value.old === undefined || value.old === ''
+                            ? 'vide'
+                            : String(value.old);
+                        const newValue =
+                          value.new === null || value.new === undefined || value.new === ''
+                            ? 'vide'
+                            : String(value.new);
+                        return (
+                          <li key={field} className="text-xs text-gray-600">
+                            <span className="font-medium">{label} :</span>{' '}
+                            <span className="text-red-500 line-through">{oldValue}</span>{' '}
+                            <span className="text-green-600">→ {newValue}</span>
+                          </li>
+                        );
+                      });
                     }
-                    const beforePerms = (before.permissions || []).length;
-                    const afterPerms = (after.permissions || []).length;
-                    if (beforePerms !== afterPerms) {
-                      details.push(
+                  } else if (log.action === 'ROLE_CREATED') {
+                    title = `${actorLabel} • Ajout Profil`;
+                    IconComponent = ShieldPlus;
+                    const metadata = log.metadata as {
+                      name?: string;
+                      description?: string;
+                      permissions?: string[];
+                    };
+                    if (metadata?.name) {
+                      subtitle = metadata.name;
+                    }
+                    details = [
+                      metadata?.description && (
+                        <li key="description" className="text-xs text-gray-600">
+                          <span className="font-medium">Description :</span> {metadata.description}
+                        </li>
+                      ),
+                      metadata?.permissions && (
                         <li key="permissions" className="text-xs text-gray-600">
                           <span className="font-medium">Permissions :</span>{' '}
-                          <span className="text-red-500 line-through">{beforePerms}</span>{' '}
-                          <span className="text-green-600">→ {afterPerms}</span>
+                          {metadata.permissions.length} permission
+                          {metadata.permissions.length > 1 ? 's' : ''}
+                        </li>
+                      ),
+                    ].filter(Boolean) as React.ReactElement[];
+                  } else if (log.action === 'ROLE_UPDATED') {
+                    title = `${actorLabel} • Modification Profil`;
+                    IconComponent = ShieldCheck;
+                    const metadata = log.metadata as {
+                      before?: { name?: string; description?: string; permissions?: string[] };
+                      after?: { name?: string; description?: string; permissions?: string[] };
+                    };
+                    if (metadata?.after?.name) {
+                      subtitle = metadata.after.name;
+                    }
+                    if (metadata?.before && metadata?.after) {
+                      const before = metadata.before;
+                      const after = metadata.after;
+                      if (before.name !== after.name) {
+                        details.push(
+                          <li key="name" className="text-xs text-gray-600">
+                            <span className="font-medium">Nom :</span>{' '}
+                            <span className="text-red-500 line-through">
+                              {before.name || 'vide'}
+                            </span>{' '}
+                            <span className="text-green-600">→ {after.name || 'vide'}</span>
+                          </li>,
+                        );
+                      }
+                      if (before.description !== after.description) {
+                        details.push(
+                          <li key="description" className="text-xs text-gray-600">
+                            <span className="font-medium">Description :</span>{' '}
+                            <span className="text-red-500 line-through">
+                              {before.description || 'vide'}
+                            </span>{' '}
+                            <span className="text-green-600">→ {after.description || 'vide'}</span>
+                          </li>,
+                        );
+                      }
+                      const beforePerms = (before.permissions || []).length;
+                      const afterPerms = (after.permissions || []).length;
+                      if (beforePerms !== afterPerms) {
+                        details.push(
+                          <li key="permissions" className="text-xs text-gray-600">
+                            <span className="font-medium">Permissions :</span>{' '}
+                            <span className="text-red-500 line-through">{beforePerms}</span>{' '}
+                            <span className="text-green-600">→ {afterPerms}</span>
+                          </li>,
+                        );
+                      }
+                    }
+                  } else if (log.action === 'ROLE_DELETED') {
+                    title = `${actorLabel} • Suppression Profil`;
+                    IconComponent = ShieldX;
+                    const metadata = log.metadata as { name?: string; description?: string };
+                    if (metadata?.name) {
+                      subtitle = metadata.name;
+                    }
+                    if (metadata?.description) {
+                      details.push(
+                        <li key="description" className="text-xs text-gray-600">
+                          <span className="font-medium">Description :</span> {metadata.description}
                         </li>,
                       );
                     }
+                  } else {
+                    title = log.action;
                   }
-                } else if (log.action === 'ROLE_DELETED') {
-                  title = `${actorLabel} • Suppression Profil`;
-                  IconComponent = ShieldX;
-                  const metadata = log.metadata as { name?: string; description?: string };
-                  if (metadata?.name) {
-                    subtitle = metadata.name;
-                  }
-                  if (metadata?.description) {
-                    details.push(
-                      <li key="description" className="text-xs text-gray-600">
-                        <span className="font-medium">Description :</span> {metadata.description}
-                      </li>,
-                    );
-                  }
-                } else {
-                  title = log.action;
-                }
 
-                // Couleur de l'icône selon le type d'action
-                const iconColorClass =
-                  log.action === 'USER_CREATED' || log.action === 'ROLE_CREATED'
-                    ? 'text-green-600'
-                    : log.action === 'ROLE_DELETED'
-                      ? 'text-red-600'
-                      : 'text-indigo-600';
+                  // Couleur de l'icône selon le type d'action
+                  const iconColorClass =
+                    log.action === 'USER_CREATED' || log.action === 'ROLE_CREATED'
+                      ? 'text-green-600'
+                      : log.action === 'ROLE_DELETED'
+                        ? 'text-red-600'
+                        : 'text-blue-600';
 
-                return (
-                  <li key={log.id} className="py-5">
-                    <div className="flex items-start justify-between gap-6">
-                      <div className="flex flex-1 items-start gap-3">
-                        <div
-                          className={`mt-0.5 shrink-0 rounded-lg bg-gray-50 p-2 ${iconColorClass}`}
-                        >
-                          <IconComponent className="h-5 w-5" />
+                  return (
+                    <li key={log.id} className="py-5">
+                      <div className="flex items-start justify-between gap-6">
+                        <div className="flex flex-1 items-start gap-3">
+                          <div
+                            className={`mt-0.5 shrink-0 rounded-lg bg-gray-50 p-2 ${iconColorClass}`}
+                          >
+                            <IconComponent className="h-5 w-5" />
+                          </div>
+                          <div className="flex-1">
+                            <div className="mb-1 text-sm font-semibold text-gray-900">{title}</div>
+                            {subtitle && (
+                              <div className="mb-1 text-sm font-medium text-gray-700">
+                                {subtitle}
+                              </div>
+                            )}
+                            {details.length > 0 && <ul className="mt-3 space-y-1.5">{details}</ul>}
+                          </div>
                         </div>
-                        <div className="flex-1">
-                          <div className="mb-1 text-sm font-semibold text-gray-900">{title}</div>
-                          {subtitle && (
-                            <div className="mb-1 text-sm font-medium text-gray-700">{subtitle}</div>
-                          )}
-                          {details.length > 0 && <ul className="mt-3 space-y-1.5">{details}</ul>}
+                        <div className="shrink-0 text-xs font-medium text-gray-400">
+                          {dateLabel}
                         </div>
                       </div>
-                      <div className="shrink-0 text-xs font-medium text-gray-400">{dateLabel}</div>
-                    </div>
-                  </li>
-                );
-              })}
-            </ul>
-          )}
+                    </li>
+                  );
+                })}
+              </ul>
+            )}
+          </div>
         </div>
       </div>
-    </div>
+    </ProtectedPage>
   );
 }