import { Head, useForm } from '@inertiajs/react'; import { FormEventHandler } from 'react'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import AdminLayout from '@/layouts/admin-layout'; import { type Permission, type Role } from '@/types'; export default function AdminRoleEdit({ role, permissions }: { role: Role; permissions: Permission[] }) { const { data, setData, patch, processing, errors } = useForm({ name: role.name, permissions: role.permissions?.map((p) => p.id) ?? [], }); const togglePermission = (id: number) => { setData('permissions', data.permissions.includes(id) ? data.permissions.filter((p) => p !== id) : [...data.permissions, id]); }; const submit: FormEventHandler = (e) => { e.preventDefault(); patch(`/admin/roles/${role.id}`); }; // Group permissions by prefix const groups: Record = {}; permissions.forEach((p) => { const key = p.name.split('.')[0] ?? 'general'; if (!groups[key]) { groups[key] = []; } groups[key].push(p); }); return (

Role Details

Role Name * setData('name', e.target.value)} className={errors.name ? 'border-red-400' : ''} /> {errors.name &&

{errors.name}

}

{permissions.length > 0 && (

Permissions

{Object.entries(groups).map(([group, perms]) => (

{group}

{perms.map((p) => ( togglePermission(p.id)} className="text-indigo-600" /> {p.name} ))}

))}

)}

); }