115 lines
4.1 KiB
TypeScript
115 lines
4.1 KiB
TypeScript
'use client';
|
|
|
|
import { ReadonlyLeagueInfo } from '@/components/leagues/ReadonlyLeagueInfo';
|
|
import LeagueOwnershipTransfer from '@/components/leagues/LeagueOwnershipTransfer';
|
|
import Card from '@/components/ui/Card';
|
|
import { useEffectiveDriverId } from '@/hooks/useEffectiveDriverId';
|
|
import { LeagueRoleUtility } from '@/lib/utilities/LeagueRoleUtility';
|
|
import { useServices } from '@/lib/services/ServiceProvider';
|
|
import { LeagueSettingsViewModel } from '@/lib/view-models/LeagueSettingsViewModel';
|
|
import { AlertTriangle, Settings } from 'lucide-react';
|
|
import { useParams, useRouter } from 'next/navigation';
|
|
|
|
// Shared state components
|
|
import { useDataFetching } from '@/components/shared/hooks/useDataFetching';
|
|
import { StateContainer } from '@/components/shared/state/StateContainer';
|
|
import { LoadingWrapper } from '@/components/shared/state/LoadingWrapper';
|
|
|
|
export default function LeagueSettingsPage() {
|
|
const params = useParams();
|
|
const leagueId = params.id as string;
|
|
const currentDriverId = useEffectiveDriverId();
|
|
const { leagueMembershipService, leagueSettingsService } = useServices();
|
|
const router = useRouter();
|
|
|
|
// Check admin status
|
|
const { data: isAdmin, isLoading: adminLoading } = useDataFetching({
|
|
queryKey: ['leagueMembership', leagueId, currentDriverId],
|
|
queryFn: async () => {
|
|
const membership = leagueMembershipService.getMembership(leagueId, currentDriverId);
|
|
return membership ? LeagueRoleUtility.isLeagueAdminOrHigherRole(membership.role) : false;
|
|
},
|
|
});
|
|
|
|
// Load settings (only if admin)
|
|
const { data: settings, isLoading: settingsLoading, error, retry } = useDataFetching({
|
|
queryKey: ['leagueSettings', leagueId],
|
|
queryFn: () => leagueSettingsService.getLeagueSettings(leagueId),
|
|
enabled: !!isAdmin,
|
|
});
|
|
|
|
const handleTransferOwnership = async (newOwnerId: string) => {
|
|
try {
|
|
await leagueSettingsService.transferOwnership(leagueId, currentDriverId, newOwnerId);
|
|
router.refresh();
|
|
} catch (err) {
|
|
throw err; // Let the component handle the error
|
|
}
|
|
};
|
|
|
|
// Show loading for admin check
|
|
if (adminLoading) {
|
|
return <LoadingWrapper variant="full-screen" message="Checking permissions..." />;
|
|
}
|
|
|
|
// Show access denied if not admin
|
|
if (!isAdmin) {
|
|
return (
|
|
<Card>
|
|
<div className="text-center py-12">
|
|
<div className="w-16 h-16 mx-auto mb-4 rounded-full bg-iron-gray/50 flex items-center justify-center">
|
|
<AlertTriangle className="w-8 h-8 text-warning-amber" />
|
|
</div>
|
|
<h3 className="text-lg font-medium text-white mb-2">Admin Access Required</h3>
|
|
<p className="text-sm text-gray-400">
|
|
Only league admins can access settings.
|
|
</p>
|
|
</div>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<StateContainer
|
|
data={settings}
|
|
isLoading={settingsLoading}
|
|
error={error}
|
|
retry={retry}
|
|
config={{
|
|
loading: { variant: 'spinner', message: 'Loading settings...' },
|
|
error: { variant: 'full-screen' },
|
|
empty: {
|
|
icon: Settings,
|
|
title: 'No settings available',
|
|
description: 'Unable to load league configuration.',
|
|
}
|
|
}}
|
|
>
|
|
{(settingsData) => (
|
|
<div className="space-y-6">
|
|
{/* Header */}
|
|
<div className="flex items-center gap-3">
|
|
<div className="flex h-12 w-12 items-center justify-center rounded-xl bg-primary-blue/10">
|
|
<Settings className="w-6 h-6 text-primary-blue" />
|
|
</div>
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-white">League Settings</h1>
|
|
<p className="text-sm text-gray-400">Manage your league configuration</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* READONLY INFORMATION SECTION - Compact */}
|
|
<div className="space-y-4">
|
|
<ReadonlyLeagueInfo league={settingsData.league} configForm={settingsData.config} />
|
|
|
|
<LeagueOwnershipTransfer
|
|
settings={settingsData}
|
|
currentDriverId={currentDriverId}
|
|
onTransferOwnership={handleTransferOwnership}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</StateContainer>
|
|
);
|
|
} |