wip
This commit is contained in:
251
apps/website/app/teams/[id]/page.tsx
Normal file
251
apps/website/app/teams/[id]/page.tsx
Normal file
@@ -0,0 +1,251 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useParams } from 'next/navigation';
|
||||
import Card from '@/components/ui/Card';
|
||||
import Button from '@/components/ui/Button';
|
||||
import DataWarning from '@/components/alpha/DataWarning';
|
||||
import Breadcrumbs from '@/components/alpha/Breadcrumbs';
|
||||
import TeamRoster from '@/components/alpha/TeamRoster';
|
||||
import TeamStandings from '@/components/alpha/TeamStandings';
|
||||
import TeamAdmin from '@/components/alpha/TeamAdmin';
|
||||
import JoinTeamButton from '@/components/alpha/JoinTeamButton';
|
||||
import {
|
||||
Team,
|
||||
getTeam,
|
||||
getTeamMembers,
|
||||
getCurrentDriverId,
|
||||
isTeamOwnerOrManager,
|
||||
TeamMembership,
|
||||
removeTeamMember,
|
||||
updateTeamMemberRole,
|
||||
TeamRole,
|
||||
} from '@/lib/team-data';
|
||||
|
||||
type Tab = 'overview' | 'roster' | 'standings' | 'admin';
|
||||
|
||||
export default function TeamDetailPage() {
|
||||
const params = useParams();
|
||||
const teamId = params.id as string;
|
||||
|
||||
const [team, setTeam] = useState<Team | null>(null);
|
||||
const [memberships, setMemberships] = useState<TeamMembership[]>([]);
|
||||
const [activeTab, setActiveTab] = useState<Tab>('overview');
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [isAdmin, setIsAdmin] = useState(false);
|
||||
|
||||
const loadTeamData = () => {
|
||||
const teamData = getTeam(teamId);
|
||||
if (!teamData) {
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const teamMemberships = getTeamMembers(teamId);
|
||||
const currentDriverId = getCurrentDriverId();
|
||||
const adminStatus = isTeamOwnerOrManager(teamId, currentDriverId);
|
||||
|
||||
setTeam(teamData);
|
||||
setMemberships(teamMemberships);
|
||||
setIsAdmin(adminStatus);
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
loadTeamData();
|
||||
}, [teamId]);
|
||||
|
||||
const handleUpdate = () => {
|
||||
loadTeamData();
|
||||
};
|
||||
|
||||
const handleRemoveMember = (driverId: string) => {
|
||||
if (!confirm('Are you sure you want to remove this member?')) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const currentDriverId = getCurrentDriverId();
|
||||
removeTeamMember(teamId, driverId, currentDriverId);
|
||||
handleUpdate();
|
||||
} catch (error) {
|
||||
alert(error instanceof Error ? error.message : 'Failed to remove member');
|
||||
}
|
||||
};
|
||||
|
||||
const handleChangeRole = (driverId: string, newRole: TeamRole) => {
|
||||
try {
|
||||
const currentDriverId = getCurrentDriverId();
|
||||
updateTeamMemberRole(teamId, driverId, newRole, currentDriverId);
|
||||
handleUpdate();
|
||||
} catch (error) {
|
||||
alert(error instanceof Error ? error.message : 'Failed to change role');
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="text-center text-gray-400">Loading team...</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!team) {
|
||||
return (
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<Card>
|
||||
<div className="text-center py-12">
|
||||
<h2 className="text-2xl font-bold text-white mb-2">Team Not Found</h2>
|
||||
<p className="text-gray-400 mb-6">
|
||||
The team you're looking for doesn't exist or has been disbanded.
|
||||
</p>
|
||||
<Button variant="primary" onClick={() => window.history.back()}>
|
||||
Go Back
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const tabs: { id: Tab; label: string; visible: boolean }[] = [
|
||||
{ id: 'overview', label: 'Overview', visible: true },
|
||||
{ id: 'roster', label: 'Roster', visible: true },
|
||||
{ id: 'standings', label: 'Standings', visible: true },
|
||||
{ id: 'admin', label: 'Admin', visible: isAdmin },
|
||||
];
|
||||
|
||||
const visibleTabs = tabs.filter(tab => tab.visible);
|
||||
|
||||
return (
|
||||
<div className="max-w-6xl mx-auto">
|
||||
{/* Breadcrumb */}
|
||||
<Breadcrumbs
|
||||
items={[
|
||||
{ label: 'Home', href: '/' },
|
||||
{ label: 'Teams', href: '/teams' },
|
||||
{ label: team.name }
|
||||
]}
|
||||
/>
|
||||
|
||||
<DataWarning className="mb-6" />
|
||||
|
||||
<Card className="mb-6">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex items-start gap-6">
|
||||
<div className="w-24 h-24 bg-charcoal-outline rounded-lg flex items-center justify-center flex-shrink-0">
|
||||
<span className="text-4xl font-bold text-gray-500">
|
||||
{team.tag}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<h1 className="text-3xl font-bold text-white">{team.name}</h1>
|
||||
<span className="px-3 py-1 bg-charcoal-outline text-gray-300 rounded-full text-sm font-medium">
|
||||
{team.tag}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<p className="text-gray-300 mb-4 max-w-2xl">{team.description}</p>
|
||||
|
||||
<div className="flex items-center gap-4 text-sm text-gray-400">
|
||||
<span>{memberships.length} {memberships.length === 1 ? 'member' : 'members'}</span>
|
||||
<span>•</span>
|
||||
<span>Created {new Date(team.createdAt).toLocaleDateString()}</span>
|
||||
{team.leagues.length > 0 && (
|
||||
<>
|
||||
<span>•</span>
|
||||
<span>{team.leagues.length} {team.leagues.length === 1 ? 'league' : 'leagues'}</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<JoinTeamButton teamId={teamId} onUpdate={handleUpdate} />
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<div className="mb-6">
|
||||
<div className="flex items-center gap-2 border-b border-charcoal-outline">
|
||||
{visibleTabs.map((tab) => (
|
||||
<button
|
||||
key={tab.id}
|
||||
onClick={() => setActiveTab(tab.id)}
|
||||
className={`
|
||||
px-4 py-3 font-medium transition-all relative
|
||||
${activeTab === tab.id
|
||||
? 'text-primary-blue'
|
||||
: 'text-gray-400 hover:text-white'
|
||||
}
|
||||
`}
|
||||
>
|
||||
{tab.label}
|
||||
{activeTab === tab.id && (
|
||||
<span className="absolute bottom-0 left-0 right-0 h-0.5 bg-primary-blue" />
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{activeTab === 'overview' && (
|
||||
<div className="space-y-6">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<Card className="lg:col-span-2">
|
||||
<h3 className="text-xl font-semibold text-white mb-4">About</h3>
|
||||
<p className="text-gray-300 leading-relaxed">{team.description}</p>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<h3 className="text-xl font-semibold text-white mb-4">Quick Stats</h3>
|
||||
<div className="space-y-3">
|
||||
<StatItem label="Members" value={memberships.length.toString()} color="text-primary-blue" />
|
||||
<StatItem label="Leagues" value={team.leagues.length.toString()} color="text-green-400" />
|
||||
<StatItem label="Founded" value={new Date(team.createdAt).toLocaleDateString('en-US', { month: 'short', year: 'numeric' })} color="text-gray-300" />
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<h3 className="text-xl font-semibold text-white mb-4">Recent Activity</h3>
|
||||
<div className="text-center py-8 text-gray-400">
|
||||
No recent activity to display
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === 'roster' && (
|
||||
<TeamRoster
|
||||
teamId={teamId}
|
||||
memberships={memberships}
|
||||
isAdmin={isAdmin}
|
||||
onRemoveMember={handleRemoveMember}
|
||||
onChangeRole={handleChangeRole}
|
||||
/>
|
||||
)}
|
||||
|
||||
{activeTab === 'standings' && (
|
||||
<TeamStandings teamId={teamId} leagues={team.leagues} />
|
||||
)}
|
||||
|
||||
{activeTab === 'admin' && isAdmin && (
|
||||
<TeamAdmin team={team} onUpdate={handleUpdate} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function StatItem({ label, value, color }: { label: string; value: string; color: string }) {
|
||||
return (
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-gray-400 text-sm">{label}</span>
|
||||
<span className={`font-semibold ${color}`}>{value}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
185
apps/website/app/teams/page.tsx
Normal file
185
apps/website/app/teams/page.tsx
Normal file
@@ -0,0 +1,185 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import TeamCard from '@/components/alpha/TeamCard';
|
||||
import Button from '@/components/ui/Button';
|
||||
import Input from '@/components/ui/Input';
|
||||
import Card from '@/components/ui/Card';
|
||||
import CreateTeamForm from '@/components/alpha/CreateTeamForm';
|
||||
import DataWarning from '@/components/alpha/DataWarning';
|
||||
import { getAllTeams, getTeamMembers, Team } from '@/lib/team-data';
|
||||
|
||||
export default function TeamsPage() {
|
||||
const router = useRouter();
|
||||
const [teams, setTeams] = useState<Team[]>([]);
|
||||
const [showCreateForm, setShowCreateForm] = useState(false);
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [memberFilter, setMemberFilter] = useState('all');
|
||||
|
||||
useEffect(() => {
|
||||
loadTeams();
|
||||
}, []);
|
||||
|
||||
const loadTeams = () => {
|
||||
const allTeams = getAllTeams();
|
||||
setTeams(allTeams);
|
||||
};
|
||||
|
||||
const handleCreateSuccess = (teamId: string) => {
|
||||
setShowCreateForm(false);
|
||||
loadTeams();
|
||||
router.push(`/teams/${teamId}`);
|
||||
};
|
||||
|
||||
const filteredTeams = teams.filter((team) => {
|
||||
const memberCount = getTeamMembers(team.id).length;
|
||||
|
||||
const matchesSearch = team.name.toLowerCase().includes(searchQuery.toLowerCase());
|
||||
const matchesMemberCount =
|
||||
memberFilter === 'all' ||
|
||||
(memberFilter === 'small' && memberCount < 5) ||
|
||||
(memberFilter === 'medium' && memberCount >= 5 && memberCount < 10) ||
|
||||
(memberFilter === 'large' && memberCount >= 10);
|
||||
|
||||
return matchesSearch && matchesMemberCount;
|
||||
});
|
||||
|
||||
const handleTeamClick = (teamId: string) => {
|
||||
router.push(`/teams/${teamId}`);
|
||||
};
|
||||
|
||||
if (showCreateForm) {
|
||||
return (
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<DataWarning className="mb-6" />
|
||||
|
||||
<div className="mb-6">
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={() => setShowCreateForm(false)}
|
||||
>
|
||||
← Back to Teams
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<h2 className="text-2xl font-bold text-white mb-6">Create New Team</h2>
|
||||
<CreateTeamForm
|
||||
onCancel={() => setShowCreateForm(false)}
|
||||
onSuccess={handleCreateSuccess}
|
||||
/>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<DataWarning className="mb-6" />
|
||||
|
||||
<div className="flex items-center justify-between mb-8">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-white mb-2">Teams</h1>
|
||||
<p className="text-gray-400">
|
||||
Browse and join racing teams
|
||||
</p>
|
||||
</div>
|
||||
<Button variant="primary" onClick={() => setShowCreateForm(true)}>
|
||||
Create Team
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Card className="mb-8">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-400 mb-2">
|
||||
Search Teams
|
||||
</label>
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Search by name..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-400 mb-2">
|
||||
Team Size
|
||||
</label>
|
||||
<select
|
||||
className="w-full px-3 py-3 bg-iron-gray border-0 rounded-md text-white ring-1 ring-inset ring-charcoal-outline focus:ring-2 focus:ring-primary-blue transition-all duration-150 text-sm"
|
||||
value={memberFilter}
|
||||
onChange={(e) => setMemberFilter(e.target.value)}
|
||||
>
|
||||
<option value="all">All Sizes</option>
|
||||
<option value="small">Small (<5)</option>
|
||||
<option value="medium">Medium (5-9)</option>
|
||||
<option value="large">Large (10+)</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<div className="mb-4">
|
||||
<p className="text-sm text-gray-400">
|
||||
{filteredTeams.length} {filteredTeams.length === 1 ? 'team' : 'teams'} found
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{filteredTeams.map((team) => {
|
||||
const memberCount = getTeamMembers(team.id).length;
|
||||
return (
|
||||
<TeamCard
|
||||
key={team.id}
|
||||
id={team.id}
|
||||
name={team.name}
|
||||
memberCount={memberCount}
|
||||
leagues={team.leagues}
|
||||
onClick={() => handleTeamClick(team.id)}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{filteredTeams.length === 0 && (
|
||||
<Card className="text-center py-12">
|
||||
<div className="text-gray-400">
|
||||
<svg
|
||||
className="mx-auto h-12 w-12 text-gray-600 mb-4"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<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 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
|
||||
/>
|
||||
</svg>
|
||||
<h3 className="text-lg font-medium text-white mb-2">
|
||||
{teams.length === 0 ? 'No teams yet' : 'No teams found'}
|
||||
</h3>
|
||||
<p className="text-sm mb-4">
|
||||
{teams.length === 0
|
||||
? 'Create your first team to start racing together.'
|
||||
: 'Try adjusting your search or filters.'}
|
||||
</p>
|
||||
{teams.length === 0 && (
|
||||
<Button
|
||||
variant="primary"
|
||||
onClick={() => setShowCreateForm(true)}
|
||||
>
|
||||
Create Your First Team
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user