@ozdao/martyrs 0.2.547 → 0.2.548

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

@@ -1,20 +1,178 @@
 <script setup>
-import { onMounted, ref } from 'vue';
+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';
 
 const initiatives = ref([]);
+const searchQuery = ref('');
+const statusFilter = ref('all');
+const riskFilter = ref('all');
+const showFilters = ref(false);
 
 onMounted(async () => {
   await initiativesActions.getAllInitiatives();
   initiatives.value = initiativesState.all;
 });
+
+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;
+  });
+});
+
+const clearFilters = () => {
+  searchQuery.value = '';
+  statusFilter.value = 'all';
+  riskFilter.value = 'all';
+};
+
+const hasActiveFilters = computed(() =>
+  statusFilter.value !== 'all' || riskFilter.value !== 'all'
+);
 </script>
 
 <template>
-  <div>
-    <h1>Initiatives</h1>
-    <router-link :to="{name:'Create Initiative' }">Create Initiative</router-link>
-    <CardInitiativeItem v-for="initiative in initiatives" :key="initiative.id" :initiative="initiative" />
+  <div class="min-h-100vh bg-light">
+    <div class="w-max-66r mn-auto pd-medium pd-y-semi">
+      <div class="flex flex-justify-between flex-v-center mn-b-semi">
+        <div>
+          <h1 class="h1 t-medium">Initiatives</h1>
+          <p class="p-regular t-grey mn-t-thin">Manage and track all your initiatives</p>
+        </div>
+        <router-link
+          :to="{ name: 'Create Initiative' }"
+          class="bg-main hover-bg-main-semi t-white t-medium pd-small pd-x-semi radius-medium flex flex-v-center gap-thin transition-cubic-in-out cursor-pointer"
+          style="text-decoration: none;"
+        >
+          <IconPlus class="i-medium" :fill="'currentColor'" />
+          Create Initiative
+        </router-link>
+      </div>
+
+      <div class="bg-white 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 br-1px br-light radius-medium"
+              style="outline: none;"
+            />
+          </div>
+
+          <button
+            @click="showFilters = !showFilters"
+            class="flex flex-v-center gap-thin pd-medium br-1px br-light radius-medium hover-bg-light transition-cubic-in-out cursor-pointer bg-white"
+          >
+            <IconFilter class="i-medium" :fill="'currentColor'" />
+            Filters
+            <span v-if="hasActiveFilters" class="pd-micro pd-x-thin bg-main-small t-main radius-regular p-micro t-medium">
+              Active
+            </span>
+          </button>
+        </div>
+
+        <div v-if="showFilters" class="mn-t-medium pd-t-medium br-t br-1px br-light">
+          <div class="cols-3 gap-regular mobile:cols-1">
+            <div>
+              <label class="d-block p-small t-medium mn-b-thin">Status</label>
+              <select
+                v-model="statusFilter"
+                class="w-100 pd-small br-1px br-light radius-medium"
+                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 t-medium mn-b-thin">Risk Level</label>
+              <select
+                v-model="riskFilter"
+                class="w-100 pd-small br-1px br-light radius-medium"
+                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 br-1px br-light radius-medium hover-bg-light transition-cubic-in-out cursor-pointer bg-white"
+              >
+                Clear All Filters
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div v-if="filteredInitiatives.length === 0 && initiatives.length > 0" class="bg-white radius-medium pd-extra t-center">
+        <p class="p-semi t-grey mn-b-thin">No initiatives match your filters</p>
+        <button
+          @click="clearFilters"
+          class="t-main hover-t-main-semi t-medium cursor-pointer bg-transparent border-none"
+        >
+          Clear filters
+        </button>
+      </div>
+
+      <div v-else-if="filteredInitiatives.length === 0">
+        <EmptyState
+          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' })"
+        >
+          <template #icon>
+            <svg class="w-12r h-12r t-grey" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <circle cx="12" cy="12" r="10"/>
+              <path d="M8 14s1.5 2 4 2 4-2 4-2"/>
+              <line x1="9" y1="9" x2="9.01" y2="9"/>
+              <line x1="15" y1="9" x2="15.01" y2="9"/>
+            </svg>
+          </template>
+        </EmptyState>
+      </div>
+
+      <div v-else>
+        <div class="mn-b-medium p-small t-grey">
+          Showing {{ filteredInitiatives.length }} of {{ initiatives.length }} initiatives
+        </div>
+        <div class="cols-3 gap-semi mobile:cols-1 tablet:cols-2">
+          <CardInitiativeItem
+            v-for="initiative in filteredInitiatives"
+            :key="initiative._id || initiative.id"
+            :initiative="initiative"
+          />
+        </div>
+      </div>
+    </div>
   </div>
-</template>
+</template>

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

@@ -0,0 +1,170 @@
+<script setup>
+import { ref, computed } 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 { IconArrow, IconCalendar, IconPlus, IconCross } from '@martyrs/src/modules/icons/icons.client.js';
+
+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 columns = [
+  { id: 'proposed', title: 'Proposed', status: 'proposed' },
+  { id: 'voting', title: 'Voting', status: 'voting' },
+  { id: 'not_started', title: 'Not Started', status: 'not_started' },
+  { id: 'in_progress', title: 'In Progress', status: 'in_progress' },
+  { id: 'review', title: 'Review', status: 'review' },
+  { 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);
+};
+
+const handleProposeTask = (data) => {
+  console.log('Proposing task:', data);
+  showTaskForm.value = false;
+};
+</script>
+
+<template>
+  <div v-if="!milestone" class="min-h-100vh bg-light flex flex-center flex">
+    <div class="t-center">
+      <h2 class="h2 t-medium mn-b-thin">Milestone not found</h2>
+      <router-link :to="{ name: 'Initiatives' }" class="t-main hover-t-main-semi">
+        Back to initiatives
+      </router-link>
+    </div>
+  </div>
+
+  <div v-else class="min-h-100vh bg-light">
+    <div class="w-max-80r mn-auto 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 transition-cubic-in-out"
+        style="text-decoration: none; width: fit-content;"
+      >
+        <IconArrow class="i-medium mn-r-thin" :rotation="180" :fill="'currentColor'" />
+        Back to initiative
+      </router-link>
+
+      <div class="bg-white radius-semi o-hidden pd-semi mn-b-semi">
+        <div class="flex flex-justify-between flex-v-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">
+                <IconCalendar class="i-small mn-r-micro" :fill="'currentColor'" />
+                {{ formatDate(milestone.startDate) }} - {{ formatDate(milestone.dueDate) }}
+              </div>
+            </div>
+            <h1 class="h1 t-medium mn-b-small">{{ milestone.name }}</h1>
+            <p class="p-semi t-grey">{{ milestone.description }}</p>
+          </div>
+          <button
+            @click="showTaskForm = true"
+            class="bg-main hover-bg-main-semi t-white t-medium pd-small pd-x-medium radius-medium flex flex-v-center gap-thin transition-cubic-in-out mn-l-medium"
+          >
+            <IconPlus class="i-medium" :fill="'currentColor'" />
+            Propose Task
+          </button>
+        </div>
+
+        <div class="br-t br-1px br-light pd-t-semi">
+          <div class="flex flex-justify-between flex-v-center mn-b-small">
+            <span class="p-small t-medium t-grey">Progress</span>
+            <span class="h2 t-medium">{{ milestone.progress }}%</span>
+          </div>
+          <div class="w-100 bg-light radius-round h-3r o-hidden">
+            <div
+              class="bg-main h-100 transition-cubic-in-out"
+              :style="{ width: `${milestone.progress}%` }"
+            />
+          </div>
+          <div class="mn-t-medium flex flex-v-center gap-semi p-small t-grey">
+            <div class="flex flex-v-center gap-thin">
+              <img
+                :src="milestone.owner.avatar"
+                :alt="milestone.owner.name"
+                class="i-medium radius-extra"
+              />
+              <div>
+                <div class="p-micro t-grey">Owner</div>
+                <div class="t-medium">{{ milestone.owner.name }}</div>
+              </div>
+            </div>
+            <div v-if="milestone.contributors.length > 0">
+              <div class="p-micro t-grey mn-b-micro">Contributors</div>
+              <div class="flex" style="margin-left: -0.25rem;">
+                <img
+                  v-for="contributor in milestone.contributors"
+                  :key="contributor.id"
+                  :src="contributor.avatar"
+                  :alt="contributor.name"
+                  :title="contributor.name"
+                  class="i-medium radius-extra br-2px br-white"
+                  style="margin-left: -0.5rem;"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="mn-b-semi">
+        <h2 class="h2 t-medium">Tasks</h2>
+      </div>
+
+      <EmptyState
+        v-if="tasks.length === 0"
+        title="No tasks yet"
+        message="Propose tasks to start working on this milestone."
+        actionText="Propose Task"
+        @action="showTaskForm = true"
+      />
+
+      <div v-else class="cols-6 gap-regular">
+        <div v-for="column in columns" :key="column.id" class="bg-light radius-medium pd-medium">
+          <div class="flex flex-justify-between flex-v-center mn-b-medium">
+            <h3 class="t-medium">{{ column.title }}</h3>
+            <span class="bg-white t-grey p-micro t-medium pd-micro pd-x-thin radius-round">
+              {{ getTasksForColumn(column.status).length }}
+            </span>
+          </div>
+          <div class="flex flex-column gap-small">
+            <CardTaskItem
+              v-for="task in getTasksForColumn(column.status)"
+              :key="task.id"
+              :task="task"
+            />
+          </div>
+        </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-white radius-medium pd-semi w-max-30r">
+          <div class="flex flex-justify-between flex-v-center mn-b-medium">
+            <h3 class="h3 t-medium">Propose Task</h3>
+            <button @click="showTaskForm = false" class="t-grey hover-t-dark transition-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/Roadmap.vue

@@ -0,0 +1,238 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useRoute } from 'vue-router';
+import CardMilestoneItem from '../blocks/CardMilestoneItem.vue';
+import EmptyState from '../partials/EmptyState.vue';
+import { mockInitiatives, mockMilestones } from '../../../data/mockData';
+import { IconArrow, IconCalendar, IconTime, IconEntityInfo, IconCheck } from '@martyrs/src/modules/icons/icons.client.js';
+
+const route = useRoute();
+const activeTab = ref('milestones');
+
+const initiative = computed(() => mockInitiatives.find(i => i.id === route.params.id));
+const milestones = computed(() => mockMilestones.filter(m => m.initiativeId === 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 overallProgress = computed(() => {
+  return milestones.value.length > 0
+    ? Math.round((completedMilestones.value.length / milestones.value.length) * 100)
+    : 0;
+});
+
+const formatDate = (dateString) => {
+  return new Date(dateString).toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+  });
+};
+</script>
+
+<template>
+  <div v-if="!initiative" class="min-h-100vh bg-light flex flex-center flex">
+    <div class="t-center">
+      <h2 class="h2 t-medium mn-b-thin">Initiative not found</h2>
+      <router-link :to="{ name: 'Initiatives' }" class="t-main hover-t-main-semi">
+        Back to initiatives
+      </router-link>
+    </div>
+  </div>
+
+  <div v-else class="min-h-100vh bg-light">
+    <div class="w-max-50r mn-auto 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 transition-cubic-in-out"
+        style="text-decoration: none; width: fit-content;"
+      >
+        <IconArrow class="i-medium mn-r-thin" :rotation="180" :fill="'currentColor'" />
+        Back to initiative
+      </router-link>
+
+      <div class="bg-white radius-semi o-hidden pd-semi mn-b-semi">
+        <div class="flex flex-justify-between flex-v-start mn-b-semi">
+          <div class="flex-child-1">
+            <h1 class="h1 t-medium mn-b-thin">{{ initiative.title }}</h1>
+            <p class="p-semi t-grey mn-b-medium">{{ initiative.description }}</p>
+            <div class="flex flex-v-center gap-semi p-small">
+              <div v-if="initiative.date" class="flex flex-v-center gap-thin t-grey">
+                <IconCalendar class="i-small" :fill="'currentColor'" />
+                <span>Started {{ formatDate(initiative.date) }}</span>
+              </div>
+              <div v-if="initiative.targetReleaseDate" class="flex flex-v-center gap-thin t-grey">
+                <IconCalendar class="i-small" :fill="'currentColor'" />
+                <span>Target {{ formatDate(initiative.targetReleaseDate) }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="br-b br-1px br-light mn-b-semi">
+          <div class="flex gap-semi">
+            <button
+              @click="activeTab = 'milestones'"
+              :class="`pd-b-medium pd-x-thin br-b-2px t-medium transition-cubic-in-out ${
+                activeTab === 'milestones'
+                  ? 'br-main t-main'
+                  : 'br-transparent t-grey hover-t-dark'
+              }`"
+            >
+              Milestones
+            </button>
+            <button
+              @click="activeTab = 'releases'"
+              :class="`pd-b-medium pd-x-thin br-b-2px t-medium transition-cubic-in-out ${
+                activeTab === 'releases'
+                  ? 'br-main t-main'
+                  : 'br-transparent t-grey hover-t-dark'
+              }`"
+            >
+              Releases
+            </button>
+          </div>
+        </div>
+
+        <div v-if="activeTab === 'milestones'" class="br-t br-1px br-light pd-t-semi">
+          <div class="flex flex-justify-between flex-v-center mn-b-small">
+            <span class="p-small t-medium t-grey">Overall Progress</span>
+            <span class="h2 t-medium">{{ overallProgress }}%</span>
+          </div>
+          <div class="w-100 bg-light radius-round h-3r o-hidden mn-b-medium">
+            <div
+              class="bg-main h-100 transition-cubic-in-out"
+              :style="{ width: `${overallProgress}%` }"
+            />
+          </div>
+          <div class="flex flex-v-center gap-semi p-small">
+            <div class="flex flex-v-center gap-thin">
+              <div class="w-3r h-3r bg-green-nice radius-round" />
+              <span class="t-grey">{{ completedMilestones.length }} Completed</span>
+            </div>
+            <div class="flex flex-v-center gap-thin">
+              <div class="w-3r h-3r bg-main radius-round" />
+              <span class="t-grey">{{ inProgressMilestones.length }} In Progress</span>
+            </div>
+            <div class="flex flex-v-center gap-thin">
+              <div class="w-3r h-3r bg-grey radius-round" />
+              <span class="t-grey">{{ notStartedMilestones.length }} Not Started</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <template v-if="activeTab === 'milestones'">
+        <div class="mn-b-semi">
+          <h2 class="h2 t-medium">Milestones Roadmap</h2>
+          <p class="p-regular t-grey mn-t-micro">Track progress across all milestones</p>
+        </div>
+
+        <EmptyState
+          v-if="milestones.length === 0"
+          title="No milestones yet"
+          message="Create milestones to start tracking progress on this initiative."
+        />
+
+        <div v-else class="flex flex-column gap-semi">
+          <div v-if="inProgressMilestones.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 t-medium">In Progress</h3>
+              <span class="p-small t-grey">({{ inProgressMilestones.length }})</span>
+            </div>
+            <div class="cols-3 gap-semi">
+              <CardMilestoneItem
+                v-for="milestone in inProgressMilestones"
+                :key="milestone.id"
+                :milestone="milestone"
+              />
+            </div>
+          </div>
+
+          <div v-if="notStartedMilestones.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 t-medium">Not Started</h3>
+              <span class="p-small t-grey">({{ notStartedMilestones.length }})</span>
+            </div>
+            <div class="cols-3 gap-semi">
+              <CardMilestoneItem
+                v-for="milestone in notStartedMilestones"
+                :key="milestone.id"
+                :milestone="milestone"
+              />
+            </div>
+          </div>
+
+          <div v-if="completedMilestones.length > 0">
+            <div class="flex flex-v-center gap-thin mn-b-medium">
+              <IconCheck class="i-medium" :fill="'rgb(var(--green-nice))'" />
+              <h3 class="p-semi t-medium">Completed</h3>
+              <span class="p-small t-grey">({{ completedMilestones.length }})</span>
+            </div>
+            <div class="cols-3 gap-semi">
+              <CardMilestoneItem
+                v-for="milestone in completedMilestones"
+                :key="milestone.id"
+                :milestone="milestone"
+              />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template v-else>
+        <div class="mn-b-semi">
+          <h2 class="h2 t-medium">Release History</h2>
+          <p class="p-regular t-grey mn-t-micro">All releases for this product</p>
+        </div>
+
+        <EmptyState
+          v-if="!initiative.releases || initiative.releases.length === 0"
+          title="No releases yet"
+          message="Releases will appear here once they are created."
+        />
+
+        <div v-else class="flex flex-column gap-regular">
+          <div
+            v-for="(release, index) in initiative.releases"
+            :key="index"
+            class="bg-white radius-medium o-hidden pd-semi hover-scale-1 transition-cubic-in-out"
+          >
+            <div class="flex flex-justify-between flex-v-start mn-b-medium">
+              <div class="flex-child-1">
+                <div class="flex flex-v-center gap-small mn-b-thin">
+                  <h3 class="h3 t-medium">{{ release.version }}</h3>
+                  <span
+                    :class="`pd-micro pd-x-small radius-round p-small t-medium ${
+                      release.status === 'released'
+                        ? 'bg-green-small t-green-nice'
+                        : release.status === 'in_progress'
+                        ? 'bg-main-small t-main'
+                        : 'bg-light t-grey'
+                    }`"
+                  >
+                    {{ release.status }}
+                  </span>
+                </div>
+                <div class="flex flex-v-center gap-thin p-small t-grey mn-b-small">
+                  <IconCalendar class="i-small" :fill="'currentColor'" />
+                  <span>{{ formatDate(release.date) }}</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-t-medium br-t br-1px br-light">
+              <h4 class="p-small t-medium t-grey mn-b-thin">Migrations</h4>
+              <ul class="pd-l-semi p-small t-grey flex flex-column gap-micro" style="list-style: disc;">
+                <li v-for="(migration, idx) in release.migrations" :key="idx">{{ migration }}</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>