add fields for requirement

kwa-ui/src/components/RequirementDetail.vue

@@ -3,7 +3,6 @@ import Button from 'primevue/button'
 import Card from 'primevue/card'
 import Chip from 'primevue/chip'
 import Divider from 'primevue/divider'
-import ProgressBar from 'primevue/progressbar'
 import Tag from 'primevue/tag'
 
 export interface Requirement {
@@ -21,6 +20,9 @@ export interface Requirement {
   impactedModules: string[]
   blockers: string[]
   notes: string
+  stakeholders: string[]
+  flexibility: string
+  tolerances: string
 }
 
 interface Props {
@@ -74,42 +76,56 @@ const prioritySeverity = (priority: Requirement['priority']) => {
       </template>
 
       <template #content>
-        <!-- Status and priority badges -->
+        <!-- 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 />
-          <Tag value="Target release" severity="contrast" />
         </div>
 
-        <!-- Requirement description -->
+        <!-- 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 />
 
-        <!-- Context and commitment section -->
+        <!-- Key attributes: Author, Stakeholders, Priority, Flexibility -->
         <div class="detail-grid">
           <article class="info-panel">
-            <h3>Context</h3>
-            <p>{{ requirement.rationale }}</p>
+            <h3>Author</h3>
+            <p>{{ requirement.owner }}</p>
           </article>
 
-          <article class="info-panel info-panel--accent">
-            <h3>Commitment</h3>
-            <dl>
-              <div>
-                <dt>Due date</dt>
-                <dd>{{ requirement.dueDate }}</dd>
-              </div>
-              <div>
-                <dt>Progress</dt>
-                <dd>{{ requirement.progress }}%</dd>
-              </div>
-            </dl>
-            <ProgressBar :value="requirement.progress" />
+          <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>
 
-        <!-- Acceptance criteria and modules section -->
+        <Divider />
+
+        <!-- Acceptance criteria and impacted modules -->
         <div class="detail-columns">
           <article class="info-panel">
             <h3>Acceptance criteria</h3>
@@ -129,21 +145,10 @@ const prioritySeverity = (priority: Requirement['priority']) => {
 
             <Divider />
 
-            <h3>Notes</h3>
+            <h3>Remarks</h3>
             <p>{{ requirement.notes }}</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>
       </template>
     </Card>
   </section>
@@ -221,7 +226,7 @@ const prioritySeverity = (priority: Requirement['priority']) => {
 }
 
 .detail-grid {
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+  grid-template-columns: repeat(4, minmax(0, 1fr));
   margin-top: 0.75rem;
 }
 

kwa-ui/src/stores/requirements.ts

@@ -19,6 +19,9 @@ export interface Requirement {
   impactedModules: string[]
   blockers: string[]
   notes: string
+  stakeholders: string[]
+  flexibility: string
+  tolerances: string
 }
 
 export const useRequirementsStore = defineStore('requirements', () => {
@@ -44,6 +47,9 @@ export const useRequirementsStore = defineStore('requirements', () => {
       impactedModules: ['Backlog', 'Tests', 'Audit', 'Reporting'],
       blockers: [],
       notes: 'Plan a PDF export for milestone reviews.',
+      stakeholders: ['QA Team', 'Product Owner', 'Tech Lead'],
+      flexibility: 'Low—cannot alter core traceability chain without major rework',
+      tolerances: 'Maximum 5% of requirements can have incomplete artifact links',
     },
     {
       id: 102,
@@ -66,6 +72,9 @@ export const useRequirementsStore = defineStore('requirements', () => {
       impactedModules: ['Workflow', 'Detail', 'Dashboard'],
       blockers: ['Final label approval from the Product Owner'],
       notes: 'Can be connected to workflow transitions later.',
+      stakeholders: ['Product Managers', 'Business Analysts', 'UI Team'],
+      flexibility: 'Medium—limited room for additional statuses, current labels are firm',
+      tolerances: 'Terminology must match approved glossary within 95% confidence',
     },
     {
       id: 103,
@@ -88,6 +97,9 @@ export const useRequirementsStore = defineStore('requirements', () => {
       impactedModules: ['Sidebar', 'Search', 'Performance'],
       blockers: ['Definition of the priority search criteria'],
       notes: 'To be extended with type and batch filters.',
+      stakeholders: ['End Users', 'Performance Team'],
+      flexibility: 'High—can adapt search algorithm and UI patterns to user feedback',
+      tolerances: 'Search response time must stay under 200ms for 99% of queries',
     },
     {
       id: 104,
@@ -110,6 +122,9 @@ export const useRequirementsStore = defineStore('requirements', () => {
       impactedModules: ['Release', 'Roadmap', 'Governance'],
       blockers: ['Architecture decision pending'],
       notes: 'To be linked to a milestone calendar.',
+      stakeholders: ['Release Manager', 'Governance Board', 'Architects'],
+      flexibility: 'Low—release scope is constrained by business commitments',
+      tolerances: '100% of deliverables must link to a release before code freeze',
     },
   ])