73 lines
3.1 KiB
TypeScript
73 lines
3.1 KiB
TypeScript
import React from 'react';
|
|
import { useSelector } from 'react-redux';
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../../ui/card';
|
|
import { Button } from '../../ui/button';
|
|
import { Badge } from '../../ui/badge';
|
|
import { Shield, Plus, Edit2, Users } from 'lucide-react';
|
|
import { RootState } from '../../../store';
|
|
|
|
interface RolePermissionsProps {
|
|
onAddRole: () => void;
|
|
onEditRole: (role: any) => void;
|
|
}
|
|
|
|
export const RolePermissions: React.FC<RolePermissionsProps> = ({ onAddRole, onEditRole }) => {
|
|
const { roles } = useSelector((state: RootState) => state.master);
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<CardTitle>Roles & Access Controls</CardTitle>
|
|
<CardDescription>Manage user roles and their associated system permissions</CardDescription>
|
|
</div>
|
|
<Button onClick={onAddRole} className="bg-amber-600 hover:bg-amber-700">
|
|
<Plus className="w-4 h-4 mr-2" />
|
|
Add Role
|
|
</Button>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
{roles.map((role) => (
|
|
<div key={role.id} className="border-2 rounded-xl p-6 bg-white hover:border-amber-200 transition-all group shadow-sm">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<div className="w-12 h-12 bg-purple-50 rounded-xl flex items-center justify-center group-hover:bg-purple-100 transition-colors">
|
|
<Shield className="w-6 h-6 text-purple-700" />
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<Button variant="ghost" size="sm" onClick={() => onEditRole(role)} className="h-8 w-8 p-0">
|
|
<Edit2 className="w-4 h-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
<h3 className="text-lg font-bold text-slate-900 mb-1">{role.name}</h3>
|
|
<div className="flex items-center gap-2 text-sm text-slate-500 mb-4">
|
|
<Users className="w-4 h-4" />
|
|
<span>{role.userCount} Active Users</span>
|
|
</div>
|
|
|
|
<div className="space-y-3">
|
|
<p className="text-xs font-semibold text-slate-400 uppercase tracking-wider">Key Permissions</p>
|
|
<div className="flex flex-wrap gap-1.5">
|
|
{role.permissions?.slice(0, 6).map((perm: string, idx: number) => (
|
|
<Badge key={idx} variant="secondary" className="text-[10px] bg-slate-50 border-slate-200 font-medium">
|
|
{perm.replace(/_/g, ' ')}
|
|
</Badge>
|
|
))}
|
|
{role.permissions?.length > 6 && (
|
|
<Badge variant="outline" className="text-[10px] border-slate-200">
|
|
+{role.permissions.length - 6} more
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
};
|