add buttons

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<UserRole | "">("");
+	const [inviteDialogOpen, setInviteDialogOpen] = useState(false);
 
 	const { data: users } = useGet<User[]>("/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 (
 		<Stack gap={theme.spacing(8)}>
 			<HeaderTeamControls
 				filter={filter}
 				onFilterChange={setFilter}
+				onInviteClick={handleOpenInviteDialog}
 			/>
 			<TeamTable users={filteredUsers} />
+			<InviteTeamMemberDialog
+				open={inviteDialogOpen}
+				onClose={handleCloseInviteDialog}
+			/>
 		</Stack>
 	);
 };

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={<Icon icon={Mail} />}
+					onClick={onInviteClick}
 				>
 					{t("pages.account.team.inviteMember")}
 				</Button>

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 (
+		<Dialog
+			open={open}
+			title={t("pages.account.team.invite.title")}
+			content={t("pages.account.team.invite.description")}
+			onCancel={onClose}
+			onConfirm={() => {}}
+			maxWidth="sm"
+			fullWidth
+			confirmText={t("pages.account.team.invite.sendInvite")}
+		>
+			<Stack
+				gap={theme.spacing(4)}
+				mt={theme.spacing(4)}
+			>
+				<TextField
+					fieldLabel={t("pages.account.team.invite.email.label")}
+					placeholder={t("pages.account.team.invite.email.placeholder")}
+					type="email"
+					fullWidth
+				/>
+				<Select
+					fieldLabel={t("pages.account.team.invite.role.label")}
+					placeholder={t("pages.account.team.invite.role.placeholder")}
+					defaultValue="user"
+					fullWidth
+				>
+					{roleOptions.map((option) => (
+						<MenuItem
+							key={option.value}
+							value={option.value}
+						>
+							{option.label}
+						</MenuItem>
+					))}
+				</Select>
+				<Button
+					sx={{ alignSelf: "flex-end" }}
+					variant="contained"
+					color="primary"
+					onClick={() => {}}
+				>
+					{t("pages.account.team.invite.generateToken")}
+				</Button>
+			</Stack>
+		</Dialog>
+	);
+};

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"
 				}
 			}
 		},