@ozdao/martyrs 0.2.571 → 0.2.572

package/src/modules/governance/reactcode-2/tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false,
+    "module": "ESNext",
+    "lib": [
+      "ES2022",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "skipLibCheck": true,
+    "types": [
+      "node"
+    ],
+    "moduleResolution": "bundler",
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "allowJs": true,
+    "jsx": "react-jsx",
+    "paths": {
+      "@/*": [
+        "./*"
+      ]
+    },
+    "allowImportingTsExtensions": true,
+    "noEmit": true
+  }
+}

package/src/modules/governance/reactcode-2/types.ts

@@ -0,0 +1,48 @@
+export enum VoteType {
+  YES = 'YES',
+  NO = 'NO',
+  ABSTAIN = 'ABSTAIN',
+}
+
+export interface Voter {
+  id: string;
+  name: string;
+  avatar?: string; // Initial fallback used if no url
+}
+
+export interface Vote {
+  id: string;
+  voter: Voter;
+  type: VoteType;
+  timestamp: string; // ISO string or formatted string
+  comment?: string;
+}
+
+export interface ProposalStats {
+  totalVotes: number;
+  thresholdRequired: number; // Percentage 0-100
+  currentApproval: number; // Percentage 0-100
+  votesYes: number;
+  votesNo: number;
+  votesAbstain: number;
+}
+
+export interface RelatedItem {
+  type: 'Initiative' | 'Proposal' | 'Task';
+  title: string;
+  status: 'Active' | 'Draft' | 'Closed' | 'Proposed';
+}
+
+export interface Proposal {
+  id: string;
+  title: string;
+  description: string;
+  category: string;
+  subCategory: string;
+  created: string;
+  ends: string;
+  status: 'Active' | 'Closed' | 'Pending';
+  stats: ProposalStats;
+  relatedItem?: RelatedItem;
+  votes: Vote[];
+}

package/src/modules/governance/reactcode-2/vite.config.ts

@@ -0,0 +1,23 @@
+import path from 'path';
+import { defineConfig, loadEnv } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig(({ mode }) => {
+    const env = loadEnv(mode, '.', '');
+    return {
+      server: {
+        port: 3000,
+        host: '0.0.0.0',
+      },
+      plugins: [react()],
+      define: {
+        'process.env.API_KEY': JSON.stringify(env.GEMINI_API_KEY),
+        'process.env.GEMINI_API_KEY': JSON.stringify(env.GEMINI_API_KEY)
+      },
+      resolve: {
+        alias: {
+          '@': path.resolve(__dirname, '.'),
+        }
+      }
+    };
+});

package/src/modules/governance/views/components/blocks/CardInitiativeItem.vue

@@ -33,19 +33,19 @@ const coverUrl = computed(() => {
     :to="{ name: 'Initiative', params: { id: initiative._id || initiative.id } }"
     class="d-block"
   >
-    <div class="bg-white radius-medium hover-scale-1 transition-cubic-in-out o-hidden br-1px br-light">
-      <div v-if="coverUrl" class="h-12r o-hidden">
+    <div class="br-black-transp-10 br-1px radius-medium hover:scale-[1.05] ease-cubic-in-out o-hidden">
+      <div v-if="coverUrl" class="aspect-1x1 o-hidden">
         <img
           :src="coverUrl"
           :alt="initiative.title"
-          class="w-100 h-100 object-fit-cover hover-scale-2 transition-cubic-in-out"
+          class="w-100 h-100 object-fit-cover"
         />
       </div>
-      <div class="pd-regular">
+      <div class="pd-small">
         <div class="flex flex-justify-between flex-v-center mn-b-small">
           <TaskStatusBadge :status="initiative.status" />
-          <div v-if="milestoneCount > 0" class="flex flex-v-center t-grey p-small">
-            <svg class="w-4r h-4r mn-r-micro" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <div v-if="milestoneCount > 0" class="flex flex-v-center t-transp p-small">
+            <svg class="i-regular mn-r-thin" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
               <path d="M12 2L2 7l10 5 10-5-10-5z"/>
               <path d="M2 17l10 5 10-5"/>
               <path d="M2 12l10 5 10-5"/>
@@ -53,14 +53,14 @@ const coverUrl = computed(() => {
             <span>{{ milestoneCount }}</span>
           </div>
         </div>
-        <h3 class="h4 t-medium mn-b-thin hover-t-main transition-cubic-in-out t-truncate">
+        <h3 class="h4 fw-medium mn-b-small hover:t-main ease-cubic-in-out truncate">
           {{ initiative.title }}
         </h3>
-        <p class="p-small t-grey mn-b-medium t-trim-2">
+        <p class="p-small t-transp mn-b-medium line-clamp-2">
           {{ initiative.description }}
         </p>
-        <div v-if="createdDate" class="flex flex-v-center t-grey p-micro">
-          <IconCalendar class="i-small mn-r-micro" :fill="'currentColor'" />
+        <div v-if="createdDate" class="flex flex-v-center t-transp p-small">
+          <IconCalendar class="i-regular mn-r-thin" :fill="'currentColor'" />
           <span>{{ formatDate(createdDate) }}</span>
         </div>
       </div>

package/src/modules/governance/views/components/blocks/CardMilestoneItem.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { defineProps } from 'vue';
 import TaskStatusBadge from '../partials/TaskStatusBadge.vue';
-import { IconCalendar, IconCheck } from '@martyrs/src/modules/icons/icons.client.js';
+import { IconCalendar, IconCheckmark } from '@martyrs/src/modules/icons/icons.client.js';
 
 const props = defineProps({
   milestone: {
@@ -23,36 +23,36 @@ const formatDate = (dateString) => {
     :to="{ name: 'Milestone', params: { id: milestone._id || milestone.id } }"
     class="d-block"
   >
-    <div class="bg-white radius-medium hover-scale-1 transition-cubic-in-out pd-regular br-1px br-light">
-      <div class="flex flex-justify-between flex-v-start mn-b-small">
-        <h3 class="h5 t-medium flex-child-1 hover-t-main transition-cubic-in-out">
+    <div class="br-black-transp-10 br-1px radius-medium hover:scale-[1.05] ease-cubic-in-out pd-small">
+      <div class="flex flex-justify-between flex-align-start mn-b-small">
+        <h3 class="h5 fw-medium flex-child-1 hover:t-main ease-cubic-in-out">
           {{ milestone.name }}
         </h3>
         <TaskStatusBadge :status="milestone.status" />
       </div>
 
       <div class="mn-b-medium">
-        <div class="flex flex-justify-between mn-b-thin p-small">
-          <span class="t-grey">Progress</span>
-          <span class="t-medium">{{ milestone.progress }}%</span>
+        <div class="flex flex-justify-between mn-b-small p-small">
+          <span class="t-transp">Progress</span>
+          <span class="fw-medium">{{ milestone.progress }}%</span>
         </div>
-        <div class="w-100 bg-light radius-regular h-2r o-hidden">
+        <div class="w-100 bg-light radius-thin h-thin o-hidden">
           <div
-            class="bg-main h-100 transition-cubic-in-out"
+            class="bg-main h-100 ease-cubic-in-out"
             :style="{ width: `${milestone.progress}%` }"
           />
         </div>
       </div>
 
       <div class="flex flex-justify-between p-small">
-        <div class="flex flex-v-center t-grey">
-          <IconCalendar class="i-small mn-r-micro" :fill="'currentColor'" />
+        <div class="flex flex-v-center t-transp">
+          <IconCalendar class="i-regular mn-r-thin" :fill="'currentColor'" />
           <span>
             {{ formatDate(milestone.startDate) }} - {{ formatDate(milestone.dueDate) }}
           </span>
         </div>
-        <div class="flex flex-v-center t-grey">
-          <IconCheck class="i-small mn-r-micro" :fill="'currentColor'" />
+        <div class="flex flex-v-center t-transp">
+          <IconCheckmark class="i-regular mn-r-thin" :fill="'currentColor'" />
           <span>{{ milestone.taskCount }}</span>
         </div>
       </div>
@@ -61,9 +61,9 @@ const formatDate = (dateString) => {
         <img
           :src="milestone.owner.avatar"
           :alt="milestone.owner.name"
-          class="i-medium radius-extra br-2px br-white"
+          class="i-medium radius-medium"
         />
-        <span class="mn-l-thin p-small t-grey">{{ milestone.owner.name }}</span>
+        <span class="mn-l-thin p-small t-transp">{{ milestone.owner.name }}</span>
       </div>
     </div>
   </router-link>

package/src/modules/governance/views/components/blocks/CardTaskItem.vue

@@ -31,29 +31,29 @@ const borderColor = computed(() => priorityConfig[props.task.priority] || priori
     :to="{ name: 'Task', params: { id: task._id || task.id } }"
     class="d-block"
   >
-    <div :class="`bg-white radius-medium hover-scale-1 transition-cubic-in-out pd-medium br-l br-3px ${borderColor} cursor-pointer`">
-      <div class="flex flex-justify-between flex-v-start mn-b-small">
-        <h4 class="p-regular t-medium flex-child-1 mn-r-thin">{{ task.title || task.name }}</h4>
-        <IconSend v-if="task.votingId" class="i-small flex-shrink-0" :fill="'rgb(var(--main))'" />
+    <div :class="`br-black-transp-10 br-1px radius-medium hover:scale-[1.05] ease-cubic-in-out pd-small cursor-pointer`">
+      <div class="flex flex-justify-between flex-align-start mn-b-small">
+        <h4 class="p-regular fw-medium flex-child-1 mn-r-thin">{{ task.title || task.name }}</h4>
+        <IconSend v-if="task.votingId" class="i-regular flex-shrink-0" :fill="'rgb(var(--main))'" />
       </div>
 
       <div class="mn-b-small">
         <TaskStatusBadge :status="task.status" />
       </div>
 
-      <div v-if="task.tags && task.tags.length > 0" class="flex flex-wrap gap-micro mn-b-small">
+      <div v-if="task.tags && task.tags.length > 0" class="flex flex-wrap gap-thin mn-b-small">
         <span
           v-for="tag in task.tags"
           :key="tag"
-          class="pd-micro pd-x-thin bg-light t-grey p-micro radius-small"
+          class="pd-thin radius-thin bg-white t-transp p-small fw-medium"
         >
           {{ tag }}
         </span>
       </div>
 
       <div class="flex flex-justify-between flex-v-center">
-        <div v-if="task.dueDate" class="flex flex-v-center p-micro t-grey">
-          <IconCalendar class="i-small mn-r-micro" :fill="'currentColor'" />
+        <div v-if="task.dueDate" class="flex flex-v-center p-small t-transp">
+          <IconCalendar class="i-regular mn-r-thin" :fill="'currentColor'" />
           <span>{{ formatDate(task.dueDate) }}</span>
         </div>
         <img
@@ -61,7 +61,7 @@ const borderColor = computed(() => priorityConfig[props.task.priority] || priori
           :src="task.assignee.avatar"
           :alt="task.assignee.name"
           :title="task.assignee.name"
-          class="i-medium radius-extra br-2px br-white"
+          class="i-medium radius-medium"
         />
       </div>
     </div>

package/src/modules/governance/views/components/blocks/CardVotingItem.vue

@@ -35,38 +35,38 @@ const formatDate = (dateString) => {
     :to="{ name: 'Voting', params: { id: voting._id || voting.id } }"
     class="d-block"
   >
-    <div class="bg-white radius-medium hover-scale-1 transition-cubic-in-out pd-regular br-1px br-light">
-      <div class="flex flex-justify-between flex-v-start mn-b-small">
-        <span :class="`pd-micro pd-x-small radius-regular p-micro t-medium ${typeInfo.color}`">
+    <div class="br-black-transp-10 br-1px radius-medium hover:scale-[1.05] ease-cubic-in-out pd-small">
+      <div class="flex flex-justify-between flex-align-start mn-b-small">
+        <span :class="`pd-thin radius-thin p-small fw-medium ${typeInfo.color}`">
           {{ typeInfo.label }}
         </span>
         <TaskStatusBadge :status="voting.status" />
       </div>
 
-      <h3 class="h5 t-medium mn-b-small hover-t-main transition-cubic-in-out">
+      <h3 class="h5 fw-medium mn-b-small hover:t-main ease-cubic-in-out">
         {{ voting.title }}
       </h3>
 
       <div class="mn-b-medium">
-        <div class="w-100 bg-light radius-regular h-2r o-hidden">
+        <div class="w-100 bg-light radius-thin h-thin o-hidden">
           <div
-            class="bg-green-nice h-100 transition-cubic-in-out"
+            class="bg-main h-100 ease-cubic-in-out"
             :style="{ width: `${percentageYes}%` }"
           />
         </div>
-        <div class="flex flex-justify-between p-micro t-grey mn-t-micro">
+        <div class="flex flex-justify-between p-small t-transp mn-t-thin">
           <span>{{ voting.yesVotes }} Yes</span>
           <span>{{ voting.noVotes }} No</span>
         </div>
       </div>
 
       <div class="flex flex-justify-between flex-v-center p-small">
-        <div class="flex flex-v-center t-grey">
-          <IconCalendar class="i-small mn-r-micro" :fill="'currentColor'" />
+        <div class="flex flex-v-center t-transp">
+          <IconCalendar class="i-regular mn-r-thin" :fill="'currentColor'" />
           <span>{{ formatDate(voting.createdAt) }}</span>
         </div>
-        <div class="flex flex-v-center t-grey">
-          <IconSend class="i-small mn-r-micro" :fill="'currentColor'" />
+        <div class="flex flex-v-center t-transp">
+          <IconSend class="i-regular mn-r-thin" :fill="'currentColor'" />
           <span>{{ voting.totalVotes }}</span>
         </div>
       </div>

package/src/modules/governance/views/components/layouts/Governance.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-white">
+  <div>
     <section class="w-100 flex-nowrap flex gap-thin mobile:pd-zero pd-thin pos-relative">
       <div style="flex: 1 1 auto" class="w-100 h-100 pos-relative">
         <router-view v-slot="{ Component, route }">

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

@@ -8,7 +8,7 @@
     <div class="cols-3 mobile:cols-1 gap-regular">
       <router-link
         :to="{ name: 'Initiatives' }"
-        class="bg-light radius-medium pd-big hover-scale-1 transition-cubic"
+        class="br-black-transp-10 br-1px radius-medium pd-big hover:scale-[1.05] ease-cubic"
       >
         <h3 class="h4 mn-b-small">Initiatives</h3>
         <p>Browse and create initiatives for the DAO</p>
@@ -16,7 +16,7 @@
 
       <router-link
         :to="{ name: 'Tasks' }"
-        class="bg-light radius-medium pd-big hover-scale-1 transition-cubic"
+        class="br-black-transp-10 br-1px radius-medium pd-big hover:scale-[1.05] ease-cubic"
       >
         <h3 class="h4 mn-b-small">Tasks</h3>
         <p>View and manage tasks for DAO projects</p>
@@ -24,7 +24,7 @@
 
       <router-link
         :to="{ name: 'Votings' }"
-        class="bg-light radius-medium pd-big hover-scale-1 transition-cubic"
+        class="br-black-transp-10 br-1px radius-medium pd-big hover:scale-[1.05] ease-cubic"
       >
         <h3 class="h4 mn-b-small">Votings</h3>
         <p>Participate in DAO voting and proposals</p>