diff --git a/client/src/Pages/Account/TabTeam.tsx b/client/src/Pages/Account/TabTeam.tsx index 48a78033c..308becb2a 100644 --- a/client/src/Pages/Account/TabTeam.tsx +++ b/client/src/Pages/Account/TabTeam.tsx @@ -3,12 +3,14 @@ import { useTheme } from "@mui/material"; import { useState, useMemo } from "react"; import { HeaderTeamControls } from "./components/HeaderTeamControls"; import { TeamTable } from "./components/TeamTable"; +import { InviteTeamMemberDialog } from "./components/InviteTeamMemberDialog"; import { useGet } from "@/Hooks/UseApi"; import type { User, UserRole } from "@/Types/User"; export const TabTeam = () => { const theme = useTheme(); const [filter, setFilter] = useState(""); + const [inviteDialogOpen, setInviteDialogOpen] = useState(false); const { data: users } = useGet("/auth/users"); @@ -19,13 +21,21 @@ export const TabTeam = () => { return users.filter((u) => u.role.includes(filter)); }, [users, filter]); + const handleOpenInviteDialog = () => setInviteDialogOpen(true); + const handleCloseInviteDialog = () => setInviteDialogOpen(false); + return ( + ); }; diff --git a/client/src/Pages/Account/components/HeaderTeamControls.tsx b/client/src/Pages/Account/components/HeaderTeamControls.tsx index 807a153e4..405e175c0 100644 --- a/client/src/Pages/Account/components/HeaderTeamControls.tsx +++ b/client/src/Pages/Account/components/HeaderTeamControls.tsx @@ -13,11 +13,13 @@ import { useIsAdmin, useIsSuperAdmin } from "@/Hooks/useIsAdmin"; interface HeaderTeamControlsProps { filter: UserRole | ""; onFilterChange: (value: UserRole | "") => void; + onInviteClick?: () => void; } export const HeaderTeamControls = ({ filter, onFilterChange, + onInviteClick, }: HeaderTeamControlsProps) => { const theme = useTheme(); const { t } = useTranslation(); @@ -56,6 +58,7 @@ export const HeaderTeamControls = ({ variant="contained" color="primary" startIcon={} + onClick={onInviteClick} > {t("pages.account.team.inviteMember")} diff --git a/client/src/Pages/Account/components/InviteTeamMemberDialog.tsx b/client/src/Pages/Account/components/InviteTeamMemberDialog.tsx new file mode 100644 index 000000000..8b4fee51f --- /dev/null +++ b/client/src/Pages/Account/components/InviteTeamMemberDialog.tsx @@ -0,0 +1,72 @@ +import { Stack } from "@mui/material"; +import MenuItem from "@mui/material/MenuItem"; +import { useTheme } from "@mui/material"; +import { useTranslation } from "react-i18next"; +import { Dialog, TextField, Select, Button } from "@/Components/v2/inputs"; +import type { UserRole } from "@/Types/User"; + +interface InviteTeamMemberDialogProps { + open: boolean; + onClose: () => void; +} + +export const InviteTeamMemberDialog = ({ + open, + onClose, +}: InviteTeamMemberDialogProps) => { + const theme = useTheme(); + const { t } = useTranslation(); + + const roleOptions: { value: UserRole; label: string }[] = [ + { value: "admin", label: t("common.auth.roles.admin") }, + { value: "user", label: t("common.auth.roles.user") }, + ]; + + return ( + {}} + maxWidth="sm" + fullWidth + confirmText={t("pages.account.team.invite.sendInvite")} + > + + + + + + + ); +}; diff --git a/client/src/locales/en.json b/client/src/locales/en.json index 45b329ea0..5aba9ab6d 100644 --- a/client/src/locales/en.json +++ b/client/src/locales/en.json @@ -572,6 +572,20 @@ "email": "Email", "role": "Role" } + }, + "invite": { + "title": "Invite team member", + "description": "Send an invitation to join your team", + "email": { + "label": "Email address", + "placeholder": "Enter email address" + }, + "role": { + "label": "Role", + "placeholder": "Select a role" + }, + "sendInvite": "Send invite", + "generateToken": "Generate token" } } },