feat: add slot instances management UI
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
Add complete admin UI for managing individual slot instances: Components: - SlotInstancesComponent: day view with date navigation and filters - SlotInstanceEditModal: edit times, capacity, convert to manual - ManualSlotModal: create one-off manual slots Features: - Date picker with prev/next day navigation - Filter by court and show/hide cancelled slots - Group slots by court in table view - Status badges (available, pending, booked, cancelled) - Origin badges (template, manual, maintenance) - Convert definition-based slots to manual (detach from materializer) - Create manual slots for special events - Edit slot times/capacity (protected when has bookings) - Cancel and delete slots with confirmation API Client: - getSlotInstances, createSlotInstance, updateSlotInstance, deleteSlotInstance - cancelSlotInstance, convertToManualSlot helpers Types: - SlotInstance, SlotInstancesResponse - CreateSlotInstanceRequest, UpdateSlotInstanceRequest - Helper functions for formatting and status colors Also adds "Slot Instances" tab to ClubDetailTabs navigation.master
Guillermo Pages
3 weeks ago
parent
7055eb2f43
commit
308d9d70bf
@ -0,0 +1,329 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { X, Loader2, AlertCircle, Calendar, Clock, Users, FileText, MapPin } from 'lucide-react';
|
||||
import { createSlotInstance } from '@/src/lib/api/slot-instances';
|
||||
import type { CreateSlotInstanceRequest, SlotInstanceError } from '@/src/types/slot-instances';
|
||||
import type { Court } from '@/src/types/courts';
|
||||
|
||||
interface ManualSlotModalProps {
|
||||
clubId: number;
|
||||
courts: Court[];
|
||||
initialDate: string;
|
||||
onClose: () => void;
|
||||
onSuccess: () => void;
|
||||
}
|
||||
|
||||
export default function ManualSlotModal({
|
||||
clubId,
|
||||
courts,
|
||||
initialDate,
|
||||
onClose,
|
||||
onSuccess,
|
||||
}: ManualSlotModalProps) {
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<SlotInstanceError | null>(null);
|
||||
const [validationErrors, setValidationErrors] = useState<Record<string, string>>({});
|
||||
|
||||
// Form state
|
||||
const [courtId, setCourtId] = useState<number | null>(courts[0]?.court_id ?? null);
|
||||
const [date, setDate] = useState(initialDate);
|
||||
const [startTime, setStartTime] = useState('09:00');
|
||||
const [endTime, setEndTime] = useState('10:30');
|
||||
const [capacity, setCapacity] = useState(4);
|
||||
const [reason, setReason] = useState('');
|
||||
|
||||
function validateForm(): boolean {
|
||||
const errors: Record<string, string> = {};
|
||||
|
||||
if (!courtId) {
|
||||
errors.court_id = 'Please select a court';
|
||||
}
|
||||
|
||||
if (!date) {
|
||||
errors.date = 'Please select a date';
|
||||
}
|
||||
|
||||
if (!startTime) {
|
||||
errors.start_time = 'Please enter a start time';
|
||||
}
|
||||
|
||||
if (!endTime) {
|
||||
errors.end_time = 'Please enter an end time';
|
||||
}
|
||||
|
||||
if (startTime && endTime && startTime >= endTime) {
|
||||
errors.end_time = 'End time must be after start time';
|
||||
}
|
||||
|
||||
if (capacity < 1) {
|
||||
errors.capacity = 'Capacity must be at least 1';
|
||||
}
|
||||
|
||||
setValidationErrors(errors);
|
||||
return Object.keys(errors).length === 0;
|
||||
}
|
||||
|
||||
async function handleSubmit(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
|
||||
if (!validateForm()) {
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
// Build the datetime strings
|
||||
// Note: We're creating local datetime strings - the backend will handle timezone conversion
|
||||
const startsAt = `${date}T${startTime}:00`;
|
||||
const endsAt = `${date}T${endTime}:00`;
|
||||
|
||||
const request: CreateSlotInstanceRequest = {
|
||||
court_id: courtId!,
|
||||
starts_at: startsAt,
|
||||
ends_at: endsAt,
|
||||
capacity,
|
||||
reason: reason.trim() || undefined,
|
||||
};
|
||||
|
||||
const result = await createSlotInstance(clubId, request);
|
||||
|
||||
if (result.success) {
|
||||
onSuccess();
|
||||
} else {
|
||||
setError(result.error);
|
||||
|
||||
// Handle field-level errors
|
||||
if (result.error.errors) {
|
||||
const fieldErrors: Record<string, string> = {};
|
||||
for (const err of result.error.errors) {
|
||||
fieldErrors[err.field] = err.message;
|
||||
}
|
||||
setValidationErrors(fieldErrors);
|
||||
}
|
||||
}
|
||||
|
||||
setLoading(false);
|
||||
}
|
||||
|
||||
// Calculate duration for display
|
||||
function getDuration(): string {
|
||||
if (!startTime || !endTime) return '-';
|
||||
|
||||
const [startH, startM] = startTime.split(':').map(Number);
|
||||
const [endH, endM] = endTime.split(':').map(Number);
|
||||
|
||||
const startMins = startH * 60 + startM;
|
||||
const endMins = endH * 60 + endM;
|
||||
const diffMins = endMins - startMins;
|
||||
|
||||
if (diffMins <= 0) return '-';
|
||||
|
||||
const hours = Math.floor(diffMins / 60);
|
||||
const mins = diffMins % 60;
|
||||
|
||||
if (hours === 0) return `${mins}min`;
|
||||
if (mins === 0) return `${hours}h`;
|
||||
return `${hours}h ${mins}m`;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center p-4">
|
||||
<div className="bg-white rounded-2xl p-8 max-w-lg w-full max-h-[90vh] overflow-y-auto">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-slate-900">Create Manual Slot</h2>
|
||||
<p className="text-sm text-slate-600 mt-1">
|
||||
Create a one-off booking slot
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="p-2 hover:bg-slate-100 rounded-lg transition-colors"
|
||||
>
|
||||
<X className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Info box */}
|
||||
<div className="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6">
|
||||
<p className="text-sm text-blue-900">
|
||||
Manual slots are independent of slot definitions and won't be affected
|
||||
by the materializer's automatic slot generation or cleanup.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Error display */}
|
||||
{error && (
|
||||
<div className="bg-red-50 border border-red-200 rounded-lg p-4 mb-6">
|
||||
<div className="flex items-start space-x-3">
|
||||
<AlertCircle className="w-5 h-5 text-red-600 flex-shrink-0 mt-0.5" />
|
||||
<div>
|
||||
<p className="text-sm text-red-900 font-medium">{error.title}</p>
|
||||
<p className="text-sm text-red-700 mt-1">{error.detail}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Form */}
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
{/* Court selection */}
|
||||
<div>
|
||||
<label className="block text-sm font-semibold text-slate-700 mb-2">
|
||||
<MapPin className="w-4 h-4 inline mr-1" />
|
||||
Court *
|
||||
</label>
|
||||
<select
|
||||
value={courtId ?? ''}
|
||||
onChange={(e) => setCourtId(parseInt(e.target.value))}
|
||||
disabled={loading}
|
||||
className={`w-full px-4 py-2 border-2 rounded-lg focus:ring-2 focus:ring-slate-500 focus:border-slate-500 ${
|
||||
validationErrors.court_id ? 'border-red-300' : 'border-slate-200'
|
||||
}`}
|
||||
>
|
||||
<option value="">Select a court...</option>
|
||||
{courts.map((court) => (
|
||||
<option key={court.court_id} value={court.court_id}>
|
||||
{court.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{validationErrors.court_id && (
|
||||
<p className="mt-1 text-sm text-red-600">{validationErrors.court_id}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Date */}
|
||||
<div>
|
||||
<label className="block text-sm font-semibold text-slate-700 mb-2">
|
||||
<Calendar className="w-4 h-4 inline mr-1" />
|
||||
Date *
|
||||
</label>
|
||||
<input
|
||||
type="date"
|
||||
value={date}
|
||||
onChange={(e) => setDate(e.target.value)}
|
||||
disabled={loading}
|
||||
className={`w-full px-4 py-2 border-2 rounded-lg focus:ring-2 focus:ring-slate-500 focus:border-slate-500 ${
|
||||
validationErrors.date ? 'border-red-300' : 'border-slate-200'
|
||||
}`}
|
||||
/>
|
||||
{validationErrors.date && (
|
||||
<p className="mt-1 text-sm text-red-600">{validationErrors.date}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Time range */}
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-semibold text-slate-700 mb-2">
|
||||
<Clock className="w-4 h-4 inline mr-1" />
|
||||
Start Time *
|
||||
</label>
|
||||
<input
|
||||
type="time"
|
||||
value={startTime}
|
||||
onChange={(e) => setStartTime(e.target.value)}
|
||||
disabled={loading}
|
||||
className={`w-full px-4 py-2 border-2 rounded-lg focus:ring-2 focus:ring-slate-500 focus:border-slate-500 ${
|
||||
validationErrors.start_time ? 'border-red-300' : 'border-slate-200'
|
||||
}`}
|
||||
/>
|
||||
{validationErrors.start_time && (
|
||||
<p className="mt-1 text-sm text-red-600">{validationErrors.start_time}</p>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-semibold text-slate-700 mb-2">
|
||||
<Clock className="w-4 h-4 inline mr-1" />
|
||||
End Time *
|
||||
</label>
|
||||
<input
|
||||
type="time"
|
||||
value={endTime}
|
||||
onChange={(e) => setEndTime(e.target.value)}
|
||||
disabled={loading}
|
||||
className={`w-full px-4 py-2 border-2 rounded-lg focus:ring-2 focus:ring-slate-500 focus:border-slate-500 ${
|
||||
validationErrors.end_time ? 'border-red-300' : 'border-slate-200'
|
||||
}`}
|
||||
/>
|
||||
{validationErrors.end_time && (
|
||||
<p className="mt-1 text-sm text-red-600">{validationErrors.end_time}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Duration display */}
|
||||
<div className="bg-slate-50 rounded-lg px-4 py-3 text-center">
|
||||
<span className="text-sm text-slate-600">Duration: </span>
|
||||
<span className="text-sm font-semibold text-slate-900">{getDuration()}</span>
|
||||
</div>
|
||||
|
||||
{/* Capacity */}
|
||||
<div>
|
||||
<label className="block text-sm font-semibold text-slate-700 mb-2">
|
||||
<Users className="w-4 h-4 inline mr-1" />
|
||||
Capacity *
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
min="1"
|
||||
max="20"
|
||||
value={capacity}
|
||||
onChange={(e) => setCapacity(parseInt(e.target.value) || 1)}
|
||||
disabled={loading}
|
||||
className={`w-full px-4 py-2 border-2 rounded-lg focus:ring-2 focus:ring-slate-500 focus:border-slate-500 ${
|
||||
validationErrors.capacity ? 'border-red-300' : 'border-slate-200'
|
||||
}`}
|
||||
/>
|
||||
{validationErrors.capacity && (
|
||||
<p className="mt-1 text-sm text-red-600">{validationErrors.capacity}</p>
|
||||
)}
|
||||
<p className="mt-1 text-xs text-slate-500">
|
||||
Number of players this slot can accommodate
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Reason/Notes */}
|
||||
<div>
|
||||
<label className="block text-sm font-semibold text-slate-700 mb-2">
|
||||
<FileText className="w-4 h-4 inline mr-1" />
|
||||
Notes (optional)
|
||||
</label>
|
||||
<textarea
|
||||
value={reason}
|
||||
onChange={(e) => setReason(e.target.value)}
|
||||
disabled={loading}
|
||||
rows={2}
|
||||
placeholder="e.g., Tournament slot, Private event, etc."
|
||||
className="w-full px-4 py-2 border-2 border-slate-200 rounded-lg focus:ring-2 focus:ring-slate-500 focus:border-slate-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex items-center justify-end space-x-3 pt-4 border-t border-slate-200">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
disabled={loading}
|
||||
className="px-6 py-2 text-slate-700 font-medium hover:bg-slate-100 rounded-lg transition-colors"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="inline-flex items-center px-6 py-2 bg-slate-900 text-white font-semibold rounded-lg hover:bg-slate-800 transition-colors disabled:opacity-50"
|
||||
>
|
||||
{loading && <Loader2 className="w-4 h-4 mr-2 animate-spin" />}
|
||||
Create Slot
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,324 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { X, Loader2, AlertCircle, Clock, Users, FileText, Shield } from 'lucide-react';
|
||||
import { updateSlotInstance, convertToManualSlot } from '@/src/lib/api/slot-instances';
|
||||
import type { SlotInstance, UpdateSlotInstanceRequest, SlotInstanceError } from '@/src/types/slot-instances';
|
||||
import {
|
||||
formatSlotTime,
|
||||
getStatusColor,
|
||||
getOriginColor,
|
||||
getOriginLabel,
|
||||
canEditSlotTimes,
|
||||
} from '@/src/types/slot-instances';
|
||||
|
||||
interface SlotInstanceEditModalProps {
|
||||
clubId: number;
|
||||
slot: SlotInstance;
|
||||
onClose: () => void;
|
||||
onSuccess: () => void;
|
||||
}
|
||||
|
||||
export default function SlotInstanceEditModal({
|
||||
clubId,
|
||||
slot,
|
||||
onClose,
|
||||
onSuccess,
|
||||
}: SlotInstanceEditModalProps) {
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<SlotInstanceError | null>(null);
|
||||
|
||||
// Form state - parse times from ISO strings
|
||||
const startDate = new Date(slot.starts_at);
|
||||
const endDate = new Date(slot.ends_at);
|
||||
|
||||
const [startsAtTime, setStartsAtTime] = useState(
|
||||
startDate.toTimeString().slice(0, 5) // HH:MM
|
||||
);
|
||||
const [endsAtTime, setEndsAtTime] = useState(
|
||||
endDate.toTimeString().slice(0, 5) // HH:MM
|
||||
);
|
||||
const [capacity, setCapacity] = useState(slot.capacity);
|
||||
const [reason, setReason] = useState(slot.reason ?? '');
|
||||
|
||||
const canEditTimes = canEditSlotTimes(slot);
|
||||
const isFromDefinition = slot.origin_kind === 'definition';
|
||||
|
||||
async function handleSubmit(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
// Build the request
|
||||
const request: UpdateSlotInstanceRequest = {};
|
||||
|
||||
// Only include time changes if allowed
|
||||
if (canEditTimes) {
|
||||
// Parse date from the original slot and combine with new times
|
||||
const dateStr = slot.starts_at.split('T')[0];
|
||||
|
||||
const newStartsAt = `${dateStr}T${startsAtTime}:00`;
|
||||
const newEndsAt = `${dateStr}T${endsAtTime}:00`;
|
||||
|
||||
// Check if times changed
|
||||
const originalStartTime = formatSlotTime(slot.starts_at);
|
||||
const originalEndTime = formatSlotTime(slot.ends_at);
|
||||
|
||||
if (startsAtTime !== originalStartTime) {
|
||||
request.starts_at = newStartsAt;
|
||||
}
|
||||
if (endsAtTime !== originalEndTime) {
|
||||
request.ends_at = newEndsAt;
|
||||
}
|
||||
}
|
||||
|
||||
if (capacity !== slot.capacity) {
|
||||
request.capacity = capacity;
|
||||
}
|
||||
|
||||
if (reason !== (slot.reason ?? '')) {
|
||||
request.reason = reason || undefined;
|
||||
}
|
||||
|
||||
// Check if anything changed
|
||||
if (Object.keys(request).length === 0) {
|
||||
setError({
|
||||
type: 'about:blank',
|
||||
title: 'No Changes',
|
||||
status: 400,
|
||||
detail: 'No changes to save',
|
||||
code: 'no_changes',
|
||||
});
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const result = await updateSlotInstance(clubId, slot.slot_instance_id, request);
|
||||
|
||||
if (result.success) {
|
||||
onSuccess();
|
||||
} else {
|
||||
setError(result.error);
|
||||
}
|
||||
|
||||
setLoading(false);
|
||||
}
|
||||
|
||||
async function handleConvertToManual() {
|
||||
if (!confirm('Convert this slot to manual? This will detach it from its template definition, preventing automatic updates or cleanup.')) {
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
const result = await convertToManualSlot(
|
||||
clubId,
|
||||
slot.slot_instance_id,
|
||||
`Converted to manual by admin (was: definition ${slot.origin_definition_id})`
|
||||
);
|
||||
|
||||
if (result.success) {
|
||||
onSuccess();
|
||||
} else {
|
||||
setError(result.error);
|
||||
}
|
||||
|
||||
setLoading(false);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center p-4">
|
||||
<div className="bg-white rounded-2xl p-8 max-w-lg w-full max-h-[90vh] overflow-y-auto">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-slate-900">Edit Slot</h2>
|
||||
<p className="text-sm text-slate-600 mt-1">{slot.court_name}</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="p-2 hover:bg-slate-100 rounded-lg transition-colors"
|
||||
>
|
||||
<X className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Current slot info */}
|
||||
<div className="bg-slate-50 rounded-xl p-4 mb-6">
|
||||
<div className="grid grid-cols-2 gap-4 text-sm">
|
||||
<div>
|
||||
<span className="text-slate-500">Status:</span>
|
||||
<span className={`ml-2 inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${getStatusColor(slot.status)}`}>
|
||||
{slot.display_status}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-slate-500">Origin:</span>
|
||||
<span className={`ml-2 inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${getOriginColor(slot.origin_kind)}`}>
|
||||
{getOriginLabel(slot.origin_kind)}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-slate-500">Bookings:</span>
|
||||
<span className="ml-2 font-medium text-slate-900">
|
||||
{slot.booked_count} / {slot.capacity}
|
||||
</span>
|
||||
</div>
|
||||
{slot.origin_definition_id && (
|
||||
<div>
|
||||
<span className="text-slate-500">Definition ID:</span>
|
||||
<span className="ml-2 font-mono text-slate-900">
|
||||
#{slot.origin_definition_id}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Warning for slots with bookings */}
|
||||
{slot.booked_count > 0 && (
|
||||
<div className="bg-amber-50 border border-amber-200 rounded-lg p-4 mb-6">
|
||||
<div className="flex items-start space-x-3">
|
||||
<AlertCircle className="w-5 h-5 text-amber-600 flex-shrink-0 mt-0.5" />
|
||||
<div>
|
||||
<p className="text-sm text-amber-900 font-medium">
|
||||
This slot has {slot.booked_count} active booking(s)
|
||||
</p>
|
||||
<p className="text-sm text-amber-700 mt-1">
|
||||
Time changes are disabled to protect existing bookings.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Error display */}
|
||||
{error && (
|
||||
<div className="bg-red-50 border border-red-200 rounded-lg p-4 mb-6">
|
||||
<div className="flex items-start space-x-3">
|
||||
<AlertCircle className="w-5 h-5 text-red-600 flex-shrink-0 mt-0.5" />
|
||||
<div>
|
||||
<p className="text-sm text-red-900 font-medium">{error.title}</p>
|
||||
<p className="text-sm text-red-700 mt-1">{error.detail}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Form */}
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
{/* Time fields */}
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-semibold text-slate-700 mb-2">
|
||||
<Clock className="w-4 h-4 inline mr-1" />
|
||||
Start Time
|
||||
</label>
|
||||
<input
|
||||
type="time"
|
||||
value={startsAtTime}
|
||||
onChange={(e) => setStartsAtTime(e.target.value)}
|
||||
disabled={!canEditTimes || loading}
|
||||
className="w-full px-4 py-2 border-2 border-slate-200 rounded-lg focus:ring-2 focus:ring-slate-500 focus:border-slate-500 disabled:bg-slate-100 disabled:cursor-not-allowed"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-semibold text-slate-700 mb-2">
|
||||
<Clock className="w-4 h-4 inline mr-1" />
|
||||
End Time
|
||||
</label>
|
||||
<input
|
||||
type="time"
|
||||
value={endsAtTime}
|
||||
onChange={(e) => setEndsAtTime(e.target.value)}
|
||||
disabled={!canEditTimes || loading}
|
||||
className="w-full px-4 py-2 border-2 border-slate-200 rounded-lg focus:ring-2 focus:ring-slate-500 focus:border-slate-500 disabled:bg-slate-100 disabled:cursor-not-allowed"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Capacity */}
|
||||
<div>
|
||||
<label className="block text-sm font-semibold text-slate-700 mb-2">
|
||||
<Users className="w-4 h-4 inline mr-1" />
|
||||
Capacity
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
min="1"
|
||||
max="20"
|
||||
value={capacity}
|
||||
onChange={(e) => setCapacity(parseInt(e.target.value) || 1)}
|
||||
disabled={loading}
|
||||
className="w-full px-4 py-2 border-2 border-slate-200 rounded-lg focus:ring-2 focus:ring-slate-500 focus:border-slate-500 disabled:bg-slate-100"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Reason/Notes */}
|
||||
<div>
|
||||
<label className="block text-sm font-semibold text-slate-700 mb-2">
|
||||
<FileText className="w-4 h-4 inline mr-1" />
|
||||
Notes / Reason
|
||||
</label>
|
||||
<textarea
|
||||
value={reason}
|
||||
onChange={(e) => setReason(e.target.value)}
|
||||
disabled={loading}
|
||||
rows={2}
|
||||
placeholder="Optional notes about this slot..."
|
||||
className="w-full px-4 py-2 border-2 border-slate-200 rounded-lg focus:ring-2 focus:ring-slate-500 focus:border-slate-500 disabled:bg-slate-100"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Convert to Manual button (for definition slots) */}
|
||||
{isFromDefinition && (
|
||||
<div className="border-t border-slate-200 pt-6">
|
||||
<div className="flex items-start space-x-3 mb-4">
|
||||
<Shield className="w-5 h-5 text-purple-600 flex-shrink-0 mt-0.5" />
|
||||
<div>
|
||||
<p className="text-sm font-medium text-slate-900">
|
||||
Detach from Template
|
||||
</p>
|
||||
<p className="text-sm text-slate-600 mt-1">
|
||||
Convert this slot to manual to prevent it from being updated or
|
||||
cleaned up by the materializer. Use this for special one-off
|
||||
schedule changes.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleConvertToManual}
|
||||
disabled={loading}
|
||||
className="w-full px-4 py-2 border-2 border-purple-200 text-purple-700 font-medium rounded-lg hover:bg-purple-50 transition-colors disabled:opacity-50"
|
||||
>
|
||||
Convert to Manual Slot
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex items-center justify-end space-x-3 pt-4 border-t border-slate-200">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
disabled={loading}
|
||||
className="px-6 py-2 text-slate-700 font-medium hover:bg-slate-100 rounded-lg transition-colors"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="inline-flex items-center px-6 py-2 bg-slate-900 text-white font-semibold rounded-lg hover:bg-slate-800 transition-colors disabled:opacity-50"
|
||||
>
|
||||
{loading && <Loader2 className="w-4 h-4 mr-2 animate-spin" />}
|
||||
Save Changes
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,480 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import {
|
||||
Calendar,
|
||||
Plus,
|
||||
Loader2,
|
||||
AlertCircle,
|
||||
ArrowLeft,
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
RefreshCw,
|
||||
Filter,
|
||||
} from 'lucide-react';
|
||||
import Link from 'next/link';
|
||||
import useTranslation from '@/src/hooks/useTranslation';
|
||||
import { getSlotInstances, deleteSlotInstance, cancelSlotInstance } from '@/src/lib/api/slot-instances';
|
||||
import { getAdminClubDetail } from '@/src/lib/api/admin-clubs';
|
||||
import type { SlotInstance, SlotInstanceError } from '@/src/types/slot-instances';
|
||||
import {
|
||||
formatSlotTime,
|
||||
formatSlotDuration,
|
||||
getStatusColor,
|
||||
getOriginColor,
|
||||
getOriginLabel,
|
||||
canDeleteSlot,
|
||||
canCancelSlot,
|
||||
} from '@/src/types/slot-instances';
|
||||
import type { Court } from '@/src/types/courts';
|
||||
import SlotInstanceEditModal from './SlotInstanceEditModal';
|
||||
import ManualSlotModal from './ManualSlotModal';
|
||||
|
||||
interface SlotInstancesComponentProps {
|
||||
clubId: number;
|
||||
}
|
||||
|
||||
export default function SlotInstancesComponent({ clubId }: SlotInstancesComponentProps) {
|
||||
const { t, locale } = useTranslation();
|
||||
const [slots, setSlots] = useState<SlotInstance[]>([]);
|
||||
const [courts, setCourts] = useState<Court[]>([]);
|
||||
const [timezone, setTimezone] = useState<string>('UTC');
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<SlotInstanceError | null>(null);
|
||||
|
||||
// Date navigation
|
||||
const [selectedDate, setSelectedDate] = useState<string>(() => {
|
||||
const today = new Date();
|
||||
return today.toISOString().split('T')[0];
|
||||
});
|
||||
|
||||
// Filters
|
||||
const [selectedCourtId, setSelectedCourtId] = useState<number | null>(null);
|
||||
const [showCancelled, setShowCancelled] = useState(false);
|
||||
|
||||
// Modals
|
||||
const [editingSlot, setEditingSlot] = useState<SlotInstance | null>(null);
|
||||
const [showCreateModal, setShowCreateModal] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
loadCourts();
|
||||
}, [clubId]);
|
||||
|
||||
useEffect(() => {
|
||||
loadSlots();
|
||||
}, [clubId, selectedDate, selectedCourtId, showCancelled]);
|
||||
|
||||
async function loadCourts() {
|
||||
const result = await getAdminClubDetail(clubId);
|
||||
if (result.success) {
|
||||
setCourts(result.data.courts);
|
||||
}
|
||||
}
|
||||
|
||||
async function loadSlots() {
|
||||
setLoading(true);
|
||||
const result = await getSlotInstances(clubId, selectedDate, {
|
||||
court_id: selectedCourtId ?? undefined,
|
||||
include_cancelled: showCancelled,
|
||||
});
|
||||
|
||||
if (result.success) {
|
||||
setSlots(result.data.slots);
|
||||
setTimezone(result.data.timezone);
|
||||
setError(null);
|
||||
} else {
|
||||
setError(result.error);
|
||||
setSlots([]);
|
||||
}
|
||||
setLoading(false);
|
||||
}
|
||||
|
||||
function navigateDate(direction: 'prev' | 'next') {
|
||||
const date = new Date(selectedDate);
|
||||
date.setDate(date.getDate() + (direction === 'prev' ? -1 : 1));
|
||||
setSelectedDate(date.toISOString().split('T')[0]);
|
||||
}
|
||||
|
||||
function goToToday() {
|
||||
setSelectedDate(new Date().toISOString().split('T')[0]);
|
||||
}
|
||||
|
||||
async function handleDelete(slot: SlotInstance) {
|
||||
if (!confirm(`Delete slot ${formatSlotTime(slot.starts_at)} - ${formatSlotTime(slot.ends_at)} on ${slot.court_name}?`)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const result = await deleteSlotInstance(clubId, slot.slot_instance_id);
|
||||
if (result.success) {
|
||||
loadSlots();
|
||||
} else {
|
||||
alert(`Failed to delete: ${result.error.detail}`);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleCancel(slot: SlotInstance) {
|
||||
if (!confirm(`Cancel slot ${formatSlotTime(slot.starts_at)} - ${formatSlotTime(slot.ends_at)} on ${slot.court_name}?`)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const result = await cancelSlotInstance(clubId, slot.slot_instance_id);
|
||||
if (result.success) {
|
||||
loadSlots();
|
||||
} else {
|
||||
alert(`Failed to cancel: ${result.error.detail}`);
|
||||
}
|
||||
}
|
||||
|
||||
// Format selected date for display
|
||||
const displayDate = new Date(selectedDate + 'T00:00:00').toLocaleDateString('en-US', {
|
||||
weekday: 'long',
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
});
|
||||
|
||||
// Group slots by court for table display
|
||||
const slotsByCourt = slots.reduce((acc, slot) => {
|
||||
if (!acc[slot.court_name]) {
|
||||
acc[slot.court_name] = [];
|
||||
}
|
||||
acc[slot.court_name].push(slot);
|
||||
return acc;
|
||||
}, {} as Record<string, SlotInstance[]>);
|
||||
|
||||
// Error state
|
||||
if (error && !loading) {
|
||||
return (
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
|
||||
<div className="max-w-2xl mx-auto">
|
||||
<div className="bg-red-50 border-2 border-red-200 rounded-2xl p-8">
|
||||
<div className="flex items-start space-x-4">
|
||||
<AlertCircle className="w-8 h-8 text-red-600 flex-shrink-0 mt-1" />
|
||||
<div className="flex-1">
|
||||
<h2 className="text-2xl font-bold text-slate-900 mb-4">
|
||||
Error Loading Slot Instances
|
||||
</h2>
|
||||
<p className="text-slate-700 mb-4 leading-relaxed">
|
||||
{error.detail}
|
||||
</p>
|
||||
<p className="text-sm text-slate-600 font-mono mb-6">
|
||||
Error code: {error.code}
|
||||
</p>
|
||||
<Link
|
||||
href={`/${locale}/admin/clubs/${clubId}`}
|
||||
className="inline-flex items-center px-4 py-2 bg-slate-900 text-white font-semibold rounded-lg hover:bg-slate-800 transition-colors"
|
||||
>
|
||||
<ArrowLeft className="w-4 h-4 mr-2" />
|
||||
Back to club
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
||||
{/* Header */}
|
||||
<div className="mb-8">
|
||||
<Link
|
||||
href={`/${locale}/admin/clubs/${clubId}`}
|
||||
className="inline-flex items-center text-slate-600 hover:text-slate-900 font-medium transition-colors mb-4"
|
||||
>
|
||||
<ArrowLeft className="w-4 h-4 mr-2" />
|
||||
Back to club
|
||||
</Link>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-4xl font-bold text-slate-900 mb-2 tracking-tight">
|
||||
Slot Instances
|
||||
</h1>
|
||||
<p className="text-lg text-slate-600 font-light">
|
||||
View and manage individual booking slots
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={() => setShowCreateModal(true)}
|
||||
className="inline-flex items-center px-6 py-3 bg-slate-900 text-white font-semibold rounded-lg hover:bg-slate-800 transition-colors shadow-lg"
|
||||
>
|
||||
<Plus className="w-5 h-5 mr-2" />
|
||||
Create Slot
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Date Navigation & Filters */}
|
||||
<div className="bg-white border-2 border-slate-200 rounded-2xl p-6 mb-6">
|
||||
<div className="flex flex-wrap items-center justify-between gap-4">
|
||||
{/* Date picker */}
|
||||
<div className="flex items-center space-x-3">
|
||||
<button
|
||||
onClick={() => navigateDate('prev')}
|
||||
className="p-2 hover:bg-slate-100 rounded-lg transition-colors"
|
||||
title="Previous day"
|
||||
>
|
||||
<ChevronLeft className="w-5 h-5" />
|
||||
</button>
|
||||
|
||||
<div className="flex items-center space-x-2">
|
||||
<Calendar className="w-5 h-5 text-slate-500" />
|
||||
<input
|
||||
type="date"
|
||||
value={selectedDate}
|
||||
onChange={(e) => setSelectedDate(e.target.value)}
|
||||
className="px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-slate-500 focus:border-slate-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={() => navigateDate('next')}
|
||||
className="p-2 hover:bg-slate-100 rounded-lg transition-colors"
|
||||
title="Next day"
|
||||
>
|
||||
<ChevronRight className="w-5 h-5" />
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={goToToday}
|
||||
className="px-3 py-2 text-sm font-medium text-slate-700 hover:bg-slate-100 rounded-lg transition-colors"
|
||||
>
|
||||
Today
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Filters */}
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Filter className="w-4 h-4 text-slate-500" />
|
||||
<select
|
||||
value={selectedCourtId ?? ''}
|
||||
onChange={(e) => setSelectedCourtId(e.target.value ? parseInt(e.target.value) : null)}
|
||||
className="px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-slate-500 focus:border-slate-500"
|
||||
>
|
||||
<option value="">All courts</option>
|
||||
{courts.map((court) => (
|
||||
<option key={court.court_id} value={court.court_id}>
|
||||
{court.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<label className="flex items-center space-x-2 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={showCancelled}
|
||||
onChange={(e) => setShowCancelled(e.target.checked)}
|
||||
className="w-4 h-4 rounded border-slate-300 text-slate-600 focus:ring-slate-500"
|
||||
/>
|
||||
<span className="text-sm text-slate-700">Show cancelled</span>
|
||||
</label>
|
||||
|
||||
<button
|
||||
onClick={loadSlots}
|
||||
className="p-2 hover:bg-slate-100 rounded-lg transition-colors"
|
||||
title="Refresh"
|
||||
>
|
||||
<RefreshCw className={`w-5 h-5 ${loading ? 'animate-spin' : ''}`} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 text-center">
|
||||
<h2 className="text-xl font-semibold text-slate-800">{displayDate}</h2>
|
||||
<p className="text-sm text-slate-500">Timezone: {timezone}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Loading state */}
|
||||
{loading && (
|
||||
<div className="flex flex-col items-center justify-center py-20">
|
||||
<Loader2 className="w-12 h-12 text-slate-900 animate-spin" />
|
||||
<p className="text-slate-600 font-medium mt-4">Loading slots...</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Empty state */}
|
||||
{!loading && slots.length === 0 && (
|
||||
<div className="bg-slate-50 border-2 border-slate-200 rounded-2xl p-12">
|
||||
<div className="flex flex-col items-center text-center space-y-6">
|
||||
<Calendar className="w-20 h-20 text-slate-400" />
|
||||
<h2 className="text-2xl font-bold text-slate-900">
|
||||
No Slots for This Day
|
||||
</h2>
|
||||
<p className="text-slate-600 max-w-md leading-relaxed">
|
||||
There are no slot instances for {displayDate}.
|
||||
{!showCancelled && ' Try showing cancelled slots or selecting a different date.'}
|
||||
</p>
|
||||
<button
|
||||
onClick={() => setShowCreateModal(true)}
|
||||
className="inline-flex items-center px-6 py-3 bg-slate-900 text-white font-semibold rounded-lg hover:bg-slate-800 transition-colors"
|
||||
>
|
||||
<Plus className="w-5 h-5 mr-2" />
|
||||
Create Manual Slot
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Slots Table */}
|
||||
{!loading && slots.length > 0 && (
|
||||
<div className="space-y-6">
|
||||
{Object.entries(slotsByCourt).map(([courtName, courtSlots]) => (
|
||||
<div key={courtName} className="bg-white border-2 border-slate-200 rounded-2xl overflow-hidden shadow-sm">
|
||||
<div className="bg-slate-50 border-b-2 border-slate-200 px-6 py-4">
|
||||
<h3 className="text-lg font-bold text-slate-900">{courtName}</h3>
|
||||
<p className="text-sm text-slate-600">{courtSlots.length} slot{courtSlots.length !== 1 ? 's' : ''}</p>
|
||||
</div>
|
||||
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead className="bg-slate-50 border-b border-slate-200">
|
||||
<tr>
|
||||
<th className="px-6 py-3 text-left text-xs font-bold text-slate-700 uppercase tracking-wider">Time</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-bold text-slate-700 uppercase tracking-wider">Duration</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-bold text-slate-700 uppercase tracking-wider">Status</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-bold text-slate-700 uppercase tracking-wider">Bookings</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-bold text-slate-700 uppercase tracking-wider">Origin</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-bold text-slate-700 uppercase tracking-wider">Reason</th>
|
||||
<th className="px-6 py-3 text-right text-xs font-bold text-slate-700 uppercase tracking-wider">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-slate-100">
|
||||
{courtSlots.map((slot) => (
|
||||
<tr
|
||||
key={slot.slot_instance_id}
|
||||
className={`hover:bg-slate-50 transition-colors ${slot.status === 'cancelled' ? 'opacity-60' : ''}`}
|
||||
>
|
||||
<td className="px-6 py-4">
|
||||
<span className="font-semibold text-slate-900">
|
||||
{formatSlotTime(slot.starts_at)} - {formatSlotTime(slot.ends_at)}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<span className="text-slate-700">
|
||||
{formatSlotDuration(slot.starts_at, slot.ends_at)}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${getStatusColor(slot.status)}`}>
|
||||
{slot.display_status}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<span className={`font-medium ${slot.booked_count > 0 ? 'text-blue-600' : 'text-slate-500'}`}>
|
||||
{slot.booked_count} / {slot.capacity}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${getOriginColor(slot.origin_kind)}`}>
|
||||
{getOriginLabel(slot.origin_kind)}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
{slot.reason ? (
|
||||
<span className="text-sm text-slate-600 truncate max-w-[200px] block" title={slot.reason}>
|
||||
{slot.reason}
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-sm text-slate-400 italic">-</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<div className="flex items-center justify-end space-x-2">
|
||||
<button
|
||||
onClick={() => setEditingSlot(slot)}
|
||||
className="px-3 py-1.5 text-sm font-medium text-slate-700 hover:text-slate-900 hover:bg-slate-100 rounded-lg transition-colors"
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
{canCancelSlot(slot) && slot.status !== 'cancelled' && (
|
||||
<button
|
||||
onClick={() => handleCancel(slot)}
|
||||
className="px-3 py-1.5 text-sm font-medium text-amber-700 hover:text-amber-900 hover:bg-amber-50 rounded-lg transition-colors"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
)}
|
||||
{canDeleteSlot(slot) && (
|
||||
<button
|
||||
onClick={() => handleDelete(slot)}
|
||||
className="px-3 py-1.5 text-sm font-medium text-red-700 hover:text-red-900 hover:bg-red-50 rounded-lg transition-colors"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Summary */}
|
||||
{!loading && slots.length > 0 && (
|
||||
<div className="mt-6 bg-slate-50 border-2 border-slate-200 rounded-xl p-4">
|
||||
<div className="flex flex-wrap items-center justify-center gap-6 text-sm">
|
||||
<div className="flex items-center space-x-2">
|
||||
<span className="w-3 h-3 rounded-full bg-green-500"></span>
|
||||
<span className="text-slate-700">Open: {slots.filter(s => s.status === 'open').length}</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<span className="w-3 h-3 rounded-full bg-yellow-500"></span>
|
||||
<span className="text-slate-700">Held: {slots.filter(s => s.status === 'held').length}</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<span className="w-3 h-3 rounded-full bg-blue-500"></span>
|
||||
<span className="text-slate-700">Booked: {slots.filter(s => s.status === 'booked').length}</span>
|
||||
</div>
|
||||
{showCancelled && (
|
||||
<div className="flex items-center space-x-2">
|
||||
<span className="w-3 h-3 rounded-full bg-red-500"></span>
|
||||
<span className="text-slate-700">Cancelled: {slots.filter(s => s.status === 'cancelled').length}</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="border-l border-slate-300 pl-6">
|
||||
<span className="font-semibold text-slate-900">Total: {slots.length}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Edit Modal */}
|
||||
{editingSlot && (
|
||||
<SlotInstanceEditModal
|
||||
clubId={clubId}
|
||||
slot={editingSlot}
|
||||
onClose={() => setEditingSlot(null)}
|
||||
onSuccess={() => {
|
||||
setEditingSlot(null);
|
||||
loadSlots();
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Create Modal */}
|
||||
{showCreateModal && (
|
||||
<ManualSlotModal
|
||||
clubId={clubId}
|
||||
courts={courts}
|
||||
initialDate={selectedDate}
|
||||
onClose={() => setShowCreateModal(false)}
|
||||
onSuccess={() => {
|
||||
setShowCreateModal(false);
|
||||
loadSlots();
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,17 @@
|
||||
import AdminAuthGuard from '@/src/components/AdminAuthGuard';
|
||||
import SlotInstancesComponent from './SlotInstancesComponent';
|
||||
|
||||
export default async function SlotInstancesPage({
|
||||
params
|
||||
}: {
|
||||
params: Promise<{ club_id: string }>;
|
||||
}) {
|
||||
const { club_id } = await params;
|
||||
const clubId = parseInt(club_id, 10);
|
||||
|
||||
return (
|
||||
<AdminAuthGuard>
|
||||
<SlotInstancesComponent clubId={clubId} />
|
||||
</AdminAuthGuard>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,216 @@
|
||||
/**
|
||||
* Slot Instances API Client
|
||||
*
|
||||
* Handles CRUD operations for slot instances (materialized slots).
|
||||
*/
|
||||
|
||||
import type {
|
||||
SlotInstance,
|
||||
SlotInstancesResponse,
|
||||
CreateSlotInstanceRequest,
|
||||
UpdateSlotInstanceRequest,
|
||||
SlotInstanceMutationResponse,
|
||||
SlotInstanceError,
|
||||
} from '@/src/types/slot-instances';
|
||||
import apiFetch from '@/src/utils/apiFetch';
|
||||
|
||||
type ApiResult<T> =
|
||||
| { success: true; data: T }
|
||||
| { success: false; error: SlotInstanceError };
|
||||
|
||||
/**
|
||||
* List slot instances for a facility on a specific date
|
||||
*/
|
||||
export async function getSlotInstances(
|
||||
clubId: number,
|
||||
date: string,
|
||||
filters?: {
|
||||
court_id?: number;
|
||||
status?: string;
|
||||
include_cancelled?: boolean;
|
||||
}
|
||||
): Promise<ApiResult<SlotInstancesResponse>> {
|
||||
try {
|
||||
const params = new URLSearchParams({ date });
|
||||
|
||||
if (filters?.court_id) {
|
||||
params.append('court_id', filters.court_id.toString());
|
||||
}
|
||||
if (filters?.status) {
|
||||
params.append('status', filters.status);
|
||||
}
|
||||
if (filters?.include_cancelled) {
|
||||
params.append('include_cancelled', 'true');
|
||||
}
|
||||
|
||||
const response = await apiFetch(
|
||||
`/admin/facilities/${clubId}/slot-instances?${params.toString()}`,
|
||||
{
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
if (!response.ok) {
|
||||
const error: SlotInstanceError = await response.json();
|
||||
return { success: false, error };
|
||||
}
|
||||
|
||||
const data: SlotInstancesResponse = await response.json();
|
||||
return { success: true, data };
|
||||
} catch (error) {
|
||||
return {
|
||||
success: false,
|
||||
error: {
|
||||
type: 'about:blank',
|
||||
title: 'Network Error',
|
||||
status: 0,
|
||||
detail: 'Failed to fetch slot instances. Please check your connection.',
|
||||
code: 'network_error',
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Create a new manual slot instance
|
||||
*/
|
||||
export async function createSlotInstance(
|
||||
clubId: number,
|
||||
request: CreateSlotInstanceRequest
|
||||
): Promise<ApiResult<SlotInstanceMutationResponse>> {
|
||||
try {
|
||||
const response = await apiFetch(`/admin/facilities/${clubId}/slot-instances`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(request),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const error: SlotInstanceError = await response.json();
|
||||
return { success: false, error };
|
||||
}
|
||||
|
||||
const data: SlotInstanceMutationResponse = await response.json();
|
||||
return { success: true, data };
|
||||
} catch (error) {
|
||||
return {
|
||||
success: false,
|
||||
error: {
|
||||
type: 'about:blank',
|
||||
title: 'Network Error',
|
||||
status: 0,
|
||||
detail: 'Failed to create slot instance. Please check your connection.',
|
||||
code: 'network_error',
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Update an existing slot instance
|
||||
*/
|
||||
export async function updateSlotInstance(
|
||||
clubId: number,
|
||||
slotInstanceId: number,
|
||||
request: UpdateSlotInstanceRequest
|
||||
): Promise<ApiResult<SlotInstanceMutationResponse>> {
|
||||
try {
|
||||
const response = await apiFetch(
|
||||
`/admin/facilities/${clubId}/slot-instances/${slotInstanceId}`,
|
||||
{
|
||||
method: 'PATCH',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(request),
|
||||
}
|
||||
);
|
||||
|
||||
if (!response.ok) {
|
||||
const error: SlotInstanceError = await response.json();
|
||||
return { success: false, error };
|
||||
}
|
||||
|
||||
const data: SlotInstanceMutationResponse = await response.json();
|
||||
return { success: true, data };
|
||||
} catch (error) {
|
||||
return {
|
||||
success: false,
|
||||
error: {
|
||||
type: 'about:blank',
|
||||
title: 'Network Error',
|
||||
status: 0,
|
||||
detail: 'Failed to update slot instance. Please check your connection.',
|
||||
code: 'network_error',
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Delete a slot instance (hard delete - only if no bookings)
|
||||
*/
|
||||
export async function deleteSlotInstance(
|
||||
clubId: number,
|
||||
slotInstanceId: number
|
||||
): Promise<ApiResult<void>> {
|
||||
try {
|
||||
const response = await apiFetch(
|
||||
`/admin/facilities/${clubId}/slot-instances/${slotInstanceId}`,
|
||||
{
|
||||
method: 'DELETE',
|
||||
}
|
||||
);
|
||||
|
||||
if (!response.ok) {
|
||||
const error: SlotInstanceError = await response.json();
|
||||
return { success: false, error };
|
||||
}
|
||||
|
||||
return { success: true, data: undefined };
|
||||
} catch (error) {
|
||||
return {
|
||||
success: false,
|
||||
error: {
|
||||
type: 'about:blank',
|
||||
title: 'Network Error',
|
||||
status: 0,
|
||||
detail: 'Failed to delete slot instance. Please check your connection.',
|
||||
code: 'network_error',
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Cancel a slot instance (soft delete via status change)
|
||||
*/
|
||||
export async function cancelSlotInstance(
|
||||
clubId: number,
|
||||
slotInstanceId: number,
|
||||
reason?: string
|
||||
): Promise<ApiResult<SlotInstanceMutationResponse>> {
|
||||
return updateSlotInstance(clubId, slotInstanceId, {
|
||||
status: 'cancelled',
|
||||
reason: reason ?? 'Cancelled by admin',
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Convert a definition-based slot to manual (detach from template)
|
||||
*/
|
||||
export async function convertToManualSlot(
|
||||
clubId: number,
|
||||
slotInstanceId: number,
|
||||
reason?: string
|
||||
): Promise<ApiResult<SlotInstanceMutationResponse>> {
|
||||
return updateSlotInstance(clubId, slotInstanceId, {
|
||||
convert_to_manual: true,
|
||||
reason: reason ?? 'Converted to manual slot by admin',
|
||||
});
|
||||
}
|
||||
@ -0,0 +1,201 @@
|
||||
/**
|
||||
* Slot Instance Types
|
||||
*
|
||||
* Types for managing individual slot instances (materialized slots).
|
||||
*/
|
||||
|
||||
// Slot origin types
|
||||
export type SlotOriginKind = 'definition' | 'manual' | 'maintenance';
|
||||
|
||||
// Native slot status values
|
||||
export type SlotStatus = 'open' | 'held' | 'booked' | 'cancelled';
|
||||
|
||||
// Frontend display status mapping
|
||||
export type DisplayStatus = 'available' | 'pending' | 'booked' | 'cancelled';
|
||||
|
||||
/**
|
||||
* Slot instance as returned by the API
|
||||
*/
|
||||
export interface SlotInstance {
|
||||
slot_instance_id: number;
|
||||
court_id: number;
|
||||
court_name: string;
|
||||
starts_at: string; // ISO 8601
|
||||
ends_at: string; // ISO 8601
|
||||
capacity: number;
|
||||
status: SlotStatus;
|
||||
display_status: DisplayStatus;
|
||||
origin_kind: SlotOriginKind;
|
||||
origin_definition_id: number | null;
|
||||
reason: string | null;
|
||||
booked_count: number;
|
||||
created_at: string; // ISO 8601
|
||||
updated_at: string; // ISO 8601
|
||||
}
|
||||
|
||||
/**
|
||||
* Response from GET /admin/facilities/{id}/slot-instances
|
||||
*/
|
||||
export interface SlotInstancesResponse {
|
||||
facility_id: number;
|
||||
date: string; // YYYY-MM-DD
|
||||
timezone: string;
|
||||
slots: SlotInstance[];
|
||||
total: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* Request body for POST /admin/facilities/{id}/slot-instances
|
||||
*/
|
||||
export interface CreateSlotInstanceRequest {
|
||||
court_id: number;
|
||||
starts_at: string; // ISO 8601
|
||||
ends_at: string; // ISO 8601
|
||||
capacity?: number;
|
||||
reason?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Request body for PATCH /admin/facilities/{id}/slot-instances/{id}
|
||||
*/
|
||||
export interface UpdateSlotInstanceRequest {
|
||||
starts_at?: string; // ISO 8601
|
||||
ends_at?: string; // ISO 8601
|
||||
capacity?: number;
|
||||
status?: 'open' | 'cancelled';
|
||||
convert_to_manual?: boolean;
|
||||
reason?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Response from POST/PATCH slot instance endpoints
|
||||
*/
|
||||
export interface SlotInstanceMutationResponse {
|
||||
slot_instance_id: number;
|
||||
court_id: number;
|
||||
starts_at: string;
|
||||
ends_at: string;
|
||||
capacity: number;
|
||||
status: SlotStatus;
|
||||
display_status?: DisplayStatus;
|
||||
origin_kind: SlotOriginKind;
|
||||
origin_definition_id?: number | null;
|
||||
reason: string | null;
|
||||
}
|
||||
|
||||
/**
|
||||
* API error response
|
||||
*/
|
||||
export interface SlotInstanceError {
|
||||
type: string;
|
||||
title: string;
|
||||
status: number;
|
||||
detail: string;
|
||||
code: string;
|
||||
errors?: Array<{ field: string; message: string }>;
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Helper Functions
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* Format a datetime to local time string (HH:MM)
|
||||
*/
|
||||
export function formatSlotTime(isoString: string): string {
|
||||
const date = new Date(isoString);
|
||||
return date.toLocaleTimeString('en-US', {
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
hour12: false,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Format slot duration in human-readable form
|
||||
*/
|
||||
export function formatSlotDuration(startsAt: string, endsAt: string): string {
|
||||
const start = new Date(startsAt);
|
||||
const end = new Date(endsAt);
|
||||
const diffMs = end.getTime() - start.getTime();
|
||||
const diffMins = Math.round(diffMs / 60000);
|
||||
|
||||
if (diffMins < 60) {
|
||||
return `${diffMins}min`;
|
||||
}
|
||||
|
||||
const hours = Math.floor(diffMins / 60);
|
||||
const mins = diffMins % 60;
|
||||
return mins > 0 ? `${hours}h ${mins}m` : `${hours}h`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get status badge color
|
||||
*/
|
||||
export function getStatusColor(status: SlotStatus): string {
|
||||
switch (status) {
|
||||
case 'open':
|
||||
return 'bg-green-100 text-green-800';
|
||||
case 'held':
|
||||
return 'bg-yellow-100 text-yellow-800';
|
||||
case 'booked':
|
||||
return 'bg-blue-100 text-blue-800';
|
||||
case 'cancelled':
|
||||
return 'bg-red-100 text-red-800';
|
||||
default:
|
||||
return 'bg-gray-100 text-gray-800';
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Get origin badge color
|
||||
*/
|
||||
export function getOriginColor(origin: SlotOriginKind): string {
|
||||
switch (origin) {
|
||||
case 'definition':
|
||||
return 'bg-slate-100 text-slate-700';
|
||||
case 'manual':
|
||||
return 'bg-purple-100 text-purple-700';
|
||||
case 'maintenance':
|
||||
return 'bg-orange-100 text-orange-700';
|
||||
default:
|
||||
return 'bg-gray-100 text-gray-700';
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Get human-readable origin label
|
||||
*/
|
||||
export function getOriginLabel(origin: SlotOriginKind): string {
|
||||
switch (origin) {
|
||||
case 'definition':
|
||||
return 'Template';
|
||||
case 'manual':
|
||||
return 'Manual';
|
||||
case 'maintenance':
|
||||
return 'Maintenance';
|
||||
default:
|
||||
return origin;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if slot can be edited (time changes)
|
||||
*/
|
||||
export function canEditSlotTimes(slot: SlotInstance): boolean {
|
||||
return slot.booked_count === 0 && slot.status !== 'booked';
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if slot can be cancelled
|
||||
*/
|
||||
export function canCancelSlot(slot: SlotInstance): boolean {
|
||||
return slot.booked_count === 0 && slot.status !== 'cancelled';
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if slot can be deleted (hard delete)
|
||||
*/
|
||||
export function canDeleteSlot(slot: SlotInstance): boolean {
|
||||
return slot.booked_count === 0;
|
||||
}
|
||||
Loading…
Reference in New Issue