diff --git a/src/pages/signature/signature.ts b/src/pages/signature/signature.ts
index 0579715..1f25eb7 100755
--- a/src/pages/signature/signature.ts
+++ b/src/pages/signature/signature.ts
@@ -732,7 +732,15 @@ function showRoleDocuments(role: {
     }>;
     id?: number;
 }, group: Group) {
-    console.log('Showing documents for role:', role.name, 'in group:', group.name);
+    // Charger les données depuis le 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
+    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
     const allDetailsAreas = document.querySelectorAll('.process-details');
     allDetailsAreas.forEach(area => {
@@ -747,26 +755,35 @@ function showRoleDocuments(role: {
 
     // Créer une nouvelle zone de détails
     const detailsArea = document.createElement('div');
-    detailsArea.id = `role-documents-${role.name}`;
+    detailsArea.id = `role-documents-${displayRole.name}`;
     detailsArea.className = 'process-details';
     
     detailsArea.innerHTML = `
         <div class="process-details-header">
-            <h2>${role.name} Documents</h2>
+            <h2>${displayRole.name} Documents</h2>
             <div class="header-buttons">
-                <button class="close-btn" onclick="closeRoleDocuments('${role.name}')">✕</button>
+                <button class="close-btn" onclick="closeRoleDocuments('${displayRole.name}')">✕</button>
             </div>
         </div>
         <div class="process-details-content">
             <div class="details-section">
                 <h3>Documents</h3>
                 <div class="documents-grid">
-                    ${(role.documents || []).length > 0 ? 
-                        (role.documents || []).map(document => {
+                    ${(displayRole.documents || []).length > 0 ? 
+                        (displayRole.documents || []).map((document: {
+                            name: string;
+                            visibility: string;
+                            createdAt: string | null | undefined;
+                            deadline: string | null | undefined;
+                            signatures: DocumentSignature[];
+                            id: number;
+                            description?: string;
+                            status?: string;
+                        }) => {
                             const totalSignatures = document.signatures.length;
                             const signedCount = document.signatures.filter((sig: DocumentSignature) => sig.signed).length;
                             const percentage = totalSignatures > 0 ? (signedCount / totalSignatures) * 100 : 0;
-                            const isVierge = !document.createdAt || 
+                            const isVierge = !document.createdAt ||
                                            !document.deadline || 
                                            document.signatures.length === 0;