@ozdao/martyrs 0.2.546 → 0.2.548

package/src/modules/governance/reactcode/src/components/TaskAssignForm.tsx

@@ -0,0 +1,74 @@
+import { useState } from 'react';
+import { X } from 'lucide-react';
+import { mockUsers } from '../data/mockData';
+
+interface TaskAssignFormProps {
+  taskId: string;
+  onSubmit: (userId: string) => void;
+  onClose: () => void;
+}
+
+export default function TaskAssignForm({ taskId, onSubmit, onClose }: TaskAssignFormProps) {
+  const [selectedUser, setSelectedUser] = useState('');
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (selectedUser) {
+      onSubmit(selectedUser);
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
+      <div className="bg-white rounded-xl max-w-md w-full">
+        <div className="border-b border-gray-200 px-6 py-4 flex items-center justify-between">
+          <h2 className="text-xl font-semibold text-gray-900">Assign Task</h2>
+          <button
+            onClick={onClose}
+            className="text-gray-400 hover:text-gray-600 transition-colors"
+          >
+            <X className="w-6 h-6" />
+          </button>
+        </div>
+
+        <form onSubmit={handleSubmit} className="p-6 space-y-4">
+          <div>
+            <label htmlFor="user" className="block text-sm font-medium text-gray-700 mb-2">
+              Select User
+            </label>
+            <select
+              id="user"
+              value={selectedUser}
+              onChange={(e) => setSelectedUser(e.target.value)}
+              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              required
+            >
+              <option value="">Choose a user...</option>
+              {mockUsers.map((user) => (
+                <option key={user.id} value={user.id}>
+                  {user.name}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          <div className="flex gap-3 pt-2">
+            <button
+              type="submit"
+              className="flex-1 bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 rounded-lg transition-colors"
+            >
+              Assign
+            </button>
+            <button
+              type="button"
+              onClick={onClose}
+              className="flex-1 bg-gray-200 hover:bg-gray-300 text-gray-800 font-semibold py-2 rounded-lg transition-colors"
+            >
+              Cancel
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}

package/src/modules/governance/reactcode/src/components/TaskCard.tsx

@@ -0,0 +1,88 @@
+import { Calendar, MessageSquare } from 'lucide-react';
+import { Link } from 'react-router-dom';
+import TaskStatusBadge from './TaskStatusBadge';
+
+interface User {
+  id: string;
+  name: string;
+  avatar: string;
+}
+
+interface Task {
+  id: string;
+  title: string;
+  status: string;
+  assignee: User | null;
+  dueDate: string;
+  priority: string;
+  tags: string[];
+  votingId: string | null;
+}
+
+interface TaskCardProps {
+  task: Task;
+  draggable?: boolean;
+}
+
+const priorityColors: Record<string, string> = {
+  low: 'border-l-green-500',
+  medium: 'border-l-yellow-500',
+  high: 'border-l-red-500',
+};
+
+export default function TaskCard({ task, draggable = false }: TaskCardProps) {
+  const formatDate = (dateString: string) => {
+    return new Date(dateString).toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+    });
+  };
+
+  return (
+    <Link to={`/tasks/${task.id}`} className="block">
+      <div
+        className={`bg-white rounded-lg shadow-sm hover:shadow-md transition-all duration-200 p-4 border-l-4 ${
+          priorityColors[task.priority]
+        } cursor-pointer`}
+        draggable={draggable}
+      >
+        <div className="flex items-start justify-between mb-3">
+          <h4 className="text-sm font-semibold text-gray-900 flex-1 pr-2">{task.title}</h4>
+          {task.votingId && (
+            <MessageSquare className="w-4 h-4 text-blue-500 flex-shrink-0" />
+          )}
+        </div>
+
+        <div className="mb-3">
+          <TaskStatusBadge status={task.status} />
+        </div>
+
+        <div className="flex flex-wrap gap-1 mb-3">
+          {task.tags.map((tag) => (
+            <span
+              key={tag}
+              className="px-2 py-1 bg-gray-100 text-gray-600 text-xs rounded"
+            >
+              {tag}
+            </span>
+          ))}
+        </div>
+
+        <div className="flex items-center justify-between">
+          <div className="flex items-center text-xs text-gray-500">
+            <Calendar className="w-3 h-3 mr-1" />
+            <span>{formatDate(task.dueDate)}</span>
+          </div>
+          {task.assignee && (
+            <img
+              src={task.assignee.avatar}
+              alt={task.assignee.name}
+              className="w-6 h-6 rounded-full border-2 border-white"
+              title={task.assignee.name}
+            />
+          )}
+        </div>
+      </div>
+    </Link>
+  );
+}

package/src/modules/governance/reactcode/src/components/TaskStatusBadge.tsx

@@ -0,0 +1,27 @@
+interface TaskStatusBadgeProps {
+  status: string;
+}
+
+const statusConfig: Record<string, { label: string; color: string }> = {
+  proposed: { label: 'Proposed', color: 'bg-gray-100 text-gray-700' },
+  voting: { label: 'Voting', color: 'bg-blue-100 text-blue-700' },
+  not_started: { label: 'Not Started', color: 'bg-yellow-100 text-yellow-700' },
+  in_progress: { label: 'In Progress', color: 'bg-orange-100 text-orange-700' },
+  review: { label: 'Review', color: 'bg-purple-100 text-purple-700' },
+  completed: { label: 'Completed', color: 'bg-green-100 text-green-700' },
+  blocked: { label: 'Blocked', color: 'bg-red-100 text-red-700' },
+  cancelled: { label: 'Cancelled', color: 'bg-gray-200 text-gray-600' },
+  draft: { label: 'Draft', color: 'bg-gray-100 text-gray-700' },
+  active: { label: 'Active', color: 'bg-green-100 text-green-700' },
+  archived: { label: 'Archived', color: 'bg-gray-200 text-gray-600' },
+};
+
+export default function TaskStatusBadge({ status }: TaskStatusBadgeProps) {
+  const config = statusConfig[status] || statusConfig.proposed;
+
+  return (
+    <span className={`px-3 py-1 rounded-full text-xs font-medium ${config.color}`}>
+      {config.label}
+    </span>
+  );
+}

package/src/modules/governance/reactcode/src/components/VoteForm.tsx

@@ -0,0 +1,96 @@
+import { useState } from 'react';
+import { ThumbsUp, ThumbsDown, Minus } from 'lucide-react';
+
+interface VoteFormProps {
+  onSubmit: (vote: 'yes' | 'no' | 'abstain', comment: string) => void;
+}
+
+export default function VoteForm({ onSubmit }: VoteFormProps) {
+  const [selectedVote, setSelectedVote] = useState<'yes' | 'no' | 'abstain' | null>(null);
+  const [comment, setComment] = useState('');
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (selectedVote) {
+      onSubmit(selectedVote, comment);
+      setSelectedVote(null);
+      setComment('');
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-6">
+      <div>
+        <h4 className="text-sm font-semibold text-gray-900 mb-3">Cast Your Vote</h4>
+        <div className="grid grid-cols-3 gap-4">
+          <button
+            type="button"
+            onClick={() => setSelectedVote('yes')}
+            className={`flex flex-col items-center justify-center p-6 rounded-lg border-2 transition-all ${
+              selectedVote === 'yes'
+                ? 'border-green-500 bg-green-50'
+                : 'border-gray-200 hover:border-green-300'
+            }`}
+          >
+            <ThumbsUp className={`w-8 h-8 mb-2 ${selectedVote === 'yes' ? 'text-green-600' : 'text-gray-400'}`} />
+            <span className={`font-semibold ${selectedVote === 'yes' ? 'text-green-700' : 'text-gray-600'}`}>
+              Yes
+            </span>
+          </button>
+
+          <button
+            type="button"
+            onClick={() => setSelectedVote('no')}
+            className={`flex flex-col items-center justify-center p-6 rounded-lg border-2 transition-all ${
+              selectedVote === 'no'
+                ? 'border-red-500 bg-red-50'
+                : 'border-gray-200 hover:border-red-300'
+            }`}
+          >
+            <ThumbsDown className={`w-8 h-8 mb-2 ${selectedVote === 'no' ? 'text-red-600' : 'text-gray-400'}`} />
+            <span className={`font-semibold ${selectedVote === 'no' ? 'text-red-700' : 'text-gray-600'}`}>
+              No
+            </span>
+          </button>
+
+          <button
+            type="button"
+            onClick={() => setSelectedVote('abstain')}
+            className={`flex flex-col items-center justify-center p-6 rounded-lg border-2 transition-all ${
+              selectedVote === 'abstain'
+                ? 'border-gray-500 bg-gray-50'
+                : 'border-gray-200 hover:border-gray-400'
+            }`}
+          >
+            <Minus className={`w-8 h-8 mb-2 ${selectedVote === 'abstain' ? 'text-gray-600' : 'text-gray-400'}`} />
+            <span className={`font-semibold ${selectedVote === 'abstain' ? 'text-gray-700' : 'text-gray-600'}`}>
+              Abstain
+            </span>
+          </button>
+        </div>
+      </div>
+
+      <div>
+        <label htmlFor="comment" className="block text-sm font-medium text-gray-700 mb-2">
+          Comment (Optional)
+        </label>
+        <textarea
+          id="comment"
+          value={comment}
+          onChange={(e) => setComment(e.target.value)}
+          rows={4}
+          className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+          placeholder="Share your thoughts on this proposal..."
+        />
+      </div>
+
+      <button
+        type="submit"
+        disabled={!selectedVote}
+        className="w-full bg-blue-600 hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed text-white font-semibold py-3 rounded-lg transition-colors"
+      >
+        Submit Vote
+      </button>
+    </form>
+  );
+}

package/src/modules/governance/reactcode/src/components/VotingCard.tsx

@@ -0,0 +1,78 @@
+import { Calendar, MessageSquare } from 'lucide-react';
+import { Link } from 'react-router-dom';
+import TaskStatusBadge from './TaskStatusBadge';
+
+interface Voting {
+  id: string;
+  type: string;
+  title: string;
+  status: string;
+  createdAt: string;
+  totalVotes: number;
+  yesVotes: number;
+  noVotes: number;
+}
+
+interface VotingCardProps {
+  voting: Voting;
+}
+
+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 VotingCard({ voting }: VotingCardProps) {
+  const typeInfo = typeConfig[voting.type] || typeConfig.general;
+  const percentageYes = voting.totalVotes > 0 ? (voting.yesVotes / voting.totalVotes) * 100 : 0;
+
+  const formatDate = (dateString: string) => {
+    return new Date(dateString).toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric',
+    });
+  };
+
+  return (
+    <Link to={`/votings/${voting.id}`} className="block group">
+      <div className="bg-white rounded-lg shadow-sm hover:shadow-md transition-all duration-200 p-5 border border-gray-100">
+        <div className="flex items-start justify-between mb-3">
+          <span className={`px-3 py-1 rounded-full text-xs font-medium ${typeInfo.color}`}>
+            {typeInfo.label}
+          </span>
+          <TaskStatusBadge status={voting.status} />
+        </div>
+
+        <h3 className="text-base font-semibold text-gray-900 mb-3 group-hover:text-blue-600 transition-colors">
+          {voting.title}
+        </h3>
+
+        <div className="mb-4">
+          <div className="w-full bg-gray-200 rounded-full h-2 overflow-hidden">
+            <div
+              className="bg-green-500 h-full transition-all duration-300"
+              style={{ width: `${percentageYes}%` }}
+            />
+          </div>
+          <div className="flex justify-between text-xs text-gray-600 mt-1">
+            <span>{voting.yesVotes} Yes</span>
+            <span>{voting.noVotes} No</span>
+          </div>
+        </div>
+
+        <div className="flex items-center justify-between text-sm">
+          <div className="flex items-center text-gray-500">
+            <Calendar className="w-4 h-4 mr-1" />
+            <span>{formatDate(voting.createdAt)}</span>
+          </div>
+          <div className="flex items-center text-gray-500">
+            <MessageSquare className="w-4 h-4 mr-1" />
+            <span>{voting.totalVotes}</span>
+          </div>
+        </div>
+      </div>
+    </Link>
+  );
+}

package/src/modules/governance/reactcode/src/components/VotingResults.tsx

@@ -0,0 +1,155 @@
+import { Check, X, MessageSquare } from 'lucide-react';
+
+interface Vote {
+  userId: string;
+  userName: string;
+  vote: 'yes' | 'no' | 'abstain';
+  comment: string;
+  createdAt: string;
+}
+
+interface VotingResultsProps {
+  results: {
+    totalVotes: number;
+    yesVotes: number;
+    noVotes: number;
+    abstainVotes: number;
+    percentageYes: number;
+    percentageNo: number;
+    threshold: number;
+  };
+  votes: Vote[];
+}
+
+export default function VotingResults({ results, votes }: VotingResultsProps) {
+  const { totalVotes, yesVotes, noVotes, abstainVotes, percentageYes, percentageNo, threshold } = results;
+  const percentageAbstain = 100 - percentageYes - percentageNo;
+  const thresholdMet = percentageYes >= threshold * 100;
+
+  const formatDate = (dateString: string) => {
+    return new Date(dateString).toLocaleString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
+    });
+  };
+
+  const getVoteColor = (vote: string) => {
+    switch (vote) {
+      case 'yes':
+        return 'text-green-600';
+      case 'no':
+        return 'text-red-600';
+      case 'abstain':
+        return 'text-gray-600';
+      default:
+        return 'text-gray-600';
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <div className="flex items-center justify-between mb-3">
+          <h3 className="text-lg font-semibold text-gray-900">Voting Results</h3>
+          <div className={`flex items-center gap-2 ${thresholdMet ? 'text-green-600' : 'text-red-600'}`}>
+            {thresholdMet ? (
+              <>
+                <Check className="w-5 h-5" />
+                <span className="font-semibold">Threshold Met</span>
+              </>
+            ) : (
+              <>
+                <X className="w-5 h-5" />
+                <span className="font-semibold">Threshold Not Met</span>
+              </>
+            )}
+          </div>
+        </div>
+
+        <div className="bg-gray-100 rounded-lg p-4 mb-4">
+          <div className="flex justify-between items-center mb-2">
+            <span className="text-sm font-medium text-gray-700">Total Votes</span>
+            <span className="text-2xl font-bold text-gray-900">{totalVotes}</span>
+          </div>
+          <div className="text-sm text-gray-600">
+            Threshold: {(threshold * 100).toFixed(0)}% approval required
+          </div>
+        </div>
+
+        <div className="w-full h-8 bg-gray-200 rounded-lg overflow-hidden flex">
+          {percentageYes > 0 && (
+            <div
+              className="bg-green-500 flex items-center justify-center text-white text-sm font-semibold"
+              style={{ width: `${percentageYes}%` }}
+            >
+              {percentageYes >= 15 && `${percentageYes.toFixed(0)}%`}
+            </div>
+          )}
+          {percentageNo > 0 && (
+            <div
+              className="bg-red-500 flex items-center justify-center text-white text-sm font-semibold"
+              style={{ width: `${percentageNo}%` }}
+            >
+              {percentageNo >= 15 && `${percentageNo.toFixed(0)}%`}
+            </div>
+          )}
+          {percentageAbstain > 0 && (
+            <div
+              className="bg-gray-400 flex items-center justify-center text-white text-sm font-semibold"
+              style={{ width: `${percentageAbstain}%` }}
+            >
+              {percentageAbstain >= 15 && `${percentageAbstain.toFixed(0)}%`}
+            </div>
+          )}
+        </div>
+
+        <div className="grid grid-cols-3 gap-4 mt-4">
+          <div className="text-center">
+            <div className="text-2xl font-bold text-green-600">{yesVotes}</div>
+            <div className="text-sm text-gray-600">Yes ({percentageYes.toFixed(1)}%)</div>
+          </div>
+          <div className="text-center">
+            <div className="text-2xl font-bold text-red-600">{noVotes}</div>
+            <div className="text-sm text-gray-600">No ({percentageNo.toFixed(1)}%)</div>
+          </div>
+          <div className="text-center">
+            <div className="text-2xl font-bold text-gray-600">{abstainVotes}</div>
+            <div className="text-sm text-gray-600">Abstain ({percentageAbstain.toFixed(1)}%)</div>
+          </div>
+        </div>
+      </div>
+
+      <div>
+        <h4 className="text-base font-semibold text-gray-900 mb-4 flex items-center">
+          <MessageSquare className="w-5 h-5 mr-2" />
+          All Votes ({votes.length})
+        </h4>
+        <div className="space-y-3">
+          {votes.map((vote, index) => (
+            <div key={index} className="bg-gray-50 rounded-lg p-4">
+              <div className="flex items-start justify-between mb-2">
+                <div className="flex items-center gap-3">
+                  <div className="w-10 h-10 rounded-full bg-gray-300 flex items-center justify-center text-gray-700 font-semibold">
+                    {vote.userName.charAt(0)}
+                  </div>
+                  <div>
+                    <div className="font-medium text-gray-900">{vote.userName}</div>
+                    <div className="text-xs text-gray-500">{formatDate(vote.createdAt)}</div>
+                  </div>
+                </div>
+                <span className={`font-semibold capitalize ${getVoteColor(vote.vote)}`}>
+                  {vote.vote}
+                </span>
+              </div>
+              {vote.comment && (
+                <p className="text-sm text-gray-700 mt-2 pl-13">{vote.comment}</p>
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}