@ozdao/martyrs 0.2.601 → 0.2.603

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

@@ -3,11 +3,11 @@ import { onMounted, ref, computed } from 'vue';
 import { useRoute } from 'vue-router';
 import CardTaskItem from '../blocks/CardTaskItem.vue';
 import EmptyState from '../partials/EmptyState.vue';
-import { mockTasks } from '../../../data/mockData';
+import { tasksActions, tasksState } from '../../store/tasks';
 import { IconPlus, IconCheckmark, IconTime, IconShow, IconSend, IconEntityInfo } from '@martyrs/src/modules/icons/icons.client.js';
 
 const route = useRoute();
-const tasks = ref(mockTasks);
+const tasks = computed(() => tasksState.all);
 
 const completedTasks = computed(() => tasks.value.filter(t => t.status === 'completed'));
 const inProgressTasks = computed(() => tasks.value.filter(t => t.status === 'in_progress'));
@@ -16,19 +16,23 @@ const votingTasks = computed(() => tasks.value.filter(t => t.status === 'voting'
 const proposedTasks = computed(() => tasks.value.filter(t => t.status === 'proposed'));
 const notStartedTasks = computed(() => tasks.value.filter(t => t.status === 'not_started'));
 const blockedTasks = computed(() => tasks.value.filter(t => t.status === 'blocked'));
+
+onMounted(() => {
+  tasksActions.getAllTasks();
+});
 </script>
 
 <template>
   <div>
-    <div v-if="!route.params.id" class="min-h-100vh">
+    <div v-if="!route.params.taskId" class="min-h-100vh">
       <div class="pd-medium pd-y-semi">
         <div class="flex flex-justify-between flex-v-center mn-b-semi">
           <div>
             <h1 class="h1 fw-medium">Tasks</h1>
-            <p class="p-regular t-grey mn-t-thin">View and manage all tasks across initiatives</p>
+            <p class="p-regular t-dark mn-t-thin">View and manage all tasks across initiatives</p>
           </div>
           <router-link
-            :to="{ name: 'Create Task' }"
+            :to="`/governance/initiatives/${route.params.id}/tasks/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;"
           >
@@ -42,10 +46,10 @@ const blockedTasks = computed(() => tasks.value.filter(t => t.status === 'blocke
             title="No tasks yet"
             message="Get started by creating your first task."
             actionText="Create Task"
-            @action="$router.push({ name: 'Create Task' })"
+            @action="$router.push(`/governance/initiatives/${route.params.id}/tasks/create`)"
           >
             <template #icon>
-              <svg class="w-12r h-12r t-grey" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <svg class="w-12r h-12r t-dark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                 <path d="M9 11l3 3L22 4"/>
                 <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/>
               </svg>
@@ -60,12 +64,12 @@ const blockedTasks = computed(() => tasks.value.filter(t => t.status === 'blocke
                 <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
               </svg>
               <h3 class="h4 fw-medium">Completed</h3>
-              <span class="p-small t-grey">({{ completedTasks.length }})</span>
+              <span class="p-small t-dark">({{ completedTasks.length }})</span>
             </div>
             <div class="cols-3 gap-small mobile:cols-1 tablet:cols-2">
               <CardTaskItem
                 v-for="task in completedTasks"
-                :key="task.id"
+                :key="task._id"
                 :task="task"
               />
             </div>
@@ -75,12 +79,12 @@ const blockedTasks = computed(() => tasks.value.filter(t => t.status === 'blocke
             <div class="flex flex-v-center gap-thin mn-b-medium">
               <IconTime class="i-medium" :fill="'rgb(var(--second))'" />
               <h3 class="h4 fw-medium">In Progress</h3>
-              <span class="p-small t-grey">({{ inProgressTasks.length }})</span>
+              <span class="p-small t-dark">({{ inProgressTasks.length }})</span>
             </div>
             <div class="cols-3 gap-small mobile:cols-1 tablet:cols-2">
               <CardTaskItem
                 v-for="task in inProgressTasks"
-                :key="task.id"
+                :key="task._id"
                 :task="task"
               />
             </div>
@@ -90,12 +94,12 @@ const blockedTasks = computed(() => tasks.value.filter(t => t.status === 'blocke
             <div class="flex flex-v-center gap-thin mn-b-medium">
               <IconShow class="i-medium" :fill="'rgb(var(--fifth))'" />
               <h3 class="h4 fw-medium">Review</h3>
-              <span class="p-small t-grey">({{ reviewTasks.length }})</span>
+              <span class="p-small t-dark">({{ reviewTasks.length }})</span>
             </div>
             <div class="cols-3 gap-small mobile:cols-1 tablet:cols-2">
               <CardTaskItem
                 v-for="task in reviewTasks"
-                :key="task.id"
+                :key="task._id"
                 :task="task"
               />
             </div>
@@ -105,12 +109,12 @@ const blockedTasks = computed(() => tasks.value.filter(t => t.status === 'blocke
             <div class="flex flex-v-center gap-thin mn-b-medium">
               <IconSend class="i-medium" :fill="'rgb(var(--main))'" />
               <h3 class="h4 fw-medium">Voting</h3>
-              <span class="p-small t-grey">({{ votingTasks.length }})</span>
+              <span class="p-small t-dark">({{ votingTasks.length }})</span>
             </div>
             <div class="cols-3 gap-small mobile:cols-1 tablet:cols-2">
               <CardTaskItem
                 v-for="task in votingTasks"
-                :key="task.id"
+                :key="task._id"
                 :task="task"
               />
             </div>
@@ -120,12 +124,12 @@ const blockedTasks = computed(() => tasks.value.filter(t => t.status === 'blocke
             <div class="flex flex-v-center gap-thin mn-b-medium">
               <IconEntityInfo class="i-medium" :fill="'rgb(var(--grey))'" />
               <h3 class="h4 fw-medium">Proposed</h3>
-              <span class="p-small t-grey">({{ proposedTasks.length }})</span>
+              <span class="p-small t-dark">({{ proposedTasks.length }})</span>
             </div>
             <div class="cols-3 gap-small mobile:cols-1 tablet:cols-2">
               <CardTaskItem
                 v-for="task in proposedTasks"
-                :key="task.id"
+                :key="task._id"
                 :task="task"
               />
             </div>
@@ -137,12 +141,12 @@ const blockedTasks = computed(() => tasks.value.filter(t => t.status === 'blocke
                 <circle cx="12" cy="12" r="10"/>
               </svg>
               <h3 class="h4 fw-medium">Not Started</h3>
-              <span class="p-small t-grey">({{ notStartedTasks.length }})</span>
+              <span class="p-small t-dark">({{ notStartedTasks.length }})</span>
             </div>
             <div class="cols-3 gap-small mobile:cols-1 tablet:cols-2">
               <CardTaskItem
                 v-for="task in notStartedTasks"
-                :key="task.id"
+                :key="task._id"
                 :task="task"
               />
             </div>
@@ -155,12 +159,12 @@ const blockedTasks = computed(() => tasks.value.filter(t => t.status === 'blocke
                 <line x1="4.93" y1="4.93" x2="19.07" y2="19.07"/>
               </svg>
               <h3 class="h4 fw-medium">Blocked</h3>
-              <span class="p-small t-grey">({{ blockedTasks.length }})</span>
+              <span class="p-small t-dark">({{ blockedTasks.length }})</span>
             </div>
             <div class="cols-3 gap-small mobile:cols-1 tablet:cols-2">
               <CardTaskItem
                 v-for="task in blockedTasks"
-                :key="task.id"
+                :key="task._id"
                 :task="task"
               />
             </div>

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

@@ -1,17 +1,22 @@
 <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 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 { votingsActions, votingsState } from '../../store/votings';
+import $axios from '@martyrs/src/modules/core/views/utils/axios-instance.js';
+import { useGlobalMixins } from '@martyrs/src/modules/core/views/mixins/mixins.js';
 import { IconArrow, IconCalendar } from '@martyrs/src/modules/icons/icons.client.js';
 
+const { formatDate } = useGlobalMixins();
+
 const route = useRoute();
 const hasVoted = ref(false);
+const votesData = ref([]);
 
-const voting = computed(() => mockVotings.find(v => v.id === route.params.id));
+const voting = computed(() => votingsState.current);
 
 const typeConfig = {
   create_task: { label: 'Create Task', color: 'bg-main-small t-main' },
@@ -20,84 +25,91 @@ const typeConfig = {
 };
 
 const typeInfo = computed(() => voting.value ? (typeConfig[voting.value.type] || typeConfig.general) : null);
-const isActive = computed(() => voting.value && voting.value.status === 'pending');
+const isActive = computed(() => voting.value && voting.value.status === 'active');
+
+const totalVotes = computed(() => votesData.value.length);
+const yesVotes = computed(() => votesData.value.filter(v => v.vote === 'approve' || v.choice === 'approve').length);
+const noVotes = computed(() => votesData.value.filter(v => v.vote === 'reject' || v.choice === 'reject').length);
+const abstainVotes = computed(() => votesData.value.filter(v => v.vote === 'veto' || v.vote === 'abstain' || v.choice === 'veto' || v.choice === 'abstain').length);
 
 const percentageYes = computed(() =>
-  voting.value && voting.value.totalVotes > 0
-    ? (voting.value.yesVotes / voting.value.totalVotes) * 100
-    : 0
+  totalVotes.value > 0 ? (yesVotes.value / totalVotes.value) * 100 : 0
 );
 const percentageNo = computed(() =>
-  voting.value && voting.value.totalVotes > 0
-    ? (voting.value.noVotes / voting.value.totalVotes) * 100
-    : 0
+  totalVotes.value > 0 ? (noVotes.value / totalVotes.value) * 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,
+    totalVotes: totalVotes.value,
+    yesVotes: yesVotes.value,
+    noVotes: noVotes.value,
+    abstainVotes: abstainVotes.value,
     percentageYes: percentageYes.value,
     percentageNo: percentageNo.value,
     threshold: voting.value.threshold,
   };
 });
 
-const linkedEntity = computed(() => {
-  if (!voting.value) return null;
+const linkedInitiative = ref(null);
+const linkedTask = ref(null);
+const linkedSprint = ref(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 }
-      };
+const handleVoteSubmit = (vote, comment) => {
+  console.log('Vote submitted:', { vote, comment });
+  hasVoted.value = true;
+};
+
+onMounted(async () => {
+  await votingsActions.getVotingById(route.params.votingId);
+
+  if (voting.value) {
+    try {
+      const votes = await votingsActions.getVotesForVoting(route.params.votingId);
+      votesData.value = Array.isArray(votes) ? votes : [];
+    } catch (e) {
+      votesData.value = [];
     }
-  } 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 }
-      };
+
+    const initiativeId = voting.value.initiative ||
+      (voting.value.targetModel === 'Initiative' ? voting.value.targetId : null);
+    if (initiativeId) {
+      try {
+        const res = await $axios.get('/api/initiatives/read', { params: { _id: initiativeId } });
+        const entity = Array.isArray(res.data) ? res.data[0] : res.data;
+        if (entity?._id) linkedInitiative.value = entity;
+      } catch (e) {}
     }
-  } 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 }
-      };
+
+    const taskId = voting.value.task ||
+      (voting.value.targetModel === 'Task' ? voting.value.targetId : null);
+    if (taskId) {
+      try {
+        const res = await $axios.get('/api/tasks/read', { params: { _id: taskId } });
+        const entity = Array.isArray(res.data) ? res.data[0] : res.data;
+        if (entity?._id) linkedTask.value = entity;
+      } catch (e) {}
+    }
+
+    const sprintId = voting.value.sprint ||
+      (voting.value.targetModel === 'Sprint' ? voting.value.targetId : null);
+    if (sprintId) {
+      try {
+        const res = await $axios.get('/api/sprints/read', { params: { _id: sprintId } });
+        const entity = Array.isArray(res.data) ? res.data[0] : res.data;
+        if (entity?._id) linkedSprint.value = entity;
+      } catch (e) {}
     }
   }
-  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" class="min-h-100vh flex flex-center flex">
     <div class="t-center">
       <h2 class="h2 fw-medium mn-b-small">Voting not found</h2>
-      <router-link :to="{ name: 'Votings' }" class="t-main hover:t-main-semi">
+      <router-link :to="`/governance/initiatives/${route.params.id}/votings`" class="t-main hover:t-main-semi">
         Back to votings
       </router-link>
     </div>
@@ -106,8 +118,8 @@ const handleVoteSubmit = (vote, comment) => {
   <div v-else class="min-h-100vh">
     <div class="pd-medium pd-y-semi">
       <router-link
-        :to="{ name: 'Votings' }"
-        class="flex flex-v-center t-grey hover:t-dark mn-b-semi ease-cubic-in-out"
+        :to="`/governance/initiatives/${route.params.id}/votings`"
+        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'" />
@@ -122,39 +134,43 @@ const handleVoteSubmit = (vote, comment) => {
                 <span :class="`pd-micro pd-x-small radius-regular p-micro fw-medium ${typeInfo.color}`">
                   {{ typeInfo.label }}
                 </span>
-                <TaskStatusBadge :status="voting.status" />
+                <TaskStatusBadge :status="voting.result || voting.status" />
               </div>
               <h1 class="h1 fw-medium mn-b-medium">{{ voting.title }}</h1>
-              <p class="p-semi t-grey t-line-relaxed">{{ voting.description }}</p>
+              <p class="p-semi t-dark t-line-relaxed">{{ voting.description }}</p>
             </div>
           </div>
 
-          <div class="br-t-1px br-black-transp-10 pd-x-semi mn-b-semi">
+          <div class="mn-b-semi">
             <div class="cols-2 mobile:cols-1 gap-small">
               <div class="flex flex-align-start gap-small">
                 <IconCalendar class="i-medium mn-t-micro" :fill="'rgb(var(--grey))'" />
                 <div>
-                  <div class="p-small t-grey mn-b-micro">Created</div>
+                  <div class="p-small t-dark mn-b-micro">Created</div>
                   <div class="p-regular fw-medium">{{ formatDate(voting.createdAt) }}</div>
                 </div>
               </div>
               <div class="flex flex-align-start gap-small">
                 <IconCalendar class="i-medium mn-t-micro" :fill="'rgb(var(--grey))'" />
                 <div>
-                  <div class="p-small t-grey mn-b-micro">Ends</div>
+                  <div class="p-small t-dark mn-b-micro">Ends</div>
                   <div class="p-regular fw-medium">{{ formatDate(voting.endDate) }}</div>
                 </div>
               </div>
             </div>
           </div>
 
-          <div v-if="linkedEntity" class="br-t-1px br-black-transp-10 pd-x-semi mn-b-semi">
-            <h3 class="p-small fw-medium mn-b-small">Related Item</h3>
-            <LinkedEntityCard :entityType="linkedEntity.type" :entityData="linkedEntity.data" />
+          <div v-if="linkedInitiative || linkedTask || linkedSprint" class="mn-b-semi">
+            <h3 class="p-small fw-medium mn-b-small">Related Items</h3>
+            <div class="flex flex-column gap-small">
+              <LinkedEntityCard v-if="linkedInitiative" entityType="initiative" :entityData="linkedInitiative" />
+              <LinkedEntityCard v-if="linkedTask" entityType="task" :entityData="linkedTask" />
+              <LinkedEntityCard v-if="linkedSprint" entityType="sprint" :entityData="linkedSprint" />
+            </div>
           </div>
 
-          <div class="br-t-1px br-black-transp-10 pd-x-semi">
-            <VotingResults :results="results" :votes="voting.votes" />
+          <div>
+            <VotingResults :results="results" :votes="votesData" />
           </div>
         </div>
       </div>
@@ -169,8 +185,8 @@ const handleVoteSubmit = (vote, comment) => {
       </div>
 
       <div v-if="!isActive" class="br-black-transp-10 br-1px radius-semi pd-semi t-center">
-        <div class="t-grey fw-medium h5 mn-b-small">Voting Closed</div>
-        <p class="t-grey">This voting has ended.</p>
+        <div class="t-dark fw-medium h5 mn-b-small">Voting Closed</div>
+        <p class="t-dark">This voting has ended.</p>
       </div>
     </div>
   </div>

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

@@ -1,25 +1,65 @@
 <script setup>
 import { ref } from 'vue';
-import { votesActions } from '../../store/votings';
+import { useRoute, useRouter } from 'vue-router';
+import { votingsActions } from '../../store/votings';
 import FormVotingDetails from '../sections/FormVotingDetails.vue';
+import { IconArrow } from '@martyrs/src/modules/icons/icons.client.js';
+
+const route = useRoute();
+const router = useRouter();
 
 const newVoting = ref({
   title: '',
   description: '',
+  type: 'general',
+  targetModel: '',
+  targetId: '',
+  threshold: 51,
+  initiative: '',
+  sprint: '',
   startDate: null,
-  endDate: null
+  endDate: null,
+  status: 'pending',
 });
 
+const creating = ref(false);
+
 const createVoting = async () => {
-  await votesActions.createVoting(newVoting.value);
-  // Redirect or show success message
+  if (!newVoting.value.title) return;
+  creating.value = true;
+  try {
+    const response = await votingsActions.createVoting(newVoting.value);
+    router.push(`/governance/initiatives/${route.params.id}/votings/${response._id || response.id}`);
+  } catch (e) {
+    creating.value = false;
+  }
 };
 </script>
 
 <template>
-  <div>
-    <h1>Create New Voting</h1>
+  <div class="pd-medium pd-y-semi">
+    <router-link
+      :to="`/governance/initiatives/${route.params.id}/votings`"
+      class="flex flex-v-center t-dark hover:t-dark mn-b-semi ease-cubic-in-out"
+      style="text-decoration: none; width: fit-content;"
+    >
+      <IconArrow class="i-medium mn-r-thin" :rotation="180" :fill="'currentColor'" />
+      Back to votings
+    </router-link>
+
+    <h1 class="h2 fw-medium mn-b-semi">Create New Voting</h1>
+
     <FormVotingDetails v-model="newVoting" />
-    <button @click="createVoting">Create Voting</button>
+
+    <div class="flex flex-justify-end mn-t-semi">
+      <button
+        @click="createVoting"
+        :disabled="!newVoting.title || creating"
+        class="bg-main hover:bg-main-semi t-white fw-medium pd-medium pd-x-semi radius-medium p-regular ease-cubic-in-out"
+        :class="{ 'o-50': !newVoting.title || creating }"
+      >
+        {{ creating ? 'Creating...' : 'Create Voting' }}
+      </button>
+    </div>
   </div>
-</template>
+</template>

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

@@ -1,74 +1,34 @@
 <script setup>
-import { ref, computed } from 'vue';
+import { computed, onMounted } from 'vue';
 import { useRoute } from 'vue-router';
 import CardVotingItem from '../blocks/CardVotingItem.vue';
 import EmptyState from '../partials/EmptyState.vue';
-import { mockVotings } from '../../../data/mockData';
+import { votingsActions, votingsState } from '../../store/votings';
 
 const route = useRoute();
-const votings = ref(mockVotings);
-const typeFilter = ref('all');
-const statusFilter = ref('all');
+const votings = computed(() => 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;
-  });
+onMounted(() => {
+  votingsActions.getAllVotings();
 });
 </script>
 
 <template>
   <div>
-    <div v-if="!route.params.id" class="min-h-100vh">
+    <div v-if="!route.params.votingId" class="min-h-100vh">
       <div class="pd-medium pd-y-semi">
         <div class="mn-b-semi">
           <h1 class="h1 fw-medium mn-b-small">Votings</h1>
-          <p class="p-regular t-grey">View and participate in all active votings</p>
+          <p class="p-regular t-dark">View and participate in all active votings</p>
         </div>
 
-        <div class="bg-light 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 fw-medium mn-b-small">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 fw-medium mn-b-small">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">
+        <div v-if="votings.length === 0">
           <EmptyState
             title="No votings found"
-            message="Try adjusting your filters to see more votings."
+            message="No votings have been created yet."
           >
             <template #icon>
-              <svg class="w-12r h-12r t-grey" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <svg class="w-12r h-12r t-dark" 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>
@@ -76,15 +36,10 @@ const filteredVotings = computed(() => {
         </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-small mobile:cols-1 tablet:cols-2">
             <CardVotingItem
-              v-for="voting in filteredVotings"
-              :key="voting._id || voting.id"
+              v-for="voting in votings"
+              :key="voting._id"
               :voting="voting"
             />
           </div>

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

@@ -29,7 +29,7 @@ const handleAction = () => {
       <slot name="icon"></slot>
     </div>
     <h3 class="h3 fw-medium mn-b-small">{{ title }}</h3>
-    <p class="p-regular t-grey t-center w-max-40r mn-b-semi">{{ message }}</p>
+    <p class="p-regular t-dark t-center w-max-40r mn-b-semi">{{ message }}</p>
     <button
       v-if="actionText"
       @click="handleAction"