diff --git a/client/src/app/dashboard/page.tsx b/client/src/app/dashboard/page.tsx index 1b2a53e..e37d0ca 100644 --- a/client/src/app/dashboard/page.tsx +++ b/client/src/app/dashboard/page.tsx @@ -3,7 +3,7 @@ import { useState, useEffect } from 'react'; import { motion, AnimatePresence } from 'framer-motion'; import { useSocket } from '../../hooks/useSocket'; -import { Shield, Users, Gamepad2, LogOut, Clock, History, UserMinus, Key } from 'lucide-react'; +import { Shield, Users, Gamepad2, LogOut, Clock, History, UserMinus, Key, ChevronDown } from 'lucide-react'; const ADMIN_PASSWORD = "admin123"; @@ -14,6 +14,7 @@ export default function Dashboard() { const [activeGames, setActiveGames] = useState([]); const [gameHistory, setGameHistory] = useState([]); const [error, setError] = useState(''); + const [expandedGames, setExpandedGames] = useState>(new Set()); // Comprobar sesión al cargar useEffect(() => { @@ -77,6 +78,15 @@ export default function Dashboard() { } }; + const toggleGame = (id: string) => { + setExpandedGames(prev => { + const newSet = new Set(prev); + if (newSet.has(id)) newSet.delete(id); + else newSet.add(id); + return newSet; + }); + }; + if (!isAuthenticated) { return (
@@ -193,7 +203,7 @@ export default function Dashboard() {

Canales de Radio Activos

-
+
{activeGames.length === 0 ? ( -
-
-
-

{game.name}

- {game.status} -
-
- - - {game.currentPlayers} / {game.maxPlayers} Agentes Movilizados - - | - ID: {game.id.slice(0, 8)} -
-
- - -
- - {/* Subpanel: Jugadores */} -
-
- {game.players.map((player: any) => ( -
-
-
- {player.name[0].toUpperCase()} -
-
-

{player.name}

-

AG-{player.id.slice(0, 4)}

-
-
- + {/* Cabecera Compacta (Clickable) */} +
toggleGame(game.id)} + className="flex flex-wrap items-center justify-between p-6 cursor-pointer gap-4" + > +
+
+
+

{game.name}

+
+ ID: {game.id.slice(0, 6)} + • + {new Date(game.created_at || Date.now()).toLocaleTimeString()}
- ))} +
+
+ +
+
+ + {game.currentPlayers} / {game.maxPlayers} +
+
+ {game.status} +
+
+ + {/* Contenido Expandible */} + + {expandedGames.has(game.id) && ( + +
+ {/* Panel de Control */} +
+ +
+ + {/* Grid de Jugadores */} +
+ {game.players.map((player: any) => ( +
+
+
+ {player.name[0].toUpperCase()} +
+
+

{player.name}

+

AG-{player.id.slice(0, 4)}

+
+
+ +
+ ))} +
+
+ + )} + )) )} @@ -280,53 +321,82 @@ export default function Dashboard() {
-
-

Últimos Informes Desclasificados

+
+

Archivos Recientes

+
-
+
{gameHistory.length === 0 ? (
- -

Sin archivos registrados

+

Sin registros

) : ( gameHistory.map((entry: any) => ( - -
-
-

{entry.room_name}

+
+ {/* Cabecera Historial */} +
toggleGame(entry.id)} + className={`p-4 cursor-pointer hover:bg-white/5 transition-colors flex justify-between items-center group relative overflow-hidden ${expandedGames.has(entry.id) ? 'bg-white/[0.02]' : ''}`} + > +
+ +
+

{entry.room_name}

{entry.host_name} - • - {new Date(entry.created_at).toLocaleDateString()}
-
- {entry.winner ? (entry.winner === 'resistance' ? 'RES' : 'SPIES') : 'LOGOUT'} + +
+
+ {entry.winner ? (entry.winner === 'resistance' ? 'ALIAD' : 'AXIS') : '??'} +
+
-
- {entry.players.split(',').length} Agtes -
- {new Date(entry.created_at).toLocaleTimeString()} -
-
- + + {/* Detalles Historial Expandido */} + + {expandedGames.has(entry.id) && ( + +
+
+ FECHA: + {new Date(entry.created_at).toLocaleDateString()} +
+
+ HORA: + {new Date(entry.created_at).toLocaleTimeString()} +
+
+ AGENTES: + {entry.players.split(',').length} +
+ {entry.players && ( +
+

PARTICIPANTES:

+

{entry.players.split(',').join(', ')}

+
+ )} +
+ + )} + +
)) )}
- -
-

Fin del Informe Forense

-