@ozdao/martyrs 0.2.546 → 0.2.548

package/src/modules/governance/reactcode/src/pages/VotingDetailPage.tsx

@@ -0,0 +1,191 @@
+import { useState } from 'react';
+import { useParams, Link } from 'react-router-dom';
+import { ArrowLeft, Calendar } from 'lucide-react';
+import TaskStatusBadge from '../components/TaskStatusBadge';
+import VoteForm from '../components/VoteForm';
+import VotingResults from '../components/VotingResults';
+import LinkedEntityCard from '../components/LinkedEntityCard';
+import { mockVotings, mockTasks, mockInitiatives, mockMilestones } from '../data/mockData';
+
+const typeConfig: Record<string, { label: string; color: string }> = {
+  create_task: { label: 'Create Task', color: 'bg-blue-100 text-blue-700' },
+  approve_task: { label: 'Approve Task', color: 'bg-green-100 text-green-700' },
+  general: { label: 'General', color: 'bg-purple-100 text-purple-700' },
+};
+
+export default function VotingDetailPage() {
+  const { id } = useParams();
+  const [hasVoted, setHasVoted] = useState(false);
+
+  const voting = mockVotings.find((v) => v.id === id);
+
+  if (!voting) {
+    return (
+      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
+        <div className="text-center">
+          <h2 className="text-2xl font-bold text-gray-900 mb-2">Voting not found</h2>
+          <Link to="/votings" className="text-blue-600 hover:text-blue-700">
+            Back to votings
+          </Link>
+        </div>
+      </div>
+    );
+  }
+
+  const typeInfo = typeConfig[voting.type] || typeConfig.general;
+  const isActive = voting.status === 'pending';
+
+  const percentageYes = voting.totalVotes > 0 ? (voting.yesVotes / voting.totalVotes) * 100 : 0;
+  const percentageNo = voting.totalVotes > 0 ? (voting.noVotes / voting.totalVotes) * 100 : 0;
+
+  const results = {
+    totalVotes: voting.totalVotes,
+    yesVotes: voting.yesVotes,
+    noVotes: voting.noVotes,
+    abstainVotes: voting.abstainVotes,
+    percentageYes,
+    percentageNo,
+    threshold: voting.threshold,
+  };
+
+  const handleVoteSubmit = (vote: 'yes' | 'no' | 'abstain', comment: string) => {
+    console.log('Vote submitted:', { vote, comment });
+    setHasVoted(true);
+  };
+
+  const formatDate = (dateString: string) => {
+    return new Date(dateString).toLocaleString('en-US', {
+      month: 'long',
+      day: 'numeric',
+      year: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
+    });
+  };
+
+  let linkedEntity = null;
+  if (voting.linkedEntityType === 'task' && voting.linkedEntityId) {
+    const task = mockTasks.find((t) => t.id === voting.linkedEntityId);
+    if (task) {
+      linkedEntity = (
+        <LinkedEntityCard
+          entityType="task"
+          entityData={{
+            id: task.id,
+            title: task.title,
+            status: task.status,
+          }}
+        />
+      );
+    }
+  } else if (voting.linkedEntityType === 'initiative' && voting.linkedEntityId) {
+    const initiative = mockInitiatives.find((i) => i.id === voting.linkedEntityId);
+    if (initiative) {
+      linkedEntity = (
+        <LinkedEntityCard
+          entityType="initiative"
+          entityData={{
+            id: initiative.id,
+            title: initiative.title,
+            status: initiative.status,
+          }}
+        />
+      );
+    }
+  } else if (voting.linkedEntityType === 'milestone' && voting.linkedEntityId) {
+    const milestone = mockMilestones.find((m) => m.id === voting.linkedEntityId);
+    if (milestone) {
+      linkedEntity = (
+        <LinkedEntityCard
+          entityType="milestone"
+          entityData={{
+            id: milestone.id,
+            name: milestone.name,
+            status: milestone.status,
+          }}
+        />
+      );
+    }
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <Link
+          to="/votings"
+          className="inline-flex items-center text-gray-600 hover:text-gray-900 mb-6 transition-colors"
+        >
+          <ArrowLeft className="w-5 h-5 mr-2" />
+          Back to votings
+        </Link>
+
+        <div className="bg-white rounded-xl shadow-sm overflow-hidden mb-6">
+          <div className="p-8">
+            <div className="flex items-start justify-between mb-6">
+              <div className="flex-1">
+                <div className="flex items-center gap-3 mb-3">
+                  <span className={`px-3 py-1 rounded-full text-xs font-medium ${typeInfo.color}`}>
+                    {typeInfo.label}
+                  </span>
+                  <TaskStatusBadge status={voting.status} />
+                </div>
+                <h1 className="text-3xl font-bold text-gray-900 mb-4">{voting.title}</h1>
+                <p className="text-gray-700 text-lg leading-relaxed">{voting.description}</p>
+              </div>
+            </div>
+
+            <div className="border-t border-gray-200 pt-6 mb-6">
+              <div className="grid grid-cols-2 gap-6">
+                <div className="flex items-start gap-3">
+                  <Calendar className="w-5 h-5 text-gray-400 mt-0.5" />
+                  <div>
+                    <div className="text-sm text-gray-500 mb-1">Created</div>
+                    <div className="font-medium text-gray-900">{formatDate(voting.createdAt)}</div>
+                  </div>
+                </div>
+                <div className="flex items-start gap-3">
+                  <Calendar className="w-5 h-5 text-gray-400 mt-0.5" />
+                  <div>
+                    <div className="text-sm text-gray-500 mb-1">Ends</div>
+                    <div className="font-medium text-gray-900">{formatDate(voting.endDate)}</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {linkedEntity && (
+              <div className="border-t border-gray-200 pt-6 mb-6">
+                <h3 className="text-sm font-semibold text-gray-900 mb-3">Related Item</h3>
+                {linkedEntity}
+              </div>
+            )}
+
+            <div className="border-t border-gray-200 pt-6">
+              <VotingResults results={results} votes={voting.votes} />
+            </div>
+          </div>
+        </div>
+
+        {isActive && !hasVoted && (
+          <div className="bg-white rounded-xl shadow-sm p-8">
+            <VoteForm onSubmit={handleVoteSubmit} />
+          </div>
+        )}
+
+        {hasVoted && (
+          <div className="bg-green-50 border border-green-200 rounded-xl p-6 text-center">
+            <div className="text-green-700 font-semibold text-lg mb-2">Thank you for voting!</div>
+            <p className="text-green-600">Your vote has been recorded.</p>
+          </div>
+        )}
+
+        {!isActive && (
+          <div className="bg-gray-50 border border-gray-200 rounded-xl p-6 text-center">
+            <div className="text-gray-700 font-semibold text-lg mb-2">Voting Closed</div>
+            <p className="text-gray-600">This voting has ended.</p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/modules/governance/reactcode/src/pages/VotingsListPage.tsx

@@ -0,0 +1,86 @@
+import { useState } from 'react';
+import { MessageSquare } from 'lucide-react';
+import VotingCard from '../components/VotingCard';
+import EmptyState from '../components/EmptyState';
+import { mockVotings } from '../data/mockData';
+
+export default function VotingsListPage() {
+  const [typeFilter, setTypeFilter] = useState<string>('all');
+  const [statusFilter, setStatusFilter] = useState<string>('all');
+
+  const filteredVotings = mockVotings.filter((voting) => {
+    const matchesType = typeFilter === 'all' || voting.type === typeFilter;
+    const matchesStatus = statusFilter === 'all' || voting.status === statusFilter;
+    return matchesType && matchesStatus;
+  });
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <div className="mb-8">
+          <h1 className="text-3xl font-bold text-gray-900 mb-2">Votings</h1>
+          <p className="text-gray-600">View and participate in all active votings</p>
+        </div>
+
+        <div className="bg-white rounded-xl shadow-sm p-6 mb-8">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div>
+              <label htmlFor="typeFilter" className="block text-sm font-medium text-gray-700 mb-2">
+                Type
+              </label>
+              <select
+                id="typeFilter"
+                value={typeFilter}
+                onChange={(e) => setTypeFilter(e.target.value)}
+                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              >
+                <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 htmlFor="statusFilter" className="block text-sm font-medium text-gray-700 mb-2">
+                Status
+              </label>
+              <select
+                id="statusFilter"
+                value={statusFilter}
+                onChange={(e) => setStatusFilter(e.target.value)}
+                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              >
+                <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>
+
+        {filteredVotings.length === 0 ? (
+          <EmptyState
+            icon={MessageSquare}
+            title="No votings found"
+            message="Try adjusting your filters to see more votings."
+          />
+        ) : (
+          <>
+            <div className="flex items-center justify-between mb-4">
+              <p className="text-gray-600">
+                Showing {filteredVotings.length} of {mockVotings.length} votings
+              </p>
+            </div>
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+              {filteredVotings.map((voting) => (
+                <VotingCard key={voting.id} voting={voting} />
+              ))}
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/modules/governance/reactcode/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/src/modules/governance/reactcode/tailwind.config.js

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};

package/src/modules/governance/reactcode/tsconfig.app.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}

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

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/src/modules/governance/reactcode/tsconfig.node.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["vite.config.ts"]
+}

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

@@ -0,0 +1,10 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  optimizeDeps: {
+    exclude: ['lucide-react'],
+  },
+});