continue: work on violation page and table

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>
 
 					{/* Фильтры */}