feat: ocultar nombres de votantes por proyecto para voto secreto

This commit is contained in:
urieljareth
2026-08-13 17:07:26 -06:00
parent bd3ead6e74
commit 1961287d81
+7 -41
View File
@@ -1,5 +1,5 @@
import React, { useState } from 'react';
import { RefreshCw, Users, ChevronDown, ChevronUp, Shield, Database, Server } from 'lucide-react';
import React from 'react';
import { RefreshCw, Shield, Database, Server } from 'lucide-react';
import { CandidateStats } from '../types';
interface LiveResultsProps {
@@ -17,8 +17,6 @@ export const LiveResults: React.FC<LiveResultsProps> = ({
isRefreshing,
onToggleAdmin,
}) => {
const [showVoterDetails, setShowVoterDetails] = useState(false);
// Estimado de participación del equipo (base de 15 a 20 miembros del equipo interno)
const estimatedTeamSize = Math.max(totalVotes, 12);
const participationRate = totalVotes > 0 ? Math.min(100, Math.round((totalVotes / estimatedTeamSize) * 100)) : 0;
@@ -47,28 +45,10 @@ export const LiveResults: React.FC<LiveResultsProps> = ({
</div>
</div>
{/* Toggle voter details */}
<div className="flex justify-end mb-4">
<button
type="button"
onClick={() => setShowVoterDetails(!showVoterDetails)}
className="text-[11px] text-gray-400 hover:text-[#00B7D4] transition-colors flex items-center gap-1.5 cursor-pointer font-mono uppercase"
>
<Users className="w-3.5 h-3.5" />
<span>{showVoterDetails ? 'Ocultar nombres' : 'Ver votantes por proyecto'}</span>
{showVoterDetails ? (
<ChevronUp className="w-3 h-3" />
) : (
<ChevronDown className="w-3 h-3" />
)}
</button>
</div>
{/* Candidate Progress Bars (Immersive UI Design) */}
<div className="space-y-3.5" id="barsWrap">
<div className="space-y-3.5 mt-2" id="barsWrap">
{stats.map((cand, index) => {
const isTop = cand.isLeader && cand.votes > 0;
const percentage = cand.percentage.toFixed(1);
const opacityClass =
index === 0
? 'opacity-100'
@@ -123,20 +103,6 @@ export const LiveResults: React.FC<LiveResultsProps> = ({
)}
</div>
</div>
{/* Optional Voter List Chip row */}
{showVoterDetails && cand.voters.length > 0 && (
<div className="pl-[100px] flex flex-wrap gap-1 pt-1 pb-1">
{cand.voters.map((v) => (
<span
key={v}
className="text-[10px] font-mono px-2 py-0.5 rounded bg-white/[0.04] border border-white/10 text-gray-300"
>
{v}
</span>
))}
</div>
)}
</div>
);
})}
@@ -148,16 +114,16 @@ export const LiveResults: React.FC<LiveResultsProps> = ({
<div className="flex flex-wrap items-center gap-4 text-[10px] font-mono text-gray-500 uppercase tracking-tight">
<div>
<div className="text-white/40 flex items-center gap-1">
<Server className="w-2.5 h-2.5 text-[#00B7D4]" /> ENDPOINT
<Server className="w-2.5 h-2.5 text-[#00B7D4]" /> SISTEMA
</div>
<div className="text-gray-300">WORTHY-DUCK-110283</div>
<div className="text-gray-300">VOTO-SECRETO-SSE</div>
</div>
<div>
<div className="text-white/40 flex items-center gap-1">
<Database className="w-2.5 h-2.5 text-[#00e676]" /> INSTANCIA
<Database className="w-2.5 h-2.5 text-[#00e676]" /> BASE DE DATOS
</div>
<div className="text-gray-300">UPSTASH-E3-2026</div>
<div className="text-gray-300">POSTGRESQL-PROD</div>
</div>
</div>