appends tests tab

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,6 +78,8 @@ const prioritySeverity = (priority: Requirement['priority']) => {
       </template>
 
       <template #content>
+        <TabView>
+          <TabPanel value="details" header="Details">
             <!-- Status and priority tags -->
             <div class="detail-badges">
               <Tag :value="requirement.status" :severity="statusSeverity(requirement.status)" />
@@ -149,6 +153,15 @@ const prioritySeverity = (priority: Requirement['priority']) => {
                 <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 {