add team member initial commit

client/src/Pages/Account/TabTeam.tsx

@@ -4,6 +4,7 @@ import { useState, useMemo } from "react";
 import { HeaderTeamControls } from "./components/HeaderTeamControls";
 import { TeamTable } from "./components/TeamTable";
 import { InviteTeamMemberDialog } from "./components/InviteTeamMemberDialog";
+import { AddTeamMemberDialog } from "./components/AddTeamMemberDialog";
 import { useGet } from "@/Hooks/UseApi";
 import type { User, UserRole } from "@/Types/User";
 
@@ -11,6 +12,7 @@ export const TabTeam = () => {
 	const theme = useTheme();
 	const [filter, setFilter] = useState<UserRole | "">("");
 	const [inviteDialogOpen, setInviteDialogOpen] = useState(false);
+	const [addMemberDialogOpen, setAddMemberDialogOpen] = useState(false);
 
 	const { data: users } = useGet<User[]>("/auth/users");
 
@@ -24,18 +26,26 @@ export const TabTeam = () => {
 	const handleOpenInviteDialog = () => setInviteDialogOpen(true);
 	const handleCloseInviteDialog = () => setInviteDialogOpen(false);
 
+	const handleOpenAddMemberDialog = () => setAddMemberDialogOpen(true);
+	const handleCloseAddMemberDialog = () => setAddMemberDialogOpen(false);
+
 	return (
 		<Stack gap={theme.spacing(8)}>
 			<HeaderTeamControls
 				filter={filter}
 				onFilterChange={setFilter}
 				onInviteClick={handleOpenInviteDialog}
+				onAddMemberClick={handleOpenAddMemberDialog}
 			/>
 			<TeamTable users={filteredUsers} />
 			<InviteTeamMemberDialog
 				open={inviteDialogOpen}
 				onClose={handleCloseInviteDialog}
 			/>
+			<AddTeamMemberDialog
+				open={addMemberDialogOpen}
+				onClose={handleCloseAddMemberDialog}
+			/>
 		</Stack>
 	);
 };

client/src/Pages/Account/components/AddTeamMemberDialog.tsx

@@ -0,0 +1,87 @@
+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 } from "@/Components/v2/inputs";
+import type { UserRole } from "@/Types/User";
+
+interface AddTeamMemberDialogProps {
+	open: boolean;
+	onClose: () => void;
+}
+
+export const AddTeamMemberDialog = ({ open, onClose }: AddTeamMemberDialogProps) => {
+	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") },
+	];
+
+	const handleClose = () => {
+		onClose();
+	};
+
+	return (
+		<Dialog
+			open={open}
+			title={t("pages.account.team.addMember.title")}
+			content={t("pages.account.team.addMember.description")}
+			onCancel={handleClose}
+			onConfirm={() => {}}
+			confirmText={t("common.buttons.addMember")}
+			maxWidth="sm"
+			fullWidth
+		>
+			<Stack
+				gap={theme.spacing(4)}
+				mt={theme.spacing(4)}
+			>
+				<TextField
+					fieldLabel={t("pages.auth.register.form.option.name.label")}
+					placeholder={t("pages.auth.register.form.option.name.placeholder")}
+					fullWidth
+				/>
+				<TextField
+					fieldLabel={t("pages.auth.register.form.option.surname.label")}
+					placeholder={t("pages.auth.register.form.option.surname.placeholder")}
+					fullWidth
+				/>
+				<TextField
+					fieldLabel={t("pages.auth.common.form.option.email.label")}
+					placeholder={t("pages.auth.common.form.option.email.placeholder")}
+					type="email"
+					fullWidth
+				/>
+				<Select
+					fieldLabel={t("pages.account.team.invite.role.label")}
+					placeholder={t("pages.account.team.invite.role.placeholder")}
+					fullWidth
+					defaultValue="user"
+				>
+					{roleOptions.map((option) => (
+						<MenuItem
+							key={option.value}
+							value={option.value}
+						>
+							{option.label}
+						</MenuItem>
+					))}
+				</Select>
+				<TextField
+					fieldLabel={t("pages.auth.common.form.option.password.label")}
+					placeholder={t("pages.auth.common.form.option.password.placeholder")}
+					type="password"
+					fullWidth
+				/>
+				<TextField
+					fieldLabel={t("pages.auth.common.form.option.confirmPassword.label")}
+					placeholder={t("pages.auth.common.form.option.password.placeholder")}
+					type="password"
+					fullWidth
+				/>
+			</Stack>
+		</Dialog>
+	);
+};

client/src/Pages/Account/components/HeaderTeamControls.tsx

@@ -14,12 +14,14 @@ 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();
@@ -68,6 +70,7 @@ export const HeaderTeamControls = ({
 					variant="contained"
 					color="primary"
 					startIcon={<Icon icon={UserPlus} />}
+					onClick={onAddMemberClick}
 				>
 					{t("common.buttons.addMember")}
 				</Button>

client/src/locales/en.json

@@ -578,6 +578,10 @@
 						"role": "Role"
 					}
 				},
+				"addMember": {
+					"title": "Register new team member",
+					"description": "Create a new user account. Share credentials securely after creation."
+				},
 				"invite": {
 					"title": "Invite team member",
 					"description": "Send an invitation to join your team",