'use client'; import AdminLayout from '@admin/layouts/admin/admin-layout'; import HeaderWithBackIcon from '@admin/components/header-with-backicon'; import Form from '@admin/components/form/Form'; import FormField from '@admin/components/form/FormField'; 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 * as yup from 'yup'; import { yupResolver } from '@hookform/resolvers/yup'; import { toast } from 'sonner'; export default function Create() { const { permissions } = usePage().props; // Group permissions by group_name (already grouped from backend) const groupedPermissions = permissions || {}; const schema = yup.object({ name: yup.string().required('Role name is required'), slug: yup.string().required('Role slug is required'), permissions: yup.array().of(yup.string()).min(1, 'Select at least one permission'), }); // Local state for selected permissions (using slugs) const [selectedPermissions, setSelectedPermissions] = useState([]); const [roleName, setRoleName] = useState(''); const [roleSlug, setRoleSlug] = useState(''); // Generate slug from name const generateSlug = (name: string) => { return name .toLowerCase() .trim() .replace(/[^a-z0-9\s-]/g, '') .replace(/\s+/g, '-') .replace(/-+/g, '-') .replace(/^-|-$/g, ''); }; // Handle name change and auto-generate slug const handleNameChange = (value: string) => { setRoleName(value); setRoleSlug(generateSlug(value)); }; // Toggle single checkbox const togglePermission = (slug: string) => { setSelectedPermissions((prev) => prev.includes(slug) ? prev.filter(s => s !== slug) : [...prev, slug] ); }; // Select/Deselect all in a group const toggleGroup = (permissions: any[]) => { const permissionSlugs = permissions.map(p => p.slug); const allSelected = permissionSlugs.every(slug => selectedPermissions.includes(slug)); if (allSelected) { setSelectedPermissions(prev => prev.filter(slug => !permissionSlugs.includes(slug))); } else { setSelectedPermissions(prev => [...new Set([...prev, ...permissionSlugs])]); } }; // Submit form const handleSubmit = () => { if (!roleName || !roleSlug || selectedPermissions.length === 0) { if (!roleName) toast.error('Role name is required'); else if (!roleSlug) toast.error('Role slug is required'); else if (selectedPermissions.length === 0) toast.error('Select at least one permission'); return; } router.post(route('admin.roles.store'), { name: roleName, slug: roleSlug, permissions: selectedPermissions, }, { onSuccess: () => toast.success('Role created successfully!'), onError: (errors) => { console.error('Validation errors:', errors); toast.error('Something went wrong.'); }, }); }; return ( <>

{/* Header */}

Roles Create

{/* Form */}

{/* Role name and slug */}

Role Name handleNameChange(e.target.value)} placeholder="Enter role name" className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" />

Role Slug

{/* Permissions groups */}

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

{/* Group Name bold */} {group}

{(permissions 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}

))} ); })}

{/* Submit */}

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