89 lines
3.0 KiB
TypeScript
89 lines
3.0 KiB
TypeScript
"use client";
|
||
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";
|
||
import AccountAgentTransactionSection from "../../components/AccountAgentTransactionSection";
|
||
|
||
const initialNotifications = {
|
||
emailNotifications: true,
|
||
smsNotifications: false,
|
||
pushNotifications: true,
|
||
weeklyReports: true,
|
||
payoutAlerts: true
|
||
};
|
||
|
||
export default function AccountPage() {
|
||
const [showPassword, setShowPassword] = useState(false);
|
||
const [activeTab, setActiveTab] = useState("profile");
|
||
const [passwordForm, setPasswordForm] = useState({
|
||
currentPassword: "",
|
||
newPassword: "",
|
||
confirmPassword: ""
|
||
});
|
||
const [notifications, setNotifications] = useState(initialNotifications);
|
||
|
||
const tabs = [
|
||
{ id: "profile", label: "Профиль", icon: <UserIcon fontSize="small" /> },
|
||
{ id: "security", label: "Безопасность", icon: <KeyIcon fontSize="small" /> },
|
||
{ id: "notifications", label: "Уведомления", icon: <BellIcon fontSize="small" /> },
|
||
{ id: "agent-transactions", label: "Транзакции агентов", icon: <WorkIcon fontSize="small" /> },
|
||
];
|
||
|
||
return (
|
||
<AuthGuard>
|
||
<div className={styles.dashboard}>
|
||
<h1 className={styles.title}>Аккаунт</h1>
|
||
<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} />
|
||
)}
|
||
{activeTab === "agent-transactions" && (
|
||
<AccountAgentTransactionSection />
|
||
)}
|
||
</div>
|
||
</AuthGuard>
|
||
);
|
||
}
|