import { useState, ReactNode } from "react"; import { Head } from '@inertiajs/react'; import { useQuery } from "@tanstack/react-query"; import AdminLayout from '@/layouts/AdminLayout'; import { Label } from "@/components/ui/label"; import { Badge } from "@/components/ui/badge"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; import TrainerAvailabilityPanel from "@/components/admin/TrainerAvailabilityPanel"; // This page is just a trainer picker around TrainerAvailabilityPanel — the // exact same panel shown by the Availability icon on /admin/trainers — so both // entry points stay perfectly in sync (weekly days, bank holidays, overrides, // specific dates). const Availability = () => { const [selectedTrainerId, setSelectedTrainerId] = useState(""); const { data: trainers } = useQuery({ queryKey: ["trainers"], queryFn: async (): Promise => { const res = await fetch('/api/admin/trainers'); if (!res.ok) return []; return res.json(); }, }); const selectedTrainer = trainers?.find((t: any) => t.id === selectedTrainerId); return ( <>

Trainer Availability

Select Trainer

{selectedTrainerId && selectedTrainer && ( )}

); }; Availability.layout = (page: ReactNode) => {page}; export default Availability;