121 lines
3.1 KiB
TypeScript
121 lines
3.1 KiB
TypeScript
import { useState } from "react";
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
Avatar,
|
|
Typography,
|
|
Chip,
|
|
IconButton,
|
|
Tooltip,
|
|
Stack,
|
|
Box,
|
|
} from "@mui/material";
|
|
import {
|
|
Edit,
|
|
Delete,
|
|
Visibility,
|
|
VpnKey,
|
|
InfoOutlined,
|
|
AdminPanelSettings,
|
|
History,
|
|
} from "@mui/icons-material";
|
|
import EditUser from "./EditUser/EditUser";
|
|
import "./User.scss";
|
|
import { IUser } from "../Pages/Admin/Users/interfaces";
|
|
|
|
interface Props {
|
|
user: IUser;
|
|
isAdmin: boolean;
|
|
lastLogin: string;
|
|
merchants: string[];
|
|
extraRolesCount?: number;
|
|
}
|
|
|
|
export default function UserRoleCard({
|
|
user,
|
|
isAdmin,
|
|
extraRolesCount,
|
|
}: Props) {
|
|
const [isEditing, setIsEditing] = useState(false);
|
|
const { username, name, email, authorities: roles } = user;
|
|
const handleEditClick = () => {
|
|
setIsEditing(!isEditing);
|
|
};
|
|
|
|
return (
|
|
<Card sx={{ mb: 2, minWidth: "100%" }}>
|
|
<CardContent>
|
|
{/* Header */}
|
|
<Stack direction="row" alignItems="center" spacing={2}>
|
|
<Avatar>{username?.slice(0, 2).toUpperCase()}</Avatar>
|
|
<Box flexGrow={1}>
|
|
<Typography fontWeight="bold">{username}</Typography>
|
|
<Typography variant="body2">{name}</Typography>
|
|
<Typography variant="caption">{email}</Typography>
|
|
</Box>
|
|
{isAdmin && (
|
|
<Chip icon={<AdminPanelSettings />} label="Admin" size="small" />
|
|
)}
|
|
<IconButton>
|
|
<History />
|
|
</IconButton>
|
|
<Tooltip title="Edit">
|
|
<IconButton onClick={handleEditClick}>
|
|
<Edit />
|
|
</IconButton>
|
|
</Tooltip>
|
|
<Tooltip title="View">
|
|
<IconButton>
|
|
<Visibility />
|
|
</IconButton>
|
|
</Tooltip>
|
|
<Tooltip title="Reset Password">
|
|
<IconButton>
|
|
<VpnKey />
|
|
</IconButton>
|
|
</Tooltip>
|
|
<Tooltip title="Delete">
|
|
<IconButton>
|
|
<Delete />
|
|
</IconButton>
|
|
</Tooltip>
|
|
</Stack>
|
|
|
|
{/* Merchants + Roles */}
|
|
<Box mt={2}>
|
|
<Typography fontWeight="bold">Merchants</Typography>
|
|
{/* <Stack direction="row" spacing={1} mt={1}>
|
|
{merchants.map((m) => (
|
|
<Chip key={m} label={m} size="small" />
|
|
))}
|
|
</Stack> */}
|
|
</Box>
|
|
|
|
<Box mt={2}>
|
|
<Typography fontWeight="bold">
|
|
Roles
|
|
<Tooltip title="Roles assigned to this user">
|
|
<InfoOutlined fontSize="small" />
|
|
</Tooltip>
|
|
</Typography>
|
|
<Stack direction="row" spacing={1} mt={1} flexWrap="wrap">
|
|
<Stack direction="row" spacing={1}>
|
|
{roles.map(role => (
|
|
<Chip key={role} label={role} size="small" />
|
|
))}
|
|
</Stack>
|
|
{extraRolesCount && <Chip label={`+${extraRolesCount}`} />}
|
|
</Stack>
|
|
</Box>
|
|
<div
|
|
className={`user-card__edit-transition${
|
|
isEditing ? " user-card__edit-transition--open" : ""
|
|
}`}
|
|
>
|
|
{isEditing && <EditUser user={user} />}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|