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

Identity management module for user and role management

import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { Card, Descriptions, Avatar, Tag, Button, Space, Typography, Row, Col, } from 'antd';
import { EditOutlined, DeleteOutlined, LockOutlined, UnlockOutlined, UserOutlined, MailOutlined, PhoneOutlined, CalendarOutlined, SafetyOutlined, CheckCircleOutlined, CloseCircleOutlined } from '@ant-design/icons';
import { format } from 'date-fns';
const { Title, Text } = Typography;
export const UserDetails = ({ user, onEdit, onDelete, onLock, onUnlock, className }) => {
    const isLocked = user.lockoutEnd && new Date(user.lockoutEnd) > new Date();
    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(Avatar, { size: 64, src: user.avatar, icon: _jsx(UserOutlined, {}) }), _jsxs("div", { children: [_jsx(Title, { level: 2, style: { margin: 0 }, children: user.displayName || `${user.firstName} ${user.lastName}`.trim() || user.userName }), _jsxs(Text, { type: "secondary", children: ["@", user.userName] }), _jsx("div", { style: { marginTop: 8 }, children: _jsxs(Space, { wrap: true, children: [_jsx(Tag, { color: user.isActive ? 'green' : 'red', children: user.isActive ? 'Active' : 'Inactive' }), user.emailConfirmed && (_jsx(Tag, { color: "blue", icon: _jsx(CheckCircleOutlined, {}), children: "Email Verified" })), user.phoneNumberConfirmed && (_jsx(Tag, { color: "cyan", icon: _jsx(CheckCircleOutlined, {}), children: "Phone Verified" })), user.twoFactorEnabled && (_jsx(Tag, { color: "purple", icon: _jsx(SafetyOutlined, {}), children: "2FA Enabled" })), isLocked && (_jsx(Tag, { color: "orange", icon: _jsx(LockOutlined, {}), children: "Locked" }))] }) })] })] }), _jsxs(Space, { children: [onEdit && (_jsx(Button, { type: "primary", icon: _jsx(EditOutlined, {}), onClick: onEdit, children: "Edit" })), isLocked ? (onUnlock && (_jsx(Button, { icon: _jsx(UnlockOutlined, {}), onClick: onUnlock, children: "Unlock" }))) : (onLock && (_jsx(Button, { icon: _jsx(LockOutlined, {}), onClick: onLock, children: "Lock" }))), onDelete && (_jsx(Button, { danger: true, icon: _jsx(DeleteOutlined, {}), onClick: onDelete, children: "Delete" }))] })] }) }), _jsx(Col, { xs: 24, lg: 12, children: _jsx(Card, { size: "small", title: "Basic Information", children: _jsxs(Descriptions, { column: 1, size: "small", children: [_jsx(Descriptions.Item, { label: _jsxs(_Fragment, { children: [_jsx(UserOutlined, {}), " Full Name"] }), children: user.firstName && user.lastName
                                        ? `${user.firstName} ${user.lastName}`
                                        : 'Not provided' }), _jsx(Descriptions.Item, { label: _jsxs(_Fragment, { children: [_jsx(MailOutlined, {}), " Email"] }), children: _jsxs(Space, { children: [user.email, user.emailConfirmed ? (_jsx(CheckCircleOutlined, { style: { color: '#52c41a' } })) : (_jsx(CloseCircleOutlined, { style: { color: '#ff4d4f' } }))] }) }), _jsx(Descriptions.Item, { label: _jsxs(_Fragment, { children: [_jsx(PhoneOutlined, {}), " Phone"] }), children: _jsxs(Space, { children: [user.phoneNumber || 'Not provided', user.phoneNumber && (user.phoneNumberConfirmed ? (_jsx(CheckCircleOutlined, { style: { color: '#52c41a' } })) : (_jsx(CloseCircleOutlined, { style: { color: '#ff4d4f' } })))] }) })] }) }) }), _jsx(Col, { xs: 24, lg: 12, children: _jsx(Card, { size: "small", title: "Security & Access", children: _jsxs(Descriptions, { column: 1, size: "small", children: [_jsx(Descriptions.Item, { label: _jsxs(_Fragment, { children: [_jsx(SafetyOutlined, {}), " Two-Factor Auth"] }), children: user.twoFactorEnabled ? (_jsx(Tag, { color: "green", children: "Enabled" })) : (_jsx(Tag, { color: "red", children: "Disabled" })) }), _jsx(Descriptions.Item, { label: _jsxs(_Fragment, { children: [_jsx(LockOutlined, {}), " Account Status"] }), children: isLocked ? (_jsxs(Tag, { color: "orange", children: ["Locked until ", formatDate(user.lockoutEnd)] })) : (_jsx(Tag, { color: "green", children: "Unlocked" })) }), _jsx(Descriptions.Item, { label: "Failed Login Attempts", children: user.accessFailedCount }), _jsx(Descriptions.Item, { label: _jsxs(_Fragment, { children: [_jsx(CalendarOutlined, {}), " Last Login"] }), children: formatDate(user.lastLoginAt) })] }) }) }), _jsx(Col, { xs: 24, lg: 12, children: _jsx(Card, { size: "small", title: "Assigned Roles", children: _jsx(Space, { wrap: true, children: user.roles && user.roles.length > 0 ? (user.roles.map(role => (_jsx(Tag, { color: "blue", children: role }, role)))) : (_jsx(Text, { type: "secondary", children: "No roles assigned" })) }) }) }), _jsx(Col, { xs: 24, lg: 12, children: _jsx(Card, { size: "small", title: "Direct Permissions", children: _jsxs(Space, { wrap: true, children: [user.permissions && user.permissions.length > 0 ? (user.permissions.slice(0, 10).map(permission => (_jsx(Tag, { color: "purple", children: permission }, permission)))) : (_jsx(Text, { type: "secondary", children: "No direct permissions" })), user.permissions && user.permissions.length > 10 && (_jsxs(Tag, { children: ["+", user.permissions.length - 10, " more"] }))] }) }) }), _jsx(Col, { span: 24, children: _jsx(Card, { size: "small", title: "Account Information", children: _jsxs(Descriptions, { column: 2, size: "small", children: [_jsx(Descriptions.Item, { label: _jsxs(_Fragment, { children: [_jsx(CalendarOutlined, {}), " Created"] }), children: formatDate(user.createdAt) }), _jsx(Descriptions.Item, { label: _jsxs(_Fragment, { children: [_jsx(CalendarOutlined, {}), " Last Updated"] }), children: formatDate(user.updatedAt) }), _jsx(Descriptions.Item, { label: "User ID", children: _jsx(Text, { code: true, children: user.id }) }), user.metadata && Object.keys(user.metadata).length > 0 && (_jsx(Descriptions.Item, { label: "Additional Data", children: _jsx(Text, { code: true, children: JSON.stringify(user.metadata, null, 2) }) }))] }) }) })] }) }));
};
//# sourceMappingURL=UserDetails.js.map