Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 | 1x 68x 20x 34x 1x 1x | /**
* Roles table component
* Displays list of roles with actions
*/
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Pencil, Trash2 } from 'lucide-react';
import type { RoleListItem } from '@/services/roles.service';
interface RolesTableProps {
roles: RoleListItem[];
onEdit: (role: RoleListItem) => void;
onDelete: (role: RoleListItem) => void;
}
const DEFAULT_ROLES = ['admin', 'user'];
export default function RolesTable({ roles, onEdit, onDelete }: RolesTableProps) {
const isDefaultRole = (roleName: string) => DEFAULT_ROLES.includes(roleName.toLowerCase());
return (
<div className="rounded-md border">
<Table>
<TableHeader>
<TableRow>
<TableHead>Name</TableHead>
<TableHead>Description</TableHead>
<TableHead>Collections</TableHead>
<TableHead className="text-right">Actions</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{roles.length === 0 ? (
<TableRow>
<TableCell colSpan={4} className="text-center text-muted-foreground py-8">
No roles found
</TableCell>
</TableRow>
) : (
roles.map((role) => (
<TableRow key={role.id}>
<TableCell className="font-medium">
<div className="flex items-center gap-2">
{role.name}
{isDefaultRole(role.name) && (
<Badge variant="secondary" className="text-xs">
Default
</Badge>
)}
</div>
</TableCell>
<TableCell className="text-muted-foreground">
{role.description || '-'}
</TableCell>
<TableCell>{role.collections_count}</TableCell>
<TableCell className="text-right">
<div className="flex justify-end gap-2">
<Button
variant="ghost"
size="icon"
onClick={() => onEdit(role)}
title="Edit role"
>
<Pencil className="h-4 w-4" />
</Button>
<Button
variant="ghost"
size="icon"
onClick={() => onDelete(role)}
title="Delete role"
className="text-destructive hover:text-destructive"
disabled={isDefaultRole(role.name)}
>
<Trash2 className="h-4 w-4" />
</Button>
</div>
</TableCell>
</TableRow>
))
)}
</TableBody>
</Table>
</div>
);
}
|