List addressed requirements in solution

static/script.js

@@ -755,7 +755,6 @@ function createSingleAccordionItem(item, index, versionIndex, solutionCriticized
 
     // Récupérer le titre de la catégorie
     const categoryTitle = categorizedRequirements.categories.find(c => c.id == solution['Category_Id']).title;
-    // const categoryTitle = document.querySelector(`#category-${solution['Category_Id']} h2`)?.textContent || `Catégorie ${solution['Category_Id'] + 1}`;
 
     // Container pour chaque solution
     const solutionCard = document.createElement('div');
@@ -827,6 +826,22 @@ function createSingleAccordionItem(item, index, versionIndex, solutionCriticized
         <p class="text-xs text-gray-700 leading-relaxed">${solution['Problem Description'] || 'Aucune description du problème disponible.'}</p>
     `;
 
+    // Section Problem requirements
+    const reqsSection = document.createElement('div');
+    reqsSection.className = "bg-gray-50 border-l-2 border-red-400 p-3 rounded-r-md";
+    const reqItemsUl = solution["Requirements"].map(req => `<li>${req}</li>`).join('');
+    reqsSection.innerHTML = `
+        <h4 class="text-sm font-semibold text-gray-800 mb-2 flex items-center">
+            <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
+                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
+            </svg>
+            Addressed requirements
+        </h4>
+        <ul class="list-disc pl-5 space-y-1 text-gray-700 text-xs">
+            ${reqItemsUl}
+        </ul>
+    `
+
     // Section Solution Description
     const solutionSection = document.createElement('div');
     solutionSection.className = 'bg-green-50 border-l-2 border-green-400 p-3 rounded-r-md';
@@ -938,7 +953,7 @@ function createSingleAccordionItem(item, index, versionIndex, solutionCriticized
         className: 'flex flex-wrap mt-1'
     });
 
-    // create reference pills
+    // create source reference pills
     solution['References'].forEach(source => {
         const pillLink = createEl('a', {
             href: source.url,
@@ -956,6 +971,7 @@ function createSingleAccordionItem(item, index, versionIndex, solutionCriticized
 
     // Ajouter les sections au contenu
     content.appendChild(problemSection);
+    content.appendChild(reqsSection);
     content.appendChild(solutionSection);
     content.appendChild(critiqueSection);
     content.appendChild(sourcesSection);
@@ -976,12 +992,6 @@ function createSingleAccordionItem(item, index, versionIndex, solutionCriticized
             content.classList.remove('hidden');
     });
 
-    // Delete solution accordion button
-    // header.querySelector('#solution-delete-btn')?.addEventListener('click', (e) => {
-    //     e.stopPropagation();
-    //     solutionCard.remove();
-    // });
-
     // Événements de navigation pour cette catégorie spécifique
     header.querySelector('.version-btn-left')?.addEventListener('click', (e) => {
         e.stopPropagation();