feat(admin): add court management UI with Profile/Courts tabs (Phase 2)
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
Phase 2 implementation per Chief Cole approval (Chief_Cole-20251107103829) Club Detail Page Restructure: - Replaced single-view club detail with tabbed interface - Three tabs: Profile, Courts, Slot Definitions (links to existing page) - Tab navigation with active state highlighting - Breadcrumb navigation maintained Profile Tab (ClubProfileTab): - Full club metadata editing form with sections: - Basic Information: name (required), timezone (required, IANA dropdown) - Location: address line 1/2, city, postal code, country (all optional) - Contact: phone, email (validated), website (validated) (all optional) - Integration: provider, remote club ID (read-only for Phase 2) - Client-side validation: required fields, email format, URL format - Server-side validation: maps backend errors to fields - Success/error messaging with auto-hide success toast - Cancel button resets form to original values - Professional slate theme form styling Courts Tab (ClubCourtsTab): - Court list view with empty state - Add/edit/delete actions per court - Add Court modal: single field (name), duplicate name validation - Edit Court modal: pre-populated, same validation - Delete with cascade blocking: - Dependency check before delete (slot definitions, upcoming bookings) - Blocking modal shows dependency counts with resolution steps - Confirmation modal for clean delete (no dependencies) - In-memory mock data management (3 courts default) - Court 1 has mock dependencies (12 slot defs, 45 bookings) for testing Modal Components: - CourtFormModal: Add/edit with field-level validation - DeleteConfirmationModal: Confirm before deletion - DependenciesBlockingModal: Shows why delete is blocked + resolution steps All components use professional slate theme All modals use backdrop blur + center positioning All forms have loading states + error handling Build tested and passed (npm run build successful) Total new lines: ~1400 across 3 components Ready for mock-driven testing while Backend Brooke builds APIsmaster
Guillermo Pages
1 month ago
parent
251b849500
commit
9a9c3a3b95
@ -0,0 +1,212 @@
|
|||||||
|
'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<AdminClubDetail | null>(null);
|
||||||
|
const [error, setError] = useState<AdminApiError | null>(null);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [activeTab, setActiveTab] = useState<TabKey>('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 (
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Authentication error (401)
|
||||||
|
if (error && error.status === 401) {
|
||||||
|
return (
|
||||||
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
|
||||||
|
<div className="max-w-2xl mx-auto">
|
||||||
|
<div className="bg-amber-50 border-2 border-amber-200 rounded-2xl p-8">
|
||||||
|
<div className="flex items-start space-x-4">
|
||||||
|
<Lock className="w-8 h-8 text-amber-700 flex-shrink-0 mt-1" />
|
||||||
|
<div>
|
||||||
|
<h2 className="text-2xl font-bold text-slate-900 mb-4">
|
||||||
|
Authentication Required
|
||||||
|
</h2>
|
||||||
|
<p className="text-slate-700 leading-relaxed">
|
||||||
|
Please log in to access the venue management portal.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Forbidden error (403)
|
||||||
|
if (error && error.status === 403) {
|
||||||
|
return (
|
||||||
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
|
||||||
|
<div className="max-w-2xl mx-auto">
|
||||||
|
<div className="bg-red-50 border-2 border-red-200 rounded-2xl p-8">
|
||||||
|
<div className="flex items-start space-x-4">
|
||||||
|
<Lock className="w-8 h-8 text-red-600 flex-shrink-0 mt-1" />
|
||||||
|
<div>
|
||||||
|
<h2 className="text-2xl font-bold text-slate-900 mb-4">
|
||||||
|
Access Denied
|
||||||
|
</h2>
|
||||||
|
<p className="text-slate-700 mb-6 leading-relaxed">
|
||||||
|
{error.detail}
|
||||||
|
</p>
|
||||||
|
<Link
|
||||||
|
href={`/${locale}/admin/clubs`}
|
||||||
|
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
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Other API errors
|
||||||
|
if (error) {
|
||||||
|
return (
|
||||||
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
|
||||||
|
<div className="max-w-2xl mx-auto">
|
||||||
|
<div className="bg-red-50 border-2 border-red-200 rounded-2xl p-8">
|
||||||
|
<div className="flex items-start space-x-4">
|
||||||
|
<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
|
||||||
|
</h2>
|
||||||
|
<p className="text-slate-700 mb-4 leading-relaxed">
|
||||||
|
{error.detail}
|
||||||
|
</p>
|
||||||
|
<p className="text-sm text-slate-600 font-mono mb-6">
|
||||||
|
Error code: {error.code}
|
||||||
|
</p>
|
||||||
|
<Link
|
||||||
|
href={`/${locale}/admin/clubs`}
|
||||||
|
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
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!clubDetail) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Success - render tabbed interface
|
||||||
|
return (
|
||||||
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
||||||
|
{/* Breadcrumb */}
|
||||||
|
<div className="mb-8">
|
||||||
|
<Link
|
||||||
|
href={`/${locale}/admin/clubs`}
|
||||||
|
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
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Club Header */}
|
||||||
|
<div className="mb-8">
|
||||||
|
<h1 className="text-4xl font-bold text-slate-900 mb-2 tracking-tight">
|
||||||
|
{clubDetail.club.name}
|
||||||
|
</h1>
|
||||||
|
<p className="text-lg text-slate-600 font-light">
|
||||||
|
{clubDetail.club.timezone}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Tab Navigation */}
|
||||||
|
<div className="border-b-2 border-slate-200 mb-8">
|
||||||
|
<div className="flex space-x-1">
|
||||||
|
<button
|
||||||
|
onClick={() => setActiveTab('profile')}
|
||||||
|
className={`px-6 py-3 font-semibold transition-colors border-b-2 ${
|
||||||
|
activeTab === 'profile'
|
||||||
|
? 'border-slate-900 text-slate-900'
|
||||||
|
: 'border-transparent text-slate-600 hover:text-slate-900 hover:border-slate-300'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
Profile
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => setActiveTab('courts')}
|
||||||
|
className={`px-6 py-3 font-semibold transition-colors border-b-2 ${
|
||||||
|
activeTab === 'courts'
|
||||||
|
? 'border-slate-900 text-slate-900'
|
||||||
|
: 'border-transparent text-slate-600 hover:text-slate-900 hover:border-slate-300'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
Courts
|
||||||
|
</button>
|
||||||
|
<Link
|
||||||
|
href={`/${locale}/admin/clubs/${clubId}/slot-definitions`}
|
||||||
|
className="px-6 py-3 font-semibold text-slate-600 hover:text-slate-900 hover:border-slate-300 transition-colors border-b-2 border-transparent"
|
||||||
|
>
|
||||||
|
Slot Definitions
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Tab Content */}
|
||||||
|
{activeTab === 'profile' && (
|
||||||
|
<ClubProfileTab clubId={clubId} onUpdate={loadClubDetail} />
|
||||||
|
)}
|
||||||
|
|
||||||
|
{activeTab === 'courts' && (
|
||||||
|
<ClubCourtsTab clubId={clubId} />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,535 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
import { Loader2, AlertCircle, Plus, Edit, Trash2, AlertTriangle, X } from 'lucide-react';
|
||||||
|
import {
|
||||||
|
getCourts,
|
||||||
|
createCourt,
|
||||||
|
updateCourt,
|
||||||
|
deleteCourt,
|
||||||
|
getCourtDependencies,
|
||||||
|
} from '@/src/lib/api/courts';
|
||||||
|
import type { Court, CourtRequest, CourtDependencies } from '@/src/types/courts';
|
||||||
|
import { formatTimestamp } from '@/src/types/courts';
|
||||||
|
|
||||||
|
interface ClubCourtsTabProps {
|
||||||
|
clubId: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function ClubCourtsTab({ clubId }: ClubCourtsTabProps) {
|
||||||
|
const [courts, setCourts] = useState<Court[]>([]);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
|
||||||
|
// Modal state
|
||||||
|
const [showAddModal, setShowAddModal] = useState(false);
|
||||||
|
const [showEditModal, setShowEditModal] = useState(false);
|
||||||
|
const [showDeleteModal, setShowDeleteModal] = useState(false);
|
||||||
|
const [showDependenciesModal, setShowDependenciesModal] = useState(false);
|
||||||
|
|
||||||
|
const [selectedCourt, setSelectedCourt] = useState<Court | null>(null);
|
||||||
|
const [dependencies, setDependencies] = useState<CourtDependencies | null>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
loadCourts();
|
||||||
|
}, [clubId]);
|
||||||
|
|
||||||
|
async function loadCourts() {
|
||||||
|
setLoading(true);
|
||||||
|
const result = await getCourts(clubId);
|
||||||
|
|
||||||
|
if (result.success) {
|
||||||
|
setCourts(result.data);
|
||||||
|
setError(null);
|
||||||
|
} else {
|
||||||
|
setError(result.error.detail);
|
||||||
|
}
|
||||||
|
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleAdd() {
|
||||||
|
setShowAddModal(true);
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleEdit(court: Court) {
|
||||||
|
setSelectedCourt(court);
|
||||||
|
setShowEditModal(true);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleDeleteClick(court: Court) {
|
||||||
|
setSelectedCourt(court);
|
||||||
|
|
||||||
|
// Check dependencies first
|
||||||
|
const result = await getCourtDependencies(clubId, court.court_id);
|
||||||
|
|
||||||
|
if (result.success) {
|
||||||
|
setDependencies(result.data);
|
||||||
|
|
||||||
|
if (result.data.can_delete) {
|
||||||
|
// No dependencies, show delete confirmation
|
||||||
|
setShowDeleteModal(true);
|
||||||
|
} else {
|
||||||
|
// Has dependencies, show blocking modal
|
||||||
|
setShowDependenciesModal(true);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
setError(result.error.detail);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeModals() {
|
||||||
|
setShowAddModal(false);
|
||||||
|
setShowEditModal(false);
|
||||||
|
setShowDeleteModal(false);
|
||||||
|
setShowDependenciesModal(false);
|
||||||
|
setSelectedCourt(null);
|
||||||
|
setDependencies(null);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleSuccess() {
|
||||||
|
await loadCourts();
|
||||||
|
closeModals();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Loading state
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<div className="flex items-center justify-center py-20">
|
||||||
|
<Loader2 className="w-8 h-8 text-slate-600 animate-spin" />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Error state
|
||||||
|
if (error && courts.length === 0) {
|
||||||
|
return (
|
||||||
|
<div className="bg-red-50 border-2 border-red-200 rounded-2xl p-6">
|
||||||
|
<div className="flex items-start space-x-3">
|
||||||
|
<AlertCircle className="w-5 h-5 text-red-600 flex-shrink-0 mt-0.5" />
|
||||||
|
<p className="text-red-700">{error}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
{/* Header with Add button */}
|
||||||
|
<div className="flex items-center justify-between mb-6">
|
||||||
|
<div>
|
||||||
|
<h2 className="text-2xl font-bold text-slate-900">Courts</h2>
|
||||||
|
<p className="text-slate-600">Manage court inventory for this club</p>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
onClick={handleAdd}
|
||||||
|
className="inline-flex items-center px-6 py-3 bg-slate-900 text-white font-semibold rounded-lg hover:bg-slate-800 transition-colors"
|
||||||
|
>
|
||||||
|
<Plus className="w-5 h-5 mr-2" />
|
||||||
|
Add Court
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Empty state */}
|
||||||
|
{courts.length === 0 ? (
|
||||||
|
<div className="bg-slate-50 border-2 border-slate-200 rounded-2xl p-12">
|
||||||
|
<div className="flex flex-col items-center text-center space-y-6">
|
||||||
|
<div className="text-6xl">🎾</div>
|
||||||
|
<h3 className="text-2xl font-bold text-slate-900">
|
||||||
|
No Courts Yet
|
||||||
|
</h3>
|
||||||
|
<p className="text-slate-600 max-w-md leading-relaxed">
|
||||||
|
Add your first court to start managing slot definitions and bookings for this club.
|
||||||
|
</p>
|
||||||
|
<button
|
||||||
|
onClick={handleAdd}
|
||||||
|
className="inline-flex items-center px-6 py-3 bg-slate-900 text-white font-semibold rounded-lg hover:bg-slate-800 transition-colors"
|
||||||
|
>
|
||||||
|
<Plus className="w-5 h-5 mr-2" />
|
||||||
|
Add First Court
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
/* Court list */
|
||||||
|
<div className="space-y-4">
|
||||||
|
{courts.map((court) => (
|
||||||
|
<div
|
||||||
|
key={court.court_id}
|
||||||
|
className="bg-white border-2 border-slate-200 rounded-2xl p-6 hover:border-slate-300 transition-colors"
|
||||||
|
>
|
||||||
|
<div className="flex items-start justify-between">
|
||||||
|
<div className="flex-1">
|
||||||
|
<h3 className="text-xl font-bold text-slate-900 mb-2">
|
||||||
|
{court.name}
|
||||||
|
</h3>
|
||||||
|
<p className="text-sm text-slate-600">
|
||||||
|
ID: {court.court_id} · Created {formatTimestamp(court.created_at)}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<button
|
||||||
|
onClick={() => handleEdit(court)}
|
||||||
|
className="p-2 text-slate-600 hover:text-slate-900 hover:bg-slate-100 rounded-lg transition-colors"
|
||||||
|
title="Edit"
|
||||||
|
>
|
||||||
|
<Edit className="w-5 h-5" />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => handleDeleteClick(court)}
|
||||||
|
className="p-2 text-red-600 hover:text-red-700 hover:bg-red-50 rounded-lg transition-colors"
|
||||||
|
title="Delete"
|
||||||
|
>
|
||||||
|
<Trash2 className="w-5 h-5" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Add Modal */}
|
||||||
|
{showAddModal && (
|
||||||
|
<CourtFormModal
|
||||||
|
clubId={clubId}
|
||||||
|
onClose={closeModals}
|
||||||
|
onSuccess={handleSuccess}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Edit Modal */}
|
||||||
|
{showEditModal && selectedCourt && (
|
||||||
|
<CourtFormModal
|
||||||
|
clubId={clubId}
|
||||||
|
court={selectedCourt}
|
||||||
|
onClose={closeModals}
|
||||||
|
onSuccess={handleSuccess}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Delete Confirmation Modal */}
|
||||||
|
{showDeleteModal && selectedCourt && (
|
||||||
|
<DeleteConfirmationModal
|
||||||
|
clubId={clubId}
|
||||||
|
court={selectedCourt}
|
||||||
|
onClose={closeModals}
|
||||||
|
onSuccess={handleSuccess}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Dependencies Blocking Modal */}
|
||||||
|
{showDependenciesModal && selectedCourt && dependencies && (
|
||||||
|
<DependenciesBlockingModal
|
||||||
|
court={selectedCourt}
|
||||||
|
dependencies={dependencies}
|
||||||
|
onClose={closeModals}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Court Form Modal (Add/Edit)
|
||||||
|
*/
|
||||||
|
interface CourtFormModalProps {
|
||||||
|
clubId: number;
|
||||||
|
court?: Court;
|
||||||
|
onClose: () => void;
|
||||||
|
onSuccess: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
function CourtFormModal({ clubId, court, onClose, onSuccess }: CourtFormModalProps) {
|
||||||
|
const isEditing = !!court;
|
||||||
|
const [name, setName] = useState(court?.name || '');
|
||||||
|
const [saving, setSaving] = useState(false);
|
||||||
|
const [error, setError] = useState('');
|
||||||
|
const [fieldError, setFieldError] = useState('');
|
||||||
|
|
||||||
|
async function handleSubmit(e: React.FormEvent) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
if (!name || name.trim().length === 0) {
|
||||||
|
setFieldError('Court name is required');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setSaving(true);
|
||||||
|
setError('');
|
||||||
|
setFieldError('');
|
||||||
|
|
||||||
|
const request: CourtRequest = {
|
||||||
|
name: name.trim(),
|
||||||
|
};
|
||||||
|
|
||||||
|
const result = isEditing
|
||||||
|
? await updateCourt(clubId, court!.court_id, request)
|
||||||
|
: await createCourt(clubId, request);
|
||||||
|
|
||||||
|
if (result.success) {
|
||||||
|
onSuccess();
|
||||||
|
} else {
|
||||||
|
if (result.error.code === 'validation_error' && result.error.errors) {
|
||||||
|
const nameError = result.error.errors.find(e => e.field === 'name');
|
||||||
|
if (nameError) {
|
||||||
|
setFieldError(nameError.message);
|
||||||
|
}
|
||||||
|
} else if (result.error.code === 'duplicate_court_name') {
|
||||||
|
setFieldError(result.error.detail);
|
||||||
|
} else {
|
||||||
|
setError(result.error.detail);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
setSaving(false);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center p-4">
|
||||||
|
<div className="bg-white rounded-2xl p-8 max-w-md w-full">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="flex items-center justify-between mb-6">
|
||||||
|
<h2 className="text-2xl font-bold text-slate-900">
|
||||||
|
{isEditing ? 'Edit Court' : 'Add Court'}
|
||||||
|
</h2>
|
||||||
|
<button
|
||||||
|
onClick={onClose}
|
||||||
|
className="p-2 hover:bg-slate-100 rounded-lg transition-colors"
|
||||||
|
disabled={saving}
|
||||||
|
>
|
||||||
|
<X className="w-5 h-5 text-slate-600" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Error */}
|
||||||
|
{error && (
|
||||||
|
<div className="mb-6 bg-red-50 border border-red-200 rounded-lg p-4">
|
||||||
|
<div className="flex items-start space-x-3">
|
||||||
|
<AlertCircle className="w-5 h-5 text-red-600 flex-shrink-0 mt-0.5" />
|
||||||
|
<p className="text-sm text-red-700">{error}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Form */}
|
||||||
|
<form onSubmit={handleSubmit} className="space-y-6">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-semibold text-slate-900 mb-2">
|
||||||
|
Court Name <span className="text-red-600">*</span>
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={name}
|
||||||
|
onChange={(e) => setName(e.target.value)}
|
||||||
|
placeholder='e.g., "Court 1", "North Court", "VIP Court"'
|
||||||
|
maxLength={100}
|
||||||
|
className={`w-full px-4 py-3 border-2 rounded-lg font-medium transition-colors ${
|
||||||
|
fieldError
|
||||||
|
? 'border-red-300 focus:border-red-500'
|
||||||
|
: 'border-slate-200 focus:border-slate-900'
|
||||||
|
} focus:outline-none`}
|
||||||
|
disabled={saving}
|
||||||
|
autoFocus
|
||||||
|
/>
|
||||||
|
{fieldError && (
|
||||||
|
<p className="mt-1 text-sm text-red-600">{fieldError}</p>
|
||||||
|
)}
|
||||||
|
<p className="mt-2 text-xs text-slate-500">
|
||||||
|
Examples: "Court 1", "North Court", "VIP Court"
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Actions */}
|
||||||
|
<div className="flex items-center justify-end space-x-3 pt-4 border-t-2 border-slate-100">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={onClose}
|
||||||
|
className="px-6 py-3 text-slate-700 font-semibold rounded-lg hover:bg-slate-100 transition-colors"
|
||||||
|
disabled={saving}
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
className="inline-flex items-center px-6 py-3 bg-slate-900 text-white font-semibold rounded-lg hover:bg-slate-800 transition-colors disabled:opacity-50"
|
||||||
|
disabled={saving}
|
||||||
|
>
|
||||||
|
{saving && <Loader2 className="w-4 h-4 mr-2 animate-spin" />}
|
||||||
|
{isEditing ? 'Save' : 'Add'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Delete Confirmation Modal
|
||||||
|
*/
|
||||||
|
interface DeleteConfirmationModalProps {
|
||||||
|
clubId: number;
|
||||||
|
court: Court;
|
||||||
|
onClose: () => void;
|
||||||
|
onSuccess: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
function DeleteConfirmationModal({ clubId, court, onClose, onSuccess }: DeleteConfirmationModalProps) {
|
||||||
|
const [deleting, setDeleting] = useState(false);
|
||||||
|
const [error, setError] = useState('');
|
||||||
|
|
||||||
|
async function handleDelete() {
|
||||||
|
setDeleting(true);
|
||||||
|
setError('');
|
||||||
|
|
||||||
|
const result = await deleteCourt(clubId, court.court_id);
|
||||||
|
|
||||||
|
if (result.success) {
|
||||||
|
onSuccess();
|
||||||
|
} else {
|
||||||
|
setError(result.error.detail);
|
||||||
|
}
|
||||||
|
|
||||||
|
setDeleting(false);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center p-4">
|
||||||
|
<div className="bg-white rounded-2xl p-8 max-w-md w-full">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="flex items-center justify-between mb-6">
|
||||||
|
<h2 className="text-2xl font-bold text-slate-900">Delete Court?</h2>
|
||||||
|
<button
|
||||||
|
onClick={onClose}
|
||||||
|
className="p-2 hover:bg-slate-100 rounded-lg transition-colors"
|
||||||
|
disabled={deleting}
|
||||||
|
>
|
||||||
|
<X className="w-5 h-5 text-slate-600" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Error */}
|
||||||
|
{error && (
|
||||||
|
<div className="mb-6 bg-red-50 border border-red-200 rounded-lg p-4">
|
||||||
|
<div className="flex items-start space-x-3">
|
||||||
|
<AlertCircle className="w-5 h-5 text-red-600 flex-shrink-0 mt-0.5" />
|
||||||
|
<p className="text-sm text-red-700">{error}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Content */}
|
||||||
|
<div className="mb-6">
|
||||||
|
<p className="text-slate-700 leading-relaxed">
|
||||||
|
Are you sure you want to delete <strong>"{court.name}"</strong>?
|
||||||
|
</p>
|
||||||
|
<p className="text-slate-600 mt-2">
|
||||||
|
This action cannot be undone.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Actions */}
|
||||||
|
<div className="flex items-center justify-end space-x-3">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={onClose}
|
||||||
|
className="px-6 py-3 text-slate-700 font-semibold rounded-lg hover:bg-slate-100 transition-colors"
|
||||||
|
disabled={deleting}
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={handleDelete}
|
||||||
|
className="inline-flex items-center px-6 py-3 bg-red-600 text-white font-semibold rounded-lg hover:bg-red-700 transition-colors disabled:opacity-50"
|
||||||
|
disabled={deleting}
|
||||||
|
>
|
||||||
|
{deleting && <Loader2 className="w-4 h-4 mr-2 animate-spin" />}
|
||||||
|
Delete
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Dependencies Blocking Modal
|
||||||
|
*/
|
||||||
|
interface DependenciesBlockingModalProps {
|
||||||
|
court: Court;
|
||||||
|
dependencies: CourtDependencies;
|
||||||
|
onClose: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
function DependenciesBlockingModal({ court, dependencies, onClose }: DependenciesBlockingModalProps) {
|
||||||
|
return (
|
||||||
|
<div className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center p-4">
|
||||||
|
<div className="bg-white rounded-2xl p-8 max-w-md w-full">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="flex items-center justify-between mb-6">
|
||||||
|
<div className="flex items-center space-x-3">
|
||||||
|
<AlertTriangle className="w-6 h-6 text-amber-600" />
|
||||||
|
<h2 className="text-2xl font-bold text-slate-900">Cannot Delete Court</h2>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
onClick={onClose}
|
||||||
|
className="p-2 hover:bg-slate-100 rounded-lg transition-colors"
|
||||||
|
>
|
||||||
|
<X className="w-5 h-5 text-slate-600" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Content */}
|
||||||
|
<div className="space-y-4">
|
||||||
|
<p className="text-slate-700 leading-relaxed">
|
||||||
|
Court <strong>"{court.name}"</strong> cannot be deleted because it is referenced by:
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="bg-amber-50 border border-amber-200 rounded-lg p-4 space-y-2">
|
||||||
|
{dependencies.dependencies.slot_definitions > 0 && (
|
||||||
|
<div className="flex justify-between items-center">
|
||||||
|
<span className="text-slate-700">Slot definitions:</span>
|
||||||
|
<span className="font-bold text-slate-900">
|
||||||
|
{dependencies.dependencies.slot_definitions}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{dependencies.dependencies.upcoming_bookings > 0 && (
|
||||||
|
<div className="flex justify-between items-center">
|
||||||
|
<span className="text-slate-700">Upcoming bookings:</span>
|
||||||
|
<span className="font-bold text-slate-900">
|
||||||
|
{dependencies.dependencies.upcoming_bookings}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="text-sm text-slate-600 leading-relaxed">
|
||||||
|
To delete this court, you must first:
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<ol className="list-decimal list-inside space-y-1 text-sm text-slate-700">
|
||||||
|
{dependencies.dependencies.slot_definitions > 0 && (
|
||||||
|
<li>Delete or reassign all slot definitions</li>
|
||||||
|
)}
|
||||||
|
{dependencies.dependencies.upcoming_bookings > 0 && (
|
||||||
|
<li>Cancel or move all upcoming bookings</li>
|
||||||
|
)}
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Actions */}
|
||||||
|
<div className="flex items-center justify-end space-x-3 pt-6 border-t-2 border-slate-100 mt-6">
|
||||||
|
<button
|
||||||
|
onClick={onClose}
|
||||||
|
className="px-6 py-3 bg-slate-900 text-white font-semibold rounded-lg hover:bg-slate-800 transition-colors"
|
||||||
|
>
|
||||||
|
Close
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,458 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
import { Loader2, AlertCircle, CheckCircle } from 'lucide-react';
|
||||||
|
import { getClubProfile, updateClubProfile } from '@/src/lib/api/courts';
|
||||||
|
import type { ClubProfile, ClubProfileUpdateRequest} from '@/src/types/courts';
|
||||||
|
import { COMMON_TIMEZONES, isValidEmail, isValidUrl } from '@/src/types/courts';
|
||||||
|
|
||||||
|
interface ClubProfileTabProps {
|
||||||
|
clubId: number;
|
||||||
|
onUpdate?: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function ClubProfileTab({ clubId, onUpdate }: ClubProfileTabProps) {
|
||||||
|
const [profile, setProfile] = useState<ClubProfile | null>(null);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [saving, setSaving] = useState(false);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
const [success, setSuccess] = useState(false);
|
||||||
|
const [errors, setErrors] = useState<Record<string, string>>({});
|
||||||
|
|
||||||
|
// Form state
|
||||||
|
const [name, setName] = useState('');
|
||||||
|
const [timezone, setTimezone] = useState('');
|
||||||
|
const [addressLine1, setAddressLine1] = useState('');
|
||||||
|
const [addressLine2, setAddressLine2] = useState('');
|
||||||
|
const [city, setCity] = useState('');
|
||||||
|
const [postalCode, setPostalCode] = useState('');
|
||||||
|
const [country, setCountry] = useState('');
|
||||||
|
const [phone, setPhone] = useState('');
|
||||||
|
const [email, setEmail] = useState('');
|
||||||
|
const [website, setWebsite] = useState('');
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
loadProfile();
|
||||||
|
}, [clubId]);
|
||||||
|
|
||||||
|
async function loadProfile() {
|
||||||
|
setLoading(true);
|
||||||
|
const result = await getClubProfile(clubId);
|
||||||
|
|
||||||
|
if (result.success) {
|
||||||
|
const prof = result.data;
|
||||||
|
setProfile(prof);
|
||||||
|
|
||||||
|
// Populate form
|
||||||
|
setName(prof.name);
|
||||||
|
setTimezone(prof.timezone);
|
||||||
|
setAddressLine1(prof.address_line_1 || '');
|
||||||
|
setAddressLine2(prof.address_line_2 || '');
|
||||||
|
setCity(prof.city || '');
|
||||||
|
setPostalCode(prof.postal_code || '');
|
||||||
|
setCountry(prof.country || '');
|
||||||
|
setPhone(prof.phone || '');
|
||||||
|
setEmail(prof.email || '');
|
||||||
|
setWebsite(prof.website || '');
|
||||||
|
|
||||||
|
setError(null);
|
||||||
|
} else {
|
||||||
|
setError(result.error.detail);
|
||||||
|
}
|
||||||
|
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
|
||||||
|
function validateForm(): boolean {
|
||||||
|
const newErrors: Record<string, string> = {};
|
||||||
|
|
||||||
|
if (!name || name.trim().length === 0) {
|
||||||
|
newErrors.name = 'Name is required';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!timezone) {
|
||||||
|
newErrors.timezone = 'Timezone is required';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (email && !isValidEmail(email)) {
|
||||||
|
newErrors.email = 'Invalid email format';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (website && !isValidUrl(website)) {
|
||||||
|
newErrors.website = 'Invalid URL format (must include http:// or https://)';
|
||||||
|
}
|
||||||
|
|
||||||
|
setErrors(newErrors);
|
||||||
|
return Object.keys(newErrors).length === 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleSubmit(e: React.FormEvent) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
if (!validateForm()) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setSaving(true);
|
||||||
|
setError(null);
|
||||||
|
setSuccess(false);
|
||||||
|
|
||||||
|
const request: ClubProfileUpdateRequest = {
|
||||||
|
name: name.trim(),
|
||||||
|
timezone,
|
||||||
|
address_line_1: addressLine1.trim() || undefined,
|
||||||
|
address_line_2: addressLine2.trim() || undefined,
|
||||||
|
city: city.trim() || undefined,
|
||||||
|
postal_code: postalCode.trim() || undefined,
|
||||||
|
country: country.trim() || undefined,
|
||||||
|
phone: phone.trim() || undefined,
|
||||||
|
email: email.trim() || undefined,
|
||||||
|
website: website.trim() || undefined,
|
||||||
|
};
|
||||||
|
|
||||||
|
const result = await updateClubProfile(clubId, request);
|
||||||
|
|
||||||
|
if (result.success) {
|
||||||
|
setProfile(result.data);
|
||||||
|
setSuccess(true);
|
||||||
|
setError(null);
|
||||||
|
|
||||||
|
// Call parent update callback
|
||||||
|
if (onUpdate) {
|
||||||
|
onUpdate();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Hide success message after 3 seconds
|
||||||
|
setTimeout(() => setSuccess(false), 3000);
|
||||||
|
} else {
|
||||||
|
// Handle validation errors
|
||||||
|
if (result.error.code === 'validation_error' && result.error.errors) {
|
||||||
|
const fieldErrors: Record<string, string> = {};
|
||||||
|
result.error.errors.forEach(err => {
|
||||||
|
fieldErrors[err.field] = err.message;
|
||||||
|
});
|
||||||
|
setErrors(fieldErrors);
|
||||||
|
} else {
|
||||||
|
setError(result.error.detail);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
setSaving(false);
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleCancel() {
|
||||||
|
if (!profile) return;
|
||||||
|
|
||||||
|
// Reset form to original values
|
||||||
|
setName(profile.name);
|
||||||
|
setTimezone(profile.timezone);
|
||||||
|
setAddressLine1(profile.address_line_1 || '');
|
||||||
|
setAddressLine2(profile.address_line_2 || '');
|
||||||
|
setCity(profile.city || '');
|
||||||
|
setPostalCode(profile.postal_code || '');
|
||||||
|
setCountry(profile.country || '');
|
||||||
|
setPhone(profile.phone || '');
|
||||||
|
setEmail(profile.email || '');
|
||||||
|
setWebsite(profile.website || '');
|
||||||
|
setErrors({});
|
||||||
|
setError(null);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Loading state
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<div className="flex items-center justify-center py-20">
|
||||||
|
<Loader2 className="w-8 h-8 text-slate-600 animate-spin" />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Error state
|
||||||
|
if (error && !profile) {
|
||||||
|
return (
|
||||||
|
<div className="bg-red-50 border-2 border-red-200 rounded-2xl p-6">
|
||||||
|
<div className="flex items-start space-x-3">
|
||||||
|
<AlertCircle className="w-5 h-5 text-red-600 flex-shrink-0 mt-0.5" />
|
||||||
|
<p className="text-red-700">{error}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!profile) return null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="max-w-4xl">
|
||||||
|
{/* Success message */}
|
||||||
|
{success && (
|
||||||
|
<div className="mb-6 bg-green-50 border-2 border-green-200 rounded-2xl p-6">
|
||||||
|
<div className="flex items-center space-x-3">
|
||||||
|
<CheckCircle className="w-5 h-5 text-green-600" />
|
||||||
|
<p className="text-green-700 font-medium">Profile updated successfully</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Error message */}
|
||||||
|
{error && (
|
||||||
|
<div className="mb-6 bg-red-50 border-2 border-red-200 rounded-2xl p-6">
|
||||||
|
<div className="flex items-start space-x-3">
|
||||||
|
<AlertCircle className="w-5 h-5 text-red-600 flex-shrink-0 mt-0.5" />
|
||||||
|
<p className="text-red-700">{error}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<form onSubmit={handleSubmit} className="space-y-8">
|
||||||
|
{/* Basic Information */}
|
||||||
|
<section className="bg-white border-2 border-slate-200 rounded-2xl p-6">
|
||||||
|
<h3 className="text-xl font-bold text-slate-900 mb-6">Basic Information</h3>
|
||||||
|
|
||||||
|
<div className="space-y-4">
|
||||||
|
{/* Name */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-semibold text-slate-900 mb-2">
|
||||||
|
Name <span className="text-red-600">*</span>
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={name}
|
||||||
|
onChange={(e) => setName(e.target.value)}
|
||||||
|
className={`w-full px-4 py-3 border-2 rounded-lg font-medium transition-colors ${
|
||||||
|
errors.name
|
||||||
|
? 'border-red-300 focus:border-red-500'
|
||||||
|
: 'border-slate-200 focus:border-slate-900'
|
||||||
|
} focus:outline-none`}
|
||||||
|
disabled={saving}
|
||||||
|
/>
|
||||||
|
{errors.name && (
|
||||||
|
<p className="mt-1 text-sm text-red-600">{errors.name}</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Timezone */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-semibold text-slate-900 mb-2">
|
||||||
|
Timezone <span className="text-red-600">*</span>
|
||||||
|
</label>
|
||||||
|
<select
|
||||||
|
value={timezone}
|
||||||
|
onChange={(e) => setTimezone(e.target.value)}
|
||||||
|
className={`w-full px-4 py-3 border-2 rounded-lg font-medium transition-colors ${
|
||||||
|
errors.timezone
|
||||||
|
? 'border-red-300 focus:border-red-500'
|
||||||
|
: 'border-slate-200 focus:border-slate-900'
|
||||||
|
} focus:outline-none`}
|
||||||
|
disabled={saving}
|
||||||
|
>
|
||||||
|
{COMMON_TIMEZONES.map((tz) => (
|
||||||
|
<option key={tz.value} value={tz.value}>
|
||||||
|
{tz.label}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
{errors.timezone && (
|
||||||
|
<p className="mt-1 text-sm text-red-600">{errors.timezone}</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Location */}
|
||||||
|
<section className="bg-white border-2 border-slate-200 rounded-2xl p-6">
|
||||||
|
<h3 className="text-xl font-bold text-slate-900 mb-6">Location</h3>
|
||||||
|
|
||||||
|
<div className="space-y-4">
|
||||||
|
{/* Address Line 1 */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-semibold text-slate-900 mb-2">
|
||||||
|
Address Line 1
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={addressLine1}
|
||||||
|
onChange={(e) => setAddressLine1(e.target.value)}
|
||||||
|
placeholder="123 High Street"
|
||||||
|
maxLength={200}
|
||||||
|
className="w-full px-4 py-3 border-2 border-slate-200 rounded-lg font-medium focus:border-slate-900 focus:outline-none transition-colors"
|
||||||
|
disabled={saving}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Address Line 2 */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-semibold text-slate-900 mb-2">
|
||||||
|
Address Line 2
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={addressLine2}
|
||||||
|
onChange={(e) => setAddressLine2(e.target.value)}
|
||||||
|
placeholder="Building A"
|
||||||
|
maxLength={200}
|
||||||
|
className="w-full px-4 py-3 border-2 border-slate-200 rounded-lg font-medium focus:border-slate-900 focus:outline-none transition-colors"
|
||||||
|
disabled={saving}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* City & Postal Code */}
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-semibold text-slate-900 mb-2">
|
||||||
|
City
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={city}
|
||||||
|
onChange={(e) => setCity(e.target.value)}
|
||||||
|
placeholder="London"
|
||||||
|
maxLength={100}
|
||||||
|
className="w-full px-4 py-3 border-2 border-slate-200 rounded-lg font-medium focus:border-slate-900 focus:outline-none transition-colors"
|
||||||
|
disabled={saving}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-semibold text-slate-900 mb-2">
|
||||||
|
Postal Code
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={postalCode}
|
||||||
|
onChange={(e) => setPostalCode(e.target.value)}
|
||||||
|
placeholder="SW1A 1AA"
|
||||||
|
maxLength={20}
|
||||||
|
className="w-full px-4 py-3 border-2 border-slate-200 rounded-lg font-medium focus:border-slate-900 focus:outline-none transition-colors"
|
||||||
|
disabled={saving}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Country */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-semibold text-slate-900 mb-2">
|
||||||
|
Country
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={country}
|
||||||
|
onChange={(e) => setCountry(e.target.value)}
|
||||||
|
placeholder="United Kingdom"
|
||||||
|
maxLength={100}
|
||||||
|
className="w-full px-4 py-3 border-2 border-slate-200 rounded-lg font-medium focus:border-slate-900 focus:outline-none transition-colors"
|
||||||
|
disabled={saving}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Contact */}
|
||||||
|
<section className="bg-white border-2 border-slate-200 rounded-2xl p-6">
|
||||||
|
<h3 className="text-xl font-bold text-slate-900 mb-6">Contact</h3>
|
||||||
|
|
||||||
|
<div className="space-y-4">
|
||||||
|
{/* Phone */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-semibold text-slate-900 mb-2">
|
||||||
|
Phone
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="tel"
|
||||||
|
value={phone}
|
||||||
|
onChange={(e) => setPhone(e.target.value)}
|
||||||
|
placeholder="+44 20 1234 5678"
|
||||||
|
maxLength={50}
|
||||||
|
className="w-full px-4 py-3 border-2 border-slate-200 rounded-lg font-medium focus:border-slate-900 focus:outline-none transition-colors"
|
||||||
|
disabled={saving}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Email */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-semibold text-slate-900 mb-2">
|
||||||
|
Email
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
value={email}
|
||||||
|
onChange={(e) => setEmail(e.target.value)}
|
||||||
|
placeholder="info@centralpadel.com"
|
||||||
|
maxLength={100}
|
||||||
|
className={`w-full px-4 py-3 border-2 rounded-lg font-medium transition-colors ${
|
||||||
|
errors.email
|
||||||
|
? 'border-red-300 focus:border-red-500'
|
||||||
|
: 'border-slate-200 focus:border-slate-900'
|
||||||
|
} focus:outline-none`}
|
||||||
|
disabled={saving}
|
||||||
|
/>
|
||||||
|
{errors.email && (
|
||||||
|
<p className="mt-1 text-sm text-red-600">{errors.email}</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Website */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-semibold text-slate-900 mb-2">
|
||||||
|
Website
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="url"
|
||||||
|
value={website}
|
||||||
|
onChange={(e) => setWebsite(e.target.value)}
|
||||||
|
placeholder="https://www.centralpadel.com"
|
||||||
|
maxLength={200}
|
||||||
|
className={`w-full px-4 py-3 border-2 rounded-lg font-medium transition-colors ${
|
||||||
|
errors.website
|
||||||
|
? 'border-red-300 focus:border-red-500'
|
||||||
|
: 'border-slate-200 focus:border-slate-900'
|
||||||
|
} focus:outline-none`}
|
||||||
|
disabled={saving}
|
||||||
|
/>
|
||||||
|
{errors.website && (
|
||||||
|
<p className="mt-1 text-sm text-red-600">{errors.website}</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Integration (read-only) */}
|
||||||
|
<section className="bg-slate-50 border-2 border-slate-200 rounded-2xl p-6">
|
||||||
|
<h3 className="text-xl font-bold text-slate-900 mb-6">Integration</h3>
|
||||||
|
|
||||||
|
<div className="space-y-3">
|
||||||
|
<div className="flex justify-between items-center">
|
||||||
|
<span className="text-slate-600 font-medium">Provider:</span>
|
||||||
|
<span className="font-semibold text-slate-900">{profile.provider}</span>
|
||||||
|
</div>
|
||||||
|
{profile.provider !== 'local' && profile.remote_club_id && (
|
||||||
|
<div className="flex justify-between items-center">
|
||||||
|
<span className="text-slate-600 font-medium">Remote Club ID:</span>
|
||||||
|
<span className="font-mono text-slate-900">{profile.remote_club_id}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Actions */}
|
||||||
|
<div className="flex items-center justify-end space-x-3 pt-4">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={handleCancel}
|
||||||
|
className="px-6 py-3 text-slate-700 font-semibold rounded-lg hover:bg-slate-100 transition-colors"
|
||||||
|
disabled={saving}
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
className="inline-flex items-center px-6 py-3 bg-slate-900 text-white font-semibold rounded-lg hover:bg-slate-800 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||||||
|
disabled={saving}
|
||||||
|
>
|
||||||
|
{saving && <Loader2 className="w-4 h-4 mr-2 animate-spin" />}
|
||||||
|
Save Changes
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue