Add DELETE endpoint for competitions (draft/cancelled only)

When creating a competition without a template, the modal now provides
sensible default configurations for each competition type:

- league: round_robin stage with standard points (3/1/0)
- tournament: single_elimination stage
- challenge: rating_delta_challenge stage with sum metric (leaderboard)
- hybrid: group stage + knockout stage

This ensures stages are created automatically instead of leaving
competitions with 'No stages configured yet'.

proxies.mjs

@@ -0,0 +1,39 @@
+import { spawn } from 'child_process';
+import { fileURLToPath } from 'url';
+import { dirname, join } from 'path';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+const proxies = [
+  { name: 'API', script: 'proxy-api.mjs' },
+  { name: 'Auth', script: 'proxy-auth.mjs' },
+];
+
+const processes = [];
+
+for (const proxy of proxies) {
+  const proc = spawn('node', [join(__dirname, proxy.script)], {
+    stdio: 'inherit',
+  });
+
+  proc.on('error', (err) => {
+    console.error(`[${proxy.name}] Failed to start:`, err);
+  });
+
+  proc.on('exit', (code) => {
+    console.log(`[${proxy.name}] Exited with code ${code}`);
+  });
+
+  processes.push(proc);
+}
+
+// Handle Ctrl+C
+process.on('SIGINT', () => {
+  console.log('\nShutting down proxies...');
+  for (const proc of processes) {
+    proc.kill();
+  }
+  process.exit(0);
+});
+
+console.log('All proxies started. Press Ctrl+C to stop.');

proxy-api.mjs

@@ -0,0 +1,108 @@
+import 'dotenv/config';
+import http from 'http';
+import https from 'https';
+
+const TARGET = process.env.PROXY_API_TARGET;
+const PORT = process.env.PROXY_API_PORT;
+const LOCAL_ORIGIN = process.env.PROXY_LOCAL_ORIGIN;
+const PROD_ORIGIN = process.env.PROXY_PROD_ORIGIN;
+
+if (!TARGET) throw new Error('PROXY_API_TARGET environment variable is required');
+if (!PORT) throw new Error('PROXY_API_PORT environment variable is required');
+if (!LOCAL_ORIGIN) throw new Error('PROXY_LOCAL_ORIGIN environment variable is required');
+if (!PROD_ORIGIN) throw new Error('PROXY_PROD_ORIGIN environment variable is required');
+
+const parsedPort = parseInt(PORT, 10);
+
+const server = http.createServer((req, res) => {
+  // Handle preflight OPTIONS requests
+  if (req.method === 'OPTIONS') {
+    res.setHeader('Access-Control-Allow-Origin', LOCAL_ORIGIN);
+    res.setHeader('Access-Control-Allow-Credentials', 'true');
+    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS, PATCH');
+    res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization, X-Timezone, X-Locale');
+    res.writeHead(204);
+    res.end();
+    return;
+  }
+
+  // Rewrite origin to match production so backend CORS accepts it
+  const headers = { ...req.headers, host: TARGET };
+  if (headers.origin === LOCAL_ORIGIN) {
+    headers.origin = PROD_ORIGIN;
+  }
+
+  const options = {
+    hostname: TARGET,
+    port: 443,
+    path: req.url,
+    method: req.method,
+    headers,
+  };
+
+  const proxyReq = https.request(options, (proxyRes) => {
+    // Merge CORS headers with response headers
+    const headers = { ...proxyRes.headers };
+    headers['access-control-allow-origin'] = LOCAL_ORIGIN;
+    headers['access-control-allow-credentials'] = 'true';
+
+    res.writeHead(proxyRes.statusCode, headers);
+    proxyRes.pipe(res);
+  });
+
+  proxyReq.on('error', (err) => {
+    console.error('Proxy error:', err);
+    res.writeHead(500);
+    res.end('Proxy error');
+  });
+
+  req.pipe(proxyReq);
+});
+
+// Handle WebSocket upgrades for Socket.IO
+server.on('upgrade', (req, socket, head) => {
+  // Rewrite origin to match production so backend CORS accepts it
+  const headers = { ...req.headers, host: TARGET };
+  if (headers.origin === LOCAL_ORIGIN) {
+    headers.origin = PROD_ORIGIN;
+  }
+
+  const options = {
+    hostname: TARGET,
+    port: 443,
+    path: req.url,
+    method: 'GET',
+    headers,
+  };
+
+  const proxyReq = https.request(options);
+
+  proxyReq.on('upgrade', (proxyRes, proxySocket, proxyHead) => {
+    let response = 'HTTP/1.1 101 Switching Protocols\r\n' +
+      'Upgrade: websocket\r\n' +
+      'Connection: Upgrade\r\n' +
+      `Sec-WebSocket-Accept: ${proxyRes.headers['sec-websocket-accept']}\r\n`;
+
+    // Forward compression extension if backend negotiated it
+    if (proxyRes.headers['sec-websocket-extensions']) {
+      response += `Sec-WebSocket-Extensions: ${proxyRes.headers['sec-websocket-extensions']}\r\n`;
+    }
+
+    response += '\r\n';
+    socket.write(response);
+
+    proxySocket.pipe(socket);
+    socket.pipe(proxySocket);
+  });
+
+  proxyReq.on('error', (err) => {
+    console.error('WebSocket proxy error:', err);
+    socket.end();
+  });
+
+  proxyReq.end();
+});
+
+server.listen(parsedPort, () => {
+  console.log(`API Proxy running: localhost:${parsedPort} -> ${TARGET} (HTTP + WebSocket)`);
+});

proxy-auth.mjs

@@ -0,0 +1,59 @@
+import 'dotenv/config';
+import http from 'http';
+import https from 'https';
+
+const TARGET = process.env.PROXY_AUTH_TARGET;
+const PORT = process.env.PROXY_AUTH_PORT;
+const LOCAL_ORIGIN = process.env.PROXY_LOCAL_ORIGIN;
+
+if (!TARGET) throw new Error('PROXY_AUTH_TARGET environment variable is required');
+if (!PORT) throw new Error('PROXY_AUTH_PORT environment variable is required');
+if (!LOCAL_ORIGIN) throw new Error('PROXY_LOCAL_ORIGIN environment variable is required');
+
+const parsedPort = parseInt(PORT, 10);
+
+const server = http.createServer((req, res) => {
+  // Handle preflight OPTIONS requests
+  if (req.method === 'OPTIONS') {
+    res.setHeader('Access-Control-Allow-Origin', LOCAL_ORIGIN);
+    res.setHeader('Access-Control-Allow-Credentials', 'true');
+    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS, PATCH');
+    res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization, X-Timezone, X-Locale');
+    res.writeHead(204);
+    res.end();
+    return;
+  }
+
+  const options = {
+    hostname: TARGET,
+    port: 443,
+    path: req.url,
+    method: req.method,
+    headers: {
+      ...req.headers,
+      host: TARGET,
+    },
+  };
+
+  const proxyReq = https.request(options, (proxyRes) => {
+    // Copy response headers but add CORS
+    const headers = { ...proxyRes.headers };
+    headers['access-control-allow-origin'] = LOCAL_ORIGIN;
+    headers['access-control-allow-credentials'] = 'true';
+
+    res.writeHead(proxyRes.statusCode, headers);
+    proxyRes.pipe(res);
+  });
+
+  proxyReq.on('error', (err) => {
+    console.error('Proxy error:', err);
+    res.writeHead(500);
+    res.end('Proxy error');
+  });
+
+  req.pipe(proxyReq);
+});
+
+server.listen(parsedPort, () => {
+  console.log(`Auth Proxy running: localhost:${parsedPort} -> ${TARGET}`);
+});

src/app/[locale]/admin/clubs/[club_id]/ClubDetailTabs.tsx

@@ -1,11 +0,0 @@
-'use client';
-
-import ClubProfileTab from './tabs/ClubProfileTab';
-
-interface ClubDetailTabsProps {
-  clubId: number;
-}
-
-export default function ClubDetailTabs({ clubId }: ClubDetailTabsProps) {
-  return <ClubProfileTab clubId={clubId} />;
-}

src/app/[locale]/admin/clubs/[club_id]/competitions/[competition_id]/page.tsx

@@ -1,13 +0,0 @@
-import CompetitionDetailComponent from './CompetitionDetailComponent';
-
-export default async function CompetitionDetailPage({
-  params,
-}: {
-  params: Promise<{ club_id: string; competition_id: string }>;
-}) {
-  const { club_id, competition_id } = await params;
-  const clubId = parseInt(club_id, 10);
-  const competitionId = parseInt(competition_id, 10);
-
-  return <CompetitionDetailComponent clubId={clubId} competitionId={competitionId} />;
-}

src/app/[locale]/admin/clubs/[club_id]/competitions/page.tsx

@@ -1,12 +0,0 @@
-import CompetitionsPageComponent from './CompetitionsPageComponent';
-
-export default async function CompetitionsPage({
-  params,
-}: {
-  params: Promise<{ club_id: string }>;
-}) {
-  const { club_id } = await params;
-  const clubId = parseInt(club_id, 10);
-
-  return <CompetitionsPageComponent clubId={clubId} />;
-}

src/app/[locale]/admin/clubs/[club_id]/competitions/series/page.tsx

@@ -1,12 +0,0 @@
-import SeriesListComponent from './SeriesListComponent';
-
-export default async function SeriesPage({
-  params,
-}: {
-  params: Promise<{ club_id: string }>;
-}) {
-  const { club_id } = await params;
-  const clubId = parseInt(club_id, 10);
-
-  return <SeriesListComponent clubId={clubId} />;
-}

src/app/[locale]/admin/clubs/[club_id]/competitions/templates/page.tsx

@@ -1,12 +0,0 @@
-import TemplatesPageComponent from './TemplatesPageComponent';
-
-export default async function TemplatesPage({
-  params,
-}: {
-  params: Promise<{ club_id: string }>;
-}) {
-  const { club_id } = await params;
-  const clubId = parseInt(club_id, 10);
-
-  return <TemplatesPageComponent clubId={clubId} />;
-}

src/app/[locale]/admin/clubs/[club_id]/courts/page.tsx

@@ -1,12 +0,0 @@
-import CourtsComponent from './CourtsComponent';
-
-export default async function CourtsPage({
-  params
-}: {
-  params: Promise<{ club_id: string }>
-}) {
-  const { club_id } = await params;
-  const clubId = parseInt(club_id, 10);
-
-  return <CourtsComponent clubId={clubId} />;
-}

src/app/[locale]/admin/clubs/[club_id]/credits/page.tsx

@@ -1,12 +0,0 @@
-import CreditsManagementComponent from './CreditsManagementComponent';
-
-export default async function CreditsManagementPage({
-  params
-}: {
-  params: Promise<{ club_id: string }>;
-}) {
-  const { club_id } = await params;
-  const clubId = parseInt(club_id, 10);
-
-  return <CreditsManagementComponent clubId={clubId} />;
-}

src/app/[locale]/admin/clubs/[club_id]/layout.tsx

@@ -1,21 +0,0 @@
-import AdminAuthGuard from '@/src/components/AdminAuthGuard';
-import ClubDetailHeader from '@/src/components/ClubDetailHeader';
-
-export default async function ClubDetailLayout({
-  children,
-  params,
-}: {
-  children: React.ReactNode;
-  params: Promise<{ club_id: string }>;
-}) {
-  const { club_id } = await params;
-  const clubId = parseInt(club_id, 10);
-
-  return (
-    <AdminAuthGuard>
-      <ClubDetailHeader clubId={clubId}>
-        {children}
-      </ClubDetailHeader>
-    </AdminAuthGuard>
-  );
-}

src/app/[locale]/admin/clubs/[club_id]/members/page.tsx

@@ -1,12 +0,0 @@
-import MembersManagementComponent from './MembersManagementComponent';
-
-export default async function MembersManagementPage({
-  params
-}: {
-  params: Promise<{ club_id: string }>;
-}) {
-  const { club_id } = await params;
-  const clubId = parseInt(club_id, 10);
-
-  return <MembersManagementComponent clubId={clubId} />;
-}

src/app/[locale]/admin/clubs/[club_id]/page.tsx

@@ -1,12 +0,0 @@
-import ClubDetailTabs from './ClubDetailTabs';
-
-export default async function AdminClubDetailPage({
-  params
-}: {
-  params: Promise<{ club_id: string }>
-}) {
-  const { club_id } = await params;
-  const clubId = parseInt(club_id, 10);
-
-  return <ClubDetailTabs clubId={clubId} />;
-}

src/app/[locale]/admin/clubs/[club_id]/plans/page.tsx

@@ -1,12 +0,0 @@
-import MembershipPlansComponent from './MembershipPlansComponent';
-
-export default async function MembershipPlansPage({
-  params
-}: {
-  params: Promise<{ club_id: string }>;
-}) {
-  const { club_id } = await params;
-  const clubId = parseInt(club_id, 10);
-
-  return <MembershipPlansComponent clubId={clubId} />;
-}

src/app/[locale]/admin/clubs/[club_id]/settings/page.tsx

@@ -1,12 +0,0 @@
-import FacilitySettingsComponent from './FacilitySettingsComponent';
-
-export default async function FacilitySettingsPage({
-  params
-}: {
-  params: Promise<{ club_id: string }>;
-}) {
-  const { club_id } = await params;
-  const clubId = parseInt(club_id, 10);
-
-  return <FacilitySettingsComponent clubId={clubId} />;
-}

src/app/[locale]/admin/clubs/[club_id]/slot-definitions/page.tsx

@@ -1,12 +0,0 @@
-import SlotDefinitionsComponent from './SlotDefinitionsComponent';
-
-export default async function SlotDefinitionsPage({
-  params
-}: {
-  params: Promise<{ club_id: string }>;
-}) {
-  const { club_id } = await params;
-  const clubId = parseInt(club_id, 10);
-
-  return <SlotDefinitionsComponent clubId={clubId} />;
-}

src/app/[locale]/admin/clubs/[club_id]/slot-instances/page.tsx

@@ -1,12 +0,0 @@
-import SlotInstancesComponent from './SlotInstancesComponent';
-
-export default async function SlotInstancesPage({
-  params
-}: {
-  params: Promise<{ club_id: string }>;
-}) {
-  const { club_id } = await params;
-  const clubId = parseInt(club_id, 10);
-
-  return <SlotInstancesComponent clubId={clubId} />;
-}

src/app/[locale]/admin/clubs/[club_id]/transfers/page.tsx

@@ -1,12 +0,0 @@
-import TransfersManagementComponent from './TransfersManagementComponent';
-
-export default async function TransfersManagementPage({
-  params
-}: {
-  params: Promise<{ club_id: string }>;
-}) {
-  const { club_id } = await params;
-  const clubId = parseInt(club_id, 10);
-
-  return <TransfersManagementComponent clubId={clubId} />;
-}

src/app/[locale]/admin/facilities/AdminFacilitiesList.tsx

@@ -7,7 +7,7 @@ import { getAdminClubs } from '@/src/lib/api/admin-clubs';
 import type { AdminClubsResponse, AdminApiError } from '@/src/types/admin-api';
 import useTranslation from '@/src/hooks/useTranslation';
 
-export default function AdminClubsList() {
+export default function AdminFacilitiesList() {
   const { t, locale } = useTranslation();
   const [clubs, setClubs] = useState<AdminClubsResponse | null>(null);
   const [error, setError] = useState<AdminApiError | null>(null);
@@ -140,7 +140,7 @@ export default function AdminClubsList() {
         {clubs.map((club) => (
           <Link
             key={club.facility_id}
-            href={`/${locale}/admin/clubs/${club.facility_id}`}
+            href={`/${locale}/admin/facilities/${club.facility_id}`}
             className="group bg-white border-2 border-slate-200 rounded-2xl p-6 hover:border-slate-300 hover:shadow-xl transition-all duration-200"
           >
             <div className="flex items-start justify-between mb-5">

src/app/[locale]/admin/facilities/[facility_id]/AdminFacilityDetail.tsx

@@ -8,10 +8,10 @@ import type { AdminClubDetail, AdminApiError } from '@/src/types/admin-api';
 import useTranslation from '@/src/hooks/useTranslation';
 
 interface AdminClubDetailProps {
-  clubId: number;
+  facilityId: number;
 }
 
-export default function AdminClubDetailComponent({ clubId }: AdminClubDetailProps) {
+export default function AdminClubDetailComponent({ facilityId }: AdminClubDetailProps) {
   const { t, locale } = useTranslation();
   const [clubDetail, setClubDetail] = useState<AdminClubDetail | null>(null);
   const [error, setError] = useState<AdminApiError | null>(null);
@@ -20,7 +20,7 @@ export default function AdminClubDetailComponent({ clubId }: AdminClubDetailProp
   useEffect(() => {
     async function loadClubDetail() {
       setLoading(true);
-      const result = await getAdminClubDetail(clubId);
+      const result = await getAdminClubDetail(facilityId);
 
       if (result.success) {
         setClubDetail(result.data);
@@ -34,7 +34,7 @@ export default function AdminClubDetailComponent({ clubId }: AdminClubDetailProp
     }
 
     loadClubDetail();
-  }, [clubId]);
+  }, [facilityId]);
 
   // Loading state
   if (loading) {
@@ -87,7 +87,7 @@ export default function AdminClubDetailComponent({ clubId }: AdminClubDetailProp
                   {error.detail}
                 </p>
                 <Link
-                  href={`/${locale}/admin/clubs`}
+                  href={`/${locale}/admin/facilities`}
                   className="inline-flex items-center px-4 py-2 bg-slate-900 text-white font-semibold rounded-lg hover:bg-slate-800 transition-colors"
                 >
                   <ArrowLeft className="w-4 h-4 mr-2" />
@@ -120,7 +120,7 @@ export default function AdminClubDetailComponent({ clubId }: AdminClubDetailProp
                   {t('Error code')}: {error.code}
                 </p>
                 <Link
-                  href={`/${locale}/admin/clubs`}
+                  href={`/${locale}/admin/facilities`}
                   className="inline-flex items-center px-4 py-2 bg-slate-900 text-white font-semibold rounded-lg hover:bg-slate-800 transition-colors"
                 >
                   <ArrowLeft className="w-4 h-4 mr-2" />
@@ -144,7 +144,7 @@ export default function AdminClubDetailComponent({ clubId }: AdminClubDetailProp
       {/* Breadcrumb */}
       <div className="mb-8">
         <Link
-          href={`/${locale}/admin/clubs`}
+          href={`/${locale}/admin/facilities`}
           className="inline-flex items-center text-slate-600 hover:text-slate-900 font-medium transition-colors"
         >
           <ArrowLeft className="w-4 h-4 mr-2" />

src/app/[locale]/admin/facilities/[facility_id]/FacilityDetailTabs.tsx

@@ -0,0 +1,11 @@
+'use client';
+
+import FacilityProfileTab from './tabs/FacilityProfileTab';
+
+interface FacilityDetailTabsProps {
+  facilityId: number;
+}
+
+export default function FacilityDetailTabs({ facilityId }: FacilityDetailTabsProps) {
+  return <FacilityProfileTab facilityId={facilityId} />;
+}

src/app/[locale]/admin/facilities/[facility_id]/competitions/CompetitionsPageComponent.tsx

@@ -8,7 +8,7 @@ import CreateCompetitionModal from './CreateCompetitionModal';
 import type { CompetitionStatus, CompetitionType } from '@/src/types/competition';
 
 interface CompetitionsPageComponentProps {
-  clubId: number;
+  facilityId: number;
 }
 
 const statusOptions: { value: CompetitionStatus | 'all'; label: string }[] = [
@@ -28,12 +28,12 @@ const typeOptions: { value: CompetitionType | 'all'; label: string }[] = [
   { value: 'hybrid', label: 'Hybrid' },
 ];
 
-export default function CompetitionsPageComponent({ clubId }: CompetitionsPageComponentProps) {
+export default function CompetitionsPageComponent({ facilityId }: CompetitionsPageComponentProps) {
   const [statusFilter, setStatusFilter] = useState<CompetitionStatus | 'all'>('all');
   const [typeFilter, setTypeFilter] = useState<CompetitionType | 'all'>('all');
   const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
 
-  const { data: competitions, isLoading, error } = useCompetitions(clubId, {
+  const { data: competitions, isLoading, error } = useCompetitions(facilityId, {
     status: statusFilter === 'all' ? undefined : statusFilter,
     type: typeFilter === 'all' ? undefined : typeFilter,
   });
@@ -110,7 +110,7 @@ export default function CompetitionsPageComponent({ clubId }: CompetitionsPageCo
       {/* Competition List */}
       <CompetitionList
         competitions={competitions ?? []}
-        facilityId={clubId}
+        facilityId={facilityId}
         isLoading={isLoading}
         emptyMessage="No competitions yet. Create your first competition to get started."
       />
@@ -119,7 +119,7 @@ export default function CompetitionsPageComponent({ clubId }: CompetitionsPageCo
       <CreateCompetitionModal
         isOpen={isCreateModalOpen}
         onClose={() => setIsCreateModalOpen(false)}
-        facilityId={clubId}
+        facilityId={facilityId}
       />
     </div>
   );

src/app/[locale]/admin/facilities/[facility_id]/competitions/CreateCompetitionModal.tsx

@@ -59,6 +59,62 @@ const visibilityOptions: { value: CompetitionVisibility; label: string; descript
   { value: 'private', label: 'Private', description: 'Invite only' },
 ];
 
+// Default configs for each competition type when creating from scratch
+const defaultConfigs: Record<CompetitionType, Record<string, unknown>> = {
+  league: {
+    format: {
+      stages: [
+        {
+          type: 'round_robin',
+          name: 'League Stage',
+          rounds: 1,
+          points_win: 3,
+          points_draw: 1,
+          points_loss: 0,
+        },
+      ],
+    },
+  },
+  tournament: {
+    format: {
+      stages: [
+        {
+          type: 'single_elimination',
+          name: 'Main Draw',
+          third_place_match: false,
+        },
+      ],
+    },
+  },
+  challenge: {
+    format: {
+      stages: [
+        {
+          type: 'rating_delta_challenge',
+          name: 'Leaderboard',
+          metric: 'rating_delta_sum', // Total rating gained
+          // Alternative metrics: 'rating_delta_avg', 'rating_delta_max', 'matches_played'
+        },
+      ],
+    },
+  },
+  hybrid: {
+    format: {
+      stages: [
+        {
+          type: 'round_robin',
+          name: 'Group Stage',
+          rounds: 1,
+        },
+        {
+          type: 'single_elimination',
+          name: 'Knockout Stage',
+        },
+      ],
+    },
+  },
+};
+
 export default function CreateCompetitionModal({
   isOpen,
   onClose,
@@ -144,6 +200,9 @@ export default function CreateCompetitionModal({
       return;
     }
 
+    // Use template config if selected, otherwise use default config for the type
+    const config = selectedTemplate?.config ?? defaultConfigs[formData.type];
+
     const request: CreateCompetitionRequest = {
       type: formData.type,
       sport_id: formData.sport_id,
@@ -159,7 +218,7 @@ export default function CreateCompetitionModal({
         ? new Date(formData.registration_close_at).toISOString()
         : undefined,
       template_id: selectedTemplate?.template_id,
-      config: selectedTemplate?.config,
+      config,
     };
 
     try {

src/app/[locale]/admin/facilities/[facility_id]/competitions/[competition_id]/CompetitionDetailComponent.tsx

@@ -18,6 +18,7 @@ import {
   ListOrdered,
   FileText,
   CalendarClock,
+  Trash2,
 } from 'lucide-react';
 import useTranslation from '@/src/hooks/useTranslation';
 import Card from '@/src/components/cards/Card';
@@ -28,7 +29,9 @@ import {
   useStartCompetition,
   useFinishCompetition,
   useCancelCompetition,
+  useDeleteCompetition,
 } from '@/src/hooks/mutations/useCompetitionMutations';
+import { useRouter } from 'next/navigation';
 import OverviewTab from './tabs/OverviewTab';
 import RegistrationsTab from './tabs/RegistrationsTab';
 import ParticipantsTab from './tabs/ParticipantsTab';
@@ -40,7 +43,7 @@ import SaveAsTemplateModal from './SaveAsTemplateModal';
 import type { CompetitionStatus } from '@/src/types/competition';
 
 interface CompetitionDetailComponentProps {
-  clubId: number;
+  facilityId: number;
   competitionId: number;
 }
 
@@ -71,20 +74,76 @@ function formatDate(dateString: string): string {
 function StatusTransitionButton({
   status,
   competitionId,
+  facilityId,
+  locale,
 }: {
   status: CompetitionStatus;
   competitionId: number;
+  facilityId: number;
+  locale: string;
 }) {
+  const router = useRouter();
   const publishMutation = usePublishCompetition(competitionId);
   const startMutation = useStartCompetition(competitionId);
   const finishMutation = useFinishCompetition(competitionId);
   const cancelMutation = useCancelCompetition(competitionId);
+  const deleteMutation = useDeleteCompetition(competitionId);
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
 
   const isPending =
     publishMutation.isPending ||
     startMutation.isPending ||
     finishMutation.isPending ||
-    cancelMutation.isPending;
+    cancelMutation.isPending ||
+    deleteMutation.isPending;
+
+  const canDelete = status === 'draft' || status === 'cancelled';
+
+  const handleDelete = () => {
+    deleteMutation.mutate(undefined, {
+      onSuccess: () => {
+        router.push(`/${locale}/admin/facilities/${facilityId}/competitions`);
+      },
+    });
+  };
+
+  const DeleteButton = () => (
+    <>
+      {showDeleteConfirm ? (
+        <div className="flex items-center gap-2">
+          <span className="text-sm text-red-700">Delete permanently?</span>
+          <button
+            onClick={handleDelete}
+            disabled={isPending}
+            className="inline-flex items-center px-3 py-1.5 bg-red-600 text-white text-sm font-semibold rounded-lg hover:bg-red-700 transition-colors disabled:opacity-50"
+          >
+            {deleteMutation.isPending ? (
+              <Loader2 className="w-4 h-4 animate-spin" />
+            ) : (
+              'Yes, delete'
+            )}
+          </button>
+          <button
+            onClick={() => setShowDeleteConfirm(false)}
+            disabled={isPending}
+            className="inline-flex items-center px-3 py-1.5 bg-slate-100 text-slate-700 text-sm font-semibold rounded-lg hover:bg-slate-200 transition-colors disabled:opacity-50"
+          >
+            No
+          </button>
+        </div>
+      ) : (
+        <button
+          onClick={() => setShowDeleteConfirm(true)}
+          disabled={isPending}
+          className="inline-flex items-center px-4 py-2 bg-red-100 text-red-700 font-semibold rounded-xl hover:bg-red-200 transition-colors disabled:opacity-50"
+          title="Delete competition permanently"
+        >
+          <Trash2 className="w-4 h-4 mr-2" />
+          Delete
+        </button>
+      )}
+    </>
+  );
 
   if (status === 'draft') {
     return (
@@ -101,6 +160,7 @@ function StatusTransitionButton({
           )}
           Publish
         </button>
+        <DeleteButton />
       </div>
     );
   }
@@ -155,11 +215,20 @@ function StatusTransitionButton({
     );
   }
 
+  // For cancelled status, show delete button
+  if (canDelete) {
+    return (
+      <div className="flex gap-2">
+        <DeleteButton />
+      </div>
+    );
+  }
+
   return null;
 }
 
 export default function CompetitionDetailComponent({
-  clubId,
+  facilityId,
   competitionId,
 }: CompetitionDetailComponentProps) {
   const { locale } = useTranslation();
@@ -181,7 +250,7 @@ export default function CompetitionDetailComponent({
     return (
       <div className="py-8">
         <Link
-          href={`/${locale}/admin/clubs/${clubId}/competitions`}
+          href={`/${locale}/admin/facilities/${facilityId}/competitions`}
           className="inline-flex items-center text-slate-600 hover:text-slate-900 font-medium transition-colors mb-6"
         >
           <ArrowLeft className="w-4 h-4 mr-2" />
@@ -206,7 +275,7 @@ export default function CompetitionDetailComponent({
     <div>
       {/* Back Link */}
       <Link
-        href={`/${locale}/admin/clubs/${clubId}/competitions`}
+        href={`/${locale}/admin/facilities/${facilityId}/competitions`}
         className="inline-flex items-center text-slate-600 hover:text-slate-900 font-medium transition-colors mb-6"
       >
         <ArrowLeft className="w-4 h-4 mr-2" />
@@ -234,7 +303,7 @@ export default function CompetitionDetailComponent({
               <FileText className="w-4 h-4 mr-2" />
               Save as Template
             </button>
-            <StatusTransitionButton status={competition.status} competitionId={competitionId} />
+            <StatusTransitionButton status={competition.status} competitionId={competitionId} facilityId={facilityId} locale={locale} />
           </div>
         </div>
 
@@ -321,7 +390,7 @@ export default function CompetitionDetailComponent({
 
       {/* Tab Content */}
       {activeTab === 'overview' && (
-        <OverviewTab competition={competition} clubId={clubId} />
+        <OverviewTab competition={competition} facilityId={facilityId} />
       )}
       {activeTab === 'registrations' && (
         <RegistrationsTab competitionId={competitionId} />
@@ -336,10 +405,10 @@ export default function CompetitionDetailComponent({
         <FixturesTab competition={competition} />
       )}
       {activeTab === 'scheduling' && (
-        <SchedulingTab competition={competition} clubId={clubId} />
+        <SchedulingTab competition={competition} facilityId={facilityId} />
       )}
       {activeTab === 'results' && (
-        <ResultsTab competition={competition} clubId={clubId} />
+        <ResultsTab competition={competition} facilityId={facilityId} />
       )}
       {activeTab === 'standings' && (
         <StandingsTab competition={competition} />

src/app/[locale]/admin/facilities/[facility_id]/competitions/[competition_id]/page.tsx

@@ -0,0 +1,13 @@
+import CompetitionDetailComponent from './CompetitionDetailComponent';
+
+export default async function CompetitionDetailPage({
+  params,
+}: {
+  params: Promise<{ facility_id: string; competition_id: string }>;
+}) {
+  const { facility_id, competition_id } = await params;
+  const facilityId = parseInt(facility_id, 10);
+  const competitionId = parseInt(competition_id, 10);
+
+  return <CompetitionDetailComponent facilityId={facilityId} competitionId={competitionId} />;
+}

src/app/[locale]/admin/facilities/[facility_id]/competitions/[competition_id]/tabs/OverviewTab.tsx

@@ -7,7 +7,7 @@ import type { Competition, CompetitionStage } from '@/src/types/competition';
 
 interface OverviewTabProps {
   competition: Competition;
-  clubId: number;
+  facilityId: number;
 }
 
 function formatDate(dateString: string | null): string {
@@ -60,7 +60,7 @@ function StageCard({ stage, index }: { stage: CompetitionStage; index: number })
   );
 }
 
-export default function OverviewTab({ competition, clubId }: OverviewTabProps) {
+export default function OverviewTab({ competition, facilityId }: OverviewTabProps) {
   const visibilityIcons = {
     public: Globe,
     unlisted: LinkIcon,

src/app/[locale]/admin/facilities/[facility_id]/competitions/[competition_id]/tabs/ResultsTab.tsx

@@ -30,7 +30,7 @@ import type {
 
 interface ResultsTabProps {
   competition: Competition;
-  clubId: number;
+  facilityId: number;
 }
 
 const disputeStatusConfig: Record<DisputeStatus, { label: string; bgColor: string; textColor: string }> = {
@@ -280,7 +280,7 @@ function MatchResultsSkeleton() {
   );
 }
 
-export default function ResultsTab({ competition, clubId }: ResultsTabProps) {
+export default function ResultsTab({ competition, facilityId }: ResultsTabProps) {
   const [disputeFilter, setDisputeFilter] = useState<DisputeStatus | 'all'>('all');
   const [activeStageId, setActiveStageId] = useState<number | null>(
     competition.stages?.[0]?.stage_id ?? null

src/app/[locale]/admin/facilities/[facility_id]/competitions/[competition_id]/tabs/SchedulingTab.tsx

@@ -24,7 +24,7 @@ import type {
 
 interface SchedulingTabProps {
   competition: Competition;
-  clubId: number;
+  facilityId: number;
 }
 
 const schedulingStatusConfig: Record<
@@ -145,11 +145,11 @@ function MatchSchedulingSkeleton() {
 function StageScheduling({
   stage,
   competitionId,
-  clubId,
+  facilityId,
 }: {
   stage: CompetitionStage;
   competitionId: number;
-  clubId: number;
+  facilityId: number;
 }) {
   const [selectedMatch, setSelectedMatch] = useState<CompetitionMatch | null>(null);
   const { data: fixtures, isLoading, error } = useCompetitionFixtures(competitionId, stage.stage_id);
@@ -290,7 +290,7 @@ function StageScheduling({
             away: selectedMatch.away_participant?.display_name ?? 'TBD',
             round: selectedMatch.round_index + 1,
           }}
-          clubId={clubId}
+          facilityId={facilityId}
           isLoading={linkMutation.isPending}
           error={linkMutation.error instanceof Error ? linkMutation.error.message : null}
         />
@@ -301,7 +301,7 @@ function StageScheduling({
 
 export default function SchedulingTab({
   competition,
-  clubId,
+  facilityId,
 }: SchedulingTabProps) {
   const [selectedStageId, setSelectedStageId] = useState<number | null>(
     competition.stages?.[0]?.stage_id ?? null
@@ -352,7 +352,7 @@ export default function SchedulingTab({
         <StageScheduling
           stage={selectedStage}
           competitionId={competition.competition_id}
-          clubId={clubId}
+          facilityId={facilityId}
         />
       )}
     </div>

src/app/[locale]/admin/facilities/[facility_id]/competitions/[competition_id]/tabs/SlotPickerModal.tsx

@@ -15,7 +15,7 @@ interface SlotPickerModalProps {
     away: string;
     round: number;
   };
-  clubId: number;
+  facilityId: number;
   isLoading?: boolean;
   error?: string | null;
 }
@@ -50,7 +50,7 @@ export default function SlotPickerModal({
   onClose,
   onSelect,
   matchInfo,
-  clubId,
+  facilityId,
   isLoading: isSaving,
   error: saveError,
 }: SlotPickerModalProps) {
@@ -60,15 +60,15 @@ export default function SlotPickerModal({
   const dateString = formatDate(selectedDate);
 
   const { data: slotsData, isLoading, error } = useQuery({
-    queryKey: ['slotInstances', clubId, dateString],
+    queryKey: ['slotInstances', facilityId, dateString],
     queryFn: async () => {
-      const result = await getSlotInstances(clubId, dateString, { status: 'open' });
+      const result = await getSlotInstances(facilityId, dateString, { status: 'open' });
       if (!result.success) {
         throw new Error(result.error.detail);
       }
       return result.data;
     },
-    enabled: isOpen && clubId > 0,
+    enabled: isOpen && facilityId > 0,
   });
 
   // Filter to only show future slots that are open

src/app/[locale]/admin/facilities/[facility_id]/competitions/page.tsx

@@ -0,0 +1,12 @@
+import CompetitionsPageComponent from './CompetitionsPageComponent';
+
+export default async function CompetitionsPage({
+  params,
+}: {
+  params: Promise<{ facility_id: string }>;
+}) {
+  const { facility_id } = await params;
+  const facilityId = parseInt(facility_id, 10);
+
+  return <CompetitionsPageComponent facilityId={facilityId} />;
+}

src/app/[locale]/admin/facilities/[facility_id]/competitions/series/CreateSeriesModal.tsx

@@ -8,7 +8,7 @@ import type { CompetitionTemplate, CreateSeriesRequest, CarryOverPolicy } from '
 interface CreateSeriesModalProps {
   isOpen: boolean;
   onClose: () => void;
-  clubId: number;
+  facilityId: number;
   templates: CompetitionTemplate[];
 }
 
@@ -33,10 +33,10 @@ const dayOptions = [
 export default function CreateSeriesModal({
   isOpen,
   onClose,
-  clubId,
+  facilityId,
   templates,
 }: CreateSeriesModalProps) {
-  const createMutation = useCreateSeries(clubId);
+  const createMutation = useCreateSeries(facilityId);
 
   // Form state
   const [templateId, setTemplateId] = useState<number | null>(null);

src/app/[locale]/admin/facilities/[facility_id]/competitions/series/SeriesListComponent.tsx

@@ -23,7 +23,7 @@ import CreateSeriesModal from './CreateSeriesModal';
 import type { CompetitionSeries, SeriesStatus } from '@/src/types/competition';
 
 interface SeriesListComponentProps {
-  clubId: number;
+  facilityId: number;
 }
 
 const statusConfig: Record<SeriesStatus, {
@@ -38,10 +38,10 @@ const statusConfig: Record<SeriesStatus, {
 
 function SeriesCard({
   series,
-  clubId,
+  facilityId,
 }: {
   series: CompetitionSeries;
-  clubId: number;
+  facilityId: number;
 }) {
   const { locale } = useTranslation();
   const updateMutation = useUpdateSeries(series.series_id);
@@ -162,17 +162,17 @@ function SeriesCardSkeleton() {
   );
 }
 
-export default function SeriesListComponent({ clubId }: SeriesListComponentProps) {
+export default function SeriesListComponent({ facilityId }: SeriesListComponentProps) {
   const { locale } = useTranslation();
   const [showCreateModal, setShowCreateModal] = useState(false);
   const [statusFilter, setStatusFilter] = useState<SeriesStatus | 'all'>('all');
 
   const { data: series, isLoading, error } = useCompetitionSeries(
-    clubId,
+    facilityId,
     statusFilter === 'all' ? undefined : { status: statusFilter }
   );
 
-  const { data: templates } = useCompetitionTemplates(clubId);
+  const { data: templates } = useCompetitionTemplates(facilityId);
 
   const activeCount = series?.filter((s) => s.status === 'active').length ?? 0;
   const pausedCount = series?.filter((s) => s.status === 'paused').length ?? 0;
@@ -181,7 +181,7 @@ export default function SeriesListComponent({ clubId }: SeriesListComponentProps
     <div className="py-8">
       {/* Back Link */}
       <Link
-        href={`/${locale}/admin/clubs/${clubId}/competitions`}
+        href={`/${locale}/admin/facilities/${facilityId}/competitions`}
         className="inline-flex items-center text-slate-600 hover:text-slate-900 font-medium transition-colors mb-6"
       >
         <ArrowLeft className="w-4 h-4 mr-2" />
@@ -237,7 +237,7 @@ export default function SeriesListComponent({ clubId }: SeriesListComponentProps
       ) : series && series.length > 0 ? (
         <div className="space-y-4">
           {series.map((s) => (
-            <SeriesCard key={s.series_id} series={s} clubId={clubId} />
+            <SeriesCard key={s.series_id} series={s} facilityId={facilityId} />
           ))}
         </div>
       ) : (
@@ -263,7 +263,7 @@ export default function SeriesListComponent({ clubId }: SeriesListComponentProps
       <CreateSeriesModal
         isOpen={showCreateModal}
         onClose={() => setShowCreateModal(false)}
-        clubId={clubId}
+        facilityId={facilityId}
         templates={templates ?? []}
       />
     </div>

src/app/[locale]/admin/facilities/[facility_id]/competitions/series/page.tsx

@@ -0,0 +1,12 @@
+import SeriesListComponent from './SeriesListComponent';
+
+export default async function SeriesPage({
+  params,
+}: {
+  params: Promise<{ facility_id: string }>;
+}) {
+  const { facility_id } = await params;
+  const facilityId = parseInt(facility_id, 10);
+
+  return <SeriesListComponent facilityId={facilityId} />;
+}

src/app/[locale]/admin/facilities/[facility_id]/competitions/templates/TemplatesPageComponent.tsx

@@ -11,7 +11,7 @@ import CreateTemplateModal from './CreateTemplateModal';
 import type { CompetitionTemplate, CompetitionType } from '@/src/types/competition';
 
 interface TemplatesPageComponentProps {
-  clubId: number;
+  facilityId: number;
 }
 
 const typeIcons: Record<CompetitionType, React.ComponentType<{ className?: string }>> = {
@@ -141,11 +141,11 @@ function TemplateCardSkeleton() {
   );
 }
 
-export default function TemplatesPageComponent({ clubId }: TemplatesPageComponentProps) {
+export default function TemplatesPageComponent({ facilityId }: TemplatesPageComponentProps) {
   const { locale } = useTranslation();
   const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
 
-  const { data: templates, isLoading, error } = useCompetitionTemplates(clubId);
+  const { data: templates, isLoading, error } = useCompetitionTemplates(facilityId);
   const updateMutation = useUpdateTemplate();
 
   function handleToggleActive(template: CompetitionTemplate) {
@@ -161,7 +161,7 @@ export default function TemplatesPageComponent({ clubId }: TemplatesPageComponen
       <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-8">
         <div>
           <Link
-            href={`/${locale}/admin/clubs/${clubId}/competitions`}
+            href={`/${locale}/admin/facilities/${facilityId}/competitions`}
             className="inline-flex items-center text-slate-600 hover:text-slate-900 font-medium transition-colors mb-2"
           >
             <ArrowLeft className="w-4 h-4 mr-2" />
@@ -229,7 +229,7 @@ export default function TemplatesPageComponent({ clubId }: TemplatesPageComponen
       <CreateTemplateModal
         isOpen={isCreateModalOpen}
         onClose={() => setIsCreateModalOpen(false)}
-        facilityId={clubId}
+        facilityId={facilityId}
       />
     </div>
   );

src/app/[locale]/admin/facilities/[facility_id]/competitions/templates/page.tsx

@@ -0,0 +1,12 @@
+import TemplatesPageComponent from './TemplatesPageComponent';
+
+export default async function TemplatesPage({
+  params,
+}: {
+  params: Promise<{ facility_id: string }>;
+}) {
+  const { facility_id } = await params;
+  const facilityId = parseInt(facility_id, 10);
+
+  return <TemplatesPageComponent facilityId={facilityId} />;
+}

src/app/[locale]/admin/facilities/[facility_id]/courts/CourtsComponent.tsx

@@ -4,23 +4,23 @@ import { useState, useEffect } from 'react';
 import { Loader2 } from 'lucide-react';
 import { getAdminClubDetail } from '@/src/lib/api/admin-clubs';
 import type { Court } from '@/src/types/courts';
-import ClubCourtsTab from '../tabs/ClubCourtsTab';
+import FacilityCourtsTab from '../tabs/FacilityCourtsTab';
 
 interface CourtsComponentProps {
-  clubId: number;
+  facilityId: number;
 }
 
-export default function CourtsComponent({ clubId }: CourtsComponentProps) {
+export default function CourtsComponent({ facilityId }: CourtsComponentProps) {
   const [courts, setCourts] = useState<Court[]>([]);
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
     loadCourts();
-  }, [clubId]);
+  }, [facilityId]);
 
   async function loadCourts() {
     setLoading(true);
-    const result = await getAdminClubDetail(clubId);
+    const result = await getAdminClubDetail(facilityId);
 
     if (result.success) {
       setCourts(result.data.courts);
@@ -38,8 +38,8 @@ export default function CourtsComponent({ clubId }: CourtsComponentProps) {
   }
 
   return (
-    <ClubCourtsTab
+    <FacilityCourtsTab
-      clubId={clubId}
+      facilityId={facilityId}
       courts={courts}
       onUpdate={loadCourts}
     />

src/app/[locale]/admin/facilities/[facility_id]/courts/page.tsx

@@ -0,0 +1,12 @@
+import CourtsComponent from './CourtsComponent';
+
+export default async function CourtsPage({
+  params
+}: {
+  params: Promise<{ facility_id: string }>
+}) {
+  const { facility_id } = await params;
+  const facilityId = parseInt(facility_id, 10);
+
+  return <CourtsComponent facilityId={facilityId} />;
+}

src/app/[locale]/admin/facilities/[facility_id]/credits/CreditsManagementComponent.tsx

@@ -7,10 +7,10 @@ import type { MemberCreditBalance } from '@/src/types/facility-admin';
 import CreditDetailModal from './CreditDetailModal';
 
 interface CreditsManagementComponentProps {
-  clubId: number;
+  facilityId: number;
 }
 
-export default function CreditsManagementComponent({ clubId }: CreditsManagementComponentProps) {
+export default function CreditsManagementComponent({ facilityId }: CreditsManagementComponentProps) {
   const [credits, setCredits] = useState<MemberCreditBalance[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -20,14 +20,14 @@ export default function CreditsManagementComponent({ clubId }: CreditsManagement
 
   useEffect(() => {
     fetchCredits();
-  }, [clubId, showZeroBalances]);
+  }, [facilityId, showZeroBalances]);
 
   async function fetchCredits() {
     setLoading(true);
     setError(null);
 
     const minBalance = showZeroBalances ? 0 : 1;
-    const result = await listMemberCredits(clubId, minBalance);
+    const result = await listMemberCredits(facilityId, minBalance);
 
     if (result.success) {
       setCredits(result.data);
@@ -177,7 +177,7 @@ export default function CreditsManagementComponent({ clubId }: CreditsManagement
         <CreditDetailModal
           isOpen={!!selectedUser}
           onClose={() => setSelectedUser(null)}
-          facilityId={clubId}
+          facilityId={facilityId}
           user={selectedUser}
           onBalanceChange={fetchCredits}
         />

src/app/[locale]/admin/facilities/[facility_id]/credits/page.tsx

@@ -0,0 +1,12 @@
+import CreditsManagementComponent from './CreditsManagementComponent';
+
+export default async function CreditsManagementPage({
+  params
+}: {
+  params: Promise<{ facility_id: string }>;
+}) {
+  const { facility_id } = await params;
+  const facilityId = parseInt(facility_id, 10);
+
+  return <CreditsManagementComponent facilityId={facilityId} />;
+}

src/app/[locale]/admin/facilities/[facility_id]/layout.tsx

@@ -0,0 +1,21 @@
+import AdminAuthGuard from '@/src/components/AdminAuthGuard';
+import FacilityDetailHeader from '@/src/components/FacilityDetailHeader';
+
+export default async function FacilityDetailLayout({
+  children,
+  params,
+}: {
+  children: React.ReactNode;
+  params: Promise<{ facility_id: string }>;
+}) {
+  const { facility_id } = await params;
+  const facilityId = parseInt(facility_id, 10);
+
+  return (
+    <AdminAuthGuard>
+      <FacilityDetailHeader facilityId={facilityId}>
+        {children}
+      </FacilityDetailHeader>
+    </AdminAuthGuard>
+  );
+}

src/app/[locale]/admin/facilities/[facility_id]/members/MembersManagementComponent.tsx

@@ -9,10 +9,10 @@ import EditMemberModal from '@/src/components/members/EditMemberModal';
 import MemberListSkeleton from '@/src/components/members/MemberListSkeleton';
 
 interface MembersManagementComponentProps {
-  clubId: number;
+  facilityId: number;
 }
 
-export default function MembersManagementComponent({ clubId }: MembersManagementComponentProps) {
+export default function MembersManagementComponent({ facilityId }: MembersManagementComponentProps) {
   const [members, setMembers] = useState<FacilityMember[]>([]);
   const [filteredMembers, setFilteredMembers] = useState<FacilityMember[]>([]);
   const [loading, setLoading] = useState(true);
@@ -27,7 +27,7 @@ export default function MembersManagementComponent({ clubId }: MembersManagement
 
   useEffect(() => {
     fetchMembers();
-  }, [clubId]);
+  }, [facilityId]);
 
   useEffect(() => {
     applyFilters();
@@ -37,7 +37,7 @@ export default function MembersManagementComponent({ clubId }: MembersManagement
     setLoading(true);
     setError(null);
 
-    const result = await listMembers(clubId);
+    const result = await listMembers(facilityId);
 
     if (result.success) {
       setMembers(result.data);
@@ -77,7 +77,7 @@ export default function MembersManagementComponent({ clubId }: MembersManagement
   async function handleDelete(memberId: number, memberName: string) {
     if (!confirm(`Are you sure you want to remove "${memberName}" from this facility?`)) return;
 
-    const result = await deleteMember(clubId, memberId);
+    const result = await deleteMember(facilityId, memberId);
 
     if (result.success) {
       fetchMembers();
@@ -211,7 +211,7 @@ export default function MembersManagementComponent({ clubId }: MembersManagement
         <AddMemberModal
           isOpen={addModalOpen}
           onClose={() => setAddModalOpen(false)}
-          facilityId={clubId}
+          facilityId={facilityId}
           onSuccess={fetchMembers}
         />
       )}
@@ -221,7 +221,7 @@ export default function MembersManagementComponent({ clubId }: MembersManagement
         <EditMemberModal
           isOpen={!!editingMember}
           onClose={() => setEditingMember(null)}
-          facilityId={clubId}
+          facilityId={facilityId}
           member={editingMember}
           onSuccess={fetchMembers}
         />

src/app/[locale]/admin/facilities/[facility_id]/members/page.tsx

@@ -0,0 +1,12 @@
+import MembersManagementComponent from './MembersManagementComponent';
+
+export default async function MembersManagementPage({
+  params
+}: {
+  params: Promise<{ facility_id: string }>;
+}) {
+  const { facility_id } = await params;
+  const facilityId = parseInt(facility_id, 10);
+
+  return <MembersManagementComponent facilityId={facilityId} />;
+}

src/app/[locale]/admin/facilities/[facility_id]/page.tsx

@@ -0,0 +1,12 @@
+import FacilityDetailTabs from './FacilityDetailTabs';
+
+export default async function AdminClubDetailPage({
+  params
+}: {
+  params: Promise<{ facility_id: string }>
+}) {
+  const { facility_id } = await params;
+  const facilityId = parseInt(facility_id, 10);
+
+  return <FacilityDetailTabs facilityId={facilityId} />;
+}

src/app/[locale]/admin/facilities/[facility_id]/plans/MembershipPlansComponent.tsx

@@ -10,10 +10,10 @@ import TemplatePicker from '@/src/components/plans/TemplatePicker';
 import EntitlementsConfigModal from '@/src/components/plans/EntitlementsConfigModal';
 
 interface MembershipPlansComponentProps {
-  clubId: number;
+  facilityId: number;
 }
 
-export default function MembershipPlansComponent({ clubId }: MembershipPlansComponentProps) {
+export default function MembershipPlansComponent({ facilityId }: MembershipPlansComponentProps) {
   const [plans, setPlans] = useState<MembershipPlan[]>([]);
   const [entitlementsMap, setEntitlementsMap] = useState<Record<number, PlanEntitlements>>({});
   const [loading, setLoading] = useState(true);
@@ -26,13 +26,13 @@ export default function MembershipPlansComponent({ clubId }: MembershipPlansComp
 
   useEffect(() => {
     fetchPlans();
-  }, [clubId]);
+  }, [facilityId]);
 
   async function fetchPlans() {
     setLoading(true);
     setError(null);
 
-    const result = await listPlans(clubId, { include_inactive: false });
+    const result = await listPlans(facilityId, { include_inactive: false });
 
     if (result.success) {
       setPlans(result.data);
@@ -47,7 +47,7 @@ export default function MembershipPlansComponent({ clubId }: MembershipPlansComp
 
   async function fetchAllEntitlements(plansList: MembershipPlan[]) {
     const entitlementPromises = plansList.map(async (plan) => {
-      const result = await getEntitlements(clubId, plan.facility_membership_plan_id);
+      const result = await getEntitlements(facilityId, plan.facility_membership_plan_id);
       if (result.success) {
         return { planId: plan.facility_membership_plan_id, entitlements: result.data };
       }
@@ -69,7 +69,7 @@ export default function MembershipPlansComponent({ clubId }: MembershipPlansComp
   async function handleDelete(planId: number, planName: string) {
     if (!confirm(`Are you sure you want to deactivate "${planName}"?`)) return;
 
-    const result = await deletePlan(clubId, planId);
+    const result = await deletePlan(facilityId, planId);
 
     if (result.success) {
       fetchPlans();
@@ -159,7 +159,7 @@ export default function MembershipPlansComponent({ clubId }: MembershipPlansComp
         <PlanFormModal
           isOpen={createModalOpen}
           onClose={handleCreateModalClose}
-          facilityId={clubId}
+          facilityId={facilityId}
           initialValues={selectedTemplate ? {
             name: selectedTemplate.name,
             billing_period: selectedTemplate.billing_period,
@@ -177,7 +177,7 @@ export default function MembershipPlansComponent({ clubId }: MembershipPlansComp
         <PlanFormModal
           isOpen={!!editingPlan}
           onClose={() => setEditingPlan(null)}
-          facilityId={clubId}
+          facilityId={facilityId}
           plan={editingPlan}
           onSuccess={fetchPlans}
         />
@@ -188,7 +188,7 @@ export default function MembershipPlansComponent({ clubId }: MembershipPlansComp
         <EntitlementsConfigModal
           isOpen={!!configuringPlan}
           onClose={() => setConfiguringPlan(null)}
-          facilityId={clubId}
+          facilityId={facilityId}
           plan={configuringPlan}
           onSuccess={fetchPlans}
         />

src/app/[locale]/admin/facilities/[facility_id]/plans/page.tsx

@@ -0,0 +1,12 @@
+import MembershipPlansComponent from './MembershipPlansComponent';
+
+export default async function MembershipPlansPage({
+  params
+}: {
+  params: Promise<{ facility_id: string }>;
+}) {
+  const { facility_id } = await params;
+  const facilityId = parseInt(facility_id, 10);
+
+  return <MembershipPlansComponent facilityId={facilityId} />;
+}

src/app/[locale]/admin/facilities/[facility_id]/settings/FacilitySettingsComponent.tsx

@@ -8,10 +8,10 @@ import BookingLimitsForm from '@/src/components/policy/BookingLimitsForm';
 import GuestPricingInput from '@/src/components/policy/GuestPricingInput';
 
 interface FacilitySettingsComponentProps {
-  clubId: number;
+  facilityId: number;
 }
 
-export default function FacilitySettingsComponent({ clubId }: FacilitySettingsComponentProps) {
+export default function FacilitySettingsComponent({ facilityId }: FacilitySettingsComponentProps) {
   const [policy, setPolicy] = useState<FacilityPolicy | null>(null);
   const [loading, setLoading] = useState(true);
   const [saving, setSaving] = useState(false);
@@ -20,13 +20,13 @@ export default function FacilitySettingsComponent({ clubId }: FacilitySettingsCo
 
   useEffect(() => {
     fetchPolicy();
-  }, [clubId]);
+  }, [facilityId]);
 
   async function fetchPolicy() {
     setLoading(true);
     setError(null);
 
-    const result = await getPolicy(clubId);
+    const result = await getPolicy(facilityId);
 
     if (result.success) {
       setPolicy(result.data);
@@ -44,7 +44,7 @@ export default function FacilitySettingsComponent({ clubId }: FacilitySettingsCo
     setError(null);
     setSuccessMessage(null);
 
-    const result = await updatePolicy(clubId, {
+    const result = await updatePolicy(facilityId, {
       access_model: policy.access_model,
       guest_price_cents: policy.guest_price_cents,
       default_price_group: policy.default_price_group,

src/app/[locale]/admin/facilities/[facility_id]/settings/page.tsx

@@ -0,0 +1,12 @@
+import FacilitySettingsComponent from './FacilitySettingsComponent';
+
+export default async function FacilitySettingsPage({
+  params
+}: {
+  params: Promise<{ facility_id: string }>;
+}) {
+  const { facility_id } = await params;
+  const facilityId = parseInt(facility_id, 10);
+
+  return <FacilitySettingsComponent facilityId={facilityId} />;
+}

src/app/[locale]/admin/facilities/[facility_id]/slot-definitions/CloneSlotDefinitionModal.tsx

@@ -12,7 +12,7 @@ import type {
 import { DAY_NAMES, formatTime, calculateEndTime } from '@/src/types/slot-definitions';
 
 interface CloneSlotDefinitionModalProps {
-  clubId: number;
+  facilityId: number;
   sourceDefinition: SlotDefinition;
   courts: Court[];
   onClose: () => void;
@@ -20,7 +20,7 @@ interface CloneSlotDefinitionModalProps {
 }
 
 export default function CloneSlotDefinitionModal({
-  clubId,
+  facilityId,
   sourceDefinition,
   courts,
   onClose,
@@ -82,7 +82,7 @@ export default function CloneSlotDefinitionModal({
     if (validFrom) request.valid_from = validFrom;
     if (validTo) request.valid_to = validTo;
 
-    const result = await cloneSlotDefinition(clubId, sourceDefinition.slot_definition_id, request);
+    const result = await cloneSlotDefinition(facilityId, sourceDefinition.slot_definition_id, request);
 
     if (result.success) {
       onSuccess();

src/app/[locale]/admin/facilities/[facility_id]/slot-definitions/GenerateSlotDefinitionsModal.tsx

@@ -14,14 +14,14 @@ import type {
 import { DAY_NAMES } from '@/src/types/slot-definitions';
 
 interface GenerateSlotDefinitionsModalProps {
-  clubId: number;
+  facilityId: number;
   courts: Court[];
   onClose: () => void;
   onSuccess: () => void;
 }
 
 export default function GenerateSlotDefinitionsModal({
-  clubId,
+  facilityId,
   courts,
   onClose,
   onSuccess,
@@ -130,7 +130,7 @@ export default function GenerateSlotDefinitionsModal({
 
     if (validTo) request.valid_to = validTo;
 
-    const result = await generateSlotDefinitions(clubId, request);
+    const result = await generateSlotDefinitions(facilityId, request);
 
     if (result.success) {
       onSuccess();

src/app/[locale]/admin/facilities/[facility_id]/slot-definitions/MaterialisationStatusPanel.tsx

@@ -15,10 +15,10 @@ import {
 } from '@/src/types/materialisation';
 
 interface MaterialisationStatusPanelProps {
-  clubId: number;
+  facilityId: number;
 }
 
-export default function MaterialisationStatusPanel({ clubId }: MaterialisationStatusPanelProps) {
+export default function MaterialisationStatusPanel({ facilityId }: MaterialisationStatusPanelProps) {
   const [status, setStatus] = useState<MaterialisationStatus | null>(null);
   const [loading, setLoading] = useState(true);
   const [triggering, setTriggering] = useState(false);
@@ -30,7 +30,7 @@ export default function MaterialisationStatusPanel({ clubId }: MaterialisationSt
   // Poll status on mount and when triggering completes
   useEffect(() => {
     loadStatus();
-  }, [clubId]);
+  }, [facilityId]);
 
   // Poll status every 2 seconds while job is active (queued/running)
   useEffect(() => {
@@ -96,7 +96,7 @@ export default function MaterialisationStatusPanel({ clubId }: MaterialisationSt
   }, [status?.rate_limit.next_available_at]);
 
   async function loadStatus() {
-    const result = await getMaterialisationStatus(clubId);
+    const result = await getMaterialisationStatus(facilityId);
 
     if (result.success) {
       setStatus(result.data);
@@ -116,7 +116,7 @@ export default function MaterialisationStatusPanel({ clubId }: MaterialisationSt
 
     const idempotencyKey = generateIdempotencyKey();
 
-    const result = await triggerMaterialisation(clubId, {
+    const result = await triggerMaterialisation(facilityId, {
       idempotency_key: idempotencyKey,
       policy_profile: selectedPolicy,
     });

src/app/[locale]/admin/facilities/[facility_id]/slot-definitions/SlotDefinitionForm.tsx

@@ -7,7 +7,7 @@ import { DAY_NAMES, formatTimeForAPI } from '@/src/types/slot-definitions';
 import { createSlotDefinition, updateSlotDefinition } from '@/src/lib/api/slot-definitions';
 
 interface SlotDefinitionFormProps {
-  clubId: number;
+  facilityId: number;
   courts: { court_id: number; name: string }[];
   definition?: SlotDefinition;
   onClose: () => void;
@@ -15,7 +15,7 @@ interface SlotDefinitionFormProps {
 }
 
 export default function SlotDefinitionForm({
-  clubId,
+  facilityId,
   courts,
   definition,
   onClose,
@@ -113,8 +113,8 @@ export default function SlotDefinitionForm({
     };
 
     const result = isEditing
-      ? await updateSlotDefinition(clubId, definition.slot_definition_id, request)
+      ? await updateSlotDefinition(facilityId, definition.slot_definition_id, request)
-      : await createSlotDefinition(clubId, request);
+      : await createSlotDefinition(facilityId, request);
 
     if (result.success) {
       onSuccess();

src/app/[locale]/admin/facilities/[facility_id]/slot-definitions/SlotDefinitionsComponent.tsx

@@ -13,10 +13,10 @@ import GenerateSlotDefinitionsModal from './GenerateSlotDefinitionsModal';
 import CloneSlotDefinitionModal from './CloneSlotDefinitionModal';
 
 interface SlotDefinitionsComponentProps {
-  clubId: number;
+  facilityId: number;
 }
 
-export default function SlotDefinitionsComponent({ clubId }: SlotDefinitionsComponentProps) {
+export default function SlotDefinitionsComponent({ facilityId }: SlotDefinitionsComponentProps) {
   const [definitions, setDefinitions] = useState<SlotDefinition[]>([]);
   const [courts, setCourts] = useState<Court[]>([]);
   const [loading, setLoading] = useState(true);
@@ -28,18 +28,18 @@ export default function SlotDefinitionsComponent({ clubId }: SlotDefinitionsComp
 
   useEffect(() => {
     loadData();
-  }, [clubId]);
+  }, [facilityId]);
 
   async function loadData() {
     setLoading(true);
 
     // Fetch club detail to get courts with actual names
-    const clubResult = await getAdminClubDetail(clubId);
+    const clubResult = await getAdminClubDetail(facilityId);
     if (clubResult.success) {
       setCourts(clubResult.data.courts);
     }
 
-    const result = await getSlotDefinitions(clubId);
+    const result = await getSlotDefinitions(facilityId);
     if (result.success) {
       setDefinitions(result.data);
       setError(null);
@@ -52,7 +52,7 @@ export default function SlotDefinitionsComponent({ clubId }: SlotDefinitionsComp
 
   async function loadDefinitions() {
     // Reload just definitions (for after create/edit/delete)
-    const result = await getSlotDefinitions(clubId);
+    const result = await getSlotDefinitions(facilityId);
     if (result.success) {
       setDefinitions(result.data);
     }
@@ -73,7 +73,7 @@ export default function SlotDefinitionsComponent({ clubId }: SlotDefinitionsComp
       return;
     }
 
-    const result = await deleteSlotDefinition(clubId, definition.slot_definition_id);
+    const result = await deleteSlotDefinition(facilityId, definition.slot_definition_id);
     if (result.success) {
       loadDefinitions();
     } else {
@@ -158,7 +158,7 @@ export default function SlotDefinitionsComponent({ clubId }: SlotDefinitionsComp
       </div>
 
       {/* Materialisation Status Panel */}
-      <MaterialisationStatusPanel clubId={clubId} />
+      <MaterialisationStatusPanel facilityId={facilityId} />
 
       {/* Empty state */}
       {definitions.length === 0 ? (
@@ -272,7 +272,7 @@ export default function SlotDefinitionsComponent({ clubId }: SlotDefinitionsComp
       {/* Create/Edit Modal */}
       {showCreateModal && (
         <SlotDefinitionForm
-          clubId={clubId}
+          facilityId={facilityId}
           courts={courts}
           definition={editingDefinition}
           onClose={handleFormClose}
@@ -283,7 +283,7 @@ export default function SlotDefinitionsComponent({ clubId }: SlotDefinitionsComp
       {/* Generate Modal */}
       {showGenerateModal && (
         <GenerateSlotDefinitionsModal
-          clubId={clubId}
+          facilityId={facilityId}
           courts={courts}
           onClose={() => setShowGenerateModal(false)}
           onSuccess={loadDefinitions}
@@ -293,7 +293,7 @@ export default function SlotDefinitionsComponent({ clubId }: SlotDefinitionsComp
       {/* Clone Modal */}
       {cloningDefinition && (
         <CloneSlotDefinitionModal
-          clubId={clubId}
+          facilityId={facilityId}
           sourceDefinition={cloningDefinition}
           courts={courts}
           onClose={() => setCloningDefinition(undefined)}

src/app/[locale]/admin/facilities/[facility_id]/slot-definitions/page.tsx

@@ -0,0 +1,12 @@
+import SlotDefinitionsComponent from './SlotDefinitionsComponent';
+
+export default async function SlotDefinitionsPage({
+  params
+}: {
+  params: Promise<{ facility_id: string }>;
+}) {
+  const { facility_id } = await params;
+  const facilityId = parseInt(facility_id, 10);
+
+  return <SlotDefinitionsComponent facilityId={facilityId} />;
+}

src/app/[locale]/admin/facilities/[facility_id]/slot-instances/ManualSlotModal.tsx

@@ -7,7 +7,7 @@ import type { CreateSlotInstanceRequest, SlotInstanceError } from '@/src/types/s
 import type { Court } from '@/src/types/courts';
 
 interface ManualSlotModalProps {
-  clubId: number;
+  facilityId: number;
   courts: Court[];
   initialDate: string;
   onClose: () => void;
@@ -15,7 +15,7 @@ interface ManualSlotModalProps {
 }
 
 export default function ManualSlotModal({
-  clubId,
+  facilityId,
   courts,
   initialDate,
   onClose,
@@ -87,7 +87,7 @@ export default function ManualSlotModal({
       reason: reason.trim() || undefined,
     };
 
-    const result = await createSlotInstance(clubId, request);
+    const result = await createSlotInstance(facilityId, request);
 
     if (result.success) {
       onSuccess();

src/app/[locale]/admin/facilities/[facility_id]/slot-instances/SlotInstanceEditModal.tsx

@@ -13,14 +13,14 @@ import {
 } from '@/src/types/slot-instances';
 
 interface SlotInstanceEditModalProps {
-  clubId: number;
+  facilityId: number;
   slot: SlotInstance;
   onClose: () => void;
   onSuccess: () => void;
 }
 
 export default function SlotInstanceEditModal({
-  clubId,
+  facilityId,
   slot,
   onClose,
   onSuccess,
@@ -93,7 +93,7 @@ export default function SlotInstanceEditModal({
       return;
     }
 
-    const result = await updateSlotInstance(clubId, slot.slot_instance_id, request);
+    const result = await updateSlotInstance(facilityId, slot.slot_instance_id, request);
 
     if (result.success) {
       onSuccess();
@@ -113,7 +113,7 @@ export default function SlotInstanceEditModal({
     setError(null);
 
     const result = await convertToManualSlot(
-      clubId,
+      facilityId,
       slot.slot_instance_id,
       `Converted to manual by admin (was: definition ${slot.origin_definition_id})`
     );

src/app/[locale]/admin/facilities/[facility_id]/slot-instances/SlotInstancesComponent.tsx

@@ -28,10 +28,10 @@ import SlotInstanceEditModal from './SlotInstanceEditModal';
 import ManualSlotModal from './ManualSlotModal';
 
 interface SlotInstancesComponentProps {
-  clubId: number;
+  facilityId: number;
 }
 
-export default function SlotInstancesComponent({ clubId }: SlotInstancesComponentProps) {
+export default function SlotInstancesComponent({ facilityId }: SlotInstancesComponentProps) {
   const [slots, setSlots] = useState<SlotInstance[]>([]);
   const [courts, setCourts] = useState<Court[]>([]);
   const [timezone, setTimezone] = useState<string>('UTC');
@@ -54,14 +54,14 @@ export default function SlotInstancesComponent({ clubId }: SlotInstancesComponen
 
   useEffect(() => {
     loadCourts();
-  }, [clubId]);
+  }, [facilityId]);
 
   useEffect(() => {
     loadSlots();
-  }, [clubId, selectedDate, selectedCourtId, showCancelled]);
+  }, [facilityId, selectedDate, selectedCourtId, showCancelled]);
 
   async function loadCourts() {
-    const result = await getAdminClubDetail(clubId);
+    const result = await getAdminClubDetail(facilityId);
     if (result.success) {
       setCourts(result.data.courts);
     }
@@ -69,7 +69,7 @@ export default function SlotInstancesComponent({ clubId }: SlotInstancesComponen
 
   async function loadSlots() {
     setLoading(true);
-    const result = await getSlotInstances(clubId, selectedDate, {
+    const result = await getSlotInstances(facilityId, selectedDate, {
       court_id: selectedCourtId ?? undefined,
       include_cancelled: showCancelled,
     });
@@ -100,7 +100,7 @@ export default function SlotInstancesComponent({ clubId }: SlotInstancesComponen
       return;
     }
 
-    const result = await deleteSlotInstance(clubId, slot.slot_instance_id);
+    const result = await deleteSlotInstance(facilityId, slot.slot_instance_id);
     if (result.success) {
       loadSlots();
     } else {
@@ -113,7 +113,7 @@ export default function SlotInstancesComponent({ clubId }: SlotInstancesComponen
       return;
     }
 
-    const result = await cancelSlotInstance(clubId, slot.slot_instance_id);
+    const result = await cancelSlotInstance(facilityId, slot.slot_instance_id);
     if (result.success) {
       loadSlots();
     } else {
@@ -431,7 +431,7 @@ export default function SlotInstancesComponent({ clubId }: SlotInstancesComponen
       {/* Edit Modal */}
       {editingSlot && (
         <SlotInstanceEditModal
-          clubId={clubId}
+          facilityId={facilityId}
           slot={editingSlot}
           onClose={() => setEditingSlot(null)}
           onSuccess={() => {
@@ -444,7 +444,7 @@ export default function SlotInstancesComponent({ clubId }: SlotInstancesComponen
       {/* Create Modal */}
       {showCreateModal && (
         <ManualSlotModal
-          clubId={clubId}
+          facilityId={facilityId}
           courts={courts}
           initialDate={selectedDate}
           onClose={() => setShowCreateModal(false)}

src/app/[locale]/admin/facilities/[facility_id]/slot-instances/page.tsx

@@ -0,0 +1,12 @@
+import SlotInstancesComponent from './SlotInstancesComponent';
+
+export default async function SlotInstancesPage({
+  params
+}: {
+  params: Promise<{ facility_id: string }>;
+}) {
+  const { facility_id } = await params;
+  const facilityId = parseInt(facility_id, 10);
+
+  return <SlotInstancesComponent facilityId={facilityId} />;
+}

src/app/[locale]/admin/facilities/[facility_id]/tabs/FacilityCourtsTab.tsx

@@ -12,13 +12,13 @@ import {
 import type { Court, CourtRequest, CourtDependencies, Sport, SportVariation } from '@/src/types/courts';
 import { formatTimestamp } from '@/src/types/courts';
 
-interface ClubCourtsTabProps {
+interface FacilityCourtsTabProps {
-  clubId: number;
+  facilityId: number;
   courts: Court[];
   onUpdate: () => void;
 }
 
-export default function ClubCourtsTab({ clubId, courts, onUpdate }: ClubCourtsTabProps) {
+export default function FacilityCourtsTab({ facilityId, courts, onUpdate }: FacilityCourtsTabProps) {
   const [error, setError] = useState<string | null>(null);
 
   // Modal state
@@ -43,7 +43,7 @@ export default function ClubCourtsTab({ clubId, courts, onUpdate }: ClubCourtsTa
     setSelectedCourt(court);
 
     // Check dependencies first
-    const result = await getCourtDependencies(clubId, court.court_id);
+    const result = await getCourtDependencies(facilityId, court.court_id);
 
     if (result.success) {
       setDependencies(result.data);
@@ -173,7 +173,7 @@ export default function ClubCourtsTab({ clubId, courts, onUpdate }: ClubCourtsTa
       {/* Add Modal */}
       {showAddModal && (
         <CourtFormModal
-          clubId={clubId}
+          facilityId={facilityId}
           onClose={closeModals}
           onSuccess={handleSuccess}
         />
@@ -182,7 +182,7 @@ export default function ClubCourtsTab({ clubId, courts, onUpdate }: ClubCourtsTa
       {/* Edit Modal */}
       {showEditModal && selectedCourt && (
         <CourtFormModal
-          clubId={clubId}
+          facilityId={facilityId}
           court={selectedCourt}
           onClose={closeModals}
           onSuccess={handleSuccess}
@@ -192,7 +192,7 @@ export default function ClubCourtsTab({ clubId, courts, onUpdate }: ClubCourtsTa
       {/* Delete Confirmation Modal */}
       {showDeleteModal && selectedCourt && (
         <DeleteConfirmationModal
-          clubId={clubId}
+          facilityId={facilityId}
           court={selectedCourt}
           onClose={closeModals}
           onSuccess={handleSuccess}
@@ -215,13 +215,13 @@ export default function ClubCourtsTab({ clubId, courts, onUpdate }: ClubCourtsTa
  * Court Form Modal (Add/Edit)
  */
 interface CourtFormModalProps {
-  clubId: number;
+  facilityId: number;
   court?: Court;
   onClose: () => void;
   onSuccess: () => void;
 }
 
-function CourtFormModal({ clubId, court, onClose, onSuccess }: CourtFormModalProps) {
+function CourtFormModal({ facilityId, court, onClose, onSuccess }: CourtFormModalProps) {
   const isEditing = !!court;
   const [name, setName] = useState(court?.name || '');
   // Get sport_variation_id from nested structure or fall back to deprecated flat field
@@ -276,8 +276,8 @@ function CourtFormModal({ clubId, court, onClose, onSuccess }: CourtFormModalPro
     };
 
     const result = isEditing
-      ? await updateCourt(clubId, court!.court_id, request)
+      ? await updateCourt(facilityId, court!.court_id, request)
-      : await createCourt(clubId, request);
+      : await createCourt(facilityId, request);
 
     if (result.success) {
       onSuccess();
@@ -418,13 +418,13 @@ function CourtFormModal({ clubId, court, onClose, onSuccess }: CourtFormModalPro
  * Delete Confirmation Modal
  */
 interface DeleteConfirmationModalProps {
-  clubId: number;
+  facilityId: number;
   court: Court;
   onClose: () => void;
   onSuccess: () => void;
 }
 
-function DeleteConfirmationModal({ clubId, court, onClose, onSuccess }: DeleteConfirmationModalProps) {
+function DeleteConfirmationModal({ facilityId, court, onClose, onSuccess }: DeleteConfirmationModalProps) {
   const [deleting, setDeleting] = useState(false);
   const [error, setError] = useState('');
 
@@ -432,7 +432,7 @@ function DeleteConfirmationModal({ clubId, court, onClose, onSuccess }: DeleteCo
     setDeleting(true);
     setError('');
 
-    const result = await deleteCourt(clubId, court.court_id);
+    const result = await deleteCourt(facilityId, court.court_id);
 
     if (result.success) {
       onSuccess();

src/app/[locale]/admin/facilities/[facility_id]/tabs/FacilityProfileTab.tsx

@@ -66,12 +66,12 @@ function EditableField({
   );
 }
 
-interface ClubProfileTabProps {
+interface FacilityProfileTabProps {
-  clubId: number;
+  facilityId: number;
   onUpdate?: () => void;
 }
 
-export default function ClubProfileTab({ clubId, onUpdate }: ClubProfileTabProps) {
+export default function FacilityProfileTab({ facilityId, onUpdate }: FacilityProfileTabProps) {
   const [profile, setProfile] = useState<ClubProfile | null>(null);
   const [loading, setLoading] = useState(true);
   const [saving, setSaving] = useState(false);
@@ -96,11 +96,11 @@ export default function ClubProfileTab({ clubId, onUpdate }: ClubProfileTabProps
 
   useEffect(() => {
     loadProfile();
-  }, [clubId]);
+  }, [facilityId]);
 
   async function loadProfile() {
     setLoading(true);
-    const result = await getClubProfile(clubId);
+    const result = await getClubProfile(facilityId);
 
     if (result.success) {
       const prof = result.data;
@@ -182,7 +182,7 @@ export default function ClubProfileTab({ clubId, onUpdate }: ClubProfileTabProps
       },
     };
 
-    const result = await updateClubProfile(clubId, request);
+    const result = await updateClubProfile(facilityId, request);
 
     if (result.success) {
       setProfile(result.data);

src/app/[locale]/admin/facilities/[facility_id]/transfers/TransfersManagementComponent.tsx

@@ -6,12 +6,12 @@ import { listFacilityTransfers } from '@/src/lib/api/facility-admin';
 import type { AdminTransferOffer, TransferListFilters } from '@/src/types/facility-admin';
 
 interface TransfersManagementComponentProps {
-  clubId: number;
+  facilityId: number;
 }
 
 type TransferStatus = 'all' | 'pending' | 'accepted' | 'declined' | 'expired' | 'cancelled';
 
-export default function TransfersManagementComponent({ clubId }: TransfersManagementComponentProps) {
+export default function TransfersManagementComponent({ facilityId }: TransfersManagementComponentProps) {
   const [transfers, setTransfers] = useState<AdminTransferOffer[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -23,7 +23,7 @@ export default function TransfersManagementComponent({ clubId }: TransfersManage
 
   useEffect(() => {
     fetchTransfers();
-  }, [clubId, statusFilter, dateRange]);
+  }, [facilityId, statusFilter, dateRange]);
 
   async function fetchTransfers() {
     setLoading(true);
@@ -40,7 +40,7 @@ export default function TransfersManagementComponent({ clubId }: TransfersManage
       filters.to_date = dateRange.to;
     }
 
-    const result = await listFacilityTransfers(clubId, filters);
+    const result = await listFacilityTransfers(facilityId, filters);
 
     if (result.success) {
       setTransfers(result.data);

src/app/[locale]/admin/facilities/[facility_id]/transfers/page.tsx

@@ -0,0 +1,12 @@
+import TransfersManagementComponent from './TransfersManagementComponent';
+
+export default async function TransfersManagementPage({
+  params
+}: {
+  params: Promise<{ facility_id: string }>;
+}) {
+  const { facility_id } = await params;
+  const facilityId = parseInt(facility_id, 10);
+
+  return <TransfersManagementComponent facilityId={facilityId} />;
+}

src/app/[locale]/admin/facilities/page.tsx

@@ -1,10 +1,10 @@
-import AdminClubsList from './AdminClubsList';
+import AdminFacilitiesList from './AdminFacilitiesList';
 import AdminAuthGuard from '@/src/components/AdminAuthGuard';
 
 export default async function AdminClubsPage() {
   return (
     <AdminAuthGuard>
-      <AdminClubsList />
+      <AdminFacilitiesList />
     </AdminAuthGuard>
   );
 }

src/app/[locale]/dashboard/page.tsx

@@ -9,5 +9,5 @@ export default async function DashboardPage({
   const { locale } = await params;
 
   // Manager portal dashboard redirects to club management
-  redirect(`/${locale}/admin/clubs`);
+  redirect(`/${locale}/admin/facilities`);
 }

src/components/FacilityDetailHeader.tsx

@@ -6,33 +6,33 @@ import Link from 'next/link';
 import { getAdminClubDetail } from '@/src/lib/api/admin-clubs';
 import type { AdminClubDetail, AdminApiError } from '@/src/types/admin-api';
 import useTranslation from '@/src/hooks/useTranslation';
-import ClubTabNavigation from './ClubTabNavigation';
+import FacilityTabNavigation from './FacilityTabNavigation';
 
-interface ClubDetailHeaderProps {
+interface FacilityDetailHeaderProps {
-  clubId: number;
+  facilityId: number;
   children: React.ReactNode;
 }
 
-export default function ClubDetailHeader({ clubId, children }: ClubDetailHeaderProps) {
+export default function FacilityDetailHeader({ facilityId, children }: FacilityDetailHeaderProps) {
   const { locale } = useTranslation();
-  const [clubDetail, setClubDetail] = useState<AdminClubDetail | null>(null);
+  const [facilityDetail, setFacilityDetail] = useState<AdminClubDetail | null>(null);
   const [error, setError] = useState<AdminApiError | null>(null);
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
-    loadClubDetail();
+    loadFacilityDetail();
-  }, [clubId]);
+  }, [facilityId]);
 
-  async function loadClubDetail() {
+  async function loadFacilityDetail() {
     setLoading(true);
-    const result = await getAdminClubDetail(clubId);
+    const result = await getAdminClubDetail(facilityId);
 
     if (result.success) {
-      setClubDetail(result.data);
+      setFacilityDetail(result.data);
       setError(null);
     } else {
       setError(result.error);
-      setClubDetail(null);
+      setFacilityDetail(null);
     }
 
     setLoading(false);
@@ -44,7 +44,7 @@ export default function ClubDetailHeader({ clubId, children }: ClubDetailHeaderP
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
         <div className="flex flex-col items-center justify-center space-y-4">
           <Loader2 className="w-12 h-12 text-slate-900 animate-spin" />
-          <p className="text-slate-600 font-medium">Loading club details...</p>
+          <p className="text-slate-600 font-medium">Loading facility details...</p>
         </div>
       </div>
     );
@@ -89,11 +89,11 @@ export default function ClubDetailHeader({ clubId, children }: ClubDetailHeaderP
                   {error.detail}
                 </p>
                 <Link
-                  href={`/${locale}/admin/clubs`}
+                  href={`/${locale}/admin/facilities`}
                   className="inline-flex items-center px-4 py-2 bg-slate-900 text-white font-semibold rounded-lg hover:bg-slate-800 transition-colors"
                 >
                   <ArrowLeft className="w-4 h-4 mr-2" />
-                  Back to clubs
+                  Back to facilities
                 </Link>
               </div>
             </div>
@@ -113,7 +113,7 @@ export default function ClubDetailHeader({ clubId, children }: ClubDetailHeaderP
               <AlertCircle className="w-8 h-8 text-red-600 flex-shrink-0 mt-1" />
               <div className="flex-1">
                 <h2 className="text-2xl font-bold text-slate-900 mb-4">
-                  Error Loading Club
+                  Error Loading Facility
                 </h2>
                 <p className="text-slate-700 mb-4 leading-relaxed">
                   {error.detail}
@@ -122,11 +122,11 @@ export default function ClubDetailHeader({ clubId, children }: ClubDetailHeaderP
                   Error code: {error.code}
                 </p>
                 <Link
-                  href={`/${locale}/admin/clubs`}
+                  href={`/${locale}/admin/facilities`}
                   className="inline-flex items-center px-4 py-2 bg-slate-900 text-white font-semibold rounded-lg hover:bg-slate-800 transition-colors"
                 >
                   <ArrowLeft className="w-4 h-4 mr-2" />
-                  Back to clubs
+                  Back to facilities
                 </Link>
               </div>
             </div>
@@ -136,7 +136,7 @@ export default function ClubDetailHeader({ clubId, children }: ClubDetailHeaderP
     );
   }
 
-  if (!clubDetail) {
+  if (!facilityDetail) {
     return null;
   }
 
@@ -145,26 +145,26 @@ export default function ClubDetailHeader({ clubId, children }: ClubDetailHeaderP
       {/* Breadcrumb */}
       <div className="mb-8">
         <Link
-          href={`/${locale}/admin/clubs`}
+          href={`/${locale}/admin/facilities`}
           className="inline-flex items-center text-slate-600 hover:text-slate-900 font-medium transition-colors"
         >
           <ArrowLeft className="w-4 h-4 mr-2" />
-          Back to clubs
+          Back to facilities
         </Link>
       </div>
 
-      {/* Club Header */}
+      {/* Facility Header */}
       <div className="mb-8">
         <h1 className="text-4xl font-bold text-slate-900 mb-2 tracking-tight">
-          {clubDetail.facility.name}
+          {facilityDetail.facility.name}
         </h1>
         <p className="text-lg text-slate-600 font-light">
-          {clubDetail.facility.timezone}
+          {facilityDetail.facility.timezone}
         </p>
       </div>
 
       {/* Tab Navigation */}
-      <ClubTabNavigation clubId={clubId} />
+      <FacilityTabNavigation facilityId={facilityId} />
 
       {/* Content */}
       {children}

src/components/FacilityTabNavigation.tsx

@@ -4,8 +4,8 @@ import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import useTranslation from '@/src/hooks/useTranslation';
 
-interface ClubTabNavigationProps {
+interface FacilityTabNavigationProps {
-  clubId: number;
+  facilityId: number;
 }
 
 interface TabConfig {
@@ -14,11 +14,11 @@ interface TabConfig {
   href: string;
 }
 
-export default function ClubTabNavigation({ clubId }: ClubTabNavigationProps) {
+export default function FacilityTabNavigation({ facilityId }: FacilityTabNavigationProps) {
   const { locale } = useTranslation();
   const pathname = usePathname();
 
-  const basePath = `/${locale}/admin/clubs/${clubId}`;
+  const basePath = `/${locale}/admin/facilities/${facilityId}`;
 
   const tabs: TabConfig[] = [
     { key: 'profile', label: 'Profile', href: basePath },
@@ -34,7 +34,7 @@ export default function ClubTabNavigation({ clubId }: ClubTabNavigationProps) {
   ];
 
   function isActive(tab: TabConfig): boolean {
-    // For the base club path (profile), check if we're exactly on it
+    // For the base facility path (profile), check if we're exactly on it
     if (tab.key === 'profile') {
       // Active if pathname is exactly the basePath (no sub-routes)
       return pathname === basePath;

src/components/Navigation.tsx

@@ -329,7 +329,7 @@ export default function Navigation({ pageTitle }: NavigationProps) {
                         animate="open"
                       >
                         <Link
-                          href={localizedLink("/admin/clubs")}
+                          href={localizedLink("/admin/facilities")}
                           onClick={closeMenu}
                           className="flex items-center space-x-3 p-4 rounded-xl hover:bg-slate-50 transition-colors duration-200 group"
                         >

src/components/competitions/CompetitionCard.tsx

@@ -6,6 +6,7 @@ import { Calendar, Users, MapPin, ChevronRight } from 'lucide-react';
 import Card from '@/src/components/cards/Card';
 import CompetitionStatusBadge from './CompetitionStatusBadge';
 import CompetitionTypeBadge from './CompetitionTypeBadge';
+import useTranslation from '@/src/hooks/useTranslation';
 import type { Competition } from '@/src/types/competition';
 
 interface CompetitionCardProps {
@@ -35,7 +36,8 @@ export default function CompetitionCard({
   facilityId,
   className = '',
 }: CompetitionCardProps) {
-  const href = `/facility/${facilityId}/competitions/${competition.competition_id}`;
+  const { locale } = useTranslation();
+  const href = `/${locale}/admin/facilities/${facilityId}/competitions/${competition.competition_id}`;
 
   return (
     <Link href={href} className={`block group ${className}`}>

src/hooks/mutations/useCompetitionMutations.ts

@@ -8,6 +8,7 @@ import {
   startCompetition,
   finishCompetition,
   cancelCompetition,
+  deleteCompetition,
   saveCompetitionAsTemplate,
   approveRegistration,
   rejectRegistration,
@@ -237,6 +238,30 @@ export function useCancelCompetition(competitionId: number) {
   });
 }
 
+/**
+ * Delete a competition (draft or cancelled only)
+ */
+export function useDeleteCompetition(competitionId: number) {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async () => {
+      const result = await deleteCompetition(competitionId);
+      if (!result.success) {
+        throw new Error(result.error.detail);
+      }
+      return result.data;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: competitionQueryKeys.lists() });
+      // Remove the detail query since the competition no longer exists
+      queryClient.removeQueries({
+        queryKey: competitionQueryKeys.detail(competitionId),
+      });
+    },
+  });
+}
+
 /**
  * Save competition as template
  */

src/lib/api/competition-admin.ts

@@ -263,10 +263,26 @@ export async function createCompetition(
   request: CreateCompetitionRequest
 ): Promise<CompetitionApiResult<Competition>> {
   try {
+    // Build request body with proper field names for backend
+    const { config, ...rest } = request;
+    const body: Record<string, unknown> = {
+      ...rest,
+      facility_id: facilityId,
+      scope: request.scope ?? 'facility', // Default to facility scope
+    };
+
+    // Backend expects config_snapshot, not config
+    if (config) {
+      body.config_snapshot = config;
+    } else if (!request.template_id) {
+      // Provide empty config_snapshot when creating without template
+      body.config_snapshot = {};
+    }
+
     const response = await apiFetch('/competitions', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ ...request, facility_id: facilityId }),
+      body: JSON.stringify(body),
     });
 
     const result = await handleApiResponse<{ competition: Competition }>(response);
@@ -396,6 +412,25 @@ export async function cancelCompetition(
   }
 }
 
+/**
+ * DELETE /competitions/{competition_id}
+ * Permanently delete a competition (draft or cancelled only)
+ */
+export async function deleteCompetition(
+  competitionId: number
+): Promise<CompetitionApiResult<void>> {
+  try {
+    const response = await apiFetch(`/competitions/${competitionId}`, {
+      method: 'DELETE',
+      headers: { 'Content-Type': 'application/json' },
+    });
+
+    return handleApiResponse<void>(response);
+  } catch (error) {
+    return buildNetworkError(error instanceof Error ? error.message : 'Failed to delete competition');
+  }
+}
+
 /**
  * POST /competitions/{competition_id}/save-as-template
  * Create a template from an existing competition's config

src/services/BookingService.ts

@@ -156,4 +156,86 @@ export class BookingService {
       throw BookingError.networkError('Network error while changing match type');
     }
   }
+
+  /**
+   * Check if user can cancel their booking on this slot
+   *
+   * For native facilities: checks transfer-before-cancel policy
+   * For remote facilities: always returns can_cancel=true
+   */
+  async canCancelBooking(slotId: string): Promise<CanCancelResponse> {
+    try {
+      const response = await this.apiClient(`/booking/${encodeURIComponent(slotId)}/can-cancel`);
+
+      if (!response.ok) {
+        if (response.status === 404) {
+          throw BookingError.notFound(slotId);
+        }
+
+        const data = await response.json().catch(() => ({ message: 'Failed to check cancel status' }));
+        throw BookingError.serverError(data.message || 'Failed to check cancel status');
+      }
+
+      const result = await response.json();
+      return result.data;
+    } catch (error) {
+      if (error instanceof BookingError) throw error;
+      throw BookingError.networkError('Network error while checking cancel status');
+    }
+  }
+
+  /**
+   * Cancel booking on this slot for current user
+   *
+   * For native facilities: handles refund via booking_transfer service
+   * For remote facilities: forwards to external provider
+   */
+  async cancelBooking(slotId: string): Promise<CancelBookingResponse> {
+    try {
+      const response = await this.apiClient(
+        `/booking/${encodeURIComponent(slotId)}/cancel`,
+        { method: 'POST' }
+      );
+
+      if (!response.ok) {
+        if (response.status === 404) {
+          throw BookingError.notFound(slotId);
+        }
+
+        const data = await response.json().catch(() => ({ message: 'Failed to cancel booking' }));
+
+        if (response.status === 400) {
+          throw BookingError.badRequest(data.message || 'Cancellation not allowed');
+        }
+
+        throw BookingError.serverError(data.message || 'Failed to cancel booking');
+      }
+
+      const result = await response.json();
+      return result.data;
+    } catch (error) {
+      if (error instanceof BookingError) throw error;
+      throw BookingError.networkError('Network error while cancelling booking');
+    }
+  }
+}
+
+/**
+ * Response from /booking/{slot_id}/can-cancel
+ */
+export interface CanCancelResponse {
+  can_cancel: boolean;
+  reason: string | null;
+  requires_transfer: boolean;
+  refund_eligible: boolean;
+}
+
+/**
+ * Response from /booking/{slot_id}/cancel
+ */
+export interface CancelBookingResponse {
+  cancelled: boolean;
+  refund_amount?: number;
+  refund_issued?: boolean;
+  booking_id?: string;
 }