import { Button } from '@/components/ui/button'; import { Card, CardContent } from '@/components/ui/card'; import { Checkbox } from '@/components/ui/checkbox'; import { Field, FieldError } from '@/components/ui/field'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import roleRoutes from '@/routes/system/role'; import type { Permission } from '@/types'; import { Head, Link, useForm } from '@inertiajs/react'; import { ArrowLeft, Loader, Save } from 'lucide-react'; import React, { useMemo } from 'react'; import { toast } from 'sonner'; export default function RoleCreate({ permissions, }: { permissions: Permission[]; }) { const { data, setData, post, processing, errors } = useForm<{ name: string; guard_name: string; permissions: number[]; }>({ name: '', guard_name: 'web', permissions: [], }); const onSubmit = (e: React.FormEvent) => { e.preventDefault(); post(roleRoutes.store().url, { onSuccess: (response: any) => { const flash = response.props.flash; if (flash?.error) { toast.error(flash.error); } else if (flash?.success) { toast.success(flash.success); } }, }); }; const groupedPermissions = useMemo(() => { const groups: Record = {}; permissions.forEach((permission) => { const parts = permission.name.split(':'); const groupName = parts.length > 1 ? parts[1] : 'Lainnya'; if (!groups[groupName]) { groups[groupName] = []; } groups[groupName].push(permission); }); return groups; }, [permissions]); const handleCheckboxChange = (id: number, checked: boolean) => { if (checked) { setData('permissions', [...data.permissions, id]); } else { setData( 'permissions', data.permissions.filter((pId) => pId !== id), ); } }; const toggleGroup = (groupName: string) => { const groupPermissionIds = groupedPermissions[groupName].map( (p) => p.id, ); const allInGroupSelected = groupPermissionIds.every((id) => data.permissions.includes(id), ); if (allInGroupSelected) { setData( 'permissions', data.permissions.filter( (id) => !groupPermissionIds.includes(id), ), ); } else { const otherPermissions = data.permissions.filter( (id) => !groupPermissionIds.includes(id), ); setData('permissions', [ ...otherPermissions, ...groupPermissionIds, ]); } }; const selectAll = () => { setData( 'permissions', permissions.map((p) => p.id), ); }; const deselectAll = () => { setData('permissions', []); }; return (

Tambah Role

setData('name', e.target.value) } autoComplete="off" placeholder="Contoh: Leader" /> setData( 'guard_name', e.target.value, ) } autoComplete="off" />
{Object.entries(groupedPermissions).map( ([groupName, groupPermissions]) => { const allInGroupSelected = groupPermissions.every((p) => data.permissions.includes(p.id), ); return (

{groupName}

{groupPermissions.map( (permission) => (
handleCheckboxChange( permission.id, checked as boolean, ) } className="transition-transform active:scale-90" />
), )}
); }, )}
); } RoleCreate.layout = { breadcrumbs: [{ title: 'Sistem' }], };