add settings layout

src/app/ui/header/headerPanel.tsx

@@ -25,7 +25,7 @@ export default function HeaderPanel() {
 				<Link
 					className="icon-btn"
 					title="Быстрые настройки"
-					href="/pages/dashboard"
+					href="/pages/settings"
 				>
 					<svg viewBox="0 0 24 24" fill="currentColor" style={{ width: "20px", height: "20px" }}>
 						<path d="M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.82,11.69,4.82,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z"></path>

src/app/ui/header/notificationsButton.tsx

@@ -76,7 +76,7 @@ export default function NotificationsButton() {
 							<p>Нет данных</p>
 						)}
 						<div className="notification-footer">
-							<Link href="/pages/notifications.php" className="notification-link">Посмотреть все</Link>
+							<Link href="/pages/notifications" className="notification-link">Посмотреть все</Link>
 						</div>
 					</>
 				)}

src/app/ui/nav-links.tsx

@@ -16,7 +16,7 @@ const links = [
 	},
 	{
 		name: 'Настройка',
-		href: '/pages/page2',
+		href: '/pages/settings',
 		img: 'M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.82,11.69,4.82,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z'
 	},
 	{

src/app/ui/register-form.tsx

@@ -24,7 +24,7 @@ export default function RegisterForm() {
 				>
 					Полное имя
 				</label>
-				<input type="readOnly" id="full_name" name="full_name" className={`${styles['form-input']}`} placeholder="Иванов Иван Иванович" />
+				<input type="text" id="full_name" name="full_name" className={`${styles['form-input']}`} placeholder="Иванов Иван Иванович" />
 				{errorMessage?.full_name && (
 					<p className="text-sm text-red-500">{errorMessage!.full_name}</p>
 				)}
@@ -48,7 +48,7 @@ export default function RegisterForm() {
 				>
 					Компания
 				</label>
-				<input type="readOnly" id="company" name="company" className={`${styles['form-input']}`} placeholder="ООО «Ваша компания»" />
+				<input type="text" id="company" name="company" className={`${styles['form-input']}`} placeholder="ООО «Ваша компания»" />
 			</div>
 			<div className={`${styles['form-row']}`}>
 				<div className={`${styles['form-group']}`}>

src/app/ui/settings/api-settings.tsx

@@ -0,0 +1,38 @@
+import Link from 'next/link';
+
+export default function APISettings() {
+	return (
+		<div className="settings-form">
+			<div className="form-section">
+				<h3 className="form-section-title">🔌 API настройки</h3>
+				<div className="form-group">
+					<label className="form-label">🔑 Ваш API ключ:</label>
+					<div className="api-key-info-wrapper">
+						<div className="api-key-info">
+							<input readOnly className="form-input" value="testkey" id="api-key-input"></input>
+							<button type="button" className="btn btn-outline">
+								📋 Копировать
+							</button>
+						</div>
+						<button type="submit" className="btn btn-secondary">
+							🔄 Обновить ключ
+						</button>
+						<small>
+							⚠️ Используйте этот ключ для доступа к API. Не передавайте его третьим лицам.
+						</small>
+						<div className="api-key-info-documentation">
+							<h4>
+								📚 Документация API
+							</h4>
+							<p>
+								Полная документация API доступна по ссылке:
+								<br />
+								<Link href={'api.no-copy.ru/docs'}>api.no-copy.ru/docs</Link>
+							</p>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	)
+}

src/app/ui/settings/danger-zone.tsx

@@ -0,0 +1,25 @@
+export default function DangerZone() {
+	return (
+		<div className="danger-zone">
+			<h3>⚠️ Опасная зона</h3>
+			<div className="danger-zone-remove-account">
+				<h4>
+					🗑️ Удаление аккаунта
+				</h4>
+				<p>
+					⚠️ Удаление аккаунта приведет к безвозвратной потере всех данных, включая загруженный контент, отчеты и настройки. Это действие нельзя отменить.
+				</p>
+				<button className="btn">🗑️ Удалить аккаунт</button>
+			</div>
+			<div className="danger-zone-reset-settings">
+				<h4>
+					🔄 Сброс всех настроек
+				</h4>
+				<p>
+					🔧 Восстановить все настройки аккаунта к значениям по умолчанию.
+				</p>
+				<button className="btn">🔄 Сбросить настройки</button>
+			</div>
+		</div>
+	)
+}

src/app/ui/settings/last-activity-settings.tsx

@@ -0,0 +1,14 @@
+export default function LastActivitySettings() {
+	return (
+		<div className="settings-form">
+			<div className="form-section">
+				<h3 className="form-section-title">🕒 Последняя активность</h3>
+				<div className="last-activiti-wrapper">
+					<div className="no-activiti">
+						📝 Пока нет записей о активности
+					</div>
+				</div>
+			</div>
+		</div>
+	)
+}

src/app/ui/settings/notifications-monitoring-settings.tsx

@@ -0,0 +1,97 @@
+'use client'
+
+import { useActionState, useState } from 'react';
+
+export default function NotificationsMonitoringSettings() {
+	const [errorMessage, formAction, isPending] = useActionState(
+		(state: void | undefined, formData: FormData) => {
+			console.log(formData);
+		},
+		undefined
+	);
+
+	const [selectedMonitoringValue, setSelectedMonitoringValue] = useState('weekly');
+	const [selectedWatermarkValue, setSelectedWatermarkValue] = useState('high');
+
+	return (
+		<div className="settings-form">
+			<div className="form-section">
+				<h3 className="form-section-title">🔔 Уведомления и мониторинг</h3>
+				<form action={formAction}>
+					<div className="form-group">
+						<label className="form-label">
+							<span>📧 Email уведомления</span>
+							<span className="toggle-switch">
+								<input type="checkbox" name="notification_email" />
+								<span className="toggle-slider"></span>
+							</span>
+						</label>
+						<small>Получать уведомления о нарушениях на email</small>
+					</div>
+					<div className="form-group">
+						<label className="form-label">
+							<span>📱 SMS уведомления</span>
+							<span className="toggle-switch">
+								<input type="checkbox" name="notification_sms" />
+								<span className="toggle-slider"></span>
+							</span>
+						</label>
+						<small>Критически важные уведомления по SMS</small>
+					</div>
+					<div className="form-group">
+						<label className="form-label">
+							<span>🤖 Автоматический мониторинг</span>
+							<span className="toggle-switch">
+								<input type="checkbox" name="auto_monitoring" />
+								<span className="toggle-slider"></span>
+							</span>
+						</label>
+						<small>Автоматическая проверка контента в интернете</small>
+					</div>
+
+					<div className="form-group">
+						<label className="form-label">⏱️ Частота мониторинга:</label>
+						<select
+							name="monitoring_frequency"
+							className="form-input"
+							value={selectedMonitoringValue}
+							onChange={(e) => setSelectedMonitoringValue(e.target.value)}
+						>
+							<option value="daily">
+								Ежедневно
+							</option>
+							<option value="weekly">
+								Еженедельно
+							</option>
+							<option value="monthly">
+								Ежемесячно
+							</option>
+						</select>
+					</div>
+
+					<div className="form-group">
+						<label className="form-label">💧 Интенсивность водяного знака:</label>
+						<select
+							name="watermark_intensity"
+							className="form-input"
+							value={selectedWatermarkValue}
+							onChange={(e) => setSelectedWatermarkValue(e.target.value)}
+						>
+							<option value="low">
+								Низкая (незаметный)
+							</option>
+							<option value="medium">
+								Средняя (рекомендуется)
+							</option>
+							<option value="high">
+								Высокая (максимальная защита)
+							</option>
+						</select>
+					</div>
+
+					<button type="submit" className="btn btn-primary">💾 Сохранить изменения</button>
+				</form>
+			</div>
+		</div>
+	)
+}

src/app/ui/settings/personal-data-settings.tsx

@@ -0,0 +1,71 @@
+'use client'
+
+import { useActionState, useState } from 'react'
+
+export default function PersonalDataSettings() {
+	const [errorMessage, formAction, isPending] = useActionState(
+		(state: void | undefined, formData: FormData) => {
+			console.log(formData);
+		},
+		undefined
+	);
+
+	const [selectedValue, setSelectedValue] = useState('male');
+
+	return (
+		<div className="settings-form">
+			<div className="form-section">
+				<h3 className="form-section-title">👤 Персональные данные</h3>
+				<form action={formAction}>
+					<div className="form-group">
+						<label className="form-label">Полное имя:</label>
+						<input type="text" name="full_name" className="form-input" />
+					</div>
+					<div className="form-group">
+						<label className="form-label">Компания:</label>
+						<input type="text" name="company" className="form-input" />
+					</div>
+					<div className="form-group">
+						<label className="form-label">Email:</label>
+						<input type="text" name="email" className="form-input" />
+						<small>
+							Email нельзя изменить. Обратитесь в поддержку.
+						</small>
+					</div>
+					<div className="form-group">
+						<label className="form-label">Телефон:</label>
+						<input type="phone" name="phone" className="form-input" />
+					</div>
+					<div className="form-group">
+						<label className="form-label">Пол:</label>
+						<select
+							name="gender"
+							className="form-input"
+							value={selectedValue}
+							onChange={(e) => setSelectedValue(e.target.value)}
+						>
+							<option value="male">Мужской</option>
+							<option value="female">Женский</option>
+						</select>
+					</div>
+					<div className="form-group">
+						<label className="form-label">🎂 День рождения:</label>
+						<input type="date" name="birthday" className="form-input" />
+						<small>
+							Используется для отправки поздравления
+						</small>
+					</div>
+					<div className="form-group">
+						<label className="form-label">Возраст:</label>
+						<input type="text" name="age" className="form-input" />
+						<small>
+							Заполняется автоматически из даты рождения
+						</small>
+					</div>
+
+					<button type="submit" className="btn btn-primary">💾 Сохранить изменения</button>
+				</form>
+			</div >
+		</div >
+	)
+}

src/app/ui/settings/safety-settings.tsx

@@ -0,0 +1,36 @@
+'use client'
+
+import { useActionState, useState } from 'react';
+
+export default function SafetySetting() {
+	const [errorMessage, formAction, isPending] = useActionState(
+		(state: void | undefined, formData: FormData) => {
+			console.log(formData);
+		},
+		undefined
+	);
+
+	return (
+		<div className="settings-form">
+			<div className="form-section">
+				<h3 className="form-section-title">🔐 Безопасность</h3>
+				<form action={formAction}>
+					<div className="form-group">
+						<label className="form-label">🔓 Текущий пароль:</label>
+						<input type="password" name="current_password" className="form-input" />
+					</div>
+					<div className="form-group">
+						<label className="form-label">🔓 Новый пароль:</label>
+						<input type="password" name="new_password" className="form-input" />
+						<small>Минимум 6 символов</small>
+					</div>
+					<div className="form-group">
+						<label className="form-label">✅ Подтвердите пароль:</label>
+						<input type="password" name="confirm_password" className="form-input" />
+					</div>
+					<button type="submit" className="btn btn-primary">🔐 Изменить пароль</button>
+				</form>
+			</div>
+		</div>
+	)
+}

src/app/ui/settings/subscription-settings.tsx

@@ -0,0 +1,50 @@
+export default function SubscriptionSettings() {
+	return (
+		<div className="settings-form">
+			<div className="form-section">
+				<h3 className="form-section-title">💎 Подписка</h3>
+				<div className="subscription-info">
+					<div className="subscription-info-header">
+						<div>
+							<h4 className="subscription-info-title">🎯 Подписка "ПРОФИ"</h4>
+							<p>📅 Активна до 10.06.2028</p>
+						</div>
+						<div style={{ textAlign: "right" }}>
+							<div className="subscription-info-title">2,000</div>
+							<p>файлов в месяц</p>
+						</div>
+					</div>
+					<div className="subscription-info-main">
+						<div className="subscription-info-item">
+							<div>💾 Хранилище</div>
+							<span>20 ГБ</span>
+						</div>
+						<div className="subscription-info-item">
+							<div>🔌 API доступ</div>
+							<span>Включен</span>
+						</div>
+						<div className="subscription-info-item">
+							<div>🎧 Поддержка</div>
+							<span>24/7</span>
+						</div>
+					</div>
+				</div>
+
+				<div className="subscription-info-footer">
+					<button className="btn btn-outline">
+						🚀 СТАРТ
+					</button>
+					<button className="btn btn-outline">
+						⭐ ПРЕМИУМ
+					</button>
+					<button className="btn btn-outline">
+						💼 ПРОФИ
+					</button>
+					<button className="btn btn-outline">
+						🏆 МАКСИМУМ
+					</button>
+				</div>
+			</div>
+		</div>
+	)
+}