Jessy/WikiRush
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(admin): add admin panel with user management, daily puzzle CRUD, and activity graph

Browse Source 
- Add admin page at /admin (restricted to ADMIN_EMAIL via proxy)
- Implement user ban/unban and deletion
- Add daily puzzle creation, modification, deletion
- Include 14-day activity chart with hover details
- Add User.banned field to schema and migrate database
- Block banned users from logging in
- Add ADMIN_EMAIL to .env.local configuration
- Update Prisma client after schema changes
This commit is contained in:
jessy-david-dev
2026-04-11 15:10:08 +02:00
parent 5d8f7eae45
commit 8ff64b3470
22 changed files with 899 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/LobbyScreen.tsx
+132 -20
View File
@@ -13,13 +13,29 @@ type LobbyScreenProps = {
onLeave: () => void;
onStart: () => void;
onReset: () => void;
maxPlayers: number;
setMaxPlayers: (v: number) => void;
totalRounds: number;
setTotalRounds: (v: number) => void;
};
export function LobbyScreen({
room, playerId, error, setError, loading, onLeave, onStart, onReset,
room,
playerId,
error,
setError,
loading,
onLeave,
onStart,
onReset,
maxPlayers,
setMaxPlayers,
totalRounds,
setTotalRounds,
}: LobbyScreenProps) {
const isHost = room.players.find((p) => p.id === playerId)?.isHost ?? false;
const [copied, setCopied] = useState(false);
const [blurred, setBlurred] = useState(true);
const { allowed: searchAllowed, toggle: toggleSearch } = useSearchAllowed();
function copyCode() {
@@ -29,33 +45,62 @@ export function LobbyScreen({
});
}
const btnGhost = "w-full min-h-11 px-5 rounded-xl text-sm font-semibold bg-[#242424] border border-[#2e2e2e] text-[#f0f0f0] hover:bg-[#1a1a1a] cursor-pointer transition-colors";
const btnPrimary = "w-full min-h-11 px-5 rounded-xl text-sm font-semibold bg-[#7c3aed] text-white hover:bg-[#6d28d9] disabled:opacity-50 cursor-pointer transition-colors";
const btnGhost =
"w-full min-h-11 px-5 rounded-xl text-sm font-semibold bg-[#242424] border border-[#2e2e2e] text-[#f0f0f0] hover:bg-[#1a1a1a] cursor-pointer transition-colors";
const btnPrimary =
"w-full min-h-11 px-5 rounded-xl text-sm font-semibold bg-[#7c3aed] text-white hover:bg-[#6d28d9] disabled:opacity-50 cursor-pointer transition-colors";
return (
<div className="min-h-dvh w-full bg-[#0f0f0f] text-[#f0f0f0] animate-fade-in flex flex-col items-center px-4 py-5 gap-5 sm:gap-6 max-w-120 mx-auto">
<button className="self-start min-h-9 px-3 rounded-lg text-sm font-semibold bg-[#242424] border border-[#2e2e2e] text-[#f0f0f0] hover:bg-[#1a1a1a] cursor-pointer" onClick={onLeave}>
<button
className="self-start min-h-9 px-3 rounded-lg text-sm font-semibold bg-[#242424] border border-[#2e2e2e] text-[#f0f0f0] hover:bg-[#1a1a1a] cursor-pointer"
onClick={onLeave}
>
Quitter
</button>
{/* Code */}
<div className="w-full text-center bg-[#1a1a1a] border border-[#2e2e2e] rounded-xl p-5 sm:p-6">
<span className="block text-[10px] sm:text-xs text-[#888] uppercase tracking-widest mb-2">Code de la salle</span>
<button className="flex items-center justify-center gap-2 mx-auto px-2 py-1 rounded-lg hover:bg-[#242424] cursor-pointer bg-transparent border-none" onClick={copyCode}>
<span className="text-5xl sm:text-[clamp(42px,12vw,64px)] font-black font-mono tracking-[0.15em] text-[#7c3aed] leading-none">
<div className="flex items-center justify-between mb-2">
<span className="text-[10px] sm:text-xs text-[#888] uppercase tracking-widest">
Code de la salle
</span>
<button
onClick={() => setBlurred((b) => !b)}
className="text-[10px] sm:text-xs text-[#555] hover:text-[#888] transition-colors cursor-pointer"
>
{blurred ? "Afficher" : "Masquer"}
</button>
</div>
<button
className="flex items-center justify-center gap-2 mx-auto px-2 py-1 rounded-lg hover:bg-[#242424] cursor-pointer bg-transparent border-none"
onClick={copyCode}
>
<span
className={`text-5xl sm:text-[clamp(42px,12vw,64px)] font-black font-mono tracking-[0.15em] text-[#7c3aed] leading-none transition-all duration-200 select-none ${blurred ? "blur-md" : ""}`}
>
{room.code}
</span>
<span className={`text-lg sm:text-xl leading-none transition-colors ${copied ? "text-green-400" : "text-[#888]"}`}>
<span
className={`text-lg sm:text-xl leading-none transition-colors ${copied ? "text-green-400" : "text-[#888]"}`}
>
{copied ? "✓" : "⧉"}
</span>
</button>
<span className="block text-xs text-[#888] mt-2">{copied ? "Copié !" : "Clique pour copier"}</span>
<span className="block text-xs text-[#888] mt-2">
{copied ? "Copié !" : "Clique pour copier"}
</span>
</div>
{error && (
<div className="w-full flex items-center justify-between gap-3 bg-red-950/40 border border-red-600 text-red-300 px-3 py-2.5 rounded-xl text-xs sm:text-sm">
{error}
<button onClick={() => setError(null)} className="shrink-0 px-1.5 rounded hover:bg-white/10 cursor-pointer">✕</button>
<button
onClick={() => setError(null)}
className="shrink-0 px-1.5 rounded hover:bg-white/10 cursor-pointer"
>
✕
</button>
</div>
)}
@@ -66,39 +111,106 @@ export function LobbyScreen({
</h3>
<ul className="flex flex-col gap-2">
{room.players.map((p) => (
<li key={p.id} className={`flex items-center gap-2 bg-[#1a1a1a] rounded-xl px-3.5 py-2.5 min-h-11 border ${p.id === playerId ? "border-[#7c3aed]" : "border-[#2e2e2e]"}`}>
<span className="flex-1 font-semibold text-sm truncate">{p.name}</span>
{p.isHost && <span className="text-[10px] font-bold px-2 py-0.5 rounded-full bg-purple-900/40 text-purple-300 uppercase tracking-wide shrink-0">Hôte</span>}
{p.id === playerId && <span className="text-[10px] font-bold px-2 py-0.5 rounded-full bg-blue-900/40 text-blue-300 uppercase tracking-wide shrink-0">Toi</span>}
<span className="text-sm font-bold text-[#7c3aed] shrink-0">{p.score} pts</span>
<li
key={p.id}
className={`flex items-center gap-2 bg-[#1a1a1a] rounded-xl px-3.5 py-2.5 min-h-11 border ${p.id === playerId ? "border-[#7c3aed]" : "border-[#2e2e2e]"}`}
>
<span className="flex-1 font-semibold text-sm truncate">
{p.name}
</span>
{p.isHost && (
<span className="text-[10px] font-bold px-2 py-0.5 rounded-full bg-purple-900/40 text-purple-300 uppercase tracking-wide shrink-0">
Hôte
</span>
)}
{p.id === playerId && (
<span className="text-[10px] font-bold px-2 py-0.5 rounded-full bg-blue-900/40 text-blue-300 uppercase tracking-wide shrink-0">
Toi
</span>
)}
<span className="text-sm font-bold text-[#7c3aed] shrink-0">
{p.score} pts
</span>
</li>
))}
</ul>
</div>
{isHost && (
<div className="w-full bg-[#1a1a1a] border border-[#2e2e2e] rounded-xl p-4 flex flex-col gap-3">
<h3 className="text-[10px] sm:text-xs font-bold text-[#888] uppercase tracking-wider">
Paramètres
</h3>
<div className="flex gap-3">
<div className="flex-1 flex flex-col gap-1.5">
<span className="text-xs text-[#888]">Joueurs max</span>
<select
value={maxPlayers}
onChange={(e) => setMaxPlayers(Number(e.target.value))}
className="w-full min-h-11 px-2 bg-[#0f0f0f] border border-[#2e2e2e] rounded-xl text-sm text-[#f0f0f0] outline-none focus:border-[#7c3aed] cursor-pointer transition-colors"
>
{[2, 3, 4, 5, 6, 7, 8, 10, 12, 14, 16].map((n) => (
<option key={n} value={n}>
{n} joueurs
</option>
))}
</select>
</div>
<div className="flex-1 flex flex-col gap-1.5">
<span className="text-xs text-[#888]">Manches</span>
<select
value={totalRounds}
onChange={(e) => setTotalRounds(Number(e.target.value))}
className="w-full min-h-11 px-2 bg-[#0f0f0f] border border-[#2e2e2e] rounded-xl text-sm text-[#f0f0f0] outline-none focus:border-[#7c3aed] cursor-pointer transition-colors"
>
{[1, 2, 3, 4, 5, 7, 10].map((n) => (
<option key={n} value={n}>
{n}
</option>
))}
</select>
</div>
</div>
</div>
)}
<button
onClick={toggleSearch}
className={`w-full min-h-11 rounded-xl text-sm font-semibold border transition-colors cursor-pointer flex items-center justify-between px-4 ${searchAllowed ? "bg-[#7c3aed]/10 border-[#7c3aed] text-[#a78bfa]" : "bg-[#1a1a1a] border-[#2e2e2e] text-[#888]"}`}
>
<span>🔍 Recherche Ctrl+F</span>
<span className={`text-xs font-bold px-2 py-0.5 rounded-full ${searchAllowed ? "bg-[#7c3aed]/30 text-[#a78bfa]" : "bg-[#242424] text-[#555]"}`}>
<span
className={`text-xs font-bold px-2 py-0.5 rounded-full ${searchAllowed ? "bg-[#7c3aed]/30 text-[#a78bfa]" : "bg-[#242424] text-[#555]"}`}
>
{searchAllowed ? "Autorisée" : "Bloquée"}
</span>
</button>
{room.round > 0 && <p className="text-xs text-[#888] text-center">Manche {room.round} terminée</p>}
{room.round > 0 && (
<p className="text-xs text-[#888] text-center">
Manche {room.round} terminée
</p>
)}
{isHost ? (
<div className="w-full flex flex-col gap-2.5">
<button className={btnPrimary} onClick={onStart} disabled={loading}>
{loading ? "Préparation..." : room.round === 0 ? "Démarrer la partie" : "Manche suivante"}
{loading
? "Préparation..."
: room.round === 0
? "Démarrer la partie"
: "Manche suivante"}
</button>
{room.round > 0 && (
<button className={btnGhost} onClick={onReset}>Nouvelle partie (reset scores)</button>
<button className={btnGhost} onClick={onReset}>
Nouvelle partie (reset scores)
</button>
)}
</div>
) : (
<p className="text-sm text-[#888] text-center animate-pulse-slow">En attente que l&apos;hôte démarre...</p>
<p className="text-sm text-[#888] text-center animate-pulse-slow">
En attente que l&apos;hôte démarre...
</p>
)}
</div>
);