590 lines
19 KiB
TypeScript
590 lines
19 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState, useCallback, useRef } from "react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Input } from "@/components/ui/input";
|
|
import { useSite } from "@/contexts/site-context";
|
|
import {
|
|
Users,
|
|
UserPlus,
|
|
Clock,
|
|
RefreshCw,
|
|
MapPin,
|
|
X,
|
|
Search,
|
|
} from "lucide-react";
|
|
|
|
// --- Types ---
|
|
|
|
interface Player {
|
|
id: string;
|
|
firstName?: string;
|
|
lastName?: string;
|
|
walkInName?: string;
|
|
checkedInAt: string;
|
|
sessionId: string;
|
|
}
|
|
|
|
interface Court {
|
|
id: string;
|
|
name: string;
|
|
type: "INDOOR" | "OUTDOOR";
|
|
isOpenPlay: boolean;
|
|
status: "available" | "active" | "booked" | "open_play";
|
|
players: Player[];
|
|
upcomingBooking?: {
|
|
startTime: string;
|
|
clientName: string;
|
|
};
|
|
}
|
|
|
|
interface ClientResult {
|
|
id: string;
|
|
firstName: string;
|
|
lastName: string;
|
|
}
|
|
|
|
// --- Helpers ---
|
|
|
|
function getStatusConfig(court: Court) {
|
|
if (court.status === "active") {
|
|
return {
|
|
dotColor: "bg-primary-500",
|
|
text: `Active (${court.players.length} player${court.players.length !== 1 ? "s" : ""})`,
|
|
bgColor: "bg-primary-50",
|
|
borderColor: "border-primary-200",
|
|
textColor: "text-primary-500",
|
|
};
|
|
}
|
|
if (court.status === "open_play" && court.players.length === 0) {
|
|
return {
|
|
dotColor: "bg-amber-500",
|
|
text: "Open Play",
|
|
bgColor: "bg-amber-50",
|
|
borderColor: "border-amber-200",
|
|
textColor: "text-amber-500",
|
|
};
|
|
}
|
|
if (court.status === "open_play" && court.players.length > 0) {
|
|
return {
|
|
dotColor: "bg-amber-500",
|
|
text: `Open Play (${court.players.length} player${court.players.length !== 1 ? "s" : ""})`,
|
|
bgColor: "bg-amber-50",
|
|
borderColor: "border-amber-200",
|
|
textColor: "text-amber-500",
|
|
};
|
|
}
|
|
if (court.status === "booked") {
|
|
return {
|
|
dotColor: "bg-purple-500",
|
|
text: "Booked",
|
|
bgColor: "bg-purple-50",
|
|
borderColor: "border-purple-200",
|
|
textColor: "text-purple-500",
|
|
};
|
|
}
|
|
return {
|
|
dotColor: "bg-green-500",
|
|
text: "Available",
|
|
bgColor: "bg-green-50",
|
|
borderColor: "border-green-200",
|
|
textColor: "text-green-500",
|
|
};
|
|
}
|
|
|
|
function formatTime(dateStr: string) {
|
|
return new Date(dateStr).toLocaleTimeString([], {
|
|
hour: "2-digit",
|
|
minute: "2-digit",
|
|
});
|
|
}
|
|
|
|
function playerName(player: Player) {
|
|
if (player.walkInName) return player.walkInName;
|
|
return [player.firstName, player.lastName].filter(Boolean).join(" ") || "Unknown";
|
|
}
|
|
|
|
function playerInitials(player: Player) {
|
|
const name = playerName(player);
|
|
const parts = name.split(" ");
|
|
if (parts.length >= 2) return (parts[0][0] + parts[1][0]).toUpperCase();
|
|
return name.slice(0, 2).toUpperCase();
|
|
}
|
|
|
|
// --- Main Page ---
|
|
|
|
export default function LiveCourtsPage() {
|
|
const { selectedSiteId } = useSite();
|
|
const [courts, setCourts] = useState<Court[]>([]);
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [lastUpdated, setLastUpdated] = useState<Date | null>(null);
|
|
const [checkInCourtId, setCheckInCourtId] = useState<string | null>(null);
|
|
const [endSessionCourtId, setEndSessionCourtId] = useState<string | null>(null);
|
|
const intervalRef = useRef<NodeJS.Timeout | null>(null);
|
|
|
|
// --- Data fetching ---
|
|
|
|
const fetchCourts = useCallback(async () => {
|
|
try {
|
|
setError(null);
|
|
const url = selectedSiteId
|
|
? `/api/live?siteId=${selectedSiteId}`
|
|
: "/api/live";
|
|
const response = await fetch(url);
|
|
if (!response.ok) throw new Error("Failed to load court data");
|
|
const data = await response.json();
|
|
setCourts(data.courts ?? data.data ?? []);
|
|
setLastUpdated(new Date());
|
|
} catch (err) {
|
|
console.error("Live courts fetch error:", err);
|
|
setError(err instanceof Error ? err.message : "Unknown error");
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
}, [selectedSiteId]);
|
|
|
|
useEffect(() => {
|
|
fetchCourts();
|
|
intervalRef.current = setInterval(fetchCourts, 30000);
|
|
return () => {
|
|
if (intervalRef.current) clearInterval(intervalRef.current);
|
|
};
|
|
}, [fetchCourts]);
|
|
|
|
// --- End session handler ---
|
|
|
|
const handleEndSession = async (court: Court) => {
|
|
try {
|
|
await Promise.all(
|
|
court.players.map((p) =>
|
|
fetch(`/api/court-sessions/${p.sessionId}`, { method: "PUT" })
|
|
)
|
|
);
|
|
setEndSessionCourtId(null);
|
|
fetchCourts();
|
|
} catch (err) {
|
|
console.error("End session error:", err);
|
|
}
|
|
};
|
|
|
|
// --- Render ---
|
|
|
|
const checkInCourt = courts.find((c) => c.id === checkInCourtId) ?? null;
|
|
const endSessionCourt = courts.find((c) => c.id === endSessionCourtId) ?? null;
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* Header */}
|
|
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-primary-800">Live Courts</h1>
|
|
<p className="text-primary-500 mt-1">
|
|
{lastUpdated
|
|
? `Last updated: ${lastUpdated.toLocaleTimeString()}`
|
|
: "Loading..."}
|
|
</p>
|
|
</div>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => fetchCourts()}
|
|
disabled={isLoading}
|
|
>
|
|
<RefreshCw className={`w-4 h-4 mr-2 ${isLoading ? "animate-spin" : ""}`} />
|
|
Refresh
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Error */}
|
|
{error && (
|
|
<div className="p-4 bg-red-50 border border-red-200 rounded-lg text-red-700">
|
|
{error}
|
|
</div>
|
|
)}
|
|
|
|
{/* Loading skeleton */}
|
|
{isLoading && courts.length === 0 && (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
{Array.from({ length: 6 }).map((_, i) => (
|
|
<Card key={i}>
|
|
<CardHeader className="pb-3">
|
|
<div className="animate-pulse space-y-2">
|
|
<div className="h-5 bg-primary-100 rounded w-32" />
|
|
<div className="h-4 bg-primary-100 rounded w-20" />
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="animate-pulse space-y-3">
|
|
<div className="h-4 bg-primary-100 rounded w-full" />
|
|
<div className="h-8 bg-primary-100 rounded w-24" />
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* Court grid */}
|
|
{!isLoading && courts.length === 0 && !error && (
|
|
<div className="text-center py-12 text-primary-500">
|
|
<MapPin className="w-12 h-12 mx-auto mb-4 opacity-40" />
|
|
<p className="text-lg font-medium">No courts found</p>
|
|
<p className="text-sm mt-1">Courts will appear here once configured.</p>
|
|
</div>
|
|
)}
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
{courts.map((court) => {
|
|
const cfg = getStatusConfig(court);
|
|
const earliestCheckIn = court.players.length > 0
|
|
? court.players.reduce((earliest, p) =>
|
|
new Date(p.checkedInAt) < new Date(earliest.checkedInAt) ? p : earliest
|
|
)
|
|
: null;
|
|
|
|
return (
|
|
<Card key={court.id} className={`${cfg.borderColor} border`}>
|
|
<CardHeader className="pb-3">
|
|
<div className="flex items-center justify-between">
|
|
<CardTitle className="text-base font-semibold">
|
|
{court.name}
|
|
</CardTitle>
|
|
<div className="flex items-center gap-1.5">
|
|
<span className="text-xs font-medium px-2 py-0.5 rounded-full bg-primary-100 text-primary-600">
|
|
{court.type}
|
|
</span>
|
|
{court.isOpenPlay && (
|
|
<span className="text-xs font-medium px-2 py-0.5 rounded-full bg-amber-100 text-amber-700">
|
|
Open Play
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
{/* Status indicator */}
|
|
<div className="flex items-center gap-2 mt-1">
|
|
<span className={`inline-block w-2.5 h-2.5 rounded-full ${cfg.dotColor}`} />
|
|
<span className={`text-sm font-medium ${cfg.textColor}`}>
|
|
{cfg.text}
|
|
</span>
|
|
</div>
|
|
</CardHeader>
|
|
|
|
<CardContent className="space-y-3">
|
|
{/* Upcoming booking info for booked courts */}
|
|
{court.status === "booked" && court.upcomingBooking && (
|
|
<div className="text-sm text-purple-600 bg-purple-50 rounded-md px-3 py-2">
|
|
<Clock className="w-3.5 h-3.5 inline mr-1" />
|
|
{court.upcomingBooking.clientName} at{" "}
|
|
{formatTime(court.upcomingBooking.startTime)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Player list */}
|
|
{court.players.length > 0 && (
|
|
<div className="space-y-2">
|
|
{court.players.map((player) => (
|
|
<div
|
|
key={player.id}
|
|
className="flex items-center gap-2 text-sm"
|
|
>
|
|
<div className="w-7 h-7 rounded-full bg-primary-100 text-primary-700 flex items-center justify-center text-xs font-semibold shrink-0">
|
|
{playerInitials(player)}
|
|
</div>
|
|
<span className="text-primary-700 truncate">
|
|
{playerName(player)}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* Time since first check-in */}
|
|
{earliestCheckIn && (
|
|
<div className="flex items-center gap-1.5 text-xs text-primary-400">
|
|
<Clock className="w-3.5 h-3.5" />
|
|
Since {formatTime(earliestCheckIn.checkedInAt)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Actions */}
|
|
<div className="flex flex-wrap gap-2 pt-1">
|
|
{(court.status === "available" ||
|
|
court.status === "active" ||
|
|
court.status === "open_play") && (
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => setCheckInCourtId(court.id)}
|
|
>
|
|
<UserPlus className="w-4 h-4 mr-1" />
|
|
Check In
|
|
</Button>
|
|
)}
|
|
{(court.status === "active" || (court.status === "open_play" && court.players.length > 0)) && (
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="text-red-600 border-red-200 hover:bg-red-50"
|
|
onClick={() => setEndSessionCourtId(court.id)}
|
|
>
|
|
<X className="w-4 h-4 mr-1" />
|
|
End Session
|
|
</Button>
|
|
)}
|
|
{court.isOpenPlay && (
|
|
<Button variant="outline" size="sm">
|
|
<Users className="w-4 h-4 mr-1" />
|
|
Schedule Group
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
{/* Check In Modal */}
|
|
{checkInCourt && (
|
|
<CheckInModal
|
|
court={checkInCourt}
|
|
onClose={() => setCheckInCourtId(null)}
|
|
onSuccess={() => {
|
|
setCheckInCourtId(null);
|
|
fetchCourts();
|
|
}}
|
|
/>
|
|
)}
|
|
|
|
{/* End Session Confirm Dialog */}
|
|
{endSessionCourt && (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
|
|
<div className="bg-white rounded-lg shadow-xl max-w-sm w-full mx-4 p-6 space-y-4">
|
|
<h2 className="text-lg font-semibold text-primary-800">
|
|
End Session
|
|
</h2>
|
|
<p className="text-sm text-primary-600">
|
|
End session on <strong>{endSessionCourt.name}</strong>? This will
|
|
check out all players.
|
|
</p>
|
|
<div className="flex justify-end gap-2">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => setEndSessionCourtId(null)}
|
|
>
|
|
Cancel
|
|
</Button>
|
|
<Button
|
|
variant="destructive"
|
|
size="sm"
|
|
onClick={() => handleEndSession(endSessionCourt)}
|
|
>
|
|
End Session
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// --- Check In Modal Component ---
|
|
|
|
function CheckInModal({
|
|
court,
|
|
onClose,
|
|
onSuccess,
|
|
}: {
|
|
court: Court;
|
|
onClose: () => void;
|
|
onSuccess: () => void;
|
|
}) {
|
|
const [mode, setMode] = useState<"search" | "walkin">("search");
|
|
const [searchQuery, setSearchQuery] = useState("");
|
|
const [walkInName, setWalkInName] = useState("");
|
|
const [clients, setClients] = useState<ClientResult[]>([]);
|
|
const [selectedClient, setSelectedClient] = useState<ClientResult | null>(null);
|
|
const [isSearching, setIsSearching] = useState(false);
|
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
const debounceRef = useRef<NodeJS.Timeout | null>(null);
|
|
|
|
// Debounced client search
|
|
useEffect(() => {
|
|
if (searchQuery.length < 2) {
|
|
setClients([]);
|
|
return;
|
|
}
|
|
if (debounceRef.current) clearTimeout(debounceRef.current);
|
|
debounceRef.current = setTimeout(async () => {
|
|
setIsSearching(true);
|
|
try {
|
|
const res = await fetch(
|
|
`/api/clients?search=${encodeURIComponent(searchQuery)}`
|
|
);
|
|
if (res.ok) {
|
|
const data = await res.json();
|
|
setClients(data.data ?? data ?? []);
|
|
}
|
|
} catch {
|
|
console.error("Client search failed");
|
|
} finally {
|
|
setIsSearching(false);
|
|
}
|
|
}, 300);
|
|
return () => {
|
|
if (debounceRef.current) clearTimeout(debounceRef.current);
|
|
};
|
|
}, [searchQuery]);
|
|
|
|
const handleSubmit = async () => {
|
|
setIsSubmitting(true);
|
|
try {
|
|
const body: Record<string, string> = { courtId: court.id };
|
|
if (mode === "search" && selectedClient) {
|
|
body.clientId = selectedClient.id;
|
|
} else if (mode === "walkin" && walkInName.trim()) {
|
|
body.walkInName = walkInName.trim();
|
|
} else {
|
|
return;
|
|
}
|
|
|
|
const res = await fetch("/api/court-sessions", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify(body),
|
|
});
|
|
|
|
if (!res.ok) throw new Error("Check-in failed");
|
|
onSuccess();
|
|
} catch (err) {
|
|
console.error("Check-in error:", err);
|
|
} finally {
|
|
setIsSubmitting(false);
|
|
}
|
|
};
|
|
|
|
const canSubmit =
|
|
(mode === "search" && selectedClient !== null) ||
|
|
(mode === "walkin" && walkInName.trim().length > 0);
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
|
|
<div className="bg-white rounded-lg shadow-xl max-w-md w-full mx-4 p-6 space-y-4">
|
|
{/* Modal header */}
|
|
<div className="flex items-center justify-between">
|
|
<h2 className="text-lg font-semibold text-primary-800">
|
|
Check In — {court.name}
|
|
</h2>
|
|
<button
|
|
onClick={onClose}
|
|
className="text-primary-400 hover:text-primary-600"
|
|
>
|
|
<X className="w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
|
|
{/* Mode toggle */}
|
|
<div className="flex rounded-lg border border-primary-200 overflow-hidden">
|
|
<button
|
|
className={`flex-1 px-4 py-2 text-sm font-medium transition-colors ${
|
|
mode === "search"
|
|
? "bg-primary-100 text-primary-800"
|
|
: "text-primary-500 hover:bg-primary-50"
|
|
}`}
|
|
onClick={() => setMode("search")}
|
|
>
|
|
<Search className="w-4 h-4 inline mr-1" />
|
|
Find Client
|
|
</button>
|
|
<button
|
|
className={`flex-1 px-4 py-2 text-sm font-medium transition-colors ${
|
|
mode === "walkin"
|
|
? "bg-primary-100 text-primary-800"
|
|
: "text-primary-500 hover:bg-primary-50"
|
|
}`}
|
|
onClick={() => setMode("walkin")}
|
|
>
|
|
<UserPlus className="w-4 h-4 inline mr-1" />
|
|
Walk-in
|
|
</button>
|
|
</div>
|
|
|
|
{/* Search mode */}
|
|
{mode === "search" && (
|
|
<div className="space-y-3">
|
|
<Input
|
|
placeholder="Search by name..."
|
|
value={searchQuery}
|
|
onChange={(e) => {
|
|
setSearchQuery(e.target.value);
|
|
setSelectedClient(null);
|
|
}}
|
|
autoFocus
|
|
/>
|
|
{isSearching && (
|
|
<p className="text-sm text-primary-400">Searching...</p>
|
|
)}
|
|
{clients.length > 0 && (
|
|
<div className="max-h-40 overflow-y-auto border border-primary-200 rounded-md divide-y divide-primary-100">
|
|
{clients.map((client) => (
|
|
<button
|
|
key={client.id}
|
|
className={`w-full text-left px-3 py-2 text-sm hover:bg-primary-50 transition-colors ${
|
|
selectedClient?.id === client.id
|
|
? "bg-primary-100 font-medium"
|
|
: ""
|
|
}`}
|
|
onClick={() => setSelectedClient(client)}
|
|
>
|
|
{client.firstName} {client.lastName}
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
{searchQuery.length >= 2 &&
|
|
!isSearching &&
|
|
clients.length === 0 && (
|
|
<p className="text-sm text-primary-400">No clients found.</p>
|
|
)}
|
|
{selectedClient && (
|
|
<div className="flex items-center gap-2 text-sm bg-primary-50 rounded-md px-3 py-2">
|
|
<span className="font-medium text-primary-700">
|
|
Selected: {selectedClient.firstName} {selectedClient.lastName}
|
|
</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Walk-in mode */}
|
|
{mode === "walkin" && (
|
|
<Input
|
|
placeholder="Enter walk-in name..."
|
|
value={walkInName}
|
|
onChange={(e) => setWalkInName(e.target.value)}
|
|
autoFocus
|
|
/>
|
|
)}
|
|
|
|
{/* Submit */}
|
|
<div className="flex justify-end gap-2 pt-2">
|
|
<Button variant="outline" size="sm" onClick={onClose}>
|
|
Cancel
|
|
</Button>
|
|
<Button
|
|
size="sm"
|
|
disabled={!canSubmit || isSubmitting}
|
|
onClick={handleSubmit}
|
|
>
|
|
{isSubmitting ? "Checking in..." : "Check In"}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|