@ozdao/martyrs 0.2.571 → 0.2.572

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

@@ -0,0 +1,457 @@
+import React, { useState, useEffect } from 'react';
+import { ArrowLeft, ExternalLink, Calendar, Clock, CheckCircle2, AlertCircle, Settings2, Timer, Lock, Send, ChevronDown, CheckSquare, GitPullRequest } from 'lucide-react';
+import { getMockProposal, CURRENT_USER } from '../constants';
+import { VoteBadge } from './VoteBadge';
+import { VotingCharts } from './Charts';
+import { VoteType, Proposal, Vote } from '../types';
+
+interface VotingPageProps {
+  onNavigate: (page: 'voting' | 'task' | 'feed') => void;
+}
+
+const VotingPage: React.FC<VotingPageProps> = ({ onNavigate }) => {
+  // State for the current view/proposal status
+  const [viewState, setViewState] = useState<'Active' | 'Closed' | 'Pending'>('Closed');
+  const [proposal, setProposal] = useState<Proposal>(getMockProposal('Closed'));
+  
+  // Voting State
+  const [selectedVote, setSelectedVote] = useState<VoteType | null>(null);
+  const [voteComment, setVoteComment] = useState('');
+  const [hasVoted, setHasVoted] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  // Reset proposal when viewState changes
+  useEffect(() => {
+    setProposal(getMockProposal(viewState));
+    setHasVoted(false);
+    setSelectedVote(null);
+    setVoteComment('');
+  }, [viewState]);
+
+  // Handle Casting a Vote
+  const handleVoteSubmit = () => {
+    if (!selectedVote) return;
+    setIsSubmitting(true);
+
+    // Simulate network request
+    setTimeout(() => {
+        const newVote: Vote = {
+            id: `new-${Date.now()}`,
+            voter: CURRENT_USER,
+            type: selectedVote,
+            timestamp: 'Just now',
+            comment: voteComment || undefined
+        };
+
+        setProposal(prev => {
+            const newVotes = [newVote, ...prev.votes];
+            const yes = newVotes.filter(v => v.type === VoteType.YES).length;
+            const no = newVotes.filter(v => v.type === VoteType.NO).length;
+            const abstain = newVotes.filter(v => v.type === VoteType.ABSTAIN).length;
+            const total = newVotes.length;
+            
+            return {
+                ...prev,
+                votes: newVotes,
+                stats: {
+                    ...prev.stats,
+                    totalVotes: total,
+                    votesYes: yes,
+                    votesNo: no,
+                    votesAbstain: abstain,
+                    currentApproval: total > 0 ? (yes / total) * 100 : 0
+                }
+            };
+        });
+
+        setHasVoted(true);
+        setIsSubmitting(false);
+    }, 800);
+  };
+
+  // Calculate percentages for UI
+  const yesPercent = proposal.stats.totalVotes > 0 ? (proposal.stats.votesYes / proposal.stats.totalVotes) * 100 : 0;
+  const noPercent = proposal.stats.totalVotes > 0 ? (proposal.stats.votesNo / proposal.stats.totalVotes) * 100 : 0;
+  const abstainPercent = proposal.stats.totalVotes > 0 ? (proposal.stats.votesAbstain / proposal.stats.totalVotes) * 100 : 0;
+
+  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('feed')}
+              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 votings</span>
+            </button>
+            
+            <div className="hidden md:flex items-center gap-3 text-xs text-zinc-500 font-mono">
+              <div className="w-2 h-2 rounded-full bg-indigo-500 shadow-[0_0_8px_rgba(99,102,241,0.4)]" />
+              <span className="uppercase tracking-widest fonfw-medium text-zinc-600">{proposal.category}</span>
+              <span className="text-zinc-300">/</span>
+              <span className="text-zinc-400">{proposal.subCategory}</span>
+            </div>
+        </div>
+      </nav>
+
+      <main className="max-w-6xl mx-auto px-6 py-12 relative z-10">
+        
+        <div className="grid grid-cols-1 lg:grid-cols-12 gap-10">
+          
+          {/* LEFT COLUMN: Content */}
+          <div className="lg:col-span-7 space-y-10">
+            
+            {/* Header */}
+            <div className="space-y-6">
+              <div className="flex flex-wrap items-center gap-3">
+                 <span className={`inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs fonfw-medium border shadow-sm ${
+                    proposal.status === 'Active' 
+                    ? 'bg-emerald-50 text-emerald-600 border-emerald-200 shadow-emerald-500/10' 
+                    : proposal.status === 'Pending'
+                    ? 'bg-amber-50 text-amber-600 border-amber-200'
+                    : 'bg-zinc-100 text-zinc-500 border-zinc-200'
+                 }`}>
+                  {proposal.status === 'Active' && <span className="relative flex h-2 w-2 mr-1"><span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span><span className="relative inline-flex rounded-full h-2 w-2 bg-emerald-500"></span></span>}
+                  {proposal.status === 'Pending' && <Timer className="w-3 h-3 mr-0.5" />}
+                  {proposal.status === 'Closed' && <Lock className="w-3 h-3 mr-0.5" />}
+                  {proposal.status}
+                 </span>
+                 <span className="text-xs text-zinc-400 font-mono border border-zinc-200 px-2 py-1 rounded-md">ID: {proposal.id}</span>
+              </div>
+
+              <h1 className="text-4xl md:text-5xl fonfw-bold tracking-tight text-zinc-900 leading-[1.1]">
+                {proposal.title}
+              </h1>
+              
+              <p className="text-lg text-zinc-600 leading-relaxed max-w-2xl">
+                {proposal.description}
+              </p>
+            </div>
+
+            {/* Metadata Cards */}
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+              <div className="bg-white border border-zinc-200 rounded-2xl p-5 hover:border-zinc-300 transition-colors shadow-sm">
+                <div className="flex items-center gap-2 text-xs text-zinc-500 uppercase tracking-wider mb-2">
+                  <Calendar className="w-4 h-4 text-zinc-400" /> Created
+                </div>
+                <span className="font-mono text-sm text-zinc-900">{proposal.created}</span>
+              </div>
+              <div className="bg-white border border-zinc-200 rounded-2xl p-5 hover:border-zinc-300 transition-colors shadow-sm">
+                 <div className="flex items-center gap-2 text-xs text-zinc-500 uppercase tracking-wider mb-2">
+                  <Clock className="w-4 h-4 text-zinc-400" /> Ends
+                </div>
+                <span className="font-mono text-sm text-zinc-900">{proposal.ends}</span>
+              </div>
+            </div>
+
+            {/* Related Item */}
+            {proposal.relatedItem && (
+               <div 
+                  onClick={() => proposal.relatedItem?.type === 'Task' && onNavigate('task')}
+                  className="bg-white border border-zinc-200 rounded-2xl p-6 flex flex-col sm:flex-row sm:items-center justify-between group hover:border-indigo-500/30 hover:shadow-md transition-all cursor-pointer relative overflow-hidden"
+               >
+                  <div className="absolute top-0 right-0 w-32 h-32 bg-indigo-50/50 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2 group-hover:bg-indigo-100/50 transition-all" />
+                  <div className="space-y-1 relative z-10">
+                    <span className="text-xs text-zinc-500 block flex items-center gap-1">
+                        {proposal.relatedItem.type === 'Task' ? <CheckSquare className="w-3 h-3" /> : <GitPullRequest className="w-3 h-3" />}
+                        Related {proposal.relatedItem.type}
+                    </span>
+                    <h3 className="fonfw-medium text-zinc-900 text-lg flex items-center gap-2">
+                      {proposal.relatedItem.title}
+                    </h3>
+                  </div>
+                  <div className="flex items-center gap-4 mt-4 sm:mt-0 relative z-10">
+                     <span className="inline-flex items-center px-2.5 py-1 rounded-md text-[10px] fonfw-medium bg-amber-50 text-amber-600 border border-amber-200 uppercase tracking-wide">
+                        {proposal.relatedItem.status}
+                     </span>
+                     <ExternalLink className="w-4 h-4 text-zinc-400 group-hover:text-zinc-900 transition-colors" />
+                  </div>
+               </div>
+            )}
+            
+            {/* Votes History */}
+            <div className="pt-8">
+               <div className="flex items-center justify-between mb-6">
+                 <h3 className="text-xl fonfw-semibold text-zinc-900">Votes <span className="text-zinc-500 text-base font-normal ml-2">{proposal.votes.length}</span></h3>
+               </div>
+
+               {proposal.votes.length === 0 ? (
+                 <div className="text-center py-12 border border-dashed border-zinc-200 rounded-2xl bg-zinc-50/50">
+                    <p className="text-zinc-400">No votes cast yet.</p>
+                 </div>
+               ) : (
+                 <div className="space-y-3 relative">
+                    {/* Connection Line */}
+                    <div className="absolute left-[19px] top-6 bottom-6 w-px bg-zinc-200" />
+                    
+                    {proposal.votes.map((vote) => (
+                      <div key={vote.id} className="relative pl-12 group">
+                        {/* Timeline Node */}
+                        <div className="absolute left-0 top-3 w-10 h-10 rounded-full bg-white border border-zinc-200 flex items-center justify-center z-10 group-hover:border-zinc-400 transition-colors shadow-sm">
+                            <div className="w-8 h-8 rounded-full bg-zinc-100 flex items-center justify-center text-xs fonfw-bold text-zinc-500">
+                                {vote.voter.name.charAt(0)}
+                            </div>
+                        </div>
+
+                        <div className="bg-white border border-zinc-200 rounded-xl p-4 transition-all hover:bg-zinc-50 hover:border-zinc-300 shadow-sm">
+                          <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2 mb-2">
+                              <span className="fonfw-medium text-zinc-900">{vote.voter.name}</span>
+                              <span className="text-xs text-zinc-500 font-mono">{vote.timestamp}</span>
+                          </div>
+                          
+                          <div className="flex items-center gap-3">
+                            <VoteBadge type={vote.type} />
+                            {vote.comment && (
+                              <p className="text-sm text-zinc-600 line-clamp-1 italic">
+                                "{vote.comment}"
+                              </p>
+                            )}
+                          </div>
+                        </div>
+                      </div>
+                    ))}
+                 </div>
+               )}
+            </div>
+
+          </div>
+
+          {/* RIGHT COLUMN: Results & Actions */}
+          <div className="lg:col-span-5 space-y-6">
+            
+            {/* 1. STATE: PENDING */}
+            {proposal.status === 'Pending' && (
+                <div className="bg-white border border-dashed border-zinc-300 rounded-3xl p-8 text-center space-y-4 shadow-sm">
+                    <div className="w-16 h-16 bg-zinc-50 rounded-full flex items-center justify-center mx-auto text-zinc-400 mb-4 border border-zinc-100">
+                        <Timer className="w-8 h-8" />
+                    </div>
+                    <h2 className="text-xl fonfw-semibold text-zinc-900">Voting Starts Soon</h2>
+                    <p className="text-zinc-500">
+                        This proposal is currently in the warm-up period. Voting will open on <span className="text-zinc-900 font-mono">{proposal.created}</span>.
+                    </p>
+                </div>
+            )}
+
+            {/* 2. STATE: ACTIVE - VOTING CARD */}
+            {proposal.status === 'Active' && !hasVoted && (
+                <div className="bg-white border border-zinc-200 rounded-3xl p-1 shadow-xl shadow-zinc-200/50">
+                    <div className="bg-zinc-50/50 rounded-[22px] p-6 space-y-6 border border-zinc-100">
+                        <h2 className="text-xl fonfw-semibold text-zinc-900 flex items-center gap-2">
+                            Cast your vote
+                            <span className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse ml-auto" />
+                        </h2>
+
+                        <div className="space-y-3">
+                            <button 
+                                onClick={() => setSelectedVote(VoteType.YES)}
+                                className={`w-full p-4 rounded-xl border flex items-center justify-between transition-all duration-200 group ${
+                                    selectedVote === VoteType.YES 
+                                    ? 'bg-emerald-50 border-emerald-500 text-emerald-700 shadow-sm' 
+                                    : 'bg-white border-zinc-200 hover:border-emerald-500/30 hover:bg-zinc-50 text-zinc-700'
+                                }`}
+                            >
+                                <span className="fonfw-medium">Approve</span>
+                                <div className={`w-5 h-5 rounded-full border flex items-center justify-center ${
+                                    selectedVote === VoteType.YES ? 'border-emerald-500 bg-emerald-500 text-white' : 'border-zinc-300'
+                                }`}>
+                                    {selectedVote === VoteType.YES && <CheckCircle2 className="w-3.5 h-3.5" />}
+                                </div>
+                            </button>
+
+                            <button 
+                                onClick={() => setSelectedVote(VoteType.NO)}
+                                className={`w-full p-4 rounded-xl border flex items-center justify-between transition-all duration-200 group ${
+                                    selectedVote === VoteType.NO 
+                                    ? 'bg-rose-50 border-rose-500 text-rose-700 shadow-sm' 
+                                    : 'bg-white border-zinc-200 hover:border-rose-500/30 hover:bg-zinc-50 text-zinc-700'
+                                }`}
+                            >
+                                <span className="fonfw-medium">Reject</span>
+                                <div className={`w-5 h-5 rounded-full border flex items-center justify-center ${
+                                    selectedVote === VoteType.NO ? 'border-rose-500 bg-rose-500 text-white' : 'border-zinc-300'
+                                }`}>
+                                     {selectedVote === VoteType.NO && <CheckCircle2 className="w-3.5 h-3.5" />}
+                                </div>
+                            </button>
+
+                            <button 
+                                onClick={() => setSelectedVote(VoteType.ABSTAIN)}
+                                className={`w-full p-4 rounded-xl border flex items-center justify-between transition-all duration-200 group ${
+                                    selectedVote === VoteType.ABSTAIN 
+                                    ? 'bg-zinc-100 border-zinc-400 text-zinc-800' 
+                                    : 'bg-white border-zinc-200 hover:border-zinc-400 hover:bg-zinc-50 text-zinc-700'
+                                }`}
+                            >
+                                <span className="fonfw-medium">Abstain</span>
+                                <div className={`w-5 h-5 rounded-full border flex items-center justify-center ${
+                                    selectedVote === VoteType.ABSTAIN ? 'border-zinc-500 bg-zinc-500 text-white' : 'border-zinc-300'
+                                }`}>
+                                     {selectedVote === VoteType.ABSTAIN && <CheckCircle2 className="w-3.5 h-3.5" />}
+                                </div>
+                            </button>
+                        </div>
+
+                        {selectedVote && (
+                            <div className="space-y-4 pt-2 animate-in fade-in slide-in-from-top-2">
+                                <textarea 
+                                    value={voteComment}
+                                    onChange={(e) => setVoteComment(e.target.value)}
+                                    placeholder="Add a comment (optional)..."
+                                    className="w-full bg-white border border-zinc-200 rounded-xl p-3 text-sm text-zinc-900 placeholder:text-zinc-400 focus:outline-none focus:border-zinc-500 focus:ring-1 focus:ring-zinc-500 resize-none h-24"
+                                />
+                                <button 
+                                    onClick={handleVoteSubmit}
+                                    disabled={isSubmitting}
+                                    className="w-full py-3 bg-zinc-900 text-white rounded-xl fonfw-semibold hover:bg-zinc-800 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2 shadow-lg shadow-zinc-900/10"
+                                >
+                                    {isSubmitting ? 'Signing...' : (
+                                        <>
+                                            Sign & Submit Vote <Send className="w-4 h-4" />
+                                        </>
+                                    )}
+                                </button>
+                            </div>
+                        )}
+                    </div>
+                </div>
+            )}
+
+            {/* 3. STATE: USER VOTED */}
+            {hasVoted && (
+                <div className="bg-emerald-50 border border-emerald-200 rounded-3xl p-6 text-center space-y-3">
+                    <div className="w-12 h-12 bg-emerald-100 rounded-full flex items-center justify-center mx-auto text-emerald-600">
+                        <CheckCircle2 className="w-6 h-6" />
+                    </div>
+                    <h3 className="text-emerald-900 fonfw-medium">Vote Submitted</h3>
+                    <p className="text-sm text-emerald-600">You voted <strong>{selectedVote}</strong>.</p>
+                </div>
+            )}
+
+            {/* RESULTS CARD (Visible if Active or Closed) */}
+            {(proposal.status !== 'Pending') && (
+            <div className="bg-white border border-zinc-200 rounded-3xl p-8 relative overflow-hidden shadow-sm">
+               {/* Decorative background blur */}
+               <div className="absolute -top-24 -right-24 w-48 h-48 bg-zinc-50 rounded-full blur-[60px] pointer-events-none" />
+
+               <div className="flex items-center justify-between mb-8 relative z-10">
+                   <h2 className="text-lg fonfw-semibold text-zinc-900">Current Results</h2>
+                   {proposal.status === 'Active' && <span className="text-[10px] font-mono text-emerald-600 bg-emerald-50 px-2 py-0.5 rounded border border-emerald-200 animate-pulse">LIVE</span>}
+               </div>
+               
+               {/* Chart */}
+               <div className="flex items-center justify-center mb-10 relative z-10">
+                 {proposal.stats.totalVotes > 0 ? (
+                    <VotingCharts stats={proposal.stats} />
+                 ) : (
+                    <div className="h-40 w-40 rounded-full border-4 border-zinc-200 border-t-zinc-300 flex items-center justify-center">
+                        <span className="text-xs text-zinc-400">No data</span>
+                    </div>
+                 )}
+               </div>
+
+               {/* Threshold Bar */}
+               <div className="mb-8 relative z-10">
+                  <div className="flex justify-between text-xs mb-2">
+                    <span className="text-zinc-500">Approval (Pass {'>'}{proposal.stats.thresholdRequired}%)</span>
+                    <span className="text-emerald-600 font-mono fonfw-medium">{proposal.stats.currentApproval.toFixed(1)}%</span>
+                  </div>
+                  <div className="h-2 w-full bg-zinc-100 rounded-full overflow-hidden relative border border-zinc-100">
+                    <div 
+                      className="absolute top-0 left-0 h-full bg-emerald-500 transition-all duration-1000 ease-out"
+                      style={{ width: `${proposal.stats.currentApproval}%` }}
+                    />
+                    {/* Threshold Marker */}
+                    <div 
+                      className="absolute top-0 h-full w-0.5 bg-zinc-900 z-10"
+                      style={{ left: `${proposal.stats.thresholdRequired}%` }}
+                    />
+                  </div>
+               </div>
+
+               {/* Breakdown List */}
+               <div className="space-y-4 relative z-10">
+                  <div className="group flex items-center justify-between text-sm p-3 rounded-xl hover:bg-zinc-50 transition-colors border border-transparent hover:border-zinc-200">
+                    <div className="flex items-center gap-3">
+                      <div className="w-2 h-2 rounded-full bg-emerald-500 shadow-[0_0_8px_rgba(16,185,129,0.4)]" />
+                      <span className="text-zinc-700 fonfw-medium">Yes</span>
+                    </div>
+                    <div className="text-zinc-500 font-mono flex items-center gap-2">
+                      <span className="text-zinc-900">{proposal.stats.votesYes}</span> 
+                      <span className="text-zinc-400 text-xs w-10 text-right">{yesPercent.toFixed(0)}%</span>
+                    </div>
+                  </div>
+                  
+                  <div className="group flex items-center justify-between text-sm p-3 rounded-xl hover:bg-zinc-50 transition-colors border border-transparent hover:border-zinc-200">
+                    <div className="flex items-center gap-3">
+                      <div className="w-2 h-2 rounded-full bg-rose-500 shadow-[0_0_8px_rgba(244,63,94,0.4)]" />
+                      <span className="text-zinc-700 fonfw-medium">No</span>
+                    </div>
+                    <div className="text-zinc-500 font-mono flex items-center gap-2">
+                      <span className="text-zinc-900">{proposal.stats.votesNo}</span>
+                      <span className="text-zinc-400 text-xs w-10 text-right">{noPercent.toFixed(0)}%</span>
+                    </div>
+                  </div>
+
+                  <div className="group flex items-center justify-between text-sm p-3 rounded-xl hover:bg-zinc-50 transition-colors border border-transparent hover:border-zinc-200">
+                    <div className="flex items-center gap-3">
+                      <div className="w-2 h-2 rounded-full bg-zinc-400" />
+                      <span className="text-zinc-700 fonfw-medium">Abstain</span>
+                    </div>
+                    <div className="text-zinc-500 font-mono flex items-center gap-2">
+                      <span className="text-zinc-900">{proposal.stats.votesAbstain}</span>
+                      <span className="text-zinc-400 text-xs w-10 text-right">{abstainPercent.toFixed(0)}%</span>
+                    </div>
+                  </div>
+               </div>
+            </div>
+            )}
+
+            {/* 4. STATE: CLOSED - BANNER */}
+            {proposal.status === 'Closed' && (
+                <div className="bg-zinc-100 border border-zinc-200 rounded-2xl p-4 flex items-center gap-4">
+                  <div className="p-2 bg-white border border-zinc-200 rounded-lg text-zinc-500">
+                    <AlertCircle className="w-5 h-5" />
+                  </div>
+                  <div>
+                    <h3 className="text-zinc-900 text-sm fonfw-medium">Voting Ended</h3>
+                    <p className="text-xs text-zinc-500">
+                      Results are final.
+                    </p>
+                  </div>
+                </div>
+            )}
+
+          </div>
+        </div>
+      </main>
+
+      {/* DEMO CONTROLS - Fixed Bottom Bar */}
+      <div className="fixed bottom-6 left-1/2 -translate-x-1/2 bg-white/90 backdrop-blur-md border border-zinc-200 p-2 rounded-full shadow-xl shadow-zinc-200/50 z-50 flex items-center gap-2 animate-in slide-in-from-bottom-6">
+        <span className="pl-4 pr-2 text-xs fonfw-bold text-zinc-400 uppercase tracking-wider flex items-center gap-2">
+            <Settings2 className="w-3 h-3" /> State
+        </span>
+        <div className="h-4 w-px bg-zinc-200 mx-1" />
+        
+        {(['Pending', 'Active', 'Closed'] as const).map((state) => (
+            <button
+                key={state}
+                onClick={() => setViewState(state)}
+                className={`px-4 py-1.5 rounded-full text-xs fonfw-medium transition-all ${
+                    viewState === state 
+                    ? 'bg-zinc-900 text-white shadow-md' 
+                    : 'text-zinc-500 hover:text-zinc-900 hover:bg-zinc-100'
+                }`}
+            >
+                {state}
+            </button>
+        ))}
+      </div>
+
+    </div>
+  );
+};
+
+export default VotingPage;