@ozdao/martyrs 0.2.547 → 0.2.549

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

@@ -1,30 +1,177 @@
 <script setup>
-import { onMounted, ref } from 'vue';
+import { ref, computed } from 'vue';
 import { useRoute } from 'vue-router';
-import { votingsActions, votingsState } from '../../store/votings';
-import VoteForm from '../sections/VoteForm.vue';
-import VotingResult from '../partials/VotingResult.vue';
+import TaskStatusBadge from '../partials/TaskStatusBadge.vue';
+import VoteForm from '../partials/VoteForm.vue';
+import VotingResults from '../partials/VotingResults.vue';
+import LinkedEntityCard from '../partials/LinkedEntityCard.vue';
+import { mockVotings, mockTasks, mockInitiatives, mockMilestones } from '../../../data/mockData';
+import { IconArrow, IconCalendar } from '@martyrs/src/modules/icons/icons.client.js';
 
 const route = useRoute();
-const voting = ref(null);
-const results = ref(null);
-
-onMounted(async () => {
-  const id = route.params.id;
-  await votingsActions.getVotingById(id);
-  voting.value = votingsState.current;
-  if (voting.value.status === 'ended') {
-    results.value = await votingsActions.getVotingResults(id);
+const hasVoted = ref(false);
+
+const voting = computed(() => mockVotings.find(v => v.id === route.params.id));
+
+const typeConfig = {
+  create_task: { label: 'Create Task', color: 'bg-main-small t-main' },
+  approve_task: { label: 'Approve Task', color: 'bg-green-nice t-white' },
+  general: { label: 'General', color: 'bg-fifth-small t-fifth' },
+};
+
+const typeInfo = computed(() => voting.value ? (typeConfig[voting.value.type] || typeConfig.general) : null);
+const isActive = computed(() => voting.value && voting.value.status === 'pending');
+
+const percentageYes = computed(() =>
+  voting.value && voting.value.totalVotes > 0
+    ? (voting.value.yesVotes / voting.value.totalVotes) * 100
+    : 0
+);
+const percentageNo = computed(() =>
+  voting.value && voting.value.totalVotes > 0
+    ? (voting.value.noVotes / voting.value.totalVotes) * 100
+    : 0
+);
+
+const results = computed(() => {
+  if (!voting.value) return null;
+  return {
+    totalVotes: voting.value.totalVotes,
+    yesVotes: voting.value.yesVotes,
+    noVotes: voting.value.noVotes,
+    abstainVotes: voting.value.abstainVotes,
+    percentageYes: percentageYes.value,
+    percentageNo: percentageNo.value,
+    threshold: voting.value.threshold,
+  };
+});
+
+const linkedEntity = computed(() => {
+  if (!voting.value) return null;
+
+  if (voting.value.linkedEntityType === 'task' && voting.value.linkedEntityId) {
+    const task = mockTasks.find(t => t.id === voting.value.linkedEntityId);
+    if (task) {
+      return {
+        type: 'task',
+        data: { id: task.id, title: task.title, status: task.status }
+      };
+    }
+  } else if (voting.value.linkedEntityType === 'initiative' && voting.value.linkedEntityId) {
+    const initiative = mockInitiatives.find(i => i.id === voting.value.linkedEntityId);
+    if (initiative) {
+      return {
+        type: 'initiative',
+        data: { id: initiative.id, title: initiative.title, status: initiative.status }
+      };
+    }
+  } else if (voting.value.linkedEntityType === 'milestone' && voting.value.linkedEntityId) {
+    const milestone = mockMilestones.find(m => m.id === voting.value.linkedEntityId);
+    if (milestone) {
+      return {
+        type: 'milestone',
+        data: { id: milestone.id, name: milestone.name, status: milestone.status }
+      };
+    }
   }
+  return null;
 });
+
+const formatDate = (dateString) => {
+  return new Date(dateString).toLocaleString('en-US', {
+    month: 'long',
+    day: 'numeric',
+    year: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+};
+
+const handleVoteSubmit = (vote, comment) => {
+  console.log('Vote submitted:', { vote, comment });
+  hasVoted.value = true;
+};
 </script>
 
 <template>
-  <div v-if="voting">
-    <h1>{{ voting.title }}</h1>
-    <p>{{ voting.description }}</p>
-    <p>Status: {{ voting.status }}</p>
-    <VoteForm v-if="voting.status === 'active'" :votingId="voting.id" />
-    <VotingResult v-if="results" :results="results" />
+  <div v-if="!voting" class="min-h-100vh bg-light flex flex-center flex">
+    <div class="t-center">
+      <h2 class="h2 t-medium mn-b-thin">Voting not found</h2>
+      <router-link :to="{ name: 'Votings' }" class="t-main hover-t-main-semi">
+        Back to votings
+      </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: 'Votings' }"
+        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 votings
+      </router-link>
+
+      <div class="bg-white radius-semi o-hidden mn-b-semi">
+        <div class="pd-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">
+                <span :class="`pd-micro pd-x-small radius-regular p-micro t-medium ${typeInfo.color}`">
+                  {{ typeInfo.label }}
+                </span>
+                <TaskStatusBadge :status="voting.status" />
+              </div>
+              <h1 class="h1 t-medium mn-b-medium">{{ voting.title }}</h1>
+              <p class="p-semi t-grey t-line-relaxed">{{ voting.description }}</p>
+            </div>
+          </div>
+
+          <div class="br-t br-1px br-light pd-t-semi mn-b-semi">
+            <div class="cols-2 gap-semi">
+              <div class="flex flex-v-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</div>
+                  <div class="p-regular t-medium">{{ formatDate(voting.createdAt) }}</div>
+                </div>
+              </div>
+              <div class="flex flex-v-start gap-small">
+                <IconCalendar class="i-medium mn-t-micro" :fill="'rgb(var(--grey))'" />
+                <div>
+                  <div class="p-small t-grey mn-b-micro">Ends</div>
+                  <div class="p-regular t-medium">{{ formatDate(voting.endDate) }}</div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div v-if="linkedEntity" class="br-t br-1px br-light pd-t-semi mn-b-semi">
+            <h3 class="p-small t-medium mn-b-small">Related Item</h3>
+            <LinkedEntityCard :entityType="linkedEntity.type" :entityData="linkedEntity.data" />
+          </div>
+
+          <div class="br-t br-1px br-light pd-t-semi">
+            <VotingResults :results="results" :votes="voting.votes" />
+          </div>
+        </div>
+      </div>
+
+      <div v-if="isActive && !hasVoted" class="bg-white radius-semi pd-semi">
+        <VoteForm @submit="handleVoteSubmit" />
+      </div>
+
+      <div v-if="hasVoted" class="bg-green-small br-1px br-green-nice radius-semi pd-semi t-center">
+        <div class="t-green-nice t-medium h5 mn-b-thin">Thank you for voting!</div>
+        <p class="t-green-nice">Your vote has been recorded.</p>
+      </div>
+
+      <div v-if="!isActive" class="bg-light br-1px br-light radius-semi pd-semi t-center">
+        <div class="t-grey t-medium h5 mn-b-thin">Voting Closed</div>
+        <p class="t-grey">This voting has ended.</p>
+      </div>
+    </div>
   </div>
-</template>
+</template>

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

@@ -1,19 +1,96 @@
 <script setup>
-import { onMounted, ref } from 'vue';
-import { votingsActions, votingsState } from '../../store/votings';
+import { ref, computed } from 'vue';
+import { useRoute } from 'vue-router';
 import CardVotingItem from '../blocks/CardVotingItem.vue';
+import EmptyState from '../partials/EmptyState.vue';
+import { mockVotings } from '../../../data/mockData';
 
-const votings = ref([]);
+const route = useRoute();
+const votings = ref(mockVotings);
+const typeFilter = ref('all');
+const statusFilter = ref('all');
 
-onMounted(async () => {
-  await votingsActions.getAllVotings();
-  votings.value = votingsState.all;
+const filteredVotings = computed(() => {
+  return votings.value.filter((voting) => {
+    const matchesType = typeFilter.value === 'all' || voting.type === typeFilter.value;
+    const matchesStatus = statusFilter.value === 'all' || voting.status === statusFilter.value;
+    return matchesType && matchesStatus;
+  });
 });
 </script>
 
 <template>
   <div>
-    <h1>Votings</h1>
-    <CardVotingItem v-for="voting in votings" :key="voting.id" :voting="voting" />
+    <div v-if="!route.params.id" class="min-h-100vh bg-light">
+      <div class="w-max-66r mn-auto pd-medium pd-y-semi">
+        <div class="mn-b-semi">
+          <h1 class="h1 t-medium mn-b-thin">Votings</h1>
+          <p class="p-regular t-grey">View and participate in all active votings</p>
+        </div>
+
+        <div class="bg-white radius-medium pd-semi mn-b-semi">
+          <div class="cols-2 gap-regular mobile:cols-1">
+            <div>
+              <label for="typeFilter" class="d-block p-small t-medium mn-b-thin">Type</label>
+              <select
+                id="typeFilter"
+                v-model="typeFilter"
+                class="w-100 pd-medium br-1px br-light radius-medium"
+                style="outline: none;"
+              >
+                <option value="all">All Types</option>
+                <option value="create_task">Create Task</option>
+                <option value="approve_task">Approve Task</option>
+                <option value="general">General</option>
+              </select>
+            </div>
+
+            <div>
+              <label for="statusFilter" class="d-block p-small t-medium mn-b-thin">Status</label>
+              <select
+                id="statusFilter"
+                v-model="statusFilter"
+                class="w-100 pd-medium br-1px br-light radius-medium"
+                style="outline: none;"
+              >
+                <option value="all">All Statuses</option>
+                <option value="pending">Pending</option>
+                <option value="approved">Approved</option>
+                <option value="rejected">Rejected</option>
+              </select>
+            </div>
+          </div>
+        </div>
+
+        <div v-if="filteredVotings.length === 0">
+          <EmptyState
+            title="No votings found"
+            message="Try adjusting your filters to see more votings."
+          >
+            <template #icon>
+              <svg class="w-12r h-12r t-grey" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
+              </svg>
+            </template>
+          </EmptyState>
+        </div>
+
+        <div v-else>
+          <div class="flex flex-justify-between flex-v-center mn-b-medium">
+            <p class="p-regular t-grey">
+              Showing {{ filteredVotings.length }} of {{ votings.length }} votings
+            </p>
+          </div>
+          <div class="cols-3 gap-semi mobile:cols-1 tablet:cols-2">
+            <CardVotingItem
+              v-for="voting in filteredVotings"
+              :key="voting._id || voting.id"
+              :voting="voting"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+    <router-view v-else />
   </div>
-</template>
+</template>

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

@@ -0,0 +1,41 @@
+<script setup>
+import { defineProps } from 'vue';
+
+const props = defineProps({
+  title: {
+    type: String,
+    required: true
+  },
+  message: {
+    type: String,
+    required: true
+  },
+  actionText: {
+    type: String,
+    default: null
+  }
+});
+
+const emit = defineEmits(['action']);
+
+const handleAction = () => {
+  emit('action');
+};
+</script>
+
+<template>
+  <div class="flex flex-column flex-align-center flex-justify-center pd-y-extra pd-x-medium">
+    <div class="bg-light radius-round pd-semi mn-b-medium">
+      <slot name="icon"></slot>
+    </div>
+    <h3 class="h3 t-medium mn-b-thin">{{ title }}</h3>
+    <p class="p-regular t-grey t-center w-max-40r mn-b-semi">{{ message }}</p>
+    <button
+      v-if="actionText"
+      @click="handleAction"
+      class="bg-main hover-bg-main-semi t-white pd-small pd-x-semi radius-medium t-medium transition-cubic-in-out cursor-pointer"
+    >
+      {{ actionText }}
+    </button>
+  </div>
+</template>

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

@@ -0,0 +1,73 @@
+<script setup>
+import { defineProps, computed } from 'vue';
+import TaskStatusBadge from './TaskStatusBadge.vue';
+import { IconOpenLink, IconCheck } from '@martyrs/src/modules/icons/icons.client.js';
+
+const props = defineProps({
+  entityType: {
+    type: String,
+    required: true,
+    validator: (value) => ['initiative', 'milestone', 'task'].includes(value)
+  },
+  entityData: {
+    type: Object,
+    required: true
+  }
+});
+
+const entityConfig = {
+  initiative: {
+    icon: 'target',
+    label: 'Initiative',
+    path: (id) => ({ name: 'Initiative', params: { id } }),
+  },
+  milestone: {
+    icon: 'layers',
+    label: 'Milestone',
+    path: (id) => ({ name: 'Milestone', params: { id } }),
+  },
+  task: {
+    icon: 'checksquare',
+    label: 'Task',
+    path: (id) => ({ name: 'Task', params: { id } }),
+  },
+};
+
+const config = computed(() => entityConfig[props.entityType]);
+const displayName = computed(() => props.entityData.title || props.entityData.name || 'Untitled');
+const routePath = computed(() => config.value.path(props.entityData.id));
+</script>
+
+<template>
+  <router-link
+    :to="routePath"
+    class="d-block bg-light radius-medium pd-medium br-1px br-light hover-br-main hover-bg-main-small transition-cubic-in-out"
+  >
+    <div class="flex flex-justify-between flex-v-start">
+      <div class="flex flex-v-start gap-small flex-child-1">
+        <div class="bg-white radius-medium pd-thin hover-bg-main-small transition-cubic-in-out">
+          <svg v-if="config.icon === 'target'" class="w-5r h-5r t-grey hover-t-main" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <circle cx="12" cy="12" r="10"/>
+            <circle cx="12" cy="12" r="6"/>
+            <circle cx="12" cy="12" r="2"/>
+          </svg>
+          <svg v-else-if="config.icon === 'layers'" class="w-5r h-5r t-grey hover-t-main" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <polygon points="12 2 2 7 12 12 22 7 12 2"/>
+            <polyline points="2 17 12 22 22 17"/>
+            <polyline points="2 12 12 17 22 12"/>
+          </svg>
+          <svg v-else class="w-5r h-5r t-grey hover-t-main" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <polyline points="9 11 12 14 22 4"/>
+            <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/>
+          </svg>
+        </div>
+        <div class="flex-child-1 min-w-0">
+          <div class="p-micro t-grey mn-b-micro">{{ config.label }}</div>
+          <h4 class="p-small t-medium mn-b-thin t-truncate">{{ displayName }}</h4>
+          <TaskStatusBadge :status="entityData.status" />
+        </div>
+      </div>
+      <IconOpenLink class="i-small flex-shrink-0 mn-l-thin" :fill="'rgb(var(--grey))'" />
+    </div>
+  </router-link>
+</template>

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

@@ -0,0 +1,35 @@
+<script setup>
+import { defineProps, computed } from 'vue';
+
+const props = defineProps({
+  status: {
+    type: String,
+    required: true
+  }
+});
+
+const statusConfig = {
+  proposed: { label: 'Proposed', color: 'bg-light' },
+  voting: { label: 'Voting', color: 'bg-main-small t-main' },
+  not_started: { label: 'Not Started', color: 'bg-fourth-small t-fourth' },
+  in_progress: { label: 'In Progress', color: 'bg-second-small t-second' },
+  review: { label: 'Review', color: 'bg-fifth-small t-fifth' },
+  completed: { label: 'Completed', color: 'bg-green-nice t-white' },
+  blocked: { label: 'Blocked', color: 'bg-red-nice t-white' },
+  cancelled: { label: 'Cancelled', color: 'bg-grey t-white' },
+  draft: { label: 'Draft', color: 'bg-light' },
+  active: { label: 'Active', color: 'bg-green-nice t-white' },
+  archived: { label: 'Archived', color: 'bg-grey t-white' },
+  approved: { label: 'Approved', color: 'bg-green-nice t-white' },
+  pending: { label: 'Pending', color: 'bg-fourth-small t-fourth' },
+  rejected: { label: 'Rejected', color: 'bg-red-nice t-white' },
+};
+
+const config = computed(() => statusConfig[props.status] || statusConfig.proposed);
+</script>
+
+<template>
+  <span :class="`pd-micro pd-x-small radius-regular p-micro t-medium ${config.color}`">
+    {{ config.label }}
+  </span>
+</template>

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

@@ -0,0 +1,100 @@
+<script setup>
+import { ref } from 'vue';
+
+const emit = defineEmits(['submit']);
+
+const selectedVote = ref(null);
+const comment = ref('');
+
+const handleSubmit = (e) => {
+  e.preventDefault();
+  if (selectedVote.value) {
+    emit('submit', selectedVote.value, comment.value);
+    selectedVote.value = null;
+    comment.value = '';
+  }
+};
+</script>
+
+<template>
+  <form @submit="handleSubmit" class="flex flex-column gap-semi">
+    <div>
+      <h4 class="p-small t-medium mn-b-small">Cast Your Vote</h4>
+      <div class="cols-3 gap-regular">
+        <button
+          type="button"
+          @click="selectedVote = 'yes'"
+          :class="`flex flex-column flex-align-center flex-justify-center pd-semi radius-medium br-2px transition-cubic-in-out ${
+            selectedVote === 'yes'
+              ? 'br-green-nice bg-green-small'
+              : 'br-light hover-br-green-nice'
+          }`"
+        >
+          <svg :class="`w-8r h-8r mn-b-thin ${selectedVote === 'yes' ? 'fill-green-nice' : 'fill-grey'}`" viewBox="0 0 24 24" fill="currentColor">
+            <path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"/>
+          </svg>
+          <span :class="`t-medium ${selectedVote === 'yes' ? 't-green-nice' : 't-grey'}`">
+            Yes
+          </span>
+        </button>
+
+        <button
+          type="button"
+          @click="selectedVote = 'no'"
+          :class="`flex flex-column flex-align-center flex-justify-center pd-semi radius-medium br-2px transition-cubic-in-out ${
+            selectedVote === 'no'
+              ? 'br-red-nice bg-red-small'
+              : 'br-light hover-br-red-nice'
+          }`"
+        >
+          <svg :class="`w-8r h-8r mn-b-thin ${selectedVote === 'no' ? 'fill-red-nice' : 'fill-grey'}`" viewBox="0 0 24 24" fill="currentColor">
+            <path d="M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17"/>
+          </svg>
+          <span :class="`t-medium ${selectedVote === 'no' ? 't-red-nice' : 't-grey'}`">
+            No
+          </span>
+        </button>
+
+        <button
+          type="button"
+          @click="selectedVote = 'abstain'"
+          :class="`flex flex-column flex-align-center flex-justify-center pd-semi radius-medium br-2px transition-cubic-in-out ${
+            selectedVote === 'abstain'
+              ? 'br-grey bg-light'
+              : 'br-light hover-br-grey'
+          }`"
+        >
+          <svg :class="`w-8r h-8r mn-b-thin ${selectedVote === 'abstain' ? 'fill-grey' : 'fill-grey'}`" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <line x1="5" y1="12" x2="19" y2="12"/>
+          </svg>
+          <span :class="`t-medium ${selectedVote === 'abstain' ? 't-grey' : 't-grey'}`">
+            Abstain
+          </span>
+        </button>
+      </div>
+    </div>
+
+    <div>
+      <label for="comment" class="d-block p-small t-medium mn-b-thin">
+        Comment (Optional)
+      </label>
+      <textarea
+        id="comment"
+        v-model="comment"
+        rows="4"
+        class="w-100 pd-small br-1px br-light radius-medium"
+        style="outline: none; resize: vertical;"
+        placeholder="Share your thoughts on this proposal..."
+      />
+    </div>
+
+    <button
+      type="submit"
+      :disabled="!selectedVote"
+      class="w-100 bg-main hover-bg-main-semi t-white t-medium pd-small radius-medium transition-cubic-in-out"
+      :class="{ 'bg-grey cursor-not-allowed': !selectedVote }"
+    >
+      Submit Vote
+    </button>
+  </form>
+</template>