@dbs-portal/module-identity/dist/pages/UserListPage.js

Identity management module for user and role management

import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
/**
 * User List Page
 *
 * Complete page component for user management with data fetching, filtering,
 * and navigation. This is a self-contained page that can be directly used
 * in any application that imports the identity module.
 */
import React, { useState } from 'react';
import { Card, Button, Space, Input, Select, Row, Col, Typography, message, Modal } from 'antd';
import { PlusOutlined, SearchOutlined, FilterOutlined, ExportOutlined } from '@ant-design/icons';
// Import from same module
import { UserList } from '../components/UserList';
import { useUsers, useDeleteUser, useLockUser, useUnlockUser } from '../hooks';
const { Title } = Typography;
const { Option } = Select;
export const UserListPage = ({ onNavigate, onCreateUser, onEditUser, onViewUser, className }) => {
    const [filters, setFilters] = useState({});
    const [searchText, setSearchText] = useState('');
    const [selectedStatus, setSelectedStatus] = useState();
    // Hooks from identity module
    const { data: usersData, isLoading, error } = useUsers(filters);
    const deleteUserMutation = useDeleteUser();
    const lockUserMutation = useLockUser();
    const unlockUserMutation = useUnlockUser();
    const users = usersData?.data || [];
    const handleSearch = () => {
        setFilters({
            ...filters,
            keyword: searchText,
            isActive: selectedStatus
        });
    };
    const handleCreateUser = () => {
        if (onCreateUser) {
            onCreateUser();
        }
        else if (onNavigate) {
            onNavigate('/identity/users/create');
        }
    };
    const handleEditUser = (user) => {
        if (onEditUser) {
            onEditUser(user);
        }
        else if (onNavigate) {
            onNavigate(`/identity/users/${user.id}/edit`);
        }
    };
    const handleViewUser = (user) => {
        if (onViewUser) {
            onViewUser(user);
        }
        else if (onNavigate) {
            onNavigate(`/identity/users/${user.id}`);
        }
    };
    const handleDeleteUser = (user) => {
        Modal.confirm({
            title: 'Delete User',
            content: `Are you sure you want to delete user "${user.displayName || user.userName}"? This action cannot be undone.`,
            okText: 'Delete',
            okType: 'danger',
            cancelText: 'Cancel',
            onOk: async () => {
                try {
                    await deleteUserMutation.mutateAsync(user.id);
                    message.success('User deleted successfully');
                }
                catch (error) {
                    message.error('Failed to delete user');
                    console.error('Delete user error:', error);
                }
            }
        });
    };
    const handleLockUser = (user) => {
        Modal.confirm({
            title: 'Lock User Account',
            content: `Are you sure you want to lock the account for "${user.displayName || user.userName}"?`,
            okText: 'Lock Account',
            okType: 'danger',
            cancelText: 'Cancel',
            onOk: async () => {
                try {
                    await lockUserMutation.mutateAsync({
                        userId: user.id,
                        lockoutEnd: new Date(Date.now() + 24 * 60 * 60 * 1000) // Lock for 24 hours
                    });
                    message.success('User account locked successfully');
                }
                catch (error) {
                    message.error('Failed to lock user account');
                    console.error('Lock user error:', error);
                }
            }
        });
    };
    const handleUnlockUser = (user) => {
        Modal.confirm({
            title: 'Unlock User Account',
            content: `Are you sure you want to unlock the account for "${user.displayName || user.userName}"?`,
            okText: 'Unlock Account',
            cancelText: 'Cancel',
            onOk: async () => {
                try {
                    await unlockUserMutation.mutateAsync(user.id);
                    message.success('User account unlocked successfully');
                }
                catch (error) {
                    message.error('Failed to unlock user account');
                    console.error('Unlock user error:', error);
                }
            }
        });
    };
    const handleExport = () => {
        // Mock export functionality
        message.info('Export functionality will be implemented');
    };
    if (error) {
        return (_jsx(Card, { className: className, children: _jsxs(Typography.Text, { type: "danger", children: ["Failed to load users: ", error.message] }) }));
    }
    return (_jsxs("div", { className: className, children: [_jsx("div", { style: { marginBottom: 24 }, children: _jsxs(Row, { justify: "space-between", align: "middle", children: [_jsx(Col, { children: _jsx(Title, { level: 2, style: { margin: 0 }, children: "User Management" }) }), _jsx(Col, { children: _jsxs(Space, { children: [_jsx(Button, { type: "primary", icon: _jsx(PlusOutlined, {}), onClick: handleCreateUser, children: "Create User" }), _jsx(Button, { icon: _jsx(ExportOutlined, {}), onClick: handleExport, children: "Export" })] }) })] }) }), _jsx(Card, { style: { marginBottom: 16 }, children: _jsxs(Row, { gutter: 16, align: "middle", children: [_jsx(Col, { xs: 24, sm: 8, children: _jsx(Input, { placeholder: "Search users...", prefix: _jsx(SearchOutlined, {}), value: searchText, onChange: (e) => setSearchText(e.target.value), onPressEnter: handleSearch }) }), _jsx(Col, { xs: 24, sm: 6, children: _jsxs(Select, { placeholder: "Status", style: { width: '100%' }, value: selectedStatus, onChange: setSelectedStatus, allowClear: true, children: [_jsx(Option, { value: true, children: "Active" }), _jsx(Option, { value: false, children: "Inactive" })] }) }), _jsx(Col, { xs: 24, sm: 4, children: _jsx(Button, { type: "primary", icon: _jsx(FilterOutlined, {}), onClick: handleSearch, style: { width: '100%' }, children: "Filter" }) })] }) }), _jsx(Card, { children: _jsx(UserList, { users: users, loading: isLoading, onEdit: handleEditUser, onDelete: handleDeleteUser, onLock: handleLockUser, onUnlock: handleUnlockUser }) })] }));
};
//# sourceMappingURL=UserListPage.js.map