continue: work on violation page and table

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

@@ -1,3 +1,5 @@
+'use client'
+
 import { useTranslations } from 'next-intl';
 import { useParams } from 'next/navigation'
 import { IconEyeDashed } from '@/app/ui/icons/icons';

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

@@ -1,52 +1,149 @@
-export default function ViolationPageViolationsList() {
+// app/ui/violations/file-page/violation-page-violations-list.tsx
+'use client'
+
+import { useTranslations } from 'next-intl';
+import { useRouter, usePathname } from 'next/navigation';
+import { useEffect } from 'react';
+
+interface ViolationFileDetail {
+	id: number;
+	url: string;
+	page_url: string;
+	page_title: string;
+	host: string;
+	status: string;
+	created_date: string;
+	file_id: string;
+}
+
+interface ViolationFile {
+	violations: ViolationFileDetail[],
+	total_elements: number,
+	total_pages: number,
+	current_page: number,
+	page_size: number,
+	has_next: boolean,
+	has_previous: boolean
+}
+
+export default function ViolationPageViolationsList({
+	fileViolations,
+	currentPage,
+	fileId
+}: {
+	fileViolations: ViolationFile,
+	currentPage: number,
+	fileId: string
+}) {
+	const t = useTranslations('Global');
+	const router = useRouter();
+	const pathname = usePathname();
+
+	if (!fileViolations?.violations) {
+		return null;
+	}
+
+	useEffect(() => {
+		console.log(fileViolations);
+	}, [fileViolations])
+
+	const handlePageChange = (page: number) => {
+		router.push(`${pathname}?page=${page}`);
+	};
+
+	const getPageNumbers = () => {
+		const pages = [];
+		const maxVisible = 5;
+		const total = fileViolations.total_pages;
+
+		let start = Math.max(1, currentPage - Math.floor(maxVisible / 2));
+		let end = Math.min(total, start + maxVisible - 1);
+
+		if (end - start + 1 < maxVisible) {
+			start = Math.max(1, end - maxVisible + 1);
+		}
+
+		for (let i = start; i <= end; i++) {
+			pages.push(i);
+		}
+
+		return pages;
+	};
+
 	return (
-		<div
-			className="block-wrapper"
-		>
+		<div className="block-wrapper">
 			<div className="card-header">
 				<h3 className="card-title">
 					Все нарушения этого файла
 				</h3>
 				<span>
-					Всего: 0 | Страница 0 из 0
+					Всего: {fileViolations.total_elements} | Страница {fileViolations.current_page} из {fileViolations.total_pages}
 				</span>
 			</div>
 
-			{/* это нужно будет сделать отдельным компонентом */}
-			<div
-				className="sources-list"
-			>
-				<div className="source-card">
-					<div className="source-header">
-						<a href="#" target="_blank" className="source-url">
-							fileName
-						</a>
-						<span className="source-status new">
-							Новое
-						</span>
-					</div>
-					<div className="source-meta">
-						<span>0</span>
-						<span>Неавторизованное использование</span>
-						<span>0%</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 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>
+							<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}
+								</span>
+							</div>
+							<div className="source-meta">
+								<span>{item.host}</span>
+							</div>
+							<div className="source-actions">
+								<a
+									href={item.page_url}
+									className="btn-small btn-primary-small"
+									target="_blank"
+								>
+									{t('open')}
+								</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>
+			{fileViolations.total_pages > 1 && (
+				<div className="pagination">
+					{fileViolations.has_previous && (
+						<button
+							onClick={() => handlePageChange(currentPage - 1)}
+							className="pagination__item pagination__item--prev"
+						>
+							Предыдущая
+						</button>
+					)}
+
+					{getPageNumbers().map(pageNum => (
+						<button
+							key={pageNum}
+							onClick={() => handlePageChange(pageNum)}
+							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>
+					)}
+				</div>
+			)}
 		</div>
-	)
+	);
 }