initial commit

client/src/Pages/Account/TabPassword.tsx

@@ -0,0 +1,5 @@
+import { Box } from "@mui/material";
+
+export const TabPassword = () => {
+	return <Box>{/* TODO: Implement TabPassword */}</Box>;
+};

client/src/Pages/Account/TabProfile.tsx

@@ -0,0 +1,44 @@
+import { Stack } from "@mui/material";
+import { useTranslation } from "react-i18next";
+import { ConfigBox } from "@/Components/v2/design-elements";
+import { TextField, Button } from "@/Components/v2/inputs";
+import { ImageUpload } from "@/Components/v2/inputs";
+
+export const TabProfile = () => {
+	const { t } = useTranslation();
+
+	return (
+		<Stack gap={4}>
+			<ConfigBox
+				title={t("pages.account.profile.name.title")}
+				subtitle={t("pages.account.profile.name.subtitle")}
+				rightContent={
+					<Stack gap={3}>
+						<TextField
+							fieldLabel={t("pages.account.profile.name.firstName")}
+							placeholder={t("pages.account.profile.name.firstNamePlaceholder")}
+							autoComplete="given-name"
+						/>
+						<TextField
+							fieldLabel={t("pages.account.profile.name.lastName")}
+							placeholder={t("pages.account.profile.name.lastNamePlaceholder")}
+							autoComplete="family-name"
+						/>
+					</Stack>
+				}
+			/>
+			<ConfigBox
+				title={t("pages.account.profile.photo.title")}
+				subtitle={t("pages.account.profile.photo.subtitle")}
+				rightContent={<ImageUpload />}
+			/>
+			<Button
+				variant="contained"
+				color="primary"
+				sx={{ alignSelf: "flex-end" }}
+			>
+				{t("common.buttons.save")}
+			</Button>
+		</Stack>
+	);
+};

client/src/Pages/Account/TabTeam.tsx

@@ -0,0 +1,5 @@
+import { Box } from "@mui/material";
+
+export const TabTeam = () => {
+	return <Box>{/* TODO: Implement TabTeam */}</Box>;
+};

client/src/Pages/Account/index.tsx

@@ -0,0 +1,39 @@
+import { BasePage, Tabs, Tab } from "@/Components/v2/design-elements";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { TabProfile } from "./TabProfile";
+import { TabPassword } from "./TabPassword";
+import { TabTeam } from "./TabTeam";
+
+interface AccountProps {
+	open?: "profile" | "password" | "team";
+}
+
+const TAB_MAP = {
+	profile: 0,
+	password: 1,
+	team: 2,
+} as const;
+
+const Account = ({ open = "profile" }: AccountProps) => {
+	const { t } = useTranslation();
+	const [activeTab, setActiveTab] = useState<number>(TAB_MAP[open]);
+
+	return (
+		<BasePage>
+			<Tabs
+				value={activeTab}
+				onChange={(_, newValue: number) => setActiveTab(newValue)}
+			>
+				<Tab label={t("pages.account.tabs.profile")} />
+				<Tab label={t("pages.account.tabs.password")} />
+				<Tab label={t("pages.account.tabs.team")} />
+			</Tabs>
+			{activeTab === 0 && <TabProfile />}
+			{activeTab === 1 && <TabPassword />}
+			{activeTab === 2 && <TabTeam />}
+		</BasePage>
+	);
+};
+
+export default Account;

client/src/Routes/index.jsx

@@ -45,7 +45,7 @@ import Notifications from "../Pages/Notifications";
 import CreateNotifications from "../Pages/Notifications/create";
 
 // Settings
-import Account from "../Pages/Account/index.jsx";
+import Account from "@/Pages/Account";
 import EditUser from "../Pages/Account/EditUser/index.jsx";
 import Settings from "../Pages/Settings";
 
@@ -328,15 +328,27 @@ const Routes = () => {
 				/>
 				<Route
 					path="account/profile"
-					element={<Account open={"profile"} />}
+					element={
+						<ThemeProvider theme={v2theme}>
+							<Account open={"profile"} />
+						</ThemeProvider>
+					}
 				/>
 				<Route
 					path="account/password"
-					element={<Account open={"password"} />}
+					element={
+						<ThemeProvider theme={v2theme}>
+							<Account open={"password"} />
+						</ThemeProvider>
+					}
 				/>
 				<Route
 					path="account/team"
-					element={<Account open={"team"} />}
+					element={
+						<ThemeProvider theme={v2theme}>
+							<Account open={"team"} />
+						</ThemeProvider>
+					}
 				/>
 				<Route
 					path="account/team/:userId"

client/src/locales/en.json

@@ -498,6 +498,37 @@
 	"now": "Now",
 	"os": "OS",
 	"pages": {
+		"account": {
+			"tabs": {
+				"profile": "Profile",
+				"password": "Password",
+				"team": "Team"
+			},
+			"form": {
+				"name": {
+					"title": "Name",
+					"description": "Update your personal information",
+					"option": {
+						"firstName": {
+							"label": "First name",
+							"placeholder": "Enter your first name"
+						},
+						"lastName": {
+							"label": "Last name",
+							"placeholder": "Enter your last name"
+						}
+					}
+				},
+				"photo": {
+					"title": "Profile photo",
+					"description": "Upload a profile picture"
+				},
+				"deleteAccount": {
+					"title": "Delete account",
+					"description": "This action is permanent and cannot be undone"
+				}
+			}
+		},
 		"auth": {
 			"common": {
 				"form": {