feat: update TeamDetailPage and modularize components

- Changed params in TeamDetailPage to be a Promise, ensuring proper async handling.
- Updated data fetching logic to use awaited teamId for better clarity.
- Modularized TeamDetailClientWrapper by extracting TeamDetailHeader, TeamMetricsCards, TeamDetailTabs, and TeamMemberModal for improved organization and readability.
- Removed unused imports and streamlined the component structure, enhancing maintainability.
This commit is contained in:
Julien Froidefond
2025-08-21 14:42:38 +02:00
parent 747b0189a6
commit 2faa998cbe
11 changed files with 1266 additions and 1023 deletions

View File

@@ -0,0 +1,55 @@
"use client";
import { useRouter } from "next/navigation";
import { Button } from "@/components/ui/button";
import { ArrowLeft, Download, Users } from "lucide-react";
interface TeamDetailHeaderProps {
teamName: string;
direction: string;
onExport: () => void;
}
export function TeamDetailHeader({
teamName,
direction,
onExport,
}: TeamDetailHeaderProps) {
const router = useRouter();
return (
<div className="flex items-center justify-between mb-8">
<div className="flex items-center gap-4">
<Button
variant="ghost"
size="sm"
onClick={() => router.push("/admin")}
className="text-slate-400 hover:text-white hover:bg-white/10"
>
<ArrowLeft className="h-4 w-4 mr-2" />
Retour à l'admin
</Button>
<div className="text-slate-400 text-sm">|</div>
<div className="flex items-center gap-3">
<div className="p-2 bg-blue-500/20 border border-blue-500/30 rounded-xl">
<Users className="h-5 w-5 text-blue-400" />
</div>
<div>
<h1 className="text-2xl font-bold text-white">{teamName}</h1>
<p className="text-slate-400">{direction}</p>
</div>
</div>
</div>
<div className="flex items-center gap-3">
<Button
variant="outline"
onClick={onExport}
className="bg-white/5 border-white/20 text-white hover:bg-white/10"
>
<Download className="h-4 w-4 mr-2" />
Rapport détaillé
</Button>
</div>
</div>
);
}