@ozdao/martyrs 0.2.602 → 0.2.604

package/src/modules/governance/views/components/partials/LinkedEntityCard.vue

@@ -1,13 +1,16 @@
 <script setup>
 import { defineProps, computed } from 'vue';
+import { useRoute } from 'vue-router';
 import TaskStatusBadge from './TaskStatusBadge.vue';
 import { IconOpenLink } from '@martyrs/src/modules/icons/icons.client.js';
 
+const route = useRoute();
+
 const props = defineProps({
   entityType: {
     type: String,
     required: true,
-    validator: (value) => ['initiative', 'milestone', 'task'].includes(value)
+    validator: (value) => ['initiative', 'sprint', 'task', 'voting'].includes(value)
   },
   entityData: {
     type: Object,
@@ -19,23 +22,28 @@ const entityConfig = {
   initiative: {
     icon: 'target',
     label: 'Initiative',
-    path: (id) => ({ name: 'Initiative', params: { id } }),
+    path: (id) => `/governance/initiatives/${id}`,
   },
-  milestone: {
+  sprint: {
     icon: 'layers',
-    label: 'Milestone',
-    path: (id) => ({ name: 'Milestone', params: { id } }),
+    label: 'Sprint',
+    path: (id) => `/governance/initiatives/${route.params.id}/sprints/${id}`,
   },
   task: {
     icon: 'checksquare',
     label: 'Task',
-    path: (id) => ({ name: 'Task', params: { id } }),
+    path: (id) => `/governance/initiatives/${route.params.id}/tasks/${id}`,
+  },
+  voting: {
+    icon: 'send',
+    label: 'Voting',
+    path: (id) => `/governance/initiatives/${route.params.id}/votings/${id}`,
   },
 };
 
 const config = computed(() => entityConfig[props.entityType]);
 const displayName = computed(() => props.entityData.title || props.entityData.name || 'Untitled');
-const routePath = computed(() => config.value.path(props.entityData.id));
+const routePath = computed(() => config.value.path(props.entityData._id));
 </script>
 
 <template>
@@ -46,23 +54,27 @@ const routePath = computed(() => config.value.path(props.entityData.id));
     <div class="flex flex-justify-between flex-align-start">
       <div class="flex flex-align-start gap-small flex-child-1">
         <div class="br-black-transp-10 br-1px radius-medium pd-thin hover:bg-main-small ease-cubic-in-out">
-          <svg v-if="config.icon === 'target'" class="i-semi t-grey hover:t-main" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <svg v-if="config.icon === 'target'" class="i-semi t-dark hover:t-main" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
             <circle cx="12" cy="12" r="10"/>
             <circle cx="12" cy="12" r="6"/>
             <circle cx="12" cy="12" r="2"/>
           </svg>
-          <svg v-else-if="config.icon === 'layers'" class="i-semi t-grey hover:t-main" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <svg v-else-if="config.icon === 'layers'" class="i-semi t-dark hover:t-main" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
             <polygon points="12 2 2 7 12 12 22 7 12 2"/>
             <polyline points="2 17 12 22 22 17"/>
             <polyline points="2 12 12 17 22 12"/>
           </svg>
-          <svg v-else class="i-semi t-grey hover:t-main" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <svg v-else-if="config.icon === 'send'" class="i-semi t-dark hover:t-main" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <line x1="22" y1="2" x2="11" y2="13"/>
+            <polygon points="22 2 15 22 11 13 2 9 22 2"/>
+          </svg>
+          <svg v-else class="i-semi t-dark hover:t-main" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
             <polyline points="9 11 12 14 22 4"/>
             <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/>
           </svg>
         </div>
         <div class="flex-child-1 min-w-0">
-          <div class="p-micro t-grey mn-b-small">{{ config.label }}</div>
+          <div class="p-micro t-dark mn-b-small">{{ config.label }}</div>
           <h4 class="p-small fw-medium mn-b-small truncate">{{ displayName }}</h4>
           <TaskStatusBadge :status="entityData.status" />
         </div>

package/src/modules/governance/views/components/partials/TaskStatusBadge.vue

@@ -12,7 +12,7 @@ const statusConfig = {
   proposed: { label: 'Proposed', color: 'br-black-transp-10 br-1px' },
   voting: { label: 'Voting', color: 'bg-main-small t-main' },
   not_started: { label: 'Not Started', color: 'bg-fourth-small t-fourth' },
-  in_progress: { label: 'In Progress', color: 'bg-second-small t-grey' },
+  in_progress: { label: 'In Progress', color: 'bg-second-small t-dark' },
   review: { label: 'Review', color: 'bg-fifth-small t-fifth' },
   completed: { label: 'Completed', color: 'bg-green-nice t-white' },
   blocked: { label: 'Blocked', color: 'bg-red-nice t-white' },

package/src/modules/governance/views/components/partials/VoteForm.vue

@@ -33,7 +33,7 @@ const handleSubmit = (e) => {
           <svg :class="`w-8r h-8r mn-b-thin ${selectedVote === 'yes' ? 'fill-green-nice' : 'fill-grey'}`" viewBox="0 0 24 24" fill="currentColor">
             <path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"/>
           </svg>
-          <span :class="`fw-medium ${selectedVote === 'yes' ? 't-green-nice' : 't-grey'}`">
+          <span :class="`fw-medium ${selectedVote === 'yes' ? 't-green-nice' : 't-dark'}`">
             Yes
           </span>
         </button>
@@ -50,7 +50,7 @@ const handleSubmit = (e) => {
           <svg :class="`w-8r h-8r mn-b-thin ${selectedVote === 'no' ? 'fill-red-nice' : 'fill-grey'}`" viewBox="0 0 24 24" fill="currentColor">
             <path d="M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17"/>
           </svg>
-          <span :class="`fw-medium ${selectedVote === 'no' ? 't-red-nice' : 't-grey'}`">
+          <span :class="`fw-medium ${selectedVote === 'no' ? 't-red-nice' : 't-dark'}`">
             No
           </span>
         </button>
@@ -67,7 +67,7 @@ const handleSubmit = (e) => {
           <svg :class="`w-8r h-8r mn-b-thin ${selectedVote === 'abstain' ? 'fill-grey' : 'fill-grey'}`" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
             <line x1="5" y1="12" x2="19" y2="12"/>
           </svg>
-          <span :class="`fw-medium ${selectedVote === 'abstain' ? 't-grey' : 't-grey'}`">
+          <span :class="`fw-medium ${selectedVote === 'abstain' ? 't-dark' : 't-dark'}`">
             Abstain
           </span>
         </button>

package/src/modules/governance/views/components/partials/VotingResults.vue

@@ -1,7 +1,10 @@
 <script setup>
 import { defineProps, computed } from 'vue';
+import { useGlobalMixins } from '@martyrs/src/modules/core/views/mixins/mixins.js';
 import { IconCheckmark, IconCross, IconSend } from '@martyrs/src/modules/icons/icons.client.js';
 
+const { formatDate } = useGlobalMixins();
+
 const props = defineProps({
   results: {
     type: Object,
@@ -17,21 +20,12 @@ const { totalVotes, yesVotes, noVotes, abstainVotes, percentageYes, percentageNo
 const percentageAbstain = computed(() => 100 - percentageYes - percentageNo);
 const thresholdMet = computed(() => percentageYes >= threshold * 100);
 
-const formatDate = (dateString) => {
-  return new Date(dateString).toLocaleString('en-US', {
-    month: 'short',
-    day: 'numeric',
-    hour: '2-digit',
-    minute: '2-digit',
-  });
-};
-
 const getVoteColor = (vote) => {
   switch (vote) {
     case 'yes': return 't-green-nice';
     case 'no': return 't-red-nice';
-    case 'abstain': return 't-grey';
-    default: return 't-grey';
+    case 'abstain': return 't-dark';
+    default: return 't-dark';
   }
 };
 </script>
@@ -50,10 +44,10 @@ const getVoteColor = (vote) => {
 
       <div class="br-black-transp-10 br-1px radius-medium pd-medium mn-b-medium">
         <div class="flex flex-justify-between flex-v-center mn-b-small">
-          <span class="p-small fw-medium t-grey">Total Votes</span>
+          <span class="p-small fw-medium t-dark">Total Votes</span>
           <span class="h2 fw-medium">{{ totalVotes }}</span>
         </div>
-        <div class="p-small t-grey">
+        <div class="p-small t-dark">
           Threshold: {{ (threshold * 100).toFixed(0) }}% approval required
         </div>
       </div>
@@ -85,15 +79,15 @@ const getVoteColor = (vote) => {
       <div class="cols-3 gap-regular mn-t-medium">
         <div class="t-center">
           <div class="h2 fw-medium t-green-nice">{{ yesVotes }}</div>
-          <div class="p-small t-grey">Yes ({{ percentageYes.toFixed(1) }}%)</div>
+          <div class="p-small t-dark">Yes ({{ percentageYes.toFixed(1) }}%)</div>
         </div>
         <div class="t-center">
           <div class="h2 fw-medium t-red-nice">{{ noVotes }}</div>
-          <div class="p-small t-grey">No ({{ percentageNo.toFixed(1) }}%)</div>
+          <div class="p-small t-dark">No ({{ percentageNo.toFixed(1) }}%)</div>
         </div>
         <div class="t-center">
-          <div class="h2 fw-medium t-grey">{{ abstainVotes }}</div>
-          <div class="p-small t-grey">Abstain ({{ percentageAbstain.toFixed(1) }}%)</div>
+          <div class="h2 fw-medium t-dark">{{ abstainVotes }}</div>
+          <div class="p-small t-dark">Abstain ({{ percentageAbstain.toFixed(1) }}%)</div>
         </div>
       </div>
     </div>
@@ -112,14 +106,14 @@ const getVoteColor = (vote) => {
               </div>
               <div>
                 <div class="p-regular fw-medium">{{ vote.userName }}</div>
-                <div class="p-micro t-grey">{{ formatDate(vote.createdAt) }}</div>
+                <div class="p-micro t-dark">{{ formatDate(vote.createdAt, { dayTime: true }) }}</div>
               </div>
             </div>
             <span :class="`fw-medium t-capitalize ${getVoteColor(vote.vote)}`">
               {{ vote.vote }}
             </span>
           </div>
-          <p v-if="vote.comment" class="p-small t-grey mn-l-13r">{{ vote.comment }}</p>
+          <p v-if="vote.comment" class="p-small t-dark mn-l-13r">{{ vote.comment }}</p>
         </div>
       </div>
     </div>

package/src/modules/governance/views/components/sections/FormInitiativeDetails.vue

@@ -13,25 +13,423 @@ const emit = defineEmits(['update:modelValue']);
 const updateField = (field, value) => {
   emit('update:modelValue', { ...props.modelValue, [field]: value });
 };
+
+const updateNestedField = (parent, field, value) => {
+  const current = props.modelValue[parent] || {};
+  emit('update:modelValue', {
+    ...props.modelValue,
+    [parent]: { ...current, [field]: value }
+  });
+};
+
+const addItem = (arrayField, template) => {
+  const current = Array.isArray(props.modelValue[arrayField]) ? props.modelValue[arrayField] : [];
+  updateField(arrayField, [...current, { ...template }]);
+};
+
+const removeItem = (arrayField, index) => {
+  const current = [...props.modelValue[arrayField]];
+  current.splice(index, 1);
+  updateField(arrayField, current);
+};
+
+const updateArrayItem = (arrayField, index, field, value) => {
+  const current = [...props.modelValue[arrayField]];
+  current[index] = { ...current[index], [field]: value };
+  updateField(arrayField, current);
+};
+
+const addLinkItem = (category) => {
+  const links = props.modelValue.links || {};
+  const current = Array.isArray(links[category]) ? links[category] : [];
+  updateNestedField('links', category, [...current, '']);
+};
+
+const removeLinkItem = (category, index) => {
+  const links = props.modelValue.links || {};
+  const current = [...links[category]];
+  current.splice(index, 1);
+  updateNestedField('links', category, current);
+};
+
+const updateLinkItem = (category, index, value) => {
+  const links = props.modelValue.links || {};
+  const current = [...links[category]];
+  current[index] = value;
+  updateNestedField('links', category, current);
+};
+
+const addSuccessCriteria = () => {
+  const current = Array.isArray(props.modelValue.successCriteria) ? props.modelValue.successCriteria : [];
+  updateField('successCriteria', [...current, '']);
+};
+
+const removeSuccessCriteria = (index) => {
+  const current = [...props.modelValue.successCriteria];
+  current.splice(index, 1);
+  updateField('successCriteria', current);
+};
+
+const updateSuccessCriteria = (index, value) => {
+  const current = [...props.modelValue.successCriteria];
+  current[index] = value;
+  updateField('successCriteria', current);
+};
+
+const updateMetricsField = (field, value) => {
+  const current = props.modelValue.metrics || {};
+  updateField('metrics', { ...current, [field]: value });
+};
+
+const linkCategories = [
+  { key: 'documentation', label: 'Documentation' },
+  { key: 'design', label: 'Design' },
+  { key: 'cicd', label: 'CI/CD' },
+  { key: 'monitoring', label: 'Monitoring' },
+  { key: 'analytics', label: 'Analytics' },
+];
 </script>
 
 <template>
-  <form>
-    <div>
-      <label for="name">Name:</label>
-      <input id="name" v-model="modelValue.name" @input="updateField('name', $event.target.value)" />
+  <form @submit.prevent>
+    <!-- Basic Info -->
+    <div class="bg-light radius-semi pd-semi mn-b-semi">
+      <h3 class="p-semi fw-medium mn-b-medium">Basic Info</h3>
+      <div class="cols-2 gap-regular mn-b-regular">
+        <div>
+          <label class="p-small fw-medium d-block mn-b-micro">Name *</label>
+          <input
+            :value="modelValue.name"
+            @input="updateField('name', $event.target.value)"
+            class="w-100 pd-small pd-x-medium radius-medium br-1px br-black-transp-10 p-regular"
+            placeholder="Initiative name"
+          />
+        </div>
+        <div>
+          <label class="p-small fw-medium d-block mn-b-micro">Title</label>
+          <input
+            :value="modelValue.title"
+            @input="updateField('title', $event.target.value)"
+            class="w-100 pd-small pd-x-medium radius-medium br-1px br-black-transp-10 p-regular"
+            placeholder="Display title"
+          />
+        </div>
+      </div>
+      <div class="mn-b-regular">
+        <label class="p-small fw-medium d-block mn-b-micro">Description</label>
+        <textarea
+          :value="modelValue.description"
+          @input="updateField('description', $event.target.value)"
+          class="w-100 pd-small pd-x-medium radius-medium br-1px br-black-transp-10 p-regular"
+          rows="3"
+          placeholder="Short description"
+        ></textarea>
+      </div>
+      <div class="cols-3 gap-regular mn-b-regular">
+        <div>
+          <label class="p-small fw-medium d-block mn-b-micro">Status</label>
+          <select
+            :value="modelValue.status"
+            @change="updateField('status', $event.target.value)"
+            class="w-100 pd-small pd-x-medium radius-medium br-1px br-black-transp-10 p-regular"
+          >
+            <option value="draft">Draft</option>
+            <option value="active">Active</option>
+            <option value="completed">Completed</option>
+            <option value="archived">Archived</option>
+          </select>
+        </div>
+        <div>
+          <label class="p-small fw-medium d-block mn-b-micro">URL</label>
+          <input
+            :value="modelValue.url"
+            @input="updateField('url', $event.target.value)"
+            class="w-100 pd-small pd-x-medium radius-medium br-1px br-black-transp-10 p-regular"
+            placeholder="https://..."
+          />
+        </div>
+        <div>
+          <label class="p-small fw-medium d-block mn-b-micro">Client</label>
+          <input
+            :value="modelValue.client"
+            @input="updateField('client', $event.target.value)"
+            class="w-100 pd-small pd-x-medium radius-medium br-1px br-black-transp-10 p-regular"
+            placeholder="Client name"
+          />
+        </div>
+      </div>
+      <div>
+        <label class="p-small fw-medium d-block mn-b-micro">Cover URL</label>
+        <input
+          :value="typeof modelValue.cover === 'string' ? modelValue.cover : (modelValue.cover?.url || '')"
+          @input="updateField('cover', $event.target.value)"
+          class="w-100 pd-small pd-x-medium radius-medium br-1px br-black-transp-10 p-regular"
+          placeholder="https://example.com/cover.jpg"
+        />
+      </div>
+    </div>
+
+    <!-- Detailed Description -->
+    <div class="bg-light radius-semi pd-semi mn-b-semi">
+      <h3 class="p-semi fw-medium mn-b-medium">Detailed Description</h3>
+      <div class="mn-b-regular">
+        <label class="p-small fw-medium d-block mn-b-micro">Full Description</label>
+        <textarea
+          :value="modelValue.fullDescription"
+          @input="updateField('fullDescription', $event.target.value)"
+          class="w-100 pd-small pd-x-medium radius-medium br-1px br-black-transp-10 p-regular"
+          rows="5"
+          placeholder="Detailed initiative description..."
+        ></textarea>
+      </div>
+      <div class="mn-b-regular">
+        <label class="p-small fw-medium d-block mn-b-micro">Value Proposition</label>
+        <textarea
+          :value="modelValue.valueProposition"
+          @input="updateField('valueProposition', $event.target.value)"
+          class="w-100 pd-small pd-x-medium radius-medium br-1px br-black-transp-10 p-regular"
+          rows="3"
+          placeholder="What value does this initiative provide?"
+        ></textarea>
+      </div>
+      <div class="mn-b-regular">
+        <label class="p-small fw-medium d-block mn-b-micro">Target Audience</label>
+        <textarea
+          :value="modelValue.targetAudience"
+          @input="updateField('targetAudience', $event.target.value)"
+          class="w-100 pd-small pd-x-medium radius-medium br-1px br-black-transp-10 p-regular"
+          rows="2"
+          placeholder="Who is this for?"
+        ></textarea>
+      </div>
+      <div>
+        <div class="flex flex-justify-between flex-v-center mn-b-micro">
+          <label class="p-small fw-medium">Success Criteria</label>
+          <button type="button" @click="addSuccessCriteria" class="p-small t-main hover:t-main-semi fw-medium">+ Add</button>
+        </div>
+        <div v-for="(criteria, index) in (modelValue.successCriteria || [])" :key="index" class="flex gap-small mn-b-small">
+          <input
+            :value="criteria"
+            @input="updateSuccessCriteria(index, $event.target.value)"
+            class="flex-child-1 pd-small pd-x-medium radius-medium br-1px br-black-transp-10 p-regular"
+            placeholder="Success criterion"
+          />
+          <button type="button" @click="removeSuccessCriteria(index)" class="p-small t-red hover:t-red-semi fw-medium pd-x-small">Remove</button>
+        </div>
+      </div>
     </div>
-    <div>
-      <label for="description">Description:</label>
-      <textarea id="description" v-model="modelValue.description" @input="updateField('description', $event.target.value)"></textarea>
+
+    <!-- Repositories -->
+    <div class="bg-light radius-semi pd-semi mn-b-semi">
+      <div class="flex flex-justify-between flex-v-center mn-b-medium">
+        <h3 class="p-semi fw-medium">Repositories</h3>
+        <button type="button" @click="addItem('repositories', { name: '', path: '' })" class="p-small t-main hover:t-main-semi fw-medium">+ Add Repository</button>
+      </div>
+      <div v-for="(repo, index) in (modelValue.repositories || [])" :key="index" class="flex gap-small mn-b-small flex-v-center">
+        <input
+          :value="repo.name"
+          @input="updateArrayItem('repositories', index, 'name', $event.target.value)"
+          class="pd-small pd-x-medium radius-medium br-1px br-black-transp-10 p-regular"
+          placeholder="Repository name"
+          style="width: 30%;"
+        />
+        <input
+          :value="repo.path"
+          @input="updateArrayItem('repositories', index, 'path', $event.target.value)"
+          class="flex-child-1 pd-small pd-x-medium radius-medium br-1px br-black-transp-10 p-regular"
+          placeholder="org/repo-name"
+        />
+        <button type="button" @click="removeItem('repositories', index)" class="p-small t-red hover:t-red-semi fw-medium pd-x-small">Remove</button>
+      </div>
+      <p v-if="!(modelValue.repositories || []).length" class="p-small t-dark">No repositories added</p>
+    </div>
+
+    <!-- Links -->
+    <div class="bg-light radius-semi pd-semi mn-b-semi">
+      <h3 class="p-semi fw-medium mn-b-medium">Links</h3>
+      <div v-for="cat in linkCategories" :key="cat.key" class="mn-b-regular">
+        <div class="flex flex-justify-between flex-v-center mn-b-micro">
+          <label class="p-small fw-medium">{{ cat.label }}</label>
+          <button type="button" @click="addLinkItem(cat.key)" class="p-small t-main hover:t-main-semi fw-medium">+ Add</button>
+        </div>
+        <div v-for="(link, index) in (modelValue.links?.[cat.key] || [])" :key="index" class="flex gap-small mn-b-small">
+          <input
+            :value="link"
+            @input="updateLinkItem(cat.key, index, $event.target.value)"
+            class="flex-child-1 pd-small pd-x-medium radius-medium br-1px br-black-transp-10 p-regular"
+            placeholder="https://..."
+          />
+          <button type="button" @click="removeLinkItem(cat.key, index)" class="p-small t-red hover:t-red-semi fw-medium pd-x-small">Remove</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Environments -->
+    <div class="bg-light radius-semi pd-semi mn-b-semi">
+      <div class="flex flex-justify-between flex-v-center mn-b-medium">
+        <h3 class="p-semi fw-medium">Environments</h3>
+        <button type="button" @click="addItem('environments', { name: '', url: '', status: 'healthy', version: '' })" class="p-small t-main hover:t-main-semi fw-medium">+ Add Environment</button>
+      </div>
+      <div v-for="(env, index) in (modelValue.environments || [])" :key="index" class="flex gap-small mn-b-small flex-v-center">
+        <input
+          :value="env.name"
+          @input="updateArrayItem('environments', index, 'name', $event.target.value)"
+          class="pd-small pd-x-medium radius-medium br-1px br-black-transp-10 p-regular"
+          placeholder="Environment name"
+          style="width: 20%;"
+        />
+        <input
+          :value="env.url"
+          @input="updateArrayItem('environments', index, 'url', $event.target.value)"
+          class="flex-child-1 pd-small pd-x-medium radius-medium br-1px br-black-transp-10 p-regular"
+          placeholder="https://..."
+        />
+        <select
+          :value="env.status"
+          @change="updateArrayItem('environments', index, 'status', $event.target.value)"
+          class="pd-small pd-x-medium radius-medium br-1px br-black-transp-10 p-regular"
+          style="width: 15%;"
+        >
+          <option value="healthy">Healthy</option>
+          <option value="degraded">Degraded</option>
+          <option value="down">Down</option>
+        </select>
+        <input
+          :value="env.version"
+          @input="updateArrayItem('environments', index, 'version', $event.target.value)"
+          class="pd-small pd-x-medium radius-medium br-1px br-black-transp-10 p-regular"
+          placeholder="v1.0.0"
+          style="width: 15%;"
+        />
+        <button type="button" @click="removeItem('environments', index)" class="p-small t-red hover:t-red-semi fw-medium pd-x-small">Remove</button>
+      </div>
+      <p v-if="!(modelValue.environments || []).length" class="p-small t-dark">No environments added</p>
+    </div>
+
+    <!-- Releases -->
+    <div class="bg-light radius-semi pd-semi mn-b-semi">
+      <div class="flex flex-justify-between flex-v-center mn-b-medium">
+        <h3 class="p-semi fw-medium">Releases</h3>
+        <button type="button" @click="addItem('releases', { version: '', date: '', notes: '', status: 'planned' })" class="p-small t-main hover:t-main-semi fw-medium">+ Add Release</button>
+      </div>
+      <div v-for="(release, index) in (modelValue.releases || [])" :key="index" class="br-1px br-black-transp-10 radius-medium pd-medium mn-b-small">
+        <div class="flex gap-small mn-b-small">
+          <input
+            :value="release.version"
+            @input="updateArrayItem('releases', index, 'version', $event.target.value)"
+            class="pd-small pd-x-medium radius-medium br-1px br-black-transp-10 p-regular"
+            placeholder="v1.0.0"
+            style="width: 25%;"
+          />
+          <input
+            :value="release.date"
+            @input="updateArrayItem('releases', index, 'date', $event.target.value)"
+            type="date"
+            class="pd-small pd-x-medium radius-medium br-1px br-black-transp-10 p-regular"
+            style="width: 25%;"
+          />
+          <select
+            :value="release.status"
+            @change="updateArrayItem('releases', index, 'status', $event.target.value)"
+            class="pd-small pd-x-medium radius-medium br-1px br-black-transp-10 p-regular"
+            style="width: 25%;"
+          >
+            <option value="planned">Planned</option>
+            <option value="in-progress">In Progress</option>
+            <option value="released">Released</option>
+            <option value="rolled-back">Rolled Back</option>
+          </select>
+          <button type="button" @click="removeItem('releases', index)" class="p-small t-red hover:t-red-semi fw-medium pd-x-small">Remove</button>
+        </div>
+        <textarea
+          :value="release.notes"
+          @input="updateArrayItem('releases', index, 'notes', $event.target.value)"
+          class="w-100 pd-small pd-x-medium radius-medium br-1px br-black-transp-10 p-regular"
+          rows="2"
+          placeholder="Release notes..."
+        ></textarea>
+      </div>
+      <p v-if="!(modelValue.releases || []).length" class="p-small t-dark">No releases added</p>
     </div>
-    <div>
-      <label for="status">Status:</label>
-      <select id="status" v-model="modelValue.status" @change="updateField('status', $event.target.value)">
-        <option value="draft">Draft</option>
-        <option value="active">Active</option>
-        <option value="completed">Completed</option>
-      </select>
+
+    <!-- Metrics -->
+    <div class="bg-light radius-semi pd-semi mn-b-semi">
+      <h3 class="p-semi fw-medium mn-b-medium">Metrics</h3>
+      <div class="cols-3 gap-regular mn-b-regular">
+        <div>
+          <label class="p-small fw-medium d-block mn-b-micro">Task Progress (%)</label>
+          <input
+            :value="modelValue.metrics?.taskProgress"
+            @input="updateMetricsField('taskProgress', Number($event.target.value))"
+            type="number"
+            min="0"
+            max="100"
+            class="w-100 pd-small pd-x-medium radius-medium br-1px br-black-transp-10 p-regular"
+            placeholder="0"
+          />
+        </div>
+        <div>
+          <label class="p-small fw-medium d-block mn-b-micro">Sprint Progress (%)</label>
+          <input
+            :value="modelValue.metrics?.sprintProgress"
+            @input="updateMetricsField('sprintProgress', Number($event.target.value))"
+            type="number"
+            min="0"
+            max="100"
+            class="w-100 pd-small pd-x-medium radius-medium br-1px br-black-transp-10 p-regular"
+            placeholder="0"
+          />
+        </div>
+        <div>
+          <label class="p-small fw-medium d-block mn-b-micro">Risk Index</label>
+          <select
+            :value="modelValue.metrics?.riskIndex"
+            @change="updateMetricsField('riskIndex', $event.target.value)"
+            class="w-100 pd-small pd-x-medium radius-medium br-1px br-black-transp-10 p-regular"
+          >
+            <option value="">Select...</option>
+            <option value="low">Low</option>
+            <option value="medium">Medium</option>
+            <option value="high">High</option>
+          </select>
+        </div>
+      </div>
+      <div class="cols-3 gap-regular">
+        <div>
+          <label class="p-small fw-medium d-block mn-b-micro">Availability Index (%)</label>
+          <input
+            :value="modelValue.metrics?.availabilityIndex"
+            @input="updateMetricsField('availabilityIndex', Number($event.target.value))"
+            type="number"
+            min="0"
+            max="100"
+            class="w-100 pd-small pd-x-medium radius-medium br-1px br-black-transp-10 p-regular"
+            placeholder="0"
+          />
+        </div>
+        <div>
+          <label class="p-small fw-medium d-block mn-b-micro">Active Users</label>
+          <input
+            :value="modelValue.metrics?.activeUsers"
+            @input="updateMetricsField('activeUsers', Number($event.target.value))"
+            type="number"
+            min="0"
+            class="w-100 pd-small pd-x-medium radius-medium br-1px br-black-transp-10 p-regular"
+            placeholder="0"
+          />
+        </div>
+        <div>
+          <label class="p-small fw-medium d-block mn-b-micro">Performance</label>
+          <input
+            :value="modelValue.metrics?.performance"
+            @input="updateMetricsField('performance', Number($event.target.value))"
+            type="number"
+            min="0"
+            class="w-100 pd-small pd-x-medium radius-medium br-1px br-black-transp-10 p-regular"
+            placeholder="0"
+          />
+        </div>
+      </div>
     </div>
   </form>
-</template>
+</template>