create-crm-tmp 1.0.0

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

@@ -0,0 +1,457 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import Link from 'next/link';
+import {
+  Users,
+  Shield,
+  Key,
+  ArrowLeft,
+  UserPlus,
+  UserCog,
+  ShieldPlus,
+  ShieldCheck,
+  ShieldX,
+} from 'lucide-react';
+import { PERMISSIONS } from '@/lib/permissions';
+import { useMobileMenuContext } from '@/contexts/mobile-menu-context';
+
+interface Stats {
+  activeUsers: number;
+  totalUsers: number;
+  rolesCount: number;
+  permissionsCount: number;
+}
+
+interface AuditLog {
+  id: string;
+  action: string;
+  entityType: string;
+  entityId?: string | null;
+  metadata?: any;
+  createdAt: string;
+  actor?: {
+    id: string;
+    name: string | null;
+    email: string;
+  } | null;
+  targetUser?: {
+    id: string;
+    name: string | null;
+    email: string;
+  } | null;
+}
+
+export default function AccessControlPage() {
+  const { toggle: toggleMobileMenu, isOpen: isMobileMenuOpen } = useMobileMenuContext();
+  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);
+      }
+    }
+
+    fetchStats();
+  }, []);
+
+  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);
+      }
+    }
+
+    fetchAuditLogs();
+  }, []);
+
+  const cards = [
+    {
+      title: 'Utilisateurs',
+      subtitle: 'Gérer les comptes utilisateurs',
+      description:
+        'Créer, modifier et administrer les utilisateurs du système. Activer ou désactiver les comptes selon les besoins.',
+      icon: Users,
+      iconBg: 'bg-orange-100',
+      iconColor: 'text-orange-600',
+      href: '/users/list',
+      stat: loading ? '...' : stats.activeUsers,
+      statLabel: 'Utilisateurs actifs',
+    },
+    {
+      title: 'Profils',
+      subtitle: 'Définir les rôles',
+      description:
+        'Créer et configurer les profils utilisateur (Admin, Manager, Compta, etc.) avec leurs descriptions et attributions.',
+      icon: Shield,
+      iconBg: 'bg-green-100',
+      iconColor: 'text-green-600',
+      href: '/users/roles',
+      stat: stats.rolesCount,
+      statLabel: 'Profils configurés',
+    },
+    {
+      title: 'Permissions',
+      subtitle: 'Configurer les droits',
+      description:
+        "Assigner les permissions aux profils et contrôler l'accès aux différentes fonctionnalités du système.",
+      icon: Key,
+      iconBg: 'bg-purple-100',
+      iconColor: 'text-purple-600',
+      href: '/users/permissions',
+      stat: stats.permissionsCount,
+      statLabel: 'Permissions disponibles',
+    },
+  ];
+
+  return (
+    <div className="h-full">
+      <div className="border-b border-gray-200 bg-white">
+        <div className="p-4 sm:p-6 flex gap-3">
+          <div className="mb-4 flex items-center gap-3">
+            {/* Mobile menu button */}
+            <button
+              onClick={toggleMobileMenu}
+              className="shrink-0 cursor-pointer rounded-lg p-2 text-gray-700 transition-colors hover:bg-gray-100 lg:hidden"
+              aria-label="Toggle 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>
+          </div>
+          <div>
+            <h1 className="text-2xl font-bold text-gray-900">Droits d'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 className="p-4 sm:p-6 space-y-8">
+        <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>
+                </div>
+
+                <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>
+
+        {/* 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>
+
+          {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;
+
+                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',
+                    };
+                    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="line-through text-red-500">{oldValue}</span>{' '}
+                          <span className="text-green-600">→ {newValue}</span>
+                        </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(
+                        <li key="name" className="text-xs text-gray-600">
+                          <span className="font-medium">Nom :</span>{' '}
+                          <span className="line-through text-red-500">{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="line-through text-red-500">
+                            {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="line-through text-red-500">{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;
+                }
+
+                // 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';
+
+                return (
+                  <li key={log.id} className="py-5">
+                    <div className="flex items-start justify-between gap-6">
+                      <div className="flex items-start gap-3 flex-1">
+                        <div
+                          className={`mt-0.5 shrink-0 rounded-lg p-2 bg-gray-50 ${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="shrink-0 text-xs font-medium text-gray-400">{dateLabel}</div>
+                    </div>
+                  </li>
+                );
+              })}
+            </ul>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,181 @@
+'use client';
+
+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';
+
+export default function PermissionsPage() {
+  const { toggle: toggleMobileMenu, isOpen: isMobileMenuOpen } = useMobileMenuContext();
+  const [searchTerm, setSearchTerm] = useState('');
+  const [selectedCategory, setSelectedCategory] = useState<string>('all');
+
+  // Filtrer les permissions par catégorie et terme de recherche
+  const filteredCategories = Object.entries(PERMISSIONS_BY_CATEGORY).filter(
+    ([category]) => selectedCategory === 'all' || category === selectedCategory,
+  );
+
+  const filteredPermissions = filteredCategories.map(([category, permissions]) => {
+    const filtered = permissions.filter(
+      (p) =>
+        p.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+        p.description.toLowerCase().includes(searchTerm.toLowerCase()) ||
+        p.code.toLowerCase().includes(searchTerm.toLowerCase()),
+    );
+    return [category, filtered] as const;
+  });
+
+  const totalPermissions = PERMISSIONS_BY_CATEGORY
+    ? Object.values(PERMISSIONS_BY_CATEGORY).reduce((sum, perms) => sum + perms.length, 0)
+    : 0;
+
+  const categoryColors: Record<string, { bg: string; text: string }> = {
+    [PERMISSION_CATEGORIES.ANALYTICS]: {
+      bg: 'bg-yellow-50',
+      text: 'text-yellow-700',
+    },
+    [PERMISSION_CATEGORIES.CONTACTS]: {
+      bg: 'bg-blue-50',
+      text: 'text-blue-700',
+    },
+    [PERMISSION_CATEGORIES.TASKS]: {
+      bg: 'bg-green-50',
+      text: 'text-green-700',
+    },
+    [PERMISSION_CATEGORIES.TEMPLATES]: {
+      bg: 'bg-purple-50',
+      text: 'text-purple-700',
+    },
+    [PERMISSION_CATEGORIES.INTEGRATIONS]: {
+      bg: 'bg-pink-50',
+      text: 'text-pink-700',
+    },
+    [PERMISSION_CATEGORIES.USERS]: {
+      bg: 'bg-orange-50',
+      text: 'text-orange-700',
+    },
+    [PERMISSION_CATEGORIES.SETTINGS]: {
+      bg: 'bg-indigo-50',
+      text: 'text-indigo-700',
+    },
+    [PERMISSION_CATEGORIES.GENERAL]: {
+      bg: 'bg-gray-50',
+      text: 'text-gray-700',
+    },
+  };
+
+  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>
+          </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>
+
+          <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>
+
+        {/* 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',
+            };
+
+            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 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>
+
+        {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>
+  );
+}