@ozdao/martyrs 0.2.602 → 0.2.604

package/src/modules/governance/views/components/pages/SprintCreate.vue

@@ -0,0 +1,55 @@
+<script setup>
+import { ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { sprintsActions } from '../../store/sprints';
+import FormSprintDetails from '../sections/FormSprintDetails.vue';
+import { IconArrow } from '@martyrs/src/modules/icons/icons.client.js';
+
+const route = useRoute();
+const router = useRouter();
+
+const newSprint = ref({
+  name: '',
+  description: '',
+  status: 'not_started',
+  startDate: null,
+  dueDate: null,
+  progress: 0,
+  owner: '',
+  initiative: '',
+  priority: 'medium',
+  tags: [],
+});
+
+const creating = ref(false);
+
+const createSprint = async () => {
+  if (!newSprint.value.name) return;
+  creating.value = true;
+  try {
+    const response = await sprintsActions.createSprint(newSprint.value);
+    router.push(`/governance/initiatives/${route.params.id}/sprints/${response._id || response.id}`);
+  } catch (e) {
+    creating.value = false;
+  }
+};
+</script>
+
+<template>
+  <div class="pd-medium pd-y-semi">
+    <h1 class="h2 fw-medium mn-b-semi">Create New Sprint</h1>
+
+    <FormSprintDetails v-model="newSprint" />
+
+    <div class="flex flex-justify-end mn-t-semi">
+      <button
+        @click="createSprint"
+        :disabled="!newSprint.name || creating"
+        class="bg-main hover:bg-main-semi t-white fw-medium pd-medium pd-x-semi radius-medium p-regular ease-cubic-in-out"
+        :class="{ 'o-50': !newSprint.name || creating }"
+      >
+        {{ creating ? 'Creating...' : 'Create Sprint' }}
+      </button>
+    </div>
+  </div>
+</template>

package/src/modules/governance/views/components/pages/Task.vue

@@ -1,18 +1,30 @@
 <script setup>
-import { ref, computed } from 'vue';
+import { ref, computed, onMounted } from 'vue';
 import { useRoute } from 'vue-router';
 import TaskStatusBadge from '../partials/TaskStatusBadge.vue';
-import { mockTasks, mockInitiatives, mockMilestones, mockVotings } from '../../../data/mockData';
+import { tasksActions, tasksState } from '../../store/tasks';
+import { initiativesActions, initiativesState } from '../../store/initiatives';
+import { sprintsActions, sprintsState } from '../../store/sprints';
+import { votingsActions, votingsState } from '../../store/votings';
+import { useGlobalMixins } from '@martyrs/src/modules/core/views/mixins/mixins.js';
 import { IconArrow, IconCheckmark, IconCross, IconProfile, IconCalendar, IconAttach, IconGroups, IconTime, IconLock, IconSend } from '@martyrs/src/modules/icons/icons.client.js';
 
+const { formatDate } = useGlobalMixins();
+
 const route = useRoute();
 const showAssignForm = ref(false);
 
-const task = computed(() => mockTasks.find(t => t.id === route.params.id));
-const initiative = computed(() => task.value ? mockInitiatives.find(i => i.id === task.value.initiativeId) : null);
-const milestone = computed(() => task.value ? mockMilestones.find(m => m.id === task.value.milestoneId) : null);
-const startVoting = computed(() => task.value?.startVotingId ? mockVotings.find(v => v.id === task.value.startVotingId) : null);
-const approvalVoting = computed(() => task.value?.approvalVotingId ? mockVotings.find(v => v.id === task.value.approvalVotingId) : null);
+const task = computed(() => tasksState.current);
+const initiative = computed(() => initiativesState.current);
+const sprint = computed(() => sprintsState.current);
+const startVoting = computed(() => {
+  if (!task.value?.proposedByVoting) return null;
+  return votingsState.all.find(v => v._id === task.value.proposedByVoting);
+});
+const approvalVoting = computed(() => {
+  if (!task.value?.completionVoting) return null;
+  return votingsState.all.find(v => v._id === task.value.completionVoting);
+});
 
 const priorityConfig = {
   low: { label: 'Low', color: 't-green-nice', bg: 'bg-green-small' },
@@ -22,14 +34,6 @@ const priorityConfig = {
 
 const priority = computed(() => task.value ? priorityConfig[task.value.priority] : null);
 
-const formatDate = (dateString) => {
-  return new Date(dateString).toLocaleDateString('en-US', {
-    month: 'long',
-    day: 'numeric',
-    year: 'numeric',
-  });
-};
-
 const handleAssignToMe = () => console.log('Assigning task to current user');
 const handleSubmitForReview = () => console.log('Submitting task for review');
 const handleCompleteTask = () => console.log('Completing task');
@@ -41,13 +45,24 @@ const handleMerge = () => console.log('Merging changes');
 const handleApproveBudget = () => console.log('Approving budget');
 const handleDeploy = () => console.log('Deploying changes');
 const handleVeto = () => console.log('Vetoing task');
+
+onMounted(async () => {
+  await tasksActions.getTaskById(route.params.taskId);
+  await votingsActions.getAllVotings();
+  if (tasksState.current?.initiative) {
+    await initiativesActions.getInitiativeById(tasksState.current.initiative);
+  }
+  if (tasksState.current?.sprint) {
+    await sprintsActions.getSprintById(tasksState.current.sprint);
+  }
+});
 </script>
 
 <template>
-  <div v-if="!task" class="min-h-100vh flex flex-center flex">
+  <div v-if="!task || !task._id" class="min-h-100vh flex flex-center flex">
     <div class="t-center">
       <h2 class="h2 fw-medium mn-b-small">Task not found</h2>
-      <router-link :to="{ name: 'Initiatives' }" class="t-main hover:t-main-semi">
+      <router-link to="/governance" class="t-main hover:t-main-semi">
         Back to initiatives
       </router-link>
     </div>
@@ -55,22 +70,13 @@ const handleVeto = () => console.log('Vetoing task');
 
   <div v-else class="min-h-100vh">
     <div class="pd-medium pd-y-semi">
-      <router-link
-        :to="milestone ? { name: 'Milestone', params: { id: milestone.id } } : { name: 'Initiative', params: { id: task.initiativeId } }"
-        class="flex flex-v-center t-grey hover:t-dark mn-b-semi ease-cubic-in-out"
-        style="text-decoration: none; width: fit-content;"
-      >
-        <IconArrow class="i-medium mn-r-thin" :rotation="180" :fill="'currentColor'" />
-        Back to {{ milestone ? 'milestone' : 'initiative' }}
-      </router-link>
-
       <div class="bg-light radius-semi o-hidden mn-b-semi">
         <div class="pd-semi">
           <div class="flex flex-justify-between flex-align-start mn-b-semi">
             <div class="flex-child-1">
               <div class="flex flex-v-center gap-small mn-b-small">
                 <TaskStatusBadge :status="task.status" />
-                <span :class="`pd-micro pd-x-small radius-extra p-micro fw-medium ${priority.bg} ${priority.color} flex flex-v-center gap-micro`">
+                <span v-if="priority" :class="`pd-micro pd-x-small radius-extra p-micro fw-medium ${priority.bg} ${priority.color} flex flex-v-center gap-micro`">
                   <svg class="i-medium" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                     <path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"/>
                     <line x1="4" y1="22" x2="4" y2="15"/>
@@ -83,28 +89,29 @@ const handleVeto = () => console.log('Vetoing task');
                 </span>
               </div>
               <h1 class="h1 fw-medium mn-b-medium">{{ task.title }}</h1>
-              <p class="p-semi t-grey t-line-relaxed" style="white-space: pre-wrap;">{{ task.description }}</p>
+              <p class="p-semi t-dark t-line-relaxed" style="white-space: pre-wrap;">{{ task.description }}</p>
             </div>
           </div>
 
-          <div class="br-t-1px br-black-transp-10 pd-x-semi">
+          <div>
             <div class="cols-2 mobile:cols-1 gap-small">
               <div class="flex flex-column gap-regular">
                 <div class="flex flex-align-start gap-small">
                   <IconProfile class="i-medium mn-t-micro" :fill="'rgb(var(--grey))'" />
                   <div class="flex-child-1">
-                    <div class="p-small t-grey mn-b-small">Assignee</div>
+                    <div class="p-small t-dark mn-b-small">Assignee</div>
                     <div v-if="task.assignee" class="flex flex-v-center gap-thin">
                       <img :src="task.assignee.avatar" :alt="task.assignee.name" class="i-medium radius-extra" />
                       <span class="fw-medium">{{ task.assignee.name }}</span>
                     </div>
+                    <div v-else-if="task.assignedTo" class="fw-medium">{{ task.assignedTo }}</div>
                     <div v-else class="flex flex-column gap-thin">
-                      <span class="t-grey">Unassigned</span>
+                      <span class="t-dark">Unassigned</span>
                       <div v-if="task.status === 'not_started'" class="flex gap-thin">
                         <button @click="handleAssignToMe" class="bg-main hover:bg-main-semi t-white p-small fw-medium pd-micro pd-x-small radius-medium ease-cubic-in-out">
                           Assign to Me
                         </button>
-                        <button @click="showAssignForm = true" class="bg-light hover:bg-white t-grey br-1px br-light p-small fw-medium pd-micro pd-x-small radius-medium ease-cubic-in-out">
+                        <button @click="showAssignForm = true" class="bg-light hover:bg-white t-dark br-1px br-light p-small fw-medium pd-micro pd-x-small radius-medium ease-cubic-in-out">
                           Assign to User
                         </button>
                       </div>
@@ -115,22 +122,22 @@ const handleVeto = () => console.log('Vetoing task');
                 <div class="flex flex-align-start gap-small">
                   <IconCalendar class="i-medium mn-t-micro" :fill="'rgb(var(--grey))'" />
                   <div>
-                    <div class="p-small t-grey mn-b-micro">Created / Due Date</div>
-                    <div class="fw-medium">{{ formatDate(task.createdAt) }} → {{ formatDate(task.dueDate) }}</div>
+                    <div class="p-small t-dark mn-b-micro">Created / Due Date</div>
+                    <div class="fw-medium">{{ formatDate(task.createdAt, { dateOnly: true }) }} → {{ formatDate(task.dueDate, { dateOnly: true }) }}</div>
                   </div>
                 </div>
               </div>
 
               <div>
                 <div class="flex flex-align-start gap-small">
-                  <svg class="i-medium t-grey mn-t-micro" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <svg class="i-medium t-dark mn-t-micro" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                     <path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"/>
                     <line x1="7" y1="7" x2="7.01" y2="7"/>
                   </svg>
                   <div>
-                    <div class="p-small t-grey mn-b-small">Tags</div>
+                    <div class="p-small t-dark mn-b-small">Tags</div>
                     <div class="flex flex-wrap gap-thin">
-                      <span v-for="tag in task.tags" :key="tag" class="pd-micro pd-x-small bg-white t-grey p-small radius-extra">
+                      <span v-for="tag in task.tags" :key="tag" class="pd-micro pd-x-small bg-white t-dark p-small radius-extra">
                         {{ tag }}
                       </span>
                     </div>
@@ -140,31 +147,31 @@ const handleVeto = () => console.log('Vetoing task');
             </div>
           </div>
 
-          <div class="br-t-1px br-black-transp-10 mn-t-semi pd-x-semi">
+          <div v-if="task.project || task.repository" class="mn-t-semi">
             <div class="flex flex-v-center gap-thin mn-b-medium">
-              <svg class="i-medium t-grey" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <svg class="i-medium t-dark" 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>
               <h3 class="p-regular fw-medium">Repository Information</h3>
             </div>
             <div class="cols-3 gap-regular mn-b-medium">
-              <div class="pd-small br-black-transp-10 br-1px radius-medium">
-                <div class="p-micro t-grey mn-b-micro">Project</div>
-                <div class="fw-medium">{{ task.project }}</div>
+              <div v-if="task.project || (initiative && initiative._id)" class="pd-small br-black-transp-10 br-1px radius-medium">
+                <div class="p-micro t-dark mn-b-micro">Project</div>
+                <div class="fw-medium">{{ task.project || initiative?.title }}</div>
               </div>
-              <div class="pd-small br-black-transp-10 br-1px radius-medium">
-                <div class="p-micro t-grey mn-b-micro">Repository</div>
+              <div v-if="task.repository" class="pd-small br-black-transp-10 br-1px radius-medium">
+                <div class="p-micro t-dark mn-b-micro">Repository</div>
                 <div class="fw-medium">{{ task.repository }}</div>
               </div>
-              <div class="pd-small br-black-transp-10 br-1px radius-medium">
-                <div class="p-micro t-grey mn-b-micro">Branch</div>
+              <div v-if="task.branch !== undefined" class="pd-small br-black-transp-10 br-1px radius-medium">
+                <div class="p-micro t-dark mn-b-micro">Branch</div>
                 <div class="fw-medium">{{ task.branch || 'Not created' }}</div>
               </div>
             </div>
             <div class="flex flex-justify-between flex-v-center">
-              <div v-if="task.mergeRequests.length > 0">
-                <div class="p-micro t-grey mn-b-small">Merge Requests</div>
+              <div v-if="task.mergeRequests && task.mergeRequests.length > 0">
+                <div class="p-micro t-dark mn-b-small">Merge Requests</div>
                 <div class="flex flex-wrap gap-thin">
                   <span v-for="mr in task.mergeRequests" :key="mr" class="pd-micro pd-x-small bg-main-small t-main p-small radius-extra flex flex-v-center gap-micro">
                     <svg class="i-medium" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -176,7 +183,7 @@ const handleVeto = () => console.log('Vetoing task');
                   </span>
                 </div>
               </div>
-              <div class="flex gap-thin">
+              <div v-if="task.permissions" class="flex gap-thin">
                 <button v-if="task.permissions.merge" @click="handleMerge" class="bg-fifth hover:bg-fifth-semi t-white p-small fw-medium pd-small pd-x-medium radius-medium ease-cubic-in-out flex flex-v-center gap-thin">
                   <svg class="i-medium" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                     <circle cx="18" cy="18" r="3"/>
@@ -199,19 +206,19 @@ const handleVeto = () => console.log('Vetoing task');
         </div>
       </div>
 
-      <div v-if="initiative || milestone" class="bg-light radius-semi pd-semi mn-b-semi">
+      <div v-if="(initiative && initiative._id) || (sprint && sprint._id)" class="bg-light radius-semi pd-semi mn-b-semi">
         <div class="flex flex-v-center gap-thin mn-b-medium">
           <IconAttach class="i-medium" :fill="'rgb(var(--grey))'" />
           <h3 class="p-regular fw-medium">Part Of</h3>
         </div>
         <div class="cols-2 mobile:cols-1 gap-small">
-          <router-link v-if="initiative" :to="{ name: 'Initiative', params: { id: initiative.id } }" class="d-block pd-medium bg-main-small br-1px br-main-semi radius-medium hover:bg-main-tiny ease-cubic-in-out">
+          <router-link v-if="initiative && initiative._id" :to="`/governance/initiatives/${initiative._id}`" class="d-block pd-medium bg-main-small br-1px br-main-semi radius-medium hover:bg-main-tiny ease-cubic-in-out">
             <div class="p-micro t-main fw-medium mn-b-micro">Initiative</div>
             <div class="fw-medium">{{ initiative.title }}</div>
           </router-link>
-          <router-link v-if="milestone" :to="{ name: 'Milestone', params: { id: milestone.id } }" class="d-block pd-medium bg-green-small br-1px br-green-semi radius-medium hover:bg-green-tiny ease-cubic-in-out">
-            <div class="p-micro t-green-nice fw-medium mn-b-micro">Milestone</div>
-            <div class="fw-medium">{{ milestone.name }}</div>
+          <router-link v-if="sprint && sprint._id" :to="`/governance/initiatives/${route.params.id}/sprints/${sprint._id}`" class="d-block pd-medium bg-green-small br-1px br-green-semi radius-medium hover:bg-green-tiny ease-cubic-in-out">
+            <div class="p-micro t-green-nice fw-medium mn-b-micro">Sprint</div>
+            <div class="fw-medium">{{ sprint.name }}</div>
           </router-link>
         </div>
       </div>
@@ -226,29 +233,29 @@ const handleVeto = () => console.log('Vetoing task');
           <div class="flex flex-column gap-regular">
             <div class="pd-medium br-black-transp-10 br-1px radius-medium">
               <h4 class="p-small fw-medium mn-b-small">Task Acceptance</h4>
-              <p class="p-small t-grey">
-                <span v-if="task.startVotingId">This task requires <span class="fw-medium t-main">public voting</span> to start work.</span>
+              <p class="p-small t-dark">
+                <span v-if="task.proposedByVoting">This task requires <span class="fw-medium t-main">public voting</span> to start work.</span>
                 <span v-else>Team members can start working on this task directly.</span>
               </p>
             </div>
 
             <div class="pd-medium br-black-transp-10 br-1px radius-medium">
               <h4 class="p-small fw-medium mn-b-small">Approval Process</h4>
-              <p class="p-small t-grey">
-                <span v-if="task.approvalVotingId">Task completion requires <span class="fw-medium t-main">public voting approval</span>.</span>
+              <p class="p-small t-dark">
+                <span v-if="task.completionVoting">Task completion requires <span class="fw-medium t-main">public voting approval</span>.</span>
                 <span v-else>Task completion is approved by team members.</span>
               </p>
             </div>
 
-            <div class="pd-medium br-black-transp-10 br-1px radius-medium">
+            <div v-if="task.visibility" class="pd-medium br-black-transp-10 br-1px radius-medium">
               <h4 class="p-small fw-medium mn-b-small">Decision Making</h4>
               <div class="flex flex-column gap-thin p-small">
                 <div class="flex flex-justify-between">
-                  <span class="t-grey">Governance Type:</span>
+                  <span class="t-dark">Governance Type:</span>
                   <span class="fw-medium">{{ task.visibility.type === 'public' ? 'Community-based' : 'Team-based' }}</span>
                 </div>
                 <div class="flex flex-justify-between">
-                  <span class="t-grey">Visibility:</span>
+                  <span class="t-dark">Visibility:</span>
                   <span class="fw-medium t-capitalize">{{ task.visibility.type }}</span>
                 </div>
               </div>
@@ -256,9 +263,9 @@ const handleVeto = () => console.log('Vetoing task');
           </div>
 
           <div class="flex flex-column gap-regular">
-            <div class="pd-medium bg-grad-[to-br_green-10_main-10] br-1px br-green-semi radius-medium">
+            <div v-if="task.budget" class="pd-medium bg-grad-[to-br_green-10_main-10] br-1px br-green-semi radius-medium">
               <div class="flex flex-v-center gap-thin mn-b-small">
-                <svg class="i-semi t-grey" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <svg class="i-semi t-dark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                   <line x1="12" y1="1" x2="12" y2="23"/>
                   <path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/>
                 </svg>
@@ -277,7 +284,7 @@ const handleVeto = () => console.log('Vetoing task');
                   </span>
                 </div>
               </div>
-              <button v-if="task.permissions.budget && !task.budget.approved" @click="handleApproveBudget" class="w-100 bg-green-nice hover:bg-green-semi t-white p-small fw-medium pd-small radius-medium ease-cubic-in-out flex flex-center flex gap-thin">
+              <button v-if="task.permissions && task.permissions.budget && !task.budget.approved" @click="handleApproveBudget" class="w-100 bg-green-nice hover:bg-green-semi t-white p-small fw-medium pd-small radius-medium ease-cubic-in-out flex flex-center flex gap-thin">
                 <svg class="i-medium" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                   <line x1="12" y1="1" x2="12" y2="23"/>
                   <path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/>
@@ -286,26 +293,26 @@ const handleVeto = () => console.log('Vetoing task');
               </button>
             </div>
 
-            <div class="pd-medium br-black-transp-10 br-1px radius-medium">
+            <div v-if="task.permissions" class="pd-medium br-black-transp-10 br-1px radius-medium">
               <h4 class="p-small fw-medium mn-b-small">Permissions</h4>
               <div class="flex flex-column gap-thin">
                 <div class="flex flex-justify-between flex-v-center p-small">
-                  <span class="t-grey">Merge Rights</span>
+                  <span class="t-dark">Merge Rights</span>
                   <IconCheckmark v-if="task.permissions.merge" class="i-regular" :fill="'rgb(var(--green-nice))'" />
                   <IconCross v-else class="i-regular" :fill="'rgb(var(--grey))'" />
                 </div>
                 <div class="flex flex-justify-between flex-v-center p-small">
-                  <span class="t-grey">Budget Approval</span>
+                  <span class="t-dark">Budget Approval</span>
                   <IconCheckmark v-if="task.permissions.budget" class="i-regular" :fill="'rgb(var(--green-nice))'" />
                   <IconCross v-else class="i-regular" :fill="'rgb(var(--grey))'" />
                 </div>
                 <div class="flex flex-justify-between flex-v-center p-small">
-                  <span class="t-grey">Deploy Rights</span>
+                  <span class="t-dark">Deploy Rights</span>
                   <IconCheckmark v-if="task.permissions.deploy" class="i-regular" :fill="'rgb(var(--green-nice))'" />
                   <IconCross v-else class="i-regular" :fill="'rgb(var(--grey))'" />
                 </div>
                 <div class="flex flex-justify-between flex-v-center p-small">
-                  <span class="t-grey">Veto Power</span>
+                  <span class="t-dark">Veto Power</span>
                   <IconCheckmark v-if="task.permissions.veto" class="i-regular" :fill="'rgb(var(--green-nice))'" />
                   <IconCross v-else class="i-regular" :fill="'rgb(var(--grey))'" />
                 </div>
@@ -328,25 +335,25 @@ const handleVeto = () => console.log('Vetoing task');
           <div class="br-2px br-main-semi radius-medium pd-medium bg-main-small">
             <div class="p-micro t-main fw-medium t-uppercase mn-b-small">Start Voting</div>
             <template v-if="startVoting">
-              <router-link :to="{ name: 'Voting', params: { id: startVoting.id } }" class="d-block hover:bg-main-tiny radius-medium ease-cubic-in-out" style="margin: -1rem; padding: 1rem;">
+              <router-link :to="`/governance/initiatives/${route.params.id}/votings/${startVoting._id}`" class="d-block hover:bg-main-tiny radius-medium ease-cubic-in-out" style="margin: -1rem; padding: 1rem;">
                 <h4 class="fw-medium mn-b-small">{{ startVoting.title }}</h4>
                 <div class="flex flex-v-center gap-thin mn-b-small">
-                  <TaskStatusBadge :status="startVoting.status" />
+                  <TaskStatusBadge :status="startVoting.result || startVoting.status" />
                 </div>
-                <div class="p-small t-grey flex flex-justify-between">
-                  <span>Yes: {{ startVoting.yesVotes }}</span>
-                  <span>No: {{ startVoting.noVotes }}</span>
-                  <span>Abstain: {{ startVoting.abstainVotes }}</span>
+                <div class="p-small t-dark flex flex-justify-between">
+                  <span>Yes: {{ startVoting.yesVotes || 0 }}</span>
+                  <span>No: {{ startVoting.noVotes || 0 }}</span>
+                  <span>Abstain: {{ startVoting.abstainVotes || 0 }}</span>
                 </div>
               </router-link>
-              <div v-if="startVoting.status === 'approved' && task.status === 'not_started' && task.assignee" class="mn-t-small pd-t-small br-t-1px br-main-semi">
+              <div v-if="(startVoting.result || startVoting.status) === 'approved' && task.status === 'not_started' && (task.assignee || task.assignedTo)" class="mn-t-small pd-t-small br-t-1px br-main-semi">
                 <button @click="handleSubmitForReview" class="w-100 bg-main hover:bg-main-semi t-white p-small fw-medium pd-small radius-medium ease-cubic-in-out">
                   Begin Work
                 </button>
               </div>
             </template>
             <template v-else>
-              <p class="p-small t-grey mn-b-small">No start voting required. Team members can begin work directly.</p>
+              <p class="p-small t-dark mn-b-small">No start voting required. Team members can begin work directly.</p>
               <button v-if="task.status === 'proposed'" class="w-100 bg-main hover:bg-main-semi t-white p-small fw-medium pd-small radius-medium ease-cubic-in-out">
                 Create Start Voting
               </button>
@@ -356,26 +363,26 @@ const handleVeto = () => console.log('Vetoing task');
           <div class="br-2px br-green-semi radius-medium pd-medium bg-green-small">
             <div class="p-micro t-green-nice fw-medium t-uppercase mn-b-small">Approval Voting</div>
             <template v-if="approvalVoting">
-              <router-link :to="{ name: 'Voting', params: { id: approvalVoting.id } }" class="d-block hover:bg-green-tiny radius-medium ease-cubic-in-out" style="margin: -1rem; padding: 1rem;">
+              <router-link :to="`/governance/initiatives/${route.params.id}/votings/${approvalVoting._id}`" class="d-block hover:bg-green-tiny radius-medium ease-cubic-in-out" style="margin: -1rem; padding: 1rem;">
                 <h4 class="fw-medium mn-b-small">{{ approvalVoting.title }}</h4>
                 <div class="flex flex-v-center gap-thin mn-b-small">
-                  <TaskStatusBadge :status="approvalVoting.status" />
+                  <TaskStatusBadge :status="approvalVoting.result || approvalVoting.status" />
                 </div>
-                <div class="p-small t-grey flex flex-justify-between">
-                  <span>Yes: {{ approvalVoting.yesVotes }}</span>
-                  <span>No: {{ approvalVoting.noVotes }}</span>
-                  <span>Abstain: {{ approvalVoting.abstainVotes }}</span>
+                <div class="p-small t-dark flex flex-justify-between">
+                  <span>Yes: {{ approvalVoting.yesVotes || 0 }}</span>
+                  <span>No: {{ approvalVoting.noVotes || 0 }}</span>
+                  <span>Abstain: {{ approvalVoting.abstainVotes || 0 }}</span>
                 </div>
               </router-link>
-              <div v-if="approvalVoting.status === 'approved' && task.status === 'review'" class="mn-t-small pd-t-small br-t-1px br-green-semi">
+              <div v-if="(approvalVoting.result || approvalVoting.status) === 'approved' && task.status === 'review'" class="mn-t-small pd-t-small br-t-1px br-green-semi">
                 <button @click="handleCompleteTask" class="w-100 bg-green-nice hover:bg-green-semi t-white p-small fw-medium pd-small radius-medium ease-cubic-in-out">
                   Complete Task
                 </button>
               </div>
             </template>
             <template v-else>
-              <p class="p-small t-grey mn-b-small">Not submitted for approval yet.</p>
-              <button v-if="task.status === 'in_progress' && task.assignee" @click="handleSubmitForReview" class="w-100 bg-green-nice hover:bg-green-semi t-white p-small fw-medium pd-small radius-medium ease-cubic-in-out">
+              <p class="p-small t-dark mn-b-small">Not submitted for approval yet.</p>
+              <button v-if="task.status === 'in_progress' && (task.assignee || task.assignedTo)" @click="handleSubmitForReview" class="w-100 bg-green-nice hover:bg-green-semi t-white p-small fw-medium pd-small radius-medium ease-cubic-in-out">
                 Submit for Review
               </button>
               <button v-if="task.status === 'review'" class="w-100 bg-green-nice hover:bg-green-semi t-white p-small fw-medium pd-small radius-medium ease-cubic-in-out">
@@ -390,11 +397,11 @@ const handleVeto = () => console.log('Vetoing task');
         <div class="bg-light radius-medium pd-semi w-max-30r">
           <div class="flex flex-justify-between flex-v-center mn-b-medium">
             <h3 class="h3 fw-medium">Assign Task</h3>
-            <button @click="showAssignForm = false" class="t-grey hover:t-dark ease-cubic-in-out">
+            <button @click="showAssignForm = false" class="t-dark hover:t-dark ease-cubic-in-out">
               <IconCross class="i-medium" :fill="'currentColor'" />
             </button>
           </div>
-          <p class="p-regular t-grey t-center">Task assignment form coming soon...</p>
+          <p class="p-regular t-dark t-center">Task assignment form coming soon...</p>
         </div>
       </div>
     </div>

package/src/modules/governance/views/components/pages/TaskCreate.vue

@@ -1,25 +1,63 @@
 <script setup>
 import { ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
 import { tasksActions } from '../../store/tasks';
 import FormTaskDetails from '../sections/FormTaskDetails.vue';
+import { IconArrow } from '@martyrs/src/modules/icons/icons.client.js';
+
+const route = useRoute();
+const router = useRouter();
 
 const newTask = ref({
-  name: '',
+  title: '',
   description: '',
-  status: 'todo',
-  assignedTo: ''
+  status: 'not_started',
+  assignedTo: '',
+  dueDate: null,
+  sprint: '',
+  initiative: '',
+  priority: 'medium',
+  tags: [],
 });
 
+const creating = ref(false);
+
 const createTask = async () => {
-  await tasksActions.createTask(newTask.value);
-  // Redirect or show success message
+  if (!newTask.value.title) return;
+  creating.value = true;
+  try {
+    const response = await tasksActions.createTask(newTask.value);
+    router.push(`/governance/initiatives/${route.params.id}/tasks/${response._id || response.id}`);
+  } catch (e) {
+    creating.value = false;
+  }
 };
 </script>
 
 <template>
-  <div>
-    <h1>Create New Task</h1>
+  <div class="pd-medium pd-y-semi">
+    <router-link
+      :to="`/governance/initiatives/${route.params.id}/tasks`"
+      class="flex flex-v-center t-dark hover:t-dark mn-b-semi ease-cubic-in-out"
+      style="text-decoration: none; width: fit-content;"
+    >
+      <IconArrow class="i-medium mn-r-thin" :rotation="180" :fill="'currentColor'" />
+      Back to tasks
+    </router-link>
+
+    <h1 class="h2 fw-medium mn-b-semi">Create New Task</h1>
+
     <FormTaskDetails v-model="newTask" />
-    <button @click="createTask">Create Task</button>
+
+    <div class="flex flex-justify-end mn-t-semi">
+      <button
+        @click="createTask"
+        :disabled="!newTask.title || creating"
+        class="bg-main hover:bg-main-semi t-white fw-medium pd-medium pd-x-semi radius-medium p-regular ease-cubic-in-out"
+        :class="{ 'o-50': !newTask.title || creating }"
+      >
+        {{ creating ? 'Creating...' : 'Create Task' }}
+      </button>
+    </div>
   </div>
-</template>
+</template>