83 lines
3.5 KiB
TypeScript
83 lines
3.5 KiB
TypeScript
"use client";
|
||
|
||
import { useState } from "react";
|
||
import { useRouter } from "next/navigation";
|
||
import PositionBadge from "@/components/PositionBadge";
|
||
|
||
export default function TeamApprovalRow({ team }: { team: any }) {
|
||
const router = useRouter();
|
||
const [loading, setLoading] = useState(false);
|
||
const [open, setOpen] = useState(false);
|
||
|
||
async function updateStatus(status: "APPROVED" | "REJECTED") {
|
||
setLoading(true);
|
||
await fetch(`/api/admin/teams/${team.id}`, {
|
||
method: "PUT",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify({ status }),
|
||
});
|
||
router.refresh();
|
||
setLoading(false);
|
||
}
|
||
|
||
const starters = team.players.filter((tp: any) => !tp.isBench);
|
||
const bench = team.players.filter((tp: any) => tp.isBench);
|
||
|
||
return (
|
||
<div className="bg-white rounded-2xl shadow border-2 border-yellow-200">
|
||
<div className="p-5 flex items-center justify-between">
|
||
<div>
|
||
<div className="font-bold text-lg">{team.name}</div>
|
||
<div className="text-sm text-gray-500">{team.user.name ?? team.user.email} · ترکیب {team.formation} · {team.players.length} بازیکن</div>
|
||
</div>
|
||
<div className="flex items-center gap-3">
|
||
<button onClick={() => setOpen((v) => !v)} className="text-sm text-blue-600 hover:underline">
|
||
{open ? "بستن" : "مشاهده تیم"}
|
||
</button>
|
||
<button onClick={() => updateStatus("REJECTED")} disabled={loading}
|
||
className="bg-red-100 text-red-600 px-4 py-2 rounded-xl text-sm font-medium hover:bg-red-200 transition disabled:opacity-50">
|
||
رد
|
||
</button>
|
||
<button onClick={() => updateStatus("APPROVED")} disabled={loading}
|
||
className="bg-green-700 text-white px-4 py-2 rounded-xl text-sm font-medium hover:bg-green-800 transition disabled:opacity-50">
|
||
تایید
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{open && (
|
||
<div className="border-t px-5 pb-5">
|
||
<div className="grid grid-cols-2 gap-4 mt-4">
|
||
<div>
|
||
<p className="text-sm font-medium text-gray-600 mb-2">ترکیب اصلی ({starters.length})</p>
|
||
<div className="flex flex-col gap-1">
|
||
{starters.map((tp: any) => (
|
||
<div key={tp.playerId} className="flex items-center justify-between text-sm bg-gray-50 rounded-lg px-3 py-1.5">
|
||
<span className="font-medium">{tp.player.name}</span>
|
||
<div className="flex items-center gap-2">
|
||
<span className="text-xs text-gray-400">{tp.player.country.flagUrl}</span>
|
||
<PositionBadge position={tp.player.position} />
|
||
{tp.isCaptain && <span className="text-yellow-600 text-xs font-bold">©</span>}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<p className="text-sm font-medium text-gray-600 mb-2">ذخیرهها ({bench.length})</p>
|
||
<div className="flex flex-col gap-1">
|
||
{bench.map((tp: any) => (
|
||
<div key={tp.playerId} className="flex items-center justify-between text-sm bg-gray-50 rounded-lg px-3 py-1.5">
|
||
<span className="font-medium">{tp.player.name}</span>
|
||
<PositionBadge position={tp.player.position} />
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|