import { type BreadcrumbItem } from '@/types'; import { Head, Link } from '@inertiajs/react'; import Heading from '@/components/heading'; import { FilterField, ListToolbar } from '@/components/list-toolbar'; import { TableShell } from '@/components/table-shell'; import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import { ALL, useListQuery } from '@/hooks/use-list-query'; import { useTranslation } from '@/hooks/use-translation'; import AppLayout from '@/layouts/app-layout'; type RoleType = 'system' | 'client' | 'custom'; interface RoleRow { id: number; name: string; type: RoleType; is_system: boolean; is_administrator: boolean; users_count: number; permissions_count: number | null; } interface RolesIndexProps { roles: RoleRow[]; total_permissions: number; filters: { type: string | null }; } // Distinct, theme-aware tag colors per role type. const TYPE_BADGE: Record = { system: 'border-transparent bg-blue-100 text-blue-700 dark:bg-blue-950 dark:text-blue-300', client: 'border-transparent bg-emerald-100 text-emerald-700 dark:bg-emerald-950 dark:text-emerald-300', custom: 'border-transparent bg-violet-100 text-violet-700 dark:bg-violet-950 dark:text-violet-300', }; export default function RolesIndex({ roles, total_permissions, filters }: RolesIndexProps) { const { t } = useTranslation(); const { values, set, reset, hasFilters } = useListQuery('roles.index', { type: filters.type ?? ALL }, { type: ALL }); const breadcrumbs: BreadcrumbItem[] = [{ title: t('Roles'), href: '/roles' }]; const typeLabel: Record = { system: t('System'), client: t('Client'), custom: t('Custom') }; return (

{t('No roles match this filter.')}} > {roles.map((role) => ( {role.is_system ? t(role.name) : role.name} {typeLabel[role.type]} {role.users_count} {role.is_administrator ? t('All permissions') : `${role.permissions_count} / ${total_permissions}`} ))}

); }