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

src/app/[locale]/pages/file/[id]/page.tsx

@@ -48,7 +48,7 @@ export interface FileDetails {
 
 interface PageProps {
 	params: Promise<{ id: string }>;
-	searchParams: Promise<{ page?: string, status?: string , violationId?: string, caseType?: 'complaint' | 'claim'}>;
+	searchParams: Promise<{ page?: string, status?: string, violationId?: string, caseType?: 'complaint' | 'claim', startDate: string, endDate: string }>;
 }
 
 export default async function Page({
@@ -56,7 +56,7 @@ export default async function Page({
 	searchParams
 }: PageProps) {
 	const { id } = await params;
-	const { page, status, violationId, caseType } = await searchParams;
+	const { page, status, violationId, caseType, startDate, endDate } = await searchParams;
 	const currentPage = Number(page) || 1;
 
 	try {
@@ -80,6 +80,8 @@ export default async function Page({
 							fileId={id}
 							violationId={violationId}
 							caseType={caseType}
+							startDate={startDate}
+							endDate={endDate}
 						/>
 						{/* <FilePageNote /> */}
 						{/* <FilePageViolationInfo /> */}

src/app/actions/violationActions.ts

@@ -127,7 +127,7 @@ export async function getViolationFilesArray(props: {
 	}
 }
 
-export async function getFileMatches(fileId: string, page: number, status?: string, violationId?: string) {
+export async function getFileMatches(fileId: string, page: number, status?: string, violationId?: string, startDate?: string, endDate?: string) {
 	const token = await getSessionData('token');
 
 	try {
@@ -138,13 +138,14 @@ export async function getFileMatches(fileId: string, page: number, status?: stri
 				msg_id: 30009,
 				message_body: {
 					file_id: fileId,
-					page: page,
+					page: (page > 0 ? page - 1 : 0),
 					size: 5,
 					sort_direction: 'desc',
 					token: token,
 					status: status,
 					...(violationId && { action: 'getByViolationId' }),
-					...(violationId && { violation_id: violationId })
+					...(violationId && { violation_id: violationId }),
+					...((startDate && endDate) && { start_date: startDate, end_date: endDate })
 				}
 			}),
 			headers: {

src/app/hooks/react-query/useFileViolations.ts

@@ -24,11 +24,11 @@ interface ViolationFile {
 	has_previous: boolean;
 }
 
-export const useFileViolations = (id: string, page: number, status?: string, violationId?: string) => {
+export const useFileViolations = (id: string, page: number, status?: string, violationId?: string, startDate?: string, endDate?: string,) => {
 	return useQuery({
-		queryKey: ['fileViolations', id, page, status, violationId],
+		queryKey: ['fileViolations', id, page, status, violationId, startDate, endDate],
 		queryFn: () => {
-			return getFileMatches(id, page, status, violationId)
+			return getFileMatches(id, page, status, violationId, startDate, endDate)
 		},
 		select: (data: ViolationFile | null) => {
 			if (!data) {

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,