From 4e179b40d24b691bd004aeea320c1d09aa2a78ee Mon Sep 17 00:00:00 2001
From: Sylvain Schneider <s.schneider@sd-innovation.fr>
Date: Mon, 11 May 2026 23:39:20 +0200
Subject: [PATCH] appends tests tab

---
 kwa-ui/src/components/RequirementDetail.vue | 158 ++++++++++++--------
 1 file changed, 95 insertions(+), 63 deletions(-)

diff --git a/kwa-ui/src/components/RequirementDetail.vue b/kwa-ui/src/components/RequirementDetail.vue
index 5a10648..e1a3021 100644
--- a/kwa-ui/src/components/RequirementDetail.vue
+++ b/kwa-ui/src/components/RequirementDetail.vue
@@ -3,6 +3,8 @@ import Button from 'primevue/button'
 import Card from 'primevue/card'
 import Chip from 'primevue/chip'
 import Divider from 'primevue/divider'
+import TabView from 'primevue/tabview'
+import TabPanel from 'primevue/tabpanel'
 import Tag from 'primevue/tag'
 
 export interface Requirement {
@@ -76,79 +78,90 @@ const prioritySeverity = (priority: Requirement['priority']) => {
       </template>
 
       <template #content>
-        <!-- Status and priority tags -->
-        <div class="detail-badges">
-          <Tag :value="requirement.status" :severity="statusSeverity(requirement.status)" />
-          <Tag :value="requirement.priority" :severity="prioritySeverity(requirement.priority)" rounded />
-        </div>
-
-        <!-- Description -->
-        <p class="detail-description">{{ requirement.description }}</p>
-
-        <!-- Blockers section (shown only if blockers exist) -->
-        <article v-if="requirement.blockers.length" class="info-panel info-panel--warning">
-          <h3>Identified blockers</h3>
-          <ul class="blockers-list">
-            <li v-for="blocker in requirement.blockers" :key="blocker">
-              <i class="pi pi-exclamation-triangle" />
-              <span>{{ blocker }}</span>
-            </li>
-          </ul>
-        </article>
-
-        <Divider />
-
-        <!-- Key attributes: Author, Stakeholders, Priority, Flexibility -->
-        <div class="detail-grid">
-          <article class="info-panel">
-            <h3>Author</h3>
-            <p>{{ requirement.owner }}</p>
-          </article>
-
-          <article class="info-panel">
-            <h3>Stakeholders</h3>
-            <div class="chip-row">
-              <Chip v-for="stakeholder in requirement.stakeholders" :key="stakeholder" :label="stakeholder" />
+        <TabView>
+          <TabPanel value="details" header="Details">
+            <!-- Status and priority tags -->
+            <div class="detail-badges">
+              <Tag :value="requirement.status" :severity="statusSeverity(requirement.status)" />
+              <Tag :value="requirement.priority" :severity="prioritySeverity(requirement.priority)" rounded />
             </div>
-          </article>
 
-          <article class="info-panel">
-            <h3>Flexibility</h3>
-            <p>{{ requirement.flexibility }}</p>
-          </article>
+            <!-- Description -->
+            <p class="detail-description">{{ requirement.description }}</p>
 
-          <article class="info-panel">
-            <h3>Tolerances</h3>
-            <p>{{ requirement.tolerances }}</p>
-          </article>
-        </div>
+            <!-- Blockers section (shown only if blockers exist) -->
+            <article v-if="requirement.blockers.length" class="info-panel info-panel--warning">
+              <h3>Identified blockers</h3>
+              <ul class="blockers-list">
+                <li v-for="blocker in requirement.blockers" :key="blocker">
+                  <i class="pi pi-exclamation-triangle" />
+                  <span>{{ blocker }}</span>
+                </li>
+              </ul>
+            </article>
 
-        <Divider />
+            <Divider />
 
-        <!-- Acceptance criteria and impacted modules -->
-        <div class="detail-columns">
-          <article class="info-panel">
-            <h3>Acceptance criteria</h3>
-            <ul class="checklist">
-              <li v-for="item in requirement.acceptanceCriteria" :key="item">
-                <i class="pi pi-check-circle" />
-                <span>{{ item }}</span>
-              </li>
-            </ul>
-          </article>
+            <!-- Key attributes: Author, Stakeholders, Priority, Flexibility -->
+            <div class="detail-grid">
+              <article class="info-panel">
+                <h3>Author</h3>
+                <p>{{ requirement.owner }}</p>
+              </article>
 
-          <article class="info-panel">
-            <h3>Impacted modules</h3>
-            <div class="chip-row">
-              <Chip v-for="module in requirement.impactedModules" :key="module" :label="module" />
+              <article class="info-panel">
+                <h3>Stakeholders</h3>
+                <div class="chip-row">
+                  <Chip v-for="stakeholder in requirement.stakeholders" :key="stakeholder" :label="stakeholder" />
+                </div>
+              </article>
+
+              <article class="info-panel">
+                <h3>Flexibility</h3>
+                <p>{{ requirement.flexibility }}</p>
+              </article>
+
+              <article class="info-panel">
+                <h3>Tolerances</h3>
+                <p>{{ requirement.tolerances }}</p>
+              </article>
             </div>
 
             <Divider />
 
-            <h3>Remarks</h3>
-            <p>{{ requirement.notes }}</p>
-          </article>
-        </div>
+            <!-- Acceptance criteria and impacted modules -->
+            <div class="detail-columns">
+              <article class="info-panel">
+                <h3>Acceptance criteria</h3>
+                <ul class="checklist">
+                  <li v-for="item in requirement.acceptanceCriteria" :key="item">
+                    <i class="pi pi-check-circle" />
+                    <span>{{ item }}</span>
+                  </li>
+                </ul>
+              </article>
+
+              <article class="info-panel">
+                <h3>Impacted modules</h3>
+                <div class="chip-row">
+                  <Chip v-for="module in requirement.impactedModules" :key="module" :label="module" />
+                </div>
+
+                <Divider />
+
+                <h3>Remarks</h3>
+                <p>{{ requirement.notes }}</p>
+              </article>
+            </div>
+          </TabPanel>
+
+          <TabPanel value="tests" header="Tests to perform">
+            <div class="tests-placeholder">
+              <i class="pi pi-inbox" />
+              <p>No tests defined yet</p>
+            </div>
+          </TabPanel>
+        </TabView>
       </template>
     </Card>
   </section>
@@ -316,6 +329,25 @@ const prioritySeverity = (priority: Requirement['priority']) => {
   margin-top: 0.75rem;
 }
 
+.tests-placeholder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+  padding: 2rem 1rem;
+  color: #9ca3af;
+}
+
+.tests-placeholder i {
+  font-size: 2.5rem;
+}
+
+:deep(.p-tabview-panels) {
+  padding-left: 0;
+  padding-right: 0;
+}
+
 @media (max-width: 1120px) {
   .detail-grid,
   .detail-columns {