add settings layout

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>
+	)
+}