create-crm-tmp 1.0.0

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

@@ -0,0 +1,434 @@
+'use client';
+
+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';
+
+interface Role {
+  id: string;
+  name: string;
+  description: string | null;
+  permissions: string[];
+  isSystem: boolean;
+  usersCount: number;
+  createdAt: string | null;
+  updatedAt: string | null;
+}
+
+interface RoleModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSave: () => void;
+  role?: Role;
+}
+
+function RoleModal({ isOpen, onClose, onSave, role }: RoleModalProps) {
+  const [formData, setFormData] = useState({
+    name: role?.name || '',
+    description: role?.description || '',
+    permissions: role?.permissions || [],
+  });
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [error, setError] = useState('');
+
+  // Réinitialiser le formulaire quand le rôle change
+  useEffect(() => {
+    if (role) {
+      setFormData({
+        name: role.name,
+        description: role.description || '',
+        permissions: role.permissions,
+      });
+    } else {
+      setFormData({
+        name: '',
+        description: '',
+        permissions: [],
+      });
+    }
+    setError('');
+  }, [role, isOpen]);
+
+  const togglePermission = (permissionCode: string) => {
+    setFormData((prev) => ({
+      ...prev,
+      permissions: prev.permissions.includes(permissionCode)
+        ? prev.permissions.filter((p) => p !== permissionCode)
+        : [...prev.permissions, permissionCode],
+    }));
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError('');
+    setIsSubmitting(true);
+
+    try {
+      const url = role ? `/api/roles/${role.id}` : '/api/roles';
+      const method = role ? 'PUT' : 'POST';
+
+      const response = await fetch(url, {
+        method,
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(formData),
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) {
+        throw new Error(data.error || "Erreur lors de l'enregistrement");
+      }
+
+      onSave();
+      onClose();
+    } catch (err: any) {
+      setError(err.message);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-start justify-center overflow-y-auto bg-gray-500/20 p-4 backdrop-blur-sm">
+      <div className="my-8 w-full max-w-2xl rounded-lg bg-white shadow-xl">
+        <form onSubmit={handleSubmit}>
+          {/* Header */}
+          <div className="flex items-center justify-between border-b border-gray-200 p-6">
+            <h2 className="text-xl font-semibold text-gray-900">
+              {role ? 'Modifier le profil' : 'Nouveau profil'}
+            </h2>
+            <button
+              type="button"
+              onClick={onClose}
+              disabled={isSubmitting}
+              className="cursor-pointer rounded-lg p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-600 disabled:cursor-not-allowed disabled:opacity-50"
+            >
+              <X className="h-5 w-5" />
+            </button>
+          </div>
+
+          {/* 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">
+                <div>
+                  <label htmlFor="name" className="block text-sm font-medium text-gray-700">
+                    Nom du profil *
+                  </label>
+                  <input
+                    type="text"
+                    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"
+                    required
+                  />
+                </div>
+                <div className="sm:col-span-2">
+                  <label htmlFor="description" className="block text-sm font-medium text-gray-700">
+                    Description
+                  </label>
+                  <textarea
+                    id="description"
+                    value={formData.description}
+                    onChange={(e) =>
+                      setFormData((prev) => ({
+                        ...prev,
+                        description: e.target.value,
+                      }))
+                    }
+                    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"
+                  />
+                </div>
+              </div>
+
+              {/* Permissions */}
+              <div>
+                <h3 className="mb-4 text-base font-semibold text-gray-900">Permissions</h3>
+
+                <div className="space-y-6">
+                  {Object.entries(PERMISSIONS_BY_CATEGORY).map(([category, permissions]) => (
+                    <div key={category}>
+                      <h4 className="mb-3 text-sm font-medium tracking-wide text-gray-500 uppercase">
+                        {category}
+                      </h4>
+                      <div className="space-y-2">
+                        {permissions.map((permission) => (
+                          <label
+                            key={permission.code}
+                            className="flex cursor-pointer items-start gap-3 rounded-lg border border-gray-200 p-3 transition-colors hover:bg-gray-50"
+                          >
+                            <input
+                              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"
+                            />
+                            <div className="flex-1">
+                              <div className="font-medium text-gray-900">{permission.name}</div>
+                              <div className="text-sm text-gray-500">{permission.description}</div>
+                            </div>
+                          </label>
+                        ))}
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Footer */}
+          <div className="flex items-center justify-end gap-3 border-t border-gray-200 p-6">
+            <button
+              type="button"
+              onClick={onClose}
+              disabled={isSubmitting}
+              className="cursor-pointer rounded-lg border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50"
+            >
+              Annuler
+            </button>
+            <button
+              type="submit"
+              disabled={isSubmitting}
+              className="cursor-pointer rounded-lg bg-green-600 px-4 py-2 text-sm font-medium text-white hover:bg-green-700 disabled:cursor-not-allowed disabled:opacity-50"
+            >
+              {isSubmitting ? 'Enregistrement...' : 'Enregistrer'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
+
+export default function RolesPage() {
+  const { toggle: toggleMobileMenu, isOpen: isMobileMenuOpen } = useMobileMenuContext();
+  const [showModal, setShowModal] = useState(false);
+  const [selectedRole, setSelectedRole] = useState<Role | null>(null);
+  const [roles, setRoles] = useState<Role[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+
+  const fetchRoles = async () => {
+    try {
+      setLoading(true);
+      const response = await fetch('/api/roles');
+      if (!response.ok) {
+        throw new Error('Erreur lors du chargement des profils');
+      }
+      const data = await response.json();
+      setRoles(data);
+    } catch (err: any) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchRoles();
+  }, []);
+
+  const handleEditRole = (roleId: string) => {
+    const role = roles.find((r) => r.id === roleId);
+    if (role) {
+      setSelectedRole(role);
+      setShowModal(true);
+    }
+  };
+
+  const handleDeleteRole = async (roleId: string) => {
+    const role = roles.find((r) => r.id === roleId);
+    if (!role) return;
+
+    const confirmMessage = role.isSystem
+      ? `⚠️ Attention : "${role.name}" est un profil système.\n\nÊtes-vous sûr de vouloir le supprimer ?`
+      : `Êtes-vous sûr de vouloir supprimer le profil "${role.name}" ?`;
+
+    if (!confirm(confirmMessage)) {
+      return;
+    }
+
+    try {
+      const response = await fetch(`/api/roles/${roleId}`, {
+        method: 'DELETE',
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) {
+        throw new Error(data.error || 'Erreur lors de la suppression');
+      }
+
+      await fetchRoles();
+    } catch (err: any) {
+      setError(err.message);
+      setTimeout(() => setError(''), 5000);
+    }
+  };
+
+  const handleCloseModal = () => {
+    setShowModal(false);
+    setSelectedRole(null);
+  };
+
+  const handleSaveRole = async () => {
+    await fetchRoles();
+  };
+
+  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>
+            </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>
+                        <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>
+                      </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>
+                    </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}
+                            </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>
+
+      <RoleModal
+        isOpen={showModal}
+        onClose={handleCloseModal}
+        onSave={handleSaveRole}
+        role={selectedRole || undefined}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,57 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { auth } from '@/lib/auth';
+import { prisma } from '@/lib/prisma';
+import { checkPermission } from '@/lib/check-permission';
+
+// GET /api/audit-logs - Dernières actions système (utilisateurs / rôles)
+export async function GET(request: NextRequest) {
+  try {
+    const session = await auth.api.getSession({
+      headers: request.headers,
+    });
+
+    if (!session) {
+      return NextResponse.json({ error: 'Non authentifié' }, { status: 401 });
+    }
+
+    // On réutilise la permission de vue utilisateurs pour l’instant
+    const hasPermission = await checkPermission('users.view');
+    if (!hasPermission) {
+      return NextResponse.json({ error: 'Accès refusé' }, { status: 403 });
+    }
+
+    const { searchParams } = new URL(request.url);
+    const limit = parseInt(searchParams.get('limit') || '10', 10);
+
+    const logs = await prisma.auditLog.findMany({
+      orderBy: { createdAt: 'desc' },
+      take: Math.min(Math.max(limit, 1), 50),
+      include: {
+        actor: {
+          select: { id: true, name: true, email: true },
+        },
+        targetUser: {
+          select: { id: true, name: true, email: true },
+        },
+      },
+    });
+
+    return NextResponse.json(
+      logs.map((log) => ({
+        id: log.id,
+        action: log.action,
+        entityType: log.entityType,
+        entityId: log.entityId,
+        metadata: log.metadata,
+        createdAt: log.createdAt,
+        actor: log.actor,
+        targetUser: log.targetUser,
+      })),
+    );
+  } catch (error) {
+    console.error('Erreur lors de la récupération des logs d’audit:', error);
+    return NextResponse.json({ error: 'Erreur serveur' }, { status: 500 });
+  }
+}
+
+

package/template/src/app/api/auth/[...all]/route.ts

@@ -0,0 +1,4 @@
+import { auth } from '@/lib/auth';
+import { toNextJsHandler } from 'better-auth/next-js';
+
+export const { GET, POST } = toNextJsHandler(auth);

package/template/src/app/api/auth/check-active/route.ts

@@ -0,0 +1,31 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { auth } from '@/lib/auth';
+import { prisma } from '@/lib/prisma';
+
+// GET /api/auth/check-active - Vérifie si l'utilisateur courant est actif
+export async function GET(request: NextRequest) {
+  try {
+    const session = await auth.api.getSession({
+      headers: request.headers,
+    });
+
+    if (!session || !session.user?.id) {
+      return NextResponse.json({ active: false }, { status: 200 });
+    }
+
+    const user = await prisma.user.findUnique({
+      where: { id: session.user.id },
+      select: { active: true },
+    });
+
+    const isActive = user?.active ?? true;
+
+    return NextResponse.json({ active: isActive }, { status: 200 });
+  } catch (error: any) {
+    console.error('Erreur lors de la vérification du statut utilisateur:', error);
+    return NextResponse.json(
+      { active: false, error: error.message || 'Erreur serveur' },
+      { status: 200 },
+    );
+  }
+}

package/template/src/app/api/auth/google/callback/route.ts

@@ -0,0 +1,94 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { auth } from '@/lib/auth';
+import { prisma } from '@/lib/prisma';
+import { exchangeGoogleCodeForTokens } from '@/lib/google-calendar';
+
+/**
+ * GET /api/auth/google/callback
+ * Gère le callback OAuth de Google et sauvegarde les tokens
+ */
+export async function GET(request: NextRequest) {
+  try {
+    const session = await auth.api.getSession({
+      headers: request.headers,
+    });
+
+    if (!session) {
+      return NextResponse.redirect(new URL('/signin', request.url));
+    }
+
+    const { searchParams } = new URL(request.url);
+    const code = searchParams.get('code');
+    const error = searchParams.get('error');
+
+    if (error) {
+      return NextResponse.redirect(
+        new URL(
+          `/settings?error=${encodeURIComponent('Erreur lors de la connexion Google')}`,
+          request.url,
+        ),
+      );
+    }
+
+    if (!code) {
+      return NextResponse.redirect(
+        new URL(
+          `/settings?error=${encodeURIComponent("Code d'autorisation manquant")}`,
+          request.url,
+        ),
+      );
+    }
+
+    const redirectUri =
+      process.env.GOOGLE_REDIRECT_URI || 'http://localhost:3000/api/auth/google/callback';
+    const tokens = await exchangeGoogleCodeForTokens(code, redirectUri);
+
+    // Calculer la date d'expiration du token
+    const tokenExpiresAt = new Date();
+    tokenExpiresAt.setSeconds(tokenExpiresAt.getSeconds() + (tokens.expires_in || 3600));
+
+    // Récupérer l'email du compte Google (optionnel, via l'API userinfo)
+    let googleEmail: string | null = null;
+    try {
+      const userInfoResponse = await fetch('https://www.googleapis.com/oauth2/v2/userinfo', {
+        headers: {
+          Authorization: `Bearer ${tokens.access_token}`,
+        },
+      });
+      if (userInfoResponse.ok) {
+        const userInfo = await userInfoResponse.json();
+        googleEmail = userInfo.email || null;
+      }
+    } catch (err) {
+      console.error("Erreur lors de la récupération de l'email Google:", err);
+    }
+
+    // Sauvegarder ou mettre à jour les tokens
+    await prisma.userGoogleAccount.upsert({
+      where: { userId: session.user.id },
+      create: {
+        userId: session.user.id,
+        accessToken: tokens.access_token,
+        refreshToken: tokens.refresh_token || '',
+        tokenExpiresAt,
+        email: googleEmail,
+      },
+      update: {
+        accessToken: tokens.access_token,
+        refreshToken: tokens.refresh_token || undefined,
+        tokenExpiresAt,
+        email: googleEmail,
+      },
+    });
+
+    return NextResponse.redirect(new URL('/settings?success=google_connected', request.url));
+  } catch (error: any) {
+    console.error('Erreur lors du callback Google:', error);
+    return NextResponse.redirect(
+      new URL(
+        `/settings?error=${encodeURIComponent(error.message || 'Erreur lors de la connexion Google')}`,
+        request.url,
+      ),
+    );
+  }
+}

package/template/src/app/api/auth/google/disconnect/route.ts

@@ -0,0 +1,32 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { auth } from '@/lib/auth';
+import { prisma } from '@/lib/prisma';
+
+/**
+ * POST /api/auth/google/disconnect
+ * Déconnecte le compte Google de l'utilisateur
+ */
+export async function POST(request: NextRequest) {
+  try {
+    const session = await auth.api.getSession({
+      headers: request.headers,
+    });
+
+    if (!session) {
+      return NextResponse.json({ error: 'Non authentifié' }, { status: 401 });
+    }
+
+    // Supprimer le compte Google
+    await prisma.userGoogleAccount.deleteMany({
+      where: { userId: session.user.id },
+    });
+
+    return NextResponse.json({ success: true });
+  } catch (error: any) {
+    console.error('Erreur lors de la déconnexion Google:', error);
+    return NextResponse.json(
+      { error: error.message || 'Erreur lors de la déconnexion' },
+      { status: 500 },
+    );
+  }
+}

package/template/src/app/api/auth/google/route.ts

@@ -0,0 +1,34 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+/**
+ * GET /api/auth/google
+ * Redirige vers l'URL d'autorisation Google OAuth
+ */
+export async function GET(request: NextRequest) {
+  const clientId = process.env.GOOGLE_CLIENT_ID;
+  const redirectUri =
+    process.env.GOOGLE_REDIRECT_URI || 'http://localhost:3000/api/auth/google/callback';
+
+  if (!clientId) {
+    return NextResponse.json({ error: 'GOOGLE_CLIENT_ID non configuré' }, { status: 500 });
+  }
+
+  const scopes = [
+    'https://www.googleapis.com/auth/calendar.events',
+    'https://www.googleapis.com/auth/spreadsheets.readonly',
+    'https://www.googleapis.com/auth/drive.file', // Accès aux fichiers créés par l'application
+  ];
+
+  const params = new URLSearchParams({
+    client_id: clientId,
+    redirect_uri: redirectUri,
+    response_type: 'code',
+    scope: scopes.join(' '),
+    access_type: 'offline',
+    prompt: 'consent', // Force le consentement pour obtenir le refresh_token
+  });
+
+  const authUrl = `https://accounts.google.com/o/oauth2/v2/auth?${params.toString()}`;
+
+  return NextResponse.redirect(authUrl);
+}