@ozdao/martyrs 0.2.602 → 0.2.603

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

@@ -1,40 +1,47 @@
 <script setup>
 import { ref, computed, onMounted } from 'vue';
 import { useRoute } from 'vue-router';
-import CardMilestoneItem from '../blocks/CardMilestoneItem.vue';
+import CardSprintItem from '../blocks/CardSprintItem.vue';
 import CardVotingItem from '../blocks/CardVotingItem.vue';
 import { initiativesActions, initiativesState } from '../../store/initiatives';
-import { mockInitiatives, mockMilestones, mockVotings } from '../../../data/mockData';
-import { IconArrow, IconCheckmark, IconCross, IconFile, IconOpenLink, IconCalendar, IconSend, IconTime, IconAttach } from '@martyrs/src/modules/icons/icons.client.js';
+import { sprintsActions } from '../../store/sprints';
+import { tasksActions } from '../../store/tasks';
+import { votingsActions } from '../../store/votings';
+import { useGlobalMixins } from '@martyrs/src/modules/core/views/mixins/mixins.js';
+import { IconArrow, IconCheckmark, IconFile, IconOpenLink, IconSend, IconTime, IconAttach } from '@martyrs/src/modules/icons/icons.client.js';
+
+const { formatDate } = useGlobalMixins();
 
 const route = useRoute();
-const showMilestoneForm = ref(false);
-const showTaskForm = ref(false);
 const showFullDescription = ref(false);
 
-const initiative = computed(() => {
-  const real = initiativesState.current;
-  if (!real) return null;
-  const mock = mockInitiatives[0];
-  return {
-    ...mock,
-    id: real._id || real.id,
-    title: real.name || real.title,
-    name: real.name || real.title,
-  };
-});
+const initiative = computed(() => initiativesState.current);
 
-const milestones = computed(() => mockMilestones.filter(m => m.initiativeId === route.params.id));
-const relatedVotings = computed(() => mockVotings.filter(v => v.linkedEntityId === route.params.id));
+const sprints = ref([]);
+const tasks = ref([]);
+const relatedVotings = ref([]);
+const metrics = ref(null);
 
 onMounted(async () => {
   const id = route.params.id;
   await initiativesActions.getInitiativeById(id);
+
+  const [sprintsData, tasksData, votingsData, metricsData] = await Promise.all([
+    sprintsActions.getByInitiative(id),
+    tasksActions.getByInitiative(id),
+    votingsActions.getByInitiative(id),
+    initiativesActions.getMetrics(id),
+  ]);
+
+  sprints.value = sprintsData;
+  tasks.value = tasksData;
+  relatedVotings.value = votingsData;
+  metrics.value = metricsData;
 });
 
 const statusConfig = {
   active: { label: 'Active', color: 'bg-green-small t-green-nice br-green-semi' },
-  draft: { label: 'Draft', color: 'br-black-transp-10 br-1px t-grey' },
+  draft: { label: 'Draft', color: 'br-black-transp-10 br-1px t-dark' },
   completed: { label: 'Completed', color: 'bg-main-small t-main br-main-semi' },
   archived: { label: 'Archived', color: 'bg-yellow-small t-yellow-nice br-yellow-semi' },
 };
@@ -47,47 +54,20 @@ const coverUrl = computed(() => {
     ? initiative.value.cover
     : initiative.value.cover.url;
 });
-
-const formatDate = (dateString) => {
-  return new Date(dateString).toLocaleDateString('en-US', {
-    year: 'numeric',
-    month: 'short',
-    day: 'numeric',
-  });
-};
-
-const handleCreateMilestone = (data) => {
-  console.log('Creating milestone:', data);
-  showMilestoneForm.value = false;
-};
-
-const handleProposeTask = (data) => {
-  console.log('Proposing task:', data);
-  showTaskForm.value = false;
-};
 </script>
 
 <template>
   <div v-if="!initiative" class="min-h-100vh flex flex-center flex">
     <div class="t-center">
-      <h2 class="h2 fw-medium mn-b-small">Product not found</h2>
-      <router-link :to="{ name: 'Initiatives' }" class="t-main hover:t-main-semi">
-        Back to products
+      <h2 class="h2 fw-medium mn-b-small">Initiative not found</h2>
+      <router-link to="/governance" class="t-main hover:t-main-semi">
+        Back to initiatives
       </router-link>
     </div>
   </div>
 
   <div v-else class="min-h-100vh">
     <div class="pd-medium pd-y-semi">
-      <router-link
-        :to="{ name: 'Initiatives' }"
-        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 products
-      </router-link>
-
       <div v-if="coverUrl" class="relative h-64r radius-semi o-hidden mn-b-semi">
         <img :src="coverUrl" :alt="initiative.title" class="w-100 h-100 object-fit-cover" />
         <div class="absolute inset-0 bg-grad-[to-b_dark-80_black-90]" />
@@ -107,15 +87,15 @@ const handleProposeTask = (data) => {
             <span :class="`pd-medium pd-x-medium radius-medium p-small fw-medium br-1px ${status.color}`">
               {{ status.label }}
             </span>
-            <button @click="showTaskForm = true" class="bg-main hover:bg-main-semi t-white fw-medium pd-medium pd-x-medium radius-medium flex flex-v-center gap-thin ease-cubic-in-out p-small">
+            <router-link :to="`/governance/initiatives/${route.params.id}/votings/create`" class="bg-main hover:bg-main-semi t-white fw-medium pd-medium pd-x-medium radius-medium flex flex-v-center gap-thin ease-cubic-in-out p-small" style="text-decoration: none;">
               <IconSend class="i-regular" :fill="'currentColor'" />
               Open Voting
-            </button>
+            </router-link>
           </div>
         </div>
 
         <div v-if="initiative.fullDescription" class="mn-b-medium">
-          <p :class="`p-regular t-grey t-line-relaxed ${!showFullDescription && 't-line-clamp-3'}`">
+          <p :class="`p-regular t-dark t-line-relaxed ${!showFullDescription && 't-line-clamp-3'}`">
             {{ initiative.fullDescription }}
           </p>
           <button v-if="initiative.fullDescription.length > 200" @click="showFullDescription = !showFullDescription" class="t-main hover:t-main-semi p-small fw-medium mn-t-thin">
@@ -126,12 +106,12 @@ const handleProposeTask = (data) => {
         <div v-if="showFullDescription">
           <div v-if="initiative.valueProposition" class="mn-b-medium">
             <h4 class="fw-medium mn-b-small">Value Proposition</h4>
-            <p class="p-regular t-grey">{{ initiative.valueProposition }}</p>
+            <p class="p-regular t-dark">{{ initiative.valueProposition }}</p>
           </div>
 
           <div v-if="initiative.targetAudience" class="mn-b-medium">
             <h4 class="fw-medium mn-b-small">Target Audience</h4>
-            <p class="p-regular t-grey">{{ initiative.targetAudience }}</p>
+            <p class="p-regular t-dark">{{ initiative.targetAudience }}</p>
           </div>
 
           <div v-if="initiative.successCriteria && initiative.successCriteria.length > 0">
@@ -139,25 +119,21 @@ const handleProposeTask = (data) => {
             <div class="flex flex-column gap-thin">
               <div v-for="(criteria, index) in initiative.successCriteria" :key="index" class="flex flex-align-start gap-thin">
                 <IconCheckmark class="i-medium flex-shrink-0 mn-t-micro" :fill="'rgb(var(--green-nice))'" />
-                <span class="p-regular t-grey">{{ criteria }}</span>
+                <span class="p-regular t-dark">{{ criteria }}</span>
               </div>
             </div>
           </div>
         </div>
 
-        <div v-if="initiative.releases && initiative.releases.length > 0" class="mn-t-semi pd-x-semi br-t-1px br-black-transp-10">
+        <div v-if="initiative.releases && initiative.releases.length > 0" class="mn-t-semi">
           <div class="flex flex-justify-between flex-v-center mn-b-small">
             <h4 class="fw-medium">Recent Release</h4>
-            <router-link :to="{ name: 'Roadmap', params: { id: route.params.id } }" class="t-main hover:t-main-semi p-small fw-medium flex flex-v-center gap-micro ease-cubic-in-out">
-              View All Releases
-              <IconArrow class="i-regular" :fill="'currentColor'" />
-            </router-link>
           </div>
           <div class="br-black-transp-10 br-1px radius-medium pd-medium flex flex-justify-between flex-align-start bg-grad-[to-br_main-10_white]">
             <div>
               <h5 class="fw-medium mn-b-small">{{ initiative.releases[0].version }}</h5>
-              <p class="p-small t-grey mn-b-small">{{ formatDate(initiative.releases[0].date) }}</p>
-              <p class="p-regular t-grey">{{ initiative.releases[0].notes }}</p>
+              <p class="p-small t-dark mn-b-small">{{ formatDate(initiative.releases[0].date, { dateOnly: true }) }}</p>
+              <p class="p-regular t-dark">{{ initiative.releases[0].notes }}</p>
             </div>
             <span class="pd-small pd-x-medium bg-green-small t-green-nice radius-regular p-small fw-medium">
               {{ initiative.releases[0].status }}
@@ -165,82 +141,78 @@ const handleProposeTask = (data) => {
           </div>
         </div>
 
-        <div v-if="initiative.team" class="mn-t-semi pd-x-semi br-t-1px br-black-transp-10">
+        <div v-if="initiative.team" class="mn-t-semi">
           <div class="flex flex-justify-between flex-v-center mn-b-small">
             <h4 class="fw-medium">Team</h4>
-            <router-link :to="{ name: 'Initiative', params: { id: route.params.id } }" class="t-main hover:t-main-semi p-small fw-medium flex flex-v-center gap-micro ease-cubic-in-out">
-              Manage Team
-              <IconArrow class="i-regular" :fill="'currentColor'" />
-            </router-link>
           </div>
           <div class="cols-3 gap-regular">
             <div v-if="initiative.team.owners && initiative.team.owners.length > 0" class="br-black-transp-10 br-1px radius-medium pd-medium bg-grad-[to-br_yellow-10_white]">
-              <h5 class="p-micro t-grey fw-medium t-uppercase mn-b-small">Owners</h5>
+              <h5 class="p-micro t-dark fw-medium t-uppercase mn-b-small">Owners</h5>
               <div class="flex flex-column gap-thin">
                 <div v-for="member in initiative.team.owners.slice(0, 3)" :key="member.id" class="flex flex-v-center gap-thin">
                   <img :src="member.avatar" :alt="member.name" class="i-medium radius-extra" />
                   <span class="p-small truncate">{{ member.name }}</span>
                 </div>
-                <span v-if="initiative.team.owners.length > 3" class="p-micro t-grey">+{{ initiative.team.owners.length - 3 }} more</span>
+                <span v-if="initiative.team.owners.length > 3" class="p-micro t-dark">+{{ initiative.team.owners.length - 3 }} more</span>
               </div>
             </div>
 
             <div v-if="initiative.team.coreTeam && initiative.team.coreTeam.length > 0" class="br-black-transp-10 br-1px radius-medium pd-medium bg-grad-[to-br_main-10_white]">
-              <h5 class="p-micro t-grey fw-medium t-uppercase mn-b-small">Core Team</h5>
+              <h5 class="p-micro t-dark fw-medium t-uppercase mn-b-small">Core Team</h5>
               <div class="flex flex-column gap-thin">
                 <div v-for="member in initiative.team.coreTeam.slice(0, 3)" :key="member.id" class="flex flex-v-center gap-thin">
                   <img :src="member.avatar" :alt="member.name" class="i-medium radius-extra" />
                   <span class="p-small truncate">{{ member.name }}</span>
                 </div>
-                <span v-if="initiative.team.coreTeam.length > 3" class="p-micro t-grey">+{{ initiative.team.coreTeam.length - 3 }} more</span>
+                <span v-if="initiative.team.coreTeam.length > 3" class="p-micro t-dark">+{{ initiative.team.coreTeam.length - 3 }} more</span>
               </div>
             </div>
 
             <div v-if="initiative.team.contributors && initiative.team.contributors.length > 0" class="br-black-transp-10 br-1px radius-medium pd-medium bg-grad-[to-br_green-10_white]">
-              <h5 class="p-micro t-grey fw-medium t-uppercase mn-b-small">Contributors</h5>
+              <h5 class="p-micro t-dark fw-medium t-uppercase mn-b-small">Contributors</h5>
               <div class="flex flex-column gap-thin">
                 <div v-for="member in initiative.team.contributors.slice(0, 3)" :key="member.id" class="flex flex-v-center gap-thin">
                   <img :src="member.avatar" :alt="member.name" class="i-medium radius-extra" />
                   <span class="p-small truncate">{{ member.name }}</span>
                 </div>
-                <span v-if="initiative.team.contributors.length > 3" class="p-micro t-grey">+{{ initiative.team.contributors.length - 3 }} more</span>
+                <span v-if="initiative.team.contributors.length > 3" class="p-micro t-dark">+{{ initiative.team.contributors.length - 3 }} more</span>
               </div>
             </div>
           </div>
         </div>
 
-        <div v-if="initiative.metrics" class="mn-t-semi pd-x-semi br-t-1px br-black-transp-10">
+        <div v-if="metrics" class="mn-t-semi">
           <h4 class="fw-medium mn-b-small">Key Metrics</h4>
           <div class="cols-6 gap-regular">
+            <router-link :to="`/governance/initiatives/${route.params.id}/tasks`" class="br-black-transp-10 br-1px radius-medium pd-medium hover:bg-white ease-cubic-in-out" style="text-decoration: none; color: inherit;">
+              <div class="p-micro t-dark mn-b-micro">Task Progress</div>
+              <div class="h2 fw-medium">{{ metrics.taskProgress }}%</div>
+            </router-link>
+            <router-link :to="`/governance/initiatives/${route.params.id}/sprints`" class="br-black-transp-10 br-1px radius-medium pd-medium hover:bg-white ease-cubic-in-out" style="text-decoration: none; color: inherit;">
+              <div class="p-micro t-dark mn-b-micro">Sprint Progress</div>
+              <div class="h2 fw-medium">{{ metrics.sprintProgress }}%</div>
+            </router-link>
             <div class="br-black-transp-10 br-1px radius-medium pd-medium">
-              <div class="p-micro t-grey mn-b-micro">Task Progress</div>
-              <div class="h2 fw-medium">{{ initiative.metrics.taskProgress }}%</div>
-            </div>
-            <div class="br-black-transp-10 br-1px radius-medium pd-medium">
-              <div class="p-micro t-grey mn-b-micro">Milestone Progress</div>
-              <div class="h2 fw-medium">{{ initiative.metrics.milestoneProgress }}%</div>
-            </div>
-            <div class="br-black-transp-10 br-1px radius-medium pd-medium">
-              <div class="p-micro t-grey mn-b-micro">Risk Index</div>
+              <div class="p-micro t-dark mn-b-micro">Risk Index</div>
               <div :class="`p-small fw-medium t-capitalize pd-thin pd-x-thin radius-regular ${
-                initiative.metrics.riskIndex === 'low' ? 'bg-green-small t-green-nice' :
-                initiative.metrics.riskIndex === 'medium' ? 'bg-yellow-small t-yellow-nice' :
+                metrics.riskIndex === 'low' ? 'bg-green-small t-green-nice' :
+                metrics.riskIndex === 'medium' ? 'bg-yellow-small t-yellow-nice' :
                 'bg-red-small t-red-nice'
               }`">
-                {{ initiative.metrics.riskIndex }}
+                {{ metrics.riskIndex }}
               </div>
             </div>
             <div class="br-black-transp-10 br-1px radius-medium pd-medium">
-              <div class="p-micro t-grey mn-b-micro">Availability</div>
-              <div class="h2 fw-medium">{{ initiative.metrics.availabilityIndex }}%</div>
+              <div class="p-micro t-dark mn-b-micro">Availability</div>
+              <div class="h2 fw-medium">{{ metrics.availabilityIndex }}%</div>
             </div>
             <div class="br-black-transp-10 br-1px radius-medium pd-medium">
-              <div class="p-micro t-grey mn-b-micro">Active Users</div>
-              <div class="h2 fw-medium">{{ initiative.metrics.activeUsers.toLocaleString() }}</div>
+              <div class="p-micro t-dark mn-b-micro">Active Users</div>
+              <div class="h2 fw-medium">{{ metrics.activeUsers }}</div>
             </div>
             <div class="br-black-transp-10 br-1px radius-medium pd-medium">
-              <div class="p-micro t-grey mn-b-micro">Performance</div>
-              <div class="h2 fw-medium">{{ initiative.metrics.performance }}</div>
+              <div class="p-micro t-dark mn-b-micro">Performance</div>
+              <div class="h2 fw-medium">{{ metrics.performance }}%</div>
             </div>
           </div>
         </div>
@@ -252,57 +224,27 @@ const handleProposeTask = (data) => {
             <IconSend class="i-medium" :fill="'rgb(var(--grey))'" />
             <h3 class="p-semi fw-medium">Governance & Approvals</h3>
           </div>
-          <router-link :to="{ name: 'Votings' }" class="t-main hover:t-main-semi p-small fw-medium">
+          <router-link :to="`/governance/initiatives/${route.params.id}/votings`" class="t-main hover:t-main-semi p-small fw-medium">
             View all votings
           </router-link>
         </div>
         <div class="cols-3 gap-regular">
-          <CardVotingItem v-for="voting in relatedVotings.slice(0, 3)" :key="voting.id" :voting="voting" />
+          <CardVotingItem v-for="voting in relatedVotings.slice(0, 3)" :key="voting._id || voting.id" :voting="voting" />
         </div>
       </div>
 
-      <div v-if="initiative.sprints && initiative.sprints.length > 0" class="bg-light radius-semi pd-semi mn-b-semi">
+      <div v-if="sprints.length > 0" class="bg-light radius-semi pd-semi mn-b-semi">
         <div class="flex flex-justify-between flex-v-center mn-b-semi">
           <div class="flex flex-v-center gap-thin">
             <IconTime class="i-medium" :fill="'rgb(var(--grey))'" />
-            <h3 class="p-semi fw-medium">Active Sprints</h3>
+            <h3 class="p-semi fw-medium">Sprints</h3>
           </div>
-          <router-link :to="{ name: 'InitiativeMilestones', params: { id: route.params.id } }" class="t-main hover:t-main-semi p-small fw-medium flex flex-v-center gap-micro">
-            View Roadmap
-            <IconArrow class="i-regular" :fill="'currentColor'" />
+          <router-link :to="`/governance/initiatives/${route.params.id}/sprints`" class="t-main hover:t-main-semi p-small fw-medium">
+            View all
           </router-link>
         </div>
-        <div class="flex flex-column gap-regular">
-          <router-link v-for="sprint in initiative.sprints" :key="sprint.id" :to="{ name: 'Milestone', params: { id: sprint.milestoneId } }" class="d-block br-black-transp-10 br-1px radius-medium pd-medium hover:br-main-semi hover:scale-[1.05] ease-cubic-in-out">
-            <div class="flex flex-justify-between flex-align-start mn-b-small">
-              <div>
-                <h4 class="fw-medium mn-b-small">{{ sprint.name }}</h4>
-                <p class="p-small t-grey mn-b-small">{{ sprint.theme }}</p>
-              </div>
-              <span class="p-small t-grey">
-                {{ formatDate(sprint.startDate) }} - {{ formatDate(sprint.endDate) }}
-              </span>
-            </div>
-
-            <div class="flex flex-v-center gap-regular mn-b-small">
-              <div class="flex-child-1">
-                <div class="flex flex-justify-between p-small mn-b-micro">
-                  <span class="t-grey">Progress</span>
-                  <span class="fw-medium">{{ sprint.completedCount }}/{{ sprint.taskCount }} tasks</span>
-                </div>
-                <div class="w-100 bg-light radius-extra h-2r">
-                  <div class="bg-main h-100 radius-extra" :style="{ width: `${(sprint.completedCount / sprint.taskCount) * 100}%` }" />
-                </div>
-              </div>
-            </div>
-
-            <div class="flex flex-v-center gap-thin">
-              <span class="p-small t-grey">Participants:</span>
-              <div class="flex" style="margin-left: -0.5rem;">
-                <img v-for="member in sprint.participants" :key="member.id" :src="member.avatar" :alt="member.name" :title="member.name" class="i-medium radius-extra br-2px br-white" style="margin-left: -0.5rem;" />
-              </div>
-            </div>
-          </router-link>
+        <div class="cols-3 gap-regular">
+          <CardSprintItem v-for="sprint in sprints.slice(0, 6)" :key="sprint._id || sprint.id" :sprint="sprint" />
         </div>
       </div>
 
@@ -393,35 +335,12 @@ const handleProposeTask = (data) => {
                 <IconOpenLink class="i-regular" :fill="'currentColor'" />
                 Open
               </a>
-              <p class="p-micro t-grey">Version: {{ env.version }}</p>
+              <p class="p-micro t-dark">Version: {{ env.version }}</p>
             </div>
           </div>
         </div>
       </div>
 
-      <div v-if="showMilestoneForm" class="fixed inset-0 bg-dark-overlay flex flex-center flex z-50" @click.self="showMilestoneForm = false">
-        <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">Create Milestone</h3>
-            <button @click="showMilestoneForm = false" class="t-grey hover:t-dark ease-cubic-in-out">
-              <IconCross class="i-medium" :fill="'currentColor'" />
-            </button>
-          </div>
-          <p class="p-regular t-grey t-center">Milestone creation form coming soon...</p>
-        </div>
-      </div>
-
-      <div v-if="showTaskForm" class="fixed inset-0 bg-dark-overlay flex flex-center flex z-50" @click.self="showTaskForm = false">
-        <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">Propose Task</h3>
-            <button @click="showTaskForm = false" class="t-grey hover:t-dark ease-cubic-in-out">
-              <IconCross class="i-medium" :fill="'currentColor'" />
-            </button>
-          </div>
-          <p class="p-regular t-grey t-center">Task proposal form coming soon...</p>
-        </div>
-      </div>
     </div>
   </div>
 </template>

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

@@ -1,24 +1,61 @@
 <script setup>
 import { ref } from 'vue';
+import { useRouter } from 'vue-router';
 import { initiativesActions } from '../../store/initiatives';
 import FormInitiativeDetails from '../sections/FormInitiativeDetails.vue';
+import { IconArrow } from '@martyrs/src/modules/icons/icons.client.js';
+
+const router = useRouter();
 
 const newInitiative = ref({
   name: '',
+  title: '',
   description: '',
-  status: 'draft'
+  status: 'draft',
+  url: '',
+  client: '',
+  cover: '',
+  fullDescription: '',
+  valueProposition: '',
+  targetAudience: '',
+  successCriteria: [],
+  repositories: [],
+  links: {},
+  environments: [],
+  releases: [],
+  metrics: null,
+  sprints: [],
 });
 
+const creating = ref(false);
+
 const createInitiative = async () => {
-  await initiativesActions.createInitiative(newInitiative.value);
-  // Redirect or show success message
+  if (!newInitiative.value.name) return;
+  creating.value = true;
+  try {
+    const response = await initiativesActions.createInitiative(newInitiative.value);
+    router.push(`/governance/initiatives/${response._id || response.id}`);
+  } catch (e) {
+    creating.value = false;
+  }
 };
 </script>
 
 <template>
-  <div>
-    <h1>Create New Initiative</h1>
+  <div class="pd-medium pd-y-semi">
+    <h1 class="h2 fw-medium mn-b-semi">Create New Initiative</h1>
+
     <FormInitiativeDetails v-model="newInitiative" />
-    <button @click="createInitiative">Create Initiative</button>
+
+    <div class="flex flex-justify-end mn-t-semi">
+      <button
+        @click="createInitiative"
+        :disabled="!newInitiative.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': !newInitiative.name || creating }"
+      >
+        {{ creating ? 'Creating...' : 'Create Initiative' }}
+      </button>
+    </div>
   </div>
-</template>
+</template>