feat(tournaments): add tournament management UI
Add complete tournament management interface including: - Tournament card component with status badges and info display - Tournament form for creating/editing tournaments - Bracket view for single elimination visualization - Inscriptions list with payment tracking - Match score dialog for entering results - Tournaments list page with filtering and search - Tournament detail page with tabs (Overview, Inscriptions, Bracket) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Ivan
762
apps/web/app/(admin)/tournaments/[id]/page.tsx
Normal file
762
apps/web/app/(admin)/tournaments/[id]/page.tsx
Normal file
@@ -0,0 +1,762 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect, useCallback, useMemo } from "react";
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { TournamentForm } from "@/components/tournaments/tournament-form";
|
||||
import { BracketView } from "@/components/tournaments/bracket-view";
|
||||
import { InscriptionsList } from "@/components/tournaments/inscriptions-list";
|
||||
import { MatchScoreDialog } from "@/components/tournaments/match-score-dialog";
|
||||
import { cn, formatCurrency, formatDate } from "@/lib/utils";
|
||||
|
||||
interface Client {
|
||||
id: string;
|
||||
firstName: string;
|
||||
lastName: string;
|
||||
email: string | null;
|
||||
phone: string | null;
|
||||
level: string | null;
|
||||
}
|
||||
|
||||
interface Inscription {
|
||||
id: string;
|
||||
clientId: string;
|
||||
partnerId: string | null;
|
||||
teamName: string | null;
|
||||
seedNumber: number | null;
|
||||
isPaid: boolean;
|
||||
paidAmount: number;
|
||||
registeredAt: string;
|
||||
client: Client;
|
||||
partner?: Client | null;
|
||||
}
|
||||
|
||||
interface Match {
|
||||
id: string;
|
||||
round: number;
|
||||
position: number;
|
||||
status: string;
|
||||
team1Players: string[];
|
||||
team2Players: string[];
|
||||
team1Score: number[] | null;
|
||||
team2Score: number[] | null;
|
||||
winnerId: string | null;
|
||||
scheduledAt: string | null;
|
||||
court: {
|
||||
id: string;
|
||||
name: string;
|
||||
} | null;
|
||||
}
|
||||
|
||||
interface Tournament {
|
||||
id: string;
|
||||
name: string;
|
||||
description: string | null;
|
||||
type: string;
|
||||
status: string;
|
||||
startDate: string;
|
||||
endDate: string | null;
|
||||
maxPlayers: number | null;
|
||||
entryFee: string | number;
|
||||
rules: string | null;
|
||||
isPublic: boolean;
|
||||
settings: {
|
||||
tournamentFormat?: string;
|
||||
category?: string | null;
|
||||
} | null;
|
||||
site: {
|
||||
id: string;
|
||||
name: string;
|
||||
slug: string;
|
||||
address: string | null;
|
||||
phone: string | null;
|
||||
email: string | null;
|
||||
};
|
||||
inscriptions: Inscription[];
|
||||
matches: Match[];
|
||||
_count: {
|
||||
inscriptions: number;
|
||||
matches: number;
|
||||
};
|
||||
}
|
||||
|
||||
const tabs = [
|
||||
{ id: "overview", label: "Resumen" },
|
||||
{ id: "inscriptions", label: "Inscripciones" },
|
||||
{ id: "bracket", label: "Bracket" },
|
||||
];
|
||||
|
||||
const statusConfig: Record<string, { label: string; className: string }> = {
|
||||
DRAFT: {
|
||||
label: "Borrador",
|
||||
className: "bg-gray-100 text-gray-700 border-gray-300",
|
||||
},
|
||||
REGISTRATION_OPEN: {
|
||||
label: "Inscripciones Abiertas",
|
||||
className: "bg-green-100 text-green-700 border-green-300",
|
||||
},
|
||||
REGISTRATION_CLOSED: {
|
||||
label: "Inscripciones Cerradas",
|
||||
className: "bg-yellow-100 text-yellow-700 border-yellow-300",
|
||||
},
|
||||
IN_PROGRESS: {
|
||||
label: "En Progreso",
|
||||
className: "bg-blue-100 text-blue-700 border-blue-300",
|
||||
},
|
||||
COMPLETED: {
|
||||
label: "Finalizado",
|
||||
className: "bg-purple-100 text-purple-700 border-purple-300",
|
||||
},
|
||||
CANCELLED: {
|
||||
label: "Cancelado",
|
||||
className: "bg-red-100 text-red-700 border-red-300",
|
||||
},
|
||||
};
|
||||
|
||||
const typeLabels: Record<string, string> = {
|
||||
BRACKET: "Eliminacion Directa",
|
||||
AMERICANO: "Americano",
|
||||
MEXICANO: "Mexicano",
|
||||
ROUND_ROBIN: "Round Robin",
|
||||
LEAGUE: "Liga",
|
||||
};
|
||||
|
||||
export default function TournamentDetailPage() {
|
||||
const params = useParams();
|
||||
const router = useRouter();
|
||||
const tournamentId = params.id as string;
|
||||
|
||||
const [tournament, setTournament] = useState<Tournament | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [activeTab, setActiveTab] = useState("overview");
|
||||
const [showEditForm, setShowEditForm] = useState(false);
|
||||
const [actionLoading, setActionLoading] = useState<string | null>(null);
|
||||
const [selectedMatch, setSelectedMatch] = useState<Match | null>(null);
|
||||
|
||||
// Build players map for bracket view
|
||||
const playersMap = useMemo(() => {
|
||||
const map = new Map<string, Client>();
|
||||
if (tournament) {
|
||||
tournament.inscriptions.forEach((inscription) => {
|
||||
map.set(inscription.client.id, inscription.client);
|
||||
if (inscription.partner) {
|
||||
map.set(inscription.partner.id, inscription.partner);
|
||||
}
|
||||
});
|
||||
}
|
||||
return map;
|
||||
}, [tournament]);
|
||||
|
||||
const fetchTournament = useCallback(async () => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const response = await fetch(`/api/tournaments/${tournamentId}`);
|
||||
if (!response.ok) {
|
||||
if (response.status === 404) {
|
||||
throw new Error("Torneo no encontrado");
|
||||
}
|
||||
throw new Error("Error al cargar el torneo");
|
||||
}
|
||||
const data = await response.json();
|
||||
setTournament(data);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "Error desconocido");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [tournamentId]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchTournament();
|
||||
}, [fetchTournament]);
|
||||
|
||||
const handleStatusChange = async (newStatus: string) => {
|
||||
if (!tournament) return;
|
||||
setActionLoading("status");
|
||||
try {
|
||||
const response = await fetch(`/api/tournaments/${tournamentId}`, {
|
||||
method: "PUT",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ status: newStatus }),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const data = await response.json();
|
||||
throw new Error(data.error || "Error al actualizar estado");
|
||||
}
|
||||
|
||||
await fetchTournament();
|
||||
} catch (err) {
|
||||
alert(err instanceof Error ? err.message : "Error desconocido");
|
||||
} finally {
|
||||
setActionLoading(null);
|
||||
}
|
||||
};
|
||||
|
||||
const handleGenerateBracket = async () => {
|
||||
if (!tournament) return;
|
||||
if (tournament.inscriptions.length < 2) {
|
||||
alert("Se necesitan al menos 2 equipos para generar el bracket");
|
||||
return;
|
||||
}
|
||||
if (!confirm("¿Generar el bracket? Esto iniciara el torneo y cerrara las inscripciones.")) {
|
||||
return;
|
||||
}
|
||||
|
||||
setActionLoading("bracket");
|
||||
try {
|
||||
const response = await fetch(`/api/tournaments/${tournamentId}/generate-bracket`, {
|
||||
method: "POST",
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const data = await response.json();
|
||||
throw new Error(data.error || "Error al generar bracket");
|
||||
}
|
||||
|
||||
await fetchTournament();
|
||||
setActiveTab("bracket");
|
||||
} catch (err) {
|
||||
alert(err instanceof Error ? err.message : "Error desconocido");
|
||||
} finally {
|
||||
setActionLoading(null);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async () => {
|
||||
if (!tournament) return;
|
||||
if (tournament.status !== "DRAFT") {
|
||||
alert("Solo se pueden eliminar torneos en estado Borrador");
|
||||
return;
|
||||
}
|
||||
if (!confirm("¿Estas seguro de eliminar este torneo? Esta accion no se puede deshacer.")) {
|
||||
return;
|
||||
}
|
||||
|
||||
setActionLoading("delete");
|
||||
try {
|
||||
const response = await fetch(`/api/tournaments/${tournamentId}`, {
|
||||
method: "DELETE",
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const data = await response.json();
|
||||
throw new Error(data.error || "Error al eliminar torneo");
|
||||
}
|
||||
|
||||
router.push("/tournaments");
|
||||
} catch (err) {
|
||||
alert(err instanceof Error ? err.message : "Error desconocido");
|
||||
} finally {
|
||||
setActionLoading(null);
|
||||
}
|
||||
};
|
||||
|
||||
const handleUpdateTournament = async (data: {
|
||||
name: string;
|
||||
description: string;
|
||||
date: string;
|
||||
endDate: string;
|
||||
type: string;
|
||||
category: string;
|
||||
maxTeams: number;
|
||||
price: number;
|
||||
siteId: string;
|
||||
}) => {
|
||||
setActionLoading("edit");
|
||||
try {
|
||||
const response = await fetch(`/api/tournaments/${tournamentId}`, {
|
||||
method: "PUT",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
name: data.name,
|
||||
description: data.description,
|
||||
date: new Date(data.date).toISOString(),
|
||||
endDate: data.endDate ? new Date(data.endDate).toISOString() : null,
|
||||
type: data.type,
|
||||
category: data.category || null,
|
||||
maxTeams: data.maxTeams,
|
||||
price: data.price,
|
||||
}),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json();
|
||||
throw new Error(errorData.error || "Error al actualizar torneo");
|
||||
}
|
||||
|
||||
setShowEditForm(false);
|
||||
await fetchTournament();
|
||||
} catch (err) {
|
||||
throw err;
|
||||
} finally {
|
||||
setActionLoading(null);
|
||||
}
|
||||
};
|
||||
|
||||
const handleRemoveInscription = async (inscriptionId: string) => {
|
||||
try {
|
||||
const response = await fetch(
|
||||
`/api/tournaments/${tournamentId}/inscriptions/${inscriptionId}`,
|
||||
{ method: "DELETE" }
|
||||
);
|
||||
|
||||
if (!response.ok) {
|
||||
const data = await response.json();
|
||||
throw new Error(data.error || "Error al eliminar inscripcion");
|
||||
}
|
||||
|
||||
await fetchTournament();
|
||||
} catch (err) {
|
||||
alert(err instanceof Error ? err.message : "Error desconocido");
|
||||
}
|
||||
};
|
||||
|
||||
const handleTogglePaid = async (inscriptionId: string, isPaid: boolean) => {
|
||||
try {
|
||||
const response = await fetch(
|
||||
`/api/tournaments/${tournamentId}/inscriptions/${inscriptionId}`,
|
||||
{
|
||||
method: "PUT",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ isPaid }),
|
||||
}
|
||||
);
|
||||
|
||||
if (!response.ok) {
|
||||
const data = await response.json();
|
||||
throw new Error(data.error || "Error al actualizar pago");
|
||||
}
|
||||
|
||||
await fetchTournament();
|
||||
} catch (err) {
|
||||
alert(err instanceof Error ? err.message : "Error desconocido");
|
||||
}
|
||||
};
|
||||
|
||||
const handleSaveMatchScore = async (
|
||||
matchId: string,
|
||||
data: {
|
||||
score1: number[];
|
||||
score2: number[];
|
||||
winnerId: string;
|
||||
status: string;
|
||||
}
|
||||
) => {
|
||||
const response = await fetch(
|
||||
`/api/tournaments/${tournamentId}/matches/${matchId}`,
|
||||
{
|
||||
method: "PUT",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(data),
|
||||
}
|
||||
);
|
||||
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json();
|
||||
throw new Error(errorData.error || "Error al guardar resultado");
|
||||
}
|
||||
|
||||
setSelectedMatch(null);
|
||||
await fetchTournament();
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<div className="text-center">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto mb-2"></div>
|
||||
<p className="text-primary-500">Cargando torneo...</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<div className="text-center text-red-500">
|
||||
<p className="text-lg font-medium">{error}</p>
|
||||
<Button variant="outline" className="mt-4" onClick={() => router.push("/tournaments")}>
|
||||
Volver a Torneos
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!tournament) return null;
|
||||
|
||||
const status = statusConfig[tournament.status] || statusConfig.DRAFT;
|
||||
const typeLabel = typeLabels[tournament.type] || tournament.type;
|
||||
const entryFee =
|
||||
typeof tournament.entryFee === "string"
|
||||
? parseFloat(tournament.entryFee)
|
||||
: tournament.entryFee;
|
||||
const canEdit = ["DRAFT", "REGISTRATION_OPEN"].includes(tournament.status);
|
||||
const canGenerateBracket =
|
||||
tournament.status === "REGISTRATION_OPEN" && tournament.inscriptions.length >= 2;
|
||||
const canOpenRegistration = tournament.status === "DRAFT";
|
||||
const canDelete = tournament.status === "DRAFT";
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Header */}
|
||||
<div className="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-4">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => router.push("/tournaments")}
|
||||
className="p-1"
|
||||
>
|
||||
<svg
|
||||
className="w-5 h-5"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M15 19l-7-7 7-7"
|
||||
/>
|
||||
</svg>
|
||||
</Button>
|
||||
<h1 className="text-2xl font-bold text-primary-800">{tournament.name}</h1>
|
||||
<span
|
||||
className={cn(
|
||||
"px-3 py-1 text-sm font-medium rounded-full border",
|
||||
status.className
|
||||
)}
|
||||
>
|
||||
{status.label}
|
||||
</span>
|
||||
</div>
|
||||
{tournament.description && (
|
||||
<p className="text-primary-600 ml-8">{tournament.description}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{canEdit && (
|
||||
<Button variant="outline" onClick={() => setShowEditForm(true)}>
|
||||
<svg
|
||||
className="w-4 h-4 mr-2"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
|
||||
/>
|
||||
</svg>
|
||||
Editar
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{canOpenRegistration && (
|
||||
<Button
|
||||
variant="accent"
|
||||
onClick={() => handleStatusChange("REGISTRATION_OPEN")}
|
||||
disabled={actionLoading === "status"}
|
||||
>
|
||||
{actionLoading === "status" ? (
|
||||
<div className="h-4 w-4 animate-spin rounded-full border-2 border-white/30 border-t-white mr-2" />
|
||||
) : (
|
||||
<svg
|
||||
className="w-4 h-4 mr-2"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M12 4v16m8-8H4"
|
||||
/>
|
||||
</svg>
|
||||
)}
|
||||
Abrir Inscripciones
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{canGenerateBracket && (
|
||||
<Button
|
||||
onClick={handleGenerateBracket}
|
||||
disabled={actionLoading === "bracket"}
|
||||
>
|
||||
{actionLoading === "bracket" ? (
|
||||
<div className="h-4 w-4 animate-spin rounded-full border-2 border-white/30 border-t-white mr-2" />
|
||||
) : (
|
||||
<svg
|
||||
className="w-4 h-4 mr-2"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
|
||||
/>
|
||||
</svg>
|
||||
)}
|
||||
Generar Bracket
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{canDelete && (
|
||||
<Button
|
||||
variant="destructive"
|
||||
onClick={handleDelete}
|
||||
disabled={actionLoading === "delete"}
|
||||
>
|
||||
{actionLoading === "delete" ? (
|
||||
<div className="h-4 w-4 animate-spin rounded-full border-2 border-white/30 border-t-white mr-2" />
|
||||
) : (
|
||||
<svg
|
||||
className="w-4 h-4 mr-2"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
|
||||
/>
|
||||
</svg>
|
||||
)}
|
||||
Eliminar
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Edit Form Modal */}
|
||||
{showEditForm && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4 overflow-y-auto">
|
||||
<div className="my-8">
|
||||
<TournamentForm
|
||||
initialData={{
|
||||
name: tournament.name,
|
||||
description: tournament.description || "",
|
||||
date: tournament.startDate.slice(0, 16),
|
||||
endDate: tournament.endDate?.slice(0, 16) || "",
|
||||
type: tournament.settings?.tournamentFormat || "SINGLE_ELIMINATION",
|
||||
category: tournament.settings?.category || "",
|
||||
maxTeams: tournament.maxPlayers || 16,
|
||||
price: entryFee,
|
||||
siteId: tournament.site.id,
|
||||
}}
|
||||
onSubmit={handleUpdateTournament}
|
||||
onCancel={() => setShowEditForm(false)}
|
||||
isLoading={actionLoading === "edit"}
|
||||
mode="edit"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Match Score Dialog */}
|
||||
{selectedMatch && (
|
||||
<MatchScoreDialog
|
||||
match={selectedMatch}
|
||||
players={playersMap}
|
||||
onSave={handleSaveMatchScore}
|
||||
onClose={() => setSelectedMatch(null)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Tabs */}
|
||||
<div className="border-b border-primary-200">
|
||||
<div className="flex gap-4">
|
||||
{tabs.map((tab) => (
|
||||
<button
|
||||
key={tab.id}
|
||||
onClick={() => setActiveTab(tab.id)}
|
||||
className={cn(
|
||||
"px-4 py-2 text-sm font-medium border-b-2 transition-colors",
|
||||
activeTab === tab.id
|
||||
? "border-primary text-primary"
|
||||
: "border-transparent text-primary-500 hover:text-primary-700 hover:border-primary-300"
|
||||
)}
|
||||
>
|
||||
{tab.label}
|
||||
{tab.id === "inscriptions" && (
|
||||
<span className="ml-2 px-2 py-0.5 text-xs bg-primary-100 text-primary-700 rounded-full">
|
||||
{tournament._count.inscriptions}
|
||||
</span>
|
||||
)}
|
||||
{tab.id === "bracket" && tournament.matches.length > 0 && (
|
||||
<span className="ml-2 px-2 py-0.5 text-xs bg-primary-100 text-primary-700 rounded-full">
|
||||
{tournament.matches.length}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tab Content */}
|
||||
<div>
|
||||
{/* Overview Tab */}
|
||||
{activeTab === "overview" && (
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
{/* Tournament Info */}
|
||||
<Card className="lg:col-span-2">
|
||||
<CardHeader>
|
||||
<CardTitle>Informacion del Torneo</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<p className="text-sm text-primary-500">Tipo</p>
|
||||
<p className="font-medium text-primary-800">{typeLabel}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-primary-500">Categoria</p>
|
||||
<p className="font-medium text-primary-800">
|
||||
{tournament.settings?.category || "Sin categoria"}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-primary-500">Fecha de Inicio</p>
|
||||
<p className="font-medium text-primary-800">
|
||||
{formatDate(tournament.startDate)}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-primary-500">Fecha de Fin</p>
|
||||
<p className="font-medium text-primary-800">
|
||||
{tournament.endDate ? formatDate(tournament.endDate) : "-"}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-primary-500">Precio Inscripcion</p>
|
||||
<p className="font-medium text-primary-800">
|
||||
{entryFee > 0 ? formatCurrency(entryFee) : "Gratis"}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-primary-500">Maximo Equipos</p>
|
||||
<p className="font-medium text-primary-800">
|
||||
{tournament.maxPlayers || "Sin limite"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Site Info */}
|
||||
<div className="pt-4 border-t border-primary-100">
|
||||
<p className="text-sm text-primary-500 mb-2">Sede</p>
|
||||
<div className="bg-primary-50 rounded-lg p-4">
|
||||
<p className="font-medium text-primary-800">{tournament.site.name}</p>
|
||||
{tournament.site.address && (
|
||||
<p className="text-sm text-primary-600">{tournament.site.address}</p>
|
||||
)}
|
||||
{tournament.site.phone && (
|
||||
<p className="text-sm text-primary-600">{tournament.site.phone}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Stats */}
|
||||
<div className="space-y-4">
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<div className="text-center">
|
||||
<p className="text-4xl font-bold text-primary-800">
|
||||
{tournament._count.inscriptions}
|
||||
</p>
|
||||
<p className="text-sm text-primary-500">
|
||||
{tournament.maxPlayers
|
||||
? `de ${tournament.maxPlayers} equipos`
|
||||
: "equipos inscritos"}
|
||||
</p>
|
||||
</div>
|
||||
{tournament.maxPlayers && (
|
||||
<div className="mt-4">
|
||||
<div className="h-2 bg-primary-100 rounded-full overflow-hidden">
|
||||
<div
|
||||
className="h-full bg-accent transition-all"
|
||||
style={{
|
||||
width: `${Math.min(
|
||||
(tournament._count.inscriptions / tournament.maxPlayers) * 100,
|
||||
100
|
||||
)}%`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{tournament.matches.length > 0 && (
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<div className="text-center">
|
||||
<p className="text-4xl font-bold text-primary-800">
|
||||
{tournament.matches.filter((m) => m.status === "COMPLETED").length}
|
||||
</p>
|
||||
<p className="text-sm text-primary-500">
|
||||
de {tournament.matches.length} partidos jugados
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Inscriptions Tab */}
|
||||
{activeTab === "inscriptions" && (
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<InscriptionsList
|
||||
inscriptions={tournament.inscriptions}
|
||||
entryFee={entryFee}
|
||||
onRemove={canEdit ? handleRemoveInscription : undefined}
|
||||
onTogglePaid={canEdit ? handleTogglePaid : undefined}
|
||||
canEdit={canEdit}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Bracket Tab */}
|
||||
{activeTab === "bracket" && (
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<BracketView
|
||||
matches={tournament.matches}
|
||||
players={playersMap}
|
||||
onMatchClick={
|
||||
tournament.status === "IN_PROGRESS"
|
||||
? (match) => setSelectedMatch(match)
|
||||
: undefined
|
||||
}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
284
apps/web/app/(admin)/tournaments/page.tsx
Normal file
284
apps/web/app/(admin)/tournaments/page.tsx
Normal file
@@ -0,0 +1,284 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect, useCallback } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { TournamentCard } from "@/components/tournaments/tournament-card";
|
||||
import { TournamentForm } from "@/components/tournaments/tournament-form";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface Tournament {
|
||||
id: string;
|
||||
name: string;
|
||||
description: string | null;
|
||||
type: string;
|
||||
status: string;
|
||||
startDate: string;
|
||||
endDate: string | null;
|
||||
maxPlayers: number | null;
|
||||
entryFee: number | string;
|
||||
settings: {
|
||||
tournamentFormat?: string;
|
||||
category?: string | null;
|
||||
} | null;
|
||||
site: {
|
||||
id: string;
|
||||
name: string;
|
||||
};
|
||||
_count: {
|
||||
inscriptions: number;
|
||||
matches: number;
|
||||
};
|
||||
}
|
||||
|
||||
const statusFilters = [
|
||||
{ value: "", label: "Todos" },
|
||||
{ value: "DRAFT", label: "Borrador" },
|
||||
{ value: "REGISTRATION_OPEN", label: "Inscripciones Abiertas" },
|
||||
{ value: "IN_PROGRESS", label: "En Progreso" },
|
||||
{ value: "COMPLETED", label: "Finalizados" },
|
||||
{ value: "CANCELLED", label: "Cancelados" },
|
||||
];
|
||||
|
||||
export default function TournamentsPage() {
|
||||
const router = useRouter();
|
||||
const [tournaments, setTournaments] = useState<Tournament[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
const [statusFilter, setStatusFilter] = useState("");
|
||||
const [showForm, setShowForm] = useState(false);
|
||||
const [formLoading, setFormLoading] = useState(false);
|
||||
|
||||
const fetchTournaments = useCallback(async () => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const params = new URLSearchParams();
|
||||
if (statusFilter) {
|
||||
params.append("status", statusFilter);
|
||||
}
|
||||
|
||||
const response = await fetch(`/api/tournaments?${params.toString()}`);
|
||||
if (!response.ok) {
|
||||
throw new Error("Error al cargar torneos");
|
||||
}
|
||||
const data = await response.json();
|
||||
setTournaments(data);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "Error desconocido");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [statusFilter]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchTournaments();
|
||||
}, [fetchTournaments]);
|
||||
|
||||
// Filter tournaments by search query (client-side)
|
||||
const filteredTournaments = tournaments.filter((tournament) => {
|
||||
if (!searchQuery) return true;
|
||||
const query = searchQuery.toLowerCase();
|
||||
return (
|
||||
tournament.name.toLowerCase().includes(query) ||
|
||||
tournament.description?.toLowerCase().includes(query) ||
|
||||
tournament.site.name.toLowerCase().includes(query)
|
||||
);
|
||||
});
|
||||
|
||||
const handleCreateTournament = async (data: {
|
||||
name: string;
|
||||
description: string;
|
||||
date: string;
|
||||
endDate: string;
|
||||
type: string;
|
||||
category: string;
|
||||
maxTeams: number;
|
||||
price: number;
|
||||
siteId: string;
|
||||
}) => {
|
||||
setFormLoading(true);
|
||||
try {
|
||||
const response = await fetch("/api/tournaments", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
...data,
|
||||
date: new Date(data.date).toISOString(),
|
||||
endDate: data.endDate ? new Date(data.endDate).toISOString() : undefined,
|
||||
}),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json();
|
||||
throw new Error(errorData.error || "Error al crear torneo");
|
||||
}
|
||||
|
||||
const newTournament = await response.json();
|
||||
setShowForm(false);
|
||||
router.push(`/tournaments/${newTournament.id}`);
|
||||
} catch (err) {
|
||||
throw err;
|
||||
} finally {
|
||||
setFormLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleTournamentClick = (tournamentId: string) => {
|
||||
router.push(`/tournaments/${tournamentId}`);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Header */}
|
||||
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-primary-800">Torneos</h1>
|
||||
<p className="mt-1 text-primary-600">
|
||||
Gestiona torneos y competiciones de tu club
|
||||
</p>
|
||||
</div>
|
||||
<Button onClick={() => setShowForm(true)}>
|
||||
<svg
|
||||
className="w-5 h-5 mr-2"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M12 4v16m8-8H4"
|
||||
/>
|
||||
</svg>
|
||||
Nuevo Torneo
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Filters */}
|
||||
<div className="flex flex-col sm:flex-row gap-4">
|
||||
{/* Search */}
|
||||
<div className="flex-1">
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Buscar por nombre..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Status Filter */}
|
||||
<div className="flex gap-2 overflow-x-auto pb-2 sm:pb-0">
|
||||
{statusFilters.map((filter) => (
|
||||
<Button
|
||||
key={filter.value}
|
||||
variant={statusFilter === filter.value ? "default" : "outline"}
|
||||
size="sm"
|
||||
onClick={() => setStatusFilter(filter.value)}
|
||||
className="whitespace-nowrap"
|
||||
>
|
||||
{filter.label}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Create Form Modal */}
|
||||
{showForm && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4 overflow-y-auto">
|
||||
<div className="my-8">
|
||||
<TournamentForm
|
||||
onSubmit={handleCreateTournament}
|
||||
onCancel={() => setShowForm(false)}
|
||||
isLoading={formLoading}
|
||||
mode="create"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Loading State */}
|
||||
{loading && (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<div className="text-center">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto mb-2"></div>
|
||||
<p className="text-primary-500">Cargando torneos...</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Error State */}
|
||||
{error && !loading && (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<div className="text-center text-red-500">
|
||||
<p>{error}</p>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="mt-2"
|
||||
onClick={fetchTournaments}
|
||||
>
|
||||
Reintentar
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Empty State */}
|
||||
{!loading && !error && filteredTournaments.length === 0 && (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<div className="text-center text-primary-500">
|
||||
<svg
|
||||
className="w-12 h-12 mx-auto mb-3 text-primary-300"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
|
||||
/>
|
||||
</svg>
|
||||
<p className="font-medium">No hay torneos</p>
|
||||
<p className="text-sm mt-1">
|
||||
{searchQuery || statusFilter
|
||||
? "Intenta con otros filtros"
|
||||
: "Crea tu primer torneo para comenzar"}
|
||||
</p>
|
||||
{!searchQuery && !statusFilter && (
|
||||
<Button className="mt-4" onClick={() => setShowForm(true)}>
|
||||
Crear Torneo
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Tournaments Grid */}
|
||||
{!loading && !error && filteredTournaments.length > 0 && (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{filteredTournaments.map((tournament) => (
|
||||
<TournamentCard
|
||||
key={tournament.id}
|
||||
tournament={tournament}
|
||||
onClick={() => handleTournamentClick(tournament.id)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Results count */}
|
||||
{!loading && !error && filteredTournaments.length > 0 && (
|
||||
<div className="text-center text-sm text-primary-500">
|
||||
Mostrando {filteredTournaments.length} de {tournaments.length} torneos
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
300
apps/web/components/tournaments/bracket-view.tsx
Normal file
300
apps/web/components/tournaments/bracket-view.tsx
Normal file
@@ -0,0 +1,300 @@
|
||||
"use client";
|
||||
|
||||
import { useMemo } from "react";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface Player {
|
||||
id: string;
|
||||
firstName: string;
|
||||
lastName: string;
|
||||
level?: string | null;
|
||||
}
|
||||
|
||||
interface Match {
|
||||
id: string;
|
||||
round: number;
|
||||
position: number;
|
||||
status: string;
|
||||
team1Players: string[];
|
||||
team2Players: string[];
|
||||
team1Score: number[] | null;
|
||||
team2Score: number[] | null;
|
||||
winnerId: string | null;
|
||||
scheduledAt: string | null;
|
||||
court: {
|
||||
id: string;
|
||||
name: string;
|
||||
} | null;
|
||||
}
|
||||
|
||||
interface BracketViewProps {
|
||||
matches: Match[];
|
||||
players: Map<string, Player>;
|
||||
onMatchClick?: (match: Match) => void;
|
||||
}
|
||||
|
||||
const statusColors: Record<string, string> = {
|
||||
SCHEDULED: "bg-gray-50 border-gray-300",
|
||||
IN_PROGRESS: "bg-blue-50 border-blue-400",
|
||||
COMPLETED: "bg-green-50 border-green-300",
|
||||
CANCELLED: "bg-red-50 border-red-300",
|
||||
WALKOVER: "bg-yellow-50 border-yellow-300",
|
||||
};
|
||||
|
||||
function getRoundName(round: number, totalRounds: number): string {
|
||||
const roundsFromEnd = totalRounds - round + 1;
|
||||
switch (roundsFromEnd) {
|
||||
case 1:
|
||||
return "Final";
|
||||
case 2:
|
||||
return "Semifinal";
|
||||
case 3:
|
||||
return "Cuartos";
|
||||
case 4:
|
||||
return "Octavos";
|
||||
case 5:
|
||||
return "Dieciseisavos";
|
||||
default:
|
||||
return `Ronda ${round}`;
|
||||
}
|
||||
}
|
||||
|
||||
function formatScore(scores: number[] | null): string {
|
||||
if (!scores || scores.length === 0) return "-";
|
||||
return scores.join("-");
|
||||
}
|
||||
|
||||
function TeamSlot({
|
||||
playerIds,
|
||||
players,
|
||||
score,
|
||||
isWinner,
|
||||
isEmpty,
|
||||
}: {
|
||||
playerIds: string[];
|
||||
players: Map<string, Player>;
|
||||
score: number[] | null;
|
||||
isWinner: boolean;
|
||||
isEmpty: boolean;
|
||||
}) {
|
||||
if (isEmpty || playerIds.length === 0) {
|
||||
return (
|
||||
<div className="flex items-center justify-between px-3 py-2 bg-gray-100 text-gray-400 rounded text-sm italic">
|
||||
<span>TBD</span>
|
||||
<span>-</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const playerNames = playerIds
|
||||
.map((id) => {
|
||||
const player = players.get(id);
|
||||
if (!player) return "Desconocido";
|
||||
return `${player.firstName} ${player.lastName.charAt(0)}.`;
|
||||
})
|
||||
.join(" / ");
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"flex items-center justify-between px-3 py-2 rounded text-sm transition-all",
|
||||
isWinner
|
||||
? "bg-green-100 text-green-800 font-medium"
|
||||
: "bg-white text-primary-700"
|
||||
)}
|
||||
>
|
||||
<span className="truncate max-w-[140px]" title={playerNames}>
|
||||
{playerNames}
|
||||
</span>
|
||||
<span className={cn("font-mono", isWinner && "font-bold")}>
|
||||
{formatScore(score)}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function MatchBox({
|
||||
match,
|
||||
players,
|
||||
onClick,
|
||||
}: {
|
||||
match: Match;
|
||||
players: Map<string, Player>;
|
||||
onClick?: () => void;
|
||||
}) {
|
||||
const team1IsWinner =
|
||||
match.winnerId && match.team1Players.includes(match.winnerId);
|
||||
const team2IsWinner =
|
||||
match.winnerId && match.team2Players.includes(match.winnerId);
|
||||
|
||||
const isClickable =
|
||||
match.status !== "COMPLETED" &&
|
||||
match.status !== "WALKOVER" &&
|
||||
match.team1Players.length > 0 &&
|
||||
match.team2Players.length > 0;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"w-[220px] rounded-lg border-2 overflow-hidden shadow-sm",
|
||||
statusColors[match.status] || statusColors.SCHEDULED,
|
||||
isClickable && "cursor-pointer hover:shadow-md hover:border-primary-400 transition-all"
|
||||
)}
|
||||
onClick={isClickable ? onClick : undefined}
|
||||
>
|
||||
{/* Match Info Header */}
|
||||
<div className="px-2 py-1 bg-white/50 border-b text-xs text-primary-500 flex justify-between">
|
||||
<span>Partido {match.position}</span>
|
||||
{match.court && <span>{match.court.name}</span>}
|
||||
</div>
|
||||
|
||||
{/* Teams */}
|
||||
<div className="p-2 space-y-1">
|
||||
<TeamSlot
|
||||
playerIds={match.team1Players}
|
||||
players={players}
|
||||
score={match.team1Score}
|
||||
isWinner={!!team1IsWinner}
|
||||
isEmpty={match.team1Players.length === 0}
|
||||
/>
|
||||
<div className="text-center text-xs text-primary-400">vs</div>
|
||||
<TeamSlot
|
||||
playerIds={match.team2Players}
|
||||
players={players}
|
||||
score={match.team2Score}
|
||||
isWinner={!!team2IsWinner}
|
||||
isEmpty={match.team2Players.length === 0}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Status */}
|
||||
<div className="px-2 py-1 text-center">
|
||||
<span
|
||||
className={cn(
|
||||
"text-xs px-2 py-0.5 rounded-full",
|
||||
match.status === "SCHEDULED" && "bg-gray-200 text-gray-600",
|
||||
match.status === "IN_PROGRESS" && "bg-blue-200 text-blue-700",
|
||||
match.status === "COMPLETED" && "bg-green-200 text-green-700",
|
||||
match.status === "WALKOVER" && "bg-yellow-200 text-yellow-700",
|
||||
match.status === "CANCELLED" && "bg-red-200 text-red-700"
|
||||
)}
|
||||
>
|
||||
{match.status === "SCHEDULED" && "Programado"}
|
||||
{match.status === "IN_PROGRESS" && "En Juego"}
|
||||
{match.status === "COMPLETED" && "Finalizado"}
|
||||
{match.status === "WALKOVER" && "Walkover"}
|
||||
{match.status === "CANCELLED" && "Cancelado"}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function BracketView({ matches, players, onMatchClick }: BracketViewProps) {
|
||||
// Group matches by round
|
||||
const matchesByRound = useMemo(() => {
|
||||
const grouped = new Map<number, Match[]>();
|
||||
matches.forEach((match) => {
|
||||
const roundMatches = grouped.get(match.round) || [];
|
||||
roundMatches.push(match);
|
||||
grouped.set(match.round, roundMatches);
|
||||
});
|
||||
// Sort matches in each round by position
|
||||
grouped.forEach((roundMatches) => {
|
||||
roundMatches.sort((a, b) => a.position - b.position);
|
||||
});
|
||||
return grouped;
|
||||
}, [matches]);
|
||||
|
||||
const totalRounds = Math.max(...Array.from(matchesByRound.keys()), 0);
|
||||
const rounds = Array.from({ length: totalRounds }, (_, i) => i + 1);
|
||||
|
||||
if (matches.length === 0) {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-64 text-primary-500">
|
||||
<div className="text-center">
|
||||
<svg
|
||||
className="w-12 h-12 mx-auto mb-3 text-primary-300"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
|
||||
/>
|
||||
</svg>
|
||||
<p>No hay bracket generado</p>
|
||||
<p className="text-sm mt-1">Genera el bracket para comenzar el torneo</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="overflow-x-auto pb-4">
|
||||
<div className="flex gap-8 min-w-max p-4">
|
||||
{rounds.map((round) => {
|
||||
const roundMatches = matchesByRound.get(round) || [];
|
||||
const roundName = getRoundName(round, totalRounds);
|
||||
|
||||
// Calculate vertical spacing for bracket alignment
|
||||
const matchesInPreviousRound = round > 1 ? matchesByRound.get(round - 1)?.length || 0 : roundMatches.length * 2;
|
||||
const spacingMultiplier = Math.pow(2, round - 1);
|
||||
|
||||
return (
|
||||
<div key={round} className="flex flex-col">
|
||||
{/* Round Header */}
|
||||
<div className="text-center mb-4">
|
||||
<h3 className="font-semibold text-primary-800">{roundName}</h3>
|
||||
<p className="text-xs text-primary-500">
|
||||
{roundMatches.length} {roundMatches.length === 1 ? "partido" : "partidos"}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Matches */}
|
||||
<div
|
||||
className="flex flex-col justify-around flex-1"
|
||||
style={{
|
||||
gap: `${(spacingMultiplier - 1) * 100 + 24}px`,
|
||||
paddingTop: `${(spacingMultiplier - 1) * 50}px`,
|
||||
}}
|
||||
>
|
||||
{roundMatches.map((match) => (
|
||||
<MatchBox
|
||||
key={match.id}
|
||||
match={match}
|
||||
players={players}
|
||||
onClick={() => onMatchClick?.(match)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Legend */}
|
||||
<div className="flex flex-wrap gap-4 justify-center mt-6 pt-4 border-t border-primary-200">
|
||||
<div className="flex items-center gap-2 text-xs">
|
||||
<div className="w-4 h-4 rounded bg-gray-200 border border-gray-300" />
|
||||
<span>Programado</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-xs">
|
||||
<div className="w-4 h-4 rounded bg-blue-200 border border-blue-400" />
|
||||
<span>En Juego</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-xs">
|
||||
<div className="w-4 h-4 rounded bg-green-200 border border-green-300" />
|
||||
<span>Finalizado</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-xs">
|
||||
<div className="w-4 h-4 rounded bg-yellow-200 border border-yellow-300" />
|
||||
<span>Walkover</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
242
apps/web/components/tournaments/inscriptions-list.tsx
Normal file
242
apps/web/components/tournaments/inscriptions-list.tsx
Normal file
@@ -0,0 +1,242 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { cn, formatCurrency } from "@/lib/utils";
|
||||
|
||||
interface Client {
|
||||
id: string;
|
||||
firstName: string;
|
||||
lastName: string;
|
||||
email: string | null;
|
||||
phone: string | null;
|
||||
level: string | null;
|
||||
}
|
||||
|
||||
interface Inscription {
|
||||
id: string;
|
||||
clientId: string;
|
||||
partnerId: string | null;
|
||||
teamName: string | null;
|
||||
seedNumber: number | null;
|
||||
isPaid: boolean;
|
||||
paidAmount: number;
|
||||
registeredAt: string;
|
||||
client: Client;
|
||||
partner?: Client | null;
|
||||
}
|
||||
|
||||
interface InscriptionsListProps {
|
||||
inscriptions: Inscription[];
|
||||
entryFee: number;
|
||||
onRemove?: (inscriptionId: string) => Promise<void>;
|
||||
onTogglePaid?: (inscriptionId: string, isPaid: boolean) => Promise<void>;
|
||||
canEdit?: boolean;
|
||||
}
|
||||
|
||||
export function InscriptionsList({
|
||||
inscriptions,
|
||||
entryFee,
|
||||
onRemove,
|
||||
onTogglePaid,
|
||||
canEdit = false,
|
||||
}: InscriptionsListProps) {
|
||||
const [loadingId, setLoadingId] = useState<string | null>(null);
|
||||
|
||||
const handleRemove = async (inscriptionId: string) => {
|
||||
if (!onRemove) return;
|
||||
if (!confirm("¿Estas seguro de eliminar esta inscripcion?")) return;
|
||||
|
||||
setLoadingId(inscriptionId);
|
||||
try {
|
||||
await onRemove(inscriptionId);
|
||||
} finally {
|
||||
setLoadingId(null);
|
||||
}
|
||||
};
|
||||
|
||||
const handleTogglePaid = async (inscription: Inscription) => {
|
||||
if (!onTogglePaid) return;
|
||||
setLoadingId(inscription.id);
|
||||
try {
|
||||
await onTogglePaid(inscription.id, !inscription.isPaid);
|
||||
} finally {
|
||||
setLoadingId(null);
|
||||
}
|
||||
};
|
||||
|
||||
const getTeamName = (inscription: Inscription): string => {
|
||||
if (inscription.teamName) return inscription.teamName;
|
||||
const p1 = `${inscription.client.firstName} ${inscription.client.lastName}`;
|
||||
if (inscription.partner) {
|
||||
return `${p1} / ${inscription.partner.firstName} ${inscription.partner.lastName}`;
|
||||
}
|
||||
return p1;
|
||||
};
|
||||
|
||||
const getPlayerNames = (inscription: Inscription): string => {
|
||||
const p1 = `${inscription.client.firstName} ${inscription.client.lastName}`;
|
||||
if (inscription.partner) {
|
||||
return `${p1}, ${inscription.partner.firstName} ${inscription.partner.lastName}`;
|
||||
}
|
||||
return p1;
|
||||
};
|
||||
|
||||
const paidCount = inscriptions.filter((i) => i.isPaid).length;
|
||||
const totalCollected = inscriptions
|
||||
.filter((i) => i.isPaid)
|
||||
.reduce((sum, i) => sum + (i.paidAmount || entryFee), 0);
|
||||
|
||||
if (inscriptions.length === 0) {
|
||||
return (
|
||||
<div className="text-center py-12 text-primary-500">
|
||||
<svg
|
||||
className="w-12 h-12 mx-auto mb-3 text-primary-300"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"
|
||||
/>
|
||||
</svg>
|
||||
<p>No hay inscripciones todavia</p>
|
||||
<p className="text-sm mt-1">Abre las inscripciones para recibir equipos</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* Summary */}
|
||||
<div className="flex flex-wrap gap-4 p-4 bg-primary-50 rounded-lg">
|
||||
<div className="flex-1 min-w-[150px]">
|
||||
<p className="text-sm text-primary-500">Total Equipos</p>
|
||||
<p className="text-2xl font-bold text-primary-800">
|
||||
{inscriptions.length}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex-1 min-w-[150px]">
|
||||
<p className="text-sm text-primary-500">Pagados</p>
|
||||
<p className="text-2xl font-bold text-green-600">
|
||||
{paidCount} / {inscriptions.length}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex-1 min-w-[150px]">
|
||||
<p className="text-sm text-primary-500">Recaudado</p>
|
||||
<p className="text-2xl font-bold text-accent-600">
|
||||
{formatCurrency(totalCollected)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Table */}
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="border-b border-primary-200">
|
||||
<th className="text-left py-3 px-4 text-sm font-medium text-primary-600">
|
||||
#
|
||||
</th>
|
||||
<th className="text-left py-3 px-4 text-sm font-medium text-primary-600">
|
||||
Equipo / Jugadores
|
||||
</th>
|
||||
<th className="text-left py-3 px-4 text-sm font-medium text-primary-600">
|
||||
Contacto
|
||||
</th>
|
||||
<th className="text-center py-3 px-4 text-sm font-medium text-primary-600">
|
||||
Estado Pago
|
||||
</th>
|
||||
{canEdit && (
|
||||
<th className="text-right py-3 px-4 text-sm font-medium text-primary-600">
|
||||
Acciones
|
||||
</th>
|
||||
)}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{inscriptions.map((inscription, index) => (
|
||||
<tr
|
||||
key={inscription.id}
|
||||
className={cn(
|
||||
"border-b border-primary-100 hover:bg-primary-50 transition-colors",
|
||||
loadingId === inscription.id && "opacity-50"
|
||||
)}
|
||||
>
|
||||
<td className="py-3 px-4 text-sm text-primary-500">
|
||||
{inscription.seedNumber || index + 1}
|
||||
</td>
|
||||
<td className="py-3 px-4">
|
||||
<div>
|
||||
<p className="font-medium text-primary-800">
|
||||
{getTeamName(inscription)}
|
||||
</p>
|
||||
<p className="text-xs text-primary-500">
|
||||
{getPlayerNames(inscription)}
|
||||
</p>
|
||||
</div>
|
||||
</td>
|
||||
<td className="py-3 px-4">
|
||||
<div className="text-sm">
|
||||
{inscription.client.email && (
|
||||
<p className="text-primary-600">{inscription.client.email}</p>
|
||||
)}
|
||||
{inscription.client.phone && (
|
||||
<p className="text-primary-500">{inscription.client.phone}</p>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
<td className="py-3 px-4 text-center">
|
||||
<button
|
||||
onClick={() => canEdit && handleTogglePaid(inscription)}
|
||||
disabled={!canEdit || loadingId === inscription.id}
|
||||
className={cn(
|
||||
"px-3 py-1 text-xs font-medium rounded-full transition-colors",
|
||||
inscription.isPaid
|
||||
? "bg-green-100 text-green-700 hover:bg-green-200"
|
||||
: "bg-yellow-100 text-yellow-700 hover:bg-yellow-200",
|
||||
!canEdit && "cursor-default hover:bg-inherit"
|
||||
)}
|
||||
>
|
||||
{inscription.isPaid ? "Pagado" : "Pendiente"}
|
||||
</button>
|
||||
</td>
|
||||
{canEdit && (
|
||||
<td className="py-3 px-4 text-right">
|
||||
<Button
|
||||
variant="destructive"
|
||||
size="sm"
|
||||
onClick={() => handleRemove(inscription.id)}
|
||||
disabled={loadingId === inscription.id}
|
||||
>
|
||||
{loadingId === inscription.id ? (
|
||||
<div className="h-4 w-4 animate-spin rounded-full border-2 border-white/30 border-t-white" />
|
||||
) : (
|
||||
<svg
|
||||
className="w-4 h-4"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
|
||||
/>
|
||||
</svg>
|
||||
)}
|
||||
</Button>
|
||||
</td>
|
||||
)}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
313
apps/web/components/tournaments/match-score-dialog.tsx
Normal file
313
apps/web/components/tournaments/match-score-dialog.tsx
Normal file
@@ -0,0 +1,313 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Card, CardContent, CardHeader, CardTitle, CardFooter } from "@/components/ui/card";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface Player {
|
||||
id: string;
|
||||
firstName: string;
|
||||
lastName: string;
|
||||
}
|
||||
|
||||
interface Match {
|
||||
id: string;
|
||||
round: number;
|
||||
position: number;
|
||||
status: string;
|
||||
team1Players: string[];
|
||||
team2Players: string[];
|
||||
team1Score: number[] | null;
|
||||
team2Score: number[] | null;
|
||||
winnerId: string | null;
|
||||
}
|
||||
|
||||
interface MatchScoreDialogProps {
|
||||
match: Match;
|
||||
players: Map<string, Player>;
|
||||
onSave: (matchId: string, data: {
|
||||
score1: number[];
|
||||
score2: number[];
|
||||
winnerId: string;
|
||||
status: string;
|
||||
}) => Promise<void>;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export function MatchScoreDialog({
|
||||
match,
|
||||
players,
|
||||
onSave,
|
||||
onClose,
|
||||
}: MatchScoreDialogProps) {
|
||||
const [sets, setSets] = useState<Array<{ team1: string; team2: string }>>(() => {
|
||||
// Initialize with existing scores or 3 empty sets
|
||||
const existingScore1 = match.team1Score || [];
|
||||
const existingScore2 = match.team2Score || [];
|
||||
const initialSets = [];
|
||||
for (let i = 0; i < 3; i++) {
|
||||
initialSets.push({
|
||||
team1: existingScore1[i]?.toString() || "",
|
||||
team2: existingScore2[i]?.toString() || "",
|
||||
});
|
||||
}
|
||||
return initialSets;
|
||||
});
|
||||
const [selectedWinner, setSelectedWinner] = useState<"team1" | "team2" | null>(
|
||||
() => {
|
||||
if (match.winnerId) {
|
||||
if (match.team1Players.includes(match.winnerId)) return "team1";
|
||||
if (match.team2Players.includes(match.winnerId)) return "team2";
|
||||
}
|
||||
return null;
|
||||
}
|
||||
);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const getTeamName = (playerIds: string[]): string => {
|
||||
return playerIds
|
||||
.map((id) => {
|
||||
const player = players.get(id);
|
||||
if (!player) return "Desconocido";
|
||||
return `${player.firstName} ${player.lastName.charAt(0)}.`;
|
||||
})
|
||||
.join(" / ");
|
||||
};
|
||||
|
||||
const team1Name = getTeamName(match.team1Players);
|
||||
const team2Name = getTeamName(match.team2Players);
|
||||
|
||||
const handleSetChange = (setIndex: number, team: "team1" | "team2", value: string) => {
|
||||
// Only allow numbers
|
||||
if (value && !/^\d*$/.test(value)) return;
|
||||
|
||||
const newSets = [...sets];
|
||||
newSets[setIndex] = {
|
||||
...newSets[setIndex],
|
||||
[team]: value,
|
||||
};
|
||||
setSets(newSets);
|
||||
};
|
||||
|
||||
const calculateWinnerFromScore = (): "team1" | "team2" | null => {
|
||||
let team1Sets = 0;
|
||||
let team2Sets = 0;
|
||||
|
||||
sets.forEach((set) => {
|
||||
const t1 = parseInt(set.team1) || 0;
|
||||
const t2 = parseInt(set.team2) || 0;
|
||||
if (t1 > t2) team1Sets++;
|
||||
if (t2 > t1) team2Sets++;
|
||||
});
|
||||
|
||||
if (team1Sets > team2Sets) return "team1";
|
||||
if (team2Sets > team1Sets) return "team2";
|
||||
return null;
|
||||
};
|
||||
|
||||
const handleAutoSelectWinner = () => {
|
||||
const winner = calculateWinnerFromScore();
|
||||
if (winner) {
|
||||
setSelectedWinner(winner);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
setError(null);
|
||||
|
||||
if (!selectedWinner) {
|
||||
setError("Selecciona un ganador");
|
||||
return;
|
||||
}
|
||||
|
||||
// Build scores array (filter out empty sets)
|
||||
const score1: number[] = [];
|
||||
const score2: number[] = [];
|
||||
let hasValidScore = false;
|
||||
|
||||
sets.forEach((set) => {
|
||||
const t1 = set.team1 !== "" ? parseInt(set.team1) : null;
|
||||
const t2 = set.team2 !== "" ? parseInt(set.team2) : null;
|
||||
if (t1 !== null && t2 !== null) {
|
||||
score1.push(t1);
|
||||
score2.push(t2);
|
||||
hasValidScore = true;
|
||||
}
|
||||
});
|
||||
|
||||
if (!hasValidScore) {
|
||||
setError("Ingresa al menos un set con resultado");
|
||||
return;
|
||||
}
|
||||
|
||||
const winnerId =
|
||||
selectedWinner === "team1"
|
||||
? match.team1Players[0]
|
||||
: match.team2Players[0];
|
||||
|
||||
setIsLoading(true);
|
||||
try {
|
||||
await onSave(match.id, {
|
||||
score1,
|
||||
score2,
|
||||
winnerId,
|
||||
status: "COMPLETED",
|
||||
});
|
||||
onClose();
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "Error al guardar");
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleOverlayClick = (e: React.MouseEvent) => {
|
||||
if (e.target === e.currentTarget) {
|
||||
onClose();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"
|
||||
onClick={handleOverlayClick}
|
||||
>
|
||||
<Card className="w-full max-w-md">
|
||||
<CardHeader className="pb-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle className="text-lg">Resultado del Partido</CardTitle>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="rounded-full p-1 hover:bg-primary-100 transition-colors"
|
||||
>
|
||||
<svg
|
||||
className="h-5 w-5 text-primary-500"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M6 18L18 6M6 6l12 12"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<p className="text-sm text-primary-500 mt-1">
|
||||
Ronda {match.round}, Partido {match.position}
|
||||
</p>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="space-y-6">
|
||||
{error && (
|
||||
<div className="rounded-md bg-red-50 border border-red-200 p-3 text-sm text-red-700">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Score Grid */}
|
||||
<div className="space-y-4">
|
||||
{/* Header */}
|
||||
<div className="grid grid-cols-[1fr,repeat(3,48px)] gap-2 text-center text-sm text-primary-500">
|
||||
<div></div>
|
||||
<div>Set 1</div>
|
||||
<div>Set 2</div>
|
||||
<div>Set 3</div>
|
||||
</div>
|
||||
|
||||
{/* Team 1 */}
|
||||
<div className="grid grid-cols-[1fr,repeat(3,48px)] gap-2 items-center">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setSelectedWinner("team1")}
|
||||
className={cn(
|
||||
"text-left px-3 py-2 rounded-md transition-all text-sm",
|
||||
selectedWinner === "team1"
|
||||
? "bg-green-100 text-green-800 ring-2 ring-green-500"
|
||||
: "bg-primary-50 text-primary-700 hover:bg-primary-100"
|
||||
)}
|
||||
>
|
||||
<span className="block truncate font-medium">{team1Name}</span>
|
||||
</button>
|
||||
{sets.map((set, i) => (
|
||||
<Input
|
||||
key={`t1-${i}`}
|
||||
type="text"
|
||||
inputMode="numeric"
|
||||
maxLength={2}
|
||||
value={set.team1}
|
||||
onChange={(e) => handleSetChange(i, "team1", e.target.value)}
|
||||
onBlur={handleAutoSelectWinner}
|
||||
className="text-center px-2"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Team 2 */}
|
||||
<div className="grid grid-cols-[1fr,repeat(3,48px)] gap-2 items-center">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setSelectedWinner("team2")}
|
||||
className={cn(
|
||||
"text-left px-3 py-2 rounded-md transition-all text-sm",
|
||||
selectedWinner === "team2"
|
||||
? "bg-green-100 text-green-800 ring-2 ring-green-500"
|
||||
: "bg-primary-50 text-primary-700 hover:bg-primary-100"
|
||||
)}
|
||||
>
|
||||
<span className="block truncate font-medium">{team2Name}</span>
|
||||
</button>
|
||||
{sets.map((set, i) => (
|
||||
<Input
|
||||
key={`t2-${i}`}
|
||||
type="text"
|
||||
inputMode="numeric"
|
||||
maxLength={2}
|
||||
value={set.team2}
|
||||
onChange={(e) => handleSetChange(i, "team2", e.target.value)}
|
||||
onBlur={handleAutoSelectWinner}
|
||||
className="text-center px-2"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Winner Selection Info */}
|
||||
<div className="text-center text-sm text-primary-500">
|
||||
{selectedWinner ? (
|
||||
<span>
|
||||
Ganador:{" "}
|
||||
<span className="font-medium text-green-700">
|
||||
{selectedWinner === "team1" ? team1Name : team2Name}
|
||||
</span>
|
||||
</span>
|
||||
) : (
|
||||
<span>Haz clic en el equipo ganador o ingresa el marcador</span>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
|
||||
<CardFooter className="flex justify-end gap-3 border-t border-primary-200 bg-primary-50 pt-4">
|
||||
<Button variant="outline" onClick={onClose}>
|
||||
Cancelar
|
||||
</Button>
|
||||
<Button onClick={handleSave} disabled={isLoading || !selectedWinner}>
|
||||
{isLoading ? (
|
||||
<span className="flex items-center gap-2">
|
||||
<div className="h-4 w-4 animate-spin rounded-full border-2 border-white/30 border-t-white" />
|
||||
Guardando...
|
||||
</span>
|
||||
) : (
|
||||
"Guardar Resultado"
|
||||
)}
|
||||
</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
175
apps/web/components/tournaments/tournament-card.tsx
Normal file
175
apps/web/components/tournaments/tournament-card.tsx
Normal file
@@ -0,0 +1,175 @@
|
||||
"use client";
|
||||
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { formatCurrency, formatDate, cn } from "@/lib/utils";
|
||||
|
||||
interface Tournament {
|
||||
id: string;
|
||||
name: string;
|
||||
description: string | null;
|
||||
type: string;
|
||||
status: string;
|
||||
startDate: string;
|
||||
endDate: string | null;
|
||||
maxPlayers: number | null;
|
||||
entryFee: number | string;
|
||||
settings: {
|
||||
tournamentFormat?: string;
|
||||
category?: string | null;
|
||||
} | null;
|
||||
site: {
|
||||
id: string;
|
||||
name: string;
|
||||
};
|
||||
_count: {
|
||||
inscriptions: number;
|
||||
matches: number;
|
||||
};
|
||||
}
|
||||
|
||||
interface TournamentCardProps {
|
||||
tournament: Tournament;
|
||||
onClick?: () => void;
|
||||
}
|
||||
|
||||
const statusConfig: Record<string, { label: string; className: string }> = {
|
||||
DRAFT: {
|
||||
label: "Borrador",
|
||||
className: "bg-gray-100 text-gray-700 border-gray-300",
|
||||
},
|
||||
REGISTRATION_OPEN: {
|
||||
label: "Inscripciones Abiertas",
|
||||
className: "bg-green-100 text-green-700 border-green-300",
|
||||
},
|
||||
REGISTRATION_CLOSED: {
|
||||
label: "Inscripciones Cerradas",
|
||||
className: "bg-yellow-100 text-yellow-700 border-yellow-300",
|
||||
},
|
||||
IN_PROGRESS: {
|
||||
label: "En Progreso",
|
||||
className: "bg-blue-100 text-blue-700 border-blue-300",
|
||||
},
|
||||
COMPLETED: {
|
||||
label: "Finalizado",
|
||||
className: "bg-purple-100 text-purple-700 border-purple-300",
|
||||
},
|
||||
CANCELLED: {
|
||||
label: "Cancelado",
|
||||
className: "bg-red-100 text-red-700 border-red-300",
|
||||
},
|
||||
};
|
||||
|
||||
const typeLabels: Record<string, string> = {
|
||||
BRACKET: "Eliminacion Directa",
|
||||
AMERICANO: "Americano",
|
||||
MEXICANO: "Mexicano",
|
||||
ROUND_ROBIN: "Round Robin",
|
||||
LEAGUE: "Liga",
|
||||
};
|
||||
|
||||
export function TournamentCard({ tournament, onClick }: TournamentCardProps) {
|
||||
const status = statusConfig[tournament.status] || statusConfig.DRAFT;
|
||||
const typeLabel = typeLabels[tournament.type] || tournament.type;
|
||||
const category = tournament.settings?.category;
|
||||
const entryFee = typeof tournament.entryFee === 'string'
|
||||
? parseFloat(tournament.entryFee)
|
||||
: tournament.entryFee;
|
||||
|
||||
return (
|
||||
<Card
|
||||
className={cn(
|
||||
"cursor-pointer transition-all hover:shadow-lg hover:border-primary-400",
|
||||
"relative overflow-hidden"
|
||||
)}
|
||||
onClick={onClick}
|
||||
>
|
||||
<CardHeader className="pb-2">
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<CardTitle className="text-lg line-clamp-2">{tournament.name}</CardTitle>
|
||||
<span
|
||||
className={cn(
|
||||
"px-2 py-1 text-xs font-medium rounded-full border shrink-0",
|
||||
status.className
|
||||
)}
|
||||
>
|
||||
{status.label}
|
||||
</span>
|
||||
</div>
|
||||
{tournament.description && (
|
||||
<p className="text-sm text-primary-500 line-clamp-2 mt-1">
|
||||
{tournament.description}
|
||||
</p>
|
||||
)}
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
{/* Type and Category */}
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<span className="px-2 py-1 text-xs bg-primary-100 text-primary-700 rounded">
|
||||
{typeLabel}
|
||||
</span>
|
||||
{category && (
|
||||
<span className="px-2 py-1 text-xs bg-accent-100 text-accent-700 rounded">
|
||||
{category}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Date */}
|
||||
<div className="flex items-center gap-2 text-sm text-primary-600">
|
||||
<svg
|
||||
className="w-4 h-4"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
|
||||
/>
|
||||
</svg>
|
||||
<span>{formatDate(tournament.startDate)}</span>
|
||||
{tournament.endDate && (
|
||||
<>
|
||||
<span>-</span>
|
||||
<span>{formatDate(tournament.endDate)}</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Inscriptions and Price */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<svg
|
||||
className="w-4 h-4 text-primary-500"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"
|
||||
/>
|
||||
</svg>
|
||||
<span className="text-primary-700">
|
||||
{tournament._count.inscriptions}
|
||||
{tournament.maxPlayers && ` / ${tournament.maxPlayers}`}
|
||||
{" equipos"}
|
||||
</span>
|
||||
</div>
|
||||
<span className="font-semibold text-primary-800">
|
||||
{entryFee > 0 ? formatCurrency(entryFee) : "Gratis"}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Site name */}
|
||||
<div className="pt-2 border-t border-primary-100">
|
||||
<span className="text-xs text-primary-500">{tournament.site.name}</span>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
342
apps/web/components/tournaments/tournament-form.tsx
Normal file
342
apps/web/components/tournaments/tournament-form.tsx
Normal file
@@ -0,0 +1,342 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Card, CardContent, CardHeader, CardTitle, CardFooter } from "@/components/ui/card";
|
||||
|
||||
interface TournamentFormData {
|
||||
name: string;
|
||||
description: string;
|
||||
date: string;
|
||||
endDate: string;
|
||||
type: string;
|
||||
category: string;
|
||||
maxTeams: number;
|
||||
price: number;
|
||||
siteId: string;
|
||||
}
|
||||
|
||||
interface Site {
|
||||
id: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
interface TournamentFormProps {
|
||||
initialData?: Partial<TournamentFormData>;
|
||||
onSubmit: (data: TournamentFormData) => Promise<void>;
|
||||
onCancel: () => void;
|
||||
isLoading?: boolean;
|
||||
mode?: "create" | "edit";
|
||||
}
|
||||
|
||||
const tournamentTypes = [
|
||||
{ value: "SINGLE_ELIMINATION", label: "Eliminacion Directa" },
|
||||
{ value: "DOUBLE_ELIMINATION", label: "Doble Eliminacion" },
|
||||
{ value: "ROUND_ROBIN", label: "Round Robin" },
|
||||
{ value: "LEAGUE", label: "Liga" },
|
||||
];
|
||||
|
||||
const categories = [
|
||||
{ value: "", label: "Sin categoria" },
|
||||
{ value: "1ra", label: "1ra Categoria" },
|
||||
{ value: "2da", label: "2da Categoria" },
|
||||
{ value: "3ra", label: "3ra Categoria" },
|
||||
{ value: "4ta", label: "4ta Categoria" },
|
||||
{ value: "5ta", label: "5ta Categoria" },
|
||||
{ value: "Mixto", label: "Mixto" },
|
||||
{ value: "Femenil", label: "Femenil" },
|
||||
{ value: "Varonil", label: "Varonil" },
|
||||
{ value: "Open", label: "Open" },
|
||||
];
|
||||
|
||||
export function TournamentForm({
|
||||
initialData,
|
||||
onSubmit,
|
||||
onCancel,
|
||||
isLoading = false,
|
||||
mode = "create",
|
||||
}: TournamentFormProps) {
|
||||
const [sites, setSites] = useState<Site[]>([]);
|
||||
const [loadingSites, setLoadingSites] = useState(true);
|
||||
const [formData, setFormData] = useState<TournamentFormData>({
|
||||
name: initialData?.name || "",
|
||||
description: initialData?.description || "",
|
||||
date: initialData?.date || "",
|
||||
endDate: initialData?.endDate || "",
|
||||
type: initialData?.type || "SINGLE_ELIMINATION",
|
||||
category: initialData?.category || "",
|
||||
maxTeams: initialData?.maxTeams || 16,
|
||||
price: initialData?.price || 0,
|
||||
siteId: initialData?.siteId || "",
|
||||
});
|
||||
const [errors, setErrors] = useState<Record<string, string>>({});
|
||||
|
||||
// Fetch sites
|
||||
useEffect(() => {
|
||||
async function fetchSites() {
|
||||
try {
|
||||
const response = await fetch("/api/sites");
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
setSites(data);
|
||||
// Set default site if not set
|
||||
if (!formData.siteId && data.length > 0) {
|
||||
setFormData(prev => ({ ...prev, siteId: data[0].id }));
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error fetching sites:", error);
|
||||
} finally {
|
||||
setLoadingSites(false);
|
||||
}
|
||||
}
|
||||
fetchSites();
|
||||
}, []);
|
||||
|
||||
const handleChange = (
|
||||
e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>
|
||||
) => {
|
||||
const { name, value, type } = e.target;
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
[name]: type === "number" ? parseFloat(value) || 0 : value,
|
||||
}));
|
||||
// Clear error when field is modified
|
||||
if (errors[name]) {
|
||||
setErrors((prev) => {
|
||||
const newErrors = { ...prev };
|
||||
delete newErrors[name];
|
||||
return newErrors;
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const validate = (): boolean => {
|
||||
const newErrors: Record<string, string> = {};
|
||||
|
||||
if (!formData.name.trim()) {
|
||||
newErrors.name = "El nombre es requerido";
|
||||
}
|
||||
if (!formData.date) {
|
||||
newErrors.date = "La fecha de inicio es requerida";
|
||||
}
|
||||
if (!formData.siteId) {
|
||||
newErrors.siteId = "Selecciona una sede";
|
||||
}
|
||||
if (formData.maxTeams < 2) {
|
||||
newErrors.maxTeams = "Minimo 2 equipos";
|
||||
}
|
||||
if (formData.price < 0) {
|
||||
newErrors.price = "El precio no puede ser negativo";
|
||||
}
|
||||
if (formData.endDate && new Date(formData.endDate) < new Date(formData.date)) {
|
||||
newErrors.endDate = "La fecha de fin debe ser posterior a la de inicio";
|
||||
}
|
||||
|
||||
setErrors(newErrors);
|
||||
return Object.keys(newErrors).length === 0;
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!validate()) return;
|
||||
await onSubmit(formData);
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className="w-full max-w-2xl mx-auto">
|
||||
<form onSubmit={handleSubmit}>
|
||||
<CardHeader>
|
||||
<CardTitle>
|
||||
{mode === "create" ? "Nuevo Torneo" : "Editar Torneo"}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{/* Name */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-primary-700 mb-1">
|
||||
Nombre del Torneo *
|
||||
</label>
|
||||
<Input
|
||||
name="name"
|
||||
value={formData.name}
|
||||
onChange={handleChange}
|
||||
placeholder="Ej: Torneo Navidad 2024"
|
||||
className={errors.name ? "border-red-500" : ""}
|
||||
/>
|
||||
{errors.name && (
|
||||
<p className="text-red-500 text-xs mt-1">{errors.name}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-primary-700 mb-1">
|
||||
Descripcion
|
||||
</label>
|
||||
<textarea
|
||||
name="description"
|
||||
value={formData.description}
|
||||
onChange={handleChange}
|
||||
placeholder="Descripcion del torneo..."
|
||||
rows={3}
|
||||
className="flex w-full rounded-md border border-primary-200 bg-white px-3 py-2 text-sm ring-offset-white placeholder:text-primary-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Site Selection */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-primary-700 mb-1">
|
||||
Sede *
|
||||
</label>
|
||||
<select
|
||||
name="siteId"
|
||||
value={formData.siteId}
|
||||
onChange={handleChange}
|
||||
className="flex h-10 w-full rounded-md border border-primary-200 bg-white px-3 py-2 text-sm ring-offset-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2"
|
||||
disabled={loadingSites}
|
||||
>
|
||||
<option value="">Selecciona una sede</option>
|
||||
{sites.map((site) => (
|
||||
<option key={site.id} value={site.id}>
|
||||
{site.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{errors.siteId && (
|
||||
<p className="text-red-500 text-xs mt-1">{errors.siteId}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Dates */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-primary-700 mb-1">
|
||||
Fecha de Inicio *
|
||||
</label>
|
||||
<Input
|
||||
type="datetime-local"
|
||||
name="date"
|
||||
value={formData.date}
|
||||
onChange={handleChange}
|
||||
className={errors.date ? "border-red-500" : ""}
|
||||
/>
|
||||
{errors.date && (
|
||||
<p className="text-red-500 text-xs mt-1">{errors.date}</p>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-primary-700 mb-1">
|
||||
Fecha de Fin
|
||||
</label>
|
||||
<Input
|
||||
type="datetime-local"
|
||||
name="endDate"
|
||||
value={formData.endDate}
|
||||
onChange={handleChange}
|
||||
className={errors.endDate ? "border-red-500" : ""}
|
||||
/>
|
||||
{errors.endDate && (
|
||||
<p className="text-red-500 text-xs mt-1">{errors.endDate}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Type and Category */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-primary-700 mb-1">
|
||||
Tipo de Torneo
|
||||
</label>
|
||||
<select
|
||||
name="type"
|
||||
value={formData.type}
|
||||
onChange={handleChange}
|
||||
className="flex h-10 w-full rounded-md border border-primary-200 bg-white px-3 py-2 text-sm ring-offset-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2"
|
||||
>
|
||||
{tournamentTypes.map((type) => (
|
||||
<option key={type.value} value={type.value}>
|
||||
{type.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-primary-700 mb-1">
|
||||
Categoria
|
||||
</label>
|
||||
<select
|
||||
name="category"
|
||||
value={formData.category}
|
||||
onChange={handleChange}
|
||||
className="flex h-10 w-full rounded-md border border-primary-200 bg-white px-3 py-2 text-sm ring-offset-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2"
|
||||
>
|
||||
{categories.map((cat) => (
|
||||
<option key={cat.value} value={cat.value}>
|
||||
{cat.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Max Teams and Price */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-primary-700 mb-1">
|
||||
Maximo de Equipos *
|
||||
</label>
|
||||
<Input
|
||||
type="number"
|
||||
name="maxTeams"
|
||||
value={formData.maxTeams}
|
||||
onChange={handleChange}
|
||||
min={2}
|
||||
max={128}
|
||||
className={errors.maxTeams ? "border-red-500" : ""}
|
||||
/>
|
||||
{errors.maxTeams && (
|
||||
<p className="text-red-500 text-xs mt-1">{errors.maxTeams}</p>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-primary-700 mb-1">
|
||||
Precio de Inscripcion
|
||||
</label>
|
||||
<Input
|
||||
type="number"
|
||||
name="price"
|
||||
value={formData.price}
|
||||
onChange={handleChange}
|
||||
min={0}
|
||||
step={50}
|
||||
className={errors.price ? "border-red-500" : ""}
|
||||
/>
|
||||
{errors.price && (
|
||||
<p className="text-red-500 text-xs mt-1">{errors.price}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
<CardFooter className="flex justify-end gap-3 border-t border-primary-200 bg-primary-50 pt-4">
|
||||
<Button type="button" variant="outline" onClick={onCancel}>
|
||||
Cancelar
|
||||
</Button>
|
||||
<Button type="submit" disabled={isLoading}>
|
||||
{isLoading ? (
|
||||
<span className="flex items-center gap-2">
|
||||
<div className="h-4 w-4 animate-spin rounded-full border-2 border-white/30 border-t-white" />
|
||||
Guardando...
|
||||
</span>
|
||||
) : mode === "create" ? (
|
||||
"Crear Torneo"
|
||||
) : (
|
||||
"Guardar Cambios"
|
||||
)}
|
||||
</Button>
|
||||
</CardFooter>
|
||||
</form>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user