add violation details page layout

src/app/ui/icons/icons.tsx

@@ -64,6 +64,16 @@ export function IconEye() {
 	)
 }
 
+export function IconEyeDashed() {
+	return (
+		<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" className="icon">
+			<g fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1">
+				<path d="M10.585 10.587a2 2 0 0 0 2.829 2.828" /><path d="M16.681 16.673A8.7 8.7 0 0 1 12 18q-5.4 0-9-6q1.908-3.18 4.32-4.674m2.86-1.146A9 9 0 0 1 12 6q5.4 0 9 6q-1 1.665-2.138 2.87M3 3l18 18" />
+			</g>
+		</svg>
+	)
+}
+
 export function IconDoubleArrowRight() {
 	return (
 		<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" className="icon"><path fill="currentColor" d="M6.41 6L5 7.41L9.58 12L5 16.59L6.41 18l6-6z" /><path fill="currentColor" d="m13 6l-1.41 1.41L16.17 12l-4.58 4.59L13 18l6-6z" /></svg>
@@ -186,6 +196,6 @@ export function IconWarning() {
 
 export function IconGraph() {
 	return (
-		<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" className="icon"><path fill="currentColor" d="m16 11.78l4.24-7.33l1.73 1l-5.23 9.05l-6.51-3.75L5.46 19H22v2H2V3h2v14.54L9.5 8z"/></svg>
+		<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" className="icon"><path fill="currentColor" d="m16 11.78l4.24-7.33l1.73 1l-5.23 9.05l-6.51-3.75L5.46 19H22v2H2V3h2v14.54L9.5 8z" /></svg>
 	)
 }

src/app/ui/violations/file-page/violation-page-actions.tsx

@@ -0,0 +1,33 @@
+export default function ViolationPageActions() {
+	return (
+		<div
+			className="block-wrapper"
+		>
+			<div className="card-header">
+				<h3 className="card-title">
+					Действия
+				</h3>
+			</div>
+
+			<div className="action-buttons">
+				<div>
+					<button type="button" className="btn-action btn-warning">
+						Взять в работу
+					</button>
+				</div>
+
+				<div>
+					<button type="button" className="btn-action btn-success">
+						Отметить решенным
+					</button>
+				</div>
+
+				<div>
+					<button type="button" className="btn-action btn-secondary">
+						Ложное срабатывание
+					</button>
+				</div>
+			</div>
+		</div>
+	)
+}

src/app/ui/violations/file-page/violation-page-file-info.tsx

@@ -0,0 +1,40 @@
+export default function ViolationPageFileInfo() {
+	return (
+		<div
+			className="block-wrapper"
+		>
+			<div className="content-card">
+				<div className="card-header">
+					<h3 className="card-title">
+						📄 Информация о файле
+					</h3>
+				</div>
+
+				<div className="info-row">
+					<span className="info-label">Тип файла</span>
+					<span className="info-value">fileType</span>
+				</div>
+				<div className="info-row">
+					<span className="info-label">Размер</span>
+					<span className="info-value">0 КБ</span>
+				</div>
+				<div className="info-row">
+					<span className="info-label">Загружен</span>
+					<span className="info-value">0</span>
+				</div>
+				<div className="info-row">
+					<span className="info-label">Водяной знак</span>
+					<span className="info-value">
+						Применен
+					</span>
+				</div>
+				<div className="info-row">
+					<span className="info-label">Уровень защиты</span>
+					<span className="info-value">
+						Максимальный
+					</span>
+				</div>
+			</div>
+		</div>
+	)
+}

src/app/ui/violations/file-page/violation-page-file-statistic.tsx

@@ -0,0 +1,52 @@
+export default function ViolationPpageFileStatistic() {
+	return (
+		<div
+			className="block-wrapper"
+		>
+			<div className="card-header">
+				<h3 className="card-title">
+					Статистика по файлу
+				</h3>
+			</div>
+
+			<div className="stats-mini-grid">
+				<div className="stat-mini-card">
+					<div
+						className="stat-mini-value"
+						style={{'color': '#dc2626'}}
+					>
+						0
+					</div>
+					<div className="stat-mini-label">Новых</div>
+				</div>
+				<div className="stat-mini-card">
+					<div
+						className="stat-mini-value"
+						style={{'color': '#d97706'}}
+					>
+						0
+					</div>
+					<div className="stat-mini-label">В работе</div>
+				</div>
+				<div className="stat-mini-card">
+					<div
+						className="stat-mini-value"
+						style={{'color': '#059669'}}
+					>
+						0
+					</div>
+					<div className="stat-mini-label">Решено</div>
+				</div>
+				<div className="stat-mini-card">
+					<div
+						className="stat-mini-value"
+						style={{'color': '#6366f1'}}
+					>
+						0
+					</div>
+					<div className="stat-mini-label">Всего</div>
+				</div>
+			</div>
+		</div>
+	)
+}

src/app/ui/violations/file-page/violation-page-note.tsx

@@ -0,0 +1,24 @@
+export default function ViolationPageNote() {
+	return (
+		<div
+			className="block-wrapper"
+		>
+
+			<div className="card-header">
+				<h3 className="card-title">
+					✏️ Добавить заметку
+				</h3>
+			</div>
+
+			<div className="note-form">
+				<form method="POST">
+					<input type="hidden" name="action" value="add_note" />
+					<textarea name="note" className="note-textarea" placeholder="Добавить заметку к этому нарушению..." ></textarea>
+					<button type="submit" className="btn-small btn-primary-small">
+						💾 Сохранить заметку
+					</button>
+				</form>
+			</div>
+		</div>
+	)
+}

src/app/ui/violations/file-page/violation-page-title.tsx

@@ -0,0 +1,43 @@
+import { useTranslations } from 'next-intl';
+import { useParams } from 'next/navigation'
+import { IconEyeDashed } from '@/app/ui/icons/icons';
+
+export default function ViolationPageTitle() {
+	const t = useTranslations('Global');
+	const params = useParams()
+	const id = params.id
+
+	return (
+		<div className="page-title-color-frame violation-page">
+			<div
+				className="violation-page-icon"
+			>
+				<IconEyeDashed />
+			</div>
+			<div>
+				<h1>
+					file id: {id}
+				</h1>
+				<div
+					className="violation-page-info"
+				>
+					<span>
+						fileType
+					</span>
+
+					<span>
+						fileSize
+					</span>
+
+					<span>
+						fileViolationDate
+					</span>
+
+					<span>
+						fileViolationType
+					</span>
+				</div>
+			</div>
+		</div>
+	)
+}

src/app/ui/violations/file-page/violation-page-violation-info.tsx

@@ -0,0 +1,50 @@
+export default function ViolationPageViolationInfo() {
+	return (
+		<div
+			className="block-wrapper"
+		>
+			<div className="card-header">
+				<h3 className="card-title">
+					Информация о нарушении
+				</h3>
+			</div>
+
+			<div className="info-row">
+				<span className="info-label">Тип нарушения</span>
+				<span className="info-value">Неавторизованное использование</span>
+			</div>
+
+			<div className="info-row">
+				<span className="info-label">Дата обнаружения</span>
+				<span className="info-value">28.02.2026 07:48</span>
+			</div>
+
+			<div className="info-row">
+				<span className="info-label">Уверенность</span>
+				<span className="info-value">85%</span>
+			</div>
+
+			<div
+				className="violation-source"
+			>
+				<div
+					className="violation-source-title"
+				>
+					Источник нарушения:
+				</div>
+				<div className="url-display">
+					<a href="#" target="_blank" className="url-link">
+						url
+					</a>
+				</div>
+			</div>
+
+			<div className="notes-section">
+				<div className="notes-title">📝 Заметки:</div>
+				<div className="notes-content">
+					<span>Заметок пока нет. Вы можете добавить первую заметку ниже.</span>
+				</div>
+			</div>
+		</div>
+	)
+}

src/app/ui/violations/file-page/violation-page-violations-list.tsx

@@ -0,0 +1,52 @@
+export default function ViolationPageViolationsList() {
+	return (
+		<div
+			className="block-wrapper"
+		>
+			<div className="card-header">
+				<h3 className="card-title">
+					Все нарушения этого файла
+				</h3>
+				<span>
+					Всего: 0 | Страница 0 из 0
+				</span>
+			</div>
+
+			{/* это нужно будет сделать отдельным компонентом */}
+			<div
+				className="sources-list"
+			>
+				<div className="source-card">
+					<div className="source-header">
+						<a href="#" target="_blank" className="source-url">
+							artdraw.org
+						</a>
+						<span className="source-status new">
+							Новое
+						</span>
+					</div>
+					<div className="source-meta">
+						<span>28.02.2026 07:48</span>
+						<span>Неавторизованное использование</span>
+						<span>85%</span>
+					</div>
+					<div className="source-actions">
+						<a href="violation-details.php?id=7244" className="btn-small btn-primary-small">
+							Посмотреть
+						</a>
+						<a href="#" target="_blank" className="btn-small btn-secondary-small">
+							Открыть
+						</a>
+					</div>
+				</div>
+			</div>
+
+			<div className="pagination">
+				<span className="pagination__item pagination__item--active">1</span>
+				<a href="?id=7245&amp;related_page=2" className="pagination__item">2</a>
+				<a href="?id=7245&amp;related_page=3" className="pagination__item">3</a>
+				<a href="?id=7245&amp;related_page=2" className="pagination__item pagination__item--next">Следующая</a>
+			</div>
+		</div>
+	)
+}