From 95d018620278d88b2ffd100204c3490709812160 Mon Sep 17 00:00:00 2001
From: Pascal <pascal@debian.pascallim>
Date: Wed, 27 Nov 2024 12:07:36 +0100
Subject: [PATCH] clean_sign_translation

---
 src/interface/groupInterface.ts             |   0
 src/interface/memberInterface.ts            |   7 +
 src/interface/signatureResponseInterface.ts |   0
 src/mocks/mock-signature/groupsMock.js      |  40 ++
 src/pages/signature/signature.ts            | 391 +++++++++-----------
 5 files changed, 221 insertions(+), 217 deletions(-)
 create mode 100644 src/interface/groupInterface.ts
 create mode 100644 src/interface/memberInterface.ts
 create mode 100644 src/interface/signatureResponseInterface.ts

diff --git a/src/interface/groupInterface.ts b/src/interface/groupInterface.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/interface/memberInterface.ts b/src/interface/memberInterface.ts
new file mode 100644
index 0000000..20b80d2
--- /dev/null
+++ b/src/interface/memberInterface.ts
@@ -0,0 +1,7 @@
+export interface Member {
+    id: string | number;
+    name: string;
+    email?: string;
+    avatar?: string;
+    processRoles?: Array<{ processId: number | string; role: string }>;
+}
diff --git a/src/interface/signatureResponseInterface.ts b/src/interface/signatureResponseInterface.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/mocks/mock-signature/groupsMock.js b/src/mocks/mock-signature/groupsMock.js
index f5e8142..e98588c 100755
--- a/src/mocks/mock-signature/groupsMock.js
+++ b/src/mocks/mock-signature/groupsMock.js
@@ -204,6 +204,46 @@ export const groupsMock = [
                         createdAt: null,
                         deadline: null,
                         signatures: []
+                    },
+                    {
+                        id: 11,
+                        name: "Document Process D",
+                        description: "Document vierge pour validation processus",
+                        visibility: VISIBILITY_LEVELS.PUBLIC,
+                        status: DOCUMENT_STATUS.PENDING,
+                        createdAt: "2024-01-15",
+                        deadline: "2024-02-01",
+                        signatures: [
+                            {
+                                member: { id: 3, name: "Charlie" },
+                                signed: true,
+                                signedAt: "2024-01-15"
+                            },
+                            {
+                                member: { id: 4, name: "David" },
+                                signed: false
+                            }
+                        ]
+                    },
+                    {
+                        id: 12,
+                        name: "Document Process E",
+                        description: "Document vierge pour validation processus",
+                        visibility: VISIBILITY_LEVELS.PUBLIC,
+                        status: DOCUMENT_STATUS.PENDING,
+                        createdAt: "2024-01-15",
+                        deadline: "2024-02-01",
+                        signatures: [
+                            {
+                                member: { id: 3, name: "Charlie" },
+                                signed: true,
+                                signedAt: "2024-01-15"
+                            },
+                            {
+                                member: { id: 4, name: "David" },
+                                signed: false
+                            }
+                        ]
                     }
                 ]
             },
diff --git a/src/pages/signature/signature.ts b/src/pages/signature/signature.ts
index b489ef1..4a0a1f7 100755
--- a/src/pages/signature/signature.ts
+++ b/src/pages/signature/signature.ts
@@ -8,7 +8,6 @@ declare global {
         newRequest: typeof newRequest;
         submitRequest: typeof submitRequest;
         closeNewRequest: typeof closeNewRequest;
-        removeMember: typeof removeMember;
         closeModal: typeof closeModal;
         submitDocumentRequest: typeof submitDocumentRequest;
         submitNewDocument: typeof submitNewDocument;
@@ -30,45 +29,19 @@ import {
 } from '../../models/signature.models';
 import { messageStore } from '../../utils/messageMock';
 import { showAlert } from '../account/account';
+import { Member } from '../../interface/memberInterface';
+import { Group } from '../../interface/groupInterface';
 
-interface Member {
-    id: string | number;
-    name: string;
-    email?: string;
-    avatar?: string;
-    processRoles?: Array<{ processId: number | string; role: string }>;
-}
 
 let currentUser: Member = membersMock[0]; 
 
-interface Group {
-    id: number;
-    name: string;
-    description: string;
-    roles: Array<{
-        name: string;
-        members: Array<{ id: string | number; name: string }>;
-        documents?: Array<any>; 
-    }>;
-    commonDocuments: Array<{  
-        id: number;
-        name: string;
-        visibility: string;
-        description: string;
-        createdAt?: string | null;
-        deadline?: string | null;
-        signatures?: DocumentSignature[];
-        status?: string;
-    }>;
-}
 
-// Fonction pour gérer la liste des utilisateurs
+// Function to manage the list of users
 function toggleUserList() {
     const userList = document.getElementById('userList');
     if (!userList) return;
     
     if (!userList.classList.contains('show')) {
-        // Remplir la liste des utilisateurs
         userList.innerHTML = membersMock.map(member => `
             <div class="user-list-item" onclick="switchUser('${member.id}')">
                 <span class="user-avatar">${member.avatar}</span>
@@ -82,7 +55,7 @@ function toggleUserList() {
     userList?.classList.toggle('show');
 }
 
-// Fonction pour changer d'utilisateur
+// Function to switch user
 function switchUser(userId: string | number) {
     const user = membersMock.find(member => member.id === userId);
     if (!user) return;
@@ -92,7 +65,7 @@ function switchUser(userId: string | number) {
     userList?.classList.remove('show');
 }
 
-// Fonction pour mettre à jour l'affichage de l'utilisateur
+// Function to update the display of the current user
 function updateCurrentUserDisplay() {
     const userDisplay = document.getElementById('current-user');
     if (userDisplay) {
@@ -105,15 +78,15 @@ function updateCurrentUserDisplay() {
     }
 }
 
-// Ajouter les fonctions au scope global
+// Add the functions to the global scope
 window.toggleUserList = toggleUserList;
 window.switchUser = switchUser;
 
-// Initialiser l'affichage de l'utilisateur courant au chargement
+// Initialize the display of the current user when the page loads
 document.addEventListener('DOMContentLoaded', () => {
     updateCurrentUserDisplay();
     
-    // Fermer la liste si on clique ailleurs
+    // Close the list if clicked elsewhere
     document.addEventListener('click', (event) => {
         const userList = document.getElementById('userList');
         const userSwitchBtn = document.getElementById('userSwitchBtn');
@@ -122,7 +95,7 @@ document.addEventListener('DOMContentLoaded', () => {
         }
     });
 
-    // Initialiser les groupes en localStorage s'ils n'existent pas
+    // Initialize the groups in localStorage if they don't exist
     if (!localStorage.getItem('groups')) {
         localStorage.setItem('groups', JSON.stringify(groupsMock));
     }
@@ -146,11 +119,11 @@ function loadGroupList() {
         const li = document.createElement('li');
         li.className = 'group-list-item';
         
-        // Créer un conteneur flex pour le nom et l'icône
+        // Create a flex container for the name and the icon
         const container = document.createElement('div');
         container.className = 'group-item-container';
         
-        // Span pour le nom du processus
+        // Span for the process name
         const nameSpan = document.createElement('span');
         nameSpan.textContent = group.name;
         nameSpan.className = 'process-name';
@@ -159,13 +132,12 @@ function loadGroupList() {
             toggleRoles(group, li);
         };
         
-        // Ajouter l'icône ⚙️ avec un ID unique
+        // Add the ⚙️ icon with a unique ID
         const settingsIcon = document.createElement('span');
         settingsIcon.textContent = '⚙️';
         settingsIcon.className = 'settings-icon';
-        settingsIcon.id = `settings-${group.id}`; // ID unique basé sur l'ID du groupe
+        settingsIcon.id = `settings-${group.id}`; // Unique ID based on the group ID
         
-        // Créer une div pour la vue détaillée avec un ID unique correspondant
         const detailsArea = document.createElement('div');
         detailsArea.id = `process-details-${group.id}`;
         detailsArea.className = 'process-details';
@@ -176,7 +148,7 @@ function loadGroupList() {
             showProcessDetails(group, group.id);
         };
         
-        // Assembler les éléments
+        // Assemble the elements
         container.appendChild(nameSpan);
         container.appendChild(settingsIcon);
         li.appendChild(container);
@@ -198,18 +170,18 @@ function toggleRoles(group: Group, groupElement: HTMLElement) {
     group.roles.forEach(role => {
         const roleItem = document.createElement('li');
         
-        // Créer un conteneur flex pour le nom et l'icône
+        // Create a flex container for the name and the icon
         const container = document.createElement('div');
         container.className = 'role-item-container';
         container.style.display = 'flex';
         container.style.justifyContent = 'space-between';
         container.style.alignItems = 'center';
         
-        // Span pour le nom du rôle
+        // Span for the role name
         const nameSpan = document.createElement('span');
         nameSpan.textContent = role.name;
         
-        // Bouton dossier
+        // Folder button
         const folderButton = document.createElement('span');
         folderButton.textContent = '📁';
         folderButton.className = 'folder-icon';
@@ -218,7 +190,7 @@ function toggleRoles(group: Group, groupElement: HTMLElement) {
             showRoleDocuments(role, group);
         };
 
-        // Assembler les éléments
+        // Assemble the elements
         container.appendChild(nameSpan);
         container.appendChild(folderButton);
         roleItem.appendChild(container);
@@ -234,7 +206,6 @@ function toggleRoles(group: Group, groupElement: HTMLElement) {
     groupElement.appendChild(roleList);
 }
 
-// Toggle the list of membres
 function toggleMembers(role: { members: { id: string | number; name: string; }[] }, roleElement: HTMLElement) {
     let memberList = roleElement.querySelector('.member-list');
     if (memberList) {
@@ -261,12 +232,12 @@ function toggleMembers(role: { members: { id: string | number; name: string; }[]
 }
 
 
-// Load the list of members
+    // Load the list of members
 function loadMemberChat(memberId: string | number) {
     selectedMemberId = String(memberId);
     const memberMessages = messagesMock.find(m => String(m.memberId) === String(memberId));
 
-    // Trouver le processus et le rôle du membre
+    // Find the process and the role of the member
     let memberInfo = { processName: '', roleName: '', memberName: '' };
     groupsMock.forEach(process => {
         process.roles.forEach(role => {
@@ -349,15 +320,15 @@ function sendMessage() {
         type: 'text' as const
     };
 
-    // Ajouter et afficher le message immédiatement
+    // Add and display the message immediately
     messageStore.addMessage(selectedMemberId, newMessage);
     messagesMock = messageStore.getMessages();
     loadMemberChat(selectedMemberId);
 
-    // Réinitialiser l'input
+    // Reset the input
     messageInput.value = '';
 
-    // Réponse automatique après 2 secondes
+    // Automatic response after 2 seconds
     setTimeout(() => {
         if (selectedMemberId) {
             const autoReply = generateAutoReply(`Member ${selectedMemberId}`);
@@ -509,11 +480,11 @@ document.addEventListener('click', (event) => {
 });
 
 // ------------------ PROCESS DETAILS ------------------   
-// Fonction pour afficher les détails du processus
+// Function to display the process details
 function showProcessDetails(group: Group, groupId: number) {
     console.log('Showing details for group:', groupId);
     
-    // Fermer toutes les vues de processus existantes
+    // Close all existing process views
     const allDetailsAreas = document.querySelectorAll('.process-details');
     allDetailsAreas.forEach(area => {
         (area as HTMLElement).style.display = 'none';
@@ -525,11 +496,11 @@ function showProcessDetails(group: Group, groupId: number) {
         return;
     }
 
-    // Charger les données du localStorage
+    // Load the data from localStorage
     const storedGroups = JSON.parse(localStorage.getItem('groups') || '[]');
     const storedGroup = storedGroups.find((g: Group) => g.id === groupId);
     
-    // Utiliser les données du localStorage si disponibles, sinon utiliser le groupe passé en paramètre
+    // Use the data from localStorage if available, otherwise use the group passed as a parameter
     const displayGroup = storedGroup || group;
 
     let detailsArea = document.getElementById(`process-details-${groupId}`);
@@ -565,7 +536,6 @@ function showProcessDetails(group: Group, groupId: number) {
                                 sig.member && 'id' in sig.member && sig.member.id === currentUser.id && !sig.signed
                             );
 
-                            // Ajouter le bouton de signature pour tous les documents non vierges en mode dev
                             const signButton = !isVierge ? `
                                 ${totalSignatures > 0 && signedCount < totalSignatures && canSign ? `
                                     <button class="sign-button" onclick="signDocument(${document.id}, ${groupId}, true)">
@@ -625,7 +595,7 @@ function showProcessDetails(group: Group, groupId: number) {
                 <div class="details-section">
                     <h3>Roles and Documents</h3>
                     ${displayGroup.roles.map((role: { name: string; documents?: any[] }) => {
-                        // Filtrer les documents selon les droits d'accès
+                        // Filter the documents according to the access rights
                         const accessibleDocuments = (role.documents || []).filter(doc => 
                             canUserAccessDocument(doc, role.name, currentUser.processRoles?.[0]?.role || '')
                         );
@@ -711,10 +681,6 @@ function showProcessDetails(group: Group, groupId: number) {
                 </div>
         `;
 
-        /**const newRequestBtn = document.createElement('button');
-        newRequestBtn.className = 'new-request-btn';
-        newRequestBtn.textContent = 'New request';
-        newRequestBtn.onclick = () => newRequest(group);**/
 
         const newCloseProcessButton = document.createElement('button');
         newCloseProcessButton.className = 'close-btn';
@@ -723,13 +689,12 @@ function showProcessDetails(group: Group, groupId: number) {
         
         const headerButtons = detailsArea.querySelector('.header-buttons');
         if (headerButtons) {
-            /**headerButtons.appendChild(newRequestBtn);**/
             headerButtons.appendChild(newCloseProcessButton);
         }
     }
 }
 
-// Fonction pour fermer les détails et revenir au chat
+// Function to close the details and return to the chat
 function closeProcessDetails(groupId: number) {
     const detailsArea = document.getElementById(`process-details-${groupId}`);
     const chatArea = document.getElementById('chat-area');
@@ -746,7 +711,7 @@ function closeProcessDetails(groupId: number) {
 window.closeProcessDetails = closeProcessDetails;
 window.loadMemberChat = loadMemberChat;
 
-// Nouvelle fonction pour afficher les documents d'un rôle
+// New function to display the documents of a role
 function showRoleDocuments(role: {
     name: string;
     documents?: Array<{
@@ -761,16 +726,16 @@ function showRoleDocuments(role: {
     }>;
     id?: number;
 }, group: Group) {
-    // Charger les données depuis le localStorage
+    // Load the data from localStorage
     const storedGroups = JSON.parse(localStorage.getItem('groups') || '[]');
     const storedGroup = storedGroups.find((g: Group) => g.id === group.id);
     const storedRole = storedGroup?.roles.find((r: any) => r.name === role.name);
     
-    // Utiliser les données du localStorage si disponibles, sinon utiliser les données passées en paramètre
+    // Use the data from localStorage if available, otherwise use the data passed as a parameter
     const displayRole = storedRole || role;
     
     console.log('Showing documents for role:', displayRole.name, 'in group:', group.name);
-    // Fermer d'abord toutes les vues de documents existantes
+    // Close all existing document views first
     const allDetailsAreas = document.querySelectorAll('.process-details');
     allDetailsAreas.forEach(area => {
         area.remove();
@@ -782,11 +747,11 @@ function showRoleDocuments(role: {
         return;
     }
 
-    // Créer une nouvelle zone de détails
+    // Create a new details area
     const detailsArea = document.createElement('div');
     detailsArea.id = `role-documents-${displayRole.name}`;
     detailsArea.className = 'process-details';
-    // Filtrer les documents accessibles
+    // Filter the accessible documents
     const accessibleDocuments = (displayRole.documents || []).filter((doc: {
         name: string;
         visibility: string;
@@ -862,7 +827,7 @@ function showRoleDocuments(role: {
                                                 <p>${signedCount} out of ${totalSignatures} signed (${percentage.toFixed(0)}%)</p>
                                             </div>
                                         ` : `
-                                            <p>Document vierge - En attente de création</p>
+                                            <p>Blank document - Waiting for creation</p>
                                             ${canUserAccessDocument(document, displayRole.name, currentUser.processRoles?.[0]?.role || '') ? `
                                                 <button class="new-request-btn" onclick="newRequest({
                                                     processId: ${group.id},
@@ -887,7 +852,7 @@ function showRoleDocuments(role: {
     container.appendChild(detailsArea);
 }
 
-// Fonction pour fermer la vue des documents d'un rôle
+// Function to close the documents view of a role
 function closeRoleDocuments(roleName: string) {
     const detailsArea = document.getElementById(`role-documents-${roleName}`);
     if (detailsArea) {
@@ -901,7 +866,7 @@ window.closeRoleDocuments = closeRoleDocuments;
 
 window.switchUser = switchUser;
 
-// Fonction pour calculer la durée entre deux dates
+// Function to calculate the duration between two dates
 function calculateDuration(startDate: string | null | undefined, endDate: string | null | undefined): number {
     const start = new Date(startDate || '');
     const end = new Date(endDate || '');
@@ -914,38 +879,27 @@ window.newRequest = newRequest;
 window.submitRequest = submitRequest;
 window.closeNewRequest = closeNewRequest;
 
-// Définir la fonction removeMember pour supprimer un membre par son ID
-function removeMember(memberId: string | number) {
-    const memberElement = document.querySelector(`.selected-member[data-member-id="${memberId}"]`);
-    if (memberElement) {
-        memberElement.remove();
-    }
-}
-
-window.removeMember = removeMember;
-
-
-// Fonction pour gérer la nouvelle demande
+// Function to manage the new request
 function newRequest(params: RequestParams) {
-    // Ajout de validation des paramètres
+    // Add parameter validation
     if (!params || !params.processId) {
         console.error('Paramètres invalides:', params);
-        showAlert('Paramètres invalides pour la nouvelle demande');
+        showAlert('Invalid parameters for new request');
         return;
     }
 
     const modal = document.createElement('div');
     modal.className = 'modal-overlay';
     
-    // Récupérer le processus avec une vérification
+    // Retrieve the process with a verification
     const process = groupsMock.find(g => g.id === params.processId);
     if (!process) {
         console.error('Processus non trouvé:', params.processId);
-        showAlert('Processus non trouvé');
+        showAlert('Process not found');
         return;
     }
     
-    // Déterminer les membres avec une vérification supplémentaire
+    // Determine the members with an additional verification
     let membersToDisplay = [];
     try {
         if (params.roleName === 'common') {
@@ -958,7 +912,7 @@ function newRequest(params: RequestParams) {
         } else {
             const role = process.roles.find(r => r.name === params.roleName);
             if (!role) {
-                throw new Error(`Rôle ${params.roleName} non trouvé`);
+                throw new Error(`Role ${params.roleName} not found`);
             }
             membersToDisplay = role.members.map(member => ({
                 ...member,
@@ -966,8 +920,8 @@ function newRequest(params: RequestParams) {
             }));
         }
     } catch (error) {
-        console.error('Erreur lors de la récupération des membres:', error);
-        showAlert('Erreur lors de la récupération des membres');
+        console.error('Error retrieving members:', error);
+        showAlert('Error retrieving members');
         return;
     }
 
@@ -1067,12 +1021,12 @@ function newRequest(params: RequestParams) {
     const fileInput = modal.querySelector('#fileInput') as HTMLInputElement;
     const fileList = modal.querySelector('#fileList') as HTMLDivElement;
 
-    // Rendre la zone cliquable
+    // Make the area clickable
     dropZone.addEventListener('click', () => {
         fileInput.click();
     });
 
-    // Gérer la sélection de fichiers
+    // Manage the file selection
     fileInput.addEventListener('change', (e: Event) => {
         const target = e.target as HTMLInputElement;
         if (target.files && target.files.length > 0) {
@@ -1080,7 +1034,7 @@ function newRequest(params: RequestParams) {
         }
     });
 
-    // Gérer le drag & drop
+    // Manage the drag & drop
     dropZone.addEventListener('dragover', (e: DragEvent) => {
         e.preventDefault();
         dropZone.classList.add('dragover');
@@ -1103,7 +1057,7 @@ function newRequest(params: RequestParams) {
             const reader = new FileReader();
             reader.onload = (e) => {
                 const fileContent = e.target?.result;
-                // Vérifier si le fichier n'est pas déjà dans la liste
+                // Verify if the file is not already in the list
                 const existingFiles = fileList.querySelectorAll('.file-name');
                 const isDuplicate = Array.from(existingFiles).some(
                     existingFile => existingFile.textContent === file.name
@@ -1150,11 +1104,11 @@ function submitNewDocument(event: Event) {
     
     const form = document.getElementById('newDocumentForm') as HTMLFormElement;
     if (!form) {
-        showAlert('Formulaire non trouvé');
+        showAlert('Form not found');
         return;
     }
     
-    // Récupération des fichiers
+    // Retrieve the files
     const fileList = document.getElementById('fileList');
     const files = Array.from(fileList?.querySelectorAll('.file-item') || []).map(fileItem => {
         const fileName = fileItem.querySelector('.file-name')?.textContent || '';
@@ -1164,7 +1118,7 @@ function submitNewDocument(event: Event) {
         };
     });
     
-    // Récupération des valeurs du formulaire
+    // Retrieve the values from the form
     const processId = Number((form.querySelector('#processId') as HTMLInputElement)?.value);
     const documentId = Number((form.querySelector('#documentId') as HTMLInputElement)?.value);
     const documentName = (form.querySelector('#documentName') as HTMLInputElement)?.value?.trim();
@@ -1174,17 +1128,17 @@ function submitNewDocument(event: Event) {
     
     // Validation
     if (!documentName || !description || !deadline) {
-        showAlert('Veuillez remplir tous les champs obligatoires');
+        showAlert('Please fill in all required fields');
         return;
     }
 
     try {
-        // Récupérer les données actuelles
+        // Retrieve the current data
         const groups = JSON.parse(localStorage.getItem('groups') || JSON.stringify(groupsMock));
         const group = groups.find((g: Group) => g.id === processId);
         
         if (!group) {
-            showAlert('Processus non trouvé');
+            showAlert('Process not found');
             return;
         }
 
@@ -1193,11 +1147,11 @@ function submitNewDocument(event: Event) {
         });
 
         if (!role) {
-            showAlert('Rôle non trouvé');
+            showAlert('Role not found');
             return;
         }
 
-        // Créer le nouveau document avec les signatures des membres du rôle
+        // Create the new document with the signatures of the role members
         const updatedDocument = {
             id: documentId,
             name: documentName,
@@ -1214,16 +1168,16 @@ function submitNewDocument(event: Event) {
             files: files // Ajout des fichiers au document
         };
 
-        // Mettre à jour le document dans le rôle
+        // Update the document in the role
         const documentIndex = role.documents.findIndex((d: any) => d.id === documentId);
         if (documentIndex !== -1) {
             role.documents[documentIndex] = updatedDocument;
         }
 
-        // Sauvegarder dans le localStorage
+        // Save in localStorage
         localStorage.setItem('groups', JSON.stringify(groups));
         
-        // Mettre à jour également groupsMock pour la cohérence
+        // Also update groupsMock for consistency
         const mockGroup = groupsMock.find(g => g.id === processId);
         if (mockGroup) {
             const mockRole = mockGroup.roles.find(r => r.name === role.name);
@@ -1238,18 +1192,18 @@ function submitNewDocument(event: Event) {
             }
         }
 
-        // Fermer le modal
+        // Close the modal
         if (event.target instanceof HTMLElement) {
             closeModal(event.target);
         }
 
-        // Recharger la vue des documents avec les données mises à jour
+        // Reload the documents view with the updated data
         showRoleDocuments(role, group);
-        showAlert('Document mis à jour avec succès!');
+        showAlert('Document updated successfully!');
 
     } catch (error) {
-        console.error('Erreur lors de la sauvegarde:', error);
-        showAlert('Une erreur est survenue lors de la sauvegarde');
+        console.error('Error saving:', error);
+        showAlert('An error occurred while saving');
     }
 }
 
@@ -1260,7 +1214,7 @@ function submitCommonDocument(event: Event) {
     
     const form = document.getElementById('newDocumentForm') as HTMLFormElement;
     if (!form) {
-        showAlert('Formulaire non trouvé');
+        showAlert('Form not found');
         return;
     }
     
@@ -1272,7 +1226,7 @@ function submitCommonDocument(event: Event) {
     const visibility = (form.querySelector('#visibility') as HTMLSelectElement)?.value;
     
     if (!documentName || !description || !deadline) {
-        showAlert('Veuillez remplir tous les champs obligatoires');
+        showAlert('Please fill in all required fields');
         return;
     }
 
@@ -1281,11 +1235,11 @@ function submitCommonDocument(event: Event) {
         const group = groups.find((g: Group) => g.id === processId);
         
         if (!group) {
-            showAlert('Processus non trouvé');
+            showAlert('Process not found');
             return;
         }
 
-        // Récupérer tous les membres de tous les rôles du groupe
+        // Retrieve all members of all roles in the group
         const allMembers = group.roles.reduce((acc: any[], role: any) => {
             return acc.concat(role.members);
         }, []);
@@ -1315,7 +1269,7 @@ function submitCommonDocument(event: Event) {
             files: files
         };
 
-        // Mettre à jour le document commun
+        // Update the common document
         const documentIndex = group.commonDocuments.findIndex((d: { id: number }) => d.id === documentId);
         if (documentIndex !== -1) {
             group.commonDocuments[documentIndex] = updatedDocument;
@@ -1328,11 +1282,11 @@ function submitCommonDocument(event: Event) {
         }
 
         showProcessDetails(group, group.id);
-        showAlert('Document commun mis à jour avec succès!');
+        showAlert('Document common updated successfully!');
 
     } catch (error) {
-        console.error('Erreur lors de la sauvegarde:', error);
-        showAlert('Une erreur est survenue lors de la sauvegarde');
+        console.error('Error saving:', error);
+        showAlert('An error occurred while saving');
     }
 }
 
@@ -1461,64 +1415,9 @@ if (addMembersBtn) {
     });
 }
 
-// Fonction d'initialisation pour le router
-export function initSignature() {
-    // Réinitialiser l'affichage
-    const groupList = document.getElementById('group-list');
-    if (groupList) {
-        groupList.innerHTML = ''; // Nettoyer la liste existante
-    }
+// FUNCTIONS FOR SIGNATURE
 
-    // Recharger les messages depuis le store
-    messagesMock = messageStore.getMessages();
-    if (messagesMock.length === 0) {
-        messageStore.setMessages(initialMessagesMock);
-        messagesMock = messageStore.getMessages();
-    }
-
-    // Réinitialiser l'interface
-    updateCurrentUserDisplay();
-    loadGroupList();
-    
-    // Si un membre était sélectionné, recharger son chat
-    if (selectedMemberId) {
-        loadMemberChat(selectedMemberId);
-    }
-
-    // Event listeners
-    document.addEventListener('click', (event) => {
-        const userList = document.getElementById('userList');
-        const userSwitchBtn = document.getElementById('userSwitchBtn');
-        if (userSwitchBtn && userList && !userSwitchBtn.contains(event.target as Node) && !userList.contains(event.target as Node)) {
-            userList.classList.remove('show');
-        }
-    });
-
-    // Réattacher les event listeners pour les messages
-    const sendBtn = document.getElementById('send-button');
-    if (sendBtn) sendBtn.onclick = sendMessage;
-
-    const messageInput = document.getElementById('message-input');
-    if (messageInput) {
-        messageInput.addEventListener('keydown', function (event) {
-            if (event.key === 'Enter') {
-                event.preventDefault();
-                sendMessage();
-            }
-        });
-    }
-}
-
-// Ajouter cette interface pour la signature
-interface SignatureResponse {
-    success: boolean;
-    message: string;
-    documentId: number;
-    memberId: string | number;
-    signedAt: string;
-}
-
-// Ajouter cette fonction pour signer un document
+// Add this function to sign a document
 function signDocument(documentId: number, processId: number, isCommonDocument: boolean = false) {
     if (typeof window === 'undefined' || typeof document === 'undefined') {
         console.error('Cette fonction ne peut être exécutée que dans un navigateur');
@@ -1530,7 +1429,7 @@ function signDocument(documentId: number, processId: number, isCommonDocument: b
         const group = groups.find((g: Group) => g.id === processId);
         
         if (!group) {
-            throw new Error('Processus non trouvé');
+            throw new Error('Process not found');
         }
 
         let targetDoc;
@@ -1546,7 +1445,7 @@ function signDocument(documentId: number, processId: number, isCommonDocument: b
         }
 
         if (!targetDoc) {
-            throw new Error('Document non trouvé');
+            throw new Error('Document not found');
         }
 
         const canSign = isCommonDocument ? 
@@ -1556,11 +1455,11 @@ function signDocument(documentId: number, processId: number, isCommonDocument: b
             canUserSignDocument(targetDoc, currentUser?.name, currentUser);
 
         if (!canSign) {
-            showAlert("Vous n'avez pas les droits nécessaires pour signer ce document.");
+            showAlert("You do not have the necessary rights to sign this document.");
             return;
         }
 
-        // Créer et insérer la modal directement dans le body
+        // Create and insert the modal directly into the body
         const modalHtml = `
             <div class="modal-overlay" id="signatureModal">
                 <div class="modal-document">
@@ -1590,7 +1489,7 @@ function signDocument(documentId: number, processId: number, isCommonDocument: b
 
                             <div class="description-section">
                                 <h4>Description:</h4>
-                                <p>${targetDoc.description || 'Aucune description disponible'}</p>
+                                <p>${targetDoc.description || 'No description available'}</p>
                             </div>
 
                             <div class="signatures-section">
@@ -1601,8 +1500,8 @@ function signDocument(documentId: number, processId: number, isCommonDocument: b
                                             <span class="signer-name">${sig.member.name}</span>
                                             <span class="signature-status">
                                                 ${sig.signed ? 
-                                                    `✓ Signé le ${sig.signedAt ? new Date(sig.signedAt).toLocaleDateString() : 'date inconnue'}` : 
-                                                    '⌛ En attente'}
+                                                    `✓ Signed on ${sig.signedAt ? new Date(sig.signedAt).toLocaleDateString() : 'unknown date'}` : 
+                                                    '⌛ Pending'}
                                             </span>
                                         </div>
                                     `).join('')}
@@ -1623,20 +1522,20 @@ function signDocument(documentId: number, processId: number, isCommonDocument: b
                                                     </a>
                                                 </div>
                                             `).join('') 
-                                            : '<p>Aucun fichier joint</p>'
+                                            : '<p>No file attached</p>'
                                         }
                                     </div>
                                 </div>
                             ` : ''}
 
                             <div class="confirmation-section">
-                                <p class="warning-text">En signant ce document, vous confirmez avoir pris connaissance de son contenu.</p>
+                                <p class="warning-text">By signing this document, you confirm that you have read its contents.</p>
                                 <div class="signature-slider-container">
                                     <div class="slider-track">
                                         <div class="slider-handle" id="signatureSlider" draggable="true">
                                             <span class="slider-arrow">➜</span>
                                         </div>
-                                        <span class="slider-text">Glisser pour signer</span>
+                                        <span class="slider-text">Drag to sign</span>
                                     </div>
                                 </div>
                             </div>
@@ -1647,7 +1546,7 @@ function signDocument(documentId: number, processId: number, isCommonDocument: b
 
         document.body.insertAdjacentHTML('beforeend', modalHtml);
 
-        // Ajouter la logique du slider après création de la modal
+        // Add the slider logic after creating the modal
         const slider = document.getElementById('signatureSlider');
         const sliderTrack = slider?.parentElement;
         let isDragging = false;
@@ -1659,7 +1558,7 @@ function signDocument(documentId: number, processId: number, isCommonDocument: b
             document.addEventListener('mousemove', drag);
             document.addEventListener('mouseup', stopDrag);
             
-            // Touch events pour mobile
+            // Touch events for mobile
             slider.addEventListener('touchstart', initDrag);
             document.addEventListener('touchmove', drag);
             document.addEventListener('touchend', stopDrag);
@@ -1678,17 +1577,17 @@ function signDocument(documentId: number, processId: number, isCommonDocument: b
             const rect = sliderTrack.getBoundingClientRect();
             const x = 'touches' in e ? e.touches[0].clientX : e.clientX;
             
-            // Calculer la position relative à la track
+            // Calculate the position relative to the track
             let newLeft = x - rect.left - (slider.offsetWidth / 2);
             
-            // Limiter le déplacement
+            // Limit the movement
             const maxLeft = sliderTrack.offsetWidth - slider.offsetWidth;
             newLeft = Math.max(0, Math.min(newLeft, maxLeft));
             
-            // Mettre à jour la position
+            // Update the position
             slider.style.left = `${newLeft}px`;
             
-            // Si le slider atteint 90% du chemin, déclencher la signature
+            // If the slider reaches 90% of the path, trigger the signature
             if (newLeft > maxLeft * 0.9) {
                 stopDrag(e);
                 confirmSignature(documentId, processId, isCommonDocument);
@@ -1699,29 +1598,29 @@ function signDocument(documentId: number, processId: number, isCommonDocument: b
             if (!isDragging || !slider) return;
             isDragging = false;
             
-            // Réinitialiser la position si pas assez glissé
+            // Reset the position if not enough dragged
             if (slider.offsetLeft < (sliderTrack?.offsetWidth || 0) * 0.9) {
                 slider.style.left = '0px';
             }
         }
 
     } catch (error) {
-        console.error('Erreur lors de l\'affichage de la modal:', error);
-        showAlert(error instanceof Error ? error.message : 'Erreur lors de l\'affichage de la modal');
+        console.error('Error displaying modal:', error);
+        showAlert(error instanceof Error ? error.message : 'Error displaying modal');
     }
 }
 
-// Nouvelle fonction pour confirmer la signature
+// New function to confirm the signature
 function confirmSignature(documentId: number, processId: number, isCommonDocument: boolean) {
     try {
-        // Ajout du console.log pour voir l'utilisateur actuel
+        // Add console.log to see the current user
         console.log('Current user:', currentUser);
 
         const groups = JSON.parse(localStorage.getItem('groups') || JSON.stringify(groupsMock));
         const group = groups.find((g: Group) => g.id === processId);
         
         if (!group) {
-            throw new Error('Processus non trouvé');
+            throw new Error('Process not found');
         }
 
         let targetDoc;
@@ -1737,7 +1636,7 @@ function confirmSignature(documentId: number, processId: number, isCommonDocumen
         }
 
         if (!targetDoc) {
-            throw new Error('Document non trouvé');
+            throw new Error('Document not found');
         }
 
         const userSignature = targetDoc.signatures.find((sig: DocumentSignature) => 
@@ -1745,7 +1644,7 @@ function confirmSignature(documentId: number, processId: number, isCommonDocumen
         );
 
         if (!userSignature) {
-            throw new Error(`L'utilisateur ${currentUser.name} n'est pas autorisé à signer ce document. Veuillez vous connecter avec un utilisateur autorisé.`);
+            throw new Error(`The user ${currentUser.name} is not authorized to sign this document. Please log in with an authorized user.`);
         }
 
         userSignature.signed = true;
@@ -1753,7 +1652,6 @@ function confirmSignature(documentId: number, processId: number, isCommonDocumen
 
         localStorage.setItem('groups', JSON.stringify(groups));
 
-        // Modification ici : utiliser document.querySelector au lieu de document
         const closeBtn = document.querySelector('.modal-overlay .close-btn');
         if (closeBtn instanceof HTMLElement) {
             closeModal(closeBtn);
@@ -1768,11 +1666,11 @@ function confirmSignature(documentId: number, processId: number, isCommonDocumen
             }
         }
 
-        showAlert('Document signé avec succès!');
+        showAlert('Document signed successfully!');
 
     } catch (error) {
-        console.error('Erreur lors de la signature:', error);
-        showAlert(error instanceof Error ? error.message : 'Erreur lors de la signature');
+        console.error('Error signing document:', error);
+        showAlert(error instanceof Error ? error.message : 'Error signing document');
     }
 }
 
@@ -1784,24 +1682,83 @@ if (typeof window !== 'undefined') {
     (window as any).confirmSignature = confirmSignature;
 }
 
-// Ajouter cette fonction helper
+// Add this helper function
 function canUserAccessDocument(document: any, roleId: string, currentUserRole: string): boolean {
-    // Modification de la logique d'accès
+    // Modify the access logic
     if (document.visibility === 'public') {
-        return true; // Peut voir mais pas forcément signer
+        return true; // Can see but not necessarily sign
     }
     return roleId === currentUserRole;
 }
 
 function canUserSignDocument(document: any, role: string, user: Member): boolean {
-    // Vérifier si l'utilisateur a le bon rôle pour ce processus
-    const userRole = user.processRoles?.find(pr => pr.role === role);
-    if (!userRole) {
-        return false;
-    }
-    
-    // Vérifier si l'utilisateur est dans la liste des signataires
-    return document.signatures?.some((sig: DocumentSignature) => 
+    console.log('Checking signing rights for:', {
+        document,
+        role,
+        user,
+        userRoles: user.processRoles
+    });
+
+    // Vérifier si l'utilisateur est dans la liste des signatures
+    const isSignatory = document.signatures?.some((sig: DocumentSignature) => 
         sig.member && 'id' in sig.member && sig.member.id === user.id && !sig.signed
     );
+
+    if (!isSignatory) {
+        console.log('User is not in signatures list or has already signed');
+        return false;
+    }
+
+    // Si l'utilisateur est dans la liste des signatures, il peut signer
+    return true;
 }
+
+
+// Function to initialize the router
+export function initSignature() {
+    // Reset the display
+    const groupList = document.getElementById('group-list');
+    if (groupList) {
+        groupList.innerHTML = ''; // Clear the existing list
+    }
+
+    // Reload the messages from the store
+    messagesMock = messageStore.getMessages();
+    if (messagesMock.length === 0) {
+        messageStore.setMessages(initialMessagesMock);
+        messagesMock = messageStore.getMessages();
+    }
+
+    // Reset the interface
+    updateCurrentUserDisplay();
+    loadGroupList();
+    
+    // If a member was selected, reload their chat
+    if (selectedMemberId) {
+        loadMemberChat(selectedMemberId);
+    }
+
+    // Event listeners
+    document.addEventListener('click', (event) => {
+        const userList = document.getElementById('userList');
+        const userSwitchBtn = document.getElementById('userSwitchBtn');
+        if (userSwitchBtn && userList && !userSwitchBtn.contains(event.target as Node) && !userList.contains(event.target as Node)) {
+            userList.classList.remove('show');
+        }
+    });
+
+    // Reattach the event listeners for the messages
+    const sendBtn = document.getElementById('send-button');
+    if (sendBtn) sendBtn.onclick = sendMessage;
+
+    const messageInput = document.getElementById('message-input');
+    if (messageInput) {
+        messageInput.addEventListener('keydown', function (event) {
+            if (event.key === 'Enter') {
+                event.preventDefault();
+                sendMessage();
+            }
+        });
+    }
+}
+