@ozdao/martyrs 0.2.602 → 0.2.603

package/src/modules/governance/views/components/pages/{Roadmap.vue → InitiativeSprints.vue}

@@ -1,41 +1,42 @@
 <script setup>
-import { ref, computed } from 'vue';
+import { ref, computed, onMounted } from 'vue';
 import { useRoute } from 'vue-router';
-import CardMilestoneItem from '../blocks/CardMilestoneItem.vue';
+import CardSprintItem from '../blocks/CardSprintItem.vue';
 import EmptyState from '../partials/EmptyState.vue';
-import { mockInitiatives, mockMilestones } from '../../../data/mockData';
+import { initiativesActions, initiativesState } from '../../store/initiatives';
+import { sprintsActions, sprintsState } from '../../store/sprints';
+import { useGlobalMixins } from '@martyrs/src/modules/core/views/mixins/mixins.js';
 import { IconArrow, IconCalendar, IconTime, IconEntityInfo, IconCheckmark } from '@martyrs/src/modules/icons/icons.client.js';
 
+const { formatDate } = useGlobalMixins();
+
 const route = useRoute();
-const activeTab = ref('milestones');
+const activeTab = ref('sprints');
 
-const initiative = computed(() => mockInitiatives.find(i => i.id === route.params.id));
-const milestones = computed(() => mockMilestones.filter(m => m.initiativeId === route.params.id));
+const initiative = computed(() => initiativesState.current);
+const sprints = computed(() => sprintsState.all.filter(m => m.initiative === route.params.id));
 
-const completedMilestones = computed(() => milestones.value.filter(m => m.status === 'completed'));
-const inProgressMilestones = computed(() => milestones.value.filter(m => m.status === 'in_progress'));
-const notStartedMilestones = computed(() => milestones.value.filter(m => m.status === 'not_started'));
+const completedSprints = computed(() => sprints.value.filter(m => m.status === 'completed'));
+const inProgressSprints = computed(() => sprints.value.filter(m => m.status === 'in_progress'));
+const notStartedSprints = computed(() => sprints.value.filter(m => m.status === 'not_started'));
 
 const overallProgress = computed(() => {
-  return milestones.value.length > 0
-    ? Math.round((completedMilestones.value.length / milestones.value.length) * 100)
+  return sprints.value.length > 0
+    ? Math.round((completedSprints.value.length / sprints.value.length) * 100)
     : 0;
 });
 
-const formatDate = (dateString) => {
-  return new Date(dateString).toLocaleDateString('en-US', {
-    year: 'numeric',
-    month: 'short',
-    day: 'numeric',
-  });
-};
+onMounted(async () => {
+  await initiativesActions.getInitiativeById(route.params.id);
+  await sprintsActions.getAllSprints();
+});
 </script>
 
 <template>
-  <div v-if="!initiative" class="min-h-100vh flex flex-center flex">
+  <div v-if="!initiative || !initiative._id" class="min-h-100vh flex flex-center flex">
     <div class="t-center">
       <h2 class="h2 fw-medium mn-b-small">Initiative 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>
@@ -44,8 +45,8 @@ const formatDate = (dateString) => {
   <div v-else class="min-h-100vh">
     <div class="pd-medium pd-y-semi">
       <router-link
-        :to="{ name: 'Initiative', params: { id: route.params.id } }"
-        class="flex flex-v-center t-grey hover:t-dark mn-b-semi ease-cubic-in-out"
+        :to="`/governance/initiatives/${route.params.id}`"
+        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'" />
@@ -56,15 +57,15 @@ const formatDate = (dateString) => {
         <div class="flex flex-justify-between flex-align-start mn-b-semi">
           <div class="flex-child-1">
             <h1 class="h1 fw-medium mn-b-small">{{ initiative.title }}</h1>
-            <p class="p-semi t-grey mn-b-medium">{{ initiative.description }}</p>
+            <p class="p-semi t-dark mn-b-medium">{{ initiative.description }}</p>
             <div class="flex flex-v-center gap-small p-small">
-              <div v-if="initiative.date" class="flex flex-v-center gap-thin t-grey">
+              <div v-if="initiative.date" class="flex flex-v-center gap-thin t-dark">
                 <IconCalendar class="i-regular" :fill="'currentColor'" />
-                <span>Started {{ formatDate(initiative.date) }}</span>
+                <span>Started {{ formatDate(initiative.date, { dateOnly: true }) }}</span>
               </div>
-              <div v-if="initiative.targetReleaseDate" class="flex flex-v-center gap-thin t-grey">
+              <div v-if="initiative.targetReleaseDate" class="flex flex-v-center gap-thin t-dark">
                 <IconCalendar class="i-regular" :fill="'currentColor'" />
-                <span>Target {{ formatDate(initiative.targetReleaseDate) }}</span>
+                <span>Target {{ formatDate(initiative.targetReleaseDate, { dateOnly: true }) }}</span>
               </div>
             </div>
           </div>
@@ -73,21 +74,21 @@ const formatDate = (dateString) => {
         <div class="br-b-1px br-black-transp-10 mn-b-semi">
           <div class="flex gap-small">
             <button
-              @click="activeTab = 'milestones'"
+              @click="activeTab = 'sprints'"
               :class="`pd-b-medium pd-x-thin br-b-2px fw-medium ease-cubic-in-out ${
-                activeTab === 'milestones'
+                activeTab === 'sprints'
                   ? 'br-main t-main'
-                  : 'br-transparent t-grey hover:t-dark'
+                  : 'br-transparent t-dark hover:t-dark'
               }`"
             >
-              Milestones
+              Sprints
             </button>
             <button
               @click="activeTab = 'releases'"
               :class="`pd-b-medium pd-x-thin br-b-2px fw-medium ease-cubic-in-out ${
                 activeTab === 'releases'
                   ? 'br-main t-main'
-                  : 'br-transparent t-grey hover:t-dark'
+                  : 'br-transparent t-dark hover:t-dark'
               }`"
             >
               Releases
@@ -95,9 +96,9 @@ const formatDate = (dateString) => {
           </div>
         </div>
 
-        <div v-if="activeTab === 'milestones'" class="br-t-1px br-black-transp-10 pd-x-semi">
+        <div v-if="activeTab === 'sprints'">
           <div class="flex flex-justify-between flex-v-center mn-b-small">
-            <span class="p-small fw-medium t-grey">Overall Progress</span>
+            <span class="p-small fw-medium t-dark">Overall Progress</span>
             <span class="h2 fw-medium">{{ overallProgress }}%</span>
           </div>
           <div class="w-100 bg-white radius-extra h-3r o-hidden mn-b-medium">
@@ -109,74 +110,74 @@ const formatDate = (dateString) => {
           <div class="flex flex-v-center gap-small p-small">
             <div class="flex flex-v-center gap-thin">
               <div class="w-3r h-3r bg-green-nice radius-extra" />
-              <span class="t-grey">{{ completedMilestones.length }} Completed</span>
+              <span class="t-dark">{{ completedSprints.length }} Completed</span>
             </div>
             <div class="flex flex-v-center gap-thin">
               <div class="w-3r h-3r bg-main radius-extra" />
-              <span class="t-grey">{{ inProgressMilestones.length }} In Progress</span>
+              <span class="t-dark">{{ inProgressSprints.length }} In Progress</span>
             </div>
             <div class="flex flex-v-center gap-thin">
               <div class="w-3r h-3r bg-grey radius-extra" />
-              <span class="t-grey">{{ notStartedMilestones.length }} Not Started</span>
+              <span class="t-dark">{{ notStartedSprints.length }} Not Started</span>
             </div>
           </div>
         </div>
       </div>
 
-      <template v-if="activeTab === 'milestones'">
+      <template v-if="activeTab === 'sprints'">
         <div class="mn-b-semi">
-          <h2 class="h2 fw-medium">Milestones Roadmap</h2>
-          <p class="p-regular t-grey mn-t-micro">Track progress across all milestones</p>
+          <h2 class="h2 fw-medium">Sprints</h2>
+          <p class="p-regular t-dark mn-t-micro">Track progress across all sprints</p>
         </div>
 
         <EmptyState
-          v-if="milestones.length === 0"
-          title="No milestones yet"
-          message="Create milestones to start tracking progress on this initiative."
+          v-if="sprints.length === 0"
+          title="No sprints yet"
+          message="Create sprints to start tracking progress on this initiative."
         />
 
         <div v-else class="flex flex-column gap-small">
-          <div v-if="inProgressMilestones.length > 0">
+          <div v-if="inProgressSprints.length > 0">
             <div class="flex flex-v-center gap-thin mn-b-medium">
               <IconTime class="i-medium" :fill="'rgb(var(--main))'" />
               <h3 class="p-semi fw-medium">In Progress</h3>
-              <span class="p-small t-grey">({{ inProgressMilestones.length }})</span>
+              <span class="p-small t-dark">({{ inProgressSprints.length }})</span>
             </div>
             <div class="cols-3 gap-small">
-              <CardMilestoneItem
-                v-for="milestone in inProgressMilestones"
-                :key="milestone.id"
-                :milestone="milestone"
+              <CardSprintItem
+                v-for="sprint in inProgressSprints"
+                :key="sprint._id"
+                :sprint="sprint"
               />
             </div>
           </div>
 
-          <div v-if="notStartedMilestones.length > 0">
+          <div v-if="notStartedSprints.length > 0">
             <div class="flex flex-v-center gap-thin mn-b-medium">
               <IconEntityInfo class="i-medium" :fill="'rgb(var(--grey))'" />
               <h3 class="p-semi fw-medium">Not Started</h3>
-              <span class="p-small t-grey">({{ notStartedMilestones.length }})</span>
+              <span class="p-small t-dark">({{ notStartedSprints.length }})</span>
             </div>
             <div class="cols-3 gap-small">
-              <CardMilestoneItem
-                v-for="milestone in notStartedMilestones"
-                :key="milestone.id"
-                :milestone="milestone"
+              <CardSprintItem
+                v-for="sprint in notStartedSprints"
+                :key="sprint._id"
+                :sprint="sprint"
               />
             </div>
           </div>
 
-          <div v-if="completedMilestones.length > 0">
+          <div v-if="completedSprints.length > 0">
             <div class="flex flex-v-center gap-thin mn-b-medium">
               <IconCheckmark class="i-medium" :fill="'rgb(var(--green-nice))'" />
               <h3 class="p-semi fw-medium">Completed</h3>
-              <span class="p-small t-grey">({{ completedMilestones.length }})</span>
+              <span class="p-small t-dark">({{ completedSprints.length }})</span>
             </div>
             <div class="cols-3 gap-small">
-              <CardMilestoneItem
-                v-for="milestone in completedMilestones"
-                :key="milestone.id"
-                :milestone="milestone"
+              <CardSprintItem
+                v-for="sprint in completedSprints"
+                :key="sprint._id"
+                :sprint="sprint"
               />
             </div>
           </div>
@@ -186,7 +187,7 @@ const formatDate = (dateString) => {
       <template v-else>
         <div class="mn-b-semi">
           <h2 class="h2 fw-medium">Release History</h2>
-          <p class="p-regular t-grey mn-t-micro">All releases for this product</p>
+          <p class="p-regular t-dark mn-t-micro">All releases for this initiative</p>
         </div>
 
         <EmptyState
@@ -211,22 +212,22 @@ const formatDate = (dateString) => {
                         ? 'bg-green-small t-green-nice'
                         : release.status === 'in_progress'
                         ? 'bg-main-small t-main'
-                        : 'br-black-transp-10 br-1px t-grey'
+                        : 'br-black-transp-10 br-1px t-dark'
                     }`"
                   >
                     {{ release.status }}
                   </span>
                 </div>
-                <div class="flex flex-v-center gap-thin p-small t-grey mn-b-small">
+                <div class="flex flex-v-center gap-thin p-small t-dark mn-b-small">
                   <IconCalendar class="i-regular" :fill="'currentColor'" />
-                  <span>{{ formatDate(release.date) }}</span>
+                  <span>{{ formatDate(release.date, { dateOnly: true }) }}</span>
                 </div>
               </div>
             </div>
-            <p class="p-regular t-grey t-line-relaxed">{{ release.notes }}</p>
-            <div v-if="release.migrations && release.migrations.length > 0" class="mn-t-medium pd-x-medium br-t-1px br-black-transp-10">
-              <h4 class="p-small fw-medium t-grey mn-b-small">Migrations</h4>
-              <ul class="pd-l-semi p-small t-grey flex flex-column gap-micro" style="list-style: disc;">
+            <p class="p-regular t-dark t-line-relaxed">{{ release.notes }}</p>
+            <div v-if="release.migrations && release.migrations.length > 0" class="mn-t-medium">
+              <h4 class="p-small fw-medium t-dark mn-b-small">Migrations</h4>
+              <ul class="pd-l-semi p-small t-dark flex flex-column gap-micro" style="list-style: disc;">
                 <li v-for="(migration, idx) in release.migrations" :key="idx">{{ migration }}</li>
               </ul>
             </div>

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

@@ -3,13 +3,10 @@ import { onMounted, ref, computed } from 'vue';
 import { initiativesActions, initiativesState } from '../../store/initiatives';
 import CardInitiativeItem from '../blocks/CardInitiativeItem.vue';
 import EmptyState from '../partials/EmptyState.vue';
-import { IconPlus, IconSearch, IconFilter } from '@martyrs/src/modules/icons/icons.client.js';
+import { IconPlus, IconSearch } from '@martyrs/src/modules/icons/icons.client.js';
 
 const initiatives = ref([]);
 const searchQuery = ref('');
-const statusFilter = ref('all');
-const riskFilter = ref('all');
-const showFilters = ref(false);
 
 onMounted(async () => {
   await initiativesActions.getAllInitiatives();
@@ -17,33 +14,14 @@ onMounted(async () => {
 });
 
 const filteredInitiatives = computed(() => {
-  return initiatives.value.filter((initiative) => {
-    const matchesSearch =
-      searchQuery.value === '' ||
-      (initiative.title && initiative.title.toLowerCase().includes(searchQuery.value.toLowerCase())) ||
-      (initiative.description && initiative.description.toLowerCase().includes(searchQuery.value.toLowerCase())) ||
-      (initiative.name && initiative.name.toLowerCase().includes(searchQuery.value.toLowerCase()));
-
-    const matchesStatus =
-      statusFilter.value === 'all' || initiative.status === statusFilter.value;
-
-    const matchesRisk =
-      riskFilter.value === 'all' ||
-      (initiative.metrics && initiative.metrics.riskIndex === riskFilter.value);
-
-    return matchesSearch && matchesStatus && matchesRisk;
-  });
+  if (searchQuery.value === '') return initiatives.value;
+  const q = searchQuery.value.toLowerCase();
+  return initiatives.value.filter((initiative) =>
+    (initiative.title && initiative.title.toLowerCase().includes(q)) ||
+    (initiative.description && initiative.description.toLowerCase().includes(q)) ||
+    (initiative.name && initiative.name.toLowerCase().includes(q))
+  );
 });
-
-const clearFilters = () => {
-  searchQuery.value = '';
-  statusFilter.value = 'all';
-  riskFilter.value = 'all';
-};
-
-const hasActiveFilters = computed(() =>
-  statusFilter.value !== 'all' || riskFilter.value !== 'all'
-);
 </script>
 
 <template>
@@ -54,7 +32,7 @@ const hasActiveFilters = computed(() =>
           <p class="p-small t-transp mn-t-thin">Manage and track all your initiatives</p>
         </div>
         <router-link
-          :to="{ name: 'Create Initiative' }"
+          to="/governance/create"
           class="bg-main hover:bg-main-semi t-white fw-medium pd-small pd-x-semi radius-medium flex flex-v-center gap-thin ease-cubic-in-out cursor-pointer"
           style="text-decoration: none;"
         >
@@ -64,82 +42,22 @@ const hasActiveFilters = computed(() =>
       </div>
 
       <div class="bg-light radius-medium pd-medium mn-b-semi">
-        <div class="flex flex-column gap-regular mobile:flex-row">
-          <div class="flex-child-1 pos-relative">
-            <IconSearch class="i-medium pos-absolute pos-l-small pos-t-regular" :fill="'rgb(var(--grey))'" />
-            <input
-              v-model="searchQuery"
-              type="text"
-              placeholder="Search initiatives by name, description..."
-              class="w-100 pd-small pd-l-extra radius-medium bg-white"
-              style="outline: none;"
-            />
-          </div>
-
-          <button
-            @click="showFilters = !showFilters"
-            class="flex flex-v-center gap-thin pd-small radius-medium hover:bg-white ease-cubic-in-out cursor-pointer bg-white"
-          >
-            <IconFilter class="i-medium" :fill="'currentColor'" />
-            Filters
-            <span v-if="hasActiveFilters" class="pd-thin radius-thin bg-main-small t-main p-small fw-medium">
-              Active
-            </span>
-          </button>
-        </div>
-
-        <div v-if="showFilters" class="mn-t-medium pd-x-medium br-t-1px br-black-transp-10">
-          <div class="cols-3 gap-regular mobile:cols-1">
-            <div>
-              <label class="d-block p-small fw-medium mn-b-small">Status</label>
-              <select
-                v-model="statusFilter"
-                class="w-100 pd-small radius-medium bg-white"
-                style="outline: none;"
-              >
-                <option value="all">All Statuses</option>
-                <option value="active">Active</option>
-                <option value="draft">Draft</option>
-                <option value="completed">Completed</option>
-                <option value="archived">Archived</option>
-                <option value="paused">Paused</option>
-              </select>
-            </div>
-
-            <div>
-              <label class="d-block p-small fw-medium mn-b-small">Risk Level</label>
-              <select
-                v-model="riskFilter"
-                class="w-100 pd-small radius-medium bg-white"
-                style="outline: none;"
-              >
-                <option value="all">All Risks</option>
-                <option value="low">Low</option>
-                <option value="medium">Medium</option>
-                <option value="high">High</option>
-              </select>
-            </div>
-
-            <div class="flex flex-align-end">
-              <button
-                @click="clearFilters"
-                class="w-100 pd-small radius-medium hover:bg-light ease-cubic-in-out cursor-pointer bg-white"
-              >
-                Clear All Filters
-              </button>
-            </div>
-          </div>
+        <div class="flex-child-1 pos-relative">
+          <IconSearch class="i-medium pos-absolute pos-l-small pos-t-regular" :fill="'rgb(var(--grey))'" />
+          <input
+            v-model="searchQuery"
+            type="text"
+            placeholder="Search initiatives by name, description..."
+            class="w-100 pd-small pd-l-extra radius-medium bg-white"
+            style="outline: none;"
+          />
         </div>
       </div>
 
-      <div v-if="filteredInitiatives.length === 0 && initiatives.length > 0" class="br-black-transp-10 br-1px radius-medium pd-semi t-center">
-        <p class="p-small t-transp mn-b-small">No initiatives match your filters</p>
-        <button
-          @click="clearFilters"
-          class="t-main hover:t-main-semi fw-medium cursor-pointer bg-transparent border-none"
-        >
-          Clear filters
-        </button>
+      <div v-if="filteredInitiatives.length === 0 && searchQuery">
+        <div class="br-black-transp-10 br-1px radius-medium pd-semi t-center">
+          <p class="p-small t-transp mn-b-small">No initiatives match your search</p>
+        </div>
       </div>
 
       <div v-else-if="filteredInitiatives.length === 0">
@@ -147,7 +65,7 @@ const hasActiveFilters = computed(() =>
           title="No initiatives yet"
           message="Get started by creating your first initiative to organize your work."
           actionText="Create Initiative"
-          @action="$router.push({ name: 'Create Initiative' })"
+          @action="$router.push('/governance/create')"
         >
           <template #icon>
             <svg class="i-big t-transp" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -161,9 +79,6 @@ const hasActiveFilters = computed(() =>
       </div>
 
       <div v-else>
-        <div class="mn-b-medium p-small t-transp">
-          Showing {{ filteredInitiatives.length }} of {{ initiatives.length }} initiatives
-        </div>
         <div class="cols-3 gap-small mobile:cols-1 tablet:cols-2">
           <CardInitiativeItem
             v-for="initiative in filteredInitiatives"

package/src/modules/governance/views/components/pages/{Milestone.vue → Sprint.vue}

@@ -1,17 +1,21 @@
 <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 EmptyState from '../partials/EmptyState.vue';
 import CardTaskItem from '../blocks/CardTaskItem.vue';
-import { mockMilestones, mockTasks } from '../../../data/mockData';
+import { sprintsActions, sprintsState } from '../../store/sprints';
+import { tasksActions, tasksState } from '../../store/tasks';
+import { useGlobalMixins } from '@martyrs/src/modules/core/views/mixins/mixins.js';
 import { IconArrow, IconCalendar, IconPlus, IconCross } from '@martyrs/src/modules/icons/icons.client.js';
 
+const { formatDate } = useGlobalMixins();
+
 const route = useRoute();
 const showTaskForm = ref(false);
 
-const milestone = computed(() => mockMilestones.find(m => m.id === route.params.id));
-const tasks = computed(() => mockTasks.filter(t => t.milestoneId === route.params.id));
+const sprint = computed(() => sprintsState.current);
+const tasks = computed(() => tasksState.all.filter(t => String(t.sprint?._id || t.sprint) === route.params.sprintId));
 
 const columns = [
   { id: 'proposed', title: 'Proposed', status: 'proposed' },
@@ -22,14 +26,6 @@ const columns = [
   { id: 'completed', title: 'Completed', status: 'completed' },
 ];
 
-const formatDate = (dateString) => {
-  return new Date(dateString).toLocaleDateString('en-US', {
-    month: 'short',
-    day: 'numeric',
-    year: 'numeric',
-  });
-};
-
 const getTasksForColumn = (status) => {
   return tasks.value.filter(task => task.status === status);
 };
@@ -38,14 +34,19 @@ const handleProposeTask = (data) => {
   console.log('Proposing task:', data);
   showTaskForm.value = false;
 };
+
+onMounted(async () => {
+  await sprintsActions.getSprintById(route.params.sprintId);
+  await tasksActions.getAllTasks();
+});
 </script>
 
 <template>
-  <div v-if="!milestone" class="min-h-100vh flex flex-center flex">
+  <div v-if="!sprint || !sprint._id" class="min-h-100vh flex flex-center flex">
     <div class="t-center">
-      <h2 class="h2 fw-medium mn-b-small">Milestone not found</h2>
-      <router-link :to="{ name: 'Initiatives' }" class="t-main hover:t-main-semi">
-        Back to initiatives
+      <h2 class="h2 fw-medium mn-b-small">Sprint not found</h2>
+      <router-link :to="`/governance/initiatives/${route.params.id}/sprints`" class="t-main hover:t-main-semi">
+        Back to sprints
       </router-link>
     </div>
   </div>
@@ -53,8 +54,8 @@ const handleProposeTask = (data) => {
   <div v-else class="min-h-100vh">
     <div class="pd-medium pd-y-semi">
       <router-link
-        :to="{ name: 'Initiative', params: { id: milestone.initiativeId } }"
-        class="flex flex-v-center t-grey hover:t-dark mn-b-semi ease-cubic-in-out"
+        :to="`/governance/initiatives/${route.params.id}/sprints`"
+        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'" />
@@ -65,14 +66,14 @@ const handleProposeTask = (data) => {
         <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="milestone.status" />
-              <div class="flex flex-v-center p-small t-grey">
+              <TaskStatusBadge :status="sprint.status" />
+              <div v-if="sprint.startDate || sprint.dueDate" class="flex flex-v-center p-small t-dark">
                 <IconCalendar class="i-regular mn-r-micro" :fill="'currentColor'" />
-                {{ formatDate(milestone.startDate) }} - {{ formatDate(milestone.dueDate) }}
+                {{ formatDate(sprint.startDate, { dateOnly: true }) }} - {{ formatDate(sprint.dueDate, { dateOnly: true }) }}
               </div>
             </div>
-            <h1 class="h1 fw-medium mn-b-small">{{ milestone.name }}</h1>
-            <p class="p-semi t-grey">{{ milestone.description }}</p>
+            <h1 class="h1 fw-medium mn-b-small">{{ sprint.name }}</h1>
+            <p class="p-semi t-dark">{{ sprint.description }}</p>
           </div>
           <button
             @click="showTaskForm = true"
@@ -83,35 +84,36 @@ const handleProposeTask = (data) => {
           </button>
         </div>
 
-        <div class="br-t-1px br-black-transp-10 pd-x-semi">
+        <div>
           <div class="flex flex-justify-between flex-v-center mn-b-small">
-            <span class="p-small fw-medium t-grey">Progress</span>
-            <span class="h2 fw-medium">{{ milestone.progress }}%</span>
+            <span class="p-small fw-medium t-dark">Progress</span>
+            <span class="h2 fw-medium">{{ sprint.progress || 0 }}%</span>
           </div>
           <div class="w-100 bg-white radius-extra h-3r o-hidden">
             <div
               class="bg-main h-100 ease-cubic-in-out"
-              :style="{ width: `${milestone.progress}%` }"
+              :style="{ width: `${sprint.progress || 0}%` }"
             />
           </div>
-          <div class="mn-t-medium flex flex-v-center gap-small p-small t-grey">
+          <div v-if="sprint.owner" class="mn-t-medium flex flex-v-center gap-small p-small t-dark">
             <div class="flex flex-v-center gap-thin">
               <img
-                :src="milestone.owner.avatar"
-                :alt="milestone.owner.name"
+                v-if="sprint.owner.avatar"
+                :src="sprint.owner.avatar"
+                :alt="sprint.owner.name"
                 class="i-medium radius-extra"
               />
               <div>
-                <div class="p-micro t-grey">Owner</div>
-                <div class="fw-medium">{{ milestone.owner.name }}</div>
+                <div class="p-micro t-dark">Owner</div>
+                <div class="fw-medium">{{ sprint.owner.name || sprint.owner }}</div>
               </div>
             </div>
-            <div v-if="milestone.contributors.length > 0">
-              <div class="p-micro t-grey mn-b-micro">Contributors</div>
+            <div v-if="sprint.contributors && sprint.contributors.length > 0">
+              <div class="p-micro t-dark mn-b-micro">Contributors</div>
               <div class="flex" style="margin-left: -0.25rem;">
                 <img
-                  v-for="contributor in milestone.contributors"
-                  :key="contributor.id"
+                  v-for="contributor in sprint.contributors"
+                  :key="contributor._id"
                   :src="contributor.avatar"
                   :alt="contributor.name"
                   :title="contributor.name"
@@ -131,7 +133,7 @@ const handleProposeTask = (data) => {
       <EmptyState
         v-if="tasks.length === 0"
         title="No tasks yet"
-        message="Propose tasks to start working on this milestone."
+        message="Propose tasks to start working on this sprint."
         actionText="Propose Task"
         @action="showTaskForm = true"
       />
@@ -140,14 +142,14 @@ const handleProposeTask = (data) => {
         <div v-for="column in columns" :key="column.id" class="br-black-transp-10 br-1px radius-medium pd-medium">
           <div class="flex flex-justify-between flex-v-center mn-b-medium">
             <h3 class="fw-medium">{{ column.title }}</h3>
-            <span class="bg-light t-grey p-micro fw-medium pd-micro pd-x-thin radius-extra">
+            <span class="bg-light t-dark p-micro fw-medium pd-micro pd-x-thin radius-extra">
               {{ getTasksForColumn(column.status).length }}
             </span>
           </div>
           <div class="flex flex-column gap-small">
             <CardTaskItem
               v-for="task in getTasksForColumn(column.status)"
-              :key="task.id"
+              :key="task._id"
               :task="task"
             />
           </div>
@@ -158,11 +160,11 @@ const handleProposeTask = (data) => {
         <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">
+            <button @click="showTaskForm = 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 proposal form coming soon...</p>
+          <p class="p-regular t-dark t-center">Task proposal form coming soon...</p>
         </div>
       </div>
     </div>