feat: add facility admin management UI (plans, members, policy)
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
Implements Phase B1-B4 of the admin portal frontend: Phase B1 - Setup & Types: - Add TypeScript type definitions for all admin APIs - Add complete API client with all 15 endpoint integrations Phase B2 - Membership Plans UI: - Add plans listing page with create/edit/delete functionality - Add PlanCard, PlanFormModal, and PlanListSkeleton components - Support billing periods, pricing, and activation status Phase B3 - Member Management UI: - Add members listing page with search and filters - Add member CRUD modals with role/plan assignment - Add RoleBadge, StatusBadge, and MemberCard components - Support filtering by role and status Phase B4 - Policy Configuration UI: - Add facility settings page for policy management - Add AccessModelSelector for membership/payg/open models - Add GuestPricingInput and BookingLimitsForm components - Support configuring booking limits and access control All components follow existing design patterns with purple/indigo gradients, responsive layouts, and loading states.master
Guillermo Pages
3 weeks ago
parent
ff50bdfa2c
commit
5dd283525b
@ -0,0 +1,231 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
import { listMembers, deleteMember } from '@/src/lib/api/facility-admin';
|
||||||
|
import type { FacilityMember, MemberRole, MemberStatus } from '@/src/types/facility-admin';
|
||||||
|
import MemberCard from '@/src/components/members/MemberCard';
|
||||||
|
import AddMemberModal from '@/src/components/members/AddMemberModal';
|
||||||
|
import EditMemberModal from '@/src/components/members/EditMemberModal';
|
||||||
|
import MemberListSkeleton from '@/src/components/members/MemberListSkeleton';
|
||||||
|
|
||||||
|
interface MembersManagementComponentProps {
|
||||||
|
clubId: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function MembersManagementComponent({ clubId }: MembersManagementComponentProps) {
|
||||||
|
const [members, setMembers] = useState<FacilityMember[]>([]);
|
||||||
|
const [filteredMembers, setFilteredMembers] = useState<FacilityMember[]>([]);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
const [addModalOpen, setAddModalOpen] = useState(false);
|
||||||
|
const [editingMember, setEditingMember] = useState<FacilityMember | null>(null);
|
||||||
|
|
||||||
|
// Filters
|
||||||
|
const [searchQuery, setSearchQuery] = useState('');
|
||||||
|
const [roleFilter, setRoleFilter] = useState<MemberRole | ''>('');
|
||||||
|
const [statusFilter, setStatusFilter] = useState<MemberStatus | ''>('active');
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetchMembers();
|
||||||
|
}, [clubId]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
applyFilters();
|
||||||
|
}, [members, searchQuery, roleFilter, statusFilter]);
|
||||||
|
|
||||||
|
async function fetchMembers() {
|
||||||
|
setLoading(true);
|
||||||
|
setError(null);
|
||||||
|
|
||||||
|
const result = await listMembers(clubId);
|
||||||
|
|
||||||
|
if (result.success) {
|
||||||
|
setMembers(result.data);
|
||||||
|
} else {
|
||||||
|
setError(result.error.detail || 'Failed to load members');
|
||||||
|
}
|
||||||
|
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
|
||||||
|
function applyFilters() {
|
||||||
|
let filtered = [...members];
|
||||||
|
|
||||||
|
// Search filter (name or email)
|
||||||
|
if (searchQuery) {
|
||||||
|
const query = searchQuery.toLowerCase();
|
||||||
|
filtered = filtered.filter(
|
||||||
|
m =>
|
||||||
|
m.display_name.toLowerCase().includes(query) ||
|
||||||
|
m.email.toLowerCase().includes(query)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Role filter
|
||||||
|
if (roleFilter) {
|
||||||
|
filtered = filtered.filter(m => m.role === roleFilter);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Status filter
|
||||||
|
if (statusFilter) {
|
||||||
|
filtered = filtered.filter(m => m.status === statusFilter);
|
||||||
|
}
|
||||||
|
|
||||||
|
setFilteredMembers(filtered);
|
||||||
|
}
|
||||||
|
|
||||||
|
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);
|
||||||
|
|
||||||
|
if (result.success) {
|
||||||
|
fetchMembers();
|
||||||
|
} else {
|
||||||
|
alert(result.error.detail || 'Failed to remove member');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="container mx-auto px-4 py-8">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="flex justify-between items-center mb-6">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-3xl font-bold text-gray-800">Members</h1>
|
||||||
|
<p className="text-gray-600 mt-1">Manage facility members and their access</p>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
onClick={() => setAddModalOpen(true)}
|
||||||
|
className="bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-700 hover:to-indigo-700 text-white px-6 py-3 rounded-lg font-semibold shadow-md transition-all duration-200"
|
||||||
|
>
|
||||||
|
+ Add Member
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Error Message */}
|
||||||
|
{error && (
|
||||||
|
<div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg mb-6">
|
||||||
|
{error}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Filters */}
|
||||||
|
<div className="bg-white border border-gray-200 rounded-lg p-4 mb-6 shadow-sm">
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||||||
|
{/* Search */}
|
||||||
|
<div className="md:col-span-2">
|
||||||
|
<label htmlFor="search" className="block text-sm font-medium text-gray-700 mb-1">
|
||||||
|
Search
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="search"
|
||||||
|
value={searchQuery}
|
||||||
|
onChange={e => setSearchQuery(e.target.value)}
|
||||||
|
placeholder="Search by name or email..."
|
||||||
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Role Filter */}
|
||||||
|
<div>
|
||||||
|
<label htmlFor="role" className="block text-sm font-medium text-gray-700 mb-1">
|
||||||
|
Role
|
||||||
|
</label>
|
||||||
|
<select
|
||||||
|
id="role"
|
||||||
|
value={roleFilter}
|
||||||
|
onChange={e => setRoleFilter(e.target.value as MemberRole | '')}
|
||||||
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent"
|
||||||
|
>
|
||||||
|
<option value="">All Roles</option>
|
||||||
|
<option value="guest">Guest</option>
|
||||||
|
<option value="member">Member</option>
|
||||||
|
<option value="staff">Staff</option>
|
||||||
|
<option value="admin">Admin</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Status Filter */}
|
||||||
|
<div>
|
||||||
|
<label htmlFor="status" className="block text-sm font-medium text-gray-700 mb-1">
|
||||||
|
Status
|
||||||
|
</label>
|
||||||
|
<select
|
||||||
|
id="status"
|
||||||
|
value={statusFilter}
|
||||||
|
onChange={e => setStatusFilter(e.target.value as MemberStatus | '')}
|
||||||
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent"
|
||||||
|
>
|
||||||
|
<option value="">All Statuses</option>
|
||||||
|
<option value="active">Active</option>
|
||||||
|
<option value="trial">Trial</option>
|
||||||
|
<option value="grace">Grace Period</option>
|
||||||
|
<option value="past_due">Past Due</option>
|
||||||
|
<option value="expired">Expired</option>
|
||||||
|
<option value="cancelled">Cancelled</option>
|
||||||
|
<option value="paused">Paused</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Members List */}
|
||||||
|
{loading ? (
|
||||||
|
<MemberListSkeleton count={5} />
|
||||||
|
) : filteredMembers.length === 0 ? (
|
||||||
|
<div className="text-center py-16">
|
||||||
|
<div className="text-6xl mb-4">👥</div>
|
||||||
|
<h2 className="text-2xl font-semibold text-gray-700 mb-2">
|
||||||
|
{searchQuery || roleFilter ? 'No members found' : 'No members yet'}
|
||||||
|
</h2>
|
||||||
|
<p className="text-gray-500 mb-6">
|
||||||
|
{searchQuery || roleFilter
|
||||||
|
? 'Try adjusting your filters'
|
||||||
|
: 'Add your first member to get started'}
|
||||||
|
</p>
|
||||||
|
{!searchQuery && !roleFilter && (
|
||||||
|
<button
|
||||||
|
onClick={() => setAddModalOpen(true)}
|
||||||
|
className="bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-700 hover:to-indigo-700 text-white px-6 py-3 rounded-lg font-semibold shadow-md transition-all duration-200"
|
||||||
|
>
|
||||||
|
+ Add Your First Member
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="space-y-4">
|
||||||
|
{filteredMembers.map(member => (
|
||||||
|
<MemberCard
|
||||||
|
key={member.facility_member_id}
|
||||||
|
member={member}
|
||||||
|
onEdit={() => setEditingMember(member)}
|
||||||
|
onDelete={() => handleDelete(member.facility_member_id, member.display_name)}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Add Modal */}
|
||||||
|
{addModalOpen && (
|
||||||
|
<AddMemberModal
|
||||||
|
isOpen={addModalOpen}
|
||||||
|
onClose={() => setAddModalOpen(false)}
|
||||||
|
facilityId={clubId}
|
||||||
|
onSuccess={fetchMembers}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Edit Modal */}
|
||||||
|
{editingMember && (
|
||||||
|
<EditMemberModal
|
||||||
|
isOpen={!!editingMember}
|
||||||
|
onClose={() => setEditingMember(null)}
|
||||||
|
facilityId={clubId}
|
||||||
|
member={editingMember}
|
||||||
|
onSuccess={fetchMembers}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
import AdminAuthGuard from '@/src/components/AdminAuthGuard';
|
||||||
|
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 (
|
||||||
|
<AdminAuthGuard>
|
||||||
|
<MembersManagementComponent clubId={clubId} />
|
||||||
|
</AdminAuthGuard>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,125 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
import { listPlans, deletePlan } from '@/src/lib/api/facility-admin';
|
||||||
|
import type { MembershipPlan } from '@/src/types/facility-admin';
|
||||||
|
import PlanCard from '@/src/components/plans/PlanCard';
|
||||||
|
import PlanFormModal from '@/src/components/plans/PlanFormModal';
|
||||||
|
import PlanListSkeleton from '@/src/components/plans/PlanListSkeleton';
|
||||||
|
|
||||||
|
interface MembershipPlansComponentProps {
|
||||||
|
clubId: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function MembershipPlansComponent({ clubId }: MembershipPlansComponentProps) {
|
||||||
|
const [plans, setPlans] = useState<MembershipPlan[]>([]);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
const [createModalOpen, setCreateModalOpen] = useState(false);
|
||||||
|
const [editingPlan, setEditingPlan] = useState<MembershipPlan | null>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetchPlans();
|
||||||
|
}, [clubId]);
|
||||||
|
|
||||||
|
async function fetchPlans() {
|
||||||
|
setLoading(true);
|
||||||
|
setError(null);
|
||||||
|
|
||||||
|
const result = await listPlans(clubId, { include_inactive: false });
|
||||||
|
|
||||||
|
if (result.success) {
|
||||||
|
setPlans(result.data);
|
||||||
|
} else {
|
||||||
|
setError(result.error.detail || 'Failed to load plans');
|
||||||
|
}
|
||||||
|
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleDelete(planId: number, planName: string) {
|
||||||
|
if (!confirm(`Are you sure you want to deactivate "${planName}"?`)) return;
|
||||||
|
|
||||||
|
const result = await deletePlan(clubId, planId);
|
||||||
|
|
||||||
|
if (result.success) {
|
||||||
|
fetchPlans();
|
||||||
|
} else {
|
||||||
|
alert(result.error.detail || 'Failed to delete plan');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="container mx-auto px-4 py-8">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="flex justify-between items-center mb-6">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-3xl font-bold text-gray-800">Membership Plans</h1>
|
||||||
|
<p className="text-gray-600 mt-1">Create and manage subscription plans for your facility</p>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
onClick={() => setCreateModalOpen(true)}
|
||||||
|
className="bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-700 hover:to-indigo-700 text-white px-6 py-3 rounded-lg font-semibold shadow-md transition-all duration-200"
|
||||||
|
>
|
||||||
|
+ Create Plan
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Error Message */}
|
||||||
|
{error && (
|
||||||
|
<div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg mb-6">
|
||||||
|
{error}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Plans Grid */}
|
||||||
|
{loading ? (
|
||||||
|
<PlanListSkeleton count={3} />
|
||||||
|
) : plans.length === 0 ? (
|
||||||
|
<div className="text-center py-16">
|
||||||
|
<div className="text-6xl mb-4">📋</div>
|
||||||
|
<h2 className="text-2xl font-semibold text-gray-700 mb-2">No membership plans yet</h2>
|
||||||
|
<p className="text-gray-500 mb-6">Create your first plan to get started</p>
|
||||||
|
<button
|
||||||
|
onClick={() => setCreateModalOpen(true)}
|
||||||
|
className="bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-700 hover:to-indigo-700 text-white px-6 py-3 rounded-lg font-semibold shadow-md transition-all duration-200"
|
||||||
|
>
|
||||||
|
+ Create Your First Plan
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||||
|
{plans.map(plan => (
|
||||||
|
<PlanCard
|
||||||
|
key={plan.facility_membership_plan_id}
|
||||||
|
plan={plan}
|
||||||
|
onEdit={() => setEditingPlan(plan)}
|
||||||
|
onDelete={() => handleDelete(plan.facility_membership_plan_id, plan.name)}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Create Modal */}
|
||||||
|
{createModalOpen && (
|
||||||
|
<PlanFormModal
|
||||||
|
isOpen={createModalOpen}
|
||||||
|
onClose={() => setCreateModalOpen(false)}
|
||||||
|
facilityId={clubId}
|
||||||
|
onSuccess={fetchPlans}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Edit Modal */}
|
||||||
|
{editingPlan && (
|
||||||
|
<PlanFormModal
|
||||||
|
isOpen={!!editingPlan}
|
||||||
|
onClose={() => setEditingPlan(null)}
|
||||||
|
facilityId={clubId}
|
||||||
|
plan={editingPlan}
|
||||||
|
onSuccess={fetchPlans}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
import AdminAuthGuard from '@/src/components/AdminAuthGuard';
|
||||||
|
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 (
|
||||||
|
<AdminAuthGuard>
|
||||||
|
<MembershipPlansComponent clubId={clubId} />
|
||||||
|
</AdminAuthGuard>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,160 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
import { getPolicy, updatePolicy } from '@/src/lib/api/facility-admin';
|
||||||
|
import type { FacilityPolicy, AccessModel } from '@/src/types/facility-admin';
|
||||||
|
import AccessModelSelector from '@/src/components/policy/AccessModelSelector';
|
||||||
|
import BookingLimitsForm from '@/src/components/policy/BookingLimitsForm';
|
||||||
|
import GuestPricingInput from '@/src/components/policy/GuestPricingInput';
|
||||||
|
|
||||||
|
interface FacilitySettingsComponentProps {
|
||||||
|
clubId: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function FacilitySettingsComponent({ clubId }: FacilitySettingsComponentProps) {
|
||||||
|
const [policy, setPolicy] = useState<FacilityPolicy | null>(null);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [saving, setSaving] = useState(false);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
const [successMessage, setSuccessMessage] = useState<string | null>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetchPolicy();
|
||||||
|
}, [clubId]);
|
||||||
|
|
||||||
|
async function fetchPolicy() {
|
||||||
|
setLoading(true);
|
||||||
|
setError(null);
|
||||||
|
|
||||||
|
const result = await getPolicy(clubId);
|
||||||
|
|
||||||
|
if (result.success) {
|
||||||
|
setPolicy(result.data);
|
||||||
|
} else {
|
||||||
|
setError(result.error.detail || 'Failed to load policy');
|
||||||
|
}
|
||||||
|
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleSave() {
|
||||||
|
if (!policy) return;
|
||||||
|
|
||||||
|
setSaving(true);
|
||||||
|
setError(null);
|
||||||
|
setSuccessMessage(null);
|
||||||
|
|
||||||
|
const result = await updatePolicy(clubId, {
|
||||||
|
access_model: policy.access_model,
|
||||||
|
guest_price_cents: policy.guest_price_cents,
|
||||||
|
default_price_group: policy.default_price_group,
|
||||||
|
require_verified_email: policy.require_verified_email,
|
||||||
|
max_future_booking_days: policy.max_future_booking_days,
|
||||||
|
max_active_bookings: policy.max_active_bookings
|
||||||
|
});
|
||||||
|
|
||||||
|
setSaving(false);
|
||||||
|
|
||||||
|
if (result.success) {
|
||||||
|
setPolicy(result.data);
|
||||||
|
setSuccessMessage('Policy updated successfully!');
|
||||||
|
setTimeout(() => setSuccessMessage(null), 3000);
|
||||||
|
} else {
|
||||||
|
setError(result.error.detail || 'Failed to update policy');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<div className="container mx-auto px-4 py-8">
|
||||||
|
<div className="animate-pulse">
|
||||||
|
<div className="h-8 bg-gray-200 rounded w-1/3 mb-4"></div>
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="h-32 bg-gray-200 rounded"></div>
|
||||||
|
<div className="h-32 bg-gray-200 rounded"></div>
|
||||||
|
<div className="h-32 bg-gray-200 rounded"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!policy) {
|
||||||
|
return (
|
||||||
|
<div className="container mx-auto px-4 py-8">
|
||||||
|
<div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg">
|
||||||
|
Failed to load facility policy
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="container mx-auto px-4 py-8">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="mb-8">
|
||||||
|
<h1 className="text-3xl font-bold text-gray-800">Facility Settings</h1>
|
||||||
|
<p className="text-gray-600 mt-1">Configure access model, pricing, and booking policies</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Success Message */}
|
||||||
|
{successMessage && (
|
||||||
|
<div className="bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-lg mb-6">
|
||||||
|
{successMessage}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Error Message */}
|
||||||
|
{error && (
|
||||||
|
<div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg mb-6">
|
||||||
|
{error}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Settings Form */}
|
||||||
|
<div className="space-y-6">
|
||||||
|
{/* Access Model Section */}
|
||||||
|
<div className="bg-white border border-gray-200 rounded-xl p-6 shadow-sm">
|
||||||
|
<h2 className="text-xl font-bold text-gray-800 mb-4">Access Model</h2>
|
||||||
|
<AccessModelSelector
|
||||||
|
value={policy.access_model}
|
||||||
|
onChange={(value: AccessModel) => setPolicy({ ...policy, access_model: value })}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Guest Pricing Section (conditional) */}
|
||||||
|
{policy.access_model === 'payg_allowed' && (
|
||||||
|
<div className="bg-white border border-gray-200 rounded-xl p-6 shadow-sm">
|
||||||
|
<h2 className="text-xl font-bold text-gray-800 mb-4">Guest Pricing</h2>
|
||||||
|
<GuestPricingInput
|
||||||
|
value={policy.guest_price_cents}
|
||||||
|
onChange={(value: number) => setPolicy({ ...policy, guest_price_cents: value })}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Booking Limits Section */}
|
||||||
|
<div className="bg-white border border-gray-200 rounded-xl p-6 shadow-sm">
|
||||||
|
<h2 className="text-xl font-bold text-gray-800 mb-4">Booking Limits</h2>
|
||||||
|
<BookingLimitsForm
|
||||||
|
maxFutureBookingDays={policy.max_future_booking_days}
|
||||||
|
maxActiveBookings={policy.max_active_bookings}
|
||||||
|
requireVerifiedEmail={policy.require_verified_email}
|
||||||
|
onChange={(updates) => setPolicy({ ...policy, ...updates })}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Save Button */}
|
||||||
|
<div className="flex justify-end">
|
||||||
|
<button
|
||||||
|
onClick={handleSave}
|
||||||
|
disabled={saving}
|
||||||
|
className="bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-700 hover:to-indigo-700 disabled:opacity-50 disabled:cursor-not-allowed text-white px-8 py-3 rounded-lg font-semibold shadow-md transition-all duration-200"
|
||||||
|
>
|
||||||
|
{saving ? 'Saving...' : 'Save Changes'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
import AdminAuthGuard from '@/src/components/AdminAuthGuard';
|
||||||
|
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 (
|
||||||
|
<AdminAuthGuard>
|
||||||
|
<FacilitySettingsComponent clubId={clubId} />
|
||||||
|
</AdminAuthGuard>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,197 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
import Modal from '@/src/components/modals/Modal';
|
||||||
|
import ModalHeader from '@/src/components/modals/ModalHeader';
|
||||||
|
import ModalBody from '@/src/components/modals/ModalBody';
|
||||||
|
import ModalFooter from '@/src/components/modals/ModalFooter';
|
||||||
|
import { addMember, listPlans } from '@/src/lib/api/facility-admin';
|
||||||
|
import type { AddMemberRequest, MemberRole, MemberStatus, MembershipPlan } from '@/src/types/facility-admin';
|
||||||
|
|
||||||
|
interface AddMemberModalProps {
|
||||||
|
isOpen: boolean;
|
||||||
|
onClose: () => void;
|
||||||
|
facilityId: number;
|
||||||
|
onSuccess: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function AddMemberModal({
|
||||||
|
isOpen,
|
||||||
|
onClose,
|
||||||
|
facilityId,
|
||||||
|
onSuccess
|
||||||
|
}: AddMemberModalProps) {
|
||||||
|
const [plans, setPlans] = useState<MembershipPlan[]>([]);
|
||||||
|
const [formData, setFormData] = useState<AddMemberRequest>({
|
||||||
|
app_user_id: 0,
|
||||||
|
role: 'member',
|
||||||
|
facility_membership_plan_id: null,
|
||||||
|
sport_id: null,
|
||||||
|
status: 'active',
|
||||||
|
starts_at: new Date().toISOString().split('T')[0],
|
||||||
|
ends_at: null
|
||||||
|
});
|
||||||
|
const [submitting, setSubmitting] = useState(false);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetchPlans();
|
||||||
|
}, [facilityId]);
|
||||||
|
|
||||||
|
async function fetchPlans() {
|
||||||
|
const result = await listPlans(facilityId, { include_inactive: false });
|
||||||
|
if (result.success) {
|
||||||
|
setPlans(result.data);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleSubmit(e: React.FormEvent) {
|
||||||
|
e.preventDefault();
|
||||||
|
setSubmitting(true);
|
||||||
|
setError(null);
|
||||||
|
|
||||||
|
if (formData.app_user_id === 0) {
|
||||||
|
setError('Please enter a valid user ID');
|
||||||
|
setSubmitting(false);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const result = await addMember(facilityId, formData);
|
||||||
|
|
||||||
|
setSubmitting(false);
|
||||||
|
|
||||||
|
if (result.success) {
|
||||||
|
onSuccess();
|
||||||
|
onClose();
|
||||||
|
} else {
|
||||||
|
setError(result.error.detail || 'Failed to add member');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Modal isOpen={isOpen} onClose={onClose} size="md">
|
||||||
|
<form onSubmit={handleSubmit}>
|
||||||
|
<ModalHeader onClose={onClose}>Add Member</ModalHeader>
|
||||||
|
|
||||||
|
<ModalBody>
|
||||||
|
{error && (
|
||||||
|
<div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg mb-4">
|
||||||
|
{error}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="space-y-4">
|
||||||
|
{/* User ID (simplified - in production, use email lookup) */}
|
||||||
|
<div>
|
||||||
|
<label htmlFor="app_user_id" className="block text-sm font-medium text-gray-700 mb-1">
|
||||||
|
User ID <span className="text-red-500">*</span>
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
id="app_user_id"
|
||||||
|
value={formData.app_user_id || ''}
|
||||||
|
onChange={e => setFormData({ ...formData, app_user_id: parseInt(e.target.value) || 0 })}
|
||||||
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent"
|
||||||
|
placeholder="Enter user ID"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
<p className="text-xs text-gray-500 mt-1">Enter the app_user_id of the user to add</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Role */}
|
||||||
|
<div>
|
||||||
|
<label htmlFor="role" className="block text-sm font-medium text-gray-700 mb-1">
|
||||||
|
Role <span className="text-red-500">*</span>
|
||||||
|
</label>
|
||||||
|
<select
|
||||||
|
id="role"
|
||||||
|
value={formData.role}
|
||||||
|
onChange={e => setFormData({ ...formData, role: e.target.value as MemberRole })}
|
||||||
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent"
|
||||||
|
required
|
||||||
|
>
|
||||||
|
<option value="guest">Guest</option>
|
||||||
|
<option value="member">Member</option>
|
||||||
|
<option value="staff">Staff</option>
|
||||||
|
<option value="admin">Admin</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Membership Plan */}
|
||||||
|
<div>
|
||||||
|
<label htmlFor="plan" className="block text-sm font-medium text-gray-700 mb-1">
|
||||||
|
Membership Plan {formData.role === 'member' && <span className="text-red-500">*</span>}
|
||||||
|
</label>
|
||||||
|
<select
|
||||||
|
id="plan"
|
||||||
|
value={formData.facility_membership_plan_id || ''}
|
||||||
|
onChange={e => setFormData({ ...formData, facility_membership_plan_id: parseInt(e.target.value) || null })}
|
||||||
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent"
|
||||||
|
required={formData.role === 'member'}
|
||||||
|
>
|
||||||
|
<option value="">No Plan</option>
|
||||||
|
{plans.map(plan => (
|
||||||
|
<option key={plan.facility_membership_plan_id} value={plan.facility_membership_plan_id}>
|
||||||
|
{plan.name} - CHF {(plan.price_cents / 100).toFixed(2)} / {plan.billing_period}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Status */}
|
||||||
|
<div>
|
||||||
|
<label htmlFor="status" className="block text-sm font-medium text-gray-700 mb-1">
|
||||||
|
Status
|
||||||
|
</label>
|
||||||
|
<select
|
||||||
|
id="status"
|
||||||
|
value={formData.status}
|
||||||
|
onChange={e => setFormData({ ...formData, status: e.target.value as MemberStatus })}
|
||||||
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent"
|
||||||
|
>
|
||||||
|
<option value="active">Active</option>
|
||||||
|
<option value="trial">Trial</option>
|
||||||
|
<option value="grace">Grace Period</option>
|
||||||
|
<option value="past_due">Past Due</option>
|
||||||
|
<option value="paused">Paused</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* End Date */}
|
||||||
|
<div>
|
||||||
|
<label htmlFor="ends_at" className="block text-sm font-medium text-gray-700 mb-1">
|
||||||
|
End Date (Optional)
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="date"
|
||||||
|
id="ends_at"
|
||||||
|
value={formData.ends_at || ''}
|
||||||
|
onChange={e => setFormData({ ...formData, ends_at: e.target.value || null })}
|
||||||
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent"
|
||||||
|
/>
|
||||||
|
<p className="text-xs text-gray-500 mt-1">Leave empty for indefinite membership</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ModalBody>
|
||||||
|
|
||||||
|
<ModalFooter>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={onClose}
|
||||||
|
className="px-4 py-2 text-gray-600 hover:text-gray-800 font-medium transition-colors"
|
||||||
|
disabled={submitting}
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
disabled={submitting}
|
||||||
|
className="bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-700 hover:to-indigo-700 disabled:opacity-50 disabled:cursor-not-allowed text-white px-6 py-2 rounded-lg font-semibold shadow-md transition-all duration-200"
|
||||||
|
>
|
||||||
|
{submitting ? 'Adding...' : 'Add Member'}
|
||||||
|
</button>
|
||||||
|
</ModalFooter>
|
||||||
|
</form>
|
||||||
|
</Modal>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,188 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
import Modal from '@/src/components/modals/Modal';
|
||||||
|
import ModalHeader from '@/src/components/modals/ModalHeader';
|
||||||
|
import ModalBody from '@/src/components/modals/ModalBody';
|
||||||
|
import ModalFooter from '@/src/components/modals/ModalFooter';
|
||||||
|
import { updateMember, listPlans } from '@/src/lib/api/facility-admin';
|
||||||
|
import type { FacilityMember, UpdateMemberRequest, MemberRole, MemberStatus, MembershipPlan } from '@/src/types/facility-admin';
|
||||||
|
|
||||||
|
interface EditMemberModalProps {
|
||||||
|
isOpen: boolean;
|
||||||
|
onClose: () => void;
|
||||||
|
facilityId: number;
|
||||||
|
member: FacilityMember;
|
||||||
|
onSuccess: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function EditMemberModal({
|
||||||
|
isOpen,
|
||||||
|
onClose,
|
||||||
|
facilityId,
|
||||||
|
member,
|
||||||
|
onSuccess
|
||||||
|
}: EditMemberModalProps) {
|
||||||
|
const [plans, setPlans] = useState<MembershipPlan[]>([]);
|
||||||
|
const [formData, setFormData] = useState<UpdateMemberRequest>({
|
||||||
|
role: member.role,
|
||||||
|
facility_membership_plan_id: member.facility_membership_plan_id,
|
||||||
|
status: member.status,
|
||||||
|
ends_at: member.ends_at ? member.ends_at.split('T')[0] : null
|
||||||
|
});
|
||||||
|
const [submitting, setSubmitting] = useState(false);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetchPlans();
|
||||||
|
}, [facilityId]);
|
||||||
|
|
||||||
|
async function fetchPlans() {
|
||||||
|
const result = await listPlans(facilityId, { include_inactive: false });
|
||||||
|
if (result.success) {
|
||||||
|
setPlans(result.data);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleSubmit(e: React.FormEvent) {
|
||||||
|
e.preventDefault();
|
||||||
|
setSubmitting(true);
|
||||||
|
setError(null);
|
||||||
|
|
||||||
|
const result = await updateMember(facilityId, member.facility_member_id, formData);
|
||||||
|
|
||||||
|
setSubmitting(false);
|
||||||
|
|
||||||
|
if (result.success) {
|
||||||
|
onSuccess();
|
||||||
|
onClose();
|
||||||
|
} else {
|
||||||
|
setError(result.error.detail || 'Failed to update member');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Modal isOpen={isOpen} onClose={onClose} size="md">
|
||||||
|
<form onSubmit={handleSubmit}>
|
||||||
|
<ModalHeader onClose={onClose}>Edit Member</ModalHeader>
|
||||||
|
|
||||||
|
<ModalBody>
|
||||||
|
{error && (
|
||||||
|
<div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg mb-4">
|
||||||
|
{error}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Member Info (read-only) */}
|
||||||
|
<div className="bg-gray-50 border border-gray-200 rounded-lg p-4 mb-4">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="w-12 h-12 bg-gradient-to-br from-purple-500 to-indigo-500 rounded-full flex items-center justify-center text-white font-bold text-lg">
|
||||||
|
{member.display_name.charAt(0).toUpperCase()}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="font-semibold text-gray-800">{member.display_name}</div>
|
||||||
|
<div className="text-sm text-gray-600">{member.email}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-4">
|
||||||
|
{/* Role */}
|
||||||
|
<div>
|
||||||
|
<label htmlFor="role" className="block text-sm font-medium text-gray-700 mb-1">
|
||||||
|
Role <span className="text-red-500">*</span>
|
||||||
|
</label>
|
||||||
|
<select
|
||||||
|
id="role"
|
||||||
|
value={formData.role}
|
||||||
|
onChange={e => setFormData({ ...formData, role: e.target.value as MemberRole })}
|
||||||
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent"
|
||||||
|
required
|
||||||
|
>
|
||||||
|
<option value="guest">Guest</option>
|
||||||
|
<option value="member">Member</option>
|
||||||
|
<option value="staff">Staff</option>
|
||||||
|
<option value="admin">Admin</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Membership Plan */}
|
||||||
|
<div>
|
||||||
|
<label htmlFor="plan" className="block text-sm font-medium text-gray-700 mb-1">
|
||||||
|
Membership Plan {formData.role === 'member' && <span className="text-red-500">*</span>}
|
||||||
|
</label>
|
||||||
|
<select
|
||||||
|
id="plan"
|
||||||
|
value={formData.facility_membership_plan_id || ''}
|
||||||
|
onChange={e => setFormData({ ...formData, facility_membership_plan_id: parseInt(e.target.value) || null })}
|
||||||
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent"
|
||||||
|
required={formData.role === 'member'}
|
||||||
|
>
|
||||||
|
<option value="">No Plan</option>
|
||||||
|
{plans.map(plan => (
|
||||||
|
<option key={plan.facility_membership_plan_id} value={plan.facility_membership_plan_id}>
|
||||||
|
{plan.name} - CHF {(plan.price_cents / 100).toFixed(2)} / {plan.billing_period}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Status */}
|
||||||
|
<div>
|
||||||
|
<label htmlFor="status" className="block text-sm font-medium text-gray-700 mb-1">
|
||||||
|
Status
|
||||||
|
</label>
|
||||||
|
<select
|
||||||
|
id="status"
|
||||||
|
value={formData.status}
|
||||||
|
onChange={e => setFormData({ ...formData, status: e.target.value as MemberStatus })}
|
||||||
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent"
|
||||||
|
>
|
||||||
|
<option value="active">Active</option>
|
||||||
|
<option value="trial">Trial</option>
|
||||||
|
<option value="grace">Grace Period</option>
|
||||||
|
<option value="past_due">Past Due</option>
|
||||||
|
<option value="expired">Expired</option>
|
||||||
|
<option value="cancelled">Cancelled</option>
|
||||||
|
<option value="paused">Paused</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* End Date */}
|
||||||
|
<div>
|
||||||
|
<label htmlFor="ends_at" className="block text-sm font-medium text-gray-700 mb-1">
|
||||||
|
End Date (Optional)
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="date"
|
||||||
|
id="ends_at"
|
||||||
|
value={formData.ends_at || ''}
|
||||||
|
onChange={e => setFormData({ ...formData, ends_at: e.target.value || null })}
|
||||||
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent"
|
||||||
|
/>
|
||||||
|
<p className="text-xs text-gray-500 mt-1">Leave empty for indefinite membership</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ModalBody>
|
||||||
|
|
||||||
|
<ModalFooter>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={onClose}
|
||||||
|
className="px-4 py-2 text-gray-600 hover:text-gray-800 font-medium transition-colors"
|
||||||
|
disabled={submitting}
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
disabled={submitting}
|
||||||
|
className="bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-700 hover:to-indigo-700 disabled:opacity-50 disabled:cursor-not-allowed text-white px-6 py-2 rounded-lg font-semibold shadow-md transition-all duration-200"
|
||||||
|
>
|
||||||
|
{submitting ? 'Saving...' : 'Update Member'}
|
||||||
|
</button>
|
||||||
|
</ModalFooter>
|
||||||
|
</form>
|
||||||
|
</Modal>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,76 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import type { FacilityMember } from '@/src/types/facility-admin';
|
||||||
|
import RoleBadge from './RoleBadge';
|
||||||
|
import StatusBadge from './StatusBadge';
|
||||||
|
|
||||||
|
interface MemberCardProps {
|
||||||
|
member: FacilityMember;
|
||||||
|
onEdit: () => void;
|
||||||
|
onDelete: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function MemberCard({ member, onEdit, onDelete }: MemberCardProps) {
|
||||||
|
function formatDate(dateString: string): string {
|
||||||
|
return new Date(dateString).toLocaleDateString('en-US', {
|
||||||
|
year: 'numeric',
|
||||||
|
month: 'short',
|
||||||
|
day: 'numeric'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="bg-white border border-gray-200 rounded-xl p-6 shadow-sm hover:shadow-md transition-all duration-200">
|
||||||
|
<div className="flex items-start justify-between">
|
||||||
|
{/* Member Info */}
|
||||||
|
<div className="flex items-center gap-4 flex-1">
|
||||||
|
{/* Avatar */}
|
||||||
|
<div className="w-16 h-16 bg-gradient-to-br from-purple-500 to-indigo-500 rounded-full flex items-center justify-center text-white font-bold text-2xl flex-shrink-0">
|
||||||
|
{member.display_name.charAt(0).toUpperCase()}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Details */}
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="flex items-center gap-2 mb-1">
|
||||||
|
<h3 className="text-lg font-bold text-gray-800">{member.display_name}</h3>
|
||||||
|
<RoleBadge role={member.role} />
|
||||||
|
<StatusBadge status={member.status} />
|
||||||
|
</div>
|
||||||
|
<div className="text-sm text-gray-600 mb-2">{member.email}</div>
|
||||||
|
<div className="flex flex-wrap gap-3 text-xs text-gray-500">
|
||||||
|
{member.plan_name && (
|
||||||
|
<div>
|
||||||
|
<span className="font-medium">Plan:</span> {member.plan_name}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div>
|
||||||
|
<span className="font-medium">Joined:</span> {formatDate(member.starts_at)}
|
||||||
|
</div>
|
||||||
|
{member.ends_at && (
|
||||||
|
<div>
|
||||||
|
<span className="font-medium">Ends:</span> {formatDate(member.ends_at)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Actions */}
|
||||||
|
<div className="flex gap-2 ml-4">
|
||||||
|
<button
|
||||||
|
onClick={onEdit}
|
||||||
|
className="px-4 py-2 bg-purple-100 text-purple-700 rounded-lg hover:bg-purple-200 font-medium transition-colors text-sm"
|
||||||
|
>
|
||||||
|
Edit
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={onDelete}
|
||||||
|
className="px-4 py-2 bg-red-100 text-red-700 rounded-lg hover:bg-red-200 font-medium transition-colors text-sm"
|
||||||
|
>
|
||||||
|
Remove
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,43 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
interface MemberListSkeletonProps {
|
||||||
|
count?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function MemberListSkeleton({ count = 5 }: MemberListSkeletonProps) {
|
||||||
|
return (
|
||||||
|
<div className="space-y-4">
|
||||||
|
{Array.from({ length: count }).map((_, i) => (
|
||||||
|
<div key={i} className="bg-white border border-gray-200 rounded-xl p-6 shadow-sm animate-pulse">
|
||||||
|
<div className="flex items-start justify-between">
|
||||||
|
{/* Member Info */}
|
||||||
|
<div className="flex items-center gap-4 flex-1">
|
||||||
|
{/* Avatar */}
|
||||||
|
<div className="w-16 h-16 bg-gray-200 rounded-full flex-shrink-0"></div>
|
||||||
|
|
||||||
|
{/* Details */}
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="flex items-center gap-2 mb-2">
|
||||||
|
<div className="h-5 bg-gray-200 rounded w-32"></div>
|
||||||
|
<div className="h-5 bg-gray-200 rounded w-16"></div>
|
||||||
|
<div className="h-5 bg-gray-200 rounded w-16"></div>
|
||||||
|
</div>
|
||||||
|
<div className="h-4 bg-gray-200 rounded w-48 mb-2"></div>
|
||||||
|
<div className="flex gap-3">
|
||||||
|
<div className="h-3 bg-gray-200 rounded w-24"></div>
|
||||||
|
<div className="h-3 bg-gray-200 rounded w-32"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Actions */}
|
||||||
|
<div className="flex gap-2 ml-4">
|
||||||
|
<div className="w-16 h-9 bg-gray-200 rounded-lg"></div>
|
||||||
|
<div className="w-20 h-9 bg-gray-200 rounded-lg"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,24 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import type { MemberRole } from '@/src/types/facility-admin';
|
||||||
|
|
||||||
|
interface RoleBadgeProps {
|
||||||
|
role: MemberRole;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function RoleBadge({ role }: RoleBadgeProps) {
|
||||||
|
const roleConfig: Record<MemberRole, { label: string; color: string }> = {
|
||||||
|
guest: { label: 'Guest', color: 'bg-gray-100 text-gray-700' },
|
||||||
|
member: { label: 'Member', color: 'bg-blue-100 text-blue-700' },
|
||||||
|
staff: { label: 'Staff', color: 'bg-green-100 text-green-700' },
|
||||||
|
admin: { label: 'Admin', color: 'bg-purple-100 text-purple-700' }
|
||||||
|
};
|
||||||
|
|
||||||
|
const config = roleConfig[role];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<span className={`inline-flex items-center text-xs px-2 py-1 rounded-full font-medium ${config.color}`}>
|
||||||
|
{config.label}
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,27 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import type { MemberStatus } from '@/src/types/facility-admin';
|
||||||
|
|
||||||
|
interface StatusBadgeProps {
|
||||||
|
status: MemberStatus;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function StatusBadge({ status }: StatusBadgeProps) {
|
||||||
|
const statusConfig: Record<MemberStatus, { label: string; color: string }> = {
|
||||||
|
active: { label: 'Active', color: 'bg-green-100 text-green-700' },
|
||||||
|
trial: { label: 'Trial', color: 'bg-blue-100 text-blue-700' },
|
||||||
|
grace: { label: 'Grace Period', color: 'bg-yellow-100 text-yellow-700' },
|
||||||
|
past_due: { label: 'Past Due', color: 'bg-orange-100 text-orange-700' },
|
||||||
|
expired: { label: 'Expired', color: 'bg-red-100 text-red-700' },
|
||||||
|
cancelled: { label: 'Cancelled', color: 'bg-gray-100 text-gray-700' },
|
||||||
|
paused: { label: 'Paused', color: 'bg-gray-100 text-gray-700' }
|
||||||
|
};
|
||||||
|
|
||||||
|
const config = statusConfig[status];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<span className={`inline-flex items-center text-xs px-2 py-1 rounded-full font-medium ${config.color}`}>
|
||||||
|
{config.label}
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,80 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import type { MembershipPlan } from '@/src/types/facility-admin';
|
||||||
|
|
||||||
|
interface PlanCardProps {
|
||||||
|
plan: MembershipPlan;
|
||||||
|
onEdit: () => void;
|
||||||
|
onDelete: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function PlanCard({ plan, onEdit, onDelete }: PlanCardProps) {
|
||||||
|
function formatPrice(cents: number): string {
|
||||||
|
return (cents / 100).toFixed(2);
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatBillingPeriod(period: string): string {
|
||||||
|
const periodMap: Record<string, string> = {
|
||||||
|
daily: 'per day',
|
||||||
|
weekly: 'per week',
|
||||||
|
monthly: 'per month',
|
||||||
|
quarterly: 'per quarter',
|
||||||
|
yearly: 'per year',
|
||||||
|
lifetime: 'one-time'
|
||||||
|
};
|
||||||
|
return periodMap[period] || period;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={`bg-white border-2 rounded-xl p-6 shadow-sm hover:shadow-md transition-all duration-200 ${
|
||||||
|
!plan.is_active ? 'border-gray-300 opacity-60' : 'border-purple-200'
|
||||||
|
}`}>
|
||||||
|
{/* Header */}
|
||||||
|
<div className="flex justify-between items-start mb-4">
|
||||||
|
<h3 className="text-xl font-bold text-gray-800">{plan.name}</h3>
|
||||||
|
{!plan.is_active && (
|
||||||
|
<span className="text-xs bg-gray-200 text-gray-600 px-2 py-1 rounded-full font-medium">
|
||||||
|
Inactive
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Price */}
|
||||||
|
<div className="mb-6">
|
||||||
|
<div className="flex items-baseline">
|
||||||
|
<span className="text-3xl font-bold text-purple-600">
|
||||||
|
CHF {formatPrice(plan.price_cents)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="text-sm text-gray-600 mt-1">
|
||||||
|
{formatBillingPeriod(plan.billing_period)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Sport Badge */}
|
||||||
|
{plan.sport_id && (
|
||||||
|
<div className="mb-4">
|
||||||
|
<span className="inline-flex items-center text-xs bg-indigo-100 text-indigo-700 px-2 py-1 rounded-full font-medium">
|
||||||
|
🎾 Sport-specific
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Actions */}
|
||||||
|
<div className="flex gap-2 pt-4 border-t border-gray-200">
|
||||||
|
<button
|
||||||
|
onClick={onEdit}
|
||||||
|
className="flex-1 px-4 py-2 bg-purple-100 text-purple-700 rounded-lg hover:bg-purple-200 font-medium transition-colors"
|
||||||
|
>
|
||||||
|
Edit
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={onDelete}
|
||||||
|
className="flex-1 px-4 py-2 bg-red-100 text-red-700 rounded-lg hover:bg-red-200 font-medium transition-colors"
|
||||||
|
>
|
||||||
|
Deactivate
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,174 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useState } from 'react';
|
||||||
|
import Modal from '@/src/components/modals/Modal';
|
||||||
|
import ModalHeader from '@/src/components/modals/ModalHeader';
|
||||||
|
import ModalBody from '@/src/components/modals/ModalBody';
|
||||||
|
import ModalFooter from '@/src/components/modals/ModalFooter';
|
||||||
|
import { createPlan, updatePlan } from '@/src/lib/api/facility-admin';
|
||||||
|
import type { MembershipPlan, CreatePlanRequest, BillingPeriod } from '@/src/types/facility-admin';
|
||||||
|
|
||||||
|
interface PlanFormModalProps {
|
||||||
|
isOpen: boolean;
|
||||||
|
onClose: () => void;
|
||||||
|
facilityId: number;
|
||||||
|
plan?: MembershipPlan;
|
||||||
|
onSuccess: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function PlanFormModal({
|
||||||
|
isOpen,
|
||||||
|
onClose,
|
||||||
|
facilityId,
|
||||||
|
plan,
|
||||||
|
onSuccess
|
||||||
|
}: PlanFormModalProps) {
|
||||||
|
const [formData, setFormData] = useState<CreatePlanRequest>({
|
||||||
|
name: plan?.name || '',
|
||||||
|
billing_period: plan?.billing_period || 'monthly',
|
||||||
|
price_cents: plan?.price_cents || 0,
|
||||||
|
sport_id: plan?.sport_id || null,
|
||||||
|
is_active: plan?.is_active ?? true
|
||||||
|
});
|
||||||
|
const [submitting, setSubmitting] = useState(false);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
|
||||||
|
async function handleSubmit(e: React.FormEvent) {
|
||||||
|
e.preventDefault();
|
||||||
|
setSubmitting(true);
|
||||||
|
setError(null);
|
||||||
|
|
||||||
|
const result = plan
|
||||||
|
? await updatePlan(facilityId, plan.facility_membership_plan_id, formData)
|
||||||
|
: await createPlan(facilityId, formData);
|
||||||
|
|
||||||
|
setSubmitting(false);
|
||||||
|
|
||||||
|
if (result.success) {
|
||||||
|
onSuccess();
|
||||||
|
onClose();
|
||||||
|
} else {
|
||||||
|
setError(result.error.detail || 'Operation failed');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatCurrency(cents: number): string {
|
||||||
|
return (cents / 100).toFixed(2);
|
||||||
|
}
|
||||||
|
|
||||||
|
function parseCurrency(value: string): number {
|
||||||
|
const parsed = parseFloat(value);
|
||||||
|
return isNaN(parsed) ? 0 : Math.round(parsed * 100);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Modal isOpen={isOpen} onClose={onClose} size="md">
|
||||||
|
<form onSubmit={handleSubmit}>
|
||||||
|
<ModalHeader onClose={onClose}>
|
||||||
|
{plan ? 'Edit Plan' : 'Create Plan'}
|
||||||
|
</ModalHeader>
|
||||||
|
|
||||||
|
<ModalBody>
|
||||||
|
{error && (
|
||||||
|
<div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg mb-4">
|
||||||
|
{error}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="space-y-4">
|
||||||
|
{/* Plan Name */}
|
||||||
|
<div>
|
||||||
|
<label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-1">
|
||||||
|
Plan Name <span className="text-red-500">*</span>
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="name"
|
||||||
|
value={formData.name}
|
||||||
|
onChange={e => setFormData({ ...formData, name: e.target.value })}
|
||||||
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent"
|
||||||
|
placeholder="e.g., Gold Member, Annual Pass"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
<p className="text-xs text-gray-500 mt-1">A descriptive name for this membership plan</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Billing Period */}
|
||||||
|
<div>
|
||||||
|
<label htmlFor="billing_period" className="block text-sm font-medium text-gray-700 mb-1">
|
||||||
|
Billing Period <span className="text-red-500">*</span>
|
||||||
|
</label>
|
||||||
|
<select
|
||||||
|
id="billing_period"
|
||||||
|
value={formData.billing_period}
|
||||||
|
onChange={e => setFormData({ ...formData, billing_period: e.target.value as BillingPeriod })}
|
||||||
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent"
|
||||||
|
required
|
||||||
|
>
|
||||||
|
<option value="daily">Daily</option>
|
||||||
|
<option value="weekly">Weekly</option>
|
||||||
|
<option value="monthly">Monthly</option>
|
||||||
|
<option value="quarterly">Quarterly</option>
|
||||||
|
<option value="yearly">Yearly</option>
|
||||||
|
<option value="lifetime">Lifetime</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Price */}
|
||||||
|
<div>
|
||||||
|
<label htmlFor="price" className="block text-sm font-medium text-gray-700 mb-1">
|
||||||
|
Price (CHF) <span className="text-red-500">*</span>
|
||||||
|
</label>
|
||||||
|
<div className="relative">
|
||||||
|
<span className="absolute left-3 top-2 text-gray-500">CHF</span>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
id="price"
|
||||||
|
value={formatCurrency(formData.price_cents)}
|
||||||
|
onChange={e => setFormData({ ...formData, price_cents: parseCurrency(e.target.value) })}
|
||||||
|
step="0.01"
|
||||||
|
min="0"
|
||||||
|
className="w-full pl-14 pr-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent"
|
||||||
|
placeholder="0.00"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Active Status */}
|
||||||
|
<div className="flex items-center">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
id="is_active"
|
||||||
|
checked={formData.is_active}
|
||||||
|
onChange={e => setFormData({ ...formData, is_active: e.target.checked })}
|
||||||
|
className="w-4 h-4 text-purple-600 border-gray-300 rounded focus:ring-purple-500"
|
||||||
|
/>
|
||||||
|
<label htmlFor="is_active" className="ml-2 text-sm text-gray-700">
|
||||||
|
Active (available for subscription)
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ModalBody>
|
||||||
|
|
||||||
|
<ModalFooter>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={onClose}
|
||||||
|
className="px-4 py-2 text-gray-600 hover:text-gray-800 font-medium transition-colors"
|
||||||
|
disabled={submitting}
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
disabled={submitting}
|
||||||
|
className="bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-700 hover:to-indigo-700 disabled:opacity-50 disabled:cursor-not-allowed text-white px-6 py-2 rounded-lg font-semibold shadow-md transition-all duration-200"
|
||||||
|
>
|
||||||
|
{submitting ? 'Saving...' : plan ? 'Update Plan' : 'Create Plan'}
|
||||||
|
</button>
|
||||||
|
</ModalFooter>
|
||||||
|
</form>
|
||||||
|
</Modal>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,37 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
interface PlanListSkeletonProps {
|
||||||
|
count?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function PlanListSkeleton({ count = 3 }: PlanListSkeletonProps) {
|
||||||
|
return (
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||||
|
{Array.from({ length: count }).map((_, i) => (
|
||||||
|
<div key={i} className="bg-white border-2 border-gray-200 rounded-xl p-6 shadow-sm animate-pulse">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="flex justify-between items-start mb-4">
|
||||||
|
<div className="h-6 bg-gray-200 rounded w-2/3"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Price */}
|
||||||
|
<div className="mb-6">
|
||||||
|
<div className="h-8 bg-gray-200 rounded w-1/2 mb-1"></div>
|
||||||
|
<div className="h-4 bg-gray-200 rounded w-1/3"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Sport Badge Placeholder */}
|
||||||
|
<div className="mb-4">
|
||||||
|
<div className="h-5 bg-gray-200 rounded w-1/4"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Actions */}
|
||||||
|
<div className="flex gap-2 pt-4 border-t border-gray-200">
|
||||||
|
<div className="flex-1 h-10 bg-gray-200 rounded-lg"></div>
|
||||||
|
<div className="flex-1 h-10 bg-gray-200 rounded-lg"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,73 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import type { AccessModel } from '@/src/types/facility-admin';
|
||||||
|
|
||||||
|
interface AccessModelSelectorProps {
|
||||||
|
value: AccessModel;
|
||||||
|
onChange: (value: AccessModel) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function AccessModelSelector({ value, onChange }: AccessModelSelectorProps) {
|
||||||
|
const accessModels: Array<{
|
||||||
|
value: AccessModel;
|
||||||
|
label: string;
|
||||||
|
description: string;
|
||||||
|
icon: string;
|
||||||
|
}> = [
|
||||||
|
{
|
||||||
|
value: 'membership_required',
|
||||||
|
label: 'Membership Required',
|
||||||
|
description: 'Only members can book slots. Non-members cannot access the facility.',
|
||||||
|
icon: '🔒'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'payg_allowed',
|
||||||
|
label: 'Pay-as-you-go Allowed',
|
||||||
|
description: 'Non-members can book slots by paying per booking via Stripe.',
|
||||||
|
icon: '💳'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'open',
|
||||||
|
label: 'Open Access',
|
||||||
|
description: 'Free access for everyone. Anyone can book without payment or membership.',
|
||||||
|
icon: '🌐'
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-3">
|
||||||
|
{accessModels.map((model) => (
|
||||||
|
<div
|
||||||
|
key={model.value}
|
||||||
|
onClick={() => onChange(model.value)}
|
||||||
|
className={`cursor-pointer border-2 rounded-lg p-4 transition-all duration-200 ${
|
||||||
|
value === model.value
|
||||||
|
? 'border-purple-500 bg-purple-50'
|
||||||
|
: 'border-gray-200 hover:border-purple-300 bg-white'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<div className="flex items-start gap-3">
|
||||||
|
<div className="text-3xl flex-shrink-0">{model.icon}</div>
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="flex items-center gap-2 mb-1">
|
||||||
|
<h3 className="font-bold text-gray-800">{model.label}</h3>
|
||||||
|
{value === model.value && (
|
||||||
|
<span className="text-xs bg-purple-600 text-white px-2 py-1 rounded-full">
|
||||||
|
Active
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<p className="text-sm text-gray-600">{model.description}</p>
|
||||||
|
</div>
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
checked={value === model.value}
|
||||||
|
onChange={() => onChange(model.value)}
|
||||||
|
className="w-5 h-5 text-purple-600 focus:ring-purple-500 flex-shrink-0 mt-1"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,92 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
interface BookingLimitsFormProps {
|
||||||
|
maxFutureBookingDays: number;
|
||||||
|
maxActiveBookings: number;
|
||||||
|
requireVerifiedEmail: boolean;
|
||||||
|
onChange: (updates: {
|
||||||
|
max_future_booking_days?: number;
|
||||||
|
max_active_bookings?: number;
|
||||||
|
require_verified_email?: boolean;
|
||||||
|
}) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function BookingLimitsForm({
|
||||||
|
maxFutureBookingDays,
|
||||||
|
maxActiveBookings,
|
||||||
|
requireVerifiedEmail,
|
||||||
|
onChange
|
||||||
|
}: BookingLimitsFormProps) {
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
{/* Max Future Booking Days */}
|
||||||
|
<div>
|
||||||
|
<label htmlFor="max_future_days" className="block text-sm font-medium text-gray-700 mb-2">
|
||||||
|
Maximum advance booking window
|
||||||
|
</label>
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<input
|
||||||
|
type="range"
|
||||||
|
id="max_future_days"
|
||||||
|
value={maxFutureBookingDays}
|
||||||
|
onChange={e => onChange({ max_future_booking_days: parseInt(e.target.value) })}
|
||||||
|
min="1"
|
||||||
|
max="90"
|
||||||
|
className="flex-1 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-purple-600"
|
||||||
|
/>
|
||||||
|
<div className="w-20 text-right">
|
||||||
|
<span className="text-lg font-bold text-purple-600">{maxFutureBookingDays}</span>
|
||||||
|
<span className="text-sm text-gray-600 ml-1">days</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p className="text-xs text-gray-500 mt-2">
|
||||||
|
How far in advance can users book slots? (1-90 days)
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Max Active Bookings */}
|
||||||
|
<div>
|
||||||
|
<label htmlFor="max_active_bookings" className="block text-sm font-medium text-gray-700 mb-2">
|
||||||
|
Maximum concurrent active bookings
|
||||||
|
</label>
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<input
|
||||||
|
type="range"
|
||||||
|
id="max_active_bookings"
|
||||||
|
value={maxActiveBookings}
|
||||||
|
onChange={e => onChange({ max_active_bookings: parseInt(e.target.value) })}
|
||||||
|
min="1"
|
||||||
|
max="20"
|
||||||
|
className="flex-1 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-purple-600"
|
||||||
|
/>
|
||||||
|
<div className="w-20 text-right">
|
||||||
|
<span className="text-lg font-bold text-purple-600">{maxActiveBookings}</span>
|
||||||
|
<span className="text-sm text-gray-600 ml-1">slots</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p className="text-xs text-gray-500 mt-2">
|
||||||
|
Maximum number of future bookings a user can have at once (1-20)
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Require Verified Email */}
|
||||||
|
<div className="flex items-start gap-3">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
id="require_verified_email"
|
||||||
|
checked={requireVerifiedEmail}
|
||||||
|
onChange={e => onChange({ require_verified_email: e.target.checked })}
|
||||||
|
className="w-5 h-5 text-purple-600 border-gray-300 rounded focus:ring-purple-500 mt-0.5"
|
||||||
|
/>
|
||||||
|
<div className="flex-1">
|
||||||
|
<label htmlFor="require_verified_email" className="block text-sm font-medium text-gray-700 cursor-pointer">
|
||||||
|
Require verified email for bookings
|
||||||
|
</label>
|
||||||
|
<p className="text-xs text-gray-500 mt-1">
|
||||||
|
Users must verify their email address before they can make bookings
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,41 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
interface GuestPricingInputProps {
|
||||||
|
value: number; // price in cents
|
||||||
|
onChange: (value: number) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function GuestPricingInput({ value, onChange }: GuestPricingInputProps) {
|
||||||
|
function formatCurrency(cents: number): string {
|
||||||
|
return (cents / 100).toFixed(2);
|
||||||
|
}
|
||||||
|
|
||||||
|
function parseCurrency(value: string): number {
|
||||||
|
const parsed = parseFloat(value);
|
||||||
|
return isNaN(parsed) ? 0 : Math.round(parsed * 100);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<label htmlFor="guest_price" className="block text-sm font-medium text-gray-700 mb-2">
|
||||||
|
Price per booking for non-members
|
||||||
|
</label>
|
||||||
|
<div className="relative max-w-xs">
|
||||||
|
<span className="absolute left-3 top-3 text-gray-500 font-medium">CHF</span>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
id="guest_price"
|
||||||
|
value={formatCurrency(value)}
|
||||||
|
onChange={e => onChange(parseCurrency(e.target.value))}
|
||||||
|
step="0.01"
|
||||||
|
min="0"
|
||||||
|
className="w-full pl-14 pr-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent"
|
||||||
|
placeholder="0.00"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<p className="text-xs text-gray-500 mt-2">
|
||||||
|
Amount charged to non-members for each booking. Set to 0 for free access.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,575 @@
|
|||||||
|
/**
|
||||||
|
* Facility Admin API Client
|
||||||
|
*
|
||||||
|
* Handles all facility admin operations: membership plans, entitlements, members, policy
|
||||||
|
* Build: 495
|
||||||
|
* Date: 2025-11-24
|
||||||
|
*/
|
||||||
|
|
||||||
|
import type {
|
||||||
|
MembershipPlan,
|
||||||
|
CreatePlanRequest,
|
||||||
|
UpdatePlanRequest,
|
||||||
|
PlanEntitlements,
|
||||||
|
SetEntitlementRequest,
|
||||||
|
FacilityMember,
|
||||||
|
AddMemberRequest,
|
||||||
|
UpdateMemberRequest,
|
||||||
|
MemberListFilters,
|
||||||
|
FacilityPolicy,
|
||||||
|
UpdatePolicyRequest,
|
||||||
|
FacilityAdminError,
|
||||||
|
FacilityAdminApiResult,
|
||||||
|
} from '@/src/types/facility-admin';
|
||||||
|
import apiFetch from '@/src/utils/apiFetch';
|
||||||
|
|
||||||
|
// ============================================================================
|
||||||
|
// Helper Functions
|
||||||
|
// ============================================================================
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Handle API response
|
||||||
|
*/
|
||||||
|
async function handleApiResponse<T>(response: Response): Promise<FacilityAdminApiResult<T>> {
|
||||||
|
if (response.ok) {
|
||||||
|
const data = await response.json();
|
||||||
|
return { success: true, data };
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle error responses (RFC-7807)
|
||||||
|
try {
|
||||||
|
const error: FacilityAdminError = await response.json();
|
||||||
|
return { success: false, error };
|
||||||
|
} catch {
|
||||||
|
// Fallback for non-JSON errors
|
||||||
|
return {
|
||||||
|
success: false,
|
||||||
|
error: {
|
||||||
|
type: 'about:blank',
|
||||||
|
title: 'API Error',
|
||||||
|
status: response.status,
|
||||||
|
detail: response.statusText || 'An unexpected error occurred',
|
||||||
|
code: 'internal_error',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============================================================================
|
||||||
|
// Membership Plans
|
||||||
|
// ============================================================================
|
||||||
|
|
||||||
|
/**
|
||||||
|
* POST /admin/facilities/{facility_id}/plans
|
||||||
|
* Create a new membership plan
|
||||||
|
*/
|
||||||
|
export async function createPlan(
|
||||||
|
facilityId: number,
|
||||||
|
request: CreatePlanRequest
|
||||||
|
): Promise<FacilityAdminApiResult<MembershipPlan>> {
|
||||||
|
try {
|
||||||
|
const response = await apiFetch(`/admin/facilities/${facilityId}/plans`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify(request),
|
||||||
|
});
|
||||||
|
|
||||||
|
return handleApiResponse<MembershipPlan>(response);
|
||||||
|
} catch (error) {
|
||||||
|
return {
|
||||||
|
success: false,
|
||||||
|
error: {
|
||||||
|
type: 'about:blank',
|
||||||
|
title: 'Network Error',
|
||||||
|
status: 0,
|
||||||
|
detail: error instanceof Error ? error.message : 'Failed to create plan',
|
||||||
|
code: 'internal_error',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* GET /admin/facilities/{facility_id}/plans
|
||||||
|
* List all membership plans for a facility
|
||||||
|
*/
|
||||||
|
export async function listPlans(
|
||||||
|
facilityId: number,
|
||||||
|
filters?: { sport_id?: number; include_inactive?: boolean }
|
||||||
|
): Promise<FacilityAdminApiResult<MembershipPlan[]>> {
|
||||||
|
try {
|
||||||
|
const params = new URLSearchParams();
|
||||||
|
if (filters?.sport_id !== undefined) params.set('sport_id', String(filters.sport_id));
|
||||||
|
if (filters?.include_inactive !== undefined) params.set('include_inactive', String(filters.include_inactive));
|
||||||
|
|
||||||
|
const queryString = params.toString();
|
||||||
|
const endpoint = `/admin/facilities/${facilityId}/plans${queryString ? `?${queryString}` : ''}`;
|
||||||
|
|
||||||
|
const response = await apiFetch(endpoint, {
|
||||||
|
method: 'GET',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
});
|
||||||
|
|
||||||
|
return handleApiResponse<MembershipPlan[]>(response);
|
||||||
|
} catch (error) {
|
||||||
|
return {
|
||||||
|
success: false,
|
||||||
|
error: {
|
||||||
|
type: 'about:blank',
|
||||||
|
title: 'Network Error',
|
||||||
|
status: 0,
|
||||||
|
detail: error instanceof Error ? error.message : 'Failed to list plans',
|
||||||
|
code: 'internal_error',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* GET /admin/facilities/{facility_id}/plans/{plan_id}
|
||||||
|
* Get a single membership plan
|
||||||
|
*/
|
||||||
|
export async function getPlan(
|
||||||
|
facilityId: number,
|
||||||
|
planId: number
|
||||||
|
): Promise<FacilityAdminApiResult<MembershipPlan>> {
|
||||||
|
try {
|
||||||
|
const response = await apiFetch(`/admin/facilities/${facilityId}/plans/${planId}`, {
|
||||||
|
method: 'GET',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
});
|
||||||
|
|
||||||
|
return handleApiResponse<MembershipPlan>(response);
|
||||||
|
} catch (error) {
|
||||||
|
return {
|
||||||
|
success: false,
|
||||||
|
error: {
|
||||||
|
type: 'about:blank',
|
||||||
|
title: 'Network Error',
|
||||||
|
status: 0,
|
||||||
|
detail: error instanceof Error ? error.message : 'Failed to get plan',
|
||||||
|
code: 'internal_error',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* PATCH /admin/facilities/{facility_id}/plans/{plan_id}
|
||||||
|
* Update a membership plan (partial update)
|
||||||
|
*/
|
||||||
|
export async function updatePlan(
|
||||||
|
facilityId: number,
|
||||||
|
planId: number,
|
||||||
|
request: UpdatePlanRequest
|
||||||
|
): Promise<FacilityAdminApiResult<MembershipPlan>> {
|
||||||
|
try {
|
||||||
|
const response = await apiFetch(`/admin/facilities/${facilityId}/plans/${planId}`, {
|
||||||
|
method: 'PATCH',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify(request),
|
||||||
|
});
|
||||||
|
|
||||||
|
return handleApiResponse<MembershipPlan>(response);
|
||||||
|
} catch (error) {
|
||||||
|
return {
|
||||||
|
success: false,
|
||||||
|
error: {
|
||||||
|
type: 'about:blank',
|
||||||
|
title: 'Network Error',
|
||||||
|
status: 0,
|
||||||
|
detail: error instanceof Error ? error.message : 'Failed to update plan',
|
||||||
|
code: 'internal_error',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* DELETE /admin/facilities/{facility_id}/plans/{plan_id}
|
||||||
|
* Delete a membership plan (soft delete by default)
|
||||||
|
*/
|
||||||
|
export async function deletePlan(
|
||||||
|
facilityId: number,
|
||||||
|
planId: number,
|
||||||
|
hardDelete: boolean = false
|
||||||
|
): Promise<FacilityAdminApiResult<void>> {
|
||||||
|
try {
|
||||||
|
const params = new URLSearchParams();
|
||||||
|
if (hardDelete) params.set('hard_delete', 'true');
|
||||||
|
|
||||||
|
const queryString = params.toString();
|
||||||
|
const endpoint = `/admin/facilities/${facilityId}/plans/${planId}${queryString ? `?${queryString}` : ''}`;
|
||||||
|
|
||||||
|
const response = await apiFetch(endpoint, {
|
||||||
|
method: 'DELETE',
|
||||||
|
});
|
||||||
|
|
||||||
|
return handleApiResponse<void>(response);
|
||||||
|
} catch (error) {
|
||||||
|
return {
|
||||||
|
success: false,
|
||||||
|
error: {
|
||||||
|
type: 'about:blank',
|
||||||
|
title: 'Network Error',
|
||||||
|
status: 0,
|
||||||
|
detail: error instanceof Error ? error.message : 'Failed to delete plan',
|
||||||
|
code: 'internal_error',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============================================================================
|
||||||
|
// Entitlements
|
||||||
|
// ============================================================================
|
||||||
|
|
||||||
|
/**
|
||||||
|
* GET /admin/facilities/{facility_id}/plans/{plan_id}/entitlements
|
||||||
|
* Get all entitlements for a plan
|
||||||
|
*/
|
||||||
|
export async function getEntitlements(
|
||||||
|
facilityId: number,
|
||||||
|
planId: number
|
||||||
|
): Promise<FacilityAdminApiResult<PlanEntitlements>> {
|
||||||
|
try {
|
||||||
|
const response = await apiFetch(`/admin/facilities/${facilityId}/plans/${planId}/entitlements`, {
|
||||||
|
method: 'GET',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
});
|
||||||
|
|
||||||
|
return handleApiResponse<PlanEntitlements>(response);
|
||||||
|
} catch (error) {
|
||||||
|
return {
|
||||||
|
success: false,
|
||||||
|
error: {
|
||||||
|
type: 'about:blank',
|
||||||
|
title: 'Network Error',
|
||||||
|
status: 0,
|
||||||
|
detail: error instanceof Error ? error.message : 'Failed to get entitlements',
|
||||||
|
code: 'internal_error',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* PUT /admin/facilities/{facility_id}/plans/{plan_id}/entitlements
|
||||||
|
* Replace all entitlements for a plan (bulk update)
|
||||||
|
*/
|
||||||
|
export async function updateEntitlements(
|
||||||
|
facilityId: number,
|
||||||
|
planId: number,
|
||||||
|
entitlements: PlanEntitlements
|
||||||
|
): Promise<FacilityAdminApiResult<PlanEntitlements>> {
|
||||||
|
try {
|
||||||
|
const response = await apiFetch(`/admin/facilities/${facilityId}/plans/${planId}/entitlements`, {
|
||||||
|
method: 'PUT',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify(entitlements),
|
||||||
|
});
|
||||||
|
|
||||||
|
return handleApiResponse<PlanEntitlements>(response);
|
||||||
|
} catch (error) {
|
||||||
|
return {
|
||||||
|
success: false,
|
||||||
|
error: {
|
||||||
|
type: 'about:blank',
|
||||||
|
title: 'Network Error',
|
||||||
|
status: 0,
|
||||||
|
detail: error instanceof Error ? error.message : 'Failed to update entitlements',
|
||||||
|
code: 'internal_error',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* PUT /admin/facilities/{facility_id}/plans/{plan_id}/entitlements/{key}
|
||||||
|
* Set or update a single entitlement
|
||||||
|
*/
|
||||||
|
export async function setEntitlement(
|
||||||
|
facilityId: number,
|
||||||
|
planId: number,
|
||||||
|
key: string,
|
||||||
|
request: SetEntitlementRequest
|
||||||
|
): Promise<FacilityAdminApiResult<{ key: string; value: string | number | boolean }>> {
|
||||||
|
try {
|
||||||
|
const response = await apiFetch(`/admin/facilities/${facilityId}/plans/${planId}/entitlements/${key}`, {
|
||||||
|
method: 'PUT',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify(request),
|
||||||
|
});
|
||||||
|
|
||||||
|
return handleApiResponse<{ key: string; value: string | number | boolean }>(response);
|
||||||
|
} catch (error) {
|
||||||
|
return {
|
||||||
|
success: false,
|
||||||
|
error: {
|
||||||
|
type: 'about:blank',
|
||||||
|
title: 'Network Error',
|
||||||
|
status: 0,
|
||||||
|
detail: error instanceof Error ? error.message : 'Failed to set entitlement',
|
||||||
|
code: 'internal_error',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* DELETE /admin/facilities/{facility_id}/plans/{plan_id}/entitlements/{key}
|
||||||
|
* Delete a specific entitlement
|
||||||
|
*/
|
||||||
|
export async function deleteEntitlement(
|
||||||
|
facilityId: number,
|
||||||
|
planId: number,
|
||||||
|
key: string
|
||||||
|
): Promise<FacilityAdminApiResult<void>> {
|
||||||
|
try {
|
||||||
|
const response = await apiFetch(`/admin/facilities/${facilityId}/plans/${planId}/entitlements/${key}`, {
|
||||||
|
method: 'DELETE',
|
||||||
|
});
|
||||||
|
|
||||||
|
return handleApiResponse<void>(response);
|
||||||
|
} catch (error) {
|
||||||
|
return {
|
||||||
|
success: false,
|
||||||
|
error: {
|
||||||
|
type: 'about:blank',
|
||||||
|
title: 'Network Error',
|
||||||
|
status: 0,
|
||||||
|
detail: error instanceof Error ? error.message : 'Failed to delete entitlement',
|
||||||
|
code: 'internal_error',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============================================================================
|
||||||
|
// Members
|
||||||
|
// ============================================================================
|
||||||
|
|
||||||
|
/**
|
||||||
|
* POST /admin/facilities/{facility_id}/members
|
||||||
|
* Add a member to a facility
|
||||||
|
*/
|
||||||
|
export async function addMember(
|
||||||
|
facilityId: number,
|
||||||
|
request: AddMemberRequest
|
||||||
|
): Promise<FacilityAdminApiResult<FacilityMember>> {
|
||||||
|
try {
|
||||||
|
const response = await apiFetch(`/admin/facilities/${facilityId}/members`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify(request),
|
||||||
|
});
|
||||||
|
|
||||||
|
return handleApiResponse<FacilityMember>(response);
|
||||||
|
} catch (error) {
|
||||||
|
return {
|
||||||
|
success: false,
|
||||||
|
error: {
|
||||||
|
type: 'about:blank',
|
||||||
|
title: 'Network Error',
|
||||||
|
status: 0,
|
||||||
|
detail: error instanceof Error ? error.message : 'Failed to add member',
|
||||||
|
code: 'internal_error',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* GET /admin/facilities/{facility_id}/members
|
||||||
|
* List all members for a facility
|
||||||
|
*/
|
||||||
|
export async function listMembers(
|
||||||
|
facilityId: number,
|
||||||
|
filters?: MemberListFilters
|
||||||
|
): Promise<FacilityAdminApiResult<FacilityMember[]>> {
|
||||||
|
try {
|
||||||
|
const params = new URLSearchParams();
|
||||||
|
if (filters?.sport_id !== undefined) params.set('sport_id', String(filters.sport_id));
|
||||||
|
if (filters?.status) params.set('status', filters.status);
|
||||||
|
if (filters?.role) params.set('role', filters.role);
|
||||||
|
if (filters?.plan_id !== undefined) params.set('plan_id', String(filters.plan_id));
|
||||||
|
|
||||||
|
const queryString = params.toString();
|
||||||
|
const endpoint = `/admin/facilities/${facilityId}/members${queryString ? `?${queryString}` : ''}`;
|
||||||
|
|
||||||
|
const response = await apiFetch(endpoint, {
|
||||||
|
method: 'GET',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
});
|
||||||
|
|
||||||
|
return handleApiResponse<FacilityMember[]>(response);
|
||||||
|
} catch (error) {
|
||||||
|
return {
|
||||||
|
success: false,
|
||||||
|
error: {
|
||||||
|
type: 'about:blank',
|
||||||
|
title: 'Network Error',
|
||||||
|
status: 0,
|
||||||
|
detail: error instanceof Error ? error.message : 'Failed to list members',
|
||||||
|
code: 'internal_error',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* GET /admin/facilities/{facility_id}/members/{member_id}
|
||||||
|
* Get a single member
|
||||||
|
*/
|
||||||
|
export async function getMember(
|
||||||
|
facilityId: number,
|
||||||
|
memberId: number
|
||||||
|
): Promise<FacilityAdminApiResult<FacilityMember>> {
|
||||||
|
try {
|
||||||
|
const response = await apiFetch(`/admin/facilities/${facilityId}/members/${memberId}`, {
|
||||||
|
method: 'GET',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
});
|
||||||
|
|
||||||
|
return handleApiResponse<FacilityMember>(response);
|
||||||
|
} catch (error) {
|
||||||
|
return {
|
||||||
|
success: false,
|
||||||
|
error: {
|
||||||
|
type: 'about:blank',
|
||||||
|
title: 'Network Error',
|
||||||
|
status: 0,
|
||||||
|
detail: error instanceof Error ? error.message : 'Failed to get member',
|
||||||
|
code: 'internal_error',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* PATCH /admin/facilities/{facility_id}/members/{member_id}
|
||||||
|
* Update a member (partial update)
|
||||||
|
*/
|
||||||
|
export async function updateMember(
|
||||||
|
facilityId: number,
|
||||||
|
memberId: number,
|
||||||
|
request: UpdateMemberRequest
|
||||||
|
): Promise<FacilityAdminApiResult<FacilityMember>> {
|
||||||
|
try {
|
||||||
|
const response = await apiFetch(`/admin/facilities/${facilityId}/members/${memberId}`, {
|
||||||
|
method: 'PATCH',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify(request),
|
||||||
|
});
|
||||||
|
|
||||||
|
return handleApiResponse<FacilityMember>(response);
|
||||||
|
} catch (error) {
|
||||||
|
return {
|
||||||
|
success: false,
|
||||||
|
error: {
|
||||||
|
type: 'about:blank',
|
||||||
|
title: 'Network Error',
|
||||||
|
status: 0,
|
||||||
|
detail: error instanceof Error ? error.message : 'Failed to update member',
|
||||||
|
code: 'internal_error',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* DELETE /admin/facilities/{facility_id}/members/{member_id}
|
||||||
|
* Delete a member (soft delete by default)
|
||||||
|
*/
|
||||||
|
export async function deleteMember(
|
||||||
|
facilityId: number,
|
||||||
|
memberId: number,
|
||||||
|
hardDelete: boolean = false
|
||||||
|
): Promise<FacilityAdminApiResult<void>> {
|
||||||
|
try {
|
||||||
|
const params = new URLSearchParams();
|
||||||
|
if (hardDelete) params.set('hard_delete', 'true');
|
||||||
|
|
||||||
|
const queryString = params.toString();
|
||||||
|
const endpoint = `/admin/facilities/${facilityId}/members/${memberId}${queryString ? `?${queryString}` : ''}`;
|
||||||
|
|
||||||
|
const response = await apiFetch(endpoint, {
|
||||||
|
method: 'DELETE',
|
||||||
|
});
|
||||||
|
|
||||||
|
return handleApiResponse<void>(response);
|
||||||
|
} catch (error) {
|
||||||
|
return {
|
||||||
|
success: false,
|
||||||
|
error: {
|
||||||
|
type: 'about:blank',
|
||||||
|
title: 'Network Error',
|
||||||
|
status: 0,
|
||||||
|
detail: error instanceof Error ? error.message : 'Failed to delete member',
|
||||||
|
code: 'internal_error',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============================================================================
|
||||||
|
// Policy
|
||||||
|
// ============================================================================
|
||||||
|
|
||||||
|
/**
|
||||||
|
* GET /admin/facilities/{facility_id}/policy
|
||||||
|
* Get facility policy (creates default if doesn't exist)
|
||||||
|
*/
|
||||||
|
export async function getPolicy(
|
||||||
|
facilityId: number
|
||||||
|
): Promise<FacilityAdminApiResult<FacilityPolicy>> {
|
||||||
|
try {
|
||||||
|
const response = await apiFetch(`/admin/facilities/${facilityId}/policy`, {
|
||||||
|
method: 'GET',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
});
|
||||||
|
|
||||||
|
return handleApiResponse<FacilityPolicy>(response);
|
||||||
|
} catch (error) {
|
||||||
|
return {
|
||||||
|
success: false,
|
||||||
|
error: {
|
||||||
|
type: 'about:blank',
|
||||||
|
title: 'Network Error',
|
||||||
|
status: 0,
|
||||||
|
detail: error instanceof Error ? error.message : 'Failed to get policy',
|
||||||
|
code: 'internal_error',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* PATCH /admin/facilities/{facility_id}/policy
|
||||||
|
* Update facility policy (partial update, upsert)
|
||||||
|
*/
|
||||||
|
export async function updatePolicy(
|
||||||
|
facilityId: number,
|
||||||
|
request: UpdatePolicyRequest
|
||||||
|
): Promise<FacilityAdminApiResult<FacilityPolicy>> {
|
||||||
|
try {
|
||||||
|
const response = await apiFetch(`/admin/facilities/${facilityId}/policy`, {
|
||||||
|
method: 'PATCH',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify(request),
|
||||||
|
});
|
||||||
|
|
||||||
|
return handleApiResponse<FacilityPolicy>(response);
|
||||||
|
} catch (error) {
|
||||||
|
return {
|
||||||
|
success: false,
|
||||||
|
error: {
|
||||||
|
type: 'about:blank',
|
||||||
|
title: 'Network Error',
|
||||||
|
status: 0,
|
||||||
|
detail: error instanceof Error ? error.message : 'Failed to update policy',
|
||||||
|
code: 'internal_error',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,226 @@
|
|||||||
|
/**
|
||||||
|
* Facility Admin TypeScript Types
|
||||||
|
*
|
||||||
|
* Based on: Admin API Endpoints - Facility Management
|
||||||
|
* Build: 495
|
||||||
|
* Date: 2025-11-24
|
||||||
|
* Phase: Phase B1 (Frontend Setup & Types)
|
||||||
|
*/
|
||||||
|
|
||||||
|
// ============================================================================
|
||||||
|
// Membership Plans
|
||||||
|
// ============================================================================
|
||||||
|
|
||||||
|
export interface MembershipPlan {
|
||||||
|
facility_membership_plan_id: number;
|
||||||
|
facility_id: number;
|
||||||
|
name: string;
|
||||||
|
billing_period: BillingPeriod;
|
||||||
|
price_cents: number;
|
||||||
|
sport_id: number | null;
|
||||||
|
is_active: boolean;
|
||||||
|
created_at?: string; // ISO8601
|
||||||
|
updated_at?: string; // ISO8601
|
||||||
|
}
|
||||||
|
|
||||||
|
export type BillingPeriod = 'daily' | 'weekly' | 'monthly' | 'quarterly' | 'yearly' | 'lifetime';
|
||||||
|
|
||||||
|
export interface CreatePlanRequest {
|
||||||
|
name: string;
|
||||||
|
billing_period: BillingPeriod;
|
||||||
|
price_cents: number;
|
||||||
|
sport_id?: number | null;
|
||||||
|
is_active?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface UpdatePlanRequest {
|
||||||
|
name?: string;
|
||||||
|
billing_period?: BillingPeriod;
|
||||||
|
price_cents?: number;
|
||||||
|
is_active?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============================================================================
|
||||||
|
// Entitlements
|
||||||
|
// ============================================================================
|
||||||
|
|
||||||
|
export interface PlanEntitlements {
|
||||||
|
advance_window_days?: number;
|
||||||
|
max_active_bookings?: number;
|
||||||
|
can_book?: boolean;
|
||||||
|
drop_in_allowed?: boolean;
|
||||||
|
price_group?: string;
|
||||||
|
daily_free_bookings?: number;
|
||||||
|
over_quota_price_cents?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface SetEntitlementRequest {
|
||||||
|
value: string | number | boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============================================================================
|
||||||
|
// Members
|
||||||
|
// ============================================================================
|
||||||
|
|
||||||
|
export type MemberRole = 'guest' | 'member' | 'staff' | 'admin';
|
||||||
|
export type MemberStatus = 'active' | 'trial' | 'grace' | 'past_due' | 'expired' | 'cancelled' | 'paused';
|
||||||
|
|
||||||
|
export interface FacilityMember {
|
||||||
|
facility_member_id: number;
|
||||||
|
facility_id: number;
|
||||||
|
app_user_id: number;
|
||||||
|
display_name: string;
|
||||||
|
email: string;
|
||||||
|
role: MemberRole;
|
||||||
|
status: MemberStatus;
|
||||||
|
facility_membership_plan_id: number | null;
|
||||||
|
plan_name?: string | null;
|
||||||
|
sport_id: number | null;
|
||||||
|
starts_at: string; // ISO8601
|
||||||
|
ends_at: string | null; // ISO8601
|
||||||
|
source: string;
|
||||||
|
created_at: string; // ISO8601
|
||||||
|
updated_at?: string; // ISO8601
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface AddMemberRequest {
|
||||||
|
app_user_id: number;
|
||||||
|
role: MemberRole;
|
||||||
|
facility_membership_plan_id?: number | null;
|
||||||
|
sport_id?: number | null;
|
||||||
|
status?: MemberStatus;
|
||||||
|
starts_at?: string; // ISO8601
|
||||||
|
ends_at?: string | null; // ISO8601
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface UpdateMemberRequest {
|
||||||
|
role?: MemberRole;
|
||||||
|
facility_membership_plan_id?: number | null;
|
||||||
|
status?: MemberStatus;
|
||||||
|
ends_at?: string | null; // ISO8601
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface MemberListFilters {
|
||||||
|
sport_id?: number;
|
||||||
|
status?: MemberStatus;
|
||||||
|
role?: MemberRole;
|
||||||
|
plan_id?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============================================================================
|
||||||
|
// Policies
|
||||||
|
// ============================================================================
|
||||||
|
|
||||||
|
export type AccessModel = 'membership_required' | 'payg_allowed' | 'open';
|
||||||
|
|
||||||
|
export interface FacilityPolicy {
|
||||||
|
facility_id: number;
|
||||||
|
access_model: AccessModel;
|
||||||
|
default_price_group: string | null;
|
||||||
|
guest_price_cents: number;
|
||||||
|
require_verified_email: boolean;
|
||||||
|
max_future_booking_days: number;
|
||||||
|
max_active_bookings: number;
|
||||||
|
created_at?: string; // ISO8601
|
||||||
|
updated_at?: string; // ISO8601
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface UpdatePolicyRequest {
|
||||||
|
access_model?: AccessModel;
|
||||||
|
guest_price_cents?: number;
|
||||||
|
default_price_group?: string | null;
|
||||||
|
require_verified_email?: boolean;
|
||||||
|
max_future_booking_days?: number;
|
||||||
|
max_active_bookings?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============================================================================
|
||||||
|
// Error Types (RFC-7807)
|
||||||
|
// ============================================================================
|
||||||
|
|
||||||
|
export interface FacilityAdminError {
|
||||||
|
type: string;
|
||||||
|
title: string;
|
||||||
|
status: number;
|
||||||
|
detail: string;
|
||||||
|
code: FacilityAdminErrorCode;
|
||||||
|
errors?: ValidationError[];
|
||||||
|
meta?: Record<string, any>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ValidationError {
|
||||||
|
field: string;
|
||||||
|
message: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export type FacilityAdminErrorCode =
|
||||||
|
| 'validation_error'
|
||||||
|
| 'not_found'
|
||||||
|
| 'unauthorized'
|
||||||
|
| 'forbidden'
|
||||||
|
| 'not_admin_for_club'
|
||||||
|
| 'internal_error'
|
||||||
|
| 'duplicate_plan'
|
||||||
|
| 'plan_has_members'
|
||||||
|
| 'member_already_exists'
|
||||||
|
| 'invalid_plan'
|
||||||
|
| 'invalid_user';
|
||||||
|
|
||||||
|
// ============================================================================
|
||||||
|
// API Result Wrapper
|
||||||
|
// ============================================================================
|
||||||
|
|
||||||
|
export type FacilityAdminApiResult<T> =
|
||||||
|
| { success: true; data: T }
|
||||||
|
| { success: false; error: FacilityAdminError };
|
||||||
|
|
||||||
|
// ============================================================================
|
||||||
|
// User-Friendly Error Messages
|
||||||
|
// ============================================================================
|
||||||
|
|
||||||
|
export const ERROR_MESSAGES: Record<FacilityAdminErrorCode, { title: string; hint: string }> = {
|
||||||
|
validation_error: {
|
||||||
|
title: 'Please fix the highlighted fields.',
|
||||||
|
hint: 'Check your input and try again.',
|
||||||
|
},
|
||||||
|
not_found: {
|
||||||
|
title: 'Not found.',
|
||||||
|
hint: 'The resource you requested does not exist.',
|
||||||
|
},
|
||||||
|
unauthorized: {
|
||||||
|
title: 'Not authenticated.',
|
||||||
|
hint: 'Please log in and try again.',
|
||||||
|
},
|
||||||
|
forbidden: {
|
||||||
|
title: 'Access denied.',
|
||||||
|
hint: "You don't have permission to perform this action.",
|
||||||
|
},
|
||||||
|
not_admin_for_club: {
|
||||||
|
title: 'No admin access.',
|
||||||
|
hint: "You don't have admin permission for this facility.",
|
||||||
|
},
|
||||||
|
internal_error: {
|
||||||
|
title: 'Something went wrong.',
|
||||||
|
hint: 'Please try again later.',
|
||||||
|
},
|
||||||
|
duplicate_plan: {
|
||||||
|
title: 'Plan already exists.',
|
||||||
|
hint: 'A plan with this name already exists for this facility.',
|
||||||
|
},
|
||||||
|
plan_has_members: {
|
||||||
|
title: 'Cannot delete plan.',
|
||||||
|
hint: 'This plan has active members. Reassign them first.',
|
||||||
|
},
|
||||||
|
member_already_exists: {
|
||||||
|
title: 'Member already exists.',
|
||||||
|
hint: 'This user is already a member of this facility.',
|
||||||
|
},
|
||||||
|
invalid_plan: {
|
||||||
|
title: 'Invalid membership plan.',
|
||||||
|
hint: 'The selected plan does not exist or is not available.',
|
||||||
|
},
|
||||||
|
invalid_user: {
|
||||||
|
title: 'Invalid user.',
|
||||||
|
hint: 'The selected user does not exist.',
|
||||||
|
},
|
||||||
|
};
|
||||||
Loading…
Reference in New Issue