Adding completed_at and winners to g ames

frontend/frontend/src/components/questionbank/GameSetupView.jsx

@@ -1,6 +1,6 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 import { Link, useNavigate } from "react-router-dom";
-import { questionsAPI, gamesAPI } from "../../services/api";
+import { questionsAPI, gamesAPI, teamsAPI } from "../../services/api";
 import AdminNavbar from "../common/AdminNavbar";
 
 export default function GameSetupView() {
@@ -13,11 +13,24 @@ export default function GameSetupView() {
 	const [showTemplateModal, setShowTemplateModal] = useState(false);
 	const [templates, setTemplates] = useState([]);
 	const [randomSelections, setRandomSelections] = useState({});
+	const [pastTeamNames, setPastTeamNames] = useState([]);
+	const [showTeamSuggestions, setShowTeamSuggestions] = useState(false);
+	const teamInputRef = useRef(null);
 
 	useEffect(() => {
 		loadQuestions();
+		loadPastTeamNames();
 	}, []);
 
+	const loadPastTeamNames = async () => {
+		try {
+			const response = await teamsAPI.getPastNames();
+			setPastTeamNames(response.data);
+		} catch (error) {
+			console.error("Error loading past team names:", error);
+		}
+	};
+
 	const loadQuestions = async () => {
 		try {
 			const response = await questionsAPI.getAll();
@@ -100,10 +113,12 @@ export default function GameSetupView() {
 		setSelectedQuestions((prev) => prev.filter((id) => id !== questionId));
 	};
 
-	const addTeam = () => {
-		if (newTeamName.trim()) {
-			setTeams([...teams, newTeamName.trim()]);
+	const addTeam = (name = newTeamName) => {
+		const teamName = name.trim();
+		if (teamName && !teams.includes(teamName)) {
+			setTeams([...teams, teamName]);
 			setNewTeamName("");
+			setShowTeamSuggestions(false);
 		}
 	};
 
@@ -111,6 +126,18 @@ export default function GameSetupView() {
 		setTeams(teams.filter((_, i) => i !== index));
 	};
 
+	// Filter past team names based on input and exclude already added teams
+	const filteredSuggestions = pastTeamNames.filter(
+		(name) =>
+			name.toLowerCase().includes(newTeamName.toLowerCase()) &&
+			!teams.includes(name)
+	);
+
+	// Get quick-add suggestions (past names not yet added to this game)
+	const quickAddSuggestions = pastTeamNames
+		.filter((name) => !teams.includes(name))
+		.slice(0, 8);
+
 	const updateRandomSelection = (category, count) => {
 		setRandomSelections((prev) => ({
 			...prev,
@@ -589,20 +616,97 @@ export default function GameSetupView() {
 							4. Add Teams
 						</h2>
 						<div
-							style={{ display: "flex", gap: "0.5rem", marginBottom: "1rem" }}
+							style={{ display: "flex", gap: "0.5rem", marginBottom: "1rem", position: "relative" }}
 						>
-							<input
-								type="text"
-								value={newTeamName}
-								onChange={(e) => setNewTeamName(e.target.value)}
-								onKeyPress={(e) => e.key === "Enter" && addTeam()}
-								placeholder="Enter team name"
-								style={{ padding: "0.5rem", flex: 1 }}
-							/>
-							<button onClick={addTeam} style={{ padding: "0.5rem 1rem" }}>
+							<div style={{ flex: 1, position: "relative" }}>
+								<input
+									ref={teamInputRef}
+									type="text"
+									value={newTeamName}
+									onChange={(e) => {
+										setNewTeamName(e.target.value);
+										setShowTeamSuggestions(e.target.value.length > 0);
+									}}
+									onFocus={() => setShowTeamSuggestions(newTeamName.length > 0)}
+									onBlur={() => {
+										// Delay hiding to allow click on suggestion
+										setTimeout(() => setShowTeamSuggestions(false), 200);
+									}}
+									onKeyPress={(e) => e.key === "Enter" && addTeam()}
+									placeholder="Enter team name"
+									style={{ padding: "0.5rem", width: "100%", boxSizing: "border-box" }}
+								/>
+								{showTeamSuggestions && filteredSuggestions.length > 0 && (
+									<div
+										style={{
+											position: "absolute",
+											top: "100%",
+											left: 0,
+											right: 0,
+											background: "white",
+											border: "1px solid #ccc",
+											borderRadius: "4px",
+											boxShadow: "0 2px 8px rgba(0,0,0,0.15)",
+											zIndex: 10,
+											maxHeight: "200px",
+											overflowY: "auto",
+										}}
+									>
+										{filteredSuggestions.slice(0, 8).map((name) => (
+											<div
+												key={name}
+												onClick={() => addTeam(name)}
+												style={{
+													padding: "0.5rem 0.75rem",
+													cursor: "pointer",
+													borderBottom: "1px solid #eee",
+												}}
+												onMouseEnter={(e) => (e.target.style.background = "#f5f5f5")}
+												onMouseLeave={(e) => (e.target.style.background = "white")}
+											>
+												{name}
+											</div>
+										))}
+									</div>
+								)}
+							</div>
+							<button onClick={() => addTeam()} style={{ padding: "0.5rem 1rem" }}>
 								Add Team
 							</button>
 						</div>
+						{quickAddSuggestions.length > 0 && (
+							<div style={{ marginBottom: "1rem" }}>
+								<p style={{ margin: "0 0 0.5rem 0", fontSize: "0.9rem", color: "#666" }}>
+									Quick add from past games:
+								</p>
+								<div style={{ display: "flex", flexWrap: "wrap", gap: "0.5rem" }}>
+									{quickAddSuggestions.map((name) => (
+										<button
+											key={name}
+											onClick={() => addTeam(name)}
+											style={{
+												padding: "0.4rem 0.75rem",
+												background: "#f5f5f5",
+												border: "1px solid #ddd",
+												borderRadius: "16px",
+												cursor: "pointer",
+												fontSize: "0.9rem",
+											}}
+											onMouseEnter={(e) => {
+												e.target.style.background = "#e3f2fd";
+												e.target.style.borderColor = "#2196F3";
+											}}
+											onMouseLeave={(e) => {
+												e.target.style.background = "#f5f5f5";
+												e.target.style.borderColor = "#ddd";
+											}}
+										>
+											+ {name}
+										</button>
+									))}
+								</div>
+							</div>
+						)}
 						<div style={{ display: "flex", flexWrap: "wrap", gap: "0.5rem" }}>
 							{teams.map((team, index) => (
 								<div

frontend/frontend/src/services/api.js

@@ -85,6 +85,7 @@ export const gamesAPI = {
 // Teams API
 export const teamsAPI = {
 	delete: (id) => api.delete(`/teams/${id}`),
+	getPastNames: () => api.get("/teams/past-names"),
 };
 
 // Admin API