119 lines
2.9 KiB
TypeScript
119 lines
2.9 KiB
TypeScript
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";
|
|
|
|
interface Props {
|
|
username: string;
|
|
name: string;
|
|
email: string;
|
|
isAdmin: boolean;
|
|
lastLogin: string;
|
|
merchants: string[];
|
|
roles: string[];
|
|
extraRolesCount?: number;
|
|
}
|
|
|
|
export default function UserRoleCard({
|
|
username,
|
|
name,
|
|
email,
|
|
isAdmin,
|
|
lastLogin,
|
|
// merchants,
|
|
roles,
|
|
extraRolesCount,
|
|
}: Props) {
|
|
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>
|
|
<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>
|
|
|
|
{/* Footer */}
|
|
<Box mt={2}>
|
|
<Typography variant="caption" color="text.secondary">
|
|
{lastLogin}
|
|
</Typography>
|
|
</Box>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|