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

src/app/ui/violations/violations-check-all-section.tsx

@@ -3,7 +3,7 @@
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { useTranslations } from 'next-intl';
 import { getViolationSearchStatus, startGlobalMonitoring } from '@/app/actions/violationActions';
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import ModalWindow from '@/app/components/ModalWindow';
 import { toast } from 'sonner';
 
@@ -40,9 +40,6 @@ export default function ViolationsCheckAllSection() {
 			return getViolationSearchStatus();
 		},
 		select: (data: violationSearchStatus) => {
-			console.log('violationSearchStatus');
-			console.log(data);
-
 			if (data) {
 				return data;
 			} else {
@@ -62,6 +59,18 @@ export default function ViolationsCheckAllSection() {
 	const [isProcessing, setIsProcessing] = useState<boolean>(false);
 	const [openWindow, setOpenWindow] = useState<boolean>(false);
 	const t = useTranslations('Global');
+	const previousStatusRef = useRef<string | undefined>('');
+
+	useEffect(() => {
+		const currentStatus = violationSearchStatus?.status;
+		const previousStatus = previousStatusRef.current;
+
+		if (currentStatus === 'task-not-found' && previousStatus === 'PROCESSING') {
+			queryClient.invalidateQueries({ queryKey: ['violationData'] });
+			toast.success(t('violation-data-updated'));
+		}
+		previousStatusRef.current = currentStatus;
+	}, [violationSearchStatus?.status, queryClient]);
 
 	async function openModalWindow() {
 		await queryClient.invalidateQueries({ queryKey: ['violationSearchStatus'] });
@@ -135,9 +144,9 @@ export default function ViolationsCheckAllSection() {
 					<div className="check-all-description">
 						Поиск нарушений во всех ваших изображениях. Проверка только точных совпадений (95%+).
 					</div>
-					{violationSearchStatus?.status && (
+					{(violationSearchStatus?.status !== 'task-not-found') && (
 						<div>
-							{violationSearchStatus?.status}
+							{t('content-verification-status')}: {violationSearchStatus?.status}
 						</div>
 					)}
 				</div>

src/app/ui/violations/violations-table.tsx

@@ -3,11 +3,27 @@
 import { useMemo, useState } from 'react';
 import { useReactTable, getCoreRowModel, getSortedRowModel, getPaginationRowModel, getFilteredRowModel, ColumnDef, SortingState, ColumnFiltersState } from '@tanstack/react-table';
 import { useTranslations } from 'next-intl';
-import { IconArrowUp, IconArrowDown, IconFilter, IconDoubleArrowRight, IconArrowRight, IconDoubleArrowLeft, IconArrowLeft } from '@/app/ui/icons/icons';
+import { IconArrowUp, IconArrowDown, IconFilter, IconDoubleArrowRight, IconArrowRight, IconDoubleArrowLeft, IconArrowLeft, IconEye } from '@/app/ui/icons/icons';
 import DropDownList from '@/app/components/DropDownList';
 import { useQuery } from '@tanstack/react-query';
-import { getUserFilesData } from '@/app/actions/fileEntity';
+import { getViolationFilesArray } from '@/app/actions/violationActions';
+import { useViewport } from '@/app/hooks/useViewport';
+import { formatDate, formatDateTime } from '@/app/lib/formatDate';
+import Link from 'next/link';
 
+interface ViolationFile {
+	createdAt: string;
+	fileId: string;
+	fileName: string;
+	fileSize: number;
+	latestViolationDate: string;
+	mimeType: string;
+	status: string;
+	supportId: number;
+	violationCount: number;
+}
+
+interface ViolationDataResponse extends Array<ViolationFile> { }
 
 export default function ViolationsTable() {
 	const {
@@ -15,42 +31,65 @@ export default function ViolationsTable() {
 		isLoading,
 		isError,
 		error,
-	} = useQuery({
-		queryKey: ['violationData', 1, 10000],
-		queryFn: () => getUserFilesData(1, 10000),
+	} = useQuery<ViolationFile[]>({
+		queryKey: ['violationData'],
+		queryFn: () => getViolationFilesArray(),
 
 		select: (data) => {
-			if (!data?.files) return [];
-
-			return data.files.map((item: any) => {
-				/* const newDate = new Date(item.updatedAt).getTime(); */
-
-				return {
-					id: item.id,
-				};
-			});
+			return data;
 		},
-		refetchInterval: 30000
+		/* refetchInterval: 30000 */
 	});
 	const t = useTranslations('Global');
 
 	// Состояния
 	const [sorting, setSorting] = useState<SortingState>([]);
 	const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
-	const [dateFilter, setDateFilter] = useState<string>('all');
 	const [pagination, setPagination] = useState({
 		pageIndex: 0,
 		pageSize: 10,
 	});
 
-	const columns = useMemo<ColumnDef<any>[]>(
+	const viewport = useViewport();
+	const getMaxLengthByWidth = (): number => {
+		if (viewport.device === 'MOBILE') return 26;
+		if (viewport.device === 'TABLET') return 32;
+		if (viewport.device === 'DESKTOP') return 84;
+		return 100;
+	};
+
+	const cutFileName = (fileName: string) => {
+		const MAX_FILE_NAME_LENGTH = getMaxLengthByWidth();
+		const lastDotIndex = fileName.lastIndexOf('.');
+
+		if (lastDotIndex <= 0) {
+			return fileName.length > MAX_FILE_NAME_LENGTH ? fileName.substring(0, MAX_FILE_NAME_LENGTH - 3) + '...' : fileName;
+		}
+
+		const nameWithoutExtension = fileName.substring(0, lastDotIndex);
+		const extension = fileName.substring(lastDotIndex);
+
+		if (fileName.length <= MAX_FILE_NAME_LENGTH) {
+			return fileName;
+		}
+
+		const maxNameLength = MAX_FILE_NAME_LENGTH - extension.length - 3;
+
+		if (maxNameLength <= 0) {
+			return '...' /* + extension */;
+		}
+
+		return nameWithoutExtension.substring(0, maxNameLength) + '...' /* + extension */;
+	}
+
+	const columns = useMemo<ColumnDef<ViolationFile>[]>(
 		() => [
 			{
-				accessorKey: 'file',
+				accessorKey: 'supportId',
 				header: ({ column }) => (
 					<div className="column">
 						<span>
-							Файл
+							ID
 						</span>
 						<button
 							onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
@@ -76,86 +115,18 @@ export default function ViolationsTable() {
 					return (
 						<div>
 							<div className="text-center table-item table-item-id">
-								{/* {row.original} */}
-								Файл
+								{row.original.supportId}
 							</div>
 						</div>
 					)
 				}
 			},
 			{
-				accessorKey: 'violationUrl',
+				accessorKey: 'file',
 				header: ({ column }) => (
-					<div className="column">
+					<div className="column start">
 						<span>
-							violationUrl
-						</span>
-						<button
-							onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
-							className="sort-button"
-						>
-							{
-								column.getIsSorted() === 'asc' ?
-									<span>
-										<IconArrowUp />
-									</span>
-									: column.getIsSorted() === 'desc' ?
-										<span>
-											<IconArrowDown />
-										</span>
-										: <span>
-											<IconFilter />
-										</span>
-							}
-						</button>
-					</div>
-				),
-				cell: ({ row }) => (
-					<div className="text-center table-item">
-						{/* {row.original.amount} */}
-						violationUrl
-					</div>
-				),
-			},
-			{
-				accessorKey: 'statistic',
-				header: ({ column }) => (
-					<div className="column">
-						<span>
-							Статистика
-						</span>
-						<button
-							onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
-							className="sort-button"
-						>
-							{
-								column.getIsSorted() === 'asc' ?
-									<span>
-										<IconArrowUp />
-									</span>
-									: column.getIsSorted() === 'desc' ?
-										<span>
-											<IconArrowDown />
-										</span>
-										: <span>
-											<IconFilter />
-										</span>
-							}
-						</button>
-					</div>
-				),
-				cell: ({ row }) => (
-					<div className="text-center table-item">
-						Статистика
-					</div>
-				),
-			},
-			{
-				accessorKey: 'DMCA',
-				header: ({ column }) => (
-					<div className="column">
-						<span>
-							DMCA жалоба
+							{t('file')}
 						</span>
 						<button
 							onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
@@ -179,27 +150,117 @@ export default function ViolationsTable() {
 				),
 				cell: ({ row }) => {
 					return (
-						<div className="text-center font-semibold table-item">
-							<p className={`table-item-status`}>
-								DMCA жалоба
-							</p>
+						<div>
+							<div
+								className="flex items-center space-x-2 table-item table-item-file-name"
+								title={row.original.fileName}
+							>
+								{cutFileName(row.original.fileName)}
+							</div>
 						</div>
 					)
-				},
+				}
+			},
+			{
+				accessorKey: 'violation',
+				header: ({ column }) => (
+					<div className="column">
+						<span>
+							{t('violation')}
+						</span>
+						<button
+							onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+							className="sort-button"
+						>
+							{
+								column.getIsSorted() === 'asc' ?
+									<span>
+										<IconArrowUp />
+									</span>
+									: column.getIsSorted() === 'desc' ?
+										<span>
+											<IconArrowDown />
+										</span>
+										: <span>
+											<IconFilter />
+										</span>
+							}
+						</button>
+					</div>
+				),
+				cell: ({ row }) => (
+					<div className="text-center table-item">
+						{row.original.violationCount}
+					</div>
+				),
+			},
+			{
+				accessorKey: 'date',
+				header: ({ column }) => (
+					<div className="column">
+						<span>
+							{t('date')}
+						</span>
+						<button
+							onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+							className="sort-button"
+						>
+							{
+								column.getIsSorted() === 'asc' ?
+									<span>
+										<IconArrowUp />
+									</span>
+									: column.getIsSorted() === 'desc' ?
+										<span>
+											<IconArrowDown />
+										</span>
+										: <span>
+											<IconFilter />
+										</span>
+							}
+						</button>
+					</div>
+				),
+				cell: ({ row }) => (
+					<div className="text-center table-item">
+						{formatDate(row.original.latestViolationDate)}
+						<br />
+						{formatDateTime(row.original.latestViolationDate)}
+					</div>
+				),
 			},
 			{
 				accessorKey: 'actions',
 				header: ({ column }) => (
 					<div className="column">
 						<span>
-							actions
+							{t('actions')}
 						</span>
 					</div>
 				),
 				cell: ({ row }) => {
 					return (
-						<div className="actions-group">
-							actions
+						<div className="actions">
+							<div
+								className="actions-group"
+							>
+								{/* <button
+									onClick={() => {
+										console.log(row.original.fileId);
+									}}
+									className="bg-violet-500 hover:bg-violet-600"
+									title={t('view')}
+								>
+									<IconEye />
+								</button> */}
+								<Link
+									href={`/pages/violations/${row.original.fileId}`}
+									className="bg-violet-500 hover:bg-violet-600"
+									title={t('view')}
+								>
+									<IconEye />
+								</Link>
+							</div>
 						</div>
 					)
 				}
@@ -209,58 +270,13 @@ export default function ViolationsTable() {
 	)
 
 	const filteredData = useMemo(() => {
-		let result = violationData?.payments;
+		let result = violationData;
 		if (!result) {
 			return [];
 		}
 
-		// Фильтр по дате
-		if (dateFilter !== 'all') {
-			const now = Date.now();
-			const oneDay = 24 * 60 * 60 * 1000;
-			const sevenDays = 7 * oneDay;
-			const thirtyDays = 30 * oneDay;
-
-			switch (dateFilter) {
-				case 'today':
-					const todayStart = new Date().setHours(0, 0, 0, 0);
-					result = result.filter((item: any) => {
-						if (item.createdAt) {
-							return new Date(item.createdAt).getTime() >= todayStart
-						} else {
-							return 0
-						}
-					});
-					break;
-				case 'week':
-					const weekAgo = now - sevenDays;
-					result = result.filter((item: any) => {
-						if (item.createdAt) {
-							return new Date(item.createdAt).getTime() >= weekAgo;
-						}
-					});
-					break;
-				case 'month':
-					const monthAgo = now - thirtyDays;
-					result = result.filter((item: any) => {
-						if (item.createdAt) {
-							return new Date(item.createdAt).getTime() >= monthAgo;
-						}
-					});
-					break;
-				case 'older':
-					const monthAgo2 = now - thirtyDays;
-					result = result.filter((item: any) => {
-						if (item.createdAt) {
-							return new Date(item.createdAt).getTime() < monthAgo2;
-						}
-					});
-					break;
-			}
-		}
-
 		return result
-	}, [violationData?.payments, dateFilter])
+	}, [violationData])
 
 	const table = useReactTable({
 		data: filteredData,
@@ -296,7 +312,7 @@ export default function ViolationsTable() {
 					<h3
 						className="tanstak-table-title"
 					>
-						Обнаруженные нарушения
+						{t('violations-detected')}
 					</h3>
 
 					{/* Фильтры */}