add start-end-date range for match list and fix pagination

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

@@ -17,13 +17,17 @@ export default function FilePageViolationsList({
 	fileId,
 	status,
 	violationId,
-	caseType
+	caseType,
+	startDate,
+	endDate
 }: {
 	currentPage: number,
 	fileId: string,
 	status: string | undefined,
-	violationId?: string | undefined
-	caseType?: 'claim' | 'complaint'
+	violationId?: string | undefined,
+	caseType?: 'claim' | 'complaint',
+	startDate?: string,
+	endDate?: string
 }) {
 	const t = useTranslations('Global');
 	const tStatus = useTranslations('Match-status');
@@ -38,7 +42,7 @@ export default function FilePageViolationsList({
 		current_page: number;
 	} | null>(null);
 
-	const { data: fileViolations, error, isPending } = useFileViolations(fileId, currentPage, status, violationId);
+	const { data: fileViolations, error, isPending } = useFileViolations(fileId, currentPage, status, violationId, startDate, endDate);
 
 	function selectHandler(violation: ViolationFileDetail) {
 		setSelectedViolation(violation);

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

@@ -147,7 +147,7 @@ export default function ViolationsTable() {
 		return nameWithoutExtension.substring(0, maxNameLength) + '...';
 	};
 
-	const columns = useMemo<ColumnDef<FileViolation>[]>(
+	const baseColumns = useMemo<ColumnDef<FileViolation>[]>(
 		() => [
 			{
 				accessorKey: 'supportId',
@@ -276,32 +276,38 @@ export default function ViolationsTable() {
 						{row.original.countLawCase}
 					</div>
 				),
-			},
-			{
-				accessorKey: 'actions',
-				header: () => (
-					<div className="column">
-						<span>{t('actions')}</span>
-					</div>
-				),
-				cell: ({ row }) => (
-					<div className="actions">
-						<div className="actions-group">
-							<Link
-								href={`/pages/file/${row.original.fileId}`}
-								className="bg-violet-500 hover:bg-violet-600"
-								title={t('view')}
-							>
-								<IconEye />
-							</Link>
-						</div>
-					</div>
-				),
-			},
+			}
 		],
 		[t, viewport]
 	);
 
+	const actionsColumn = useMemo<ColumnDef<FileViolation>>(
+		() => ({
+			accessorKey: 'actions',
+			header: () => (
+				<div className="column">
+					<span>{t('actions')}</span>
+				</div>
+			),
+			cell: ({ row }) => (
+				<div className="actions">
+					<div className="actions-group">
+						<Link
+							href={`/pages/file/${row.original.fileId}?startDate=${dateRange.start_date || ''}&endDate=${dateRange.end_date || ''}`}
+							className="bg-violet-500 hover:bg-violet-600"
+							title={t('view')}
+						>
+							<IconEye />
+						</Link>
+					</div>
+				</div>
+			),
+		}),
+		[t, dateRange.start_date, dateRange.end_date]
+	);
+
+	const columns = useMemo(() => [...baseColumns, actionsColumn], [baseColumns, actionsColumn]);
+
 	const table = useReactTable({
 		data: violationData?.content || [],
 		columns,