feat: governance item progress

src/components/ProposalProcess.vue

@@ -30,6 +30,38 @@ const veto = computed(() =>
 </script>
 
 <template>
+  <div class="grid grid-cols-4 gap-4 mb-3 text-sm">
+    <div class="flex items-center justify-between rounded-sm px-2 relative">
+      <div
+        class="bg-yes absolute top-0 bottom-0 left-0 right-0 rounded-sm opacity-20 dark:opacity-40"
+      ></div>
+      <div>YES</div>
+      <div class="text-gray-800 dark:text-gray-50">{{ yes }}</div>
+    </div>
+    <div class="flex items-center justify-between rounded-sm px-2 relative">
+      <div
+        class="bg-no absolute top-0 bottom-0 left-0 right-0 rounded-sm opacity-20 dark:opacity-40"
+      ></div>
+      <div>NO</div>
+      <div class="text-gray-800 dark:text-gray-50">{{ no }}</div>
+    </div>
+
+    <div class="flex items-center justify-between rounded-sm px-2 relative">
+      <div
+        class="bg-warning absolute top-0 bottom-0 left-0 right-0 rounded-sm opacity-20 dark:opacity-50"
+      ></div>
+      <div>No With Veto</div>
+      <div class="text-gray-800 dark:text-gray-50">{{ veto }}</div>
+    </div>
+
+    <div class="flex items-center justify-between rounded-sm px-2 relative">
+      <div
+        class="bg-gray-500 absolute top-0 bottom-0 left-0 right-0 rounded-sm opacity-20 dark:opacity-40"
+      ></div>
+      <div>Abstain</div>
+      <div class="text-gray-800 dark:text-gray-50">{{ abstain }}</div>
+    </div>
+  </div>
   <div class="progress rounded-full h-1 text-xs flex items-center">
     <div class="h-1 bg-yes" :style="`width: ${yes}`"></div>
     <div class="h-1 bg-no" :style="`width: ${no}`"></div>

src/modules/[chain]/gov/[proposal_id].vue

@@ -10,9 +10,7 @@ import {
 import type {
   GovProposal,
   GovVote,
-  PaginabledAccounts,
   PaginatedProposalDeposit,
-  PaginatedProposalVotes,
   Pagination,
 } from '@/types';
 import { ref, reactive } from 'vue';