import { Head, router, usePage } from '@inertiajs/react'; import { useState } from 'react'; import { MapPin, RefreshCw, Check } from 'lucide-react'; type Member = { id: number; name: string; email: string }; type Location = { id: number; name: string; city: string | null; state: string | null; is_active: boolean; users: Member[] }; export default function Locations() { const props = usePage().props as unknown as { locations: Location[]; members: Member[] }; const { locations, members } = props; const [editing, setEditing] = useState(null); const [selected, setSelected] = useState([]); const openFor = (userId: number) => { setEditing(userId); setSelected(locations.filter((l) => l.users.some((u) => u.id === userId)).map((l) => l.id)); }; const save = (userId: number) => router.post(`/admin/locations/assign/${userId}`, { location_ids: selected }, { preserveScroll: true, onSuccess: () => setEditing(null), }); return ( <>

Locations

Tag people to the locations they can see. Admins and owners see everything.

Locations ({locations.length})

{locations.map((l) => (

{l.name}

{[l.city, l.state].filter(Boolean).join(', ') || '—'} · {l.users.length} assigned

))} {locations.length === 0 && (

No locations yet. Sync from Rentec above.

)}

People

{members.map((m) => { const theirs = locations.filter((l) => l.users.some((u) => u.id === m.id)); const isEditing = editing === m.id; return (

{m.name}

{m.email}

{!isEditing && (

{theirs.length === 0 ? 'No locations assigned' : theirs.map((l) => l.name).join(', ')}

)}
{isEditing ? (
) : ( )}
{isEditing && (
{locations.map((l) => { const on = selected.includes(l.id); return ( ); })}
)}
); })}
); }