diff --git a/src/app/[locale]/admin/clubs/[club_id]/ClubDetailTabs.tsx b/src/app/[locale]/admin/clubs/[club_id]/ClubDetailTabs.tsx index 0f808aa..785d2b1 100644 --- a/src/app/[locale]/admin/clubs/[club_id]/ClubDetailTabs.tsx +++ b/src/app/[locale]/admin/clubs/[club_id]/ClubDetailTabs.tsx @@ -1,252 +1,11 @@ 'use client'; -import { useState, useEffect } from 'react'; -import { ArrowLeft, Loader2, AlertCircle, Lock } from 'lucide-react'; -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 ClubProfileTab from './tabs/ClubProfileTab'; -import ClubCourtsTab from './tabs/ClubCourtsTab'; interface ClubDetailTabsProps { clubId: number; } -type TabKey = 'profile' | 'courts' | 'slot-definitions'; - export default function ClubDetailTabs({ clubId }: ClubDetailTabsProps) { - const { t, locale } = useTranslation(); - const [clubDetail, setClubDetail] = useState(null); - const [error, setError] = useState(null); - const [loading, setLoading] = useState(true); - const [activeTab, setActiveTab] = useState('profile'); - - useEffect(() => { - loadClubDetail(); - }, [clubId]); - - async function loadClubDetail() { - setLoading(true); - const result = await getAdminClubDetail(clubId); - - if (result.success) { - setClubDetail(result.data); - setError(null); - } else { - setError(result.error); - setClubDetail(null); - } - - setLoading(false); - } - - // Loading state - if (loading) { - return ( -
-
- -

Loading club details...

-
-
- ); - } - - // Authentication error (401) - if (error && error.status === 401) { - return ( -
-
-
-
- -
-

- Authentication Required -

-

- Please log in to access the venue management portal. -

-
-
-
-
-
- ); - } - - // Forbidden error (403) - if (error && error.status === 403) { - return ( -
-
-
-
- -
-

- Access Denied -

-

- {error.detail} -

- - - Back to clubs - -
-
-
-
-
- ); - } - - // Other API errors - if (error) { - return ( -
-
-
-
- -
-

- Error Loading Club -

-

- {error.detail} -

-

- Error code: {error.code} -

- - - Back to clubs - -
-
-
-
-
- ); - } - - if (!clubDetail) { - return null; - } - - // Success - render tabbed interface - return ( -
- {/* Breadcrumb */} -
- - - Back to clubs - -
- - {/* Club Header */} -
-

- {clubDetail.facility.name} -

-

- {clubDetail.facility.timezone} -

-
- - {/* Tab Navigation */} -
-
- - - - Slot Definitions - - - Slot Instances - - - Plans - - - Members - - - Settings - - - Credits - - - Transfers - -
-
- - {/* Tab Content */} - {activeTab === 'profile' && ( - - )} - - {activeTab === 'courts' && ( - - )} -
- ); + return ; } diff --git a/src/app/[locale]/admin/clubs/[club_id]/courts/CourtsComponent.tsx b/src/app/[locale]/admin/clubs/[club_id]/courts/CourtsComponent.tsx new file mode 100644 index 0000000..864ad6a --- /dev/null +++ b/src/app/[locale]/admin/clubs/[club_id]/courts/CourtsComponent.tsx @@ -0,0 +1,47 @@ +'use client'; + +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'; + +interface CourtsComponentProps { + clubId: number; +} + +export default function CourtsComponent({ clubId }: CourtsComponentProps) { + const [courts, setCourts] = useState([]); + const [loading, setLoading] = useState(true); + + useEffect(() => { + loadCourts(); + }, [clubId]); + + async function loadCourts() { + setLoading(true); + const result = await getAdminClubDetail(clubId); + + if (result.success) { + setCourts(result.data.courts); + } + + setLoading(false); + } + + if (loading) { + return ( +
+ +
+ ); + } + + return ( + + ); +} diff --git a/src/app/[locale]/admin/clubs/[club_id]/courts/page.tsx b/src/app/[locale]/admin/clubs/[club_id]/courts/page.tsx new file mode 100644 index 0000000..c30e8f4 --- /dev/null +++ b/src/app/[locale]/admin/clubs/[club_id]/courts/page.tsx @@ -0,0 +1,12 @@ +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 ; +} diff --git a/src/app/[locale]/admin/clubs/[club_id]/credits/CreditsManagementComponent.tsx b/src/app/[locale]/admin/clubs/[club_id]/credits/CreditsManagementComponent.tsx index ef58239..be78d72 100644 --- a/src/app/[locale]/admin/clubs/[club_id]/credits/CreditsManagementComponent.tsx +++ b/src/app/[locale]/admin/clubs/[club_id]/credits/CreditsManagementComponent.tsx @@ -1,11 +1,9 @@ 'use client'; import { useState, useEffect } from 'react'; -import { ArrowLeft, Loader2, Wallet, Search, ChevronRight } from 'lucide-react'; -import Link from 'next/link'; +import { Loader2, Wallet, Search, ChevronRight } from 'lucide-react'; import { listMemberCredits } from '@/src/lib/api/facility-admin'; import type { MemberCreditBalance } from '@/src/types/facility-admin'; -import useTranslation from '@/src/hooks/useTranslation'; import CreditDetailModal from './CreditDetailModal'; interface CreditsManagementComponentProps { @@ -13,7 +11,6 @@ interface CreditsManagementComponentProps { } export default function CreditsManagementComponent({ clubId }: CreditsManagementComponentProps) { - const { locale } = useTranslation(); const [credits, setCredits] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); @@ -57,20 +54,13 @@ export default function CreditsManagementComponent({ clubId }: CreditsManagement const totalBalance = credits.reduce((sum, c) => sum + c.balance_cents, 0); return ( -
+
{/* Header */}
- - - Back to Club -
-

Member Credits

-

View and manage member credit balances

+

Member Credits

+

View and manage member credit balances

@@ -90,21 +80,21 @@ export default function CreditsManagementComponent({ clubId }: CreditsManagement {/* Filters */}
- + setSearchQuery(e.target.value)} - className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500" + className="w-full pl-10 pr-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-slate-500" />
-