@dbs-portal/module-identity/dist/components/RoleDetails.js

Identity management module for user and role management

import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
/**
 * Role Details Component
 */
import React from 'react';
import { Card, Descriptions, Tag, Button, Space, Typography, Row, Col, Divider } from 'antd';
import { EditOutlined, DeleteOutlined, SafetyOutlined, CalendarOutlined, UserOutlined, CheckCircleOutlined, CloseCircleOutlined } from '@ant-design/icons';
import { format } from 'date-fns';
import { useRolePermissions, useRoleUsers } from '../hooks';
const { Title, Text } = Typography;
export const RoleDetails = ({ role, onEdit, onDelete, className }) => {
    const { data: rolePermissions } = useRolePermissions(role.id);
    const { data: roleUsers } = useRoleUsers(role.id);
    const formatDate = (date) => {
        if (!date)
            return 'Never';
        try {
            return format(new Date(date), 'PPP p');
        }
        catch {
            return 'Invalid date';
        }
    };
    return (_jsx(Card, { className: className, children: _jsxs(Row, { gutter: [24, 24], children: [_jsx(Col, { span: 24, children: _jsxs("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between' }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 16 }, children: [_jsx(SafetyOutlined, { style: { fontSize: 48, color: '#1890ff' } }), _jsxs("div", { children: [_jsx(Title, { level: 2, style: { margin: 0 }, children: role.displayName || role.name }), _jsx(Text, { type: "secondary", children: role.name }), _jsx("div", { style: { marginTop: 8 }, children: _jsxs(Space, { wrap: true, children: [role.isDefault && (_jsx(Tag, { color: "blue", icon: _jsx(CheckCircleOutlined, {}), children: "Default Role" })), role.isStatic ? (_jsx(Tag, { color: "orange", icon: _jsx(CloseCircleOutlined, {}), children: "System Role" })) : (_jsx(Tag, { color: "green", children: "Custom Role" }))] }) })] })] }), _jsxs(Space, { children: [onEdit && (_jsx(Button, { type: "primary", icon: _jsx(EditOutlined, {}), onClick: onEdit, children: "Edit" })), onDelete && !role.isStatic && (_jsx(Button, { danger: true, icon: _jsx(DeleteOutlined, {}), onClick: onDelete, children: "Delete" }))] })] }) }), _jsx(Col, { xs: 24, lg: 12, children: _jsx(Card, { size: "small", title: "Role Information", children: _jsxs(Descriptions, { column: 1, size: "small", children: [_jsx(Descriptions.Item, { label: _jsxs(_Fragment, { children: [_jsx(SafetyOutlined, {}), " Role Name"] }), children: role.name }), _jsx(Descriptions.Item, { label: "Display Name", children: role.displayName || 'Not set' }), _jsx(Descriptions.Item, { label: "Description", children: role.description || 'No description provided' }), _jsxs(Descriptions.Item, { label: _jsxs(_Fragment, { children: [_jsx(UserOutlined, {}), " User Count"] }), children: [role.userCount || roleUsers?.length || 0, " users"] })] }) }) }), _jsx(Col, { xs: 24, lg: 12, children: _jsx(Card, { size: "small", title: "Properties", children: _jsxs(Descriptions, { column: 1, size: "small", children: [_jsx(Descriptions.Item, { label: "Default Role", children: role.isDefault ? (_jsx(Tag, { color: "green", icon: _jsx(CheckCircleOutlined, {}), children: "Yes" })) : (_jsx(Tag, { color: "red", icon: _jsx(CloseCircleOutlined, {}), children: "No" })) }), _jsx(Descriptions.Item, { label: "System Role", children: role.isStatic ? (_jsx(Tag, { color: "orange", icon: _jsx(CheckCircleOutlined, {}), children: "Yes (Cannot be deleted)" })) : (_jsx(Tag, { color: "green", icon: _jsx(CloseCircleOutlined, {}), children: "No" })) }), _jsx(Descriptions.Item, { label: _jsxs(_Fragment, { children: [_jsx(CalendarOutlined, {}), " Created"] }), children: formatDate(role.createdAt) }), _jsx(Descriptions.Item, { label: _jsxs(_Fragment, { children: [_jsx(CalendarOutlined, {}), " Last Updated"] }), children: formatDate(role.updatedAt) })] }) }) }), _jsx(Col, { span: 24, children: _jsx(Card, { size: "small", title: "Assigned Permissions", children: _jsx(Space, { wrap: true, children: rolePermissions && rolePermissions.length > 0 ? (rolePermissions.map(permission => (_jsx(Tag, { color: "purple", children: permission }, permission)))) : role.permissions && role.permissions.length > 0 ? (role.permissions.map(permission => (_jsx(Tag, { color: "purple", children: permission }, permission)))) : (_jsx(Text, { type: "secondary", children: "No permissions assigned" })) }) }) }), roleUsers && roleUsers.length > 0 && (_jsx(Col, { span: 24, children: _jsx(Card, { size: "small", title: `Users with ${role.displayName || role.name} Role`, children: _jsx(Space, { wrap: true, children: roleUsers.map(userId => (_jsxs(Tag, { color: "blue", icon: _jsx(UserOutlined, {}), children: ["User ID: ", userId] }, userId))) }) }) })), _jsx(Col, { span: 24, children: _jsx(Card, { size: "small", title: "Role Information", children: _jsxs(Descriptions, { column: 2, size: "small", children: [_jsx(Descriptions.Item, { label: "Role ID", children: _jsx(Text, { code: true, children: role.id }) }), _jsx(Descriptions.Item, { label: "Permission Count", children: rolePermissions?.length || role.permissions?.length || 0 })] }) }) })] }) }));
};
//# sourceMappingURL=RoleDetails.js.map