81 lines
2.0 KiB
TypeScript
81 lines
2.0 KiB
TypeScript
import Stack from "@mui/material/Stack";
|
|
import MenuItem from "@mui/material/MenuItem";
|
|
import { Button, Select } from "@/Components/v2/inputs";
|
|
import { Icon } from "@/Components/v2/design-elements";
|
|
import { UserPlus, Mail } from "lucide-react";
|
|
|
|
import { UserRoles } from "@/Types/User";
|
|
import { useTheme } from "@mui/material/styles";
|
|
import type { UserRole } from "@/Types/User";
|
|
import { useTranslation } from "react-i18next";
|
|
import { useIsAdmin, useIsSuperAdmin } from "@/Hooks/useIsAdmin";
|
|
|
|
interface HeaderTeamControlsProps {
|
|
filter: UserRole | "";
|
|
onFilterChange: (value: UserRole | "") => void;
|
|
onInviteClick?: () => void;
|
|
onAddMemberClick?: () => void;
|
|
}
|
|
|
|
export const HeaderTeamControls = ({
|
|
filter,
|
|
onFilterChange,
|
|
onInviteClick,
|
|
onAddMemberClick,
|
|
}: HeaderTeamControlsProps) => {
|
|
const theme = useTheme();
|
|
const { t } = useTranslation();
|
|
const isAdmin = useIsAdmin();
|
|
const isSuperAdmin = useIsSuperAdmin();
|
|
|
|
const handleFilterChange = (event: { target: { value: unknown } }) => {
|
|
onFilterChange(event.target.value as UserRole | "");
|
|
};
|
|
|
|
return (
|
|
<Stack
|
|
direction="row"
|
|
alignItems="center"
|
|
justifyContent="flex-end"
|
|
gap={theme.spacing(4)}
|
|
>
|
|
<Select
|
|
value={filter}
|
|
onChange={handleFilterChange}
|
|
placeholder={t("pages.account.team.filter.placeholder")}
|
|
sx={{ minWidth: 150 }}
|
|
>
|
|
<MenuItem value="">{t("pages.account.team.filter.all")}</MenuItem>
|
|
{UserRoles.map((role) => (
|
|
<MenuItem
|
|
key={role}
|
|
value={role}
|
|
>
|
|
{t(`common.auth.roles.${role}`)}
|
|
</MenuItem>
|
|
))}
|
|
</Select>
|
|
{isAdmin && (
|
|
<Button
|
|
variant="contained"
|
|
color="primary"
|
|
startIcon={<Icon icon={Mail} />}
|
|
onClick={onInviteClick}
|
|
>
|
|
{t("common.buttons.inviteMember")}
|
|
</Button>
|
|
)}
|
|
{isSuperAdmin && (
|
|
<Button
|
|
variant="contained"
|
|
color="primary"
|
|
startIcon={<Icon icon={UserPlus} />}
|
|
onClick={onAddMemberClick}
|
|
>
|
|
{t("common.buttons.addMember")}
|
|
</Button>
|
|
)}
|
|
</Stack>
|
|
);
|
|
};
|