continue: add violation panel

src/app/ui/modal-windows/file-info-modal-window.tsx

@@ -1,8 +1,13 @@
 import { convertBytes } from '@/app/lib/convertBytes';
 import { formatDate, formatDateTime } from '@/app/lib/formatDate';
 import { useTranslations } from 'next-intl';
+import { FileDetails } from '@/app/[locale]/pages/violations/[id]/page';
 
-export function FileInfoModalWindow({ fileInfo, setWindowClose, setWindowChildren }: any) {
+export function FileInfoModalWindow({ fileInfo, setWindowClose, setWindowChildren }: {
+	fileInfo: FileDetails,
+	setWindowClose: any,
+	setWindowChildren: any
+}) {
 	const t = useTranslations('Global');
 
 	return (
@@ -86,6 +91,11 @@ export function FileInfoModalWindow({ fileInfo, setWindowClose, setWindowChildre
 								{fileInfo.fileExtension ? fileInfo.fileExtension : '-'}
 							</div>
 						</div>
+						{fileInfo.mimeType === 'image' && (
+							<div className="info-item image">
+								<img src={fileInfo.thumbnailFileUrl ? fileInfo.thumbnailFileUrl : '#'} alt="" />
+							</div>
+						)}
 					</div>
 				</div>
 

src/app/ui/violations/file-page/violation-file-not-found.tsx

@@ -0,0 +1,13 @@
+'use client'
+
+import { useTranslations } from 'next-intl'
+
+export default function ViolationFileNotFound() {
+	const t = useTranslations('Global');
+
+	return (
+		<div className="violation-details">
+			{t('file-not-found')}
+		</div>
+	)
+}

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

@@ -1,4 +1,14 @@
-export default function ViolationPageFileInfo() {
+'use client'
+
+import { FileDetails } from '@/app/[locale]/pages/violations/[id]/page';
+import { convertBytes } from '@/app/lib/convertBytes';
+import { formatDate } from '@/app/lib/formatDate';
+import { useTranslations } from 'next-intl';
+import { useEffect } from 'react';
+
+export default function ViolationPageFileInfo({ fileInfo }: { fileInfo: FileDetails }) {
+	const t = useTranslations('Global');
+
 	return (
 		<div
 			className="block-wrapper"
@@ -6,32 +16,46 @@ export default function ViolationPageFileInfo() {
 			<div className="content-card">
 				<div className="card-header">
 					<h3 className="card-title">
-						📄 Информация о файле
+						{t('file-information')}
 					</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-label">
+						ID
+					</span>
 					<span className="info-value">
-						Применен
+						{fileInfo ? fileInfo.supportId : '#'}
 					</span>
 				</div>
 				<div className="info-row">
-					<span className="info-label">Уровень защиты</span>
+					<span className="info-label">
+						{t('file-type')}
+					</span>
 					<span className="info-value">
-						Максимальный
+						{fileInfo ? fileInfo.mimeType : '#'}
+					</span>
+				</div>
+				<div className="info-row">
+					<span className="info-label">
+						{t('size')}
+					</span>
+					<span className="info-value">{fileInfo ? convertBytes(fileInfo.fileSize) : '#'}</span>
+				</div>
+				<div className="info-row">
+					<span className="info-label">
+						{t('loaded')}
+					</span>
+					<span className="info-value">
+						{fileInfo ? formatDate(fileInfo.createdAt) : '#'}
+					</span>
+				</div>
+				<div className="info-row">
+					<span className="info-label">
+						{t('monitoring')}
+					</span>
+					<span className="info-value">
+						{fileInfo ? fileInfo.monitoring : '#'}
 					</span>
 				</div>
 			</div>

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

@@ -1,12 +1,12 @@
 export default function ViolationPageNote() {
 	return (
 		<div
-			className="block-wrapper"
+			className="violation-page-note"
 		>
 
 			<div className="card-header">
 				<h3 className="card-title">
-					✏️ Добавить заметку
+					Добавить заметку
 				</h3>
 			</div>
 
@@ -15,7 +15,7 @@ export default function ViolationPageNote() {
 					<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>

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

@@ -1,45 +1,28 @@
 'use client'
 
 import { useTranslations } from 'next-intl';
-import { useParams } from 'next/navigation'
 import { IconEyeDashed } from '@/app/ui/icons/icons';
+import { FileDetails } from '@/app/[locale]/pages/violations/[id]/page';
 
-export default function ViolationPageTitle() {
+export default function ViolationPageTitle({ fileInfo }: { fileInfo: FileDetails }) {
 	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>
+				{fileInfo.thumbnailFileUrl ? (
+					<img src={fileInfo.thumbnailFileUrl} alt={fileInfo.fileName} />
+				) : (
+					<IconEyeDashed />
+				)}
 
-					<span>
-						fileViolationDate
-					</span>
-
-					<span>
-						fileViolationType
-					</span>
-				</div>
 			</div>
+			<h1>
+				{t('file-name')}: {fileInfo?.fileName ? fileInfo.fileName : '#'}
+			</h1>
 		</div>
 	)
 }

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

@@ -4,7 +4,9 @@
 import { useTranslations } from 'next-intl';
 import Link from 'next/link';
 import { useRouter, usePathname } from 'next/navigation';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
+import { formatDate } from '@/app/lib/formatDate';
+import ViolationPageNote from '@/app/ui/violations/file-page/violation-page-note';
 
 interface ViolationFileDetail {
 	id: number;
@@ -39,17 +41,14 @@ export default function ViolationPageViolationsList({
 	const t = useTranslations('Global');
 	const router = useRouter();
 	const pathname = usePathname();
+	const [selectedViolation, setSelectedViolation] = useState<ViolationFileDetail | null>(null);
 
 	if (!fileViolations?.violations) {
 		return null;
 	}
 
-	useEffect(() => {
-		console.log(fileViolations);
-	}, [fileViolations]);
-
 	const handlePageChange = (page: number) => {
-		router.push(`${pathname}?page=${page}`);
+		router.push(`${pathname}?page=${page}`, { scroll: false });
 	};
 
 	const getPageNumbers = () => {
@@ -71,79 +70,179 @@ export default function ViolationPageViolationsList({
 		return pages;
 	};
 
+	function selectHandler(violation: ViolationFileDetail) {
+		setSelectedViolation(violation);
+	}
+
 	return (
 		<div className="block-wrapper">
 			<div className="card-header">
 				<h3 className="card-title">
-					Все нарушения этого файла
+					{t('all-file-violations')}
 				</h3>
 				<span>
-					Всего: {fileViolations.total_elements} | Страница {fileViolations.current_page} из {fileViolations.total_pages}
+					{t('total-violations')}: {fileViolations.total_elements} | {t('page')} {fileViolations.current_page} {t('out-of')} {fileViolations.total_pages}
 				</span>
 			</div>
 
-			<div className="sources-list">
-				{fileViolations.violations.map(item => {
-					return (
-						<div className="source-card" key={item.id}>
-							<div className="source-image">
-								<img src={item.url} alt="" />
+			<div
+				className="sources-list-wrapper"
+			>
+				<div className="sources-list">
+					{fileViolations.violations.map(item => {
+						return (
+							<div
+								className={`source-card ${selectedViolation?.id === item.id ? 'selected' : ''}`}
+								key={item.id}
+								onClick={() => {
+									selectHandler(item);
+								}}
+							>
+								{/* 								<div className="source-header">
+									<div className="source-image">
+										<img src={item.url} alt="" />
+									</div>
+
+								</div> */}
+								<div
+									className="source-header-left"
+								>
+									<div className="source-image">
+										<img src={item.url} alt="" />
+									</div>
+									<div>
+										<span
+											className="source-meta"
+										>
+											{t('source')}:
+										</span>
+										<span className="source-url">
+											{item.host}
+										</span>
+									</div>
+								</div>
+
+								<div
+									className="source-header-right"
+								>
+									<span className="source-status new">
+										{item.status}
+									</span>
+
+									<div className="source-actions">
+										<Link
+											href={item.page_url}
+											className="btn-small btn-primary-small"
+											target="_blank"
+											scroll={false}
+										>
+											{t('open')}
+										</Link>
+									</div>
+								</div>
+
+
 							</div>
-							<div className="source-header">
-								<a href={item.page_url} target="_blank" className="source-url">
-									<span>{item.page_title}</span>
-								</a>
-								<span className="source-status new">
-									{item.status}
+						);
+					})}
+				</div>
+
+				<div
+					className="violation-info"
+				>
+					<div
+						className="violation-info-grid"
+					>
+						<div
+							className="violation-info-content"
+						>
+							<h3
+								className="violation-info-title"
+							>
+								{selectedViolation?.page_title}
+							</h3>
+							<div
+								className="violation-info-image"
+							>
+								<img src={selectedViolation?.url} alt={selectedViolation?.page_title} />
+							</div>
+							<div
+								className="violation-info-source"
+							>
+
+								<span>
+									{t('source')}:
 								</span>
-							</div>
-							<div className="source-meta">
-								<span>{item.host}</span>
-							</div>
-							<div className="source-actions">
 								<Link
-									href={item.page_url}
-									className="btn-small btn-primary-small"
+									href={selectedViolation?.page_url ? selectedViolation?.page_url : '#'}
+									className="source"
 									target="_blank"
 									scroll={false}
 								>
-									{t('open')}
+									{selectedViolation?.page_url}
 								</Link>
 							</div>
-						</div>
-					);
-				})}
-			</div>
+							<div
+								className="violation-info-source"
+							>
+								<span>
+									{t('date')} {selectedViolation?.created_date ? formatDate(selectedViolation?.created_date) : '#'}
+								</span>
+							</div>
+							<div>
+								{selectedViolation?.status}
+							</div>
 
+						</div>
+
+						<div
+							className="violation-info-actions"
+						>
+							<div className="action-buttons">
+								<button type="button" className="btn-action btn-warning">
+									Взять в работу
+								</button>
+
+								<button type="button" className="btn-action btn-success">
+									Отметить решенным
+								</button>
+
+								<button type="button" className="btn-action btn-secondary">
+									Ложное срабатывание
+								</button>
+							</div>
+						</div>
+					</div>
+					<ViolationPageNote />
+				</div>
+			</div>
 			{fileViolations.total_pages > 1 && (
 				<div className="pagination">
-					{fileViolations.has_previous && (
-						<button
-							onClick={() => handlePageChange(currentPage - 1)}
-							className="pagination__item pagination__item--prev"
-						>
-							Предыдущая
-						</button>
-					)}
+					<button
+						onClick={() => handlePageChange(currentPage - 1)}
+						className="pagination-item pagination-item-prev"
+						disabled={!fileViolations.has_previous}
+					>
+						{t('previous')}
+					</button>
 
 					{getPageNumbers().map(pageNum => (
 						<button
 							key={pageNum}
 							onClick={() => handlePageChange(pageNum)}
-							className={`pagination__item ${currentPage === pageNum ? 'pagination__item--active' : ''}`}
+							className={`pagination-item ${currentPage === pageNum ? 'pagination-item-active' : ''}`}
 						>
 							{pageNum}
 						</button>
 					))}
 
-					{fileViolations.has_next && (
-						<button
-							onClick={() => handlePageChange(currentPage + 1)}
-							className="pagination__item pagination__item--next"
-						>
-							Следующая
-						</button>
-					)}
+					<button
+						onClick={() => handlePageChange(currentPage + 1)}
+						className="pagination-item pagination-item-next"
+						disabled={!fileViolations.has_next}
+					>
+						{t('next')}
+					</button>
 				</div>
 			)}
 		</div>