import { Head, Link } from '@inertiajs/react'; import type { Project, BreadcrumbItem } from '@/types/index.d'; import AppLayout from '@/layouts/app-layout'; import ProjectSettingsLayout from './layout'; import HeadingSmall from '@/components/heading-small'; import { Button } from '@/components/ui/button'; import MultiSelect from '@/components/ui/select/Select'; import axios from 'axios'; import { useState } from 'react'; import { toast } from 'sonner'; interface Props { project: Project; } type ProjectWithMembers = Project & { members: any[] }; export default function UsersRolesSettings({ project: initialProject }: Props) { const [project, setProject] = useState(initialProject as ProjectWithMembers); const [selectedUser, setSelectedUser] = useState(null); const [userOptions, setUserOptions] = useState([]); const breadcrumbs: BreadcrumbItem[] = [ { title: project.name, href: route('projects.show', project.id) }, { title: 'Settings', href: route('projects.settings.project', project.id) }, { title: 'User Access', href: route('projects.settings.user-access', project.id) }, ]; const handleInputChange = (input: string) => { if (!input) { setUserOptions([]); return input; } axios .get('/user-management/api/users', { params: { search: input, per_page: 10 } }) .then((res) => { const memberIds = project.members?.map((m) => m.id) || []; const opts = res.data.data .filter((u: any) => !memberIds.includes(u.id)) .map((u: any) => ({ value: u.id, label: `${u.name} <${u.email}>` })); setUserOptions(opts); }); return input; // important: return the input string, not a Promise }; const addMember = async () => { if (!selectedUser) return; try { const res = await axios.post(route('projects.settings.members.add', project.id), { user_id: selectedUser.value }); setProject(res.data as ProjectWithMembers); setSelectedUser(null); toast.success('Member added'); } catch (e) { toast.error('Failed to add member'); } }; const removeMember = async (userId: number) => { try { const res = await axios.delete(route('projects.settings.members.remove', [project.id, userId])); setProject(res.data as ProjectWithMembers); toast.success('Member removed'); } catch (e) { toast.error('Failed to remove member'); } }; return (

{/* Members table */}

{project.members?.map(member => ( ))} {(!project.members || project.members.length === 0) && ( )}

Name	Email	Roles
{member.name}	{member.email}	{member.roles?.map((r: any) => r.name).join(', ')}
No members yet.

); }