import { Head, Link, router } from '@inertiajs/react'; import { Plus, Trash2, Users } from 'lucide-react'; import { useState } from 'react'; import { PageHeader } from '@/components/layout/page-header'; import { Button } from '@/components/ui/button'; import AppLayout from '@/layouts/app-layout'; import adminLocations from '@/routes/admin/locations'; type Technician = { id: number; name: string; email: string }; type Props = { location: { id: number; name: string }; assignedIds: number[]; allTechnicians: Technician[]; }; export default function LocationTechnicians({ location, assignedIds, allTechnicians }: Props) { const [selectedIds, setSelectedIds] = useState(assignedIds); const [addingId, setAddingId] = useState(''); const [saving, setSaving] = useState(false); const assigned = allTechnicians.filter((t) => selectedIds.includes(t.id)); const unassigned = allTechnicians.filter((t) => !selectedIds.includes(t.id)); const remove = (id: number) => setSelectedIds((prev) => prev.filter((x) => x !== id)); const add = () => { const id = Number(addingId); if (id && !selectedIds.includes(id)) { setSelectedIds((prev) => [...prev, id]); setAddingId(''); } }; const handleSave = () => { setSaving(true); router.post( adminLocations.technicians.sync.url(location.id), { technician_ids: selectedIds }, { onFinish: () => setSaving(false) }, ); }; const capacityLabel = selectedIds.length === 0 ? 'No technicians assigned — defaults to 1 concurrent booking per slot' : `${selectedIds.length} technician${selectedIds.length > 1 ? 's' : ''} — up to ${selectedIds.length} concurrent booking${selectedIds.length > 1 ? 's' : ''} per slot`; return ( <>
} />

{location.name}

{/* Capacity indicator */}
{capacityLabel}
{/* Assigned technician rows */}
{assigned.length === 0 ? (

No technicians assigned yet.

) : ( assigned.map((tech) => (

{tech.name}

{tech.email}

)) )}
{/* Add technician row */} {unassigned.length > 0 && (
)} {/* Footer */}
); } LocationTechnicians.layout = (page: React.ReactNode) => {page};