'use client'; import AdminLayout from '@admin/layouts/admin/admin-layout'; import HeaderWithBackIcon from '@admin/components/header-with-backicon'; import { Button } from '@admin/components/ui/button'; import { Card, CardContent, CardHeader, CardTitle } from '@admin/components/ui/card'; import { Head, router, usePage } from '@inertiajs/react'; import { ChevronRight } from 'lucide-react'; import { useState } from 'react'; import { toast } from 'sonner'; export default function Edit() { const { role, permissions: allPermissions } = usePage().props; // All available permissions grouped by group_name (from config via controller) const groupedPermissions: Record = allPermissions || {}; // Pre-select slugs the role currently has const initialSlugs: string[] = (role?.permissions || []).map((p: any) => p.slug); const [selectedPermissions, setSelectedPermissions] = useState(initialSlugs); const togglePermission = (slug: string) => { setSelectedPermissions((prev) => prev.includes(slug) ? prev.filter((s) => s !== slug) : [...prev, slug], ); }; const toggleGroup = (perms: any[]) => { const slugs = perms.map((p) => p.slug); const allSelected = slugs.every((s) => selectedPermissions.includes(s)); if (allSelected) { setSelectedPermissions((prev) => prev.filter((s) => !slugs.includes(s))); } else { setSelectedPermissions((prev) => [...new Set([...prev, ...slugs])]); } }; const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); router.put( route('admin.roles.update', role?.uid), { name: role?.name, slug: role?.slug, permissions: selectedPermissions, }, { onSuccess: () => toast.success('Role updated successfully!'), onError: (errors) => { console.error('Validation errors:', errors); toast.error('Something went wrong.'); }, }, ); }; return ( <>

Roles Edit

{/* Role info (read-only) */}

Role Name

Role Slug

{/* All available permissions */}

{Object.entries(groupedPermissions).map(([group, perms]) => { const slugs = (perms as any[]).map((p) => p.slug); const allSelected = slugs.every((s) => selectedPermissions.includes(s)); return (

{group}

{(perms as any[]).map((p: any) => (

togglePermission(p.slug)} className="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500" /> {p.name}

))} ); })}

); } Edit.layout = (page: React.ReactNode) => ( {page} );