import { Form, Head } from '@inertiajs/react';
import {
Lock,
ShieldCheck,
ShieldHalf,
UserCog,
Users,
} from 'lucide-react';
import type { ReactNode } from 'react';
import RoleController from '@/actions/App/Http/Controllers/RoleController';
import { FormField } from '@/components/crm/native-select';
import {
Callout,
PageHeader,
SectionCard,
} from '@/components/crm/page-header';
import { RuleFlag, StatusPill } from '@/components/crm/status-badge';
import { StatStrip } from '@/components/crm/kpi-tile';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { cn } from '@/lib/utils';
import { index as rolesIndex } from '@/routes/roles';
import type { RoleSummary } from '@/types';
type Props = {
roles: RoleSummary[];
permissionGroups: Record>;
can: {
manage: boolean;
};
};
export default function RolesIndex({ roles, permissionGroups, can }: Props) {
const totalPermissions = Object.values(permissionGroups).reduce(
(total, group) => total + Object.keys(group).length,
0,
);
const staffAssigned = roles.reduce(
(total, role) => total + role.users_count,
0,
);
const protectedRoles = roles.filter((role) => role.is_protected).length;
return (
<>
{roles.length} roles · {totalPermissions} permissions
in the catalogue
}
title="Roles and permissions"
description="A role is a bundle of permissions. Give every staff member the role that matches their job, and nothing more."
/>
{roles.map((role) => (
))}
{can.manage ? (
) : null}
);
}
/**
* One role and its permission matrix. A role that can be edited is wrapped in
* its own form so each role saves independently.
*/
function RolePanel({
role,
permissionGroups,
totalPermissions,
canManage,
}: {
role: RoleSummary;
permissionGroups: Record>;
totalPermissions: number;
canManage: boolean;
}) {
const editable = canManage && !role.is_protected;
const coverage =
totalPermissions === 0
? 0
: Math.round((role.permissions.length / totalPermissions) * 100);
const coverageTone =
role.permissions.length === totalPermissions
? 'success'
: role.permissions.length === 0
? 'slate'
: 'info';
const actions = (
);
const body = (
processing: boolean,
errors: Record,
): ReactNode => (
<>
{role.is_protected ? (
It always holds every permission, so nobody can lock the owner
out of the system. Create a separate role for anything that
needs narrower access.
) : null}
{!role.is_protected && role.users_count > 0 ? (
Assigned to {role.users_count} staff, so move them to another
role before removing this one.
) : null}
{errors.permissions ? (
{errors.permissions}
) : null}
{editable ? (
Changes apply the next time this role's staff load a page.
) : null}
);
if (!editable) {
return (
{body(false, {})}
);
}
return (
);
}
/**
* The permission checkboxes, grouped exactly as the backend catalogue groups
* them. Names are submitted as permissions[].
*/
function PermissionGroups({
permissionGroups,
selected,
editable = true,
idPrefix,
}: {
permissionGroups: Record>;
selected: string[];
editable?: boolean;
idPrefix: string;
}) {
return (