Добавлены компоненты для управления профилем пользователя, включая редактирование личной информации, смену пароля и настройки уведомлений. Обновлен контекст пользователя для хранения имени и фамилии. Обновлены стили для страницы аккаунта и компонентов.

src/app/account/page.tsx

@@ -1,52 +1,85 @@
 "use client";
-import { useEffect, useState } from "react";
-import styles from "../../styles/dashboard.module.css";
+import { useState } from "react";
 import AuthGuard from "../../components/AuthGuard";
+import styles from "../../styles/dashboard.module.css";
+import navStyles from "../../styles/navigation.module.css";
+import accountStyles from "../../styles/account.module.css";
+import { 
+  Person as UserIcon,
+  Email as MailIcon,
+  Phone as PhoneIcon,
+  LocationOn as MapPinIcon,
+  CalendarMonth as CalendarIcon,
+  Business as CompanyIcon,
+  Work as WorkIcon,
+  Edit as EditIcon,
+  Save as SaveIcon,
+  Lock as KeyIcon,
+  Visibility as EyeIcon,
+  VisibilityOff as EyeOffIcon,
+  Notifications as BellIcon
+} from "@mui/icons-material";
+import AccountProfile from "../../components/AccountProfile";
+import AccountSecurity from "../../components/AccountSecurity";
+import AccountNotifications from "../../components/AccountNotifications";
 
-interface AccountData {
-  id: number;
-  login: string;
-  name: string | null;
-  email: string | null;
-  balance: number;
-}
+const initialNotifications = {
+  emailNotifications: true,
+  smsNotifications: false,
+  pushNotifications: true,
+  weeklyReports: true,
+  payoutAlerts: true
+};
 
 export default function AccountPage() {
-//   const [account, setAccount] = useState<AccountData | null>(null);
-//   const [loading, setLoading] = useState(true);
-//   const [error, setError] = useState<string | null>(null);
+  const [showPassword, setShowPassword] = useState(false);
+  const [activeTab, setActiveTab] = useState("profile");
+  const [passwordForm, setPasswordForm] = useState({
+    currentPassword: "",
+    newPassword: "",
+    confirmPassword: ""
+  });
+  const [notifications, setNotifications] = useState(initialNotifications);
 
-//   useEffect(() => {
-//     fetch("/api/account")
-//       .then((res) => {
-//         if (!res.ok) throw new Error("Ошибка загрузки данных аккаунта");
-//         return res.json();
-//       })
-//       .then((data) => {
-//         setAccount(data);
-//         setLoading(false);
-//       })
-//       .catch((err) => {
-//         setError(err.message);
-//         setLoading(false);
-//       });
-//   }, []);
 
-//   if (loading) return <div className={styles.dashboard}>Загрузка...</div>;
-//   if (error) return <div className={styles.dashboard}>Ошибка: {error}</div>;
-//   if (!account) return <div className={styles.dashboard}>Нет данных</div>;
+
+  const tabs = [
+    { id: "profile", label: "Профиль", icon: <UserIcon fontSize="small" /> },
+    { id: "security", label: "Безопасность", icon: <KeyIcon fontSize="small" /> },
+    { id: "notifications", label: "Уведомления", icon: <BellIcon fontSize="small" /> },
+  ];
 
   return (
     <AuthGuard>
       <div className={styles.dashboard}>
         <h1 className={styles.title}>Аккаунт</h1>
-        <div className={styles.card} style={{ maxWidth: 400, margin: "0 auto" }}>
-          {/* <div><b>ID:</b> {account.id}</div>
-          <div><b>Логин:</b> {account.login}</div>
-          <div><b>Имя:</b> {account.name || "-"}</div>
-          <div><b>Email:</b> {account.email || "-"}</div>
-          <div><b>Баланс:</b> {account.balance.toLocaleString("ru-RU", { style: "currency", currency: "RUB" })}</div> */}
+        <div className={accountStyles.accountTabsNav}>
+          <nav className={accountStyles.accountTabsNav}>
+            {tabs.map(tab => (
+              <button
+                key={tab.id}
+                onClick={() => setActiveTab(tab.id)}
+                className={
+                  activeTab === tab.id
+                    ? `${accountStyles.accountTabsButton} ${accountStyles.accountTabsButtonActive}`
+                    : accountStyles.accountTabsButton
+                }
+              >
+                {tab.icon}
+                {tab.label}
+              </button>
+            ))}
+          </nav>
         </div>
+        {activeTab === "profile" && (
+          <AccountProfile />
+        )}
+        {activeTab === "security" && (
+          <AccountSecurity />
+        )}
+        {activeTab === "notifications" && (
+          <AccountNotifications notifications={notifications} setNotifications={setNotifications} />
+        )}
       </div>
     </AuthGuard>
   );