add dropDown filter for matched list

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 }>; // Добавляем searchParams
+	searchParams: Promise<{ page?: string, status?: string }>;
 }
 
 export default async function Page({
@@ -56,7 +56,7 @@ export default async function Page({
 	searchParams
 }: PageProps) {
 	const { id } = await params;
-	const { page } = await searchParams;
+	const { page, status } = await searchParams;
 	const currentPage = Number(page) || 1;
 
 	try {
@@ -76,6 +76,7 @@ export default async function Page({
 					<div>
 						<FilePageViolationsList
 							currentPage={currentPage}
+							status={status}
 							fileId={id}
 						/>
 						<FilePageNote />
@@ -89,6 +90,5 @@ export default async function Page({
 		return (
 			<FilePageNotFound />
 		)
-
 	}
 }

src/app/styles/pages-styles.scss

@@ -4526,7 +4526,7 @@
 		transition: all 0.3s ease;
 		font-size: 14px;
 		max-width: 300px;
-		
+
 		&:disabled {
 			opacity: 0.5;
 		}
@@ -4998,4 +4998,17 @@
 			text-decoration: underline;
 		}
 	}
+}
+
+.status-filter-select {
+	width: 12.5rem;
+
+	.dropdown-wrapper {
+		.dropdown-button {
+			font-size: 12px;
+		}
+/* 		.dropdown-item {
+			font-size: 10px;
+		} */
+	}
 }

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

@@ -1,34 +1,51 @@
-// app/ui/violations/file-page/violation-page-violations-list.tsx
 'use client'
 
 import { useTranslations } from 'next-intl';
 import Link from 'next/link';
-import { useRouter, usePathname } from 'next/navigation';
+import { useRouter, usePathname, useSearchParams } from 'next/navigation';
 import { useState } from 'react';
 import FilePageViolationInfo from '@/app/ui/file-page/violation-table/file-page-violation-info';
 import { useFileViolations } from '@/app/hooks/react-query/useFileViolations';
 import { ViolationFileDetail } from '@/app/hooks/react-query/useFileViolations';
+import DropDownList from '@/app/components/DropDownList';
 
 export default function FilePageViolationsList({
 	currentPage,
-	fileId
+	fileId,
+	status
 }: {
 	currentPage: number,
-	fileId: string
+	fileId: string,
+	status: string | undefined
 }) {
 	const t = useTranslations('Global');
 	const tStatus = useTranslations('Match-status');
 	const router = useRouter();
 	const pathname = usePathname();
+	const searchParams = useSearchParams();
 	const [selectedViolation, setSelectedViolation] = useState<ViolationFileDetail | null>(null);
-	const { data: fileViolations } = useFileViolations(fileId, currentPage, '');
+
+	const { data: fileViolations } = useFileViolations(fileId, currentPage, status);
 
 	if (!fileViolations?.violations) {
 		return null;
 	}
 
 	const handlePageChange = (page: number) => {
-		router.push(`${pathname}?page=${page}`, { scroll: false });
+		const params = new URLSearchParams(searchParams);
+		params.set('page', page.toString());
+		router.push(`${pathname}?${params.toString()}`, { scroll: false });
+	};
+
+	const handleStatusChange = (status: string) => {
+		const params = new URLSearchParams(searchParams);
+		if (status) {
+			params.set('status', status);
+		} else {
+			params.delete('status');
+		}
+		params.set('page', '1');
+		router.push(`${pathname}?${params.toString()}`, { scroll: false });
 	};
 
 	const getPageNumbers = () => {
@@ -60,9 +77,29 @@ export default function FilePageViolationsList({
 				<h3 className="card-title">
 					{t('all-file-violations')}
 				</h3>
-				<span>
+
-					{t('total-violations')}: {fileViolations.total_elements} | {t('page')} {fileViolations.current_page} {t('out-of')} {fileViolations.total_pages}
+				<div className="flex items-center gap-4">
-				</span>
+					<div
+						className="status-filter-select"
+					>
+						<DropDownList
+							value={status ? tStatus(status) : t('all-statuses')}
+							callBack={handleStatusChange}
+						>
+							<li value=''>{t('all-statuses')}</li>
+							<li value="NEW">{tStatus('NEW')}</li>
+							<li value="SHOWED">{tStatus('SHOWED')}</li>
+							<li value="LEGAL_IN_WORK">{tStatus('LEGAL_IN_WORK')}</li>
+							<li value="COMPLAINT_IN_WORK">{tStatus('COMPLAINT_IN_WORK')}</li>
+							<li value="COMPLAINT_AND_LEGAL_IN_WORK">{tStatus('COMPLAINT_AND_LEGAL_IN_WORK')}</li>
+							<li value="AUTHORIZED_USE">{tStatus('AUTHORIZED_USE')}</li>
+						</DropDownList>
+					</div>
+					<span>
+						{t('total-violations')}: {fileViolations.total_elements} | {t('page')} {fileViolations.current_page} {t('out-of')} {fileViolations.total_pages}
+					</span>
+				</div>
+
 			</div>
 
 			<div

src/i18n/messages/en.json

@@ -380,7 +380,8 @@
 		"violation-id": "Violation ID",
 		"no-information-about-the-complaint": "No information about the complaint",
 		"the-complaint-has-not-been-registered": "The complaint has not been registered",
-		"the-complaint-has-been-registered": "The complaint has been registered"
+		"the-complaint-has-been-registered": "The complaint has been registered",
+		"all-statuses": "Все статусы"
 	},
 	"Login-register-form": {
 		"and": "and",

src/i18n/messages/ru.json

@@ -380,7 +380,8 @@
 		"violation-id": "ID нарушения",
 		"no-information-about-the-complaint": "Нет информации о жалобе",
 		"the-complaint-has-not-been-registered": "Жалоба не зарегистрирована",
-		"the-complaint-has-been-registered": "Жалоба зарегистрирована"
+		"the-complaint-has-been-registered": "Жалоба зарегистрирована",
+		"all-statuses": "Все статусы"
 	},
 	"Login-register-form": {
 		"and": "и",