65 lines
2.6 KiB
TypeScript
65 lines
2.6 KiB
TypeScript
'use client'
|
|
|
|
import React from 'react'
|
|
import type { Role } from '../_types'
|
|
|
|
interface Props {
|
|
roles: Role[]
|
|
onOpenCreate: () => void
|
|
}
|
|
|
|
export function RolesTab({ roles, onOpenCreate }: Props) {
|
|
return (
|
|
<div>
|
|
<div className="flex justify-between items-center mb-4">
|
|
<h2 className="text-lg font-semibold">{roles.length} Rollen</h2>
|
|
<button
|
|
onClick={onOpenCreate}
|
|
className="px-4 py-2 bg-purple-600 text-white rounded-lg text-sm hover:bg-purple-700"
|
|
>
|
|
+ Rolle erstellen
|
|
</button>
|
|
</div>
|
|
<div className="overflow-x-auto bg-white rounded-xl border border-gray-200">
|
|
<table className="w-full text-sm">
|
|
<thead>
|
|
<tr className="border-b border-gray-200 bg-gray-50">
|
|
<th className="text-left px-4 py-3 font-medium text-gray-600">Name</th>
|
|
<th className="text-left px-4 py-3 font-medium text-gray-600">Beschreibung</th>
|
|
<th className="text-center px-4 py-3 font-medium text-gray-600">Typ</th>
|
|
<th className="text-left px-4 py-3 font-medium text-gray-600">Berechtigungen</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{roles.length === 0 ? (
|
|
<tr><td colSpan={4} className="text-center py-8 text-gray-400">Keine Rollen</td></tr>
|
|
) : roles.map(role => (
|
|
<tr key={role.id} className="border-b border-gray-100 hover:bg-gray-50">
|
|
<td className="px-4 py-3 font-medium">{role.name}</td>
|
|
<td className="px-4 py-3 text-gray-500 max-w-xs truncate">{role.description}</td>
|
|
<td className="px-4 py-3 text-center">
|
|
<span className={`px-2 py-0.5 rounded text-xs font-medium ${
|
|
role.is_system ? 'bg-purple-50 text-purple-700' : 'bg-gray-100 text-gray-600'
|
|
}`}>
|
|
{role.is_system ? 'System' : 'Custom'}
|
|
</span>
|
|
</td>
|
|
<td className="px-4 py-3">
|
|
<div className="flex flex-wrap gap-1">
|
|
{(role.permissions || []).slice(0, 4).map(p => (
|
|
<span key={p} className="px-1.5 py-0.5 bg-gray-100 text-gray-600 rounded text-xs">{p}</span>
|
|
))}
|
|
{(role.permissions || []).length > 4 && (
|
|
<span className="text-xs text-gray-400">+{role.permissions.length - 4}</span>
|
|
)}
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|