@ozdao/martyrs 0.2.570 → 0.2.572

package/src/modules/governance/reactcode-2/components/TaskPage.tsx

@@ -0,0 +1,325 @@
+import React from 'react';
+import { ArrowLeft, User, Calendar, Tag, GitBranch, Layers, Shield, Vote, CheckCircle2, Wallet, Users, Lock, FileText, AlertCircle } from 'lucide-react';
+
+interface TaskPageProps {
+  onNavigate: (page: 'voting' | 'task' | 'feed') => void;
+}
+
+const TaskPage: React.FC<TaskPageProps> = ({ onNavigate }) => {
+  return (
+    <div className="min-h-screen text-zinc-900 pb-32 font-sans relative">
+        
+      {/* Navbar */}
+      <nav className="border-b border-zinc-200 bg-white/80 backdrop-blur-xl sticky top-0 z-50">
+        <div className="max-w-6xl mx-auto px-6 h-16 flex items-center justify-between">
+            <button 
+                onClick={() => onNavigate('voting')}
+                className="flex items-center gap-2 text-sm text-zinc-500 hover:text-zinc-900 transition-colors group"
+            >
+              <ArrowLeft className="w-4 h-4 group-hover:-translate-x-1 transition-transform" />
+              <span>Back to milestone</span>
+            </button>
+            <div className="flex items-center gap-2">
+                 <span className="w-2 h-2 rounded-full bg-amber-500 animate-pulse" />
+                 <span className="text-xs font-mono text-zinc-500 uppercase tracking-widest">Task View</span>
+            </div>
+        </div>
+      </nav>
+
+      <main className="max-w-6xl mx-auto px-6 py-10 relative z-10">
+        
+        {/* Header Section */}
+        <div className="mb-12 space-y-6">
+            <div className="flex flex-wrap gap-3">
+                <span className="inline-flex items-center px-3 py-1 rounded-full text-xs fonfw-medium bg-amber-50 text-amber-600 border border-amber-200 shadow-sm">
+                    Proposed
+                </span>
+                <span className="inline-flex items-center px-3 py-1 rounded-full text-xs fonfw-medium bg-zinc-100 text-zinc-600 border border-zinc-200">
+                    Medium Priority
+                </span>
+            </div>
+            
+            <div className="space-y-4 max-w-4xl">
+                <h1 className="text-4xl md:text-5xl fonfw-bold text-zinc-900 tracking-tight leading-tight">Implement toast notifications</h1>
+                <p className="text-xl text-zinc-500 leading-relaxed">Create toast notification system for user feedback.</p>
+            </div>
+        </div>
+
+        <div className="grid grid-cols-1 lg:grid-cols-12 gap-10">
+            
+            {/* MAIN COLUMN (Left - 8 cols) */}
+            <div className="lg:col-span-8 space-y-8">
+                
+                {/* 1. Governance & Budget (Hero Card) */}
+                <div className="bg-white border border-zinc-200 rounded-3xl p-8 relative overflow-hidden group shadow-sm">
+                     {/* Decorative Elements */}
+                     <div className="absolute top-0 right-0 w-96 h-96 bg-emerald-50/80 rounded-full blur-[80px] -translate-y-1/2 translate-x-1/2 pointer-events-none group-hover:bg-emerald-100/50 transition-colors duration-1000" />
+                     
+                     <div className="relative z-10">
+                        <h2 className="text-2xl fonfw-semibold text-zinc-900 mb-8 flex items-center gap-3">
+                            <Wallet className="w-6 h-6 text-zinc-400" /> 
+                            Task Governance & Budget
+                        </h2>
+                        
+                        {/* Budget Highlight */}
+                        <div className="mb-10 p-6 bg-zinc-50 border border-zinc-200 rounded-2xl flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
+                            <div>
+                                <span className="text-sm text-zinc-500 uppercase tracking-wider fonfw-semibold block mb-1">Total Budget</span>
+                                <div className="flex items-baseline gap-2">
+                                    <span className="text-4xl fonfw-bold text-zinc-900 tracking-tight">700</span>
+                                    <span className="text-xl text-zinc-400 fonfw-medium">USD</span>
+                                </div>
+                            </div>
+                            <div className="flex items-center gap-3">
+                                <span className="inline-flex items-center gap-2 px-3 py-1.5 rounded-lg text-xs fonfw-medium bg-amber-50 text-amber-600 border border-amber-200">
+                                    <AlertCircle className="w-3.5 h-3.5" />
+                                    Pending Approval
+                                </span>
+                                <button className="px-4 py-2 bg-zinc-900 text-white text-sm fonfw-semibold rounded-lg hover:bg-zinc-800 transition-colors shadow-lg shadow-zinc-900/10">
+                                    Approve Budget
+                                </button>
+                            </div>
+                        </div>
+
+                        {/* Governance Rules Grid */}
+                        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+                            <div className="space-y-6">
+                                <div>
+                                    <h3 className="flex items-center gap-2 text-sm fonfw-medium text-zinc-900 mb-3">
+                                        <FileText className="w-4 h-4 text-zinc-400" /> Task Acceptance
+                                    </h3>
+                                    <p className="text-sm text-zinc-600 leading-relaxed bg-zinc-50 p-4 rounded-xl border border-zinc-100">
+                                        This task requires public voting to start work.
+                                    </p>
+                                </div>
+                                <div>
+                                    <h3 className="flex items-center gap-2 text-sm fonfw-medium text-zinc-900 mb-3">
+                                        <CheckCircle2 className="w-4 h-4 text-zinc-400" /> Approval Process
+                                    </h3>
+                                    <p className="text-sm text-zinc-600 leading-relaxed bg-zinc-50 p-4 rounded-xl border border-zinc-100">
+                                        Task completion is approved by team members.
+                                    </p>
+                                </div>
+                            </div>
+
+                            <div className="bg-zinc-50/50 border border-zinc-200 rounded-2xl p-6 space-y-5">
+                                <h3 className="text-sm fonfw-medium text-zinc-400 uppercase tracking-wider">Decision Making</h3>
+                                
+                                <div className="flex justify-between items-center py-2 border-b border-zinc-200">
+                                    <span className="text-sm text-zinc-500">Governance Type</span>
+                                    <span className="text-sm text-zinc-900 fonfw-medium flex items-center gap-2">
+                                        <Users className="w-3.5 h-3.5 text-zinc-400" /> Team-based
+                                    </span>
+                                </div>
+                                <div className="flex justify-between items-center py-2 border-b border-zinc-200">
+                                    <span className="text-sm text-zinc-500">Visibility</span>
+                                    <span className="text-sm text-zinc-700 fonfw-medium bg-zinc-200 px-2 py-0.5 rounded">project</span>
+                                </div>
+                            </div>
+                        </div>
+                     </div>
+                </div>
+
+                {/* 2. Permissions */}
+                <div className="bg-white border border-zinc-200 rounded-3xl p-8 shadow-sm">
+                    <h3 className="text-lg fonfw-semibold text-zinc-900 mb-6 flex items-center gap-2">
+                        <Shield className="w-5 h-5 text-zinc-400" /> Permissions
+                    </h3>
+                    <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+                         <div className="p-4 bg-zinc-50 rounded-xl border border-zinc-100 flex flex-col items-center justify-center gap-3 hover:border-zinc-300 transition-colors">
+                            <div className="flex -space-x-2">
+                                <div className="w-8 h-8 rounded-full bg-zinc-200 border-2 border-white" />
+                                <div className="w-8 h-8 rounded-full bg-zinc-300 border-2 border-white" />
+                            </div>
+                            <span className="text-xs fonfw-medium text-zinc-500">Merge Rights</span>
+                         </div>
+                         <div className="p-4 bg-zinc-50 rounded-xl border border-zinc-100 flex flex-col items-center justify-center gap-3 hover:border-emerald-200 transition-colors">
+                            <div className="flex -space-x-2">
+                                <div className="w-8 h-8 rounded-full bg-emerald-100 border-2 border-white flex items-center justify-center text-[10px] text-emerald-700 fonfw-bold">A</div>
+                            </div>
+                            <span className="text-xs fonfw-medium text-zinc-500">Budget Approval</span>
+                         </div>
+                         <div className="p-4 bg-zinc-50 rounded-xl border border-zinc-100 flex flex-col items-center justify-center gap-3 hover:border-indigo-200 transition-colors">
+                            <div className="flex -space-x-2">
+                                <div className="w-8 h-8 rounded-full bg-indigo-100 border-2 border-white" />
+                            </div>
+                            <span className="text-xs fonfw-medium text-zinc-500">Deploy Rights</span>
+                         </div>
+                         <div className="p-4 bg-zinc-50 rounded-xl border border-zinc-100 flex flex-col items-center justify-center gap-3 hover:border-rose-200 transition-colors">
+                            <div className="flex -space-x-2">
+                                <div className="w-8 h-8 rounded-full bg-rose-100 border-2 border-white" />
+                            </div>
+                            <span className="text-xs fonfw-medium text-zinc-500">Veto Power</span>
+                         </div>
+                    </div>
+                </div>
+
+                {/* 3. Governance & Voting */}
+                <div className="border border-zinc-200 rounded-3xl p-1 bg-gradient-to-b from-zinc-100 to-white shadow-sm">
+                    <div className="bg-white rounded-[22px] p-8 border border-zinc-100">
+                        <div className="flex items-center justify-between mb-8">
+                             <h3 className="text-xl fonfw-semibold text-zinc-900 flex items-center gap-3">
+                                <Vote className="w-6 h-6 text-emerald-500" /> Governance & Voting
+                             </h3>
+                             <button className="px-5 py-2 bg-zinc-900 text-white rounded-full text-sm fonfw-semibold hover:bg-zinc-800 transition-colors shadow-lg shadow-zinc-900/10">
+                                Start Voting
+                             </button>
+                        </div>
+
+                        {/* Voting Card */}
+                        <div className="bg-zinc-50 rounded-2xl border border-zinc-200 p-6 space-y-6">
+                            <div className="flex justify-between items-start">
+                                <div>
+                                    <span className="text-xs text-zinc-500 uppercase tracking-wider fonfw-bold mb-1 block">Active Proposal</span>
+                                    <h4 className="text-base text-zinc-900 fonfw-medium">Create task: Implement toast notifications</h4>
+                                </div>
+                                <span className="text-[10px] font-mono uppercase bg-amber-50 text-amber-600 border border-amber-200 px-2 py-1 rounded">Proposed</span>
+                            </div>
+
+                            {/* Progress Bars */}
+                            <div className="space-y-4">
+                                <div>
+                                    <div className="flex justify-between text-xs mb-1.5">
+                                        <span className="text-zinc-700 flex items-center gap-1.5">
+                                            <span className="w-1.5 h-1.5 rounded-full bg-emerald-500"></span> Yes
+                                        </span>
+                                        <span className="text-zinc-500">5 votes</span>
+                                    </div>
+                                    <div className="h-2 bg-zinc-200 rounded-full overflow-hidden">
+                                        <div className="h-full bg-emerald-500 w-[62%] rounded-full"></div>
+                                    </div>
+                                </div>
+                                <div>
+                                    <div className="flex justify-between text-xs mb-1.5">
+                                        <span className="text-zinc-700 flex items-center gap-1.5">
+                                            <span className="w-1.5 h-1.5 rounded-full bg-rose-500"></span> No
+                                        </span>
+                                        <span className="text-zinc-500">2 votes</span>
+                                    </div>
+                                    <div className="h-2 bg-zinc-200 rounded-full overflow-hidden">
+                                        <div className="h-full bg-rose-500 w-[25%] rounded-full"></div>
+                                    </div>
+                                </div>
+                                <div>
+                                    <div className="flex justify-between text-xs mb-1.5">
+                                        <span className="text-zinc-700 flex items-center gap-1.5">
+                                            <span className="w-1.5 h-1.5 rounded-full bg-zinc-400"></span> Abstain
+                                        </span>
+                                        <span className="text-zinc-500">1 vote</span>
+                                    </div>
+                                    <div className="h-2 bg-zinc-200 rounded-full overflow-hidden">
+                                        <div className="h-full bg-zinc-400 w-[13%] rounded-full"></div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div className="flex items-center gap-3 pt-4 border-t border-zinc-100 mt-4">
+                            <Lock className="w-4 h-4 text-zinc-400" />
+                            <span className="text-sm text-zinc-500">Approval Voting</span>
+                            <span className="w-1 h-1 rounded-full bg-zinc-300" />
+                            <span className="text-sm text-zinc-500 italic">Not submitted for approval yet.</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+
+            {/* RIGHT COLUMN (Sidebar - 4 cols) */}
+            <div className="lg:col-span-4 space-y-6">
+                
+                {/* 1. Meta Details */}
+                <div className="bg-white border border-zinc-200 rounded-2xl p-5 space-y-6 shadow-sm">
+                    <div>
+                        <span className="text-xs text-zinc-500 uppercase tracking-wider fonfw-semibold block mb-3">Assignee</span>
+                        <div className="flex items-center gap-3 p-3 bg-zinc-50 rounded-xl border border-zinc-200 border-dashed">
+                            <div className="w-8 h-8 rounded-full bg-white border border-zinc-200 flex items-center justify-center">
+                                <User className="w-4 h-4 text-zinc-400" />
+                            </div>
+                            <span className="text-zinc-500 text-sm">Unassigned</span>
+                        </div>
+                    </div>
+
+                    <div>
+                         <span className="text-xs text-zinc-500 uppercase tracking-wider fonfw-semibold block mb-3">Timeline</span>
+                         <div className="p-3 bg-zinc-50 rounded-xl border border-zinc-200 space-y-2">
+                             <div className="flex items-center justify-between text-sm">
+                                <span className="text-zinc-500">Created</span>
+                                <span className="text-zinc-900 font-mono text-xs">Mar 3, 2024</span>
+                             </div>
+                             <div className="flex items-center justify-between text-sm">
+                                <span className="text-zinc-500">Due</span>
+                                <span className="text-zinc-900 font-mono text-xs">Mar 26, 2024</span>
+                             </div>
+                         </div>
+                    </div>
+
+                    <div>
+                        <span className="text-xs text-zinc-500 uppercase tracking-wider fonfw-semibold block mb-3">Tags</span>
+                        <div className="flex flex-wrap gap-2">
+                            <span className="px-2.5 py-1 rounded-md bg-zinc-100 border border-zinc-200 text-xs text-zinc-500 flex items-center gap-1.5">
+                                <Tag className="w-3 h-3" /> components
+                            </span>
+                            <span className="px-2.5 py-1 rounded-md bg-zinc-100 border border-zinc-200 text-xs text-zinc-500 flex items-center gap-1.5">
+                                <Tag className="w-3 h-3" /> notifications
+                            </span>
+                        </div>
+                    </div>
+                </div>
+
+                {/* 2. Context Links */}
+                 <div className="bg-white border border-zinc-200 rounded-2xl p-5 shadow-sm">
+                    <h3 className="text-xs fonfw-semibold text-zinc-500 uppercase tracking-wider mb-4 flex items-center gap-2">
+                        <Layers className="w-4 h-4" /> Context
+                    </h3>
+                    <div className="space-y-2">
+                        <a href="#" className="flex items-center gap-3 p-3 rounded-xl bg-zinc-50 border border-zinc-100 hover:bg-zinc-100 transition-colors group">
+                            <div className="w-8 h-8 rounded bg-indigo-50 flex items-center justify-center text-indigo-600 group-hover:bg-indigo-100 group-hover:scale-105 transition-all">
+                                <span className="text-xs fonfw-bold">I</span>
+                            </div>
+                            <div className="overflow-hidden">
+                                <span className="text-[10px] text-zinc-400 block uppercase tracking-wide">Initiative</span>
+                                <span className="text-sm text-zinc-900 fonfw-medium truncate block">Platform Redesign</span>
+                            </div>
+                        </a>
+                         <a href="#" className="flex items-center gap-3 p-3 rounded-xl bg-zinc-50 border border-zinc-100 hover:bg-zinc-100 transition-colors group">
+                            <div className="w-8 h-8 rounded bg-emerald-50 flex items-center justify-center text-emerald-600 group-hover:bg-emerald-100 group-hover:scale-105 transition-all">
+                                <span className="text-xs fonfw-bold">M</span>
+                            </div>
+                            <div className="overflow-hidden">
+                                <span className="text-[10px] text-zinc-400 block uppercase tracking-wide">Milestone</span>
+                                <span className="text-sm text-zinc-900 fonfw-medium truncate block">Design System</span>
+                            </div>
+                        </a>
+                    </div>
+                </div>
+
+                {/* 3. Repository */}
+                <div className="bg-white border border-zinc-200 rounded-2xl p-5 shadow-sm">
+                    <h3 className="text-xs fonfw-semibold text-zinc-500 uppercase tracking-wider mb-4 flex items-center gap-2">
+                        <GitBranch className="w-4 h-4" /> Repository
+                    </h3>
+                    <div className="space-y-3 text-sm">
+                        <div className="flex justify-between items-center">
+                            <span className="text-zinc-500">Project</span>
+                            <span className="text-zinc-900 font-mono">martyrs-platform</span>
+                        </div>
+                        <div className="flex justify-between items-center">
+                            <span className="text-zinc-500">Repo</span>
+                            <span className="text-zinc-900 font-mono">platform-ui</span>
+                        </div>
+                         <div className="flex justify-between items-center">
+                            <span className="text-zinc-500">Branch</span>
+                            <span className="text-zinc-400 italic">Not created</span>
+                        </div>
+                    </div>
+                </div>
+
+            </div>
+        </div>
+      </main>
+    </div>
+  );
+};
+
+export default TaskPage;

package/src/modules/governance/reactcode-2/components/VoteBadge.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { VoteType } from '../types';
+
+interface VoteBadgeProps {
+  type: VoteType;
+  showIcon?: boolean;
+}
+
+export const VoteBadge: React.FC<VoteBadgeProps> = ({ type }) => {
+  const styles = {
+    [VoteType.YES]: 'bg-emerald-500/10 text-emerald-600 border-emerald-500/20',
+    [VoteType.NO]: 'bg-rose-500/10 text-rose-600 border-rose-500/20',
+    [VoteType.ABSTAIN]: 'bg-zinc-500/10 text-zinc-600 border-zinc-500/20',
+  };
+
+  const labels = {
+    [VoteType.YES]: 'Yes',
+    [VoteType.NO]: 'No',
+    [VoteType.ABSTAIN]: 'Abstain',
+  };
+
+  return (
+    <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs fonfw-medium border ${styles[type]}`}>
+      {labels[type]}
+    </span>
+  );
+};